@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* =========================
   THEME & GLOBAL
   ========================= */
:root{
  --brand-start: #6258DA;   /* purple */
  --brand-end:   #857ED1;   /* soft indigo */
  --ink: #000;
  --muted: #5D6371;
  --bg: #fff;
  --card-shadow: 0 14px 55px 0 rgba(208, 202, 239, .3);

  /* Accents (for CTA/Highlight) */
  --accent-start: #ff4e00;
  --accent-end:   #ff8a00;
}

*{box-sizing:border-box}

body{
  background-image: url(assets/bg1.jpg);
  background-size: cover;
  color:#333;
  padding:80px 0 0 0;
  font-family:"Golos Text",sans-serif;
  overflow-x:hidden;
}

/* Reusable gradient text */
.gradient-text,
.service-head-h2,
.hero-heading,
.gradient-text-sm{
  background: linear-gradient(90deg, var(--brand-start), var(--brand-end));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color: transparent;
  /* color: transparent; */
}

/* Smaller gradient for subheadings in cards */
.gradient-text-sm{
  display:inline-block;
}

/* Heading fine-tune */
.hero-heading{
  font-weight:700;
  font-size:2.6rem;
  line-height:1.4;
}

.highlight-text{
  background: linear-gradient(90deg, var(--accent-start), var(--accent-end), #ff66cc);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color: transparent;
}

.font-14{font-size:14px}
.font-12{font-size:12px}

/* =========================
   NAVBAR
   ========================= */
nav{
  padding:0 19px !important;
  background-color:#fefefe !important;
  max-width:960px;
  box-shadow:0 20px 50px 0 rgba(52,99,188,.24);
}
.nav-li{font-size:13px;color:#000;font-weight:500}
.nav-logobody{width:20%}
.navlogo{width:70%}
.nav-button{
  font-size:13px;font-weight:500;background-color:#28263c;
  padding:6px 20px 7px 20px;color:#fff;border-radius:6px
}

.navbar-toggler{border:none}
.navbar-toggler:focus{box-shadow:none}
.navbar-toggler-icon{
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM64 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L96 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>');
  background-size:75%;
}

/* =========================
   UTILS
   ========================= */
::placeholder{color:#000;opacity:1}
::-ms-input-placeholder{color:#000}

.custom-button{
  background-color:#2c2d4b;
  color:#fff;
  padding:10px 20px;
  border:none;border-radius:6px;font-size:13px
}
.custom-button:hover{
  background-color:#393a5a;color:#fff;transform:translateY(-1px)
}

.whatsapp-icon img{
  position:fixed; right:20px; bottom:120px; z-index:1000;
  width: clamp(44px, 3.2vw, 60px);
  border-radius:7px; box-shadow:0 4px 8px rgba(0,0,0,.3);
  transition: transform .3s;
}
.whatsapp-icon img:hover{transform:scale(1.08)}

.side-dots{
  position:fixed;top:50%;right:20px;z-index:1000;
  transform:translateY(-50%);list-style:none;padding:22px 17px;
  background-color:#fff;border-radius:999px;box-shadow:0 4px 16px rgba(0,0,0,.08)
}
.side-dots li{margin:10px 0}
.side-dots li a{
  width:6px;height:6px;background:#333;display:block;border-radius:50%;
  transition:transform .3s ease, background-color .3s ease;
}
.side-dots li a:hover{transform:scale(2);background:var(--brand-start)}

/* =========================
   HOME
   ========================= */
.home-page{max-width:960px;transition:transform .3s ease-out}
.text-container{text-align:center;position:relative}
.gradient-text{
  font-size:55px;line-height:65px !important;letter-spacing:-3.5px;
  font-weight:800;margin:0;padding:0
}
.home-smal-txt{color:#717171;line-height:22px;font-weight:400;font-size:18px}

/* =========================
   HERO WRAPPER / CTA
   ========================= */
.border-page{
  background-image:url(assets/page-bg.svg);
  background-size:cover;background-position:top center;background-repeat:no-repeat;
  border-top-right-radius:100px;border-top-left-radius:100px;
  box-shadow:0 -20px 20px 0 rgba(0,0,0,.03);padding:80px 0 0 0
}
.hero-wrapper{border-radius:1rem;background:#fff}
.hero-badge{
  display:inline-block;font-size:.9rem;padding:6px 14px;border:1px solid #ddd;
  border-radius:25px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.05)
}
.hero-subtext{font-size:1rem;color:#333}
.hero-buttons .hero-btn{
  padding:12px 26px;border-radius:30px;font-weight:600;font-size:1rem;
  transition:all .3s ease-in-out
}
.hero-btn-outline{background:#fff;border:1px solid #ddd;color:#000}
.hero-btn-outline:hover{background:#f7f7f7;transform:translateY(-2px)}
.hero-btn-fill{
  background: linear-gradient(90deg, var(--accent-start), var(--accent-end));
  color:#fff;border:none
}
.hero-btn-fill:hover{
  background: linear-gradient(90deg, #e54400, #ff6600);
  transform:translateY(-2px)
}

/* =========================
   SWIPER RESULTS
   ========================= */

/* .swiper-slide{border-radius:1rem} */



.mySwiper .swiper-slide {
  height: 250px; 
  width: auto;  
}

.guranted-img {
  display: block;
  height: 100%; 
  width: auto;  
}


/* =========================
   LIGHTBOX MODAL STYLES
   ========================= */
.guranted-img {
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}
.guranted-img:hover {
  opacity: 0.85;
}

/* The Modal (background) */
.lightbox-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top of everything */
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.9); /* Black background with opacity */
}

/* Modal Content (the image) */
.lightbox-modal-content {
  margin: auto;
  display: block;
  width: auto;
  max-width: 90%;
  max-height: 85vh; /* Use viewport height to keep it on screen */
  animation: zoomIn 0.3s ease-in-out;
}

/* Animation for the zoom effect */
@keyframes zoomIn {
  from {transform: scale(0.5);}
  to {transform: scale(1);}
}

/* The Close Button */
.close-lightbox {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
}

.close-lightbox:hover,
.close-lightbox:focus {
  color: #bbb;
  text-decoration: none;
}

  
/* =========================
   SERVICE SECTION
   ========================= */
.service{
  box-shadow: var(--card-shadow);
  background-image:url(assets/service-bg.png);
  background-color:white;background-size:50%;background-repeat:no-repeat;background-position:center;
  max-width:960px;padding:55px 0 70px;border-radius:30px;margin-top:6%;
}
.service-head{border-bottom:1px solid rgba(0,0,0,.1)}
.service-head-h2{font-weight:800;font-size:56px}
.animated-img{animation:floatUpDown 3s ease-in-out infinite}
.animated-img-1{position:absolute;top:0;left:190px}

@keyframes floatUpDown{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

.service-section{width:43%}
.service-btn{border:1px solid rgb(169 169 169)}
.service-card-icon{font-size:12px;font-weight:700;display:none}
/* .service-section:hover .service-card-icon{display:inline} */

/* =========================
   CARDS
   ========================= */
.card{
  border:none;max-width:960px;padding:3% 3%;border-radius:30px;margin-top:4% !important;
  box-shadow: var(--card-shadow); background-color:white
}
.card-span{
  background-image:linear-gradient(to right, rgb(227,199,235), rgb(232,235,250));
  font-size:10px;padding:5px 15px;color:#254043;border-radius:999px
}
.card-h2{font-size:2rem}
.card-p{color:rgba(0,0,0,.7);font-size:17px;font-weight:500;line-height:22px}
.card-badge{
  border-radius:6px;background-color:#F2F3F4;font-size:12px;font-weight:500;padding:8px 15px
}
.card-video{box-shadow: var(--card-shadow);border-radius:20px}

/* =========================
   TESTIMONIAL / CLIENTS
   ========================= */
.testimonial{
  border: none;
  max-width: 1140px; /* Increased from 960px to make the container wider */
  border-radius: 30px;
  margin-top: 4% !important;
  box-shadow: var(--card-shadow);
  background-color: white;
}
.carousel-inner .carousel-item img{
  width: 65% !important; /* Adjusted to better fit the new, wider container */
  max-width: 550px; /* Added to prevent image from becoming too large */
  aspect-ratio: 8/2.5;
  margin: 0 auto;
  box-shadow: rgba(0,0,0,.35) 0 5px 15px;
  border-radius: 12px;
}
.carousel-inner .carousel-item h4{
  color: var(--brand-start);
  font-size: 18px;
  font-weight: 700;
}
.testi-icon{
  font-size: 41px;
  color: var(--brand-start);
}
.carousel-inner .carousel-item h4{
  color: var(--brand-start);
  font-size:18px;font-weight:700
}
.testi-icon{font-size:41px;color: var(--brand-start)}

.emoji-fix {
  -webkit-text-fill-color: initial;
}

/* =========================
   PLAN
   ========================= */
.plan{
  border:none;max-width:960px;border-radius:30px;margin-top:4% !important;
  box-shadow: var(--card-shadow); background-color:white
}
.plan-content{padding:3% 3% 1%}
.plan-head{border-bottom:1px solid rgba(0,0,0,.1)}
.timeline{position:relative;padding-left:60px;margin-top:20px}
.timeline::before{
  content:'';position:absolute;left:22px;height:358px;z-index:0;top:20px;bottom:0;width:1px;background-color:#e9e9e9
}
.timeline-item{display:flex;margin-bottom:30px}
.timeline-icon{
  position:absolute;left:0;background-color:#E8E4FB;color:#8777e0;border-radius:50%;
  width:2.5em;height:2.5em;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.2em;margin-right:15px;line-height:1;transition:all .4s ease
}
.timeline-content{margin-left:10px}
.timeline-content h5{font-size:20px;font-weight:800;margin-bottom:8px}
.timeline-content p{color:#5d6371;margin:0;line-height:23px}
.timeline-item:hover .timeline-icon{
  background-color:#8777e0;color:#fff;box-shadow:0 10px 20px 0 rgba(0,0,0,.1)
}

/* =========================
   SPECIAL (WHY US)
   ========================= */
.special{
  border:none;max-width:960px;border-radius:30px;margin-top:4% !important;
  box-shadow: var(--card-shadow);
  background-image:url(assets/map.png);background-size:cover;background-position:center;background-color:white
}
.special-head-p{font-size:17px;font-weight:600}
.special-span{font-size:15px}
.special-left-head{
  background-color:#faf7f7;font-size:12px;font-weight:700;padding:5px 15px;border-radius:999px
}
.special-content{padding:5% 15%}
.special-right-head{
  background-image:linear-gradient(90deg,#7f5bc4 0%, #60a3e6 100%);
  padding:5px 15px;font-size:12px;color:white;font-weight:700;border-radius:999px
}
.icon-circle-minus{
  display:inline-block;width:18px;height:18px;border:1px solid #f2f3f4;border-radius:50%;
  position:relative;margin-right:8px;background-color:#f2f3f4
}
.icon-circle-minus::before{
  content:"";position:absolute;top:50%;left:4px;right:4px;height:1px;background-color:#000;transform:translateY(-50%)
}
.checkmark-icon{
  width:22px;height:22px;background-color:#e8e4fb;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center
}
.checkmark-icon i{color:#895ed0;font-size:12px}

/* =========================
   REVIEWS STRIP
   ========================= */
.review{
  border:none;max-width:960px;border-radius:30px;margin-top:4% !important;
  box-shadow: var(--card-shadow); background-color:white
}
.review-content{background-image:url(assets/map.png);background-size:contain}
.slider{overflow:hidden;width:100%}
.slide-track{
  display:flex;align-items:center;animation:scroll 10s linear infinite;height:180px;gap:34px
}
.slide-track.reverse{animation:scroll-reverse 10s linear infinite}
.slide{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:150px;height:160px;
  box-shadow:rgba(0,0,0,.35) 0 5px 15px;background-color:#fff;border-radius:20px;padding:10px
}
.slide img{width:80%;height:auto;object-fit:contain}
.verti-line{margin:5% 0;height:1px;width:100%;background-color:#dbd9d9}

@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-200%)}}
@keyframes scroll-reverse{0%{transform:translateX(-200%)}100%{transform:translateX(0)}}




/* =========================
   FAQ
   ========================= */
.question{
  border:none;max-width:960px;border-radius:30px;margin-top:4% !important;
  box-shadow: var(--card-shadow); background-color:white
}
.question-content{padding:6% 10%}
.accordion-item{border:none;padding-bottom:1em}
.accordion-button{
  border-bottom:1px solid rgba(0,0,0,.1);padding:0 0 1.3em 0;font-size:20px;font-weight:700
}
.accordion-body{
  padding:1em 17px 1em 0;color:#5d6371;font-weight:500;line-height:25px
}
.accordion-button:focus{box-shadow:none}
.accordion-button:not(.collapsed){color:#000;background-color:#fff}
.accordion-button::after{
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="6" width="8.75" viewBox="0 0 448 512"><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"/></svg>');
  border:1px solid rgb(207,202,202); padding:13px; background-position:center; border-radius:50%
}
.accordion-button:not(.collapsed)::after{
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="6" width="8.75" viewBox="0 0 448 512"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>');
}

/* =========================
   FOOTER
   ========================= */
footer{
  background-image:url(assets/service-bg.png);
  background-position:bottom bottom;background-size:50%;background-repeat:no-repeat;
  background-color:rgb(242,246,255);padding:3% 0
}
.footer-head{border-bottom:1px solid rgba(0,0,0,.2);max-width:960px}
.footer-content{max-width:960px}
.privacy-poli{text-decoration:none}
.footer-icon{color:rgb(107,122,145)}
.footer-first{font-size:12px;color:rgba(0,0,0,.6)}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width:480px){
  .nav-button{display:none}
  .service-head-h2{font-size:2.7rem}
  .nav-li{font-size:16px;padding-top:20px}
  .navbar{margin-top:0 !important;padding:12px 0 !important;width:100%}
  .navlogo{width:200%}
  .gradient-text{font-size:9vw;line-height:39px !important;letter-spacing:-2px}
  .home-page{background-image:url(assets/bg1.jpg);background-size:cover;background-position:center top}
  .home-strip{width:100% !important}
  .home-page-p-sm{font-size:70%}
  .home-page-p{width:100% !important}
  .border-page{border-radius:0}
  .service-head-h2-sm{font-size:12vw}
  .service-section{width:100%}
  .card{margin-top:14% !important;padding:10% 5% 12%}
  .card-video{width:80% !important;margin-inline:auto}
  .card-badge{width:50%;margin:0 auto}
  .timeline::before{height:415px}
  .special-content{padding:5% 6% 5% 10%}

}

@media (max-width:768px){
  .service-section{width:100%}
  .service-head-h2{font-size:2.0rem}
  .gradient-text{font-size:9vw;line-height:39px !important;letter-spacing:-2px}
  .navlogo{width:172%}
  .home-smal-txt-2{color:#717171;line-height:8px;font-weight:400;font-size:13px}
  .whatsapp-icon img{width:10.2%}
  #rewview-head-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .animated-img-1 {
    position: static; 
    width: 45px;      
    height: 45px;
  }
  .testimonial .carousel-inner .carousel-item img {
    width: 101% !important; 
  }
}