@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&display=swap');
:root {
 
  --deep-teal: #15505e;
   --vibrant-orange: #FF6D45;
  --soft-cyan: #BCECF7;
  --light-ice: #DAF6FC;
  --pale-aqua: #BDE1EA;

}


::selection {
  background: var(--vibrant-orange);
  color: var(--light-ice);
}

*{
  margin: 0;
  padding:0;
  box-sizing: border-box;
  font-family: 'Noto Sans', sans-serif;
   
}


html,
body {
  height: 100%;
  width: 100%;
 scrollbar-color: var(--dark-blue) var(--light-grey);
  scrollbar-width: thin;
  background-color: var(--misty-sky);

}



body {
  overflow-x: hidden;
} 



a {
  text-decoration: none !important;
  pointer-events: auto; /* Ensure links remain clickable */


}



/* main  */

#main{
  background-color: var(--deep-teal);
  height: 100vh;
}

#hero-section{
  padding: 2%;
  height: 97vh;
  margin-top: -8%;
}

.hero-left-side {
  background-image: 
    linear-gradient(rgba(21, 80, 94, 0.4), rgba(21, 80, 94, 0.4)),
    url(../images/garage-door-technician-prosper-tx-professional.webp);
   

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 20px;
  height: 97vh;
  
}

.hero-right-side {
  background-image:url(../images/garage-door-prosper-tx-repair-service-hero.webp) !important;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 97vh;
  border-radius: 20px;
 
}

.hero-left-txt{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  height: 100%;
  gap: 3%;
  color: var(--light-ice);
  text-align: center;
  padding: 0 5% ;
  text-align: left;

}
.hero-left-txt {
  color: white;
}

.hero-left-txt h1{
  font-size: 5rem;
  font-weight: 900;
  color: white;

}


.main-holder{
   padding-inline: 3%;
   padding-top: 3%;
}
/* end of main  */



/* navbar */

  .main-nav {
      background: white;
      position: sticky;
      top: 0;
      z-index: 1000;
      padding: 0.1% ;
      border-radius: 15px;
      transition: box-shadow .3s;
    }
    .main-nav.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,.14); }

    .main-nav .container-fluid { display: flex; align-items: center; gap: 5px; padding: 0 12px; height: 72px; }

    /* ─── Logo ──────────────────────────────────────────── */
    .logo-wrap { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
    .logo-icon {
    aspect-ratio: 4 / 3;
      width: 5rem;
     
      border-radius: 10px;
      display: grid; place-items: center;
      font-size: 1.5rem;
      color: #fff;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
    }
    .logo-icon::after {
      content: '';
      position: absolute; inset: 0;
     
    }
    .logo-text-main {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 800;
      font-size: 1.5rem;
      color: var(--deep-teal);
      line-height: 1.1;
      letter-spacing: .5px;
    }
    .logo-text-sub {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 600;
      font-size: .9rem;
       color: var(--deep-teal);
      letter-spacing: 3px;
      text-transform: uppercase;
    }

    /* ─── Desktop Nav Links ─────────────────────────────── */
    .nav-links { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; }
    .nav-links a, .nav-links .nav-dd-toggle {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 1rem;
      letter-spacing: .8px;
      text-transform: uppercase;
      color: var(--deep-teal);
      text-decoration: none;
      padding: 8px 14px;
      position: relative;
   
      white-space: nowrap;
      border: none; background: transparent; cursor: pointer;
      display: flex; align-items: center; gap: 4px;
    }
    .nav-links a::after {
      content: '';
      position: absolute; bottom: 4px; left: 14px; right: 14px;
      height: 2px; background: var(--vibrant-orange);
      transform: scaleX(0); transform-origin: left;
      transition: transform .25s ease;
    }
 
    .nav-links a:hover::after { transform: scaleX(1); }
    .nav-links a.active { color: var(--vibrant-orange); }
    .nav-links a.active::after { transform: scaleX(1); }

    /* Dropdown */
    .nav-dd { position: relative; }
    .nav-dd-toggle:hover { color: var(--deep-teal); background: #fff5f2; }
    .nav-dd-toggle .chevron { transition: transform .25s; font-size: .7rem; }
    .nav-dd:hover .chevron, .nav-dd.open .chevron { transform: rotate(180deg); }
/* .nav-dd .dd-menu { display: none; }
.nav-dd.open .dd-menu { display: block; } */

.nav-dd:hover .dd-menu,
.nav-dd.open .dd-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateX(-50%) translateY(0);
}
    .dd-menu {
     position:absolute;
  top: calc(100% + 25px);
  left:50%;
  transform: translateX(-50%) translateY(-6px);
  background:#fff;
  padding:0;
  min-width:230px;
  box-shadow:0 8px 32px rgba(0,0,0,.12);
  border-top:3px solid var(--vibrant-orange);
  border-bottom:3px solid var(--vibrant-orange);

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .2s, transform .2s, visibility .2s;

    }
    .nav-dd:hover .dd-menu, .nav-dd.open .dd-menu {
      opacity: 1; pointer-events: all;
      transform: translateX(-50%) translateY(0);
    }
    .dd-menu a {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px;
      border-bottom: 1px dashed var(--vibrant-orange);
      font-family: 'Barlow', sans-serif;
      font-weight: 500;
      font-size: .9rem;
      letter-spacing: 0;
      text-transform: none;
      color: var(--deep-teal);
      text-decoration: none;
      
    }
    .dd-menu a::after { display: none; }
    .dd-menu a:hover { background: #fff;  color: var(--vibrant-orange); }
    .dd-menu a:active {
      width: 32px; height: 32px;
      background: #fff;
      border-radius: 6px;
      display: grid; place-items: center;
      font-size: .95rem;
      color: var(--vibrant-orange);
      flex-shrink: 0;
     
    }
  
  
   
    /* ─── Right CTA Area ────────────────────────────────── */
    .nav-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

    
    
   /* From Uiverse.io by gharsh11032000 */ 
.button {
  cursor: pointer;
  position: relative;
  padding: 10px 18px;
  font-size: 18px;
  color: white;
  
  border-radius: 25px;
  background-color: var(--deep-teal);
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
  overflow: hidden;
}

.button::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  border-radius: inherit;
  scale: 0;
  z-index: -1;
  background-color: var(--vibrant-orange);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button:hover::before {
  scale: 5;
}

.button:hover {
  color: #212121;
  scale: 1.1;
  box-shadow: 0 0px 20px rgba(193, 163, 98,0.4);
}

.button:active {
  scale: 1;
}





    .btn-grid-menu {
      width: 55px; 
      height: 55px;
       background: transparent;
      color: black;
      font-size: 2rem;
      border: none !important;
      display: grid; place-items: center;
      cursor: pointer;
   
    }
   

    /* ─── Mobile Header ─────────────────────────────────── */
    .mobile-nav { display: none; }

    @media (max-width: 991.98px) {
      .desktop-nav { display: none !important; }
      .mobile-nav  { display: flex; align-items: center; justify-content: space-evenly; padding:  0px; height: 64px; background: #fff; 
        position: sticky; top: 0; z-index: 1000; border-radius: 20px;
       }
      .main-nav { display: none; }
      .top-bar .top-bar-right { display: none; }
    }

    .mobile-right { display: flex; align-items: center; gap: 2px; }
    .btn-mobile-call {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700; font-size: .7rem;
      letter-spacing: .8px; text-transform: uppercase;
      background: var(--brand); color: #fff;
      border: none; border-radius: 6px;
      padding: 0px 0px;
      text-decoration: none;
      display: flex; align-items: center; gap: 3px;
     
    }
    .btn-mobile-call:hover { background: var(--brand-dark); color: #fff; }
    .btn-hamburger {
      width: 40px; height: 40px;
      border: 1.5px solid #e0e2e6;
      border-radius: 8px;
      background: transparent;
      display: grid; place-items: center;
      cursor: pointer; font-size: 1.2rem; color: var(--dark);
      transition: border-color .2s, color .2s;
    }
    .btn-hamburger:hover { border-color: var(--brand); color: var(--brand); }

    /* ─── Mobile Drawer ─────────────────────────────────── */
    .mobile-drawer {
      position: fixed; top: 0; right: 0;
      width: min(340px, 90vw); height: 100vh;
      background: #fff;
      z-index: 2000;
      transform: translateX(100%);
      transition: transform .32s cubic-bezier(.4,0,.2,1);
      overflow-y: auto;
      display: flex; flex-direction: column;
    }
    .mobile-drawer.open { transform: translateX(0); }
    .drawer-overlay {
      position: fixed; inset: 0;
      background: rgba(17,20,24,.5);
      z-index: 1999;
      opacity: 0; pointer-events: none;
      transition: opacity .32s;
      backdrop-filter: blur(2px);
    }
    .drawer-overlay.open { opacity: 1; pointer-events: all; }

    .drawer-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid #edf0f3;
      background: var(--dark);
    }
    .drawer-header .logo-text-main { color: var(--deep-teal); }
    .btn-close-drawer {
      width: 36px; height: 36px;
      border: 1.5px solid rgba(255,255,255,.2);
      border-radius: 8px; background: transparent;
      color: var(--deep-teal); font-size: 1rem;
      display: grid; place-items: center; cursor: pointer;
      transition: border-color .2s, background .2s;
    }
    .btn-close-drawer:hover { border-color: var(--brand); background: rgba(255,109,69,.15); }

    .drawer-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 20px; border-bottom: 1px solid #edf0f3; }
    .drawer-cta-btn {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700; font-size: .9rem;
      letter-spacing: .8px; text-transform: uppercase;
      padding: 10px 8px;
      border-radius: 8px; text-decoration: none;
      display: flex; align-items: center; justify-content: center; gap: 6px;
      transition: background .2s, transform .15s;
    }
    .drawer-cta-btn:active { transform: scale(.97); }
    .drawer-cta-btn.primary { background: var(--brand); color: #fff; border: none; }
    .drawer-cta-btn.primary:hover { background: var(--brand-dark); color: #fff; }
    .drawer-cta-btn.secondary { background: transparent; color: var(--dark); border: 1.5px solid #e0e2e6; }
    .drawer-cta-btn.secondary:hover { border-color: var(--brand); color: var(--brand); }

    .drawer-nav { padding: 8px 12px; flex: 1; }
    .drawer-nav-item a, .drawer-nav-item button {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 10px;
      border-radius: 8px;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700; font-size: 1.05rem;
      letter-spacing: .8px; text-transform: uppercase;
      color: var(--dark); text-decoration: none;
      transition: background .15s, color .15s;
      width: 100%; border: none; background: transparent; cursor: pointer;
    }
    .drawer-nav-item a:hover, .drawer-nav-item button:hover { background: #fff5f2; color: var(--brand); }
    .drawer-nav-icon { width: 36px; height: 36px; border-radius: 7px; background: #f5f6f8; display: grid; place-items: center; font-size: 1rem; color: var(--brand); flex-shrink: 0; transition: background .15s; }
    .drawer-nav-item a:hover .drawer-nav-icon,
    .drawer-nav-item button:hover .drawer-nav-icon { background: #ffe8e0; }
    .drawer-nav-item button { justify-content: space-between; }
    .drawer-nav-item button .left-side { display: flex; align-items: center; gap: 12px; }
    .drawer-chevron { font-size: .75rem; color: var(--text-muted); transition: transform .25s; }
    .drawer-nav-item.open .drawer-chevron { transform: rotate(180deg); }

    .drawer-submenu {
      overflow: hidden;
      max-height: 0;
      transition: max-height .3s ease;
    }
    .drawer-nav-item.open .drawer-submenu { max-height: 400px; }
    .drawer-submenu a {
      padding: 10px 10px 10px 58px;
      font-family: 'Barlow', sans-serif;
      font-weight: 500; font-size: .9rem;
      letter-spacing: 0; text-transform: none;
      color: #555;
    }
    .drawer-submenu a:hover { color: var(--brand); background: #fff5f2; }

  
    /* ─── Desktop Quick Menu Offcanvas ──────────────────── */
    .quick-panel {
      position: fixed; top: 0; right: 0;
      width: 300px; height: 100vh;
      background: #fff;
      z-index: 2000;
      transform: translateX(100%);
      transition: transform .32s cubic-bezier(.4,0,.2,1);
      overflow-y: auto;
      display: flex; flex-direction: column;
    }
    .quick-panel.open { transform: translateX(0); }

   
    .panel-cta.primary { background: var(--brand); color: #fff; }
    .panel-cta.primary:hover { background: var(--brand-dark); color: #fff; }
    .panel-cta.secondary { border: 1.5px solid #e0e2e6; color: var(--dark); }
    .panel-cta.secondary:hover { border-color: var(--brand); color: var(--brand); }
   
    .panel-link {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px; border-radius: 8px;
      text-decoration: none; color: var(--dark);
      font-weight: 500; font-size: .95rem;
      transition: background .15s, color .15s;
      margin-bottom: 2px;
    }
   .mobile-panel-nav{
  display:flex;
  flex-direction:column;
  padding:20px;
  gap:6px;
}

.panel-link{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:0;
  background:transparent;
  text-decoration:none;
  color:#222;
  font-weight:600;
  border-radius:10px;
  transition:.25s ease;
}

.panel-link:hover{
  background:#f4f4f4;
  transform:translateX(4px);
}

.panel-toggle{
  cursor:pointer;
}

.panel-submenu{
  padding:6px 0 10px 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.panel-sublink{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  text-decoration:none;
  color:#222;
  font-weight:500;
  background:#fafafa;
  transition:.25s ease;
}

.panel-sublink:hover{
  background:#f0f0f0;
  transform:translateX(4px);
}



.chevron{
  transition:transform .25s ease;
}

/* rotate chevron when opened */
.panel-toggle[aria-expanded="true"] .chevron{
  transform:rotate(180deg);
}


/* about us section */

.about-us-reviews{
 background-color: #15505e;
 display: flex;
 flex-direction: row;
 justify-content:space-around;
 gap: 1rem;
 width:630px !important;
 align-items: center;
 border-radius: 20px;
 color: white;
 
}

.reviews-images{
 display:flex;
  flex-direction:column;
  gap:20px;
  justify-content:center;
  align-items:center;
}
.reviews-images ul{
  display: flex;
  flex-wrap: nowrap;   /* prevents wrapping */
  padding: 0;
  margin: 0;
  list-style: none;
}
.reviews-images ul li {

 width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: -15px; /* better use px instead of % */

}

.review-img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  margin-left: -15px;
}
.review-img:first-child{
  margin-left: 0;
}
.orange-circle{
  background-color: var(--vibrant-orange);
  color: #fff;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}


.experience-title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.1rem;
  margin: 0.1rem 0;
  color: white;
  text-align: left;
}


.experience-title span{
  color: var(--vibrant-orange);
  font-weight: 700;
  font-size: 4rem;
}
.experience-title p{
  color: white;
  font-size: 1rem;
}

.about-us-span{
  padding: 0.5% 3%;
  border-radius: 20px;
  border: 1px solid  var(--vibrant-orange);
  color: var(--vibrant-orange);
  font-weight: 600;
  cursor: pointer;  

}



/* single box about us  */

.about-section-classic .single-about-box {
   
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
    background: linear-gradient(247.34deg, rgb(176, 219, 229) -0.54%, rgb(243, 253, 255) 39.73%, rgb(241, 252, 254) 62.81%, rgb(201, 232, 239) 93.75%);
    border-radius: 20px;
    padding: 50px 50px 50px 40px;
    transition: 300ms;
}
.about-section-classic .single-about-box:hover::before {
    width: 100%;
    left: 0px;
}

.about-section-classic .single-about-box::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 0px;
    left: 0px;
    top: 0px;
    z-index: -1;
    background: var(--vibrant-orange);
    border-radius: 20px;
    transition: 0.5s;
}


.about-section-classic .single-about-box .about-title h2 {
    color: black;
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    margin: 20px 0px 0px;
    transition: 300ms;
}
.about-section-classic .single-about-box  p{
  color: #111;
  font-weight: 400;
  font-size: 14px !important;
  line-height: 1.3;
  margin: 10px 0px 0px 0px;
  transition: 300ms;
}
.about-icon i{
  font-size: 42px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.about-section-classic .single-about-box .about-arrow{
    width: 50px;
    height: 50px;
    line-height: 42px;
    text-align: center;
    position: absolute;
    z-index: 1;
    right: 30px;
    top: 30px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(12, 35, 24, 0.15);
    border-image: initial;
    border-radius: 50%;
    transition: 300ms;
}
.about-section-classic .single-about-box:hover .about-arrow{
    transform: scale(-1) rotate(180deg);
    background: var(--soft-cyan);
    border: 1px solid var(--misty-sky);
}
/* end of about us section */

/* about us section  */

/* why choose us  */



.why-choose-section-one{
  background-color: var(--deep-teal);
  color: white;
}

.why-choose-section-one .why-choose-box .single-choose-box {
    display: flex;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 40px 0 20px;
}

.fade-in {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

.why-choose-section-one .section-title{
  margin-top: 5%;
}
.why-choose-section-one .choose-title{
  margin-top: 5%;
}


.why-choose-section-one .section-title title{
 margin-top: 5%;
 margin-bottom: 10% !important;
}
.why-choose-section-one .why-choose-box .single-choose-box {
   display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 50px;

  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 40px 0 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 40px 0 20px;
}
.why-choose-section-one .why-choose-box .single-choose-box .choose-icon{
  width: 70px;
  height: 70px;
  border-radius: 50%;              /* true circle */
  border: 1px solid rgba(255,255,255,.15);
  background-color: var(--vibrant-orange);
  margin-right: 20px;

  display: inline-flex;            /* center the <i> */
  align-items: center;
  justify-content: center;

  position: relative;              /* required for ::before */
  overflow: hidden;                /* keep hover fill inside circle */
  flex: 0 0 70px;                  /* prevents stretching in flex rows */
}

.why-choose-section-one .why-choose-box .single-choose-box .choose-icon i{
  color: #fff;
  font-size: 24px;
  line-height: 1;
  display: block;
}

.why-choose-section-one .why-choose-box .single-choose-box .choose-icon::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--vibrant-orange);
  transform: scale(0);
  transition: transform 300ms ease;
  z-index: -1; /* keep behind the icon */
}


.text-anime-3 {
  display: inline-block;
  overflow: hidden;
}

.text-anime-3 {
  animation: textReveal 1s ease forwards;
  opacity: 0;
  transform: translateY(40px);
}

@keyframes textReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* optional hover effect (if you want the fill to expand) */
.why-choose-section-one .why-choose-box .single-choose-box:hover .choose-icon::before{
  transform: scale(1);
}

.why-choose-section-one .why-choose-box .single-choose-box .choose-wrap {
    display: flex;
    align-items: center;
}
.why-choose-section-one .why-choose-box .single-choose-box .title h3 {
    color: white;
    font-weight: 500;
    font-size: 24px;
    line-height: 30px;
    margin: 0px 0px 10px;
    width: 200px;
}
.why-choose-section-one .why-choose-box .single-choose-box .title p {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.3;
    margin-top: 10px;
}




.why-choose-section-one .why-choose-wrapper
 {
    position: relative;
}

.why-choose-section-one .why-choose-wrapper .why-choose-thumb {
    position: relative;
   
}

.reveal {
    position: relative;
     border-radius: 20px;
    overflow: hidden;
    margin-top: 7%;
   
    
}

.why-choose-section-one .why-choose-wrapper .why-choose-counter {
    position: absolute;
    background: linear-gradient(247.34deg, rgb(176, 219, 229) -0.54%, rgb(243, 253, 255) 39.73%, rgb(241, 252, 254) 62.81%, rgb(201, 232, 239) 93.75%);
    width: 230px;
    height: 200px;
    color: var(--deep-teal);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    left: -10%;
    bottom:5%;
    border-radius: 20px;
    text-align: center;
    padding: 30px 48px 35px;
    animation: down-up 3s ease-in-out infinite;
}

@keyframes down-up {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(8px);
  }
  50% {
    transform: translateY(15px);
  }
  75% {
    transform: translateY(8px);
  }
}

.why-choose-section-one .why-choose-wrapper .why-choose-counter span {
    display: inline-block;
    color: var(--theme-color-white);
    font-weight: 600;
    font-size: 3.1rem;
    line-height: 1;
}

/* end of why choose us  */


/* contact us  */

.contact-section-home2-classic .contact-form-box .form-box {
    display: flex;
    align-items: center;
    padding-inline: 5%;
    position: relative;
}

.contact-section-home2-classic .contact-form-box .form-box input ,  select {
    transition: 0.3s;
    outline: 0;
    width: 100%;
    height: 48px;
    border: 1px solid rgba(12, 35, 24, 0.15);
    background: transparent;
    border-radius: 50px !important;
    padding: 0 5px 0 10px;
}

.contact-section-home2-classic .contact-form-box .form-box  textarea {
     border-radius: 50px !important;
}
.contact-section-home2-classic .contact-form-box .form-box  textarea::placeholder{
  padding-top: 3%;
  padding-left: 1%;
}
.contact-section-home2-classic .contact-form-box .form-box i {
    display: inline-block;
    position: relative;
    left: -30px;
    color: var(--vibrant-orange);
}

/* Make both columns equal height */
.contact-thumb,
.contact-form-box {
  height: 100%;
}

/* Ensure image fills left column */
.contact-thumb figure {
  height: 100%;
  margin: 0;
}

.contact-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* keeps image proportional */
  display: block;
}



.contact-section-home2-classic .contact-thumb {
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin: 0 0 -8px;
}
.contact-section-home2-classic .contact-thumb::before {
    content: "";
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1;
}
.contact-section-home2-classic .contact-thumb .contact-autor-info {
    position: absolute;
    right: 40px;
    bottom: 60px;
    width: 220px;
    height: 220px;
    text-align: center;
    background: var(--light-ice);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    padding: 42px 0;
    animation: upDown 1.6s ease-in-out 1.6s forwards infinite alternate;
}

@keyframes upDown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-15px);
  }
}

.contact-section-home2-classic .contact-thumb .contact-autor-info .autor-img-box {
    display: flex;
    justify-content: center;
    margin-left: 15px;
}

.contact-section-home2-classic .contact-thumb .contact-autor-info .autor-desc {
    color: var(--deep-teal);
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    padding-top: 30px;
}
.contact-section-home2-classic .contact-thumb .contact-autor-info .autor-img-box .author-image {
    margin-left: -15px;
}

.contact-section-home2-classic .contact-thumb .contact-autor-info .autor-img-box .author-image img {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--pale-aqua);
    max-width: 100%;
    height: auto;
}



.contact-section-home2-classic .contact-thumb .contact-autor-info .autor-img-box .autor-number {
   
    color: var(--soft-cyan);
    font-weight: 500;
    font-size: 18px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: var(--vibrant-orange);
    border-radius: 50%;
    margin-left: -15px;
}


/* end of contact us */

/* marquee */

/* ===== Brand Marquee ===== */

.brand-marquee-section {
  background: #15505ecc;
  overflow: hidden;
}

.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 60px;
  width: max-content;
  animation: scrollMarquee 30s linear infinite;
  padding: 0px 0;
}


.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-track img {
  height: 55px;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.marquee-track img:hover {
  transform: scale(1.08);
}

/* Smooth infinite scroll */
@keyframes scrollMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* end of the marquee */


/* OUR MAIN SERVICES */

.project-section-classic {
    padding: 120px 0 105px;
    position: relative;
    overflow: hidden;
}


.sec-title .section-title h2 {
    color: var(--deep-teal);
    font-weight: 700;
    font-size: 3rem;
    margin-top: 2%;
    
}

.project-section-classic .project-box-item .project-thumb{
    position: relative;
    z-index: 1;
    overflow: hidden;
   
}

.project-section-classic .project-box-item:hover .project-content {
    opacity: 1;
    transform: translateY(7px);
}

/* Make parent relative */


/* Hidden by default */
.project-section-classic .project-box-item .project-thumb .project-content {
    position: absolute;
    z-index: 2;
    bottom: 30px;
    left: 2%;
   
    width: 70%;
    margin: 0 auto;
    padding: 10px;
    border-radius: 16px;
    background: #FF6600; /* ORANGE BG */
    color: #fff;
    transform: translateY(100%);
    opacity: 0;
    transition: all 0.4s ease;
}

/* Show on hover */
.project-section-classic 
.project-box-item:hover 
.project-thumb 
.project-content {
    transform: translateY(0);
    opacity: 1;
}

/* Optional: smooth image zoom */
.project-section-classic 
.project-box-item:hover 
 {
    transform: scale(1.05);
    transition: 0.4s ease;
}

.project-section-classic .project-box-item:hover .project-thumb::before {
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

.project-section-classic .project-box-item .project-thumb::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0%;
    left: 0%;
    top: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1;
}

.project-section-classic .project-box-item .project-thumb figure img {
    border-radius: 30px;
    width: 480px !important;
    height: 480px !important;
  }


/* END OF OUR MAIN SERVICES */


/* sub context */

.sub-context{
  background-color: var(--deep-teal);
  padding-top: 10%;
  padding-bottom: 10%;
}


.sub-card {
  position: sticky;
  top: 0;
}

.card__inner {
  will-change: transform;
  border-radius: 20px;
  display: flex;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px hsla(265.3, 20%, 10%, 35%);
  transform-origin: center top;
}

.cards {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 40px 0;
}
.card__image-container {
  position: relative;
  width: 100%;
}

.card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

/* Overlay */
.card__content.overlay {
  position: absolute;
  top: 30%;
  right: 20px;
  max-width: 50%;
  color: var(--deep-teal);
 


background: rgba(218, 246, 252, 0.7);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(218, 246, 252, 0.3);

  padding: 20px;
  --r: 10px; /* the radius */
  --s: 30px; /* size of inner curve */
  --x: 20px; /* horizontal offset (no percentane) */
  --y: 10px; /* vertical offset (no percentage) */
  
  width: 100%;
  max-height: 900px;
  aspect-ratio: 1;


border-radius: var(--r);
  --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
  --_g:conic-gradient(from 90deg at calc(100% - var(--r)) calc(100% - var(--r)),#0000 25%,#000 0);
  --_d:(var(--s) + var(--r));
  mask:
    calc(100% - var(--_d) - var(--x)) 100% var(--_m),
    100% calc(100% - var(--_d) - var(--y)) var(--_m),
    radial-gradient(var(--s) at 100% 100%,#0000 99%,#000 calc(100% + 1px)) 
     calc(-1*var(--r) - var(--x)) calc(-1*var(--r) - var(--y)),
    var(--_g) calc(-1*var(--_d) - var(--x)) 0,
    var(--_g) 0 calc(-1*var(--_d) - var(--y));
  mask-repeat: no-repeat;



}

/* Title */
.card__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--deep-teal);
}

.card__description{
  font-size: 0.9rem !important;
  margin-top: 2%;
}

.space {
  height: 10vh;
}

.space--small {
  height: 10vh;
}




.service-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.service-list li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 2px;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 700;
}

.service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  background-color: #FF6600; /* Your Orange */
  border-radius: 50%;
}
/* end of sub context  */

/* faqs */


#faqs{
  background-color: var(--deep-teal);
}




/* remove bootstrap arrow */
.accordion-button::after{
display:none !important;
}

/* layout */
.faq-btn{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
text-align:left;
}

/* caret */
.faq-caret{
font-size:16px;
transition:transform .3s ease;
}

/* rotate when active */
.accordion-button:not(.collapsed) .faq-caret{
transform:rotate(180deg);
}

/* optional styling */
.accordion-item{
border-radius:10px;
margin-bottom:12px;
overflow:hidden;
}

.accordion-button{
font-weight:600;
background:#fff;
}

.accordion-button:not(.collapsed){
background:#f8f9fa;
}


/* end of faqs */

/* testimonoials */
.swiper-button-prev,
.swiper-button-next {
  position: relative;
  width: 40px;
  height: 40px;
  margin-inline: 15px;
  background: var(--vibrant-orange);
  border-radius: 50%;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 16px;
  color: #fff;
}
/* testimonial card */
.testi-card{

 
  padding: 35px;
  position: relative;
  transition: 0.3s ease;

  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--deep-teal);
  color: white;
  border-radius: 30px;
 
  
}

.testi-card:hover{

  box-shadow: 0 20px 40px rgba(0,0,0,.05);
}


/* rating circle */
.testi-ratting{

  color:gold;
  width:55px;
  height:55px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* star list */


.testi-ratting{
 
  color: gold;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6149;
    padding-left: 30%;
}

/* star list reset */
.testi-ratting ul{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  list-style: none;

  margin: 0;
   
}

/* star icon size */
.testi-ratting i{
  font-size: 14px;
}
.testi-desc{
  flex-grow: 1;
}

/* testimonial text */
.testi-desc p{
  font-family: var(--title-font);
  color: var(--theme-color-white);
  font-weight:400;
  font-size:20px;
  line-height:36px;
  margin:25px 0 10px;
  position:relative;
}


/* author section */
.testi-autor-box{
  display:flex;
  align-items:center;
  gap:15px;
}

/* author image */
.testi-autor img{
  width:60px;
  height:60px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--vibrant-orange);
}


/* name */
.autor-title{
  font-size:18px;
  font-weight:600;
  color:var(--theme-color-white);
  margin:0;
}

/* role */
.autor-desi{
  font-size:14px;
  color:#bfbfbf;
  margin:0;
}



/* end of testimonoials */




/* footer looper */

.marquee-section-home2-classic {
  position: relative;
  padding: 40px 0 22px;
  z-index: 1;
  background-color: var(--vibrant-orange);
  overflow: hidden;
  
}




/* main marquee container */
.marquee-section-home2-classic .marquee {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
}

/* moving content */
.marquee-section-home2-classic .marquee-block {
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-width: 100%;
  animation: scroll 30s linear infinite;
}



/* text style */
.marquee-section-home2-classic .marquee-block h3 {
  font-size: 36px;
  text-transform: uppercase;
  color: var(--light-ice);
  font-weight: 600;
  display: flex;
  align-items: center;
}

/* rotating icon */
.marquee-section-home2-classic .marquee-block h3 span {
  display: inline-flex;
  margin: 0 6px 0 5px;
  animation: rotateme 18s linear infinite;
}

/* horizontal scroll animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* icon rotation */
@keyframes rotateme {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.footer-top-section {
    background-color: var(--deep-teal); /* Example background color */
    color: white; /* Text color */
}

.sec-title {
    margin-bottom: 20px; /* Add some space below the title */
}

.circle-text {
    text-align: center; /* Center the text */
}

.footer-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Circular shape */
    background-color: #ff6f20; /* Example background color for the circle */
    padding: 20px; /* Add padding for the circle */
    width: 150px; /* Circle diameter */
    height: 150px; /* Circle diameter */
    position: relative; /* Allows positioning of child elements */
}

.circle-icon img {
    width: 50px; /* Adjust icon size */
    height: auto; /* Maintain aspect ratio */
    position: absolute; /* Positioning the icon within the circle */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the icon */
}




.footer-circle{
  position: relative;
  width:170px;
  height:170px;
  background:var(--vibrant-orange);
  border-radius:50%;
  display:flex;
  float: right !important;
  align-items:center;
  justify-content:center;
}

/* center icon */
.circle-icon{
  width:120px;
  height:120px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}

.circle-icon img{
  width:40px;
}

/* circular text */
.circle-text{
  position:absolute;
  width:100%;
  height:100%;
  animation: rotateText 12s linear infinite;
}

.circle-text span{
  position:absolute;
  left:50%;
  font-size:20px;
  font-weight:700;
  color:#fff;
  transform-origin:0 85px;
}

/* distribute letters around circle */
.circle-text span:nth-child(1){transform: rotate(0deg);}
.circle-text span:nth-child(2){transform: rotate(12deg);}
.circle-text span:nth-child(3){transform: rotate(24deg);}
.circle-text span:nth-child(4){transform: rotate(36deg);}
.circle-text span:nth-child(5){transform: rotate(48deg);}
.circle-text span:nth-child(6){transform: rotate(60deg);}
.circle-text span:nth-child(7){transform: rotate(72deg);}
.circle-text span:nth-child(8){transform: rotate(84deg);}
.circle-text span:nth-child(9){transform: rotate(96deg);}
.circle-text span:nth-child(10){transform: rotate(108deg);}
.circle-text span:nth-child(11){transform: rotate(120deg);}
.circle-text span:nth-child(12){transform: rotate(132deg);}
.circle-text span:nth-child(13){transform: rotate(144deg);}
.circle-text span:nth-child(14){transform: rotate(156deg);}
.circle-text span:nth-child(15){transform: rotate(168deg);}
.circle-text span:nth-child(16){transform: rotate(180deg);}
.circle-text span:nth-child(17){transform: rotate(192deg);}
.circle-text span:nth-child(18){transform: rotate(204deg);}
.circle-text span:nth-child(19){transform: rotate(216deg);}
.circle-text span:nth-child(20){transform: rotate(228deg);}
.circle-text span:nth-child(21){transform: rotate(240deg);}
.circle-text span:nth-child(22){transform: rotate(252deg);}
.circle-text span:nth-child(23){transform: rotate(264deg);}
.circle-text span:nth-child(24){transform: rotate(276deg);}
.circle-text span:nth-child(25){transform: rotate(288deg);}

@keyframes rotateText{
  100%{
    transform:rotate(360deg);
  }
}


/* place text around circle */





/* end of footer looper */


/* footer */



footer{
  background-color: var(--deep-teal);
  color: white;
}


.footer-section{
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Background Shape */
.footer-section::before{
  position: absolute;
  z-index: -1;
  content: "";
  background-color: #0B465477;
  border-top: 10px solid var(--vibrant-orange);
  border-radius: 50px !important;
  width: 1250px;
  min-height: 600px;
  top: 0;
}




.main-button {
  padding: 1px 2px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--pale-aqua);
  font-weight: 500;
  transition: all 0.2s ease;
  font-size: 1rem;
}
.footer i {
  color: var(--light-ice);
}
.email{
  color: var(--light-ice) ;
}
.main-button {
  padding: 1px 2px;
  border-radius: 6px;
  text-decoration: none;
  color: white;
  font-weight: 500;
  transition: all 0.2s ease;
}
.flex-item {
  min-width: 60px;
  border: 1px solid var(--light-ice);
  flex: 1 1  calc(30% - 0.5rem); /* 4 per row on large screens */
}


.social a{
  font-size:18px;
  margin-left:14px;
  color:#6c757d;
  text-decoration:none;
  transition:0.3s;
}

.social a:hover{
  color:#FF6D45;
  transform:translateY(-2px);
}

/* end of footer */

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {

.hero-left-side {
  height: 90vh;
}

.hero-left-txt h1{
  font-size: 3rem;
  font-weight: 900;
  color: white;

}

.hero-left-txt article{
  font-size: 0.7rem;
  

}

.hero-right-side{
  display: none;
}
.btn-mobile-call{
  display: none;
}


.about-us-reviews{

 width:350px !important;

 
}

.why-choose-section-one .why-choose-box .single-choose-box{
    flex-direction: column;
    gap: 12px;
    padding: 22px 0 16px;
  }
  .why-choose-section-one .why-choose-box .single-choose-box .choose-wrap{
    min-width: 0;
  }
  .text-anime-3{
    margin-top: 20%;
  }

.why-choose-section-one .why-choose-wrapper
 {
    width: 100%;
    
}
 .marquee-track {
    gap: 30px;
    animation-duration: 20s;
  }
  .marquee-track img {
    height: 35px;
  }


  
.sec-title .section-title h2 {
    font-size: 1.5rem;
}






/* Overlay */
.card__content.overlay {
  position: absolute;
  top:0%;
  right: 0px;
  max-width: 90%;
  color: var(--deep-teal);
  width: 100%;
  aspect-ratio: 1;
 max-height:400px !important;
 
mask: none;
border-radius: 30px;

}

/* Title */
.card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--deep-teal);
}

.card__description{
  font-size: 0.6rem !important;
  margin-top: 2%;
}

.card__image-container {
  position: relative;
  width: 100%;
  height: 600px !important;
}






.service-list li {
  font-size: 10px;

}

.service-list li::before {
  
  width:5px;
  height:5px;
 
}
.contact-section-home2-classic .contact-thumb .contact-autor-info {
    display: none;

}

.project-section-classic .project-box-item .project-thumb{
   
    padding-inline: 10%;
}

.project-section-classic .project-box-item .project-thumb .project-content {
    position: absolute;
    z-index: 2;
    bottom: 30px;
    left: 10%;
    width: 80%;
    padding: 10px;
 
}

 .social a{
    margin:0 8px;
  }

  .section-desc p{
    display: none;
  }

.marquee-section-home2-classic{
  display: none;
}


}
/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {



}


@media (min-width: 992px) {
  
}



 @media (max-width: 991.98px){

   .navbar {
    box-shadow: none !important;
  }
 .offcanvas-backdrop,
  .offcanvas-backdrop.show { opacity: 0 !important; }

  .offcanvas-backdrop { display: none !important; }

  .offcanvas,
  .offcanvas.show { box-shadow: none !important; }

}


/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {
  .hero-right-side{
  display: none;
}


/* Title */
.card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--deep-teal);
}

.card__description{
  font-size: 0.7rem !important;
  margin-top: 2%;
}


.card__content.overlay {
  position: absolute;
  top: 0%;
  right: 20px;
  max-width: 90%;
  mask: none;
  max-height: 430px !important;

}



/* text style */
.marquee-section-home2-classic .marquee-block{
    padding-inline: 2%;
}
.marquee-section-home2-classic .marquee-block h3 {
  font-size: 26px;
  
}


.footer-section::before{
  position: absolute;
  z-index: -1;
  content: "";
  background-color: #0B465477;
  border-top: 10px solid var(--vibrant-orange);
  border-radius: 50px !important;
  min-width: 700px;
  min-height: 1100px;
  top: 0;
}



}

/* XXL devices (larger desktops, 1400px and up) */
@media (max-width: 1400px) {
  
}