*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial;
}

html{
  scroll-behavior:smooth;
}

body{
  background:#f5f5f5;
  color:#222;
}


/* NAVBAR */

.navbar{

  position:fixed;
  top:0;

  width:100%;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:20px 8%;

  background:#001f3f;

  z-index:1000;
}

.logo img{

  width:180px;

  height:auto;

}

.navbar ul{
  display:flex;
  list-style:none;
  gap:30px;
}

.navbar a{
  color:white;
  text-decoration:none;
  font-size:17px;
}


/* HERO */

.hero{

  width:100%;
  height:100vh;

  position:relative;

  overflow:hidden;
}

.bg-video{

  position:absolute;

  width:100%;
  height:100%;

  object-fit:cover;

  opacity:0;

  transition:1s;
}

.bg-video.active{
  opacity:1;
}

.overlay{

  position:absolute;

  width:100%;
  height:100%;

  background:rgba(0,0,0,0.6);

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:0 8%;

  color:white;
}

.hero-content{
  max-width:700px;
}

.hero-content h1{
  font-size:70px;
  line-height:1.2;
}

.hero-content p{
  margin:25px 0;
  font-size:24px;
}

.hero-btns{
  display:flex;
  gap:20px;
}

.btn1,
.btn2{

  padding:15px 35px;

  border-radius:8px;

  text-decoration:none;

  font-size:18px;
}

.btn1{
  background:#ff6600;
  color:white;
}

.btn2{
  background:green;
  color:white;
}


/* FORM */

.quote-form{

  width:350px;

  background:white;

  padding:40px;

  border-radius:15px;

  color:black;
}

.quote-form h2{
  margin-bottom:20px;
}

.quote-form input{

  width:100%;

  padding:15px;

  margin-bottom:15px;

  border:1px solid #ccc;

  border-radius:8px;
}

.quote-form button{

  width:100%;

  padding:15px;

  border:none;

  background:#ff6600;

  color:white;

  border-radius:8px;

  font-size:18px;
}


/* ABOUT */

.about{
  padding:120px 10%;
}

.about h2{
  font-size:50px;
  margin-bottom:25px;
  color:#001f3f;
}

.about p{
  line-height:1.9;
  font-size:20px;
}


/* SERVICES */

.services{

  padding:120px 8%;

  background:white;
}

.services h2{

  text-align:center;

  font-size:55px;

  margin-bottom:80px;

  color:#001f3f;
}

.service-card{

  display:flex;
  align-items:center;

  gap:50px;

  margin-bottom:80px;

  background:#f8f8f8;

  border-radius:20px;

  overflow:hidden;

  box-shadow:0 5px 20px rgba(0,0,0,0.1);
}

.reverse{
  flex-direction:row-reverse;
}

.service-card img{

  width:50%;

  height:400px;

  object-fit:cover;
}

.service-content{
  padding:40px;
}

.service-content h3{

  font-size:40px;

  margin-bottom:20px;

  color:#ff6600;
}

.service-content p{

  font-size:19px;

  line-height:1.8;
}


/* WHY */

.why{

  padding:120px 8%;

  background:#001f3f;

  color:white;

  text-align:center;
}

.why h2{

  font-size:55px;

  margin-bottom:70px;
}

.why-grid{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:30px;
}

.why-box{

  background:white;

  color:black;

  padding:40px;

  border-radius:20px;

  transition:0.5s;

  cursor:pointer;
}



/* HOVER EFFECT */

.why-box:hover{

  background:#ff6600;

  color:white;

  transform:translateY(-10px) scale(1.03);

  box-shadow:0 10px 25px rgba(0,0,0,0.3);

}



/* HEADING COLOR CHANGE */

.why-box:hover h3{

  color:white;

}


/* COUNTER */

.counter-section{

  padding:100px 8%;

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:30px;
}

.counter-card{

  background:#ff6600;

  color:white;

  text-align:center;

  padding:60px;

  border-radius:20px;
}

.counter-card h2{
  font-size:55px;
}

.counter-card p{
  margin-top:15px;
  font-size:22px;
}


.contact-box{

  background:#f5f5f5;

  padding:50px;

  border-radius:20px;

  transition:0.5s;

  cursor:pointer;

}



/* HOVER EFFECT */

.contact-box:hover{

  background:#ff6600;

  color:white;

  transform:translateY(-10px) scale(1.03);

  box-shadow:0 10px 25px rgba(0,0,0,0.3);

}



/* HEADING COLOR */

.contact-box h3{

  margin-bottom:15px;

  color:#ff6600;

  transition:0.5s;

}



/* HOVER HEADING */

.contact-box:hover h3{

  color:white;

}


.footer-content{

  max-width:1200px;

  margin:auto;

}

.footer-content h2{

  font-size:35px;

  margin-bottom:20px;

  color:#ff6600;

}

.footer-content p{

  margin-bottom:15px;

  line-height:1.8;

  font-size:17px;

}


/* WHATSAPP */

.whatsapp{

  position:fixed;

  right:20px;
  bottom:20px;

  background:green;

  color:white;

  padding:15px 25px;

  border-radius:50px;

  text-decoration:none;
}


/* MOBILE */

@media(max-width:900px){

  .navbar{
    flex-direction:column;
    gap:20px;
  }

  .navbar ul{
    flex-direction:column;
    text-align:center;
  }

  .overlay{
    flex-direction:column;
    justify-content:center;
    gap:30px;
    padding-top:120px;
  }

  .hero-content h1{
    font-size:40px;
  }

  .hero-content p{
    font-size:18px;
  }

  .quote-form{
    width:100%;
  }

  .service-card,
  .reverse{
    flex-direction:column;
  }

  .service-card img{
    width:100%;
  }

  .why-grid,
  .counter-section,
  .contact-grid{
    grid-template-columns:1fr;
  }

}
/* FLOATING BUTTONS */

.floating-buttons{

  position:fixed;

  right:20px;

  bottom:20px;

  display:flex;

  flex-direction:column;

  gap:15px;

  z-index:9999;

}



/* CALL BUTTON */

.call-btn{

  background:#ff6600;

  color:white;

  padding:15px 25px;

  border-radius:50px;

  text-decoration:none;

  font-size:18px;

  font-weight:bold;

  box-shadow:0 5px 15px rgba(0,0,0,0.3);

  transition:0.4s;

}



/* WHATSAPP BUTTON */

.whatsapp-btn{

  background:#25D366;

  color:white;

  padding:15px 25px;

  border-radius:50px;

  text-decoration:none;

  font-size:18px;

  font-weight:bold;

  box-shadow:0 5px 15px rgba(0,0,0,0.3);

  transition:0.4s;

}



/* HOVER EFFECT */

.call-btn:hover,
.whatsapp-btn:hover{

  transform:scale(1.1);

}
@keyframes pulse{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.1);
  }

  100%{
    transform:scale(1);
  }

}

.call-btn,
.whatsapp-btn{

  animation:pulse 1.5s infinite;

}
/* TEAM SECTION */

.team-section{

  padding:120px 8%;

  background:#f5f5f5;

  text-align:center;

}



.team-section h2{

  font-size:55px;

  margin-bottom:70px;

  color:#001f3f;

}



/* TEAM CONTAINER */

.team-container{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:40px;

  flex-wrap:wrap;

}



/* TEAM CARD */

.team-card{

  width:350px;

  background:white;

  padding:30px;

  border-radius:20px;

  box-shadow:0 5px 20px rgba(0,0,0,0.1);

  transition:0.5s;

}



/* IMAGE SIZE */

.team-card img{

  width:100%;

  height:350px;

  object-fit:cover;

  border-radius:15px;

}



/* TEXT */

.team-card h3{

  margin-top:20px;

  font-size:28px;

  color:#ff6600;

}



.team-card p{

  margin-top:10px;

  font-size:22px;

  font-weight:bold;

}



/* HOVER EFFECT */

.team-card:hover{

  transform:translateY(-10px);

  box-shadow:0 10px 30px rgba(0,0,0,0.2);

}



/* MOBILE RESPONSIVE */

@media(max-width:768px){

  .team-container{

    flex-direction:column;

  }

}
/* =========================
SERVICES PAGE DESIGN
========================= */

.services-page{

  width:100%;

  padding:100px 8%;

  background:#f8f8f8;

}



/* SERVICE BOX */

.service-box{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:50px;

  margin-bottom:80px;

  background:white;

  padding:30px;

  border-radius:20px;

  box-shadow:0 5px 20px rgba(0,0,0,0.1);

  transition:0.5s;

}



.service-box:hover{

  transform:translateY(-10px);

}



/* REVERSE */

.reverse{

  flex-direction:row-reverse;

}



/* IMAGE SIZE */

.service-box img{

  width:450px;

  height:300px;

  object-fit:cover;

  border-radius:15px;

}



/* CONTENT */

.service-info{

  flex:1;

}



.service-info h2{

  font-size:40px;

  margin-bottom:20px;

  color:#001f3f;

}



.service-info p{

  font-size:18px;

  line-height:1.8;

  color:#444;

}



/* BUTTON */

.learn-btn{

  display:inline-block;

  margin-top:25px;

  background:#ff6600;

  color:white;

  padding:14px 30px;

  border-radius:50px;

  text-decoration:none;

  font-size:18px;

  font-weight:bold;

  transition:0.4s;

}



.learn-btn:hover{

  background:#001f3f;

  transform:scale(1.05);

}



/* DETAILS */

.service-details{

  background:white;

  padding:50px;

  margin-bottom:80px;

  border-radius:20px;

  box-shadow:0 5px 20px rgba(0,0,0,0.1);

}



.service-details h2{

  font-size:45px;

  margin-bottom:25px;

  color:#001f3f;

}



.service-details p{

  font-size:20px;

  line-height:2;

  color:#444;

}



/* CALL BUTTON */

.call-service-btn{

  display:inline-block;

  margin-top:30px;

  background:#25D366;

  color:white;

  padding:15px 35px;

  border-radius:50px;

  text-decoration:none;

  font-size:20px;

  font-weight:bold;

  transition:0.4s;

}



.call-service-btn:hover{

  transform:scale(1.1);

}



/* =========================
GOOGLE MAP
========================= */

.map-section{

  padding:100px 8%;

  background:white;

  text-align:center;

}



.map-section h2{

  font-size:55px;

  margin-bottom:20px;

  color:#001f3f;

}



.map-section p{

  font-size:20px;

  margin-bottom:40px;

}



.map-section iframe{

  width:100%;

  height:500px;

  border:none;

  border-radius:20px;

  box-shadow:0 5px 20px rgba(0,0,0,0.2);

}



/* =========================
CLIENTS SECTION
========================= */

.clients-section{

  padding:100px 0;

  background:#f5f5f5;

  overflow:hidden;

  text-align:center;

}



.clients-section h2{

  font-size:55px;

  margin-bottom:50px;

  color:#001f3f;

}



/* SLIDER */

.client-slider{

  width:100%;

  overflow:hidden;

  position:relative;

}



.client-track{

  display:flex;

  width:calc(250px * 12);

  animation:scroll 25s linear infinite;

}



/* LOGOS */

.client-track img{

  width:180px;

  height:100px;

  object-fit:contain;

  margin:0 40px;

  background:white;

  padding:20px;

  border-radius:15px;

  box-shadow:0 5px 15px rgba(0,0,0,0.1);

}



/* ANIMATION */

@keyframes scroll{

  0%{
    transform:translateX(0);
  }

  100%{
    transform:translateX(calc(-250px * 6));
  }

}



/* =========================
REVIEWS
========================= */

.reviews-section{

  padding:100px 8%;

  background:white;

  text-align:center;

}



.reviews-section h2{

  font-size:55px;

  margin-bottom:60px;

  color:#001f3f;

}



.review-grid{

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

  gap:40px;

}



.review-box{

  background:#f5f5f5;

  padding:40px;

  border-radius:20px;

  box-shadow:0 5px 20px rgba(0,0,0,0.1);

  transition:0.5s;

}



.review-box:hover{

  transform:translateY(-10px);

}



.review-box h3{

  color:#ff6600;

  font-size:30px;

  margin-bottom:20px;

}



.review-box p{

  font-size:18px;

  line-height:1.8;

  color:#444;

}



.review-box h4{

  margin-top:20px;

  color:#001f3f;

}



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

@media(max-width:768px){

  .service-box,
  .reverse{

    flex-direction:column;

  }

  .service-box img{

    width:100%;

    height:250px;

  }

  .service-info h2,
  .service-details h2,
  .clients-section h2,
  .reviews-section h2,
  .map-section h2{

    font-size:35px;

  }

}
/* =========================
PREMIUM CONTACT HIGHLIGHT
========================= */

.contact-highlight{

  width:100%;

  padding:160px 8%;

  background:linear-gradient(135deg,#001f3f,#003d73,#ff6600);

  background-size:300% 300%;

  animation:bgmove 10s ease infinite;

  color:white;

  overflow:hidden;

  position:relative;

}



/* BACKGROUND ANIMATION */

@keyframes bgmove{

  0%{
    background-position:0% 50%;
  }

  50%{
    background-position:100% 50%;
  }

  100%{
    background-position:0% 50%;
  }

}



/* CONTAINER */

.highlight-container{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:80px;

  flex-wrap:wrap;

}



/* TEXT */

.highlight-text{

  flex:1;

}



.highlight-text h2{

  font-size:75px;

  line-height:1.2;

  margin-bottom:35px;

  font-weight:800;

  text-transform:uppercase;

}



.highlight-text p{

  font-size:22px;

  line-height:2;

  color:#f5f5f5;

  margin-bottom:25px;

}



/* BUTTONS */

.highlight-buttons{

  display:flex;

  gap:25px;

  margin-top:40px;

}



.highlight-call,
.highlight-whatsapp{

  padding:18px 40px;

  border-radius:60px;

  text-decoration:none;

  font-size:22px;

  font-weight:bold;

  transition:0.5s;

}



.highlight-call{

  background:white;

  color:#001f3f;

}



.highlight-whatsapp{

  background:#25D366;

  color:white;

}



/* BUTTON HOVER */

.highlight-call:hover{

  background:#ff6600;

  color:white;

  transform:translateY(-8px);

}



.highlight-whatsapp:hover{

  background:white;

  color:#25D366;

  transform:translateY(-8px);

}



/* IMAGE */

.highlight-image{

  flex:1;

  text-align:center;

}



.highlight-image img{

  width:100%;

  max-width:650px;

  height:450px;

  object-fit:cover;

  border-radius:30px;

  box-shadow:0 20px 40px rgba(0,0,0,0.5);

  transition:0.6s;

}



/* IMAGE HOVER */

.highlight-image img:hover{

  transform:scale(1.05) rotate(1deg);

}





/* =========================
WHY CONTACT SECTION
========================= */

.why-contact{

  width:100%;

  padding:140px 8%;

  background:#f5f7fa;

  text-align:center;

}



/* TITLE */

.why-contact h2{

  font-size:65px;

  color:#001f3f;

  margin-bottom:80px;

  position:relative;

}



/* GRID */

.why-contact-grid{

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

  gap:40px;

}



/* BOX */

.why-contact-box{

  background:white;

  padding:60px 40px;

  border-radius:25px;

  box-shadow:0 10px 25px rgba(0,0,0,0.1);

  transition:0.5s;

  position:relative;

  overflow:hidden;

}



/* TOP EFFECT */

.why-contact-box::before{

  content:"";

  position:absolute;

  top:0;

  left:-100%;

  width:100%;

  height:100%;

  background:linear-gradient(135deg,#ff6600,#001f3f);

  transition:0.6s;

  z-index:0;

}



/* HOVER EFFECT */

.why-contact-box:hover::before{

  left:0;

}



/* CONTENT */

.why-contact-box i,
.why-contact-box h3,
.why-contact-box p{

  position:relative;

  z-index:2;

  transition:0.5s;

}



/* ICON */

.why-contact-box i{

  font-size:65px;

  color:#ff6600;

  margin-bottom:25px;

}



/* TITLE */

.why-contact-box h3{

  font-size:32px;

  margin-bottom:20px;

  color:#001f3f;

}



/* TEXT */

.why-contact-box p{

  font-size:19px;

  line-height:1.9;

  color:#444;

}



/* HOVER COLOR CHANGE */

.why-contact-box:hover i,
.why-contact-box:hover h3,
.why-contact-box:hover p{

  color:white;

}



/* BOX MOVE */

.why-contact-box:hover{

  transform:translateY(-15px);

  box-shadow:0 20px 40px rgba(0,0,0,0.2);

}





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

@media(max-width:768px){

  .highlight-container{

    flex-direction:column;

  }

  .highlight-text h2{

    font-size:42px;

  }

  .why-contact h2{

    font-size:40px;

  }

}
/* =========================
FOOTER CONTACT FORM
========================= */

.footer-contact-form{

  width:100%;

  padding:120px 8%;

  background:linear-gradient(135deg,#001f3f,#003d73);

  color:white;

}



/* CONTAINER */

.footer-form-container{

  max-width:1200px;

  margin:auto;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:60px;

  flex-wrap:wrap;

}



/* TEXT */

.footer-form-text{

  flex:1;

}



.footer-form-text h2{

  font-size:60px;

  line-height:1.3;

  margin-bottom:25px;

}



.footer-form-text p{

  font-size:22px;

  line-height:2;

  color:#ddd;

}





/* FORM */

.footer-form{

  flex:1;

  background:white;

  padding:50px;

  border-radius:25px;

  box-shadow:0 10px 30px rgba(0,0,0,0.3);

  display:flex;

  flex-direction:column;

  gap:25px;

}



/* INPUT */

.footer-form input,
.footer-form textarea{

  width:100%;

  padding:18px 20px;

  border:none;

  background:#f1f1f1;

  border-radius:15px;

  font-size:18px;

  outline:none;

}



/* BUTTON */

.footer-form button{

  background:#ff6600;

  color:white;

  border:none;

  padding:18px;

  border-radius:50px;

  font-size:22px;

  font-weight:bold;

  cursor:pointer;

  transition:0.5s;

}



/* HOVER */

.footer-form button:hover{

  background:#001f3f;

  transform:translateY(-5px);

}





/* MOBILE */

@media(max-width:768px){

  .footer-form-text h2{

    font-size:38px;

  }

  .footer-form-container{

    flex-direction:column;

  }

}

/* =========================
COUNTER SECTION
========================= */

.counter-section{

  width:100%;

  padding:100px 8%;

  background:linear-gradient(135deg,#001f3f,#003d73);

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

  gap:30px;

}



/* CARD */

.counter-card{

  background:white;

  padding:50px 30px;

  border-radius:25px;

  text-align:center;

  box-shadow:0 10px 25px rgba(0,0,0,0.2);

  transition:0.5s;

}



/* HOVER */

.counter-card:hover{

  transform:translateY(-10px);

  background:#ff6600;

}



/* NUMBER */

.counter-card h2{

  font-size:55px;

  color:#001f3f;

  margin-bottom:15px;

  transition:0.5s;

}



/* TEXT */

.counter-card p{

  font-size:22px;

  font-weight:bold;

  color:#555;

  transition:0.5s;

}



/* HOVER COLORS */

.counter-card:hover h2,
.counter-card:hover p{

  color:white;

}



/* TABLET */

@media(max-width:992px){

  .counter-section{

    grid-template-columns:repeat(2,1fr);

  }

}



/* MOBILE */

@media(max-width:768px){

  .counter-section{

    grid-template-columns:1fr;

    padding:70px 5%;

  }

  .counter-card{

    padding:40px 20px;

  }

  .counter-card h2{

    font-size:40px;

  }

  .counter-card p{

    font-size:18px;

  }

}

/* =========================
PRICING HERO
========================= */

.pricing-hero{

  width:100%;

  height:70vh;

  background:url("images/pricing-bg.jpg");

  background-size:cover;

  background-position:center;

  position:relative;

}



.pricing-overlay{

  width:100%;

  height:100%;

  background:rgba(0,0,0,0.6);

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  text-align:center;

  color:white;

}



.pricing-overlay h1{

  font-size:70px;

  margin-bottom:20px;

}



.pricing-overlay p{

  font-size:25px;

}





/* =========================
PRICING SECTION
========================= */

.pricing-section{

  padding:120px 8%;

  background:#f5f7fa;

}



.dark-section{

  background:#001f3f;

}



.dark-section h2{

  color:white;

}



.pricing-section h2{

  text-align:center;

  font-size:55px;

  margin-bottom:70px;

}



/* GRID */

.pricing-grid{

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

  gap:40px;

}



/* CARD */

.price-card{

  background:white;

  padding:50px 35px;

  border-radius:25px;

  text-align:center;

  box-shadow:0 10px 30px rgba(0,0,0,0.1);

  transition:0.5s;

  position:relative;

}



.price-card:hover{

  transform:translateY(-15px);

  background:#ff6600;

  color:white;

}



.price-card i{

  font-size:60px;

  margin-bottom:25px;

  color:#ff6600;

}



.price-card:hover i{

  color:white;

}



.price-card h3{

  font-size:30px;

  margin-bottom:20px;

}



.price-card h1{

  font-size:55px;

  margin-bottom:25px;

}



.price-card ul{

  list-style:none;

  margin-bottom:30px;

}



.price-card ul li{

  margin:15px 0;

  font-size:18px;

}



.price-card a{

  display:inline-block;

  padding:15px 35px;

  background:#001f3f;

  color:white;

  text-decoration:none;

  border-radius:50px;

  font-size:18px;

  font-weight:bold;

}



.price-card:hover a{

  background:white;

  color:#ff6600;

}



/* POPULAR */

.popular-tag{

  position:absolute;

  top:20px;

  right:20px;

  background:#ff6600;

  color:white;

  padding:8px 15px;

  border-radius:30px;

  font-size:14px;

}





/* =========================
CALCULATOR
========================= */

.calculator-section{

  padding:120px 8%;

  background:white;

}



.calculator-section h2{

  text-align:center;

  font-size:55px;

  margin-bottom:60px;

}



.calculator-box{

  max-width:900px;

  margin:auto;

  background:#f5f7fa;

  padding:50px;

  border-radius:25px;

}



.calculator-form{

  display:flex;

  flex-direction:column;

  gap:25px;

}



.calculator-form input,
.calculator-form select,
.calculator-form textarea{

  padding:18px;

  border:none;

  border-radius:15px;

  background:white;

  font-size:18px;

}



.calculator-form button{

  padding:18px;

  background:#ff6600;

  color:white;

  border:none;

  border-radius:50px;

  font-size:22px;

  font-weight:bold;

  cursor:pointer;

}





/* =========================
ENQUIRY
========================= */

.pricing-enquiry{

  padding:120px 8%;

  background:linear-gradient(135deg,#001f3f,#003d73);

}



.pricing-enquiry-box{

  max-width:850px;

  margin:auto;

  background:white;

  padding:60px;

  border-radius:30px;

}



.pricing-enquiry-box h2{

  text-align:center;

  font-size:50px;

  margin-bottom:40px;

}



.pricing-enquiry-box form{

  display:flex;

  flex-direction:column;

  gap:25px;

}



.pricing-enquiry-box input,
.pricing-enquiry-box textarea{

  padding:18px;

  border:none;

  background:#f5f7fa;

  border-radius:15px;

  font-size:18px;

}



.pricing-enquiry-box button{

  padding:18px;

  border:none;

  background:#ff6600;

  color:white;

  border-radius:50px;

  font-size:22px;

  font-weight:bold;

  cursor:pointer;

}





/* MOBILE */

@media(max-width:768px){

  .pricing-overlay h1{

    font-size:40px;

  }

  .pricing-section h2,
  .calculator-section h2,
  .pricing-enquiry-box h2{

    font-size:35px;

  }

}
/* =========================
LOCATIONS HERO
========================= */

.locations-hero{

  width:100%;

  height:90vh;

  background:url("images/location-bg.jpg");

  background-size:cover;

  background-position:center;

  position:relative;

}



.locations-overlay{

  width:100%;

  height:100%;

  background:rgba(0,0,0,0.65);

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  text-align:center;

  padding:20px;

}



.locations-overlay h1{

  font-size:75px;

  color:white;

  margin-bottom:25px;

}



.locations-overlay p{

  font-size:24px;

  color:#f1f1f1;

  max-width:900px;

  line-height:1.8;

}



/* HERO BUTTONS */

.hero-location-btns{

  display:flex;

  gap:25px;

  margin-top:40px;

}



.hero-call-btn,
.hero-whatsapp-btn{

  padding:18px 40px;

  border-radius:50px;

  text-decoration:none;

  font-size:22px;

  font-weight:bold;

  transition:0.5s;

}



.hero-call-btn{

  background:#ff6600;

  color:white;

}



.hero-whatsapp-btn{

  background:#25D366;

  color:white;

}



.hero-call-btn:hover,
.hero-whatsapp-btn:hover{

  transform:translateY(-8px);

}





/* =========================
TOP CITIES
========================= */

.top-cities{

  width:100%;

  padding:120px 8%;

  background:#f5f7fa;

}



.top-cities h2{

  text-align:center;

  font-size:60px;

  margin-bottom:70px;

  color:#001f3f;

}



/* GRID */

.cities-grid{

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

  gap:35px;

}



/* CARD */

.city-card{

  background:white;

  padding:45px 35px;

  border-radius:25px;

  text-align:center;

  box-shadow:0 10px 25px rgba(0,0,0,0.1);

  transition:0.5s;

}



.city-card:hover{

  background:#ff6600;

  transform:translateY(-12px);

}



.city-card i{

  font-size:55px;

  color:#ff6600;

  margin-bottom:20px;

  transition:0.5s;

}



.city-card h3{

  font-size:32px;

  margin-bottom:15px;

  color:#001f3f;

  transition:0.5s;

}



.city-card p{

  font-size:18px;

  color:#555;

  line-height:1.8;

  transition:0.5s;

}



/* HOVER */

.city-card:hover i,
.city-card:hover h3,
.city-card:hover p{

  color:white;

}





/* =========================
MAP SECTION
========================= */

.map-section{

  width:100%;

  padding:120px 8%;

  background:white;

}



.map-section h2{

  text-align:center;

  font-size:60px;

  margin-bottom:60px;

  color:#001f3f;

}



/* MAP */

.map-box{

  width:100%;

  border-radius:30px;

  overflow:hidden;

  box-shadow:0 10px 30px rgba(0,0,0,0.2);

}



.map-box iframe{

  width:100%;

  height:550px;

  border:none;

}





/* =========================
WHY SECTION
========================= */

.why-location-section{

  width:100%;

  padding:120px 8%;

  background:linear-gradient(135deg,#001f3f,#003d73);

}



.why-location-section h2{

  text-align:center;

  font-size:60px;

  margin-bottom:70px;

  color:white;

}



/* GRID */

.why-location-grid{

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

  gap:35px;

}



/* CARD */

.why-location-card{

  background:white;

  padding:50px 35px;

  border-radius:25px;

  text-align:center;

  transition:0.5s;

}



.why-location-card:hover{

  background:#ff6600;

  transform:translateY(-12px);

}



.why-location-card i{

  font-size:55px;

  color:#ff6600;

  margin-bottom:25px;

  transition:0.5s;

}



.why-location-card h3{

  font-size:32px;

  margin-bottom:20px;

  color:#001f3f;

  transition:0.5s;

}



.why-location-card p{

  font-size:18px;

  line-height:1.8;

  color:#555;

  transition:0.5s;

}



/* HOVER */

.why-location-card:hover i,
.why-location-card:hover h3,
.why-location-card:hover p{

  color:white;

}





/* =========================
ENQUIRY
========================= */

.location-enquiry{

  width:100%;

  padding:120px 8%;

  background:#f5f7fa;

}



.location-enquiry-box{

  max-width:900px;

  margin:auto;

  background:white;

  padding:60px;

  border-radius:30px;

  box-shadow:0 10px 30px rgba(0,0,0,0.15);

}



.location-enquiry-box h2{

  text-align:center;

  font-size:50px;

  margin-bottom:40px;

  color:#001f3f;

}



.location-enquiry-box form{

  display:flex;

  flex-direction:column;

  gap:25px;

}



.location-enquiry-box input,
.location-enquiry-box textarea{

  padding:18px;

  border:none;

  background:#f5f7fa;

  border-radius:15px;

  font-size:18px;

}



.location-enquiry-box button{

  padding:18px;

  border:none;

  background:#ff6600;

  color:white;

  border-radius:50px;

  font-size:22px;

  font-weight:bold;

  cursor:pointer;

  transition:0.5s;

}



.location-enquiry-box button:hover{

  background:#001f3f;

}





/* MOBILE */

@media(max-width:768px){

  .locations-overlay h1{

    font-size:40px;

  }

  .locations-overlay p{

    font-size:18px;

  }

  .top-cities h2,
  .map-section h2,
  .why-location-section h2,
  .location-enquiry-box h2{

    font-size:36px;

  }

  .hero-location-btns{

    flex-direction:column;

  }

}
/* =========================
ALL INDIA LOCATIONS
========================= */

.all-india-locations{

  width:100%;

  padding:120px 8%;

  background:#ffffff;

}



.all-india-locations h2{

  text-align:center;

  font-size:60px;

  color:#001f3f;

  margin-bottom:20px;

}



.location-subtitle{

  text-align:center;

  font-size:22px;

  color:#555;

  max-width:1000px;

  margin:auto;

  line-height:1.8;

  margin-bottom:70px;

}



/* GRID */

.state-grid{

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

  gap:35px;

}



/* BOX */

.state-box{

  background:#f5f7fa;

  padding:40px 35px;

  border-radius:25px;

  box-shadow:0 10px 25px rgba(0,0,0,0.08);

  transition:0.5s;

  border-left:6px solid #ff6600;

}



.state-box:hover{

  background:#ff6600;

  transform:translateY(-10px);

}



.state-box h3{

  font-size:32px;

  color:#001f3f;

  margin-bottom:18px;

  transition:0.5s;

}



.state-box p{

  font-size:18px;

  color:#555;

  line-height:1.9;

  transition:0.5s;

}



/* HOVER */

.state-box:hover h3,
.state-box:hover p{

  color:white;

}





/* MOBILE */

@media(max-width:768px){

  .all-india-locations h2{

    font-size:38px;

  }

  .location-subtitle{

    font-size:18px;

  }

}
/* =========================
HOME STYLE PRIVACY PAGE
========================= */

.privacy-hero-home{

  width:100%;

  height:100vh;

  background:url('images/privacy-bg.jpg');

  background-size:cover;

  background-position:center;

  position:relative;

}



.privacy-dark-overlay{

  width:100%;

  height:100%;

  background:rgba(0,0,0,0.7);

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:120px 8%;

  gap:50px;

  flex-wrap:wrap;

}



/* LEFT CONTENT */

.privacy-hero-content{

  flex:1;

  min-width:320px;

}



.privacy-hero-content h1{

  color:white;

  font-size:75px;

  line-height:1.2;

  margin-bottom:30px;

}



.privacy-hero-content p{

  color:white;

  font-size:24px;

  line-height:1.9;

  margin-bottom:40px;

}



.privacy-hero-btns{

  display:flex;

  gap:20px;

  flex-wrap:wrap;

}



/* BUTTONS */

.privacy-call-btn,
.privacy-whatsapp-btn{

  padding:18px 45px;

  border-radius:50px;

  text-decoration:none;

  font-size:20px;

  font-weight:600;

  transition:0.5s;

  color:white;

}



.privacy-call-btn{

  background:#ff6600;

}



.privacy-whatsapp-btn{

  background:#25d366;

}



.privacy-call-btn:hover,
.privacy-whatsapp-btn:hover{

  transform:translateY(-5px);

}



/* FORM */

.privacy-form{

  width:420px;

  background:white;

  padding:45px;

  border-radius:25px;

  box-shadow:0 15px 35px rgba(0,0,0,0.2);

}



.privacy-form h2{

  font-size:40px;

  margin-bottom:30px;

  color:#001f3f;

}



.privacy-form input,
.privacy-form textarea{

  width:100%;

  padding:18px;

  margin-bottom:20px;

  border-radius:12px;

  border:1px solid #ddd;

  font-size:16px;

}



.privacy-form textarea{

  height:140px;

  resize:none;

}



.privacy-form button{

  width:100%;

  padding:18px;

  background:#ff6600;

  color:white;

  border:none;

  border-radius:12px;

  font-size:20px;

  cursor:pointer;

  transition:0.5s;

}



.privacy-form button:hover{

  background:#001f3f;

}



/* FEATURES */

.privacy-features{

  padding:120px 8%;

  background:#f5f7fa;

}



.privacy-features h2{

  text-align:center;

  font-size:60px;

  color:#001f3f;

  margin-bottom:70px;

}



.privacy-feature-grid{

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

  gap:35px;

}



.privacy-feature-box{

  background:white;

  padding:45px 30px;

  border-radius:25px;

  text-align:center;

  transition:0.5s;

  box-shadow:0 10px 25px rgba(0,0,0,0.08);

}



.privacy-feature-box:hover{

  background:#ff6600;

  transform:translateY(-10px);

}



.privacy-feature-box i{

  font-size:60px;

  color:#ff6600;

  margin-bottom:25px;

}



.privacy-feature-box:hover i{

  color:white;

}



.privacy-feature-box h3{

  font-size:30px;

  margin-bottom:20px;

  color:#001f3f;

}



.privacy-feature-box:hover h3{

  color:white;

}



.privacy-feature-box p{

  font-size:18px;

  line-height:1.8;

  color:#555;

}



.privacy-feature-box:hover p{

  color:white;

}



/* POLICY SECTION */

.privacy-policy-section{

  padding:120px 8%;

  display:flex;

  align-items:center;

  gap:60px;

  flex-wrap:wrap;

}



.privacy-policy-left{

  flex:1;

}



.privacy-policy-left img{

  width:100%;

  border-radius:25px;

}



.privacy-policy-right{

  flex:1;

}



.privacy-policy-right h2{

  font-size:60px;

  color:#001f3f;

  margin-bottom:30px;

}



.privacy-policy-right p{

  font-size:20px;

  line-height:2;

  color:#555;

  margin-bottom:20px;

}



.privacy-read-btn{

  display:inline-block;

  padding:18px 40px;

  background:#ff6600;

  color:white;

  text-decoration:none;

  border-radius:50px;

  font-size:20px;

  margin-top:20px;

}



/* COUNTER */

.privacy-counter-section{

  padding:100px 8%;

  background:#001f3f;

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

  gap:30px;

}



.privacy-counter-card{

  background:white;

  text-align:center;

  padding:60px 30px;

  border-radius:25px;

}



.privacy-counter-card h2{

  font-size:60px;

  color:#ff6600;

  margin-bottom:20px;

}



.privacy-counter-card p{

  font-size:24px;

  font-weight:600;

  color:#001f3f;

}



/* MOBILE */

@media(max-width:768px){

  .privacy-dark-overlay{

    padding:120px 5%;

  }

  .privacy-hero-content h1{

    font-size:45px;

  }

  .privacy-hero-content p{

    font-size:18px;

  }

  .privacy-form{

    width:100%;

  }

  .privacy-features h2,
  .privacy-policy-right h2{

    font-size:40px;

  }

}

/* =========================
INSURANCE PAGE PREMIUM DESIGN
STYLE.CSS ME LAST ME PASTE KRO
========================= */

.insurance-hero{
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

.insurance-bg-video{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.insurance-overlay{
    position: relative;
    z-index: 2;
    background: rgba(0,0,0,0.70);
    min-height: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 120px 8%;
    gap: 60px;
    flex-wrap: wrap;
}

.insurance-hero-content{
    flex: 1;
    min-width: 320px;
}

.insurance-tag{
    display: inline-block;
    background: #ffcc00;
    color: #000;
    padding: 10px 22px;
    border-radius: 30px;
    font-weight: 700;
    margin-bottom: 25px;
}

.insurance-hero-content h1{
    font-size: 58px;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 25px;
}

.insurance-hero-content p{
    color: #ddd;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 35px;
}

.insurance-hero-btns{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.insurance-call-btn,
.insurance-whatsapp-btn{
    padding: 16px 35px;
    border-radius: 50px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    transition: 0.4s;
}

.insurance-call-btn{
    background: linear-gradient(45deg,#ff6600,#ff9900);
}

.insurance-whatsapp-btn{
    background: #25D366;
}

.insurance-call-btn:hover,
.insurance-whatsapp-btn:hover{
    transform: translateY(-5px);
}

.insurance-mini-boxes{
    display: flex;
    gap: 20px;
    margin-top: 45px;
    flex-wrap: wrap;
}

.insurance-mini-box{
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    padding: 25px;
    border-radius: 20px;
    width: 180px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.15);
    transition: 0.4s;
}

.insurance-mini-box:hover{
    background: #ff6600;
    transform: translateY(-10px);
}

.insurance-mini-box i{
    color: #fff;
    font-size: 38px;
    margin-bottom: 15px;
}

.insurance-mini-box h3{
    color: #fff;
    font-size: 18px;
}

.insurance-form{
    width: 420px;
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(14px);
    padding: 40px;
    border-radius: 25px;
    border: 1px solid rgba(255,255,255,0.15);
}

.insurance-form h2{
    color: #fff;
    text-align: center;
    margin-bottom: 25px;
    font-size: 32px;
}

.insurance-form input,
.insurance-form textarea{
    width: 100%;
    padding: 15px;
    margin-bottom: 18px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
}

.insurance-form textarea{
    height: 120px;
}

.insurance-form button{
    width: 100%;
    padding: 16px;
    border: none;
    background: linear-gradient(45deg,#ff6600,#ff9900);
    color: #fff;
    font-size: 18px;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.4s;
}

.insurance-form button:hover{
    transform: scale(1.03);
}

.insurance-highlight-strip{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 25px;
    padding: 70px 8%;
    background: #f7f7f7;
}

.insurance-highlight-box{
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: 0.4s;
}

.insurance-highlight-box:hover{
    transform: translateY(-10px);
    background: #ff6600;
    color: #fff;
}

.insurance-highlight-box i{
    font-size: 42px;
}

.premium-insurance-section{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    padding: 100px 8%;
    flex-wrap: wrap;
}

.premium-insurance-image img{
    width: 500px;
    border-radius: 25px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

.premium-insurance-content{
    flex: 1;
    min-width: 320px;
}

.premium-insurance-content span{
    color: #ff6600;
    font-weight: 700;
    letter-spacing: 2px;
}

.premium-insurance-content h2{
    font-size: 48px;
    margin: 20px 0;
}

.premium-insurance-content p{
    line-height: 1.9;
    color: #555;
    margin-bottom: 30px;
}

.insurance-features-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 20px;
    margin-bottom: 35px;
}

.insurance-feature-card{
    background: #fff5ee;
    padding: 20px;
    border-radius: 15px;
    font-weight: 600;
    transition: 0.4s;
}

.insurance-feature-card:hover{
    background: #ff6600;
    color: #fff;
}

.insurance-btn-main{
    display: inline-block;
    background: linear-gradient(45deg,#ff6600,#ff9900);
    color: #fff;
    padding: 16px 35px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 700;
}

.claim-process-premium{
    background: linear-gradient(135deg,#111,#222);
    padding: 100px 8%;
    text-align: center;
}

.claim-process-premium h2{
    color: #fff;
    font-size: 48px;
    margin-bottom: 60px;
}

.claim-process-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 30px;
}

.claim-process-card{
    background: rgba(255,255,255,0.08);
    padding: 40px 30px;
    border-radius: 25px;
    transition: 0.4s;
}

.claim-process-card:hover{
    transform: translateY(-10px);
    background: #ff6600;
}

.claim-number{
    width: 80px;
    height: 80px;
    background: #fff;
    color: #ff6600;
    margin: auto;
    border-radius: 50%;
    line-height: 80px;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 25px;
}

.claim-process-card h3{
    color: #fff;
    margin-bottom: 15px;
    font-size: 24px;
}

.claim-process-card p{
    color: #ddd;
    line-height: 1.7;
}

@media(max-width:991px){

.insurance-overlay{
    flex-direction: column;
}

.insurance-form{
    width: 100%;
}

.insurance-hero-content h1{
    font-size: 40px;
}

.premium-insurance-image img{
    width: 100%;
}

}

/* =========================
INSURANCE HERO FIX
========================= */

.insurance-hero{
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.insurance-video{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    z-index: -2;
}

.insurance-overlay{
    width: 100%;
    min-height: 100vh;
    background: rgba(0,0,0,0.65);
    padding: 140px 8% 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}

/* LEFT CONTENT */

.insurance-left{
    flex: 1;
    min-width: 320px;
}

.insurance-tag{
    display: inline-block;
    background: #ffcc00;
    color: #000;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 700;
    margin-bottom: 25px;
    font-size: 18px;
}

.insurance-left h1{
    font-size: 58px;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 25px;
}

.insurance-left p{
    color: #eee;
    font-size: 20px;
    line-height: 1.8;
    margin-bottom: 35px;
    max-width: 850px;
}

/* BUTTONS */

.hero-buttons{
    display: flex;
    gap: 20px;
    margin-bottom: 45px;
    flex-wrap: wrap;
}

.call-btn,
.whatsapp-btn{
    padding: 16px 35px;
    border-radius: 50px;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    transition: 0.4s;
}

.call-btn{
    background: #ff6600;
}

.whatsapp-btn{
    background: #25D366;
}

.call-btn:hover{
    transform: translateY(-5px);
    background: #ff8533;
}

.whatsapp-btn:hover{
    transform: translateY(-5px);
    background: #1ebc57;
}

/* FEATURE CARDS */

.insurance-feature-cards{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 25px;
}

.insurance-feature-box{
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 35px 25px;
    transition: 0.4s;
    text-align: center;
}

.insurance-feature-box:hover{
    transform: translateY(-10px);
    background: #ff6600;
}

.insurance-feature-box i{
    font-size: 45px;
    color: #ffcc00;
    margin-bottom: 18px;
}

.insurance-feature-box h3{
    color: #fff;
    font-size: 28px;
    margin-bottom: 15px;
}

.insurance-feature-box p{
    color: #ddd;
    font-size: 17px;
    line-height: 1.6;
}

/* FORM */

.insurance-form{
    width: 420px;
    background: #fff;
    padding: 45px;
    border-radius: 25px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

.insurance-form h2{
    text-align: center;
    margin-bottom: 25px;
    font-size: 36px;
}

.insurance-form input,
.insurance-form textarea{
    width: 100%;
    padding: 16px;
    margin-bottom: 18px;
    border-radius: 12px;
    border: 1px solid #ccc;
    font-size: 16px;
}

.insurance-form textarea{
    height: 120px;
    resize: none;
}

.insurance-form button{
    width: 100%;
    padding: 16px;
    border: none;
    background: #ff6600;
    color: white;
    font-size: 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.4s;
}

.insurance-form button:hover{
    background: #002147;
}

/* =========================
OUR PROTECTION SERVICES
========================= */

.insurance-services{
    padding: 100px 8%;
    background: #f5f7fb;
}

.section-heading{
    text-align: center;
    margin-bottom: 70px;
}

.section-heading span{
    color: #ff6600;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 18px;
}

.section-heading h2{
    font-size: 50px;
    margin: 15px 0;
    color: #002147;
}

.section-heading p{
    max-width: 850px;
    margin: auto;
    font-size: 19px;
    line-height: 1.8;
    color: #555;
}

.insurance-service-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 35px;
}

.insurance-service-card{
    background: white;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(0,0,0,0.08);
    transition: 0.4s;
}

.insurance-service-card:hover{
    transform: translateY(-10px);
}

.insurance-service-card img{
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.insurance-service-content{
    padding: 30px;
}

.insurance-service-content h3{
    font-size: 32px;
    margin-bottom: 18px;
    color: #002147;
}

.insurance-service-content p{
    font-size: 18px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 25px;
}

.service-btn{
    display: inline-block;
    padding: 14px 28px;
    background: #ff6600;
    color: white;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    transition: 0.4s;
}

.service-btn:hover{
    background: #002147;
}

/* =========================
CUSTOMER REVIEWS
========================= */

.insurance-reviews{
    padding: 100px 8%;
    background: #002147;
}

.insurance-reviews .section-heading h2{
    color: white;
}

.insurance-review-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 35px;
}

.insurance-review-card{
    background: white;
    padding: 35px;
    border-radius: 25px;
    transition: 0.4s;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.insurance-review-card:hover{
    transform: translateY(-10px);
}

.review-header{
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 25px;
}

.review-header img{
    width: 85px;
    height: 85px;
    border-radius: 50%;
    object-fit: cover;
}

.review-header h3{
    font-size: 24px;
    color: #002147;
}

.review-header span{
    color: #777;
    font-size: 15px;
}

.review-stars{
    font-size: 24px;
    margin-bottom: 20px;
}

.insurance-review-card p{
    color: #444;
    line-height: 1.9;
    font-size: 18px;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:1100px){

.insurance-overlay{
    flex-direction: column;
}

.insurance-form{
    width: 100%;
    max-width: 600px;
}

.insurance-feature-cards,
.insurance-service-grid,
.insurance-review-grid{
    grid-template-columns: repeat(2,1fr);
}

}

@media(max-width:768px){

.insurance-left h1{
    font-size: 38px;
}

.section-heading h2{
    font-size: 36px;
}

.insurance-feature-cards,
.insurance-service-grid,
.insurance-review-grid{
    grid-template-columns: 1fr;
}

.insurance-form{
    padding: 30px;
}

}

/* =========================
WHY CHOOSE US SECTION
========================= */

.why-insurance{
    padding: 110px 8%;
    background: linear-gradient(135deg,#001f3f,#002147);
}

.why-insurance .section-heading h2{
    color: white;
}

.why-insurance-grid{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 30px;
    margin-top: 70px;
}

.why-insurance-box{
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 25px;
    padding: 45px 30px;
    text-align: center;
    transition: 0.4s;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.why-insurance-box:hover{
    transform: translateY(-12px);
    background: #ff6600;
}

.why-insurance-box i{
    font-size: 55px;
    color: #ffcc00;
    margin-bottom: 25px;
}

.why-insurance-box h3{
    color: white;
    font-size: 30px;
    margin-bottom: 18px;
}

.why-insurance-box p{
    color: #ddd;
    line-height: 1.8;
    font-size: 17px;
}



/* =========================
CLAIM PROCESS SECTION
========================= */

.claim-section{
    padding: 110px 8%;
    background: #f5f7fb;
}

.claim-grid{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 35px;
    margin-top: 70px;
}

.claim-card{
    background: white;
    padding: 45px 30px;
    border-radius: 25px;
    text-align: center;
    transition: 0.4s;
    box-shadow: 0 10px 35px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
}

.claim-card::before{
    content: "";
    position: absolute;
    width: 120%;
    height: 0%;
    background: #ff6600;
    left: -10%;
    top: 0;
    z-index: 0;
    transition: 0.5s;
    border-radius: 0 0 50% 50%;
}

.claim-card:hover::before{
    height: 100%;
}

.claim-card:hover{
    transform: translateY(-12px);
}

.claim-card *{
    position: relative;
    z-index: 2;
}

.claim-number{
    width: 90px;
    height: 90px;
    background: #002147;
    color: white;
    margin: auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 30px;
    transition: 0.4s;
}

.claim-card:hover .claim-number{
    background: white;
    color: #ff6600;
}

.claim-card h3{
    font-size: 30px;
    margin-bottom: 18px;
    color: #002147;
    transition: 0.4s;
}

.claim-card p{
    font-size: 18px;
    line-height: 1.8;
    color: #555;
    transition: 0.4s;
}

.claim-card:hover h3,
.claim-card:hover p{
    color: white;
}



/* =========================
RESPONSIVE
========================= */

@media(max-width:1100px){

.why-insurance-grid,
.claim-grid{
    grid-template-columns: repeat(2,1fr);
}

}

@media(max-width:768px){

.why-insurance-grid,
.claim-grid{
    grid-template-columns: 1fr;
}

}

.page-hero{
  height: 100vh;
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
  url("images/fleet-bg.jpg") center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: white;
}

.hero-overlay{
  display: flex;
  gap: 40px;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
}

.hero-form{
  background: white;
  padding: 20px;
  border-radius: 10px;
  color: black;
  width: 300px;
}

.fleet-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 50px;
}

.fleet-card{
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  text-align: center;
  padding-bottom: 15px;
}

.stats{
  display: flex;
  justify-content: space-around;
  padding: 60px;
  background: #f5f5f5;
  text-align: center;
}

.why-grid{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
  padding: 40px;
}

.why-card{
  background: #fff;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
}
/* =========================
FLEET HERO
========================= */

.fleet-hero{
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.fleet-video{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fleet-overlay{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 8%;
}

.fleet-content span{
    background: #ff6600;
    color: white;
    padding: 12px 25px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
}

.fleet-content h1{
    font-size: 70px;
    color: white;
    margin: 30px 0;
}

.fleet-content p{
    color: #eee;
    font-size: 22px;
    line-height: 1.8;
    max-width: 900px;
    margin: auto;
}

.fleet-buttons{
    margin-top: 40px;
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.fleet-call,
.fleet-whatsapp{
    padding: 16px 35px;
    border-radius: 50px;
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 700;
    transition: 0.4s;
}

.fleet-call{
    background: #ff6600;
}

.fleet-whatsapp{
    background: #25D366;
}

.fleet-call:hover,
.fleet-whatsapp:hover{
    transform: translateY(-5px);
}



/* =========================
FLEET CARDS
========================= */

.fleet-section{
    padding: 100px 8%;
    background: #f5f7fb;
}

.fleet-grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 40px;
    margin-top: 60px;
}

.fleet-card{
    background: white;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(0,0,0,0.08);
    transition: 0.4s;
}

.fleet-card:hover{
    transform: translateY(-12px);
    background: #002147;
}

.fleet-card img{
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.fleet-card-content{
    padding: 35px;
}

.fleet-card-content h3{
    font-size: 34px;
    margin-bottom: 18px;
    color: #002147;
    transition: 0.4s;
}

.fleet-card-content p{
    font-size: 18px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 25px;
    transition: 0.4s;
}

.fleet-card-content ul{
    margin-bottom: 30px;
}

.fleet-card-content ul li{
    margin-bottom: 12px;
    font-size: 17px;
    color: #333;
    transition: 0.4s;
}

.fleet-card:hover h3,
.fleet-card:hover p,
.fleet-card:hover ul li{
    color: white;
}

.fleet-btn{
    display: inline-block;
    padding: 14px 28px;
    background: #ff6600;
    color: white;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
}



/* =========================
FLEET WHY SECTION
========================= */

.fleet-why{
    padding: 100px 8%;
    background: #002147;
}

.fleet-why .section-heading h2{
    color: white;
}

.fleet-why-grid{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 30px;
    margin-top: 60px;
}

.fleet-why-card{
    background: rgba(255,255,255,0.08);
    border-radius: 25px;
    padding: 40px 30px;
    text-align: center;
    transition: 0.4s;
}

.fleet-why-card:hover{
    background: #ff6600;
    transform: translateY(-10px);
}

.fleet-icon{
    font-size: 60px;
    margin-bottom: 20px;
}

.fleet-why-card h3{
    color: white;
    font-size: 28px;
    margin-bottom: 18px;
}

.fleet-why-card p{
    color: #ddd;
    line-height: 1.8;
}



/* =========================
REVIEWS
========================= */

.fleet-reviews{
    padding: 100px 8%;
    background: #f5f7fb;
}

.fleet-review-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 35px;
    margin-top: 60px;
}

.fleet-review-card{
    background: white;
    padding: 40px 30px;
    border-radius: 25px;
    text-align: center;
    box-shadow: 0 10px 35px rgba(0,0,0,0.08);
    transition: 0.4s;
}

.fleet-review-card:hover{
    transform: translateY(-10px);
    background: #002147;
}

.fleet-review-card img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
}

.fleet-review-card h3{
    font-size: 28px;
    margin-bottom: 12px;
    transition: 0.4s;
}

.fleet-review-card p{
    line-height: 1.8;
    color: #555;
    transition: 0.4s;
}

.fleet-review-card:hover h3,
.fleet-review-card:hover p{
    color: white;
}

.stars{
    margin-bottom: 18px;
    font-size: 22px;
}



/* =========================
RESPONSIVE
========================= */

@media(max-width:1100px){

.fleet-grid,
.fleet-why-grid,
.fleet-review-grid{
    grid-template-columns: repeat(2,1fr);
}

}

@media(max-width:768px){

.fleet-grid,
.fleet-why-grid,
.fleet-review-grid{
    grid-template-columns: 1fr;
}

.fleet-content h1{
    font-size: 42px;
}

.fleet-content p{
    font-size: 18px;
}

}
/* PRIVACY PAGE */

.privacy-hero{
    height:90vh;
    background:url('https://images.unsplash.com/photo-1556155092-490a1ba16284?q=80&w=1400&auto=format&fit=crop');
    background-size:cover;
    background-position:center;
    position:relative;
}

.privacy-overlay{
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.65);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:20px;
}

.privacy-content span{
    background:#ff6600;
    color:white;
    padding:10px 25px;
    border-radius:30px;
    font-size:18px;
    font-weight:600;
}

.privacy-content h1{
    color:white;
    font-size:65px;
    margin-top:25px;
}

.privacy-content p{
    color:#ddd;
    max-width:900px;
    margin:auto;
    margin-top:20px;
    line-height:1.8;
    font-size:20px;
}

.privacy-services{
    padding:100px 8%;
    background:#f5f5f5;
}

.privacy-services h2{
    text-align:center;
    font-size:50px;
    color:#002244;
    margin-bottom:60px;
}

.privacy-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.privacy-card{
    background:white;
    border-radius:20px;
    overflow:hidden;
    transition:0.4s;
    box-shadow:0 5px 20px rgba(0,0,0,0.1);
}

.privacy-card:hover{
    transform:translateY(-10px);
    background:#002244;
    color:white;
}

.privacy-card img{
    width:100%;
    height:250px;
    object-fit:cover;
}

.privacy-card h3{
    padding:20px;
    font-size:28px;
    color:#ff6600;
}

.privacy-card p{
    padding:0 20px 30px;
    line-height:1.7;
}

.policy-section{
    padding:100px 8%;
}

.policy-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}

.policy-text h2{
    font-size:50px;
    color:#002244;
    margin-bottom:25px;
}

.policy-text p{
    line-height:1.9;
    margin-bottom:20px;
    font-size:18px;
}

.policy-text ul li{
    margin:15px 0;
    font-size:18px;
    list-style:none;
}

.policy-image img{
    width:100%;
    border-radius:20px;
}

.why-privacy{
    padding:100px 8%;
    background:#002244;
}

.why-privacy h2{
    text-align:center;
    color:white;
    font-size:50px;
    margin-bottom:60px;
}

.why-box i{
    font-size:45px;
    color:#ff6600;
    margin-bottom:20px;
}

@media(max-width:991px){

    .privacy-grid{
        grid-template-columns:1fr 1fr;
    }

    .policy-content{
        grid-template-columns:1fr;
    }

    .privacy-content h1{
        font-size:42px;
    }

}

@media(max-width:768px){

    .privacy-grid{
        grid-template-columns:1fr;
    }

    .privacy-services h2,
    .policy-text h2,
    .why-privacy h2{
        font-size:34px;
    }

    .privacy-content h1{
        font-size:34px;
    }

}
/* BLOG PAGE */

.blog-hero{
    height:90vh;
    background:url('https://images.unsplash.com/photo-1600518464441-9154a4dea21b?q=80&w=1400&auto=format&fit=crop');
    background-size:cover;
    background-position:center;
    position:relative;
}

.blog-overlay{
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.65);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:20px;
}

.blog-content span{
    background:#ff6600;
    color:white;
    padding:12px 28px;
    border-radius:30px;
    font-size:18px;
    font-weight:600;
}

.blog-content h1{
    color:white;
    font-size:70px;
    margin-top:25px;
}

.blog-content p{
    color:#ddd;
    max-width:900px;
    margin:auto;
    margin-top:20px;
    line-height:1.9;
    font-size:20px;
}

.blog-section{
    padding:100px 8%;
    background:#f5f5f5;
}

.blog-section h2{
    text-align:center;
    font-size:50px;
    color:#002244;
    margin-bottom:60px;
}

.blog-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
}

.blog-card{
    background:white;
    border-radius:20px;
    overflow:hidden;
    transition:0.4s;
    box-shadow:0 5px 20px rgba(0,0,0,0.1);
}

.blog-card:hover{
    transform:translateY(-10px);
    background:#002244;
}

.blog-card:hover p{
    color:#ddd;
}

.blog-card img{
    width:100%;
    height:260px;
    object-fit:cover;
}

.blog-info{
    padding:30px;
}

.blog-info h3{
    font-size:30px;
    color:#ff6600;
    margin-bottom:15px;
}

.blog-info p{
    line-height:1.8;
    margin-bottom:25px;
}

.read-btn{
    display:inline-block;
    padding:12px 28px;
    background:#ff6600;
    color:white;
    text-decoration:none;
    border-radius:30px;
    transition:0.4s;
}

.read-btn:hover{
    background:white;
    color:#002244;
}

.blog-video-section{
    padding:100px 8%;
}

.blog-video-section h2{
    text-align:center;
    font-size:50px;
    color:#002244;
    margin-bottom:60px;
}

.video-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.video-card{
    background:white;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 5px 20px rgba(0,0,0,0.1);
}

.video-card video{
    width:100%;
    height:260px;
    object-fit:cover;
}

.video-card h3{
    padding:25px;
    font-size:28px;
    color:#002244;
}

.checklist-section{
    padding:100px 8%;
    background:#002244;
}

.checklist-section h2{
    text-align:center;
    color:white;
    font-size:50px;
    margin-bottom:60px;
}

.checklist-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.check-card{
    background:white;
    padding:40px 30px;
    border-radius:20px;
    text-align:center;
    transition:0.4s;
}

.check-card:hover{
    background:#ff6600;
    color:white;
    transform:translateY(-10px);
}

.check-card i{
    font-size:50px;
    margin-bottom:20px;
    color:#002244;
}

.check-card:hover i{
    color:white;
}

.check-card h3{
    font-size:28px;
    margin-bottom:15px;
}

.check-card p{
    line-height:1.7;
}

@media(max-width:991px){

    .blog-grid,
    .video-grid,
    .checklist-grid{
        grid-template-columns:1fr 1fr;
    }

    .blog-content h1{
        font-size:45px;
    }

}

@media(max-width:768px){

    .blog-grid,
    .video-grid,
    .checklist-grid{
        grid-template-columns:1fr;
    }

    .blog-section h2,
    .blog-video-section h2,
    .checklist-section h2{
        font-size:34px;
    }

    .blog-content h1{
        font-size:34px;
    }

}

/* =========================
FRANCHISE PAGE
========================= */

.franchise-hero{
    height:100vh;
    background:url('https://images.unsplash.com/photo-1521791136064-7986c2920216?q=80&w=1400&auto=format&fit=crop');
    background-size:cover;
    background-position:center;
    position:relative;
}

.franchise-overlay{
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:20px;
}

.franchise-content span{
    background:#ff6600;
    color:white;
    padding:12px 28px;
    border-radius:30px;
    font-size:18px;
    font-weight:600;
}

.franchise-content h1{
    color:white;
    font-size:68px;
    margin-top:25px;
}

.franchise-content p{
    color:#ddd;
    max-width:900px;
    margin:auto;
    margin-top:20px;
    line-height:1.9;
    font-size:21px;
}



/* BENEFITS */

.franchise-benefits{
    padding:100px 8%;
    background:#f5f5f5;
}

.franchise-benefits h2{
    text-align:center;
    font-size:52px;
    color:#002244;
    margin-bottom:60px;
}

.franchise-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.franchise-card{
    background:white;
    padding:45px 30px;
    border-radius:25px;
    text-align:center;
    transition:0.4s;
    box-shadow:0 5px 25px rgba(0,0,0,0.1);
}

.franchise-card:hover{
    background:#002244;
    transform:translateY(-10px);
}

.franchise-card i{
    font-size:55px;
    color:#ff6600;
    margin-bottom:25px;
}

.franchise-card h3{
    font-size:30px;
    margin-bottom:18px;
}

.franchise-card p{
    line-height:1.8;
}

.franchise-card:hover h3,
.franchise-card:hover p{
    color:white;
}



/* FORM */

.franchise-form-section{
    padding:100px 8%;
}

.franchise-form-container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}

.franchise-left h2{
    font-size:52px;
    color:#002244;
    margin-bottom:25px;
}

.franchise-left p{
    line-height:1.9;
    font-size:18px;
    margin-bottom:30px;
}

.franchise-left img{
    width:100%;
    border-radius:25px;
}

.franchise-form{
    background:white;
    padding:45px;
    border-radius:25px;
    box-shadow:0 5px 25px rgba(0,0,0,0.1);
}

.franchise-form h3{
    text-align:center;
    font-size:36px;
    margin-bottom:30px;
}

.franchise-form input,
.franchise-form textarea{
    width:100%;
    padding:16px;
    margin-bottom:20px;
    border-radius:12px;
    border:1px solid #ccc;
    font-size:16px;
}

.franchise-form textarea{
    height:120px;
    resize:none;
}

.franchise-form button{
    width:100%;
    padding:16px;
    background:#ff6600;
    color:white;
    border:none;
    border-radius:12px;
    font-size:20px;
    cursor:pointer;
    transition:0.4s;
}

.franchise-form button:hover{
    background:#002244;
}



/* LISTING */

.business-listing{
    padding:100px 8%;
    background:#002244;
}

.business-listing h2{
    text-align:center;
    color:white;
    font-size:52px;
    margin-bottom:20px;
}

.business-listing p{
    text-align:center;
    color:#ddd;
    max-width:900px;
    margin:auto;
    line-height:1.9;
    font-size:19px;
}

.listing-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:60px;
}

.listing-card{
    background:white;
    padding:40px 30px;
    border-radius:25px;
    text-align:center;
    transition:0.4s;
}

.listing-card:hover{
    background:#ff6600;
    transform:translateY(-10px);
    color:white;
}

.listing-card i{
    font-size:55px;
    margin-bottom:20px;
    color:#002244;
}

.listing-card h3{
    font-size:30px;
    margin-bottom:18px;
}

.listing-card p{
    color:#555;
}

.listing-card:hover p{
    color:white;
}



/* LISTING FORM */

.listing-form-box{
    background:white;
    padding:50px;
    border-radius:25px;
    margin-top:70px;
}

.listing-form-box h3{
    text-align:center;
    font-size:40px;
    color:#002244;
    margin-bottom:15px;
}

.listing-form{
    margin-top:35px;
}

.listing-form input,
.listing-form textarea{
    width:100%;
    padding:16px;
    margin-bottom:20px;
    border-radius:12px;
    border:1px solid #ccc;
    font-size:16px;
}

.listing-form textarea{
    height:120px;
    resize:none;
}

.listing-form button{
    width:100%;
    padding:16px;
    background:#ff6600;
    color:white;
    border:none;
    border-radius:12px;
    font-size:20px;
    cursor:pointer;
}



/* REVIEWS */

.franchise-review-section{
    padding:100px 8%;
    background:#f5f5f5;
}

.franchise-review-section h2{
    text-align:center;
    font-size:52px;
    color:#002244;
    margin-bottom:60px;
}

.review-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.review-card{
    background:white;
    padding:40px 30px;
    border-radius:25px;
    text-align:center;
    transition:0.4s;
    box-shadow:0 5px 20px rgba(0,0,0,0.1);
}

.review-card:hover{
    transform:translateY(-10px);
    background:#002244;
}

.review-card img{
    width:100px;
    height:100px;
    border-radius:50%;
    object-fit:cover;
    margin-bottom:20px;
}

.review-card h3{
    font-size:30px;
    margin-bottom:18px;
}

.review-card p{
    line-height:1.8;
}

.review-card:hover h3,
.review-card:hover p{
    color:white;
}



/* RESPONSIVE */

@media(max-width:991px){

.franchise-grid,
.listing-grid,
.review-grid{
    grid-template-columns:1fr 1fr;
}

.franchise-form-container{
    grid-template-columns:1fr;
}

.franchise-content h1{
    font-size:45px;
}

}

@media(max-width:768px){

.franchise-grid,
.listing-grid,
.review-grid{
    grid-template-columns:1fr;
}

.franchise-content h1{
    font-size:34px;
}

.franchise-benefits h2,
.business-listing h2,
.franchise-review-section h2{
    font-size:34px;
}

}

/* =========================
CAREER PAGE
========================= */

.career-hero{
    height:100vh;
    background:url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=1400&auto=format&fit=crop');
    background-size:cover;
    background-position:center;
    position:relative;
}

.career-overlay{
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.72);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:20px;
}

.career-content span{
    background:#ff6600;
    color:white;
    padding:12px 28px;
    border-radius:30px;
    font-size:18px;
    font-weight:600;
}

.career-content h1{
    color:white;
    font-size:68px;
    margin-top:25px;
}

.career-content p{
    color:#ddd;
    max-width:900px;
    margin:auto;
    margin-top:20px;
    line-height:1.9;
    font-size:21px;
}



/* BENEFITS */

.career-benefits{
    padding:100px 8%;
    background:#f5f5f5;
}

.career-benefits h2{
    text-align:center;
    font-size:52px;
    color:#002244;
    margin-bottom:60px;
}

.career-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.career-card{
    background:white;
    padding:45px 30px;
    border-radius:25px;
    text-align:center;
    transition:0.4s;
    box-shadow:0 5px 20px rgba(0,0,0,0.1);
}

.career-card:hover{
    background:#002244;
    transform:translateY(-10px);
}

.career-card i{
    font-size:55px;
    color:#ff6600;
    margin-bottom:20px;
}

.career-card h3{
    font-size:30px;
    margin-bottom:18px;
}

.career-card p{
    line-height:1.8;
}

.career-card:hover h3,
.career-card:hover p{
    color:white;
}



/* JOBS */

.job-section{
    padding:100px 8%;
}

.job-section h2{
    text-align:center;
    font-size:52px;
    color:#002244;
    margin-bottom:60px;
}

.job-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.job-card{
    background:white;
    border-radius:25px;
    overflow:hidden;
    transition:0.4s;
    box-shadow:0 5px 20px rgba(0,0,0,0.1);
}

.job-card:hover{
    transform:translateY(-10px);
}

.job-card img{
    width:100%;
    height:250px;
    object-fit:cover;
}

.job-info{
    padding:30px;
}

.job-info h3{
    font-size:32px;
    color:#002244;
    margin-bottom:15px;
}

.job-info p{
    line-height:1.8;
    margin-bottom:20px;
}

.job-info ul{
    margin-bottom:25px;
}

.job-info ul li{
    margin-bottom:12px;
    list-style:none;
}

.apply-btn{
    display:inline-block;
    padding:14px 30px;
    background:#ff6600;
    color:white;
    text-decoration:none;
    border-radius:30px;
    transition:0.4s;
}

.apply-btn:hover{
    background:#002244;
}



/* FORM */

.career-form-section{
    padding:100px 8%;
    background:#002244;
}

.career-form-container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}

.career-left h2{
    color:white;
    font-size:52px;
    margin-bottom:25px;
}

.career-left p{
    color:#ddd;
    line-height:1.9;
    font-size:19px;
    margin-bottom:30px;
}

.career-left img{
    width:100%;
    border-radius:25px;
}

.career-form{
    background:white;
    padding:45px;
    border-radius:25px;
}

.career-form h3{
    text-align:center;
    font-size:38px;
    margin-bottom:30px;
}

.career-form input,
.career-form select,
.career-form textarea{
    width:100%;
    padding:16px;
    margin-bottom:20px;
    border-radius:12px;
    border:1px solid #ccc;
    font-size:16px;
}

.career-form textarea{
    height:120px;
    resize:none;
}

.career-form button{
    width:100%;
    padding:16px;
    background:#ff6600;
    color:white;
    border:none;
    border-radius:12px;
    font-size:20px;
    cursor:pointer;
    transition:0.4s;
}

.career-form button:hover{
    background:#002244;
}



/* REVIEWS */

.employee-review-section{
    padding:100px 8%;
    background:#f5f5f5;
}

.employee-review-section h2{
    text-align:center;
    font-size:52px;
    color:#002244;
    margin-bottom:60px;
}



/* RESPONSIVE */

@media(max-width:991px){

.career-grid,
.job-grid,
.review-grid{
    grid-template-columns:1fr 1fr;
}

.career-form-container{
    grid-template-columns:1fr;
}

.career-content h1{
    font-size:45px;
}

}

@media(max-width:768px){

.career-grid,
.job-grid,
.review-grid{
    grid-template-columns:1fr;
}

.career-content h1{
    font-size:34px;
}

.career-benefits h2,
.job-section h2,
.employee-review-section h2{
    font-size:34px;
}

}

/* =====================================================
   FINAL MOBILE RESPONSIVE FIX
   Times Moving Solutions
===================================================== */

@media screen and (max-width: 768px) {

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

    /* Universal fix */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* Images and videos */
    img,
    video,
    iframe {
        max-width: 100%;
        height: auto;
    }

    video {
        object-fit: cover;
    }

    /* NAVBAR */
    .navbar {
        width: 100%;
        padding: 12px 15px;
        flex-wrap: wrap;
        flex-direction: row;
        position: fixed;
    }

    .logo img {
        width: 140px;
        max-width: 140px;
    }

    .navbar ul {
        width: 100%;
        flex-direction: column;
        gap: 0;
        display: none;
        padding: 10px 0;
    }

    .navbar ul.active {
        display: flex;
    }

    .navbar ul li {
        width: 100%;
    }

    .navbar ul li a {
        display: block;
        width: 100%;
        padding: 12px 5px;
        font-size: 16px;
    }

    /* HERO */
    .hero {
        width: 100%;
        min-height: 100vh;
        height: auto;
    }

    .overlay {
        width: 100%;
        padding: 110px 20px 60px;
    }

    /* All major containers */
    .container,
    .footer-content,
    .footer-form-container {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* SECTION PADDING */
    section {
        width: 100%;
        max-width: 100%;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* HEADINGS */
    h1 {
        font-size: 34px !important;
        line-height: 1.2;
    }

    h2 {
        font-size: 28px !important;
        line-height: 1.3;
    }

    h3 {
        font-size: 21px !important;
    }

    p {
        font-size: 16px;
        line-height: 1.7;
    }

    /* ALL COMMON GRIDS */
    .services-grid,
    .service-grid,
    .why-grid,
    .location-grid,
    .state-grid,
    .counter-section,
    .pricing-grid,
    .blog-grid,
    .video-grid,
    .checklist-grid,
    .review-grid,
    .fleet-grid,
    .fleet-why-grid,
    .fleet-review-grid,
    .why-insurance-grid,
    .claim-grid,
    .insurance-feature-cards,
    .insurance-service-grid,
    .insurance-review-grid,
    .franchise-grid,
    .listing-grid,
    .career-grid,
    .job-grid,
    .privacy-grid {
        grid-template-columns: 1fr !important;
        width: 100%;
    }

    /* FLEX SECTIONS */
    .team-container,
    .service-box,
    .reverse,
    .highlight-container,
    .footer-form-container,
    .insurance-overlay {
        flex-direction: column !important;
        width: 100%;
        gap: 25px !important;
    }

    /* CARDS */
    .service-card,
    .why-card,
    .location-card,
    .state-box,
    .pricing-card,
    .blog-card,
    .review-card,
    .fleet-card,
    .claim-card,
    .career-card,
    .job-card {
        width: 100%;
        max-width: 100%;
    }

    /* FORMS */
    form,
    .insurance-form {
        width: 100% !important;
        max-width: 100%;
    }

    input,
    textarea,
    select,
    button {
        max-width: 100%;
    }

    /* FOOTER */
    .footer-content {
        text-align: center;
    }

    /* LOCATION PAGE TEXT */
    .location-subtitle {
        width: 100%;
        max-width: 100%;
        font-size: 17px;
        padding: 0 5px;
    }

    .all-india-locations h2 {
        font-size: 30px !important;
    }

    /* PAGE HERO */
    .page-hero {
        min-height: 500px;
        height: auto;
    }

    /* Floating buttons */
    .whatsapp-btn,
    .call-btn {
        z-index: 99999;
    }
}


/* SMALL MOBILE FIX */

@media screen and (max-width: 480px) {

    .navbar {
        padding: 10px 12px;
    }

    .logo img {
        width: 120px;
    }

    h1 {
        font-size: 29px !important;
    }

    h2 {
        font-size: 25px !important;
    }

    section {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

}