/* ---------- Global Fix ---------- */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* Prevent horizontal scrolling globally */
}

/* ==============================
   SECTION 1
============================== */
.telco-section1 {
  background-image: url('/images/TelcoBg.png');
  min-height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-top: -90px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  overflow: hidden;
}

.telco-section1 .text-center {
  max-width: 1120px;
  width: 100%;
}

/* ========== Typography ========== */
.telco-section1 h1 {
  font-size: 70px;
  line-height: 1.1;
  color: #fff;
  font-weight: 700;
  margin-top: 25px;
}

.telco-section1 h2 {
  font-size: 28px;
  line-height: 1.4;
  color: #fff;
  font-weight: 300;
  margin-top: 20px;
}

.telco-icon {
  width: 100px;
  height: auto;
}

/* ========== Responsive Design ========== */
@media (max-width: 1200px) {
  .telco-section1 h1 {
    font-size: 56px;
  }
  .telco-section1 h2 {
    font-size: 24px;
  }
}

@media (max-width: 992px) {
  .telco-section1 h1 {
    font-size: 46px;
  }
  .telco-section1 h2 {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .telco-section1 {
    padding: 80px 20px;
    margin-top: -250px;
  }

  .telco-section1 h1 {
    font-size: 36px;
    line-height: 1.3;
  }

  .telco-section1 h2 {
    font-size: 18px;
    line-height: 1.4;
  }

  .telco-icon {
    width: 70px;
  }
}

@media (max-width: 480px) {
  .telco-section1 h1 {
    font-size: 28px;
  }

  .telco-section1 h2 {
    font-size: 20px;
  }

  .telco-icon {
    width: 60px;
  }
}

/* ========== Animation ========== */
@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in {
  animation: slideInUp 1.2s ease-out forwards;
}


 
/* ==============================
   SECTION 2
============================== */

#telco-section2 {
    overflow: hidden;
}

/* ---------- Title ---------- */
#telco-section2-1 {
    margin-bottom: 80px;
}

#telco-section2-1 h1 {
    font-size: 70px;
    line-height: 70px;
    font-weight: 600;
    background: linear-gradient(90deg, #FFFFFF 0%, #B1C9EF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#telco-section2-1 h6 {
    font-size: 28px;
    line-height: 36px;
    font-weight: 300;
    background: linear-gradient(90deg, #FFFFFF 0%, #B1C9EF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#telco-section2-1 .text-center {
    max-width: 1120px;
}

/* ---------- Left Section ---------- */
#sec2left {
    max-width: 620px;
}

#sec2left img {
    width: 65px;
    height: 65px;
    flex-shrink: 0;            
}

#sec2left h1 {
    font-size: 55px;
    line-height: 70px;
    font-weight: 600;
    color: #E6E6E7;
    margin: 0;
}

#sec2left h6 {
    font-size: 44px;
    line-height: 55px;
    font-weight: 400;
    color: #CDCDCF;
    margin: 0;
}

/* ---------- Right Section ---------- */
#sec2right img {
    height: 480px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
    #telco-section2-1 h1 { font-size: 56px; }
    #sec2left h1 { font-size: 48px; }
    #sec2left h6 { font-size: 36px; }
}

@media (max-width: 992px) {
    #telco-section2-1 h1 { font-size: 46px; }
    #telco-section2-1 h6 { font-size: 24px; }
    #sec2left h1 { font-size: 40px; }
    #sec2left h6 { font-size: 32px; } 
}

@media (max-width: 768px) {
    #telco-section2{
        margin-top: -200px;
    }
    #telco-section2-1 h1 { font-size: 36px; }
    #telco-section2-1 h6 { font-size: 20px; }

    #telco-section2-2 {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    #sec2left {
        flex-direction: column;  /* stack image above text */
        text-align: center;
        align-items: center;
        gap: 15px;
    }

    #sec2left h1 { font-size: 32px; }
    #sec2left h6 { font-size: 28px; } 
}

@media (max-width: 480px) {
    #telco-section2-1 h1 { font-size: 28px; }
    #telco-section2-1 h6 { font-size: 16px; }
    #sec2left h1 { font-size: 26px; }
    #sec2left h6 { font-size: 16px; } 
}
#sec2right img {
    height: 300px;
}

/* ==============================
   ANIMATIONS
============================== */
.animate { opacity: 0; transition: all 1.2s ease-out; }

.slide-up { transform: translateY(60px); }
.slide-left { transform: translateX(-80px); }
.slide-right { transform: translateX(80px); }

.animate.active { 
    opacity: 1; 
    transform: translateX(0) translateY(0); 
}


/* ==============================
   SECTION 3
============================== */

#telco-section3 {
    margin-top: 50px;
    overflow: hidden;
}

/* ---------- Title ---------- */
#telco-section3-1 {
    margin-bottom: 80px;
}

#telco-section3-1 h1 {
    font-size: 70px;
    line-height: 70px;
    font-weight: 600;
    background: linear-gradient(90deg, #FFFFFF 0%, #B1C9EF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#telco-section3-1 h6 {
    font-size: 28px;
    line-height: 36px;
    font-weight: 300;
    background: linear-gradient(90deg, #FFFFFF 0%, #B1C9EF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#telco-section3-1 .text-center {
    max-width: 1120px;
}

/* ---------- Right Section ---------- */
#sec3right {
    max-width: 620px;
}

#sec3right img {
    width: 65px;
    height: 65px;
    flex-shrink: 0;            
}

#sec3right h1 {
    font-size: 55px;
    line-height: 70px;
    font-weight: 600;
    color: #E6E6E7;
    margin: 0;
}

#sec3right h6 {
    font-size: 44px;
    line-height: 55px;
    font-weight: 400;
    color: #CDCDCF;
    margin: 0;
}

/* ---------- Left Section ---------- */
#sec3left img {
    height: 480px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
    #telco-section3-1 h1 { font-size: 56px; }
    #sec3left h1 { font-size: 48px; }
    #sec2left h6 { font-size: 36px; }
}

@media (max-width: 992px) {
    #telco-section2-1 h1 { font-size: 46px; }
    #telco-section2-1 h6 { font-size: 24px; }
    #sec3right h1 { font-size: 40px; }
    #sec3right h6 { font-size: 32px; }
    #sec3left img { height: 400px; }
}

@media (max-width: 768px) {
    #telco-section3-1 h1 { font-size: 36px; }
    #telco-section3-1 h6 { font-size: 20px; }

    #telco-section3-2 {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    #sec3right {
        flex-direction: column;  /* stack image above text */
        text-align: center;
        align-items: center;
        gap: 15px;
    }

    #sec3right h1 { font-size: 32px; }
    #sec3right h6 { font-size: 28px; }
     
}

@media (max-width: 480px) {
    #telco-section3-1 h1 { font-size: 28px; }
    #telco-section3-1 h6 { font-size: 20px; }
    #sec3right h1 { font-size: 26px; }
    #sec3right h6 { font-size: 16px; }
    #telco-section3-1 { margin-top: 20px !important;}
    
}


/* ==============================
   SECTION 4
============================== */

#telco-section4 {
    margin-top: 50px;
    overflow: hidden;
}

/* ---------- Title ---------- */
#telco-section4-1 {
    margin-bottom: 80px;
}

#telco-section4-1 h1 {
    font-size: 70px;
    line-height: 70px;
    font-weight: 600;
    background: linear-gradient(90deg, #FFFFFF 0%, #B1C9EF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#telco-section4-1 h6 {
    font-size: 28px;
    line-height: 36px;
    font-weight: 300;
    background: linear-gradient(90deg, #FFFFFF 0%, #B1C9EF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#telco-section4-1 .text-center {
    max-width: 1120px;
}

/* ---------- Mission Boxes ---------- */
#telco-section4-2{ 
    width: 100%;
    background-image: url(/images/Telco_lap.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 130vh;
}

#telco-section4-2 .mission-box { 
    text-align: center; 
    border-right: 2px solid rgba(79, 79, 88, 1); 
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

#telco-section4-2 .mission-box:last-child {
    border-right: none;
}

#telco-section4-2 .mission-box img {
    width: 75px;
    height: 75px;
}

#telco-section4-2 .mission-box p {
    font-weight: 400;
    font-style: Regular;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0%;
    text-align: center; 
    margin-top: 20px;
    color: #E6E6E7;
}

/* ---------- Visible state ---------- */
#telco-section4-2 .mission-box.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    #telco-section4-1 h1 { font-size: 46px; }
    #telco-section4-1 h6 { font-size: 24px; }
    #telco-section4-2 .mission-box {
        flex: 1 1 45%;
        border-right: none;
    }
}

@media (max-width: 768px) {
    #telco-section4-1 h1 { font-size: 36px; }
    #telco-section4-1 h6 { font-size: 20px; }
    #telco-section4-2 .mission-box {
        flex: 1 1 100%;
        border-right: none;
    }
    #telco-section4-2 .mission-box img {
        max-height: 60px;
    }
    #telco-section4-2 .mission-box p {
        font-size: 30px;
    }
}

@media (max-width: 480px) {
    #telco-section4-2 {
        height: auto;
    }
    #telco-section4{ margin-top: 0px; }
    #telco-section4-1 { margin-bottom: 20px; margin-top: 20px !important; }
    #telco-section4-1 h1 { font-size: 28px; }
    #telco-section4-1 h6 { font-size: 20px; }
    #telco-section4-2 .mission-box p { font-size: 16px; }
}

/* ==============================
   SECTION 5: IMAGE ANIMATION
============================== */
#telco-section5 {
    position: relative;
    overflow: visible;
    margin-top: -300px; 
    z-index: -1; 
}

#telco-section5-center {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

#telco-section5-center img {
    width: 100%;       
    max-width: 1400px;
    height: auto;
    display: block;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

#telco-section5-center img.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 992px) {
    #telco-section5-center img { width: 100%; }
}

@media (max-width: 768px) {
    #telco-section5 { margin-top: -60px; }
    #telco-section5-center img { width: 100%; }
}

@media (max-width: 480px) {
    #telco-section5 { margin-top: -40px; }
    #telco-section5-center img { width: 100%; }
}