body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

nav {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
    padding: 1vw 6vw;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
}

/* Make sure the second nav (inside #navi) is not sticky and has a margin */
#navi nav {
    position: static !important;
    margin-top: 80px; /* Adjust this value to match your main nav height */
    z-index: 1;
    background: transparent;
    box-shadow: none;
}

nav img {
    width: 90px;
    cursor: pointer;
    height: 90px;
}

nav .navigation ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

nav .navigation ul li {
    list-style: none;
    margin-left: 20px;
}

nav .navigation ul li a {
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-size: 18px;
    font-weight: 10px;
    transition: 0.2s;
}

nav .navigation ul li a:hover {
    color: rgba(7, 87, 235, 0.897);
}

/*sub navigation*/

#navi {
    display: flex;
    padding-top: 6%;
    margin: 1px 3px 3px 2px;
}

#navi .sub-navigation p {
    color: rgba(7, 87, 235, 0.897);
}

/*home*/

#home {
    width: 100%;
    height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
}

#home h2 {
    color: rgba(7, 87, 235, 0.897);
    letter-spacing: 1px;
    font-size: 2.2rem;
    padding-top: 30px;
}

#home p {
    width: 50%;
    line-height: 30px;
    font-size: 1.2rem;
}

.btn {
    height: 10rem;
    padding-top: 2%;
}

#home a {
    text-decoration: none;
    color: #fff;
    padding: 10px 13px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
}

#home a.blue {
    background-color: rgba(7, 87, 235, 0.897);
    transition: 0.4s;
}

#home a.blue:hover {
    background-color: #fff;
    color: rgba(7, 87, 235, 0.897);
    border: 1.5px solid rgba(7, 87, 235, 0.897);
}

/* Style for the cards intro paragraph for fakeid.html */
.cards-intro {
    max-width: 800px;
    margin: 40px auto 20px auto;
    background: #f8faff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(7, 87, 235, 0.07);
    padding: 28px 32px 22px 32px;
    text-align: center;
}

.cards-intro p {
    color: #23406e;
    font-size: 1.18rem;
    line-height: 1.7;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
}

.cards-intro-highlight {
    color: #0757eb;
    font-weight: bold;
    font-size: 1.08em;
}

/*cards*/
#cards{
    padding: 1vw 8vw 0 10vw;
    text-align: center;
}

#cards .card-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1rem;
    margin: 50px;
    text-align: start;
}
#cards .card-fea {
   background: aliceblue;
   height: 95%;
   position: relative;
}

#cards .card-fea img{
    width: 100%;
    height: 60%;
    background-size: cover;
    background-position: center;
}

#cards .card-fea .details{
    padding: 16px 16px 0 16px;
}

#cards .card-fea .details i{
    color: #fdc93b;
}

#cards .card-fea .cost{
    background-color: rgba(7, 87, 235, 0.897);
    color: #fff;
    line-height: 38px;
    width: 38px;
    height: 38px;
    font-size: 15px;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    right: 15px;
    bottom: 120px;
}
#cards .card-fea .cost-new{
    background-color: rgba(7, 87, 235, 0.897);
    color: #fff;
    line-height: 45px;
    width: 45px;
    height: 45px;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    right: 10px;
    bottom: 70px;
}

/* Style for the "View Card" anchor as a button inside .card-fea */
.card-fea .btn .view-card-btn {
    display: inline-block;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 12px 28px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
    width: 100%;
    max-width: 200px;
    box-sizing: border-box;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
    font-weight: 500;
}

.card-fea .btn .view-card-btn:hover {
     background-color: #fff; 
     border: 2px solid rgba(7, 87, 235, 0.897);
    color: #0056b3;
}

/*what to know information*/

#information {
    padding: 7vw 8vw 0 10vw;
    text-align: center;
    width: 82%;
    height: 120%;
    margin-bottom:20px ;
}

#information .infor-box {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px, 1fr));
    gap: 15px;
}

#information .infor-details {
    border: 2px solid rgba(7, 87, 235, 0.897);
    border-radius: 8px;
    background-color: aliceblue;
    padding-bottom: 20px;
}

#information .infor-details h3 {
    color: rgba(7, 87, 235, 0.897);
    font-weight: bold;
    font-size: 20px;
}

#information .infor-details a {
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-size: 20px;
    font-weight: 300;
}

#information .infor-details .see {
    color: rgb(136, 124, 124);
}

/* Video section */
.video-row-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.video-row-columns .video-link {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    display: block;
    text-decoration: none;
    color: inherit;
}

.bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0; left: 0;
    max-width: 100vw;
    overflow: hidden;
    z-index: 1;
}

.video-overlay {
    position: absolute;
    z-index: 2;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.video-overlay h2 {
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 18px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.video-overlay button {
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 12px 32px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 1s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.video-overlay button:hover {
    background: #fff;
    border: 2px solid #007bff;
    color:#007bff;
}

/* Responsive for mobile: stack columns */
@media (max-width: 900px) {
    .video-row-columns {
        grid-template-columns: 1fr;
    }
    .video-row-columns .video-link {
        aspect-ratio: 16/10;
    }
    .video-overlay h2 {
        font-size: 1.1rem;
    }
    .video-overlay button {
        font-size: 0.95rem;
        padding: 10px 18px;
    }
}

/*relaible*/

#relaible {
    padding: 8vw, 4vw, 8vw, 4vw;
    text-align: center;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-size: 16px;
}
#relaible h2 {
    color: rgba(0, 0.1, 0.5, 0.7);
    letter-spacing: 1px;
    font-size: 2.2rem;
    padding-top: 30px;
}
#relaible .relaible-p {
    width: 40%;
    margin: 20px auto;
    line-height: 30px;
    font-size: 1.2rem;
}

#relaible .relaible-feat {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 1rem;
    margin: 50px;
}

#relaible .relaible-box {
    background-color: aliceblue;
    color: rgb(43, 42, 42);
    border-radius: 4px;
}

#relaible .relaible-box img {
    width: 30%;
    height: 30%;
    background-size: cover;
    background-position: center;
    margin-top: 20px;
    margin-bottom: 10px;
    border-radius: 50%;
}

/*mini- footer*/

#mini-footer {
    padding: 2vw;
    background-color: rgba(88, 129, 204, 0.74);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* footer*/

footer {
    padding: 8vw;
    background-color: #000000d8;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

footer .footer-col {
    padding-bottom: 40px;
}

footer .footer-col img {
    width: 120px;
    height: auto;
    margin-bottom: 16px;
    border-radius: 8px;
}
footer .footer-col .foot-icon img{
    width: 40px;
    height: 40px;
   margin-bottom: 100px;
    padding: 10px;
}

footer h3 {
    color: rgba(7, 87, 235, 0.897);
    font-weight: 700;
    padding-bottom: 10px;
}

footer li {
    list-style: none;
    margin-bottom: 8px;
    color: #7b838a;
}

footer li a {
    color: #7b838a;
    text-decoration: none;
    transition: 0.7;
}

footer li a:hover {
    color: rgb(241, 240, 245);
}
/* Copyright styling */
.footer-copyright {
    width: 100%;
    text-align: center;
    color: #bbb;
    font-size: 0.98rem;
    margin-top: 24px;
    border-top: 1px solid #333;
    padding-top: 16px;
    letter-spacing: 0.5px;
    background: transparent;
}
/*View.html page*/
#container-view {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    padding: 40px 0;
}

.container-view-fea {
    background: #f8faff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(7, 87, 235, 0.08);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding: 32px;
    max-width: 700px;
    width: 100%;
}

.view-card-img {
    width: 350px;
    height: 220px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(7, 87, 235, 0.15);
}

.view-card-details {
    flex: 1;
}

.view-card-details h2 {
    margin-top: 0;
    color: rgba(7, 87, 235, 0.897);
    font-size: 2rem;
}

.view-card-details p {
    color: #555;
    font-size: 1.1rem;
    margin: 18px 0;
}

.buy-now-btn {
    display: inline-block;
    background: rgba(7, 87, 235, 0.897);
    color: #fff;
    padding: 12px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    transition: background 0.2s;
}

.buy-now-btn:hover {
    background: #0056b3;
}

/* Responsive */
@media (max-width: 700px) {
    .container-view-fea {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding: 18px;
    }
    .view-card-img {
        width: 100%;
        height: auto;
        max-width: 100%;
    }
}

/* payment.html page */
.payment-info-box {
    max-width: 600px;
    margin: 40px auto 0 auto;
    background: #f8faff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(7, 87, 235, 0.07);
    padding: 24px 28px 20px 28px;
    text-align: center;
    font-size: 1.13rem;
}

/* style for privacy.html*/
.privacy-container {
    max-width: 700px;
    margin: 40px auto 0 auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(7, 87, 235, 0.08);
    padding: 36px 32px 28px 32px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.privacy-container h2 {
    color: #0757eb;
    margin-bottom: 18px;
    font-size: 2rem;
    text-align: center;
}

.privacy-container h3 {
    color: #23406e;
    margin-top: 28px;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.privacy-container p, .privacy-container ul {
    color: #333;
    font-size: 1.08rem;
    line-height: 1.7;
}

.privacy-container ul {
    margin-left: 20px;
    margin-bottom: 12px;
}

.privacy-container a {
    color: #0757eb;
    text-decoration: underline;
}

/* MOBILE VIEW STYLES */
@media (max-width: 700px) {

    nav {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 10px 4vw;
        position: sticky;
        top: 0;
        z-index: 1200;
        background: #fff;
    }

    nav img {
        width: 60px;
        height: 60px;
        margin-bottom: 8px;
    }

    .hamburger {
        display: block;
        width: 40px;
        height: 40px;
        cursor: pointer;
        margin-left: 10px;   /* Reduced left margin */
        margin-right: 0;     /* Remove right margin */
    }

    .navigation {
        position: fixed;
        top: 0;
        right: -100vw;
        width: 70vw;
        height: 100vh;
        background: #fff;
        box-shadow: -2px 0 16px rgba(0,0,0,0.13);
        transition: right 0.3s;
        z-index: 1200;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding-top: 70px;
    }

    .navigation.open {
        right: 0;
    }

    .navigation ul {
        flex-direction: column;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .navigation ul li {
        width: 100%;
        margin: 0;
        border-bottom: 1px solid #eee;
    }

    .navigation ul li a {
        display: block;
        width: 100%;
        padding: 18px 24px;
        color: #23406e;
        font-size: 1.1rem;
        text-decoration: none;
        transition: background 0.2s;
    }

    .navigation ul li a:hover {
        background: #f4f7fb;
        color: #0757eb;
    }

    #home {
        height: auto;
        padding: 30px 0;
    }

    #home h2 {
        font-size: 1.3rem;
        padding-top: 18px;
    }

    #home p {
        width: 90%;
        font-size: 1rem;
        line-height: 1.5;
    }

    .btn {
        height: auto;
        padding-top: 10px;
    }

    .cards-intro {
        padding: 18px 8px 14px 8px;
        margin: 24px 6px 12px 6px;
        font-size: 1rem;
    }

    #cards {
        padding: 2vw 2vw 0 2vw;
    }

    #cards .card-box {
        grid-template-columns: repeat(2, 1fr);
        margin: 18px 0;
        grid-gap: 10px;
    }

    #cards .card-fea img {
        height: 120px;
    }

    .card-fea .btn .view-card-btn {
        font-size: 0.98rem;
        padding: 10px 10px;
        max-width: 100%;
    }

    /* Video section */
    .video-row-columns {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .video-row-columns .video-link {
        aspect-ratio: 16/10;
    }
    .video-overlay h2 {
        font-size: 1rem;
    }
    .video-overlay button {
        font-size: 0.95rem;
        padding: 8px 12px;
    }

    /* Info and reliable sections */
    #information, #relaible {
        padding: 4vw 2vw 0 2vw;
        width: 98%;
    }
    #information .infor-box,
    #relaible .relaible-feat {
        grid-template-columns: 1fr;
        margin: 18px 0;
        gap: 10px;
    }
    #relaible .relaible-p {
        width: 90%;
        font-size: 1rem;
    }

    /* View card page */
    #container-view {
        padding: 18px 0;
        min-height: 40vh;
    }
    .container-view-fea {
        flex-direction: column;
        gap: 12px;
        padding: 12px;
        max-width: 98vw;
    }
    .view-card-img {
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    /* Payment info box */
    .payment-info-box {
        padding: 14px 8px 10px 8px;
        font-size: 1rem;
        margin: 18px 4px 0 4px;
    }

    /* Privacy policy */
    .privacy-container {
        padding: 18px 8px 14px 8px;
        margin: 24px 4px 0 4px;
    }
    .privacy-container h2 {
        font-size: 1.3rem;
    }
    .privacy-container h3 {
        font-size: 1.05rem;
    }

    /* Footer */
    footer {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 4vw 12px 4vw;
    }
    footer .footer-col {
        padding-bottom: 18px;
    }
    .footer-copyright {
        margin-top: 10px;
        padding-top: 10px;
        font-size: 0.95rem;
    }

    /* Mini footer */
    #mini-footer {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 4vw;
    }
}

/* Hamburger icon styling */
.hamburger {
    display: none;
    width: 38px;
    height: 38px;
    cursor: pointer;
    margin-left: auto;
    margin-right: 10px;
    z-index: 1201;
}

/* Mobile nav styles */
@media (max-width: 700px) {
    .hamburger {
        display: block;
        width: 40px;
        height: 40px;
        cursor: pointer;
        margin-left: 0px;   /* Reduced left margin */
        margin-right: 30px;     /* Remove right margin */
    }
    .navigation {
        position: fixed;
        top: 0;
        right: -100vw;
        width: 70vw;
        height: 100vh;
        background: #fff;
        box-shadow: -2px 0 16px rgba(0,0,0,0.13);
        transition: right 0.3s;
        z-index: 1200;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding-top: 70px;
    }
    .navigation.open {
        right: 0;
    }
    .navigation ul {
        flex-direction: column;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .navigation ul li {
        width: 100%;
        margin: 0;
        border-bottom: 1px solid #eee;
    }
    .navigation ul li a:hover {
        background: #f4f7fb;
        color: #0757eb;
    }
}

/* ===== LAPTOP / DESKTOP NAV ONLY (keeps mobile intact) ===== */
@media (min-width: 992px) {

  /* Header bar */
  .site-header, header, .topbar {
    position: sticky;            /* stays at top when scrolling */
    top: 0;
    z-index: 50;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
  }

  /* Inner container (use whichever wrapper you have) */
  .site-header .wrap,
  header .wrap,
  .topbar .wrap,
  .header-inner,
  .nav-container {
    max-width: 1200px;           /* adjust if your page is wider/narrower */
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;  /* logo left, links right */
    gap: 24px;
  }

  /* Logo sizing */
  .logo, .brand, .site-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }
  .logo img, .brand img, .site-logo img {
    height: 42px;                /* tweak to taste */
    width: auto;
  }

  /* Hide hamburger on desktop */
  .menu-toggle, .hamburger, .nav-toggle {
    display: none !important;
  }

  /* Force nav to horizontal and visible on desktop */
  nav, .nav, .main-nav, #navi {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    width: auto !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Horizontal list */
  nav ul, .nav ul, .main-nav ul, #navi ul {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 28px;                   /* spacing between links */
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Links */
  nav a, .nav a, .main-nav a, #navi a {
    display: inline-block;
    padding: 10px 0;
    font-size: 16px;
    line-height: 1;
    color: #111;
    text-decoration: none;
  }
  nav a:hover, .nav a:hover, .main-nav a:hover, #navi a:hover {
    text-decoration: underline;
  }

  /* If your mobile drawer overlays the page, neutralize its overlay on desktop */
  .nav-backdrop, .drawer-overlay {
    display: none !important;
  }
}
/* ==== Force logo further left on laptop/desktop only ==== */
@media (min-width: 992px) {
  /* Kill left padding inside the header row only */
  header .container,
  header .wrap,
  nav .container,
  nav .wrap,
  .header-inner,
  .nav-container {
    padding-left: 0 !important;
  }

  /* Make the header a proper row */
  header,
  nav,
  .header-inner,
  .nav-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Put the logo at the hard left */
  /* (matches common markup: img, .logo link, or .site-logo) */
  nav img:first-of-type,
  header img:first-of-type,
  .logo,
  .site-logo,
  a.logo {
    margin-left: 0 !important;      /* no inward offset */
    margin-right: auto !important;  /* push menu to the right */
    display: block !important;
    height: 48px;
    width: auto;
  }

  /* Ensure the nav links sit on the far right */
  .navigation,
  nav > ul,
  .main-nav,
  #navi,
  nav .menu {
    margin-left: auto !important;
  }

  /* Hide any desktop-side hamburger */
  .hamburger,
  .menu-toggle,
  .nav-toggle {
    display: none !important;
  }
}
/* === FOOTER GRID RESPONSIVE === */
.site-footer {
  padding: 24px 16px;
  background: #f9f9f9; /* optional, adjust to match your design */
}

.footer-grid {
  display: grid !important;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Option A: readable mobile (2 columns on phones) */
@media (max-width: 767.98px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tablet & up: 4 columns like laptop */
@media (min-width: 768px) {
  .site-footer {
    padding: 40px 24px;
  }
  .footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Force all content visible (no accordion behavior) */
.footer-col h4 {
  margin-bottom: 8px;
  font-size: 16px;
  cursor: default !important;
  position: static !important;
}
.footer-col h4::after {
  content: none !important;
}
.footer-content {
  max-height: none !important;
  overflow: visible !important;
  padding-top: 8px !important;
  transition: none !important;
}

/* Lists and links */
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col ul li {
  margin: 6px 0;
}
.footer-col ul li a {
  text-decoration: none;
  font-size: 14px;
  color: #333;
}
.footer-col ul li a:hover {
  text-decoration: underline;
}

/* Social icons */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-social a img {
  width: 28px;
  height: 28px;
}

/* Bottom copyright */
.footer-bottom {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: #666;
}

/* Footer mobile helpers (safe alongside the JS) */
@media (max-width: 767.98px) {
  footer .footer-grid img { max-width: 100%; height: auto; }
  footer .footer-grid .footer-col h4 { margin-bottom: 8px; font-size: 16px; }
  footer .footer-grid .footer-col ul { margin: 0; padding: 0; list-style: none; }
  footer .footer-grid .footer-col ul li { margin: 6px 0; }
}

/* --- Footer media + socials + copyright centering --- */

/* Center the copyright line on all screens */
footer .footer-bottom {
  text-align: center !important;
  margin-top: 16px;
  font-size: 13px;
}

/* Center a social row (WhatsApp / Telegram icons) */
footer .footer-social,
footer .social,
footer .socials,
footer .social-icons {
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
footer .footer-social a img,
footer .social a img,
footer .socials a img,
footer .social-icons a img {
  width: 28px;
  height: 28px;
}

/* If the logo/picture sits in the second footer column, center it */
footer .footer-grid > .footer-col:nth-child(2) img {
  display: block !important;
  margin: 8px auto !important;
  height: auto;
  max-width: 100%;
}

/* Keep the second column’s text centered without affecting link lists */
footer .footer-grid > .footer-col:nth-child(2) {
  text-align: center !important;
}
footer .footer-grid > .footer-col:nth-child(2) ul {
  display: inline-block;       /* lets list stay nicely aligned */
  text-align: left;            /* list items not centered */
}

/* If your grid is not already 2 columns on phones, ensure it is */
@media (max-width: 767.98px) {
  footer .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    align-items: start;
  }
}
/* ---- Generic footer centering patch (safe, reusable) ---- */

/* 1) Center any single image in the footer (e.g., logo) */
footer img {
  display: block !important;
  margin: 8px auto !important;   /* centers horizontally */
  float: none !important;
  max-width: 100%;
  height: auto;
}

/* 2) Center a row of social icons */
footer .footer-social,
footer .social,
footer .socials,
footer .social-icons,
footer [class*="social"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin: 8px 0 !important;
}
footer [class*="social"] a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;     /* adjust if needed */
}

/* 3) Center the copyright line */
footer .footer-bottom,
footer .copyright,
footer [class*="copy"] {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  margin-top: 12px !important;
  float: none !important;
}

/* (optional) If the column containing the image/socials should center text too */
footer .footer-col.center-text { text-align: center !important; }
footer .footer-col.center-text ul { 
  display: inline-block; text-align: left; margin: 0 auto;
}

/* ===== Intro band (replace sub-nav) ===== */
#navi {
  position: static !important;     /* no sticky nav */
  top: auto !important;
  background: #f7f8fa;
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: none !important;
}

/* hide any existing nav list inside #navi */
#navi nav, #navi ul { display: none !important; }

#navi .intro-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
}

#navi .intro-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: #e9eef6;            /* subtle badge bg */
  font-size: 22px;                 /* if using emoji */
  line-height: 1;
}
#navi .intro-icon img,
#navi .intro-icon svg {
  width: 28px; height: 28px;
  display: block;
}

#navi .intro-text h1 {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.2;
  color: #111;
}

#navi .intro-text .intro-lede {
  margin: 6px 0 0;
  color: #555;
  font-size: clamp(14px, 1.6vw, 16px);
}
/* === Mobile: center .footer-copyright === */
@media (max-width: 767.98px) {
  .footer-copyright {
    /* works for normal blocks */
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 12px auto 0 !important;

    /* neutralize old layouts */
    float: none !important;
    clear: both !important;
  }

  /* if parent is a CSS grid */
  .footer-copyright {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
  }

  /* if parent is a flex row */
  .footer-copyright {
    flex: 0 0 100% !important;   /* take full row */
    order: 99;                    /* push to bottom if needed */
    align-self: center !important;
  }
}
/* === Mobile: center .footer-copyright === */
@media (max-width: 767.98px) {
  .footer-copyright {
    /* works for normal blocks */
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 12px auto 0 !important;

    /* neutralize old layouts */
    float: none !important;
    clear: both !important;
  }

  /* if parent is a CSS grid */
  .footer-copyright {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
  }

  /* if parent is a flex row */
  .footer-copyright {
    flex: 0 0 100% !important;   /* take full row */
    order: 99;                    /* push to bottom if needed */
    align-self: center !important;
  }
}

/* === Mobile: center footer logo, icons, and copyright === */
@media (max-width: 767.98px) {

  /* Center just this column’s logo image */
  .footer-col > img[alt="logo"] {
    display: block !important;
    margin: 0 auto 10px !important;
    max-width: 160px;   /* adjust if you want it larger/smaller */
    height: auto;
    float: none !important;
  }

  /* Center the WhatsApp/Telegram row */
  .footer-col .foot-icon {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap;
    margin: 6px 0 0;
  }
  .footer-col .foot-icon a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; 
    height: 32px;
  }
  .footer-col .foot-icon a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /* Center the copyright line across the full width */
  .footer-copyright {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 12px auto 0 !important;
    float: none !important;
    clear: both !important;

    /* if parent is grid or flex, also ensure full row */
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    flex: 0 0 100% !important;
    order: 99;
    align-self: center !important;
  }
}

/* === FOOTER — SITE-WIDE NORMALIZATION === */

/* Base container */
footer, .site-footer { padding: 24px 16px; }
footer .footer-grid, .site-footer .footer-grid {
  display: grid !important;
  gap: 16px !important;
  max-width: 1200px;
  margin: 0 auto;
}

/* Neutralize old layouts that fight grid */
footer .footer-grid > * {
  float: none !important;
  width: auto !important;
  flex: initial !important;
  min-width: 0;
}

/* Mobile: 2 columns total. Quick Links & About stay side-by-side. Others full width below. */
@media (max-width: 767.98px) {
  footer .footer-grid, .site-footer .footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* default: each block spans full width */
  footer .footer-col, .site-footer .footer-col {
    grid-column: 1 / -1 !important;
  }

  /* place tagged columns side-by-side */
  footer .footer-col.-links { grid-column: 1 !important; }
  footer .footer-col.-about { grid-column: 2 !important; }

  /* center media + socials + copyright on mobile */
  .footer-col.-about img,
  .footer-col.-about .foot-icon { 
    display: block;
    margin-left: auto; margin-right: auto;
  }
  .foot-icon { 
    display: flex !important; justify-content: center !important; gap: 12px;
  }

  .footer-copyright,
  .footer-bottom,
  .copyright {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    margin-top: 12px !important;
  }
}

/* Tablet & up: classic 4 columns */
@media (min-width: 768px) {
  footer .footer-grid, .site-footer .footer-grid {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  }
}

/* Lists & links tidy */
footer .footer-col ul { list-style: none; margin: 0; padding: 0; }
footer .footer-col li { margin: 6px 0; }
footer .footer-col a { text-decoration: none; color: inherit; }
footer .footer-col a:hover { text-decoration: underline; }

/* ===== Laptop/Desktop ONLY: restore left-aligned branding column ===== */
@media (min-width: 992px) {
  /* Make the whole footer grid left-aligned on desktop */
  footer .footer-grid,
  .site-footer .footer-grid {
    justify-items: start !important;
    align-items: start !important;
    text-align: left !important;
  }

  /* Target the column that contains the logo (robust!) */
  footer .footer-col:has(img[alt="logo"]),
  .site-footer .footer-col:has(img[alt="logo"]),
  footer .footer-col.brand-col,
  .site-footer .footer-col.brand-col {
    text-align: left !important;
  }

  /* Kill any previous desktop centering on the logo image */
  footer .footer-col:has(img[alt="logo"]) > img[alt="logo"],
  .site-footer .footer-col:has(img[alt="logo"]) > img[alt="logo"],
  footer .footer-col.brand-col > img[alt="logo"],
  .site-footer .footer-col.brand-col > img[alt="logo"] {
    display: inline-block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-height: 64px; /* tweak if needed */
    height: auto;
    vertical-align: middle;
  }

  /* Icons row back to the left on desktop */
  footer .footer-col:has(.foot-icon) .foot-icon,
  .site-footer .footer-col:has(.foot-icon) .foot-icon,
  footer .footer-col.brand-col .foot-icon,
  .site-footer .footer-col.brand-col .foot-icon {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px;
    margin-top: 8px;
  }

  /* Safety reset in case a parent forces center */
  footer .footer-col,
  .site-footer .footer-col {
    text-align: left !important;
  }
}

/* ===== Fallback if your browser doesn't support :has() =====
   If this branding column is, for example, the 2nd column, uncomment and set the right index.
@media (min-width: 992px) {
  footer .footer-grid > .footer-col:nth-child(2),
  .site-footer .footer-grid > .footer-col:nth-child(2) { text-align: left !important; }
  footer .footer-grid > .footer-col:nth-child(2) > img[alt="logo"],
  .site-footer .footer-grid > .footer-col:nth-child(2) > img[alt="logo"] {
    display: inline-block !important; margin: 0 !important; max-height: 64px; height: auto;
  }
  footer .footer-grid > .footer-col:nth-child(2) .foot-icon,
  .site-footer .footer-grid > .footer-col:nth-child(2) .foot-icon {
    display: flex !important; justify-content: flex-start !important; align-items: center !important; gap: 12px;
  }
}
*/
/* ===== Desktop/Laptop only: auto-hide header on scroll ===== */
@media (min-width: 992px) {
  .header-auto {
    position: sticky;     /* keeps layout stable (no content jump) */
    top: 0;
    z-index: 1000;
    background: #fff;
    transition: transform .22s ease, box-shadow .2s ease;
    will-change: transform;
  }
  .header-auto.is-pinned {
    transform: translateY(0);
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
  }
  .header-auto.is-hidden {
    transform: translateY(-100%);
    box-shadow: none;
  }
}