#marquee-section { background-color: #231815; color: #fff; padding: 25px 0; overflow: hidden; white-space: nowrap; margin: 0; border-top: 6px solid #00AEEF; border-bottom: 6px solid #E4007F; box-shadow: 0 10px 30px rgba(0,0,0,0.1); position: relative; z-index: 10; }
#marquee-section .track { display: inline-block; animation: scrollText 25s linear infinite; }
#marquee-section .marquee-text { font-size: 2.5rem; font-weight: 900; letter-spacing: 0.15em; display: inline-block; padding-right: 50px; text-transform: uppercase; }
#marquee-section .star { color: #FFF000; margin: 0 20px; }
#about-section { height: 400vh; background-color: #FAFAFA; position: relative; }
#about-section .about-sticky-wrap { position: sticky; top: 0; height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#about-section .about-watermark { position: absolute; right: -5%; top: 5%; font-size: 18rem; font-weight: 900; color: #00AEEF; opacity: 0.04; writing-mode: vertical-rl; text-transform: uppercase; letter-spacing: -0.05em; z-index: 0; pointer-events: none; user-select: none; line-height: 0.8; }
#about-section .about-bg-elements { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; }
#about-section .about-circle-1 { position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle,rgba(0,174,239,0.05) 0%,transparent 70%); top: -150px; left: -150px; }
#about-section .about-dots { position: absolute; width: 200px; height: 200px; background-image: radial-gradient(rgba(35,24,21,0.1) 2px,transparent 2px); background-size: 20px 20px; top: 30%; left: 45%; z-index: 1; }
#about-section .about-container { max-width: 1300px; margin: 0 auto; display: flex; align-items: center; position: relative; z-index: 2; width: 100%; padding: 0 5%; }
#about-section .about-visual { flex: 1; position: relative; z-index: 2; }
#about-section .about-image-wrap {position: relative;border-radius: 40px;overflow: hidden;box-shadow: 0 30px 60px rgba(0,0,0,0.08);transform: rotate(-5deg)scale(1.1)translateX(-70px);transition: transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275);border: 12px solid #fff;width: 100%;height: 550px;background: #fff;}
#about-section .about-image-wrap:hover {transform: rotate(-2deg) scale(1.02);}
#about-section .img-card { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 6rem; transition: transform 0.8s cubic-bezier(0.68,-0.55,0.265,1.55),opacity 0.8s ease; }
#about-section .img-card:nth-child(1){
    z-index: 4;
}
#about-section .img-card:nth-child(2){
    z-index: 3;
}
#about-section .img-card:nth-child(3){
    z-index: 2;
}
#about-section .img-card:nth-child(4){
    z-index: 1;
}
#about-section .img-card.out { transform: translateY(-100%); opacity: 0; pointer-events: none; }
#about-section .about-badge { position: absolute; bottom: -30px; right: -30px; background: #FFF000; width: 160px; height: 160px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #231815; font-weight: 900; box-shadow: 0 15px 30px rgba(255,240,0,0.2); border: 5px solid #fff; transform: rotate(15deg); z-index: 5; animation: float 6s infinite alternate ease-in-out; }
#about-section .about-badge-num { font-size: 3.5rem; line-height: 1; }
#about-section .about-badge-text { font-size: 1.1rem; letter-spacing: 2px; }
#about-section .about-content { flex: 1.1; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); padding: 80px 70px; border-radius: 40px; box-shadow: 0 25px 50px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.03); position: relative; z-index: 5; margin-left: 80px; }
#about-section .about-content::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 8px; background: linear-gradient(90deg,#00AEEF,#E4007F,#FFF000); border-radius: 40px 40px 0 0; }
#about-section .about-title-group { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
#about-section .section-title { text-align: left; margin-bottom: 0; font-size: 3rem; }
#about-section .section-title::after { left: -5%; width: 110%; bottom: 10px; }
#about-section .about-subtitle { font-size: 1.3rem; font-weight: 900; color: #E4007F; margin-bottom: 8px; display: inline-block; padding-bottom: 5px; border-bottom: 3px dotted rgba(228,0,127,0.3); }
#about-section .about-desc { font-size: 1.2rem; line-height: 1.8; color: #555; font-weight: 500; margin-bottom: 25px; text-align: justify; }
#about-section .about-actions { margin-top: 10px; display: flex; align-items: center; gap: 20px; }
#portfolio-section {padding: 10px 0;background-color: #fff;position: relative;overflow: hidden;z-index: 5;}
#portfolio-section .carousel-wrapper { width: 100%; overflow: hidden; position: relative; }
#portfolio-section .carousel-container { display: flex; width: max-content; animation: scrollPortfolio 30s linear infinite; }
#portfolio-section .portfolio-item { width: 450px; height: 350px; background: #eee; flex-shrink: 0; overflow: hidden; margin: 0 5px; }
#portfolio-section .img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 6rem; background: linear-gradient(135deg,#f5f5f5,#e0e0e0); color: #ccc; }
#fsc-section { position: relative; padding: 150px 5%; background-color: #2E7D32; color: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; z-index: 10; border-top: 8px solid #FFF000; border-bottom: 8px solid #4CAF50; }
#fsc-section .fsc-bg-parallax { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center,rgba(67,160,71,0.9) 0%,rgba(27,94,32,0.95) 100%),url('data:image/svg+xml;utf8,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="1" fill="rgba(255,255,255,0.05)"/></svg>'); background-attachment: fixed; z-index: 0; }
#fsc-section .fsc-container { position: relative; z-index: 2; max-width: 900px; display: flex; flex-direction: column; align-items: center; }
#fsc-section .fsc-icon-large { font-size: 4.5rem; margin-bottom: 25px; background: rgba(255,255,255,0.1); width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0 0 50px rgba(0,0,0,0.2); backdrop-filter: blur(5px); animation: pulseFSC 3s infinite alternate; border: 2px solid rgba(255,255,255,0.2); }
#fsc-section .fsc-title { font-size: 3.5rem; font-weight: 900; margin-bottom: 15px; letter-spacing: 0.05em; text-shadow: 0 5px 15px rgba(0,0,0,0.3); }
#fsc-section .fsc-subtitle { font-size: 1.5rem; font-weight: 700; color: #C8E6C9; margin-bottom: 30px; letter-spacing: 0.05em; }
#fsc-section .fsc-desc { font-size: 1.15rem; line-height: 1.8; margin-bottom: 40px; color: #E8F5E9; font-weight: 500; text-align: center; }
#fsc-section .fsc-btn { display: inline-flex; align-items: center; gap: 20px; background: #FFF; color: #2E7D32; padding: 8px 8px 8px 30px; border-radius: 50px; font-weight: 900; font-size: 1.1rem; text-decoration: none; transition: all 0.4s ease; box-shadow: 0 15px 30px rgba(0,0,0,0.2); border: 2px solid transparent; }
#fsc-section .fsc-btn:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); background: #FFF000; color: #231815; border-color: #FFF000; }
#fsc-section .fsc-btn .arrow-circle { width: 45px; height: 45px; background: #2E7D32; color: #FFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.4s; font-size: 1.2rem; }
#fsc-section .fsc-btn:hover .arrow-circle { background: #231815; color: #FFF000; transform: translateX(3px) rotate(-45deg); }
#fsc-section .leaf { position: absolute; background: rgba(255,255,255,0.06); border-radius: 50px 0 50px 0; z-index: 1; animation: floatLeaf 20s infinite linear; pointer-events: none; border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(2px); }
#fsc-section .leaf-1 { width: 80px; height: 80px; top: -10%; left: 15%; animation-duration: 22s; }
#fsc-section .leaf-2 { width: 120px; height: 120px; top: 40%; right: 10%; animation-duration: 28s; animation-delay: -5s; transform: rotate(45deg); opacity: 0.04; }
#fsc-section .leaf-3 { width: 60px; height: 60px; bottom: -20%; left: 25%; animation-duration: 18s; animation-delay: -12s; transform: rotate(-30deg); }
#services-section { padding: 180px 5% 150px; background-color: #fff; position: relative; }
#services-section .services-watermark { position: absolute; left: -2%; top: 0; font-size: 15rem; font-weight: 900; color: #231815; opacity: 0.02; text-transform: uppercase; letter-spacing: 0.02em; z-index: 0; pointer-events: none; user-select: none; }
#services-section .services-container { display: flex; gap: 80px; max-width: 1400px; margin: 0 auto; align-items: flex-start; position: relative; z-index: 2; }
#services-section .services-left { width: 30%; position: sticky; top: 140px; align-self: flex-start; }
#services-section .services-intro { margin-top: 35px; font-size: 1.2rem; color: #555; line-height: 1.8; font-weight: 500; margin-bottom: 40px; }
#services-section .services-right { width: 70%; display: flex; flex-direction: column; gap: 50px; }
#services-section .service-row { display: flex; background: #fff; border-radius: 30px; box-shadow: 0 20px 40px rgba(0,0,0,0.04); overflow: hidden; border: 1px solid rgba(0,0,0,0.03); transition: all 0.5s cubic-bezier(0.175,0.885,0.32,1.275); position: relative; }
#services-section .service-row::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 100%); z-index: 1; pointer-events: none; }
#services-section .service-row:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0,0,0,0.08); }
#services-section .sr-bar {width: 80px;display: flex;flex-direction: column;align-items: center;position: relative;z-index: 2;}
#services-section .sr-no {background: #fff;width: 100%;text-align: center;padding: 20px 0;font-weight: 900;font-size: 1.6rem;border-radius: 0 0 20px 0;}
#services-section .sr-vertical-text { writing-mode: vertical-rl; transform: rotate(180deg); padding: 40px 0; letter-spacing: 4px; font-weight: 900; font-size: 1rem; opacity: 0.9; }
#services-section .sr-content {flex: 2;padding: 50px;display: flex;flex-direction: column;justify-content: center;position: relative;z-index: 2;}
#services-section .sr-title { font-size: 2.4rem; font-weight: 900; margin-bottom: 20px; display: flex; align-items: center; gap: 15px; }
#services-section .sr-desc { font-size: 1.15rem; color: #666; line-height: 1.7; margin-bottom: 35px; }
#services-section .sr-features { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
#services-section .sr-feature-item { background: #FAFAFA; padding: 15px 20px; border-radius: 12px; font-size: 1rem; font-weight: 700; color: #333; display: flex; align-items: center; gap: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); transition: all 0.3s; }
#services-section .service-row:hover .sr-feature-item { background: #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
#services-section .sr-feature-item i { font-style: normal; font-size: 1.2rem; }
#services-section .sr-visual { flex: 1; padding: 50px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; }
#services-section .sr-icon-wrap { width: 180px; height: 180px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 5rem; box-shadow: 0 25px 50px rgba(0,0,0,0.05); transition: transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275); }
#services-section .service-row:hover .sr-icon-wrap { transform: scale(1.15) rotate(8deg); }
#services-section .theme-c .sr-bar { background: #00AEEF; color: #fff; }
#services-section .theme-c .sr-no { color: #00AEEF; }
#services-section .theme-c .sr-title { color: #00AEEF; }
#services-section .theme-c .sr-feature-item i { color: #00AEEF; }
#services-section .theme-c .sr-visual { background: linear-gradient(135deg,rgba(0,174,239,0.02),rgba(0,174,239,0.08)); border-left: 2px dashed rgba(0,174,239,0.2); }
#services-section .theme-m .sr-bar { background: #E4007F; color: #fff; }
#services-section .theme-m .sr-no { color: #E4007F; }
#services-section .theme-m .sr-title { color: #E4007F; }
#services-section .theme-m .sr-feature-item i { color: #E4007F; }
#services-section .theme-m .sr-visual { background: linear-gradient(135deg,rgba(228,0,127,0.02),rgba(228,0,127,0.08)); border-left: 2px dashed rgba(228,0,127,0.2); }
#services-section .theme-y .sr-bar { background: #FFF000; color: #231815; }
#services-section .theme-y .sr-no { color: #231815; }
#services-section .theme-y .sr-title { color: #231815; }
#services-section .theme-y .sr-feature-item i { color: #d4c800; }
#services-section .theme-y .sr-visual { background: linear-gradient(135deg,rgba(255,240,0,0.05),rgba(255,240,0,0.12)); border-left: 2px dashed rgba(255,240,0,0.3); }
#services-section .theme-k .sr-bar { background: #231815; color: #fff; }
#services-section .theme-k .sr-no {color: #231815;}
#services-section .theme-k .sr-title { color: #231815; }
#services-section .theme-k .sr-feature-item i { color: #231815; }
#services-section .theme-k .sr-visual { background: linear-gradient(135deg,rgba(35,24,21,0.01),rgba(35,24,21,0.04)); border-left: 2px dashed rgba(35,24,21,0.1); }
@media (max-width:992px) {
  #about-section .about-sticky-wrap { flex-direction: column; justify-content: flex-start; padding-top: 100px; }
  #about-section .about-container { flex-direction: column; gap: 30px; }
  #about-section .about-visual { width: 100%; max-width: 500px; margin: 0 auto; }
  #about-section .about-image-wrap { height: 350px; }
  #about-section .about-content { padding: 40px 30px; text-align: center; margin-left: 0; margin-top: 0; }
  #about-section .about-watermark { display: none; }
  #about-section .about-title-group { justify-content: center; }
  #about-section .section-title { text-align: center; }
  #about-section .section-title::after { left: 10%; width: 80%; }
  #about-section .about-desc { text-align: center; }
  #about-section .about-actions { justify-content: center; }
  #portfolio-section { padding: 40px 0; }
  #fsc-section { padding: 120px 5%; }
  #fsc-section .fsc-title { font-size: 2.8rem; }
  #services-section .services-watermark { font-size: 10rem; top: 2%; left: 5%; }
  #services-section .services-container { flex-direction: column; }
  #services-section .services-left { width: 100%; position: relative; top: 0; text-align: center; margin-bottom: 30px; }
  #services-section .services-right { width: 100%; }
  #services-section .service-row { flex-direction: column; }
  #services-section .sr-bar { width: 100%; flex-direction: row; border-radius: 0; }
  #services-section .sr-no { width: auto; padding: 15px 30px; border-radius: 0 0 20px 0; }
  #services-section .sr-vertical-text { writing-mode: horizontal-tb; transform: none; padding: 0 25px; font-size: 1.2rem; letter-spacing: 2px; }
  #services-section .sr-visual { border-left: none; border-top: 2px dashed rgba(0,0,0,0.1); }
}
@media (max-width:768px) {
  #marquee-section { margin: 0; padding: 15px 0; border-width: 4px; }
  #marquee-section .marquee-text { font-size: 1.8rem; }
  #about-section .about-sticky-wrap { padding-top: 80px; }
  #about-section .about-image-wrap { height: 280px; }
  #about-section .about-badge { width: 100px; height: 100px; bottom: -10px; right: -10px; }
  #about-section .about-badge-num { font-size: 2.2rem; }
  #about-section .about-content { padding: 25px 20px; }
  #portfolio-section { padding: 30px 0; }
  #portfolio-section .portfolio-item { width: 280px; height: 200px; margin: 0 3px; }
  #fsc-section { padding: 100px 5%; border-top: 5px solid #FFF000; border-bottom: 5px solid #4CAF50; }
  #fsc-section .fsc-icon-large { width: 90px; height: 90px; font-size: 3.5rem; margin-bottom: 15px; }
  #fsc-section .fsc-title { font-size: 2.2rem; }
  #fsc-section .fsc-subtitle { font-size: 1.2rem; }
  #services-section { padding: 80px 5% 100px; }
  #services-section .services-watermark { display: none; }
  #services-section .sr-content { padding: 35px 25px; }
  #services-section .sr-features { grid-template-columns: 1fr; }
  #services-section .sr-visual { padding: 35px 25px; }
  #services-section .sr-icon-wrap { width: 140px; height: 140px; font-size: 4rem; }
}