/* SYSTEM */
*{
  box-sizing:border-box;
}

html,
body{
  overflow-x:hidden;
}
:root{
  --primary:#0a3d62;
  --text:#1f2933;
  --muted:#6b7280;
  --border:#e5e7eb;
}

body{
  font-family:'Inter',sans-serif;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

/* HEADER */
/* =========================
HEADER
========================= */
/* =========================
HEADER
========================= */

.header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  z-index:99999;
  transition:0.3s;
}
.logo{
  display:flex;
  align-items:center;
}

.logo img{
  height:90px;
  width:auto;
  object-fit:contain;
}
.header.scrolled{
  box-shadow:0 6px 20px rgba(0,0,0,0.06);
}

/* CONTAINER */

.header-container{
  max-width:1200px;
  margin:auto;
 padding:8px 16px;

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

  position:relative;
}

/* LOGO */



/* NAVIGATION */

.nav{
  display:flex;
  align-items:center;
  gap:15px;
}

.nav a{
  text-decoration:none;
  color:#1f2933;
  font-size:14px;
  font-weight:500;
  transition:0.3s;
}

.nav a:hover{
  color:#0a3d62;
}

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

.dropdown{
  position:relative;
}

/* BUTTON */

.drop-btn{
  background:none;
  border:none;

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

  font-size:14px;
  font-weight:500;

  color:#1f2933;

  cursor:pointer;

  font-family:'Inter',sans-serif;

  transition:0.3s;
}

.drop-btn:hover{
  color:#0a3d62;
}

/* MENU */

.dropdown-menu{
  position:absolute;

  top:120%;
  left:0;

  width:240px;

  background:#fff;

  border-radius:10px;

  padding:10px 0;

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

  opacity:0;
  visibility:hidden;

  transform:translateY(10px);

  transition:0.3s ease;

  z-index:99999;
}

/* SHOW */

.dropdown:hover .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* LINKS */

.dropdown-menu a{
  display:block;

  padding:12px 18px;

  text-decoration:none;

  color:#1f2933;

  font-size:14px;

  transition:0.3s;
}

.dropdown-menu a:hover{
  background:#f5f9fd;
  color:#0a3d62;
  padding-left:24px;
}

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

.header-btn{
  display:flex;
  align-items:center;
  gap:8px;

  background:#0a3d62;
  color:#fff;

  text-decoration:none;

  padding:11px 18px;

  border-radius:50px;

  font-size:14px;
  font-weight:600;

  transition:0.3s;
}

.header-btn:hover{
  background:#06263d;
}

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

.menu-toggle{
  display:none;

  width:30px;
  height:22px;

  position:relative;

  cursor:pointer;

  z-index:999999;
}

/* LINES */

.menu-toggle span{
  position:absolute;

  width:100%;
  height:3px;

  background:#111;

  left:0;

  transition:0.4s;

  border-radius:10px;
}

/* LINE 1 */

.menu-toggle span:nth-child(1){
  top:0;
}

/* LINE 2 */

.menu-toggle span:nth-child(2){
  top:9px;
}

/* LINE 3 */

.menu-toggle span:nth-child(3){
  top:18px;
}

/* TRANSFORM TO X */

.menu-toggle.active span:nth-child(1){
  transform:rotate(45deg);
  top:9px;
}

.menu-toggle.active span:nth-child(2){
  opacity:0;
}

.menu-toggle.active span:nth-child(3){
  transform:rotate(-45deg);
  top:9px;
}

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

@media(max-width:991px){

  .header-container{
    padding:12px 16px;
  }

                   .drop-btn{
  width:100%;

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

  background:transparent;
  border:none;

  color:#fff;

  padding:13px 5px;

  font-size:14px;
  font-weight:500;

  cursor:pointer;

  border-bottom:1px solid rgba(255,255,255,0.12);
}

.dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    width: 100%;
    max-height: 0;
    overflow: hidden;
}

.dropdown.active .dropdown-menu{
  max-height:500px;
}
  /* LOGO */

  .logo img{
    height:52px;
  }

  /* MENU ICON */

  .menu-toggle{
    display:block;
  }

  /* HIDE CALL BUTTON */

  .header-btn{
    display:none;
  }

  /* MOBILE NAV */

  .nav{
    position:fixed;

    top:75px;
    right:-100%;

    width:250px;
    height:auto;

    background:#0a3d62;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    padding:18px;

    border-radius:14px 0 0 14px;

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

    transition:0.4s ease;

    z-index:99999;

    box-sizing:border-box;
  }

  /* ACTIVE */

  .nav.active{
    right:0;
  }

  /* LINKS */

  .nav a{
    width:100%;

    padding:13px 5px;

    border-bottom:1px solid rgba(255,255,255,0.12);

    font-size:14px;
    font-weight:500;

    color:#fff;

    text-decoration:none;

    transition:0.3s;
  }

  .nav a:hover{
    color:#d4af37;
    padding-left:10px;
  }

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

  .dropdown{
    width:100%;
  }

  .drop-btn{
    width:100%;

    justify-content:space-between;

    color:#fff;

    padding:13px 5px;

    border-bottom:1px solid rgba(255,255,255,0.12);
  }
  .drop-btn:hover{
  background:rgba(255,255,255,0.08);

  color:#d4af37;
}
  .dropdown-menu{
    position:static;

    opacity:1;
    visibility:visible;

    transform:none;

    width:100%;

    display:none;

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

    box-shadow:none;

    padding:5px 0;

    margin-top:5px;

    border-radius:8px;
  }

  .dropdown.active .dropdown-menu{
    display:block;
  }

  .dropdown-menu a{
    color:#fff;

    padding:10px 15px;

    border:none;
  }

  .dropdown-menu a:hover{
    background:rgba(255,255,255,0.08);

    color:#d4af37;
  }

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

@media(max-width:991px){

  .header-container{
    padding:12px 16px;
  }

  .logo img{
    height:52px;
  }

  .dropdown-menu a:hover{
  background:rgba(255,255,255,0.08);

  color:#d4af37;
}

  /* KEEP OLD MENU ICON */

  .menu-toggle{
    display:block;
    z-index:999999;
    font-size:28px;
    cursor:pointer;
    color:#111;
  }

  .header-btn{
    display:none;
  }

  /* MOBILE MENU */

  .nav{
    position:fixed;

    top:75px;
    right:-100%;

    width:250px;
    height:auto;

    background:#0a3d62;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    padding:18px;

    border-radius:14px 0 0 14px;

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

    transition:0.4s ease;

    z-index:99999;
     box-sizing:border-box;
  }

  /* ACTIVE */

  .nav.active{
    right:0;
  }

  /* LINKS */

  .nav a{
    width:100%;

    padding:13px 5px;

    border-bottom:1px solid rgba(255,255,255,0.12);

    font-size:14px;
    font-weight:500;

    color:#fff;

    text-decoration:none;

    transition:0.3s;
  }


  .nav a:last-child{
    border-bottom:none;
  }

  .nav a:hover{
    color:#d4af37;
    padding-left:10px;
  }

}
    /* SLIDER */

.slider{
 position:relative;
  height:90vh;
  overflow:hidden;
  background:#000;
}

/* SLIDES */

.slides{
  height:100%;
  position:relative;
}

.slide{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 0.8s ease;
  z-index:0;
}

.slide.active{
  opacity:1;
  z-index:1;
}

.slide.active{
  opacity:1;
  z-index:1;
}

/* OVERLAY */

.overlay{
  position:absolute;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.55);
}

/* CONTENT */

.content{
  position:relative;
  z-index:2;
  max-width:1200px;
  margin:auto;
  padding:0 20px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:#fff;
}

/* TEXT */

.content h1{
 font-size:52px;
  line-height:1.2;
  font-weight:600;
  font-family:'Playfair Display', serif;
}

.content h1 span{
  color:#d4af37;
}

.content p{
  margin-top:20px;
  font-size:16px;
  color:#ddd;
  max-width:500px;
}

/* BUTTONS */

.buttons{
  margin-top:25px;
  display:flex;
  gap:15px;
}

/* BUTTON STYLE (reuse if already exists) */

.btn{
  padding:12px 22px;
  border-radius:4px;
  font-size:14px;
  text-decoration:none;
}

.btn.primary{
  background:#0a3d62;
  color:#fff;
}

.btn.secondary{
  border:1px solid #fff;
  color:#fff;
}

/* DOTS */

.dots{
  position:absolute;
  bottom:60px; /* 👈 increase from 20px */
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:10;
}

.dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#ffffff80;
  cursor:pointer;
  transition:0.3s;
}

.dot.active{
  background:#fff;
  transform:scale(1.2);
}

/* RESPONSIVE */

@media(max-width:768px){

  .content h1{
    font-size:30px;
  }

  .slider{
    height:80vh;
  }
  .logo img{
  height:90px;
}


}


    /* =========================
   FEATURE STRIP
========================= */
/* =========================
   FEATURE STRIP
========================= */

.features{
  margin-top:-50px;
  position:relative;
  z-index:5;
  padding:0 15px; /* mobile spacing fix */
}

/* CONTAINER */

.features-container{
  max-width:1200px;
  margin:auto;
  background:#fff;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  overflow:hidden;
}

/* FEATURE BOX */

.feature-box{
  display:flex;
  align-items:center;
  gap:14px;
  padding:20px;
  border-right:1px solid #eee;
}

/* REMOVE LAST BORDER */

.feature-box:last-child{
  border-right:none;
}

/* ICON */

.icon{
  width:42px;
  height:42px;
  min-width:42px;   /* 🔥 prevents icon shrink */
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f2f6fa;
  border-radius:50%;
  color:#0a3d62;
  font-size:18px;
}

/* TEXT */

.feature-box h4{
  font-size:15px;
  font-weight:600;
  margin:0;
}

.feature-box p{
  font-size:13px;
  color:#6b7280;
  margin-top:3px;
}

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

/* TABLET */

@media(max-width:900px){

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

}

/* MOBILE */

@media(max-width:768px){

  .features{
    padding:0 12px;
    margin-top:-30px;
  }

}

/* SMALL MOBILE */

@media(max-width:500px){

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

  .feature-box{
    border-right:none;
    border-bottom:1px solid #eee;
  }

  .feature-box:last-child{
    border-bottom:none;
  }

}



    /* =========================
   ABOUT SECTION
========================= */

.about{
  padding:80px 20px;
  background:#f9fbfd;
}

.about-container{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1.2fr 1fr 0.8fr;
  gap:40px;
  align-items:center;
}

/* IMAGE */

.about-image img{
  width:100%;
  border-radius:10px;
}

/* CONTENT */

.section-tag{
  font-size:12px;
  letter-spacing:1px;
  color:#6b7280;
}

.about-content h2{
  margin-top:10px;
  font-size:32px;
  line-height:1.3;
  font-weight:600;
}

.about-content p{
  margin-top:15px;
  font-size:14.5px;
  color:#6b7280;
  line-height:1.7;
}

/* BUTTON */

.about-content .btn{
  margin-top:20px;
}

/* DIRECTOR CARD */

.director-card{
  background:#fff;
  padding:20px;
  border-radius:10px;
  text-align:center;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.director-card img{
  width:100%;
  border-radius:8px;
}

.director-card h4{
  margin-top:12px;
  font-size:16px;
}

.director-card p{
  font-size:13px;
  color:#6b7280;
}

.director-line{
  display:block;
  width:40px;
  height:2px;
  background:#0a3d62;
  margin:10px auto;
}

.director-card small{
  font-size:12px;
  color:#6b7280;
}

/* TABLET */

@media(max-width:900px){

  .about-container{
    grid-template-columns:1fr;
    text-align:center;
  }

}

/* MOBILE */

@media(max-width:600px){

  .about{
    padding:60px 15px;
  }

  .about-content h2{
    font-size:26px;
  }

}


    /* =========================
   SERVICES SECTION
========================= */
/* =========================
   SERVICES SECTION
========================= */

.services{
  padding:80px 20px;
  background:#fff;
}

.services-container{
  max-width:1200px;
  margin:auto;
}

/* HEADER */

.section-header{
  text-align:center;
  margin-bottom:50px;
}

.section-header span{
  font-size:12px;
  letter-spacing:1px;
  color:#6b7280;
}

.section-header h2{
   margin-top:10px;
  font-size:34px;
  font-weight:600;
  font-family:'Playfair Display', serif; /* 🔥 premium feel */
  line-height:1.3;
  color:#1f2933;
  letter-spacing:0.3px;
}

.section-header p{
   margin-top:10px;
  font-size:14px;
  font-family:'Inter', sans-serif;
  color:#6b7280;
}

/* GRID */

.services-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}

/* CARD */

.service-card{
  background:#f9fbfd;
  border:1px solid #eee;
  border-radius:10px;
  padding:15px;
  text-align:center;
  transition:0.3s;
  overflow:hidden; /* important for image zoom */
}

.service-card:hover{
  transform:translateY(-5px);
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* IMAGE */

.service-card img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:8px;
  margin-bottom:12px;
  transition:0.4s;
}

/* IMAGE HOVER */

.service-card:hover img{
  transform:scale(1.05);
}

/* TEXT */

.service-card h4{
  font-size:15px;
  margin-bottom:8px;
  font-weight:600;
}

.service-card p{
  font-size:13px;
  color:#6b7280;
  line-height:1.6;
}

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

/* TABLET */

@media(max-width:1000px){

  .services-grid{
    grid-template-columns:repeat(3,1fr);
  }

}

/* MOBILE */

@media(max-width:600px){

  .services{
    padding:60px 15px;
  }

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

  .service-card img{
    height:180px; /* slightly bigger on mobile */
  }

}

    /* =========================
   PROJECTS SECTION
========================= */

.projects{
  padding:30px 20px;
  background:linear-gradient(135deg,#0a2a43,#0f3c5c);
  color:#fff;
}

.projects-container{
  max-width:1200px;
  margin:auto;
}

/* HEADER */

.projects-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:40px;
  gap:20px;
}

.projects-header span{
  font-size:12px;
  letter-spacing:1px;
  color:#cbd5e1;
}

.projects-header h2{
  margin-top:10px;
  font-size:28px;
  font-weight:600;
}

.projects-header p{
  margin-top:8px;
  font-size:14px;
  color:#cbd5e1;
}

/* BUTTON */

.btn.small{
  padding:6px 14px;           /* 🔥 reduced top-bottom space */
  font-size:13px;
  font-weight:500;
  border-radius:6px;
  background:#d4af37;
  color:#111;
  text-decoration:none;
  display:inline-block;
  line-height:1.2;            /* 🔥 tight height control */
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
  transition:0.3s;
  letter-spacing:0.3px;
}
.btn.small:hover{
  background:#b8962e;
  transform:translateY(-1px);
}

/* =========================
   GRID (ONE ROW FIX)
========================= */

.projects-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr; /* 🔥 one row */
  gap:20px;
}

/* CARD */

.project-card{
  position:relative;
  height:260px; /* 🔥 equal height */
  border-radius:10px;
  overflow:hidden;
}

/* IMAGE */

.project-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:0.4s;
}

/* HOVER */

.project-card:hover img{
  transform:scale(1.05);
}

/* OVERLAY */

.project-info{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  padding:15px;
  background:linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

/* TEXT */

.project-info h4{
  font-size:15px;
  margin:0;
}

.project-info p{
  font-size:12px;
  color:#ddd;
  margin-top:3px;
}

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

/* TABLET */

@media(max-width:900px){

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

}

/* MOBILE */

@media(max-width:600px){

  .projects{
    padding:60px 15px;
  }

  .projects-header{
    flex-direction:column;
    align-items:flex-start;
  }

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

  .project-card{
    height:220px;
  }

}


    /* =========================
   WHY CHOOSE US (PREMIUM)
========================= */

.why{
  padding:30px 20px;
  background:#f9fbfd;
}

.why-container{
  max-width:1200px;
  margin:auto;
}

/* HEADER */

.why-header{
  text-align:center;
  margin-bottom:60px;
}

.why-header span{
  font-size:12px;
  letter-spacing:1.5px;
  color:#caa74a;
  font-weight:600;
}

.why-header h2{
  margin-top:12px;
  font-size:34px;
  font-weight:600;
  font-family:'Playfair Display', serif;
  color:#1f2933;
}

/* GRID */

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

/* BOX */

.why-box{
  background:#fff;
  padding:30px 25px;
  border-radius:10px;
  text-align:center;
  transition:0.3s;
  box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

.why-box:hover{
  transform:translateY(-6px);
  box-shadow:0 15px 35px rgba(0,0,0,0.08);
}

/* ICON */

.why-icon{
  width:60px;
  height:60px;
  margin:0 auto 15px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#eef4f9;
}

.why-icon i{
  font-size:24px;
  color:#0a3d62;
}

/* TEXT */

.why-box h4{
  font-size:16px;
  font-weight:600;
  margin-bottom:8px;
}

.why-box p{
  font-size:13.5px;
  color:#6b7280;
  line-height:1.6;
}
@media(max-width:900px){
  .why-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:600px){
  .why-grid{
    grid-template-columns:1fr;
  }

  .why{
    padding:70px 15px;
  }
}

    /* =========================
   CTA SECTION
========================= */

.cta{
  padding:30px 20px;
  background:linear-gradient(135deg,#0a2a43,#0f3c5c);
  color:#fff;
}

.cta-container{
  max-width:900px;
  margin:auto;
  text-align:center;
}

.cta .btn i{
  margin-right:6px;
}
/* TEXT */

.cta-content h2{
  font-size:32px;
  font-weight:600;
  font-family:'Playfair Display', serif;
}

.cta-content p{
  margin-top:15px;
  font-size:15px;
  color:#cbd5e1;
}

/* BUTTONS */

.cta-buttons{
  margin-top:25px;
  display:flex;
  justify-content:center;
  gap:15px;
  flex-wrap:wrap;
}

/* PRIMARY BUTTON */

.cta .btn.primary{
  background:#d4af37;
  color:#111;
  padding:10px 20px;
  border-radius:6px;
  font-size:14px;
}

/* OUTLINE BUTTON */

.cta .btn.outline{
  border:1px solid #fff;
  color:#fff;
  padding:10px 20px;
  border-radius:6px;
  font-size:14px;
}

/* HOVER */

.cta .btn.primary:hover{
  background:#b8962e;
}

.cta .btn.outline:hover{
  background:#fff;
  color:#111;
}

@media(max-width:600px){

  .cta{
    padding:60px 15px;
  }

  .cta-content h2{
    font-size:24px;
  }

}

    /* =========================
   FOOTER (PREMIUM)
========================= */

.footer{
  background:linear-gradient(135deg,#0a2a43,#0f3c5c);
  color:#cbd5e1;
  padding-top:30px;
  font-family:'Inter', sans-serif;
}

/* CONTAINER */

.footer-container{
  max-width:1200px;
  margin:auto;
  padding:0 20px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.5fr;
  gap:40px;
}

/* LOGO */

.footer-logo{
  height:120px;
  margin-bottom:15px;
  object-fit:contain; /* 🔥 keeps transparent logo clean */
}

/* TEXT */

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

/* HEADINGS */

.footer-col h4{
  font-size:15px;
  color:#d4af37;
  margin-bottom:15px;
  font-weight:600;
}

/* LINKS */

.footer-col ul{
  list-style:none;
  padding:0;
}

.footer-col ul li{
  margin-bottom:8px;
}

.footer-col ul li a{
  text-decoration:none;
  color:#cbd5e1;
  font-size:14px;
  transition:0.3s;
}

.footer-col ul li a:hover{
  color:#d4af37;
}

/* ICONS */

.footer-col i{
  margin-right:10px;
  color:#d4af37;
}

/* SOCIAL */

.social-icons{
  margin-top:15px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-start; /* desktop left */
}

.social-icons i{
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:6px;
  cursor:pointer;
  transition:0.3s;
}

.social-icons i:hover{
  background:#d4af37;
  color:#111;
}

/* VERTICAL DIVIDER */

.footer-col.bordered{
  border-left:1px solid rgba(255,255,255,0.15);
  padding-left:30px;
}

/* BOTTOM */

.footer-bottom{
  margin-top:40px;
  border-top:1px solid rgba(255,255,255,0.1);
  padding:15px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}

.footer-links{
    margin-left:auto;
}

.footer-links a{
  color:#cbd5e1;
  text-decoration:none;
  margin:0 5px;
  white-space:nowrap;
}

.footer-links a:hover{
  color:#d4af37;
}

.footer-bottom p{
    margin:0;
}

.footer-links{
    margin-left:auto;
    text-align:right;
}

@media(max-width:900px){

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

}

@media(max-width:600px){

  .footer-container{
    grid-template-columns:1fr;
    text-align:center;
  }

  .footer-col.bordered{
    border:none;
    padding-left:0;
  }

  .footer-bottom{
    flex-direction:column;
    gap:10px;
    text-align:center;
  }

}
    @media(max-width:600px){

  .social-icons{
    justify-content:center;  /* 🔥 THIS FIXES YOUR ISSUE */
  }

}

    /* =========================
   FLOATING BUTTONS
========================= */

.floating-buttons{
  position:fixed;
  right:20px;
  bottom:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:999;
}

/* COMMON STYLE */

.float-btn{
  width:50px;
  height:50px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:20px;
  box-shadow:0 8px 20px rgba(0,0,0,0.2);
  transition:0.3s;
}

/* CALL */

.call-btn{
  background:#0a3d62;
}

/* WHATSAPP */

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

/* HOVER */

.float-btn:hover{
  transform:translateY(-3px);
}

@media(max-width:600px){

  .floating-buttons{
    right:15px;
    bottom:15px;
  }

  .float-btn{
    width:46px;
    height:46px;
    font-size:18px;
  }

}