/* ===== GOOGLE FONT ===== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');


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

body {
    font-family: "Outfit", sans-serif;
    background: linear-gradient(120deg,#eef2f7,#e3e9f2);
    margin: 0;
}



/* ===== NAVBAR ===== */

.navbar {

    height: 110px!important;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #ddd;
    padding: 0;
    transition: 0.3s;
    display: flex;
    align-items: center;

}


/* container align */

.navbar .container {

    display: flex;
    align-items: center;

}


.navbar-brand img{
  height: 162px!important;
}
/* ===== LOGO ===== */

.navbar-brand {

    display: flex;
    align-items: center;
    height: 90px;

    font-size: 24px;
    font-weight: 700;
    color: #111 !important;
    letter-spacing: 1px;

}

.navbar-brand span {

    color: #2563eb;

}


/* LOGO IMAGE CONTROL */

.navbar-brand img {

    height: 100px;
    width: auto;
    object-fit: contain;
    margin-left: -28px;

}



/* ===== MENU ===== */

.navbar-nav .nav-link {

    font-size: 15px;
    font-weight: 500;
    color: #333 !important;
    margin-left: 25px;
    position: relative;
    transition: 0.3s;

}


/* hover line */

.navbar-nav .nav-link::before {

    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 0%;
    height: 2px;
    background: linear-gradient(45deg,#2563eb,#06b6d4);
    transition: 0.3s;
    transform: translateX(-50%);

}

.navbar-nav .nav-link:hover::before {

    width: 100%;

}

.navbar-nav .nav-link:hover {

    color: #2563eb !important;

}



/* ===== BUTTON ===== */

.nav-btn {

    background: linear-gradient(45deg,#2563eb,#06b6d4);
    color: white !important;
    padding: 7px 16px;
    border-radius: 8px;
    margin-left: 18px;
    font-size: 14px;
    transition: 0.3s;

}

.nav-btn:hover {

    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);

}



/* ===== SHADOW ===== */

.navbar.shadow-sm {

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

}



/* ===== OFFCANVAS ===== */

.offcanvas {

    width: 270px;
    background: #ffffff;

}

.offcanvas-header {

    background: linear-gradient(45deg,#2563eb,#06b6d4);
    color: white;

}

.offcanvas-body a {

    font-size: 16px;
    padding: 10px 0;
    display: block;
    color: #222;
    transition: 0.3s;

}

.offcanvas-body a:hover {

    color: #2563eb;
    padding-left: 6px;

}



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

@media(max-width:991px){

.navbar {

    height: 65px;

}

.navbar-brand img {

    height: 50px;

}

.navbar-nav .nav-link {

    margin-left: 0;

}

}

.navbar .form-control {
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 5px 10px;
    width: 270px; /* adjust as needed */
    transition: 0.3s;
}

.navbar .form-control:focus {
    border-color: #2563eb;
    box-shadow: 0 0 8px rgba(37,99,235,0.2);
}

.navbar .btn {
    border-radius: 8px;
    background: linear-gradient(45deg,#2563eb,#06b6d4);
    border: none;
}
/* Desktop only */
.search-box {
    display: flex;
}
.mobile-search-box {
    display: none;
}

/* Mobile only */
@media (max-width: 991px) {
    .search-box {
        display: none;
    }
    .mobile-search-box {
        display: flex;
      
    }
    
}
/* ===== HERO SECTION ===== */

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

.hero {

    padding: 140px 0;
    background: linear-gradient(135deg,#0b3c5d,#1e6fa8);
    position: relative;
    overflow: hidden;
    color: white;

}


/* ===== SVG SHAPES ===== */

.hero::before {

    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: #ff7a00;
    border-radius: 50%;
    opacity: 0.2;

}

.hero::after {

    content: "";
    position: absolute;
    bottom: -120px;
    left: -120px;
    width: 450px;
    height: 450px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0.1;

}


/* ===== TEXT ===== */

.hero-heading {

    font-size: 48px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);

}

.hero-heading span {

    color: #ff7a00;

}

.hero-sub {

    font-size: 18px;
    color: #dbe7ff;
    margin: 15px 0 25px;
    max-width: 520px;

}
.hero::before,
.hero::after {
    z-index: 1;  /* behind the hero-box */
}

/* ===== HERO BOX ===== */

.hero-box {

    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.3);
    z-index: 10;
    position: relative;

}

.hero-box h5 {

    color: #fff;
    font-weight: 700;
    margin-bottom: 15px;

}


/* ===== CATEGORY GRID ===== */

.hero-categories {

    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;

}

.cat {

    background: #ffffff;
    color: #111;
    padding: 12px;
    border-radius: 10px;
    text-align: center;
    font-weight: 500;
    transition: 0.3s;

}

.cat:hover {

    background: #ff7a00;
    color: white;
    transform: translateY(-3px);

}


/* ===== RIGHT IMAGE COLLAGE ===== */

.hero-images {

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 220px;
    gap: 12px;

}

.hero-images img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;

}

.hero-images img:first-child {

    grid-row: span 2;

}


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

@media(max-width:991px){

.hero-heading {

    font-size: 30px;

}

.hero-categories {

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

}

.hero-images {

    margin-top: 25px;

}

}
@media(max-width:991px){
    .hero-images img:first-child {
        grid-column: span 2; /* full width */
        aspect-ratio: 2/1;   /* width double of height */
    }
}

/* ========= ABOUT NEW ========= */

.about2 {

    padding: 100px 0;
    background: linear-gradient(135deg,#f8fbff,#eef3f9);
    position: relative;
    overflow: hidden;

}


/* background shapes */

.about2::before {

    content: "";
    position: absolute;
    top: -120px;
    left: -120px;
    width: 300px;
    height: 300px;
    background: #ff7a00;
    opacity: 0.1;
    border-radius: 50%;

}

.about2::after {

    content: "";
    position: absolute;
    bottom: -120px;
    right: -120px;
    width: 350px;
    height: 350px;
    background: #0b3c5d;
    opacity: 0.08;
    border-radius: 50%;

}


.about-wrapper {

    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;

}


/* LEFT */

.about-left {

    flex: 1;

}

.about-left h2 {

    font-size: 42px;
    font-weight: 800;
    margin-bottom: 15px;
    color: #0b3c5d;

}

.about-left span {

    color: #ff7a00;

}

.about-left p {

    color: #555;
    font-size: 17px;
    margin-bottom: 25px;
    line-height: 1.7;

}


/* BUTTON */

.about2-btn {

    background: linear-gradient(45deg,#ff7a00,#ff9a2f);
    color: white;
    padding: 12px 26px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;

}

.about2-btn:hover {

    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);

}



/* RIGHT CARDS */

.about-right {

    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;

}


/* CARD */

.about-card {

    background: linear-gradient(135deg,#ffffff,#f4f7fb);
    padding: 30px;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    transition: 0.3s;
    border: 1px solid #eee;

}

.about-card:hover {

    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);

}


/* NUMBER */

.about-card h3 {

    font-size: 36px;
    font-weight: 800;
    background: linear-gradient(45deg,#0b3c5d,#ff7a00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}


/* TEXT */

.about-card p {

    margin-top: 5px;
    color: #555;
    font-weight: 500;

}


/* MOBILE */

@media(max-width:991px){

.about-wrapper {

    flex-direction: column;

}

.about-right {

    grid-template-columns: 1fr 1fr;

}

}

@media(max-width:600px){

.about-right {

    grid-template-columns: 1fr;

}

}



/* ========= SERVICES PREMIUM ========= */

.services {

    padding: 140px 0;
    background: #f4f8fd;
    position: relative;
    overflow: hidden;

}


/* SVG */

.wave-top svg,
.wave-bottom svg {

    display: block;
    width: 100%;
    height: auto;

}

.wave-top {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

}

.wave-bottom {

    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;

}
/* TITLE */

.section-title {

    text-align: center;
    font-size: 44px;
    font-weight: 900;
    margin-bottom: 70px;
    color: #0b3c5d;

}

.section-title span {

    color: #ff7a00;

}


/* GRID */

.services-grid {

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

}


/* CARD */

.service-card {

    position: relative;
    padding: 40px 30px;
    border-radius: 18px;
    background: white;
    transition: 0.4s;
    overflow: hidden;
    z-index: 1;

}


/* gradient border */

.service-card::before {

    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 18px;
    background: linear-gradient(45deg,#0b3c5d,#ff7a00);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;

}


/* hover glow */

.service-card:hover {

    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);

}


/* ICON FLOAT */

.service-icon {

    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(45deg,#ff7a00,#0b3c5d);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 30px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);

}


/* TITLE */

.service-card h4 {

    font-size: 20px;
    font-weight: 800;
    color: #0b3c5d;
    margin-bottom: 10px;

}


/* TEXT */

.service-card p {

    color: #555;
    line-height: 1.6;

}


/* LIGHT EFFECT */

.service-card::after {

    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255,122,0,0.15);
    border-radius: 50%;
    top: -80px;
    right: -80px;
    transition: 0.4s;

}

.service-card:hover::after {

    transform: scale(1.4);

}


/* MOBILE */

@media(max-width:991px){

.services-grid {

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

}

}

@media(max-width:600px){

.services-grid {

    grid-template-columns: 1fr;

}

}



.work3 {

    padding: 120px 0;
    background-color: #ffffff;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg stroke='%23000000' stroke-opacity='0.02' stroke-width='2'%3E%3Cpath d='M0 120 L120 0'/%3E%3Cpath d='M-30 120 L120 -30'/%3E%3Cpath d='M0 150 L150 0'/%3E%3C/g%3E%3C/svg%3E");

    background-repeat: repeat;
    background-size: 120px 120px;

}

.work3-grid {

    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 30px;
    padding: 55px;

}


/* card */

.work3-card {

    background: #f8fbff;
    padding: 40px 25px;
    border-radius: 16px;
    position: relative;
    transition: 0.3s;
    border: 1px solid #eee;

}


.work3-card:hover {

    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);

}


/* number */

.step-no {

    font-size: 42px;
    font-weight: 800;
    color: #0b3c5d;
    opacity: 0.2;
    margin-bottom: 10px;

}


/* title */

.work3-card h4 {

    font-weight: 700;
    margin-bottom: 10px;

}


/* text */

.work3-card p {

    color: #555;
    line-height: 1.5;

}


@media(max-width:991px){

.work3-grid {

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

}

}

@media(max-width:600px){

.work3-grid {

    grid-template-columns: 1fr;

}

}


.workers {

    padding: 100px 0;
    background: linear-gradient(135deg,#f8fbff,#eef3f9);
    position: relative;
    overflow: hidden;

}


/* background shapes */

.workers::before {

    content: "";
    position: absolute;
    top: -120px;
    left: -120px;
    width: 300px;
    height: 300px;
    background: #ff7a00;
    opacity: 0.1;
    border-radius: 50%;

}

.workers::after {

    content: "";
    position: absolute;
    bottom: -120px;
    right: -120px;
    width: 350px;
    height: 350px;
    background: #0b3c5d;
    opacity: 0.08;
    border-radius: 50%;

}


/* title */

.section-title {

    text-align: center;
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 60px;

}

.section-title span {

    color: #ff7a00;

}


/* ========================= */
/* SWIPER FIX */
/* ========================= */

.workers-swiper{
    padding-bottom: 20px;
}

.workers-swiper .swiper-wrapper{
    transition-timing-function: linear !important;
}

.swiper-slide{
    display:flex;
    justify-content:center;
}


/* ========================= */
/* CARD */
/* ========================= */

.worker-card {

    position: relative;
    height: 320px;
    width: 100%;
    max-width: 320px;

    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;

}


/* image */

.worker-img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.4s;

}

.worker-card:hover .worker-img {

    transform: scale(1.1);

}


/* overlay */

.worker-info {

    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;

    padding: 20px;

    background: linear-gradient(
        to top,
        rgba(0,0,0,0.8),
        rgba(0,0,0,0.3),
        transparent
    );

    color: white;

}


/* name */

.worker-info h4 {

    margin: 0;
    font-weight: 700;

}


/* text */

.worker-info p {

    margin: 2px 0;
    font-size: 13px;

}


/* verified badge */

.worker-card::after {

    content: "Verified";
    position: absolute;
    top: 10px;
    left: 10px;

    background: #ff7a00;
    color: white;

    padding: 4px 8px;
    font-size: 12px;
    border-radius: 6px;

}


/* hover glow */

.worker-card:hover {

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

}


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

@media(max-width:1000px){

.swiper-slide{
    justify-content:center;
}

}

@media(max-width:600px){

.worker-card{
    max-width: 90%;
}

}

.workers-swiper .swiper-wrapper{
  transition-timing-function: linear !important;
}

.swiper-slide{
  display:flex;
  justify-content:center;
}
.contact-pro {
  position: relative;
  padding: 120px 0;
  background: #0b3c5d;
  overflow: hidden;
  color: #fff;
}

/* Wrapper with diagonal split */
.contact-wrapper {
  display: flex;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}

/* Left Info */
.contact-left {
  flex: 1;
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  padding: 60px 40px;
}

/* Info Cards */
.info-card {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  background: rgba(255,255,255,0.05);
  padding: 15px 20px;
  border-radius: 12px;
  transition: all 0.4s;
}

.info-card:hover .icon {
  transform: rotate(20deg) scale(1.2);
  color: #ff7a00;
}

/* Right Form */
.contact-right {
  flex: 1;
  background: #fff;
  color: #0b3c5d;
  padding: 60px 50px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
  position: relative;
}

/* Form Inputs */
.form-group {
  position: relative;
  margin-bottom: 25px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  border: none;
  border-bottom: 2px solid #ccc;
  padding: 10px 5px;
  font-size: 16px;
  outline: none;
  background: transparent;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #ff7a00;
}

.form-group span {
  position: absolute;
  left: 5px;
  top: 10px;
  transition: 0.3s;
  color: #aaa;
}

.form-group input:focus + span,
.form-group input:not(:placeholder-shown) + span,
.form-group textarea:focus + span,
.form-group textarea:not(:placeholder-shown) + span {
  top: -15px;
  font-size: 13px;
  color: #ff7a00;
}

/* Button */
button {
  background: #ff7a00;
  color: #fff;
  padding: 15px;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

button::after {
  content: "";
  position: absolute;
  width: 0;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(255,255,255,0.2);
  transition: 0.4s;
}

button:hover::after {
  width: 100%;
}

.section-titles {
  text-align: center;
  font-size: 42px;
  font-weight: 800;
  color: #ff7a00;
  margin-bottom: 60px;
}

.section-titles span {
  color: #fff;
}

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

  /* Wrapper stack vertically */
  .contact-wrapper {
    flex-direction: column;
    clip-path: none; /* remove diagonal for smaller screens */
  }

  /* Left & Right full width */
  .contact-left,
  .contact-right {
    flex: 1 1 100%;
    padding: 40px 20px;
  }

  /* Info Cards adjust */
  .info-card {
    flex-direction: row;
    gap: 15px;
    padding: 15px 15px;
  }

  /* Heading size */
  .section-titles {
    font-size: 32px;
    margin-bottom: 40px;
  }

  /* Form Inputs font size */
  .form-group input,
  .form-group textarea {
    font-size: 14px;
  }

  /* Button padding */
  button {
    padding: 12px;
    font-size: 14px;
  }
}

@media (max-width: 576px) {

  /* Reduce padding for very small screens */
  .contact-left,
  .contact-right {
    padding: 30px 15px;
  }

  /* Info Cards stacked vertically if needed */
  .info-card {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Heading smaller */
  .section-titles {
    font-size: 26px;
    margin-bottom: 30px;
  }

  /* Form Inputs smaller */
  .form-group input,
  .form-group textarea {
    font-size: 13px;
    padding: 8px 5px;
  }

  /* Button smaller */
  button {
    padding: 10px;
    font-size: 13px;
  }
}


.footer-professional {
  position: relative;
  background: #0b3c5d;
  color: #fff;
  padding: 80px 20px 40px;
  overflow: hidden;
}

/* Optional subtle background shapes */
.footer-bg-shape {
  position: absolute;
  top: -40px;
  right: -50px;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  z-index: 0;
}

/* Footer main content */
.footer-main {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* Columns */
.footer-col {
  flex: 1;
  min-width: 250px;
}

/* Left */
.footer-logo {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 12px;
}
.footer-logo span { color: #ff7a00; }

.footer-col.left p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.footer-social a {
  margin-right: 12px;
  color: #fff;
  font-size: 16px;
  transition: 0.3s;
}
.footer-social a:hover { color: #ff7a00; transform: scale(1.2); }

/* Center links */
.footer-col.center h4,
.footer-col.right h4 {
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 16px;
}
.footer-col.center ul {
  list-style: none;
  padding: 0;
}
.footer-col.center ul li {
  margin-bottom: 10px;
}
.footer-col.center ul li a {
  color: #fff;
  text-decoration: none;
  position: relative;
}
.footer-col.center ul li a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: 0;
  left: 0;
  background: #ff7a00;
  transition: 0.3s;
}
.footer-col.center ul li a:hover::after { width: 100%; }

/* Right column contact + features */
.footer-col.right p {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.footer-col.right i { color: #ff7a00; }

.footer-features {
  display: flex;
  gap: 15px;
  margin-top: 15px;
}
.feature-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  background: rgba(255,255,255,0.1);
  padding: 6px 10px;
  border-radius: 8px;
  transition: transform 0.3s;
}
.feature-item:hover { transform: scale(1.05); }

/* Footer bottom */
.footer-bottom {
  text-align: center;
  margin-top: 50px;
  font-size: 13px;
  color: #ccc;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 15px;
}

/* Responsive */
@media(max-width:991px){
  .footer-main { flex-direction: column; gap: 30px; }
  .footer-features { flex-direction: column; gap: 10px; }
}

.vision-mission-unique {
  padding: 100px 20px;
  position: relative;
  overflow: hidden;
  background: #f7f9fc; /* lighter than before */
}

/* Light animated diagonal stripes overlay */
.vision-mission-unique::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 122, 0, 0.02),  /* lighter */
    rgba(255, 122, 0, 0.02) 2px,
    transparent 2px,
    transparent 20px
  );
  animation: slideStripes 20s linear infinite; /* slower for subtle effect */
  z-index: 0;
}

/* Light subtle moving gradient overlay */
.vision-mission-unique::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,122,0,0.05), rgba(11,60,93,0.05)); /* lighter */
  animation: gradientMove 40s ease-in-out infinite alternate; /* slower */
  z-index: 0;
}

/* Animation keyframes */
@keyframes slideStripes {
  0% { transform: translate(0,0); }
  100% { transform: translate(30px,30px); } /* smaller movement for subtlety */
}

@keyframes gradientMove {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

.section-header {
  text-align: center;
  margin-bottom: 80px;
}
.section-header h2 {
  font-size: 38px;
  font-weight: 800;
  color: #0b3c5d;
}
.section-header h2 span {
  color: #ff7a00;
}
.section-header p {
  font-size: 16px;
  color: #555;
  margin-top: 10px;
}

/* Cards Wrapper */
.vm-wrapper-unique {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

/* Individual Cards */
.vm-card {
  position: relative;
  flex: 1;
  min-width: 300px;
  max-width: 480px;
  background: linear-gradient(135deg, #1e3b728a, #2a5298);
  color: #fff;
  border-radius: 20px;
  padding: 50px 30px 30px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  z-index: 1;
}

.vm-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 35px 80px rgba(0,0,0,0.15);
}

/* Decorative floating background shape */
.vm-bg-shape {
  position: absolute;
  width: 150px;
  height: 150px;
  background: rgba(255, 122, 0, 0.15);
  border-radius: 50%;
  top: -50px;
  right: -50px;
  z-index: 0;
}

/* Icon */
.vm-icon {
  font-size: 40px;
  margin-bottom: 25px;
  z-index: 1;
  position: relative;
  color: #ff7a00;
}

/* Heading */
.vm-card h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 15px;
  z-index: 1;
  position: relative;
}

/* Paragraph */
.vm-card p {
  font-size: 15px;
  line-height: 1.7;
  z-index: 1;
  position: relative;
  color: #f5f5f5;
}

/* Vision / Mission specific gradient tweak */
.vm-vision { background: linear-gradient(135deg, #1e3b72a8, #2a5298); }
.vm-mission { background: linear-gradient(135deg, #ff7b00a4, #ffb347); }

/* Responsive */
@media(max-width:991px){
  .vm-wrapper-unique {
    flex-direction: column;
    gap: 30px;
  }
}


.why-choose-us-polish {
  padding: 100px 20px;
  background: linear-gradient(135deg, #eef2f7, #ffffff);
  position: relative;
  overflow: hidden;
}

/* Section Header */
.why-choose-us-polish .section-header {
  text-align: center;
  margin-bottom: 80px;
}

.why-choose-us-polish .section-header h2 {
  font-size: 38px;
  font-weight: 800;
  color: #0b3c5d;
}

.why-choose-us-polish .section-header h2 span {
  color: #ff7a00;
}

.why-choose-us-polish .section-header p {
  font-size:16px;
  color:#555;
  margin-top:10px;
}

/* Wrapper */
.wcu-polish-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
}

/* Each feature block */
.wcu-polish-item {
  position: relative;
  flex: 1 1 280px;
  max-width: 350px;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s;
}

.wcu-polish-item:hover {
  transform: translateY(-8px);
}

/* Background shape */
.wcu-polish-bg {
  position: absolute;
  top: -30px;
  left: -30px;
  width: 120%;
  height: 120%;
  background: linear-gradient(135deg, rgba(255,122,0,0.15), rgba(11,60,93,0.1));
  clip-path: polygon(0 0, 100% 10%, 90% 100%, 10% 90%);
  z-index: 0;
  transition: transform 0.6s;
}

.wcu-polish-item:hover .wcu-polish-bg {
  transform: rotate(5deg) scale(1.05);
}

/* Content */
.wcu-polish-content {
  position: relative;
  padding: 40px 30px;
  z-index: 1;
  text-align: center;
}

.wcu-polish-content .icon {
  font-size: 36px;
  color: #ff7a00;
  margin-bottom: 20px;
  transition: transform 0.3s;
}

.wcu-polish-item:hover .wcu-polish-content .icon {
  transform: scale(1.2) rotate(10deg);
}

.wcu-polish-content h3 {
  font-size: 22px;
  font-weight: 700;
  color: #0b3c5d;
  margin-bottom: 12px;
}

.wcu-polish-content p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

/* Responsive */
@media(max-width:991px){
  .wcu-polish-wrapper {
    flex-direction: column;
    gap: 30px;
  }
}


.services-page{

padding:140px 0;

background:
url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000000' stroke-opacity='0.05'%3E%3Crect x='0' y='0' width='60' height='60'/%3E%3C/g%3E%3C/svg%3E"),
linear-gradient(to bottom,#f8fafc,#eef2ff);

}
.container{
width:90%;
max-width:1100px;
margin:auto;
}

.page-title{
text-align:center;
font-size:48px;
margin-bottom:30px;
font-weight:700;
color: #0b3c5d;
}

.page-title span{
color:#ff7a00;
}


/* tabs */

.tabs{
display:flex;
justify-content:center;
gap:12px;
margin-bottom:50px;
flex-wrap:wrap;
}

.tab{
padding:10px 22px;
border-radius:30px;
background:#e2e8f0;
text-decoration:none;
color:#111;
font-weight:600;
transition:0.3s;
}

.tab:hover{
background:#2563eb;
color:white;
}

.tab.active{
background:#2563eb;
color:white;
}


/* grid FIX */

.service-grid{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:25px;
}


/* card FIX */

.service-card{

width:280px;
background:white;
border-radius:14px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
transition:0.3s;
}

.service-card:hover{
transform:translateY(-6px);
box-shadow:0 15px 30px rgba(0,0,0,0.15);
}


/* image FIX */

.img-box{
width:100%;
height:220px;
overflow:hidden;
}

.img-box img{
width:100%;
height:100%;
object-fit:cover;
border-radius: 50% ;
}


/* body */

.card-body{
padding:15px;
text-align:center;
}

.card-body h3{
font-size:18px;
margin-bottom:5px;
font-weight:700;
}

.work{
color:#64748b;
margin-bottom:5px;
}

.region{
color:#2563eb;
font-weight:600;
}


/* ===== FLOATING NAVBAR ===== */
.navbar {
    position: fixed;       /* top pe fix karenge */
    top: 20px;             /* thoda gap upar se */
    left: 50%;             /* center align */
    transform: translateX(-50%);
    width: 98%;            /* full width ka thoda gap */
    max-width: 1200px;     /* max width */
    height: 100px;
    background: rgba(255, 255, 255, 0.753) !important; /* halka white overlay */
    backdrop-filter: blur(12px);          /* glass effect */
    border-radius: 16px;                  /* rounded corners */
    border: 1px solid rgba(200,200,200,0.3);
    padding: 0 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: 0.3s;
    z-index: 999;
}

/* container align */
.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* logo */
.navbar-brand {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: 700;
    color: #111 !important;
    letter-spacing: 1px;
}

.navbar-brand span {
    color: #2563eb;
}

/* logo image */
.navbar-brand img {
    height: 90px;
    width: auto;
    object-fit: contain;
    margin-right: 10px;
}

/* menu links */
.navbar-nav .nav-link {
    font-size: 15px;
    font-weight: 500;
    color: #333 !important;
    margin-left: 25px;
    position: relative;
    transition: 0.3s;
}

/* hover line */
.navbar-nav .nav-link::before {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 0%;
    height: 2px;
    background: linear-gradient(45deg,#2563eb,#06b6d4);
    transition: 0.3s;
    transform: translateX(-50%);
}

.navbar-nav .nav-link:hover::before {
    width: 100%;
}

.navbar-nav .nav-link:hover {
    color: #2563eb !important;
}

.navbar-nav .nav-link.active {
    color: #2563eb !important;
}

.navbar-nav .nav-link.active::before {
    width: 100%;
}

/* button */
.nav-btn {
    background: linear-gradient(45deg,#2563eb,#06b6d4);
    color: white !important;
    padding: 8px 18px;
    border-radius: 10px;
    margin-left: 18px;
    font-size: 14px;
    transition: 0.3s;
}

.nav-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

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

.navbar {
    top: 15px;
    height: 65px;
    padding: 0 15px;

    display:flex;
    align-items:center; /* center karega */
}

.navbar-brand{
display:flex;
align-items:center;
}

.navbar-brand img {

    height:65px;

    position:relative;
    top:0;

}

.navbar-nav .nav-link {
    margin-left: 0;
}
.navbar-toggler{
  position: relative;
}

}

.cat a{
text-decoration:none !important; 
color:inherit;
display:block;
width:100%;
height:100%;
}


.worker-btn{

display:inline-block;
margin-top:10px;
padding:8px 14px;

background:#ff7a00;
color:white;

border-radius:6px;
text-decoration:none;
font-size:14px;
font-weight:600;

transition:.3s;

}

.worker-btn:hover{

background:#0b3c5d;

}


.scene, .a3d { display: grid }

.scene {

    overflow: hidden;
    perspective: 35em;
    padding: 100px 0;
	mask: /* lateral fade */
		linear-gradient(90deg, 
				#0000, red 20% 80%, #0000)

}

.a3d {

    place-self: center;
    transform-style: preserve-3d;
    animation: ry 65s linear infinite;

}

@keyframes ry {
    to { rotate: y 1turn }
}

.card {

    --w: 17.5em;
    --ba: 1turn/var(--n);

    grid-area: 2/2;

    width: var(--w);

    aspect-ratio: 7/10;

    object-fit: cover;

    border-radius: 1.5em;

    backface-visibility: hidden;

    transform:

        rotatey(calc(var(--i)*var(--ba)))

        translatez(
        calc(
        -1*(.1*var(--w) + .10em) /
        tan(.1*var(--ba))
        )
        );

}







/* @import url(https://fonts.bunny.net/css?family=just-me-again-down-here:400);
@layer base, mouse, demo;

@layer demo {
  @property --rotate {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
 
  body {
    height: 1200svh;
    margin: 0;
   
    animation: --page-rotate 1s linear;
    animation-timeline: scroll(nearest block);
   */
    /** this allows us to rotate to exactly each card.
    BUT, it either needs to be set via JS or hardcoded as we can't accesss the .wrapper sibling-count() value  from the body */
    /* --cards: 20;
		animation-timing-function: steps(var(--cards)); 
  } */
  
  @keyframes --page-rotate {
    to { --rotate: 1; }
  }
  
  .wrapper {
    --card-border-radius: 14px;
    --cards: sibling-count();
    --card-width: max(150px, 20vw);
    
    --card-height: calc(var(--card-width) * 6 / 4);
    /* radius large enough so cards don't overlap */
    --radius: calc(var(--card-width) * var(--cards) / (2 * 3.1416));

    
    font-family: 'Just Me Again Down Here', handwriting;
    position: fixed;
    width: calc(var(--radius) * 2);
    height: calc(var(--radius) * 2);
  
    /* center circle so top card is visible */
    top: calc(50% + var(--radius) + var(--card-height) * 2);
    left: 50%;
    transform-origin: center center;
    transform: translateX(-50%) rotate(calc(var(--rotate) * 360deg));
    transition: transform 300ms linear;
    /*zoom: .3;*/
    & > div {
      --card-i: sibling-index();
      
      /* card position around circle*/
      --card-offset-radius: circle(var(--radius) at 50% 50%);
      --card-offset-distance: calc((var(--card-i) - 1) / var(--cards) * 100%);
    
      /* current card positioning relative to --rotate to detect "top" card */
      --card-phase: calc((var(--card-i) - 1) / var(--cards) - 0.75);
      --card-pos: mod(calc(var(--card-phase) + var(--rotate) + 1), 1);
      --card-dist: min(var(--card-pos),calc(1 - var(--card-pos)));
      
      --card-grayscale: clamp(0, calc(var(--card-dist) * var(--cards)), 1);
      --card-opacity: calc(1 - (var(--card-dist) / 0.15 ));
    
      /* blur */
      --card-focus-range: .1;
      --card-max-blur: 7px;
      --card-norm-dist: min(var(--card-dist), var(--card-focus-range));
      --card-blur-progress: calc(var(--card-norm-dist) / var(--card-focus-range));
      --card-blur: calc(var(--card-blur-progress) * var(--card-max-blur));
    
      /* caption */
      --caption-active: clamp(0, 1 - (var(--card-dist) / 0.001), 1);
      --caption-opacity: var(--caption-active);
      --caption-y: calc(-150px * (1 - var(--caption-active)));
    
      
      filter: blur(var(--card-blur)) grayscale(var(--card-grayscale));
      opacity: var(--card-opacity);
      container: size;
      
      offset-path: var(--card-offset-radius);
      offset-distance: var(--card-offset-distance);
      offset-rotate: auto;
      offset-anchor: 50% 100%;
    
      position: absolute;
      width: var(--card-width);
      aspect-ratio: 4/6;
      object-fit: cover;
      border-radius: var(--card-border-radius);
      transition: all 300ms ease-in-out;
      transform-origin: center calc(var(--card-height) * 2 * -1);
      /*
      &::before{
        content: counter(i);
        counter-reset: i var(--caption-opacity);
      }
      */
      &::after {
        content: attr(data-title);
        position: absolute;
        top: 100%;
        left: 1rem;
        opacity: var(--caption-opacity);
        translate: 0 var(--caption-y);
        font-size: clamp(1rem, 2vw + 0.045rem,1.6rem);
        z-index: -1;
        transition: opacity 300ms ease-in-out,translate 300ms ease-in-out;
      }
      & > img{
        width: 100%;
        height: 100%;
        object-fit:cover;
        border-radius: inherit;
      }  
    }
  }
}

@layer mouse{
  
  .mouse {
		position: fixed;
		bottom:1rem;
		left: 50%;
    translate: -50% 0;
		display: block;
		width: 50px;
		height: 50px;
		opacity: 1;
    color:var(--mouse-color);
     display: none;
		animation-name: mouse;
		animation-duration: 1s;
		animation-timing-function: linear;
		animation-fill-mode: forwards;
		animation-timeline: scroll(nearest block);
    @supports  (animation-timeline: scroll()) {
      display: block;
    }
	}
	@keyframes mouse {
		75% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
}


  
/* ===== FLOAT BUTTON ===== */

#contactBtn{
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: #ff6a00;
    color: #fff;
    border: none;
    padding: 14px 22px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 999;
    transition: 0.3s;
}

#contactBtn:hover{
    background: #ff8800;
    transform: scale(1.05);
}


/* ===== MODAL ===== */

#contactModal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}


/* ===== FORM BOX ===== */

.contact-form-container{

    background: #fff;
    width: 400px;
    max-width: 90%;
    padding: 25px;
    border-radius: 10px;
    position: relative;
    animation: popup 0.3s ease;

}

@keyframes popup{
    from{
        transform: scale(0.8);
        opacity: 0;
    }
    to{
        transform: scale(1);
        opacity: 1;
    }
}


/* CLOSE */

#closeBtn{
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 25px;
    cursor: pointer;
}


/* FORM */

.form-group-1{
    margin-bottom: 15px;
}

.form-group-1 label{
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
}

.form-group-1 input,
.form-group-1 textarea{

    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;

}

.form-group textarea{
    height: 100px;
}

.contact-form-container button{

    width: 100%;
    padding: 12px;
    border: none;
    background: #ff6a00;
    color: #fff;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;

}

.contact-form-container button:hover{
    background: #ff8800;
}


.hero-categories{

    display:flex;
    flex-wrap:wrap;
    gap:15px;
    justify-content:center;
    margin-top:25px;

}

.cat a{

    display:flex;
    align-items:center;
    gap:8px;

    padding:10px 16px;

    background:#fff;
    border-radius:30px;

    text-decoration:none;
    color:#333;

    font-weight:600;

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

    transition:0.3s;

}

.cat a i{

    color:#ff7a00;
    font-size:16px;

}

.cat a:hover{

    background:#ff7a00;
    color:white;
    transform:translateY(-3px);

}

.cat a:hover i{

    color:white;

}

















 /* ===== NAVBAR ===== */

.custom-navbar{

height:90px;

background: rgba(255,255,255,0.8);

backdrop-filter: blur(10px);

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

}


/* wrapper */

.nav-wrapper{

display:flex;

align-items:center;

justify-content:space-between;

width:100%;

}


/* logo */




/* center menu */

.menu-center{

margin:auto;

display:flex;

gap:30px;

}


.menu-center .nav-link{

font-size:15px;

font-weight:500;

color:#333 !important;

position:relative;

}


/* hover */

.menu-center .nav-link::after{

content:"";

position:absolute;

bottom:-5px;

left:0;

width:0;

height:2px;

background:#2563eb;

transition:0.3s;

}

.menu-center .nav-link:hover::after{

width:100%;

}


/* search right */

.search-box{

display:flex;

align-items:center;

gap:8px;

}


.search-box input{

height:36px;

border-radius:8px;

border:1px solid #ccc;

padding:5px 10px;

width:220px;

}


.search-box button{

height:36px;

border:none;

border-radius:8px;

padding:0 15px;

background:linear-gradient(45deg,#2563eb,#06b6d4);

color:white;

}