/* DYLEN
/* OTHER ALIAS LTD
/* ---------------------------------------------- */

/* ---------------------------------------------- */
/* VARIABLES
/* ---------------------------------------------- */
:root {
    --blue: #07306D;
    --yellow: #E2BC2C;
     --white: #FFFFFF;
     --gray: #E9ECF2;
     --font-primary: 'Montserrat', Helvetica, Arial, sans-serif;

   
}




/* ---------------------------------------------- */
/* TEXT COLOURS
/* ---------------------------------------------- */

.text-blue {
    color: var(--blue);
}

.text-yellow {
    color: var(--yellow);
}




/* ---------------------------------------------- */
/* DESKTOP LAYOUT
/* ---------------------------------------------- */

@media (min-width: 992px){

    .ptd6 {
        padding-top: 120px;
    }
    .ptd5 {
        padding-top: 100px;
    }
    .ptd4 {
        padding-top: 80px;
    }
    .ptd3 {
        padding-top: 60px;
    }
    .ptd2 {
        padding-top: 40px;
    }
    .ptd1 {
        padding-top: 20px;
    }
    .pbd6 {
        padding-bottom: 120px;
    }
    .pbd5 {
        padding-bottom: 100px;
    }
    .pbd4 {
        padding-bottom: 80px;
    }
    .pbd3 {
        padding-bottom: 60px;
    }
    .pbd2 {
        padding-bottom: 40px;
    }
    .pbd1 {
        padding-bottom: 20px;
    }
    .psdn {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .psd1 {
        padding-left: 20px;
        padding-right: 20px;
    }
    .psd2 {
        padding-left: 30px;
        padding-right: 30px;
    }
    .psd3 {
        padding-left: 40px;
        padding-right: 40px;
    }
    .tcd {
        text-align: center;
    }
    .tld {
        text-align: left;
    }
    .trd {
        text-align: right;
    }

}

/* ---------------------------------------------- */
/* MOBILE LAYOUT
/* ---------------------------------------------- */

@media (max-width: 991px){

    .ptm6 {
        padding-top: 60px;
    }
    .ptm5 {
        padding-top: 50px;
    }
    .ptm4 {
        padding-top: 40px;
    }
    .ptm3 {
        padding-top: 30px;
    }
    .ptm2 {
        padding-top: 20px;
    }
    .ptm1 {
        padding-top: 10px;
    }
    .pbm6 {
        padding-bottom: 60px;
    }
    .pbm5 {
        padding-bottom: 50px;
    }
    .pbm4 {
        padding-bottom: 40px;
    }
    .pbm3 {
        padding-bottom: 30px;
    }
    .pbm2 {
        padding-bottom: 20px;
    }
    .pbm1 {
        padding-bottom: 10px;
    }
    .psmn {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .psm1 {
        padding-left: 20px;
        padding-right: 20px;
    }
    .psm2 {
        padding-left: 30px;
        padding-right: 30px;
    }
    .psm3 {
        padding-left: 40px;
        padding-right: 40px;
    }
    .tcm {
        text-align: center;
    }
    .tlm {
        text-align: left;
    }
    .trm {
        text-align: right;
    }
    .container {
        padding-left: 35px;
        padding-right: 35px;
    }

}

/* ---------------------------------------------- /*
 * LARGE BREAK POINT
/* ---------------------------------------------- */


/* ================= GLOBAL ================= */




body{
font-family: var(--font-primary);
background:#FFFFFF;
}

/* HEADER */

.header{
padding:20px 0;
}

.logo-img{
height:60px;
}



/* HERO */

.hero{
padding:85px 0;
text-align:center;
}

.hero-title {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 105px;
    line-height: 95px;
    letter-spacing: -3px;
    text-align: center;
    color: var(--blue);
    margin-bottom: 20px;
}

.hero-subtitle {
    font-family: var(--font-primary);
    font-weight: 400; /* Regular */
    font-size: 41px;
    line-height: 50px;
    letter-spacing: -1px;
    text-align: center;
    margin-bottom: 50px;
    color: var(--blue);
}



/* BUTTON */

.btn-yellow {
    font-family: var(--font-primary);
   background: var(--yellow);
    width: 165px;
    height: 53px;

    font-size: 13px;
    font-weight: 600;
    line-height: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-align: center;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: none;
    
}

.btn-yellow:hover{
     background: var(--blue);
     color: var(--yellow);
}

.btn-blue{
   font-family: var(--font-primary);
   background: var(--blue);
    width: 165px;
    height: 53px;

    font-size: 13px;
    font-weight: 600;
    line-height: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-align: center;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: none;
    cursor: pointer;
    color: var(--yellow);
}


.btn-yellow {
  transition: transform 0.5s ease, box-shadow 0.5s ease !important;
}


.btn-blue {
  transition: transform 0.5s ease, box-shadow 0.5s ease !important;
}

.btn-blue:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 0 #07306D,
    0 20px 30px rgba(0,0,0,0.25);
}








/* SERVICES */


.service-section {
  padding: 80px 0px;

  background: linear-gradient(
    to right,
    #07306D 50%,
    #E2BC2C 50%
  );
}






.service-section {
  width: 100%;
}



/* Background full width effect */
.service-blue {
  
  color: #fff;
    
}

.service-yellow {

  color: #0b2c5f;
  /* background-color: var(--yellow); */
}



.service-title {
    font-family: var(--font-primary);
    font-weight: 600; /* SemiBold */
    font-size: 60px;
    line-height: 60px;
    letter-spacing: -2px;
    margin-bottom: 15px;
}

.service-subtitle {
    font-family: var(--font-primary);
    font-weight: 600; /* SemiBold */
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0px;
    /* padding-right: 150px; */
}


.service-text{
font-size:14px;
line-height:22px;
margin-bottom:20px;
}

.service-icon {
    width: 84px;
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}












/* CONTACT */

.contact{
padding:80px 0;
}

.contact-title {
    font-family: var(--font-primary);
    font-weight: 600; /* SemiBold */
    font-size: 60px;
    line-height: 61px;
    letter-spacing: -2px;
    margin-bottom: 15px;
    color:var(--blue)
}


/* FOOTER */

.footer{
background:var(--gray);

text-align:center;
}

/* ================= MOBILE ================= */

@media(max-width:991px){

.logo-img{
height:40px;
}

.hero{
padding: 24px 0px;
}

.hero-title{
font-size:32px;
line-height:40px;
}

.hero-subtitle{
margin-bottom: 68px;
}

.service-box{

min-height:auto;
}

    .service-title {
        font-size: 44px;
        line-height: 44px;
    }

.contact{
padding:50px 20px;
}

}


.contact-section{
background: var(--white);
}




.contact-desc {
    font-family: var(--font-primary);
    font-weight: 400;       /* SemiBold */
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;

    color: var(--blue);
   
    margin-bottom: 0;
}


.contact-item{
margin-bottom:12px;
font-size:14px;
line-height:22px;
color:#0b2c5f;
}

.contact-icon {
    width: 18px;
}

.contact-text {
    font-family: var(--font-primary); /* বা সরাসরি Montserrat stack */
    font-weight: 600; /* SemiBold */
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0px;
    color: var(--blue);
}





.footer-text {
    font-family: var(--font-primary);
    font-weight: 400; /* Regular */
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0px;
    color: var(--blue)
}




/* Mobile responsive */
@media (max-width: 991px) {
  .footer {
    padding-top: 18px;
    padding-bottom: 18px;
  }

.footer-text {
    
    font-size: 14px;
    line-height: 30px;
   
}
}

.header{
    background:#FFFFFF;
}

/* Logo */
.logo-img{
    height:60px;
}

/* Contact text */
.contact-info span {
    font-family: var(--font-primary);
    font-weight: 600;        /* SemiBold */
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
    color: var(--blue);
}

/* Icons */
.contact-icon{
    width:18px;
    height:18px;
}



.contact-icon {
    width: 18px;
}

.contact-text {
    font-family: var(--font-primary);
    font-weight: 600; /* SemiBold */
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0px;
    color: var(--blue); /* চাইলে text-primary বাদ দিতে পারো */
}


.site-logo {
    width: 214.58px;
    max-width: 100%;
    height: auto;
}


/* Mobile adjustments */
@media (max-width:991px){

    .logo-img{
        height:70px;
    }

    .contact-info span{
        font-size:15px;
    }

     .hero-title {
        font-family: var(--font-primary);
        font-weight: 600;
        font-size: 41px;
        line-height: 41px;
        letter-spacing: -1.53px;
        text-align: center;
    }

    .hero-subtitle {
    font-family: var(--font-primary);
    font-weight: 400; /* Regular */
    font-size: 25px;
    line-height: 28px;
    letter-spacing: -0.59px;
    text-align: center;
}



.service-subtitle {
   
    font-size: 18px;
    line-height: 26px;
        padding-right: 11px;
    
}

.pad-phon {
    padding: 0 !important;
}
.text-padding {
    text-align: left !important;
    padding-left: 0;
    padding-right: 0;
}



.service-section {
  padding: 80px 0;
  background: #07306D; /* default blue */
}




.contact-text {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 15px;
    line-height: 28px;
    letter-spacing: 0px;
    color: var(--blue);
}

.contact-desc {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0;
    color: var(--blue);
    margin-bottom: 0;
}

.service-yellow {
            color: var(--blue);
       
        position: relative;
                
              
}

.service-blue {
    color: #fff;
    /* padding-left: 0;
    padding-left: 12px; */
    /* background-color: var(--blue); */
     
}

.service-icon-yellow {
   
    margin-top: 25px;
}

.hero {
   padding: 15px 23px 35px 23px;
    text-align: center;
}


.service-section {
     padding: 0px 0px; 
 
}
.py-5 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}
}



.service-section {
  
  background: linear-gradient(
    to right,
    #07306D 50%,
    #E2BC2C 50%
  );
}

@media (max-width: 991px) {
    .service-section {
        background: linear-gradient(to bottom, #07306D 51%, #E2BC2C 48%);

    }
}






@media (min-width: 992px) and (max-width: 1399.98px) {

  .service-title {
      
      font-size: 49px;
      line-height: 53px;
    
  }


  .contact-text {
    
    font-size: 17px;
    line-height: 21px;
    
}

.hero-title {
   
    font-size: 88px;
    line-height: 79px;
   
}

}





/* /////////////gsap */

/* Hero container */
.hero {
  overflow: hidden;
}

/* Line wrapper */
.reveal-line {
  display: block;
  overflow: hidden;
}

/* Text inside the line */
.reveal-line span {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  animation: textReveal 1s ease forwards;
}

/* Hero title line delays */
.hero-title .reveal-line:nth-child(1) span {
  animation-delay: 0.2s;
}
.hero-title .reveal-line:nth-child(2) span {
  animation-delay: 0.4s;
}

/* Hero subtitle line delays */
.hero-subtitle .reveal-line:nth-child(1) span {
  animation-delay: 0.6s;
}
.hero-subtitle .reveal-line:nth-child(2) span {
  animation-delay: 0.8s;
}

/* Button animation */
.reveal-btn {
  opacity: 0;
  transform: translateY(30px);
  animation: btnReveal 1s ease forwards;
  animation-delay: 1s;
}

/* Keyframes */
@keyframes textReveal {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes btnReveal {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


.reveal-btn {
  opacity: 0;
  transform: translateY(30px);
  animation: btnReveal 1s ease forwards;
  animation-delay: 1s;
}



/* button animation */


/* Hover lift */
.btn-yellow:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 0 #d4a514,
    0 20px 30px rgba(0,0,0,0.25);
}



/* Click press effect */
.btn-yellow:active {
  transform: translateY(4px);
  box-shadow: 
    0 3px 0 #d4a514,
    0 8px 15px rgba(0,0,0,0.2);
}




/* Icon Hover */
.service-icon {
  transition: transform 0.4s ease;
}

.service-box:hover .service-icon {
  transform: scale(1.15) rotate(5deg);
}


/* Initial State */
.service-title,
.service-subtitle,
.service-text,
.service-box .btn {
  opacity: 0;
  transform: translateY(60px);
  filter: blur(8px);
  transition: 
    opacity 0.8s cubic-bezier(.22,.61,.36,1),
    transform 0.8s cubic-bezier(.22,.61,.36,1),
    filter 0.8s cubic-bezier(.22,.61,.36,1);
}


/* Active Base */
.service-box.active .service-title,
.service-box.active .service-subtitle,
.service-box.active .service-text,
.service-box.active .btn {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}


/* Stagger Delays */
.service-box.active .service-title { transition-delay: 0.15s; }
.service-box.active .service-subtitle { transition-delay: 0.3s; }

.service-box.active .text-1 { transition-delay: 0.45s; }
.service-box.active .text-2 { transition-delay: 0.6s; }

.service-box.active .btn { transition-delay: 0.75s; }


/* ///////contact section //////// */

/* ========================= */
/* SECTION INITIAL STATE */
/* ========================= */

.contact-title,
.contact-desc,
.contact-item {
  opacity: 0;
  transform: translateY(40px);
  transition: 
    opacity 0.8s cubic-bezier(.22,.61,.36,1),
    transform 0.8s cubic-bezier(.22,.61,.36,1);
}

/* ========================= */
/* ACTIVE STATE */
/* ========================= */

.contact-section.active .contact-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.contact-section.active .contact-desc {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

/* Stagger for contact items */

.contact-section.active .contact-item:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

.contact-section.active .contact-item:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.75s;
}

.contact-section.active .contact-item:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.9s;
}

/* Icon subtle pop */
.contact-item img {
  transition: transform 0.4s ease;
}

.contact-item:hover img {
  transform: scale(1.2);
}
.footer-link {
  color: inherit;
  transition: 0.3s ease;
  color: var(--blue);
}

.footer-link:hover {
  color: var(--blue); /* তোমার brand color */
}

.contact-text {
  color: inherit;
  transition: 0.3s;
  color: var(--blue); /* brand color */
}

.contact-text:hover {
  color: var(--blue); /* brand color */
}