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

body{
    font-family:Inter,system-ui,Arial;
    background:#ffffff;
    color:#1f2937;
    line-height:1.7;
}

 /* HEADER */

  header{
  background:#ffffff;
  border-bottom:1px solid #e5e7eb;
  }

  .header-inner{
  max-width:1200px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  }

  /* logo */

  .logo{
  font-family:Poppins;
  font-size:24px;
  font-weight:700;
  color:#111827;
  }

  /* logo text colors */

.privacy-text{
color:#111827;
}

.testlab-text{
color:#2563eb;
}
/* LOGO */

.logo{
display:flex;
align-items:center;
gap:14px;

font-family:Poppins;
font-size:24px;
font-weight:700;
}




/* logo image */

.logo img{
width:68px;
height:68px;

object-fit:cover;
border-radius:50%;

mix-blend-mode:multiply;

background:#ffffff;

box-shadow:0 2px 10px rgba(0,0,0,.05);

padding:2px;

display:block;
}

  /* main nav */

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

  /* nav items */

  .nav-item{
  position:relative;
  font-family:Poppins;
  font-size:15px;
  font-weight:500;
  color:#374151;
  cursor:pointer;
  }

  .nav-item span{
  padding:8px 4px;
  transition:.25s;
  }

  .nav-item:hover span{
  color:#2563eb;
  }

  /* dropdown */

  .dropdown{
  position:absolute;
  top:36px;
  left:0;
  background:#ffffff;
  min-width:220px;
  border-radius:10px;
  box-shadow:0 20px 40px rgba(0,0,0,.12);
  padding:8px 0;

  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:.25s;
  }

  .dropdown a{
  display:block;
  padding:10px 18px;
  font-size:14px;
  text-decoration:none;
  color:#374151;
  }

  .dropdown a:hover{
  background:#f1f5f9;
  color:#2563eb;
  }

  /* show dropdown */

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

 
  

  



/* HERO */

.hero{
position:relative;
width:100vw;
max-width:100%;
min-height:650px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
overflow:hidden;
padding:0 20px;

/* override section rule */
margin:0;
}
/* background image */

.hero-bg{
position:absolute;
inset:0;

background-image:url("https://images.unsplash.com/photo-1643101807331-21a4a3f081d5");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}

/* gradient overlay */

.hero-overlay{
position:absolute;
inset:0;

background:linear-gradient(
135deg,
rgba(2,6,23,.92),
rgba(15,23,42,.92),
rgba(30,64,175,.82)
);
}

/* content */

.hero-content{
position:relative;
z-index:2;
max-width:800px;
}

/* heading */

.hero-content h1{
font-size:3rem;
font-weight:700;
margin-bottom:20px;
line-height:1.2;
}

/* paragraph */

.hero-content p{
font-size:1.15rem;
color:#cbd5f5;
margin-bottom:40px;
}

/* buttons container */

.hero-buttons{
display:flex;
gap:20px;
justify-content:center;
flex-wrap:wrap;
}

/* primary button */

.btn-primary{
background:linear-gradient(135deg,#3b82f6,#2563eb);
padding:14px 28px;
border-radius:8px;
color:white;
font-weight:600;
text-decoration:none;
transition:all .3s ease;
box-shadow:0 10px 25px rgba(37,99,235,.35);
}

/* secondary button */

.btn-secondary{
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.25);
padding:14px 28px;
border-radius:8px;
color:white;
font-weight:600;
text-decoration:none;
transition:all .3s ease;
backdrop-filter:blur(6px);
}

/* hover effects */

.btn-primary:hover{
transform:translateY(-3px);
box-shadow:0 15px 35px rgba(37,99,235,.5);
background:linear-gradient(135deg,#60a5fa,#2563eb);
}

.btn-secondary:hover{
background:rgba(255,255,255,0.18);
border-color:white;
transform:translateY(-3px);
}



/* SECTIONS */
section{
    max-width:1200px;
    margin:70px auto;
    padding:0 20px;
}
section h2{
    font-family:Poppins;
    font-size:26px;
    margin-bottom:10px;
}
section p{color:#4b5563}

/* STATUS */




/* TOOLS (FIXED DESIGN) */
.tools-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
    margin-top:35px;
}
.tool-card{
border-radius:16px;
padding:25px 20px;
background:#ffffff;
box-shadow:0 15px 40px rgba(0,0,0,.08);
text-align:center;
transition:.35s;
cursor:pointer;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.tool-card:hover{
    transform:translateY(-8px);
    box-shadow:0 30px 60px rgba(0,0,0,.15);
}
.tool-card img{
    width:56px;
    height:56px;
    margin-bottom:14px;
}
.tool-link{
text-decoration:none;
color:inherit;
display:block;
}
.tool-card h3{
    font-family:Poppins;
    font-size:17px;
    margin-bottom:8px;
    color:#1e293b;
}
.tool-card p{
    font-size:14px;
    color:#475569;
}

/* Editorial FAQ – Professional Style */
.faq-section{
    max-width: 960px;
    margin: 90px auto;
    padding: 0 22px;
}

.faq-section h2{
    font-family: Inter, system-ui, -apple-system;
    font-size: 32px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 48px;
}

/* Question */
.faq-question{
    font-family: Inter, system-ui, -apple-system;
    font-size: 24px;
    font-weight: 700;
    color: #1e3a8a; /* deep editorial blue */
    margin: 64px 0 18px;
    line-height: 1.3;
}

/* Answer */
.faq-answer{
    font-family: Inter, system-ui, -apple-system;
    font-size: 17px;
    line-height: 1.85;
    color: #1f2937;
    max-width: 920px;
}

/* Emphasis */
.faq-answer strong{
    font-weight: 700;
    color: #0f172a;
}

/* Links */
.faq-answer a{
    color: #2563eb;
    text-decoration: none;
    border-bottom: 1px solid rgba(37,99,235,.35);
}

.faq-answer a:hover{
    color: #1d4ed8;
    border-bottom-color:#1d4ed8;
}

/* Lists (used only when needed) */
.faq-answer ul{
    margin: 18px 0 18px 22px;
}

.faq-answer li{
    margin-bottom: 10px;
}

/* Highlight callout (optional) */
.faq-highlight{
    background:#f1f5f9;
    border-left:4px solid #2563eb;
    padding:14px 18px;
    margin:22px 0;
    font-size:16px;
}


/* CTA */
.cta{
    background:linear-gradient(135deg,#eff6ff,#dbeafe);
    padding:45px 20px;
    text-align:center;
}
.cta h2{
    font-family:Poppins;
    font-size:28px;
}
.cta a{
    display:inline-block;
    margin-top:15px;
    padding:13px 28px;
    background:#2563eb;
    color:#fff;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
}
.cta a:hover{background:#1d4ed8}


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

@media(max-width:1100px){

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

}

@media(max-width:768px){

    footer{
        padding:
        60px 20px
        30px;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .footer-brand{
        max-width:100%;
    }

    .footer-bottom{
        margin-top:50px;
    }

}

/* DROPDOWN NAV */
.dropdown-nav{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}

.nav-item{
  position:relative;
  font-size:14px;
  font-weight:500;
  color:#374151;
  cursor:pointer;
}

.nav-item span{
  padding:6px 2px;
  display:inline-block;
}

.nav-item:hover span{
  color:#2563eb;
}

.dropdown{
  position:absolute;
  top:100%;
  left:0;
  min-width:240px;
  background:#ffffff;
  border-radius:12px;
  padding:10px 0;
  box-shadow:0 25px 50px rgba(0,0,0,.15);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:.25s ease;
  z-index:999;
}

.dropdown a{
  display:block;
  padding:10px 18px;
  font-size:14px;
  color:#1f2937;
  text-decoration:none;
  white-space:nowrap;
}

.dropdown a:hover{
  background:#f1f5f9;
  color:#2563eb;
}

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

/* Mobile support */
@media(max-width:900px){
  .dropdown-nav{
    flex-wrap:nowrap;
    overflow-x:auto;
  }
}




/* =========================================================
ADD THESE NEW BLOCKS
========================================================= */

.homepage-status-section{

    max-width:1150px;

    margin:-90px auto 10px auto;

    padding:0 20px;

    position:relative;

    z-index:5;
}




/* =========================================================
   HOMEPAGE MOBILE FIXES
========================================================= */

@media(max-width:900px){

    /* HERO */

    .hero{

        min-height:auto;

        padding:
        90px 20px
        140px;
    }

    .hero-content{

        max-width:100%;
    }

    .hero-content h1{

        font-size:2.4rem;

        line-height:1.2;
    }

    .hero-content p{

        font-size:1.05rem;

        line-height:1.9;

        margin-bottom:32px;
    }

    /* BUTTONS */

    .hero-buttons{

        flex-direction:column;

        align-items:center;

        gap:16px;
    }

    .btn-primary,
    .btn-secondary{

        width:100%;

        max-width:320px;

        text-align:center;
    }

    /* STATUS SECTION */

    .homepage-status-section{

        margin:-70px auto 20px auto;
    }

    /* STATUS GRID */

    .status-grid{

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

        gap:16px;
    }

    /* CARDS */

    .status-card{

        padding:18px 16px;

        border-radius:20px;
    }

    .status-value{

        font-size:18px;

        line-height:1.45;
    }

}


/* =========================================================
   SMALL MOBILE DEVICES
========================================================= */

@media(max-width:640px){

    .hero{

        padding:
        80px 16px
        130px;
    }

    .hero-content h1{

        font-size:2rem;
    }

    .hero-content p{

        font-size:1rem;
    }

    .hero-badge{

        font-size:12px;

        padding:7px 12px;
    }

    /* STATUS SECTION */

    .homepage-status-section{

        margin:-55px auto 10px auto;

        padding:0 16px;
    }

    /* 1 COLUMN GRID */

    .status-grid{

        grid-template-columns:1fr;
    }

    .status-card{

        width:100%;
    }

    .status-value{

        font-size:17px;
    }

}


/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media(max-width:420px){

    .hero-content h1{

        font-size:1.7rem;
    }

    .hero-content p{

        font-size:.96rem;

        line-height:1.8;
    }

    .btn-primary,
    .btn-secondary{

        font-size:14px;

        padding:14px 18px;
    }

    .status-label{

        font-size:12px;
    }

    .status-value{

        font-size:16px;
    }

}
.status-grid{
    display:grid;

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

    gap:18px;
}

.status-card{

    background:
    linear-gradient(
        145deg,
        #ffffff,
        #f8fbff
    );

    border:
    1px solid #dbeafe;

    border-radius:18px;

    padding:18px 18px;

    box-shadow:
    0 14px 35px rgba(15,23,42,.06);

    transition:.28s ease;

    position:relative;

    overflow:hidden;
}



.status-card:hover{
    transform:translateY(-5px);

    box-shadow:
    0 22px 45px rgba(15,23,42,.10);
}

.status-label{

    font-size:13px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:#64748b;

    margin-bottom:12px;
}

.status-value{

    font-size:22px;

    font-weight:700;

    color:#0f172a;

    line-height:1.35;

    word-break:break-word;
}

#dns-result,
#ipv6-result{
    color:#dc2626;
}

#webrtc-result{
    color:#059669;
}

#fingerprint-result{
    color:#d97706;
}

#ip-result{
    color:#2563eb;
}





.tools-heading-wrap{
    max-width:900px;
    margin:0 auto 18px auto;
    text-align:center;
}

.tools-heading-wrap h2{
    margin-bottom:18px;
}

.tools-intro{
    margin:0 auto;
    line-height:1.9;
}





.tool-mini-label{
    display:inline-block;

    margin-bottom:10px;

    padding:6px 10px;

    border-radius:999px;

    background:#eff6ff;

    color:#2563eb;

    font-size:11px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;
}






/* =========================================================
   MODERN HEADER / MOBILE SIDEBAR
========================================================= */

/* HEADER */

header{
    position:sticky;
    top:0;
    z-index:9999;

    background:#ffffff;

    border-bottom:1px solid #e5e7eb;
}

/* HEADER INNER */

.header-inner{

    max-width:1280px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:14px 22px;
}

/* LOGO */

.logo{

    display:flex;

    align-items:center;

    gap:14px;

    text-decoration:none;
}

.logo-text{

    font-family:Poppins;

    font-size:28px;

    font-weight:700;
}

.privacy-text{
    color:#111827;
}

.testlab-text{
    color:#2563eb;
}

/* LOGO IMAGE */

.logo img{

    width:62px;
    height:62px;

    border-radius:50%;

    object-fit:cover;

    background:#ffffff;

    box-shadow:
    0 4px 18px rgba(0,0,0,.08);
}

/* DESKTOP NAV */

.main-nav{

    display:flex;

    align-items:center;

    gap:34px;
}

/* NAV ITEM */

.nav-item{
    position:relative;
}

.nav-item span{

    position:relative;

    font-size:15px;

    font-weight:600;

    color:#374151;

    cursor:pointer;

    transition:.22s ease;
}

.nav-item span:hover{
    color:#2563eb;
}

/* DROPDOWN */

.dropdown{

    position:absolute;

    top:42px;
    left:0;

    min-width:250px;

    background:#ffffff;

    border-radius:16px;

    padding:10px;

    box-shadow:
    0 25px 55px rgba(15,23,42,.14);

    border:
    1px solid #f1f5f9;

    opacity:0;
    visibility:hidden;

    transform:
    translateY(10px);

    transition:.24s ease;

    z-index:999;
}

/* SHOW */

.nav-item:hover .dropdown{

    opacity:1;
    visibility:visible;

    transform:translateY(0);
}

/* DROPDOWN LINKS */

.dropdown a{

    display:flex;

    align-items:center;

    padding:12px 15px;

    border-radius:12px;

    text-decoration:none;

    color:#374151;

    font-size:14px;

    font-weight:500;

    transition:.2s ease;
}

.dropdown a:hover{

    background:#eff6ff;

    color:#2563eb;

    transform:translateX(3px);
}

/* MOBILE MENU BUTTON */

.mobile-menu-btn{

    width:46px;
    height:46px;

    border:none;

    background:#f8fafc;

    border-radius:12px;

    display:none;

    align-items:center;
    justify-content:center;

    cursor:pointer;

    transition:.22s ease;
}

.mobile-menu-btn:hover{

    background:#eff6ff;
}

.mobile-menu-btn i{

    width:24px;
    height:24px;

    color:#111827;
}

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

.mobile-overlay{

    position:fixed;

    inset:0;

    background:
    rgba(2,6,23,.65);

    backdrop-filter:blur(3px);

    opacity:0;

    visibility:hidden;

    transition:.28s ease;

    z-index:9998;
}

.mobile-overlay.active{

    opacity:1;

    visibility:visible;
}

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

.mobile-sidebar{

    position:fixed;

    top:0;
    left:0;

    width:82%;
    max-width:340px;

    height:100dvh;

    background:#ffffff;

    transform:translateX(-100%);

    transition:.3s ease;

    z-index:9999;

    overflow-y:auto;

    box-shadow:
    0 0 40px rgba(0,0,0,.25);
}

.mobile-sidebar.active{

    transform:translateX(0);
}

/* SIDEBAR TOP */

.mobile-sidebar-top{

    display:flex;

    align-items:center;

    gap:14px;

    padding:22px 20px;

    border-bottom:1px solid #f1f5f9;
}

/* CLOSE BUTTON */

.mobile-close-btn{

    width:42px;
    height:42px;

    border:none;

    background:#f8fafc;

    border-radius:12px;

    display:flex;

    align-items:center;
    justify-content:center;

    cursor:pointer;
}

.mobile-close-btn i{

    width:22px;
    height:22px;
}

/* TITLE */

.mobile-sidebar-title{

    font-size:18px;

    font-weight:700;

    color:#111827;
}

/* CONTENT */

.mobile-sidebar-content{

    padding:16px;
}

/* ACCORDION */

.mobile-accordion{

    margin-bottom:12px;

    border:
    1px solid #e5e7eb;

    border-radius:18px;

    overflow:hidden;

    background:#ffffff;
}

/* BUTTON */

.mobile-accordion-btn{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 18px;

    background:#ffffff;

    border:none;

    cursor:pointer;
}

/* LEFT */

.mobile-accordion-left{

    display:flex;

    align-items:center;

    gap:14px;
}

/* ICON */

.mobile-accordion-left i{

    width:21px;
    height:21px;

    color:#2563eb;
}

/* TEXT */

.mobile-accordion-left span{

    font-size:15px;

    font-weight:600;

    color:#111827;
}

/* ARROW */

.accordion-arrow{

    width:18px;
    height:18px;

    color:#64748b;

    transition:.25s ease;
}

/* ACTIVE */

.mobile-accordion.active .accordion-arrow{

    transform:rotate(180deg);
}

/* CONTENT */

.mobile-accordion-content{

    max-height:0;

    overflow:hidden;

    transition:max-height .32s ease;

    background:#f8fafc;
}

/* LINKS */

.mobile-accordion-content a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 18px;

    text-decoration:none;

    color:#374151;

    font-size:14px;

    font-weight:500;

    border-top:
    1px solid #eef2f7;

    transition:.2s ease;
}

.mobile-accordion-content a i{

    width:18px;
    height:18px;

    color:#2563eb;
}

/* HOVER */

.mobile-accordion-content a:hover{

    background:#eff6ff;

    color:#2563eb;

    padding-left:24px;
}

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

@media(max-width:900px){

    .main-nav{
        display:none;
    }

    .mobile-menu-btn{
        display:flex;
    }

    .logo-text{
        font-size:24px;
    }

    .logo img{
        width:54px;
        height:54px;
    }

}

@media(max-width:520px){

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

    .logo{
        gap:10px;
    }

    .logo-text{
        font-size:22px;
    }

    .mobile-sidebar{
        width:86%;
    }

}






/* =========================================================
   STATUS CARD UI IMPROVEMENTS
========================================================= */
.status-card{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    min-height:230px;

    overflow:visible;

    background:#ffffff;

    border:
    1px solid #e2e8f0;

    border-radius:24px;

    padding:22px;

    box-shadow:
    0 8px 30px rgba(15,23,42,.05);

    transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}
/* TOP */

.status-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:18px;

    position:relative;
}

/* LABEL */

.status-label{

    margin-bottom:0;
}

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

.status-info-btn{

    position:absolute;

    top:-4px;
    right:-4px;

    width:28px;
    height:28px;

    border:none;

    border-radius:50%;

    background:#eff6ff;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.22s ease;

    z-index:10;
}

/* ICON */

.status-info-btn i{

    width:15px;
    height:15px;

    color:#2563eb;
}

/* HOVER */

.status-info-btn:hover{

    background:#2563eb;

    transform:scale(1.08);
}

.status-info-btn:hover i{

    color:#ffffff;
}

/* =========================================================
   TOOLTIP
========================================================= */

.status-tooltip{

    position:absolute;

    top:-14px;
    right:0;

    transform:
    translateY(-100%);

    width:240px;

    padding:14px 16px;

    border-radius:14px;

    background:
    rgba(15,23,42,.96);

    color:#e2e8f0;

    font-size:13px;

    line-height:1.7;

    box-shadow:
    0 20px 45px rgba(0,0,0,.28);

    backdrop-filter:blur(14px);

    z-index:99999;

    animation:
    tooltipFade .18s ease;
}

/* TOOLTIP ARROW */

.status-tooltip::after{

    content:"";

    position:absolute;

    bottom:-7px;
    right:18px;

    width:14px;
    height:14px;

    background:
    rgba(15,23,42,.96);

    transform:rotate(45deg);
}

/* ANIMATION */

@keyframes tooltipFade{

    from{

        opacity:0;

        transform:
        translateY(-90%);
    }

    to{

        opacity:1;

        transform:
        translateY(-100%);
    }

}

/* =========================================================
   VALUE
========================================================= */

.status-value{

    font-size:18px;

    font-weight:700;

    line-height:1.45;

    margin-bottom:10px;

    overflow-wrap:anywhere;

    word-break:break-word;
}

/* SUBTEXT */

.status-subtext{

    font-size:13px;

    line-height:1.7;

    color:#475569;

    margin-top:auto;
}

/* ACTION BUTTON */

.status-action-btn{

    display:inline-flex;

    align-items:center;

    width:fit-content;

    margin-top:auto;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    color:#2563eb;

    transition:.2s ease;
}

.status-action-btn:hover{

    color:#1d4ed8;

    transform:translateX(3px);
}

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

@media(max-width:900px){

    .status-card{

        min-height:210px;
    }

}

@media(max-width:640px){

    .status-card{

        min-height:auto;
    }

    .status-tooltip{

        width:210px;

        right:-8px;

        font-size:12px;
    }

}










/* =========================================================
   MODERN FOOTER
========================================================= */

footer{

    background:
    linear-gradient(
        135deg,
        #020617 0%,
        #071033 50%,
        #020617 100%
    );

    padding:
    80px 24px
    30px;

    color:#cbd5e1;

    overflow:hidden;
}

/* GRID */

.footer-grid{

    max-width:1350px;

    margin:auto;

    display:grid;

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

    gap:50px;
}

/* BRAND */

.footer-brand{

    max-width:340px;
}

/* LOGO */

.footer-logo{

    font-size:32px;

    font-weight:700;

    color:#ffffff;

    margin-bottom:22px;
}

.footer-logo span{
    color:#4f6df5;
}

/* TEXT */

.footer-brand p{

    color:#94a3b8;

    line-height:2;

    font-size:15px;
}

/* COLUMN */

.footer-column{

    display:flex;

    flex-direction:column;
}

/* BUTTON */

/* BUTTON */

.footer-accordion-btn{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:10px;

    width:100%;

    background:none;

    border:none;

    padding:0;

    margin-bottom:22px;

    color:#ffffff;

    font-size:17px;

    font-weight:700;

    cursor:default;
}
/* ICON */

/* ICON */

.footer-accordion-btn i{

    width:18px;
    height:18px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;
}
/* LINKS */

.footer-column a{

    display:flex;

    align-items:center;

    gap:10px;

    width:fit-content;

    text-decoration:none;

    color:#94a3b8;

    font-size:15px;

    line-height:1.8;

    margin-bottom:14px;

    transition:.2s ease;
}

/* HOVER */

.footer-column a:hover{

    color:#ffffff;

    transform:translateX(4px);
}

/* SOCIAL */

.footer-socials a i{

    width:18px;
    height:18px;

    color:#4f6df5;
}

/* CONTENT */

.footer-accordion-content{

    overflow:hidden;
}

/* BOTTOM */

.footer-bottom{

    max-width:1200px;

    margin:
    70px auto 0;

    padding-top:30px;

    border-top:
    1px solid rgba(255,255,255,.08);

    text-align:center;
}

/* BOTTOM TEXT */

.footer-bottom p{

    color:#64748b;

    line-height:1.9;

    font-size:14px;

    margin-bottom:12px;
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

    .footer-grid{

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

        gap:45px;
    }

}

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

@media(max-width:768px){

    footer{

        padding:
        60px 20px
        24px;
    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:20px;
    }

    /* BRAND */

    .footer-brand{

        max-width:100%;

        margin-bottom:8px;
    }

    .footer-logo{

        font-size:28px;

        margin-bottom:16px;
    }

    .footer-brand p{

        font-size:15px;

        line-height:1.9;
    }

    /* ACCORDION */

    .footer-column{

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

        padding-bottom:16px;
    }

    .footer-accordion-btn{

    justify-content:space-between;

    margin-bottom:0;

    padding:
    10px 0;

    cursor:pointer;
}

    .footer-accordion-btn i{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transition:.25s ease;
}
    /* CONTENT */

    .footer-accordion-content{

        max-height:0;

        transition:max-height .3s ease;

        overflow:hidden;
    }

    /* ACTIVE */

    .footer-accordion.active
    .footer-accordion-content{

        max-height:500px;

        margin-top:14px;
    }

    .footer-accordion.active
    .footer-accordion-btn i{

        transform:rotate(180deg);
    }

    /* LINKS */

    .footer-column a{

        font-size:14px;

        margin-bottom:12px;
    }

    /* BOTTOM */

    .footer-bottom{

        margin-top:40px;

        padding-top:24px;
    }

    .footer-bottom p{

        font-size:13px;
    }

}


@media(max-width:768px){

    .footer-accordion-content{
        overflow:hidden;
        max-height:0;
        transition:max-height .3s ease;
    }

    .footer-accordion.active
    .footer-accordion-content{
        max-height:500px;
    }

}