/* -----------------------------------------------------
    AptFlow Website
    Author: black&white
    Website: www.blacknwhite.agency
    Email: hello@blacknwhite.agency
----------------------------------------------------- */


/*--- GOOGLE FONTS ---*/

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


/*--- RESET ---*/

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#ffffff;
    color:#01219C;
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}




a{
    text-decoration:none;
}

ul{
    list-style:none;
}

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


/*--- COLORS ---*/

:root{
    --primary:#01219C;
    --primary2:#4477FE;
    --primaryDark:#01219C;
    --dark:#01219C;
    --light:#F0F2F7;
    --white:#ffffff;
    --text:#7A8198;
    --gradient:linear-gradient(135deg,#01219C,#4477FE);
}


/*--- HEADER ---*/

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

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

header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: transparent;
    transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Header after scrolling */
header.scrolled{
    background:#001c77;
    padding:16px 0;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    /* border-bottom:1px solid #01219C; */
}

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


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


.logo{
    position:relative;
    width:150px;
    height:45px;
}

.logo img{
    position:absolute;
    left:0;
    top:0;
    height:55px;
    transition:.35s;
}

/* Initially */
.logo-blue{
    opacity:1;
}

.logo-white{
    opacity:0;
}



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

header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #01219C !important;
    box-shadow:0 4px 20px rgba(0, 0, 0, 0.08);
    z-index: 1000;
}


/* Keep the navigation visible */

header.sticky nav {
    background: transparent;
}


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

header .container {
    position: relative;
    z-index: 2;
}



/* After Scroll */
header.scrolled .logo-blue{
    opacity:0;
}

header.scrolled .logo-white{
    opacity:1;
}


.menu{
    display:flex;
    gap:28px;
}

.menu a{
    color:#fff;
    font-size:14px;
    font-weight:400;
    transition:.3s;
}

.menu a:hover{
    color:#7FB2FF;
}


.nav-buttons{
    display:flex;
    align-items:center;
    gap:14px;
    margin-left:10px;
    font-weight: 600;
}

.login{
    color:#fff;
    font-weight:500;
    display:flex;
    align-items:center;
    gap:8px;
}

.btn{
    background:#f0f2f7;
    color:#001c77;
    padding:10px 16px;
    border-radius:6px;
    font-weight:600;
    font-size:14px;
    transition:.35s;
}

.btn:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 35px rgba(0,0,0,.15);
}





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

.aptflow-hero {
    position: relative;
    min-height: 650px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 78% 48%,
            rgba(42, 82, 255, 0.32),
            transparent 32%
        ),
        radial-gradient(
            circle at 15% 20%,
            rgba(36, 74, 255, 0.16),
            transparent 28%
        ),
        linear-gradient(
            120deg,
            #001c77 0%,
            #001c77 45%,
            #071d82 100%
        );
    color: #ffffff;
}


/* =========================================
   CONTAINER
========================================= */

.hero-container {
    position: relative;
    z-index: 5;
    max-width: 1080px;
    min-height: 600px;
    margin: auto;
    padding-top: 120px;
    /* padding-top: 10px; */
    display: grid;
    grid-template-columns: 60% 40%;
    align-items: center;
}


/* =========================================
   BACKGROUND GRID
========================================= */

.tech-grid {
    position: absolute;
    inset: 0;
    opacity: 0.16;
    background-image:linear-gradient(
        rgba(78, 113, 255, 0.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(78, 113, 255, 0.12) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 75%
        );
}


/* =========================================
   GLOW EFFECTS
========================================= */

.glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.glow-1 {
    width: 400px;
    height: 400px;
    right: 5%;
    top: 15%;
    background: rgba(40, 76, 255, 0.25);
}

.glow-2 {
    width: 300px;
    height: 300px;
    left: -100px;
    bottom: -100px;
    background: rgba(27, 64, 220, 0.22);
}


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

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

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    margin-bottom: 14px;
    border-radius: 30px;
    border: 1px solid rgba(92, 120, 255, 0.35);
    background: rgba(25, 47, 130, 0.35);
    color: #9fb2ff;
    font-size: 12px;
    font-weight: 400;
}

.badge-icon {
    color: #7e9aff;
    font-size: 16px;
}


/* =========================================
   HEADING
========================================= */

.hero-content h1 {
    margin: 0;
    max-width: 720px;
    font-size: 34px;
    line-height: 1.4;
    font-weight: 700;
}

.hero-content h1 span {
    display: block;
    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #8da4ff 50%,
            #5d7cff 100%
        );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* =========================================
   DESCRIPTION
========================================= */

.hero-description {
    max-width: 550px;
    margin: 12px 0 32px;
    color: #b9c5e9;
    font-size: 14px;
    line-height: 1.6;
}


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

.hero-buttons {
    display: flex;
    gap: 26px;
    margin-bottom: 58px;
}

.btn {
    min-height: 50px;
    padding: 0 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.btn-primary {
    background:
        linear-gradient(
            135deg,
            #01219C,
            #5877ff
            
        );
    color: #ffffff;
    box-shadow:
        0 10px 35px rgba(43, 72, 255, 0.3);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow:0 15px 40px rgba(43, 72, 255, 0.45);
}

.btn-outline {
    color: #ffffff;
    border: 1px solid rgba(160, 177, 255, 0.5);
    background: rgba(255, 255, 255, 0.02);
}

.btn-outline:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.08);
    border-color: #8ba0ff;
}

.btn-icon {
    font-size: 19px;
}


/* =========================================
   FEATURES
========================================= */

.hero-features {
    display: flex;
    align-items: center;
    gap: 22px;
}

.hero-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #c7d0ec;
    font-size: 14px;
}

.hero-feature strong,
.hero-feature span {
    display: block;
}

.hero-feature strong {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 3px;
}

.hero-feature span {
    color: #9caad0;
}

.feature-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(86, 116, 255, 0.35);
    color: #7d9aff;
    font-size: 20px;
    background: rgba(38, 61, 148, 0.25);
}

.feature-divider {
    width: 1px;
    height: 38px;

    background: rgba(136, 153, 218, 0.2);
}


/* =========================================
   VIDEO SECTION
========================================= */

.hero-video {
    position: relative;

    height: 500px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================
   ORBITS
========================================= */

.video-orbit {
    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(76, 108, 255, 0.35);

    pointer-events: none;
}

.orbit-1 {
    width: 310px;
    height: 310px;

    animation:
        orbitRotate 18s linear infinite;
}

.orbit-2 {
    width: 400px;
    height: 400px;

    border-style: dashed;

    opacity: 0.65;

    animation:
        orbitRotateReverse 25s linear infinite;
}

.orbit-3 {
    width: 480px;
    height: 480px;

    border-color: rgba(55, 90, 255, 0.15);

    animation:
        orbitRotate 35s linear infinite;
}


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

.play-button {
    position: relative;
    z-index: 10;
    width: 100px;
    height: 100px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(
            circle at 35% 30%,
            #728bff,
            #354aff 55%,
            #1d32d2
        );
    box-shadow:
        0 0 0 12px rgba(75, 100, 255, 0.12),
        0 0 0 25px rgba(75, 100, 255, 0.07),
        0 0 0 50px rgba(75, 100, 255, 0.07),
        0 0 70px rgba(57, 88, 255, 0.65);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.play-button::before {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    border: 1px solid rgba(100, 126, 255, 0.45);
    animation: pulseRing 2.2s ease-out infinite;
}

.play-button::after {
    content: "";
    position: absolute;
    inset: -35px;
    border-radius: 50%;
    border: 1px solid rgba(100, 126, 255, 0.18);
    animation: pulseRing 2.2s ease-out infinite 0.7s;
}

.play-button:hover {
    transform: scale(1.08);
    box-shadow:
        0 0 0 12px rgba(75, 100, 255, 0.16),
        0 0 0 30px rgba(75, 100, 255, 0.09),
        0 0 0 60px rgba(75, 100, 255, 0.09),
        0 0 90px rgba(57, 88, 255, 0.85);
}


/* Play Triangle */

.play-triangle {
    width: 0;
    height: 0;
    margin-left: 8px;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 25px solid #ffffff;
}


/* =========================================
   VIDEO LABEL
========================================= */

.video-label {
    position: absolute;
    top: calc(50% + 125px);
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
}

.play-note {
    position: absolute;
    right: 0;
    bottom: 105px;
    color: #9eb1ff;
    font-family: "Segoe Print", cursive;
    font-size: 20px;
    transform: rotate(-5deg);
}

.play-note .arrow {
    display: block;
    margin-left: -20px;
    font-size: 40px;
}


/* =========================================
   DIGITAL WAVE
========================================= */

.digital-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -50px;
    height: 200px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    opacity: 0.7;
    transform: skewY(-7deg);
}

.digital-wave span {
    width: 8px;
    height: 20px;
    border-radius: 10px;
    background: #3158ff;
    box-shadow:
        0 0 12px rgba(56, 91, 255, 0.7);
    animation: wave 2.5s ease-in-out infinite;
}

.digital-wave span:nth-child(2) {
    height: 45px;
    animation-delay: .1s;
}

.digital-wave span:nth-child(3) {
    height: 70px;
    animation-delay: .2s;
}

.digital-wave span:nth-child(4) {
    height: 95px;
    animation-delay: .3s;
}

.digital-wave span:nth-child(5) {
    height: 125px;
    animation-delay: .4s;
}

.digital-wave span:nth-child(6) {
    height: 145px;
    animation-delay: .5s;
}

.digital-wave span:nth-child(7) {
    height: 115px;
    animation-delay: .6s;
}

.digital-wave span:nth-child(8) {
    height: 85px;
    animation-delay: .7s;
}

.digital-wave span:nth-child(9) {
    height: 55px;
    animation-delay: .8s;
}

.digital-wave span:nth-child(10) {
    height: 30px;
    animation-delay: .9s;
}


/* =========================================
   CIRCUIT DECORATION
========================================= */

.circuit {
    position: absolute;

    z-index: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(72, 111, 255, .5),
            transparent
        );

    opacity: .6;
}

.circuit::after {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #5e82ff;

    box-shadow: 0 0 15px #4266ff;

    top: -3px;
}

.circuit-1 {
    width: 350px;
    right: 0;
    top: 28%;
}

.circuit-1::after {
    right: 30%;
}

.circuit-2 {
    width: 260px;
    right: 5%;
    top: 62%;
}

.circuit-2::after {
    left: 20%;
}

.circuit-3 {
    width: 200px;
    right: 17%;
    top: 20%;
}

.circuit-3::after {
    left: 45%;
}


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

.video-modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

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

.video-modal.active {
    display: flex;
}

.video-overlay {
    position: absolute;

    inset: 0;

    background: rgba(0, 5, 25, 0.88);

    backdrop-filter: blur(10px);
}

.video-popup {
    position: relative;

    z-index: 2;

    width: min(900px, 90vw);

    background: #061044;

    padding: 10px;

    border-radius: 18px;

    box-shadow:
        0 30px 100px rgba(0, 0, 0, .6);
}

.video-wrapper {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 12px;
}

.video-wrapper iframe {
    width: 100%;
    height: 100%;

    border: none;
}

.video-close {
    position: absolute;

    right: -15px;
    top: -15px;

    z-index: 5;

    width: 42px;
    height: 42px;

    border: none;

    border-radius: 50%;

    background: #ffffff;

    color: #07134e;

    font-size: 28px;

    line-height: 1;

    cursor: pointer;

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


/* =========================================
   ANIMATIONS
========================================= */

@keyframes pulseRing {

    0% {
        transform: scale(.85);
        opacity: .9;
    }

    70% {
        transform: scale(1.15);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}


@keyframes orbitRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes orbitRotateReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}


@keyframes wave {

    0%,
    100% {
        transform: scaleY(.65);
    }

    50% {
        transform: scaleY(1.2);
    }
}


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

@media (max-width: 1100px) {

    .hero-container {
        grid-template-columns: 1fr 1fr;

        padding: 70px 40px;
    }

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

    .hero-features {
        gap: 12px;
    }

    .feature-divider {
        display: none;
    }

    .hero-video {
        transform: scale(.85);
    }
}


@media (max-width: 800px) {

    .aptflow-hero {
        min-height: auto;
    }

    .hero-container {
        grid-template-columns: 1fr;

        padding: 70px 25px 100px;

        text-align: center;
    }

    .hero-content {
        margin: auto;
    }

    .hero-badge {
        margin-bottom: 20px;
    }

    .hero-content h1 {
        font-size: 46px;

        letter-spacing: -2px;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;

        font-size: 16px;
    }

    .hero-buttons {
        justify-content: center;

        flex-wrap: wrap;
    }

    .hero-features {
        justify-content: center;

        flex-wrap: wrap;

        margin-top: 20px;
    }

    .hero-video {
        height: 450px;

        margin-top: 10px;

        transform: scale(.8);
    }

    .play-note {
        right: 5%;
    }
}


@media (max-width: 480px) {

    .hero-container {
        padding-left: 18px;
        padding-right: 18px;
    }

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

    .hero-description {
        font-size: 15px;
    }

    .btn {
        width: 100%;
    }

    .hero-buttons {
        gap: 12px;
    }

    .hero-video {
        height: 380px;

        transform: scale(.68);

        margin-top: -20px;
        margin-bottom: -30px;
    }

    .hero-features {
        gap: 18px;
    }
}


/*---- FEATURES ----*/

.features{
    padding-top:100px;
    padding-bottom:100px;
    background:#fff;
}

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

.section-header h2{
    font-size:30px;
    color:#001C77;
    margin:15px 0;
    line-height:1.4;
    max-width:700px;
}

.section-header p{
    color:#667085;
    font-size:14px;
    max-width:700px;
    line-height:24px;
}

.section-tag{
    border:1px solid #E4E8F2;
    color:#64748B;
    font-weight:500;
    font-size: 13px;
    /* text-transform:uppercase; */
    /* letter-spacing:1px; */
}

.feature-btn{
    border:1px solid #E4E8F2;
    padding:16px 30px;
    border-radius:50px;
    color:#667085;
    display:flex;
    align-items:center;
    gap:10px;
    transition:.35s;
    white-space:nowrap;
    font-size: 14px;
}

.feature-btn:hover{
    color:#01219c;
    border:1px solid #01219c;
}

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

.feature-card{
    border:1px solid #EDF1F7;
    border-radius:20px;
    padding:30px;
    transition:.35s;
    background:#fff;
}

.feature-card:hover{
    transform:translateY(-12px);
    box-shadow:0 25px 50px rgba(23,72,235,.12);
    border:1px solid #001c7751;
}

.icon{
    width:68px;
    height:68px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:24px;
    margin-bottom:25px;
}

.icon-color{
    background:#e0f2fe;
}

.feature-card h3{
    font-size:18px;
    color:#01219C;
    margin-bottom:10px;
    font-weight: 600;
}

.feature-card p{
    color:#667085;
    line-height:1.5;
    margin-bottom:30px;
    font-size: 14px;
}

.feature-card a{
    color:#01219c;
    font-weight:500;
    font-size: 14px;
}

.feature-card a i{
    margin-left:8px;
    transition:.3s;
}

.feature-card:hover a i{
    margin-left:14px;
}

/*--- RESPONSIVE ---*/

@media(max-width:991px){
    .feature-grid{
        grid-template-columns:repeat(2,1fr);
    }

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

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

    .section-header h2{
        font-size:38px;
    }

    .feature-card{
        padding:35px;
    }
}


/*=====================================
        PROMO BANNER
======================================*/

.promo-banner{
    position:relative;
    width:100%;
    padding:70px 0;
    overflow:hidden;
    background:linear-gradient(135deg,#F8FAFF,#EEF4FF);
}


/* Decorative Background */

.promo-bg-circle{
    position:absolute;
    width:700px;
    height:700px;
    background:radial-gradient(circle,#4477FE25,transparent 70%);
    right:-250px;
    top:-180px;
}


.promo-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
}


/*=====================
        IMAGE
======================*/

.promo-image{
    position:relative;
    display:flex;
    justify-content:center;
}

.phone-bg{

    position:absolute;
    width:460px;
    height:460px;
    background:linear-gradient(135deg,#4477FE,#01219C);
    border-radius:50%;
    opacity:.12;
    left:50%;
    transform:translateX(-50%);
}

.promo-image img{
    width:330px;
    position:relative;
    z-index:2;
    filter:drop-shadow(0 40px 50px rgba(0,0,0,.20));
}


/*=====================
        CONTENT
======================*/

.promo-tag{
    color:#01219C;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
}

.promo-content h2{
    font-size:34px;
    margin:20px 0;
    line-height:1.15;
    color:#01219C;
}

.promo-content h2 span{
    color:#01219C;
}

.promo-content p{
    font-size:16px;
    line-height:24px;
    color:#667085;
    margin-bottom:20px;

}


/*=====================
        FEATURES
======================*/

.promo-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
    margin-bottom:45px;
}

.promo-features div{
    display:flex;
    font-size: 16px;
    align-items:center;
    gap:12px;
    font-weight:500;
    color:#667085;
}

.promo-features i{
    color:#22C55E;
    font-size:22px;
}


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

.promo-btn{
    display:inline-block;
    background:linear-gradient(135deg,#01219C,#4477FE);
    color:#fff;
    padding:18px 38px;
    border-radius:60px;
    font-weight:600;
    transition:.35s;
}

.promo-btn:hover{
    transform:translateY(-6px);
    box-shadow:0 25px 40px rgba(23,72,235,.30);
}


/*--- RESPONSIVE ---*/

@media(max-width:991px){

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

.promo-features{
    grid-template-columns:1fr;
}
.promo-content h2{
    font-size:40px;
}
}

@media(max-width:768px){
.promo-image img{
    width:240px;
}

.promo-content h2{
    font-size:34px;
}
}


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

.footer{
    position:relative;
    overflow:hidden;
    padding:90px 0 30px;
    color:#ffffff;
    background:
    radial-gradient(circle at top left,
    rgba(68,119,254,.15),
    transparent 35%),
    radial-gradient(circle at bottom right,
    rgba(255,255,255,.05),
    transparent 45%),
    linear-gradient(
        180deg,
        #031034 0%,
        #01219C 100%
    );
}

.footer .container{
    position:relative;
    z-index:2;
}

.footer::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    border-radius:50%;
    background:
    radial-gradient(circle,
    rgba(68,119,254,.08),
    transparent 70%);
    top:-250px;
    left:-200px;
}

.footer::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:
    radial-gradient(circle,
    rgba(255,255,255,.04),
    transparent 75%);
    right:-180px;
    bottom:-200px;
}

.footer-pattern{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
}


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

.footer-top{
    display:grid;
    grid-template-columns:1.4fr 2.6fr;
    gap:40px;
    padding-bottom:60px;
    border-bottom:1px solid rgba(255,255,255,.08);
}


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

.footer-logo{
    width:200px;
    margin-bottom:25px;
}

.footer-about p{
    color:#BFC7E3;
    font-size: 13px;
    line-height:1.7;
    max-width:350px;
    font-weight: 400;

}


/*==============================
        RIGHT
===============================*/

.footer-right h3{
    font-size:22px;
    font-weight: 500;
    margin-bottom:10px;
    color:#fff;
}

.footer-right p{
    font-size: 13px;
    color:#BFC7E3;
    margin-bottom:20px;
    max-width: 600px;
}


/*==============================
        NEWSLETTER
===============================*/

.newsletter{
    display:flex;
    gap:15px;
    margin-bottom:25px;
}

.newsletter input{
    flex:1;
    height:50px;
    border:none;
    outline:none;
    border-radius:8px;
    padding:0 18px;
    font-size:13px;
    font-family: "Poppins";
}

.newsletter button{
    border:none;
    background:#01219c;
    color:#fff;
    padding:0 30px;
    border-radius:8px;
    cursor:pointer;
    font-weight:500;
    transition:.35s;
    font-size:13px;
    font-family: "Poppins";
}

.newsletter button:hover{
    background:#e0f2fe;
    color:#01219c;
    font-weight: 600;
}


/* -- LINKS -- */

.footer-links{
    display:grid;
    font-size: 13px;
    grid-template-columns:repeat(4,auto);
    gap:12px 30px;
    font-weight: 400;
}

.footer-links a{
    color:#BFC7E3;
    text-decoration:none;
    transition:.3s;
    font-weight: 400;
}

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


/* -- FOOTER BOTTOM -- */

.footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:30px;
    flex-wrap:wrap;
    gap:20px;
}

.footer-bottom p{
    color:#9AA7CC;
    font-size: 12px;
    font-weight: 400;
}

.footer-bottom a{
    color:#9AA7CC;
    font-size: 12px;
}

.footer-bottom a:hover{
    color:#ffffff;
    font-size: 12px;
}

.footer-policy{
    display:flex;
    gap:30px;
    flex-wrap:wrap;
}

.footer-policy a{
    color:#9AA7CC;
    text-decoration:none;
    transition:.3s;
    font-size: 12px;
}

.footer-policy a:hover{
    color:#fff;
}


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

@media(max-width:991px){

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

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

.newsletter{
    flex-direction:column;
}

.newsletter button{
    height:60px;
    }
}

@media(max-width:768px){
.footer-links{
    grid-template-columns:1fr;    
    }

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

.footer-policy{
    justify-content:center;
    }
}



/*==================================
        SOCIAL ICONS
===================================*/

.footer-social{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:30px;
}

.footer-social a{
    width:46px;
    height:46px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#ffffff;
    text-decoration:none;
    font-size:18px;
    transition:all .35s ease;
    border:1px solid rgba(255,255,255,.08);
}

.footer-social a:hover{
    transform:translateY(-6px);
    background:#01219C;
    border-color:#01219C;
    box-shadow:0 15px 30px rgba(8, 28, 95, 0.35);
}




/*======================================
        VIDEO POPUP
=======================================*/

.video-modal{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.80);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:99999;

}

.video-modal.show{

    opacity:1;

    visibility:visible;

}

.video-container{
    position:relative;
    width:90%;
    max-width:960px;
    aspect-ratio:16/9;
    background:#000;
    border-radius:18px;
    overflow:hidden;
    transform:scale(.8);
    transition:.35s;
}

.video-modal.show .video-container{
    transform:scale(1);
}

.video-container iframe{
    width:100%;
    height:100%;
    border:none;
}

.close-video{
    position:absolute;
    top:-55px;
    right:0;
    width:45px;
    height:45px;
    border:none;
    border-radius:50%;
    background:#fff;
    color:#01219C;
    font-size:28px;
    cursor:pointer;
    transition:.3s;
}

.close-video:hover{
    background:#01219C;
    color:#fff;
}

/*==================================
        TESTIMONIAL
===================================*/

.testimonials{

    padding-bottom:100px;
    padding-top:100px;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at top left,
        rgba(68,119,254,.28),
        transparent 35%),
        radial-gradient(circle at bottom right,
        rgba(1,33,156,.25),
        transparent 40%),
        linear-gradient(
            135deg,
            #EEF4FF 0%,
            #EEF4FF 45%,
            #EEF4FF 100%
        );
    /* background:
        radial-gradient(circle at top left,
        rgba(68,119,254,.28),
        transparent 35%),
        radial-gradient(circle at bottom right,
        rgba(1,33,156,.25),
        transparent 40%),
        linear-gradient(
            135deg,
            #01219C 0%,
            #01219C 45%,
            #01219C 100%
        ); */
}

/* Decorative Glow */

.testimonials::before{
    content:"";
    position:absolute;
    width:550px;
    height:550px;
    border-radius:50%;
    background:rgba(255,255,255,.04);
    right:-180px;
    top:-180px;
}

.testimonials::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(68,119,254,.08);
    left:-150px;
    bottom:-150px;
}

.section-title{
    text-align:center;
    color:#01219C;
    font-size:46px;
    margin-bottom:70px;
}

.testimonial-slider{
    position:relative;
    max-width:850px;
    margin:auto;
    text-align:center;
    min-height:180px;
}

.testimonial{
    display:none;
    animation:fade .5s ease;
}

.testimonial.active{
    display:block;
}

.testimonial img{
    width:100px;
    height:100px;
    object-fit:cover;
    border-radius:50%;
    border:2px solid #ffffff;
    margin:auto auto 25px;
    box-shadow:0 20px 40px rgba(171, 175, 255, 0.1);
}

.testimonial h3{
    color:#01219C;
    font-size:18px;
    /* margin-bottom:8px; */
    font-weight: 500;
}

.testimonial span{
    color:#667085;
    font-weight:400;
    font-size:14px;
    display:block;
    margin-bottom:30px;
}

.testimonial p{
    max-width:720px;
    margin:auto;
    color:#667085;
    font-size:14px;
    line-height:24px;
}

/* Dots */

.slider-dots{
    margin-top:25px;
    text-align:center;
}

.dot{
    width:8px;
    height:8px;
    background:rgba(94, 83, 83, 0.542);
    display:inline-block;
    border-radius:50%;
    margin:0 6px;
    cursor:pointer;
    transition:.35s;
}

.dot.active{
    background:#01219C;
    transform:scale(1.35);
}

/* Animation */

@keyframes fade{

    from{
        opacity:0;
        transform:translateY(15px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Responsive */

@media(max-width:768px){
    .section-title{
        font-size:34px;
    }

    .testimonial h3{
        font-size:28px;
    }

    .testimonial p{
        font-size:17px;
        line-height:30px;
        padding:0 20px;
    }
}

/* HORIZONTAL RULER */

.full-width-line{
    width:100%;
    border:none;
    border-top:1px solid #E0F2FE;
    margin:40px 0;
}


/* -- CTA SECTION -- */

.cta-section{
    padding:60px 0;
    background:#ffffff;
}

.cta-banner{
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:50px;
    padding:60px;
    border-radius:16px;
    background:linear-gradient(135deg,#2D1B78 0%,#173FE3 100%);
}


/* Decorative Glow */

.cta-banner::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    border-radius:50%;
    right:-180px;
    bottom:-180px;
    background:rgba(255,255,255,.05);
}

.cta-banner::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    left:-150px;
    top:-150px;
    background:rgba(255,255,255,.03);
}


/* -- CONTENT -- */

.cta-content{
    position:relative;
    z-index:2;
}

.cta-label{
    display:inline-block;
    padding:8px 16px;
    border-radius:10px;
    background:rgba(255,255,255,.10);
    color:#d8e3ff;
    font-size:14px;
    margin-bottom:25px;
    letter-spacing:.5px;
}

.cta-content h2{
    font-size:30px;
    line-height:1.4;
    color:#fff;
    margin-bottom:10px;
}

.cta-content h2 span{
    display:block;
    color:#7EA9FF;
}

.cta-content p{
    color:#dbe6ff;
    line-height:1.5;
    font-size:14px;
    margin-bottom:34px;
}


/* -- STATS -- */

.cta-stats{
    display:flex;
    gap:60px;
}

.stat h3{
    font-size:32px;
    color:#fff;
    font-weight: 600;
}

.stat span{
    color:#d6ddff;
    font-size: 14px;
    align-self: center;
}


/* -- IMAGE -- */

.cta-image{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.cta-image img{
    width:100%;
    max-width:600px;
}


/* -- PLAY BUTTON -- */

.play-btn{
    position:absolute;
    top:10px;
    left:70px;
    width:90px;
    height:90px;
    border-radius:50%;
    background:#ffffff;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#01219c;
    font-size:28px;
    text-decoration:none;
    z-index:5;
    transition:.35s;
}

.play-btn:hover{
    transform:scale(1.08);
}

.play-btn::before{
    content:"";
    position:absolute;
    inset:-8px;
    border:2px solid rgba(255,255,255,.45);
    border-radius:50%;
}


/* -- RESPONSIVE -- */

@media(max-width:992px){
.cta-banner{
    grid-template-columns:1fr;
    text-align:center;
    padding:60px 40px;
    }

.cta-content p{
    margin:auto auto 40px;
    }

.cta-stats{
    justify-content:center;
    }

.play-btn{
    left:50%;
    transform:translateX(-50%);
    }
}

@media(max-width:768px){
.cta-banner{
    padding:40px 30px;
    }

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

.cta-stats{
    flex-direction:column;
    gap:30px;
    }

.play-btn{
    width:70px;
    height:70px;
    font-size:22px;
    }
}


/* =====================================================
            APTFLOW - ABOUT US SECTION
===================================================== */

.apt-about-section {
    padding:100px 0;
    background:#ffffff;
    overflow:hidden;
}


/* =====================================================
   MAIN GRID
===================================================== */

.apt-about-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:80px;
}


/* =====================================================
   LEFT IMAGE AREA
===================================================== */

.apt-about-visual {
    position:relative;
    width:100%;
    max-width:600px;
    margin:auto;
    padding:5px;
}


.about-image-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}


/* =====================================================
   IMAGE BLOCK
===================================================== */

.about-image {
    width:100%;
    height:225px;
    overflow:hidden;
    background:#EEF4FF;
}

.about-image img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:
        transform .5s ease;
}

.about-image:hover img {
    transform:scale(1.05);
}


/* =====================================================
   INDIVIDUAL IMAGE SHAPES
===================================================== */

.about-image-1 {
    border-radius:145px 145px 0 145px;
}

.about-image-2 {
    border-radius:145px 145px 145px 0;
}

.about-image-3 {
    border-radius:145px 0 145px 145px;
}

.about-image-4 {
    border-radius:0 145px 145px 145px;
}


/* =====================================================
   FLOATING CONTACT CARD
===================================================== */

.about-contact-card {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    z-index:5;
    width:290px;
    min-height:80px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:10px 25px 10px 10px;
    background:#ffffff;
    border-radius:45px;
    box-shadow:
        0 15px 40px
        rgba(2,13,41,.12);
}

.about-contact-icon {
    width:60px;
    height:60px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#01219C;
    color:#EEF4FF;
    font-size:19px;
}

.about-contact-content {
    display:flex;
    flex-direction:column;
}

.about-contact-content span {
    color:#667085;
    font-size:12px;
    font-weight:500;
}

.about-contact-content strong {
    color:#020D29;
    font-size:18px;
    font-weight:600;
}


/* =====================================================
   RIGHT CONTENT
===================================================== */

.apt-about-content {
    padding-right:20px;
}

.about-section-tag {
    display:inline-flex;
    align-items:center;
    padding:7px 15px;
    margin-bottom:15px;
    border:1px solid #B8E5B4;
    border-radius:30px;
    /* background:#F0FAEF; */
    color:#32A52A;
    font-size:10px;
    font-weight:600;
    letter-spacing:.5px;
}


/* =====================================================
   HEADING
===================================================== */

.apt-about-content h2 {
    margin:15px 0;
    color:#020D29;
    font-size:32px;
    line-height:1.25;
    font-weight:600;
    letter-spacing:-1px;
}

.apt-about-content h2 span {
    color:#1748EB;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.about-intro {
    color:#475467;
    font-size:14px;
    line-height:1.5;
    margin-bottom:10px;
}


.about-description {
    color:#667085;
    font-size:14px;
    line-height:1.7;
    margin-bottom:28px;
}


/* =====================================================
   HIGHLIGHTS
===================================================== */

.about-highlights {
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
}

.about-highlight-card {
    display:flex;
    align-items:center;
    gap:18px;
    min-height:90px;
    padding:15px 18px;
    border-radius:10px;
    background:#ffffff;
    box-shadow:
        0 10px 35px
        rgba(2,13,41,.04);
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.about-highlight-card:hover {
    transform:translateY(-4px);
    box-shadow:
        0 15px 40px
        rgba(2,13,41,.10);
}


/* =====================================================
   HIGHLIGHT ICON
===================================================== */

.highlight-icon {
    width:54px;
    height:54px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#EEF4FF;
    color:#01219C;
    font-size:22px;
}

.about-highlight-card h4 {
    color:#020D29;
    font-size:14px;
    font-weight:500;
}

.about-highlight-card span {
    color:#667085;
    font-size:11px;
}

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

@media(max-width:1100px) {
    .apt-about-grid {
        gap:50px;
    }

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

    .about-image {
        height:240px;
    }

    .about-contact-card {
        width:250px;
    }
}


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

@media(max-width:900px) {
    .apt-about-section {
        padding:75px 0;
    }

    .apt-about-grid {
        grid-template-columns:1fr;
        gap:60px;
    }

    .apt-about-visual {
        max-width:650px;
    }

    .apt-about-content {
        padding-right:0;
    }

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


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

@media(max-width:600px) {
    .apt-about-section {
        padding:60px 0;
    }

    .about-image-grid {
        gap:8px;
    }

    .about-image {
        height:170px;
    }

    .about-image-1 {
        border-radius:
            90px 90px 0 90px;
    }


    .about-image-2 {
        border-radius:
            90px 90px 90px 0;
    }

    .about-image-3 {
        border-radius:
            90px 0 90px 90px;
    }

    .about-image-4 {
        border-radius:
            0 90px 90px 90px;
    }

    .about-contact-card {
        width:220px;
        min-height:65px;
        padding:7px 15px 7px 7px;
    }

    .about-contact-icon {
        width:50px;
        height:50px;
        font-size:16px;
    }

    .about-contact-content strong {
        font-size:13px;
    }

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


    .about-intro {
        font-size:14px;
    }

    .about-description {
        font-size:12px;
    }

    .about-highlights {
        grid-template-columns:1fr;
    }

    .about-highlight-card {
        min-height:70px;
    }

    .about-cta {
        flex-direction:column;
        align-items:flex-start;
    }
}


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

@media(max-width:400px) {
    .about-image {
        height:145px;
    }

    .about-contact-card {
        width:195px;
    }

    .about-contact-icon {
        width:44px;
        height:44px;
    }

    .about-contact-content span {
        font-size:7px;
    }

    .about-contact-content strong {
        font-size:11px;
    }
}

/* =====================================================
   APTFLOW
   WHY CHOOSE US
===================================================== */

.why-aptflow {
    position: relative;
    padding: 110px 0 120px;
    background: #01219C;
    overflow: hidden;
}


/* =====================================================
   SUBTLE BACKGROUND PATTERN
===================================================== */

.why-aptflow::before {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    top: -300px;
    left: -250px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 50%;
    box-shadow:
        0 0 0 50px rgba(255,255,255,.025),
        0 0 0 100px rgba(255,255,255,.02),
        0 0 0 150px rgba(255,255,255,.015);
    pointer-events: none;
}


.why-aptflow::after {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    right: -300px;
    bottom: -400px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 50%;
    box-shadow:
        0 0 0 50px rgba(255,255,255,.025),
        0 0 0 100px rgba(255,255,255,.02),
        0 0 0 150px rgba(255,255,255,.015);
    pointer-events: none;
}


/* =====================================================
   CONTAINER
===================================================== */

.why-aptflow .container {
    position: relative;
    z-index: 2;
}


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

.why-header {
    max-width: 700px;
    margin: 0 auto 55px;
    text-align: center;
}


.why-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    margin-bottom: 15px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 30px;
    background: rgba(255,255,255,.08);
    color: #EEF4FF;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .8px;
}


.why-header h2 {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: 34px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -.8px;
}


.why-header h2 span {
    color: #EEF4FF;
}


.why-header p {
    max-width: 620px;
    margin: auto;
    color: rgba(255,255,255,.75);
    font-size: 14px;
    line-height: 1.7;
}


/* =====================================================
   FEATURE GRID
===================================================== */

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


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

.why-card {
    position: relative;
    min-height: 310px;
    padding: 42px 38px 35px;
    background: #EEF4FF;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 12px;
    transition:transform .3s ease, box-shadow .3s ease;
}


.why-card:hover {
    transform: translateY(-7px);
    box-shadow:0 20px 45px rgba(0,0,0,.18);
}


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

.why-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    border-radius: 50%;
    background: #01219C;
    color:#ffffff;
    font-size: 25px;
    box-shadow:0 8px 20px rgba(1,33,156,.15);
}


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

.why-card h3 {
    margin: 0 0 13px;
    color: #020D29;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
}


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

.why-card p {
    margin: 0 0 22px;
    color: #667085;
    font-size: 14px;
    line-height: 1.5;
}


/* =====================================================
   LINK
===================================================== */

.why-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #01219C;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.why-link i {
    font-size: 11px;
    transition:transform .25s ease;
}

.why-link:hover i {
    transform: translateX(5px);
}


/* =====================================================
   OPTIONAL CARD TOP ACCENT
===================================================== */

.why-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 30px;
    right: 30px;
    height: 3px;
    background: #01219C;
    border-radius:0 0 5px 5px;
    opacity: 0;
    transition: opacity .3s ease;
}

.why-card:hover::before {
    opacity: 1;
}


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

@media (max-width: 1000px) {
    .why-aptflow {
        padding: 85px 0 90px;
    }

    .why-header h2 {
        font-size: 38px;
    }

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

    .why-card:last-child {
        grid-column:1 / -1;
        max-width: 50%;
        width: 100%;
        margin: auto;
    }
}


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

@media (max-width: 700px) {
    .why-aptflow {
        padding: 70px 0;
    }

    .why-header {
        margin-bottom: 40px;
    }

    .why-header h2 {
        font-size: 31px;
    }

    .why-header p {
        font-size: 13px;
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .why-card {
        min-height: auto;
        padding: 32px 28px;
    }

    .why-card:last-child {
        grid-column: auto;
        max-width: none;
    }

    .why-icon {
        width: 65px;
        height: 65px;
        margin-bottom: 24px;
        font-size: 21px;
    }

    .why-card h3 {
        font-size: 17px;
    }
}


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

@media (max-width: 420px) {
    .why-header h2 {
        font-size: 27px;
    }

    .why-card {
        padding: 28px 24px;
    }
}

/* ------------------------------------------------------------------------- */

/*=====================================
        INNER PAGE HEADER
======================================*/

.page-header{
    position: relative;
    min-height: 360px;
    padding-top: 170px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 78% 48%,
            rgba(42, 82, 255, 0.32),
            transparent 32%
        ),
        radial-gradient(
            circle at 15% 20%,
            rgba(36, 74, 255, 0.16),
            transparent 28%
        ),
        linear-gradient(
            120deg,
            #001c77 0%,
            #001c77 45%,
            #071d82 100%
        );
    color: #ffffff;
}


.page-header1{
    position: relative;
    min-height: 360px;
    padding-top: 170px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 78% 48%,
            rgba(42, 82, 255, 0.32),
            transparent 32%
        ),
        radial-gradient(
            circle at 15% 20%,
            rgba(36, 74, 255, 0.16),
            transparent 28%
        ),
        linear-gradient(
            120deg,
            #001c77 0%,
            #001c77 45%,
            #071d82 100%
        );
    color: #ffffff;
}


/* Background Grid */

.page-pattern{
    position:absolute;
    inset:0;
    background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:70px 70px;
    opacity:.35;
}

/* Layout */

.page-header-content{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:40px;
}

/* Left */

.page-title{
    max-width:700px;
}

.page-tag{
    display:inline-block;
    padding:8px 18px;
    border-radius:50px;
    background:rgba(255,255,255,.08);
    color:#DDE8FF;
    font-size:13px;
    letter-spacing:.5px;
    margin-bottom:18px;
}

.page-title h1{
    color:#ffffff;
    font-size:34px;
    /* margin-bottom:8px; */
    font-weight:600;
}

.page-title p{
    color:#DCE8FF;
    font-size:14px;
    line-height:24px;
}

/* Breadcrumb */

.breadcrumbs{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:15px;
    font-size:12px;
    white-space:nowrap;
}

.breadcrumbs a{
    color:#DCE8FF;
    text-decoration:none;
    transition:.3s;
}

.breadcrumbs a:hover{
    color:#ffffff;
}

.breadcrumbs i{
    font-size:12px;
    color:#AFC6FF;
}

.current{
    color:#ffffff;
    font-weight:600;
}

/* Responsive */

@media(max-width:991px){
.page-header{
    padding:150px 0 80px;
}

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

.breadcrumbs{
    margin-top:10px;
}

.page-title h1{
    font-size:42px;
}
}

@media(max-width:768px){
    .page-title h1{
        font-size:34px;
    }

.page-title p{
    font-size:16px;
    line-height:28px;
}

.breadcrumbs{
font-size:14px;
}
}




/*====================================
        FEATURE SHOWCASE
=====================================*/

.feature-showcase{
    padding:120px 0;
    background:#ffffff;
}

.feature-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
    margin-bottom:40px;
    padding:30px;
    background:#F8FBFF;
    border:1px solid #E5EEF9;
    border-radius:20px;
    overflow:hidden;
}

.feature-row:last-child{
    margin-bottom:0;
}

.reverse{
    direction:rtl;
}

.reverse>*{
    direction:ltr;
}

/*======================
        VIDEO
=======================*/

.feature-media{
    position:relative;
}

.feature-media video{
    width:100%;
    border-radius:8px;
    display:block;
    border:1px solid #E8EDF5;
}

/*======================
        CONTENT
=======================*/

.feature-content{
    max-width:560px;
}

.feature-tag{
    display:inline-block;
    /* padding:10px 18px;
    border-radius:30px;
    background:#EEF4FF; */
    color:#01219C;
    font-size:12px;
    font-weight:500;
    margin-bottom:10px;
}

.feature-content h2{
    font-size:20px;
    line-height:1.4;
    color:#01219C;
    margin-bottom:15px;
}

.feature-content p{
    color:#667085;
    font-size:14px;
    line-height:24px;
    margin-bottom:14px;
    font-weight: 400;
}

.feature-content ul{
    list-style:none;
    /* margin-bottom:5px; */
}

.feature-content li{
    font-size:14px;
    color:#667085;
    margin-bottom:10px;
    font-weight: 400;
}

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

@media(max-width:991px){

.feature-row{
    grid-template-columns:1fr;
    gap:50px;
    margin-bottom:90px;
}

.reverse{
    direction:ltr;
}

.feature-content{
    max-width:100%;
}

.feature-content h2{
    font-size:40px;
}
}

@media(max-width:768px){
.feature-showcase{
    padding:80px 0;
}

.feature-content h2{
    font-size:34px;
}

.feature-content p{
    font-size:16px;
    line-height:30px;
}
}


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

.pricing-section{
    padding:80px 0;
    background:#F8FBFF;
}

.section-heading{
    text-align:center;
    max-width:700px;
    margin:0 auto 60px;
}

.section-tag{
    display:inline-block;
    padding:8px 18px;
    /* background:#EEF4FF; */
    border:1px solid #E4E8F2;
    color:#667085;
    border-radius:30px;
    font-size:12px;
    font-weight:600;
    /* margin-bottom:18px; */
}

.section-heading h2{
    font-size:28px;
    color:#01219C;
    /* margin-bottom:6px; */
    font-weight: 600;
}

.section-heading p{
    color:#667085;
    font-size:14px;
    line-height:32px;
}

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

.pricing-card{
    background:#ffffff;
    border:1px solid #E6EDF8;
    border-radius:12px;
    padding:45px;
    position:relative;
    transition:.3s;
}

.pricing-card:hover{
    border-color:#01219C;
    transform:translateY(-8px);
}

.featured{
    border:2px solid #01219C;
}

.popular{
    position:absolute;
    top:-15px;
    right:25px;
    background:#01219C;
    color:#fff;
    padding:8px 18px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

.plan-tag{
    color:#01219C;
    font-weight:500;
    font-size:12px;
}

.pricing-card h3{
    font-size:24px;
    color:#01219C;
    margin:18px 0 5px;
}

.price-text{
    color:#667085;
    margin-bottom:25px;
}

.plan-subtitle{
    margin-bottom:30px;
    color:#01219C;
}

.pricing-card ul{
    list-style:none;
    margin-bottom:35px;
}

.pricing-card ul li{
    margin-bottom:14px;
    color:#667085;
    font-size: 13px;
}

.pricing-card ul li i{
    color:#01219C;
    margin-right:10px;
}

.pricing-btn{
    display:block;
    text-align:center;
    padding:16px;
    border-radius:12px;
    background:#01219C;
    color:#fff;
    text-decoration:none;
    font-weight:600;
    font-size: 13px;
}

.pricing-btn:hover{
    background:#01219C;
}

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



/*=====================================
        DOWNLOAD APP
======================================*/

.download-app{
    padding-top:120px;
    background:#ffffff;
}

.download-wrapper{
    display:grid;
    grid-template-columns:460px 1fr;
    gap:70px;
    align-items:center;
    padding:50px;
    background:#F8FBFF;
    border:1px solid #E6EDF8;
    border-radius:14px;
}

/*=========================
        LEFT
==========================*/

.qr-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
    margin-bottom:25px;
}

.qr-card{
    background:#ffffff;
    border-radius:14px;
    border:1px solid #E6EDF8;
    text-align:center;
    padding:14px;
    transition:.35s;
}

.qr-card:hover{
    transform:translateY(-6px);
    border-color:#01219C;
}

.qr-card img{
    width:180px;
    margin-bottom:20px;
}

.qr-card h4{
    font-size:14px;
    color:#01219C;
    font-weight:600;
}

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

.store-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.store-card{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    padding:10px;
    background:#01219C;
    color:#ffffff;
    text-decoration:none;
    border-radius:12px;
    transition:.35s;
}

.store-card:hover{
    background:#01219C;
}

.store-card i{
    font-size:34px;
}

.store-card small{
    display:block;
    font-size:11px;
    opacity:.8;
}

.store-card strong{
    font-size:18px;
}


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

.apt-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:16px 34px;
    background:#01219C;
    color:#ffffff;
    font-size:14px;
    font-weight:500;
    text-decoration:none;
    border-radius:8px;
    border:2px solid #01219C;
    transition:all .35s ease;
    cursor:pointer;
    box-shadow:0 12px 30px rgba(23,72,235,.18);
    
}

.apt-btn i{
    transition:transform .3s ease;
}

.apt-btn:hover{
    background:#01219C;
    border-color:#01219C;
    /* transform:translateY(-4px); */
    box-shadow:0 18px 40px rgba(23,72,235,.30);
}

.apt-btn:hover i{
    transform:translateX(5px);
}



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

.apt-btn-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 30px;
    border:1px solid #01219C;
    color:#01219C;
    text-decoration:none;
    font-size:12px;
    font-weight:500;
    border-radius:6px;
    transition:.35s;
}

.apt-btn-outline:hover{
    background:#01219C;
    color:#ffffff;
}




/*=========================
        RIGHT
==========================*/

.download-content .section-tag{
    display:inline-block;
    padding:8px 18px;
    border-radius:40px;
    background:#EEF4FF;
    color:#01219C;
    font-size:12px;
    font-weight:600;
    margin-bottom:10px;
}

.download-content h2{
    font-size:34px;
    line-height:1.2;
    color:#01219C;
    margin-bottom:14px;
}

.download-content h2 span{
    color:#01219C;
}

.download-content p{
    color:#667085;
    font-size:14px;
    line-height:24px;
    margin-bottom:14px;
}

.download-content ul{
    list-style:none;
}

.download-content li{
    margin-bottom:12px;
    font-size:14px;
    color:#667085;
}

.download-content li i{
    color:#667085;
    margin-right:12px;
}

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

@media(max-width:991px){

.download-wrapper{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.qr-row,
.store-row{

grid-template-columns:1fr;

}

.download-wrapper{

padding:35px;

}

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

}

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

.download-hero{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
    margin-bottom:120px;
}

.download-content h1{
    font-size:34px;
    color:#01219C;
    line-height:1.15;
    margin-bottom:15px;
}

.download-content p{
    font-size:14px;
    color:#667085;
    line-height:24px;
    /* margin-bottom:35px; */
}

.download-list{
    list-style:none;
    margin-bottom:40px;
}

.download-list li{
    margin-bottom:18px;
    color:#01219C;
    font-size:17px;
}

.download-list i{
    color:#01219C;
    margin-right:12px;
}

/*====================================================
                STORE BUTTONS
====================================================*/

.store-buttons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:40px;
}

.store-btn{
    display:flex;
    align-items:center;
    gap:18px;
    padding:18px 28px;
    border-radius:12px;
    background:#01219C;
    color:#fff;
    text-decoration:none;
    transition:.35s;
}

.store-btn:hover{
    background:#01219C;
}

.store-btn i{
    font-size:34px;
}

.store-btn small{
    display:block;
    font-size:12px;
    letter-spacing:.5px;
    opacity:.8;
}

.store-btn strong{
    font-size:18px;
}

/*====================================================
                PHONE MOCKUP
====================================================*/

.download-image{
    position:relative;
    text-align:center;
}

.download-image img{
    width:100%;
    max-width:480px;
}

.qr-box{
    position:absolute;
    right:20px;
    bottom:40px;
    background:#fff;
    padding:15px;
    border-radius:18px;
    text-align:center;
    border:1px solid #E6EDF8;
}

.qr-box img{
    width:120px;
}

.qr-box p{
    margin-top:10px;
    font-size:14px;
    color:#01219C;
}

/*====================================================
                APP STATS
====================================================*/

.app-stats{
    padding:80px 0;
    background:#F8FBFF;
}

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

.stat-card{
    background:#fff;
    padding:40px;
    border-radius:20px;
    text-align:center;
    border:1px solid #E6EDF8;
}

.stat-card h2{
    font-size:46px;
    color:#01219C;
    margin-bottom:10px;
}

.stat-card p{
    color:#667085;
}

/*====================================================
                SCREENSHOTS
====================================================*/

.screenshots{
    padding:120px 0;
    background:#fff;
}

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

.screenshot{
    border-radius:24px;
    overflow:hidden;
    border:1px solid #E6EDF8;
}

.screenshot img{
    width:100%;
    display:block;
}

/*====================================================
                FEATURES
====================================================*/

.app-features{
    padding:120px 0;
    background:#F8FBFF;
}

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

.feature-box{
    background:#fff;
    border-radius:20px;
    padding:35px;
    text-align:center;
    border:1px solid #E6EDF8;
}

.feature-box i{
    font-size:40px;
    color:#01219C;
    margin-bottom:20px;
}

.feature-box h4{
    margin-bottom:15px;
    color:#01219C;
}

.feature-box p{
    color:#667085;
    line-height:28px;
}

/*====================================================
                INSTALLATION
====================================================*/

.installation{
    padding:120px 0;
}

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

.step{
    text-align:center;
}

.step-number{
    width:80px;
    height:80px;
    margin:auto;
    border-radius:50%;
    background:#01219C;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    margin-bottom:25px;
}

.step h4{
    margin-bottom:15px;
}

.step p{
    color:#667085;
}

/*====================================================
                SYSTEM REQUIREMENTS
====================================================*/

.system{
    padding:120px 0;
    background:#F8FBFF;
}

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

.system-card{
    background:#fff;
    border-radius:24px;
    padding:40px;
    border:1px solid #E6EDF8;
}

.system-card h3{
    margin-bottom:25px;
}

.system-card ul{
    list-style:none;
}

.system-card li{
    margin-bottom:18px;
}

/*====================================================
                VERSION INFO
====================================================*/

.version{
    padding:120px 0;
}

.version-card{
    max-width:700px;
    margin:auto;
    border:1px solid #E6EDF8;
    border-radius:24px;
    overflow:hidden;
}

.version-row{
    display:flex;
    justify-content:space-between;
    padding:22px 35px;
    border-bottom:1px solid #E6EDF8;
}

.version-row:last-child{
    border-bottom:none;
}

/*====================================================
                SECURITY
====================================================*/

.security{
    padding:120px 0;
    background:#F8FBFF;
}

.security-box{
    max-width:900px;
    margin:auto;
    text-align:center;
}

.security-icon{
    width:120px;
    height:120px;
    border-radius:50%;
    background:#01219C;
    color:#fff;
    font-size:48px;
    display:flex;
    justify-content:center;
    align-items:center;
    /* margin:auto auto 35px; */
}

.security-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:0px;
    margin-top:0px;

}

.security-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 28px 0;
    border-bottom: 1px solid #F0F2F6;
}

/*====================================================
                FAQ
====================================================*/

.faq{

    padding:120px 0;

}

/*====================================================
                SUPPORT
====================================================*/

.support{

    padding:120px 0;

    background:linear-gradient(
        135deg,
        #01219C,
        #01219C,
        #01219C
    );

    color:#fff;

    text-align:center;

    border-radius:30px;

}

.support h2{

    font-size:48px;

    margin-bottom:20px;

}

.support p{

    max-width:700px;

    margin:auto;

    line-height:34px;

    color:#DCE8FF;

}

.support-buttons{

    margin-top:40px;

    display:flex;

    justify-content:center;

    gap:20px;

}

.support-buttons a{

    padding:16px 34px;

    border-radius:12px;

    text-decoration:none;

    font-weight:600;

}

.btn-white{

    background:#fff;

    color:#01219C;

}

/* .btn-outline{

    border:2px solid #fff;

    color:#fff;

} */

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

@media(max-width:991px){

.download-hero,
.system-grid{

grid-template-columns:1fr;

}

.app-stats .container,
.feature-grid,
.screenshot-grid,
.steps{

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

}

}

@media(max-width:768px){

.download-content h1{

font-size:38px;

}

.store-buttons{

flex-direction:column;

}

.feature-grid,
.screenshot-grid,
.steps,
.app-stats .container,
.security-list{

grid-template-columns:1fr;

}

.support-buttons{

flex-direction:column;

}

}



.support-contact{
padding:120px 0;
background:#F8FBFF;
}

.contact-grid{
display:grid;
grid-template-columns:1, 1fr;
gap:60px;
}

.support-info{
background:#fff;
padding:40px;
border-radius:24px;
border:1px solid #E6EDF8;
}

.ticket-form{
background:#fff;
padding:40px;
border-radius:24px;
border:1px solid #E6EDF8;

}

.ticket-form form{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}

.ticket-form textarea{

grid-column:1/-1;

height:180px;

resize:none;

}

.ticket-form button{
grid-column:1/-1;
background:#01219C;
color:#fff;
padding:18px;
border:none;
border-radius:10px;
font-size:14px;
font-family: 'Poppins';
cursor:pointer;

}

.ticket-form input,
.ticket-form select,
.ticket-form textarea{
padding:16px;
border:1px solid #DCE4F3;
border-radius:10px;
font-size:14px;
font-family: 'Poppins';
}

.info-item{

display:flex;

gap:20px;

margin:25px 0;

}

.info-item i{

width:60px;

height:60px;

background:#EEF4FF;

color:#01219C;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:22px;

}


/*=========================================
            HELP SEARCH SECTION
==========================================*/

.support-search{
    padding:120px 0 80px;
    background:linear-gradient(
        135deg,
        #F8FBFF 0%,
        #EEF5FF 100%
    );
}

.search-box{
    max-width:850px;
    margin:auto;
    text-align:center;
}

.search-box h2{
    font-size:32px;
    color:#01219C;
    margin-bottom:10px;
    font-weight:600;
}

.search-box p{
    font-size:14px;
    color:#667085;
    line-height:32px;
    max-width:650px;
    margin:0 auto 45px;
}

/* Search Form */

.search-box form{
    display:flex;
    align-items:center;
    max-width:650px;
    margin:auto;
    background:#ffffff;
    border:1px solid #DCE6F8;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(2,13,41,.05);
}

.search-box input{
    flex:1;
    border:none;
    outline:none;
    padding:20px 30px;
    font-size:14px;
    color:#01219C;
    background:transparent;
    font-family: 'Poppins';
}

.search-box input::placeholder{
    color:#98A2B3;
}

.search-box button{
    /* width:72px; */
    height:60px;
    padding-left:20px;
    padding-right:20px;
    border:none;
    background:#01219C;
    color:#ffffff;
    cursor:pointer;
    font-size:14px;
    transition:.35s;
    font-family: 'Poppins';
}

.search-box button:hover{
    background:#01219C;
}


/*=========================================
            QUICK HELP
==========================================*/

.support-options{
    padding:80px 0 120px;
    background:#ffffff;
}

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

/* Card */

.support-card{
    background:#F8FBFF;
    border:1px solid #E5EEF9;
    border-radius:22px;
    padding:40px 30px;
    transition:.35s;
    text-align:center;
    position:relative;
    overflow:hidden;
}

/* Hover Background */

.support-card::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    background:rgba(23,72,235,.04);
    border-radius:50%;
    top:-80px;
    right:-80px;
    transition:.4s;
}

.support-card:hover{
    transform:translateY(-8px);
    border-color:#01219C;
    box-shadow:0 20px 50px rgba(23,72,235,.10);
}

.support-card:hover::before{
    transform:scale(1.3);
}

/* Icon */

.support-card i{
    width:75px;
    height:75px;
    border-radius:18px;
    background:#01219C;
    color:#ffffff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    margin:0 auto 25px;
}

/* Heading */

.support-card h3{
    font-size:18px;
    color:#01219C;
    margin-bottom:12px;
}

/* Text */

.support-card p{
    color:#667085;
    line-height:1.6;
    margin-bottom:25px;
    font-size: 14px;
}

/* Link */

.support-card a{
    color:#01219C;
    font-weight:600;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:.3s;
    font-size: 14px;
}

.support-card a:hover{
    color:#01219C;
    gap:14px;
}



/* =========================================
   HEADER USER PROFILE
========================================= */

.user-profile {
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
}


/* User Information */

.user-info {
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    line-height:1.3;
}


.user-name {
    color:#ffffff;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
}


.user-flat {
    color:#C9D7FF;
    font-size:10px;
    margin-top:3px;
}


/* Profile Image */

.user-avatar {
    width:44px;
    height:44px;
    border-radius:50%;
    overflow:hidden;
    border:2px solid rgba(255,255,255,.8);
    flex-shrink:0;
    background:#EEF3FF;
}


.user-avatar img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}


/* Hover */

.user-profile:hover .user-avatar {
    border-color:#ffffff;
    transform:scale(1.04);
}


.user-profile:hover .user-name {
    color:#ffffff;
}


.user-avatar {
    transition:.3s ease;
}


/* =========================================================
   APTFLOW CUSTOMER DASHBOARD
========================================================= */


/* =========================================================
   MAIN DASHBOARD SECTION
========================================================= */

.customer-dashboard {

    background:#ffffff;

    padding:45px 0 90px;

}


/* =========================================================
   CUSTOMER HORIZONTAL NAVIGATION
========================================================= */

.customer-nav {
    position:relative;
    width:100%;
    background:#ffffff;
    border:1px solid #E5EAF3;
    border-radius:6px;
    box-shadow:0 8px 30px rgba(1,33,156,.07);
    margin-bottom:30px;
    z-index:100;
}


.customer-nav-list {
    display:flex;
    align-items:stretch;
    justify-content:flex-start;
    width:100%;
}


/* =========================================================
   MAIN NAV ITEM
========================================================= */

.customer-nav-item {
    position:relative;
}


.customer-nav-item > a {
    display:flex;
    align-items:center;
    gap:10px;
    min-height:58px;
    padding:12px 26px;
    color:#202836;
    font-size:13px;
    font-weight:500;
    white-space:nowrap;
    transition:.3s ease;
}


.customer-nav-item > a i:first-child {
    color:#7B879E;
    font-size:14px;
    transition:.3s ease;
}


.customer-nav-item > a:hover {
    color:#01219C;
    background:#F6F8FF;
}


.customer-nav-item > a:hover i:first-child {
    color:#01219C;
}


/* =========================================================
   ACTIVE NAV ITEM
========================================================= */

.customer-nav-item.active > a {
    color:#01219C;
    font-weight:600;
    /* background:#EEF3FF; */
    border-radius: 12px;
}


.customer-nav-item.active > a i:first-child {
    color:#1748EB;
}


/* Bottom active line */

.customer-nav-item.active > a::after {
    content:"";
    position:absolute;
    left:16px;
    right:16px;
    bottom:0;
    height:3px;
    border-radius:5px 5px 0 0;
    background:#1748EB;
}


/* =========================================================
   DROPDOWN ARROW
========================================================= */

.dropdown-arrow {
    font-size:8px !important;
    margin-left:3px;
    color:#8B96AA !important;
    transition:.3s ease;
}


.has-dropdown:hover .dropdown-arrow {
    transform:rotate(180deg);
}


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

.customer-dropdown {
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    min-width:220px;
    padding:8px;
    background:#ffffff;
    border:1px solid #E5EAF3;
    border-radius:10px;
    box-shadow:0 15px 40px rgba(1,33,156,.12);
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;
    z-index:9999;
}


/* Show dropdown */

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


/* Dropdown items */
.customer-dropdown li {
    width:100%;
}


.customer-dropdown li a {
    display:flex;
    align-items:center;
    gap:11px;
    padding:11px 13px;
    border-radius:7px;
    color:#667085;
    font-size:14px;
    font-weight:400;
    transition:.25s ease;

}


.customer-dropdown li a i {

    width:17px;

    text-align:center;

    color:#7A879E;

    font-size:11px;

}


.customer-dropdown li a:hover {

    color:#01219C;

    background:#F1F5FF;

}


.customer-dropdown li a:hover i {

    color:#1748EB;

}


/* =========================================================
   DASHBOARD WELCOME
========================================================= */

.dashboard-welcome {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:left;
    gap:30px;

    min-height:175px;

    padding:32px 38px;

    margin-bottom:25px;

    overflow:hidden;

    border-radius:16px;

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(255,255,255,.12),
            transparent 35%
        ),

        linear-gradient(
            120deg,
            #01219C,
            #1748EB
        );

    box-shadow:
        0 18px 40px rgba(1,33,156,.14);

}


.dashboard-welcome::after {
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;
    right:-160px;
    bottom:-260px;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:
        0 0 0 55px rgba(255,255,255,.025),
        0 0 0 110px rgba(255,255,255,.02);
}


.welcome-content {
    position:relative;
    z-index:2;
}

.welcome-content img{
    width: 160px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    box-shadow: 0 10px 30px rgba(2, 13, 41, .12);
}


.welcome-label {
    display:block;
    margin-bottom:6px;
    color:#AFC6FF;
    font-size:12px;
    font-weight:500;
    letter-spacing:1px;
}


.welcome-content h2 {
    color:#ffffff;
    font-size:26px;
    line-height:1.3;
    font-weight:600;
    margin-bottom:10px;
}


.welcome-content p {
    color:#D7E2FF;
    font-size:14px;
    line-height:20px;
}







.welcome-content-wid {
    position:relative;
    z-index:2;
    width: 550px;
}

.welcome-content-wid img{
    width: 160px;
    border-radius: 50%;
}


.welcome-label-wid {
    display:block;
    margin-bottom:6px;
    color:#AFC6FF;
    font-size:12px;
    font-weight:500;
    letter-spacing:1px;
}


.welcome-content-wid h2 {
    color:#ffffff;
    font-size:26px;
    line-height:1.3;
    font-weight:600;
    margin-bottom:10px;
}


.welcome-content-wid p {
    color:#D7E2FF;
    font-size:14px;
    line-height:20px;
}




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

.welcome-apartment {
    position:relative;
    z-index:3;
    min-width:225px;
    padding:17px 20px;
    border-radius:11px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.18);
}


.welcome-apartment span {
    display:block;
    color:#AFC6FF;
    font-size:10px;
    letter-spacing:.8px;
    margin-bottom:5px;
}


.welcome-apartment strong {
    display:block;
    color:#ffffff;
    font-size:16px;
    font-weight:500;
}


.welcome-apartment small {
    color:#C9D7FF;
    font-size:12px;
}


/* =========================================================
   STATISTICS
========================================================= */

.dashboard-stats {

    display:grid;

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

    gap:16px;

    margin-bottom:25px;

}


.dashboard-stat-card {

    display:flex;

    align-items:center;

    gap:14px;

    padding:20px;

    min-height:112px;

    background:#ffffff;

    border:1px solid #E5EAF3;

    border-radius:12px;

    transition:.3s ease;

}


.dashboard-stat-card:hover {

    transform:translateY(-4px);

    border-color:#C8D6FF;

    box-shadow:
        0 12px 30px rgba(1,33,156,.08);

}


/* Stat Icon */

.stat-icon {
    width:60px;
    height:60px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    font-size:18px;
}


/* Individual icons */
.stat-icon.maintenance {
    color:#1748EB;
    background:#EEF3FF;
}

.stat-icon.water {
    color:#0694C7;
    background:#EAF9FC;
}

.stat-icon.outstanding {
    color:#D97706;
    background:#FFF7E8;
}

.stat-icon.complaints {
    color:#7C3AED;
    background:#F3EDFF;
}

.stat-info span {
    display:block;
    color:#69758B;
    font-size:14px;
    margin-bottom:3px;
}

.stat-info strong {
    display:block;
    color:#01219C;
    font-size:24px;
    line-height:1.2;
}

.stat-info small {
    color:#98A2B3;
    font-size:12px;
}


/* =========================================================
   LOWER DASHBOARD COLUMNS
========================================================= */

.dashboard-columns {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}


.dashboard-panel {
    background:#ffffff;
    border:1px solid #E5EAF3;
    border-radius:14px;
    padding:25px;
}


.panel-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;
    margin-bottom:20px;
}


.panel-header h3 {
    color:#01219C;
    font-size:18px;
    font-weight:600;
    margin-bottom:3px;
}


.panel-header p {
    color:#98A2B3;
    font-size:12px;
}


.panel-header > a {
    display:flex;
    align-items:center;
    gap:5px;
    color:#1748EB;
    font-size:9px;
    font-weight:500;
    white-space:nowrap;
}


.panel-header > a:hover {
    color:#01219C;
}


.panel-header > a i {
    font-size:8px;
}


/* =========================================================
   PAYMENT ROW
========================================================= */

.payment-row {
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 0;
    border-top:1px solid #EEF1F6;
}


.payment-icon {
    width:38px;
    height:38px;
    flex-shrink:0;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:8px;
    background:#EEF3FF;
    color:#1748EB;
    font-size:16px;
}


.payment-info {
    flex:1;
}


.payment-info strong {
    display:block;
    color:#344054;
    font-size:14px;
    font-weight:500;
}


.payment-info span {
    color:#98A2B3;
    font-size:12px;

}


.payment-amount {
    color:#01219C;
    font-size:14px;
    font-weight:600;
}


.payment-status {
    padding:6px 12px;
    border-radius:20px;
    color:#16803C;
    background:#ECFDF3;
    font-size:12px;
    font-weight:500;

}


/* =========================================================
   NOTICE
========================================================= */

.notice-item {
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 0;
    border-top:1px solid #EEF1F6;
}


.notice-icon {
    width:38px;
    height:38px;
    flex-shrink:0;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:8px;
    color:#1748EB;
    background:#EEF3FF;
    font-size:16px;
}


.notice-item strong {
    display:block;
    color:#344054;
    font-size:14px;
    font-weight:500;
}


.notice-item span {
    display:block;
    color:#98A2B3;
    font-size:12px;

}


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

@media(max-width:1100px) {

    .customer-nav-list {

        flex-wrap:wrap;

    }

    .customer-nav-item > a {
        padding:0 15px;
    }

}


@media(max-width:991px) {

    .dashboard-stats {

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

    }


    .dashboard-columns {

        grid-template-columns:1fr;

    }

}


@media(max-width:768px) {

    .customer-dashboard {

        padding:30px 0 60px;

    }


    .customer-nav-list {

        display:grid;

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

    }


    .customer-nav-item > a {

        min-height:52px;

        padding:0 15px;

    }


    .customer-dropdown {

        position:relative;

        top:auto;

        left:auto;

        display:none;

        width:100%;

        box-shadow:none;

        border:none;

        border-top:1px solid #E5EAF3;

        border-radius:0;

        transform:none;

    }


    .has-dropdown:hover > .customer-dropdown {

        display:block;

    }


    .dashboard-welcome {

        flex-direction:column;

        align-items:flex-start;

        padding:28px;

    }


    .welcome-apartment {

        width:100%;

        min-width:0;

    }

}


@media(max-width:520px) {

    .customer-nav-list {

        grid-template-columns:1fr;

    }


    .dashboard-stats {

        grid-template-columns:1fr;

    }


    .dashboard-welcome {

        padding:25px;

    }


    .welcome-content h2 {

        font-size:22px;

    }


    .dashboard-panel {

        padding:18px;

    }

}





/* =====================================================
   PROFILE OVERVIEW
===================================================== */

.profile-overview {

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    padding:30px;
    margin-bottom:25px;
    background:
        linear-gradient(
            135deg,
            #F8FBFF,
            #EEF4FF
        );
    border:1px solid #E1EAF7;
    border-radius:16px;
}


.profile-overview-left {
    display:flex;
    align-items:center;
    gap:25px;
}


.large-profile-avatar {
    position:relative;
    width:140px;
    height:140px;
    flex-shrink:0;
}


.large-profile-avatar img {
    width:140px;
    height:140px;
    object-fit:cover;
    border-radius:50%;
    border:5px solid #ffffff;
    box-shadow:0 10px 30px rgba(2,13,41,.12);
}


.online-status {
    position:absolute;
    right:5px;
    bottom:7px;
    width:17px;
    height:17px;
    border-radius:50%;
    background:#22C55E;
    border:3px solid #ffffff;
}


.profile-summary {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}


.profile-label {
    color:#4477FE;
    font-size:10px;
    font-weight:700;
    letter-spacing:1.2px;
    margin-bottom:5px;
}


.profile-summary h2 {
    color:#01219C;
    font-size:24px;
    font-weight:600;
    margin-bottom:3px;
}


.profile-summary > p {
    color:#667085;
    font-size:13px;
}


.profile-meta {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    margin-top:8px;
}


.profile-meta span {
    display:flex;
    align-items:center;
    gap:7px;
    color:#ffffff;
    font-size:12px;
}


.profile-meta i {
    color:#FFFFFF;
}





/* =====================================================
   PROFILE CARDS
===================================================== */

.profile-card {
    background:#ffffff;
    border:1px solid #E5EAF3;
    border-radius:14px;
    padding:28px;
    margin-bottom:22px;
    box-shadow:
        0 8px 25px rgba(2,13,41,.025);
}


.card-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom:20px;
    margin-bottom:5px;
    border-bottom:1px solid #EEF1F6;
}


.card-tag {
    display:block;
    color:#4477FE;
    font-size:9px;
    font-weight:600;
    letter-spacing:1px;
}


.card-header h2 {
    color:#01219C;
    font-size:17px;
    font-weight:600;
}


.card-header-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width:45px;
    height:45px;
    margin: 0;
    padding: 0;
    line-height: 1;
    transform: translateY(1px);
    font-size:16px;
    background:#EEF4FF;
    color:#01219C;
    border-radius:6px;
}


/* =====================================================
   INFORMATION GRID
===================================================== */

.information-grid {
    display:grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap:0 40px;
}


.information-item {
    display:flex;
    flex-direction:column;
    padding:17px 0;
    border-bottom:1px solid #F0F2F6;
}


.information-item:nth-last-child(-n+2) {
    border-bottom:none;
}


.information-label {
    color:#98A2B3;
    font-size:12px;
    font-weight:500;
    margin-bottom:6px;
    text-transform:uppercase;
    letter-spacing:.4px;
}


.information-item strong {
    color:#344054;
    font-size:14px;
    font-weight:500;
}


.information-item-wide {
    grid-column:1 / -1;
}



/* =====================================================
   SECURITY
===================================================== */

.security-list {
    display:flex;
    flex-direction:column;
}


.security-item {
    display:flex;
    align-items:center;
    gap:15px;
    padding:18px 0px;
    border-bottom:1px solid #F0F2F6;
}


.security-item:last-child {
    border-bottom:none;
    padding-bottom:0;
}


.security-icon {
    width:42px;
    height:42px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#EEF4FF;
    color:#01219C;
    font-size:15px;
}


.security-content {
    flex:1;
}


.security-content h4 {
    color:#344054;
    font-size:14px;
    font-weight:600;
    margin-bottom:3px;
}


.security-content p {
    color:#98A2B3;
    font-size:13px;
    line-height:18px;
}


.verified-badge {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 12px;
    border-radius:8px;
    background:#ECFDF3;
    color:#16A34A;
    font-size:12px;
    font-weight:500;
}



/* =====================================================
   PROFILE NOTE
===================================================== */

.profile-note {
    display:flex;
    align-items:center;
    gap:13px;
    padding:18px 20px;
    margin-top:5px;
    border-radius:10px;
    background:#F8FBFF;
    border:1px solid #E5EEF9;
}


.profile-note > i {
    color:#4477FE;
    font-size:24px;
    margin-top:2px;
}


.profile-note strong {
    display:block;
    color:#344054;
    font-size:14px;
    font-weight:600;
    margin-bottom:3px;
}


.profile-note p {
    color:#98A2B3;
    font-size:12px;
    line-height:18px;
}







/* =====================================================
   MY APARTMENT CONTENT
===================================================== */

.apartment-page {
    padding: 55px 0 100px;
    background: #ffffff;
}


/* =====================================================
   APARTMENT OVERVIEW
===================================================== */

.apartment-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    padding: 30px;
    margin-bottom: 22px;

    background: linear-gradient(
        135deg,
        #F8FBFF,
        #EEF4FF
    );

    border: 1px solid #E1EAF7;
    border-radius: 16px;
}


.apartment-overview-content {
    display: flex;
    align-items: center;
    gap: 22px;
}


.apartment-icon {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#ffffff;
    color: #01219C;
    font-size:27px;
    box-shadow:0 8px 20px rgba(1,33,156,.08);
}

.apartment-summary {
    display: flex;
    flex-direction: column;
}

.apartment-label {
    color:#4477FE;
    font-size:10px;
    font-weight:600;
    letter-spacing:1px;
}

.apartment-summary h2 {
    color: #01219C;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 2px;
}

.apartment-summary > p {
    color: #667085;
    font-size: 12px;
}


.apartment-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 20px;

    margin-top: 12px;
}


.apartment-meta span {
    display: flex;
    align-items: center;

    gap: 6px;

    color: #7A8198;

    font-size: 10px;
}


.apartment-meta i {
    color: #4477FE;
}


/* =====================================================
   STATUS
===================================================== */

.apartment-status {
    display: flex;
    align-items: center;

    gap: 7px;

    padding: 7px 13px;

    border-radius: 30px;

    color: #16803C;
    background: #ECFDF3;

    font-size: 10px;
    font-weight: 600;
}


.status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #22C55E;
}


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

.apartment-card {
    background: #ffffff;

    border: 1px solid #E5EAF3;

    border-radius: 14px;

    padding: 28px;

    margin-bottom: 22px;

    box-shadow:
        0 8px 25px rgba(2,13,41,.025);
}


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

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 18px;
    margin-bottom: 5px;

    border-bottom: 1px solid #EEF1F6;
}


.card-tag {
    display: block;
    color: #4477FE;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
}


.card-header h2 {
    color: #01219C;
    font-size: 18px;
    font-weight: 600;
}


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

.card-header-icon {
    width: 45px;
    height: 45px;

    display: flex;

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

    flex-shrink: 0;

    padding: 0;
    margin: 0;

    border-radius: 6px;

    background: #EEF4FF;
    color: #01219C;

    font-size: 16px;

    line-height: 1;
}


.card-header-icon i {
    display: flex;

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

    width: 16px;
    height: 16px;

    padding: 0;
    margin: 0;

    line-height: 1;
}


/* =====================================================
   INFORMATION GRID
===================================================== */

.information-grid {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    column-gap: 45px;
}


.information-item {
    display: flex;
    flex-direction: column;
    padding: 17px 0;
    border-bottom: 1px solid #F0F2F6;
}


.information-label {
    color: #98A2B3;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 6px;
}


.information-item strong {
    color: #344054;
    font-size: 14px;
    font-weight: 500;
}


/* =====================================================
   ADDRESS
===================================================== */

.address-layout {
    display: flex;

    align-items: center;

    gap: 20px;

    padding-top: 20px;
}


.address-icon {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #EEF4FF;
    color: #01219C;
    font-size: 20px;
}


.address-content {
    flex: 1;
}


.address-content h3 {
    color: #344054;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
}


.address-content p {
    color: #7A8198;
    font-size: 12px;
    line-height: 16px;
}


.address-contact {
    display: flex;

    gap: 20px;

    flex-wrap: wrap;

    margin-top: 9px;
}


.address-contact span {
    display: flex;
    align-items: center;

    gap: 6px;

    color: #667085;

    font-size: 9px;
}


.address-contact i {
    color: #4477FE;
}


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

.apt-btn-outline {
    display: inline-flex;

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

    gap: 8px;

    padding: 10px 16px;

    border: 1px solid #01219C;
    border-radius: 8px;

    background: #ffffff;

    color: #01219C;

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

    white-space: nowrap;

    transition: .3s;
}


.apt-btn-outline:hover {
    background: #01219C;
    color: #ffffff;
}


/* =====================================================
   FACILITIES
===================================================== */

.facility-grid {
    display: grid;

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

    gap: 12px;

    padding-top: 18px;
}


.facility-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid #EEF1F6;
    border-radius: 10px;
    background: #FCFDFF;
}


.facility-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #EEF4FF;
    color: #01219C;
    font-size: 14px;
}


.facility-item strong {
    display: block;
    color: #344054;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 3px;
}


.facility-item span {
    display: block;
    color: #98A2B3;
    font-size: 12px;
}


/* =====================================================
   ASSOCIATION
===================================================== */

.association-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 0 40px;
}


.association-item {
    display: flex;
    flex-direction: column;
    padding: 17px 0;
    border-bottom: 1px solid #F0F2F6;
}


.association-item span {
    color: #98A2B3;
    font-size: 10px;
    text-transform: uppercase;
    margin-bottom: 6px;
}


.association-item strong {
    color: #344054;
    font-size: 14px;
    font-weight: 500;
}


/* =====================================================
   IMPORTANT CONTACTS
===================================================== */

.contact-grid {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 12px;
    padding-top: 18px;
}


.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border: 1px solid #EEF1F6;
    border-radius: 10px;
}


.contact-avatar {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #EEF4FF;
    color: #01219C;
    font-size: 15px;
}


.contact-item span {
    display: block;
    color: #98A2B3;
    font-size: 12px;
    margin-bottom: 2px;
}


.contact-item strong {
    display: block;

    color: #344054;

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

    margin-bottom: 2px;
}


.contact-item small {
    color: #667085;

    font-size: 12px;
}


/* =====================================================
   DOCUMENTS
===================================================== */

.document-list {
    padding-top: 10px;
}


.document-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 0;
    border-bottom: 1px solid #F0F2F6;
}


.document-item:last-child {
    border-bottom: none;
}


.document-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #FFF1F1;
    color: #DC2626;
    font-size: 16px;
}


.document-info {
    flex: 1;
}


.document-info strong {
    display: block;
    color: #344054;
    font-size: 14px;
    font-weight: 500;
}


.document-info span {
    color: #98A2B3;
    font-size: 10px;
}


.document-action {
    width: 35px;
    height: 35px;

    display: flex;

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

    border-radius: 7px;

    background: #EEF4FF;
    color: #01219C;

    font-size: 11px;

    transition: .3s;
}


.document-action:hover {
    background: #01219C;
    color: #ffffff;
}


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

@media (max-width: 991px) {

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

}


@media (max-width: 768px) {

    .container {
        width: 92%;
    }


    .apartment-overview {

        flex-direction: column;

        align-items: flex-start;

    }


    .apartment-status {
        align-self: flex-start;
    }


    .information-grid,
    .association-grid {
        grid-template-columns: 1fr;
    }


    .facility-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }


    .address-layout {
        align-items: flex-start;

        flex-wrap: wrap;
    }


    .address-layout .apt-btn-outline {
        margin-left: 78px;
    }

}


@media (max-width: 480px) {

    .apartment-overview {
        padding: 22px;
    }


    .apartment-overview-content {
        align-items: flex-start;
    }


    .apartment-icon {
        width: 60px;
        height: 60px;

        font-size: 21px;
    }


    .apartment-summary h2 {
        font-size: 20px;
    }


    .apartment-meta {
        flex-direction: column;

        gap: 6px;
    }


    .apartment-card {
        padding: 20px;
    }


    .address-layout .apt-btn-outline {
        margin-left: 0;
    }

}





/* =====================================================
   APTFLOW
   MY FAMILY PAGE
===================================================== */


/* =====================================================
   FAMILY PAGE
===================================================== */

.family-page {

    padding:55px 0 100px;

    background:#ffffff;

}


/* =====================================================
   FAMILY OVERVIEW
===================================================== */

.family-overview {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    padding:30px;

    margin-bottom:22px;

    background:
        linear-gradient(
            135deg,
            #F8FBFF,
            #EEF4FF
        );

    border:1px solid #E1EAF7;

    border-radius:16px;

}


.family-overview-content {

    display:flex;

    align-items:center;

    gap:22px;

}


.family-icon {

    width:78px;
    height:78px;

    flex-shrink:0;

    display:flex;

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

    border-radius:14px;

    background:#ffffff;

    color:#01219C;

    font-size:27px;

    box-shadow:
        0 8px 20px rgba(1,33,156,.08);

}


.family-summary {

    display:flex;

    flex-direction:column;

}


.family-label {

    color:#4477FE;

    font-size:9px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:4px;

}


.family-summary h2 {

    color:#01219C;

    font-size:24px;

    font-weight:600;

    margin-bottom:4px;

}


.family-summary > p {

    color:#667085;

    font-size:12px;

}


.family-meta {

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-top:12px;

}


.family-meta span {

    display:flex;

    align-items:center;

    gap:6px;

    color:#7A8198;

    font-size:10px;

}


.family-meta i {

    color:#4477FE;

}


/* =====================================================
   STATUS
===================================================== */

.family-status {

    display:flex;

    align-items:center;

    gap:7px;

    padding:7px 13px;

    border-radius:30px;

    color:#16803C;

    background:#ECFDF3;

    font-size:10px;

    font-weight:600;

}


.status-dot {

    width:7px;
    height:7px;

    border-radius:50%;

    background:#22C55E;

}


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

.family-card {
    background:#ffffff;
    border:1px solid #E5EAF3;
    border-radius:14px;
    padding:28px;
    margin-bottom:16px;
    box-shadow:0 8px 25px rgba(2,13,41,.025);
}


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

.card-header {

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-bottom:18px;

    margin-bottom:5px;

    border-bottom:1px solid #EEF1F6;

}


.card-tag {

    display:block;

    color:#4477FE;

    font-size:9px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:4px;

}


.card-header h2 {

    color:#01219C;

    font-size:17px;

    font-weight:600;

}


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

.card-header-icon {

    width:45px;
    height:45px;

    display:flex;

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

    flex-shrink:0;

    padding:0;
    margin:0;

    border-radius:6px;

    background:#EEF4FF;

    color:#01219C;

    font-size:16px;

    line-height:1;

}


.card-header-icon i {

    display:flex;

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

    width:16px;
    height:16px;

    padding:0;
    margin:0;

    line-height:1;

}


/* =====================================================
   FAMILY MEMBERS GRID
===================================================== */

.family-members-grid {

    display:grid;

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

    gap:15px;

    padding-top:18px;

}


/* =====================================================
   FAMILY MEMBER CARD
===================================================== */

.family-member-card {

    display:flex;

    align-items:center;

    gap:18px;

    padding:20px;

    background:#FCFDFF;

    border:1px solid #EEF1F6;

    border-radius:12px;

    transition:.3s ease;

}


.family-member-card:hover {

    transform:translateY(-3px);

    border-color:#DCE7FF;

    box-shadow:
        0 12px 25px rgba(2,13,41,.06);

}


/* =====================================================
   MEMBER PHOTO
===================================================== */

.member-photo {

    position:relative;

    width:90px;
    height:90px;

    flex-shrink:0;

}


.member-photo img {

    width:90px;
    height:90px;

    object-fit:cover;

    border-radius:50%;

    border:4px solid #ffffff;

    box-shadow:
        0 7px 18px rgba(2,13,41,.10);

}


.member-status {

    position:absolute;

    right:3px;
    bottom:5px;

    width:15px;
    height:15px;

    border-radius:50%;

    background:#22C55E;

    border:3px solid #ffffff;

}


/* =====================================================
   MEMBER DETAILS
===================================================== */

.member-details {

    flex:1;

    min-width:0;

}


.member-relation {

    display:inline-block;

    padding:5px 10px;

    margin-bottom:7px;

    border-radius:20px;

    background:#EEF4FF;

    color:#1748EB;

    font-size:8px;

    font-weight:600;

}


.member-details h3 {

    color:#020D29;

    font-size:15px;

    font-weight:600;

    margin-bottom:8px;

}


.member-info {

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:13px;

    margin-bottom:7px;

}


.member-info span,
.member-contact span {

    display:flex;

    align-items:center;

    gap:6px;

    color:#667085;

    font-size:9px;

}


.member-info i,
.member-contact i {

    color:#4477FE;

}


.member-contact {

    display:flex;

    flex-direction:column;

    gap:5px;

}


/* =====================================================
   INFORMATION GRID
===================================================== */

.information-grid {

    display:grid;

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

    column-gap:45px;

}


.information-item {

    display:flex;

    flex-direction:column;

    padding:17px 0;

    border-bottom:1px solid #F0F2F6;

}


.information-label {

    color:#98A2B3;

    font-size:12px;

    font-weight:500;

    text-transform:uppercase;

    letter-spacing:.4px;

    margin-bottom:6px;

}


.information-item strong {

    color:#344054;

    font-size:13px;

    font-weight:500;

}


/* =====================================================
   EMERGENCY CONTACT
===================================================== */

.emergency-contact {
    display:flex;
    align-items:center;
    gap:20px;
    padding:30px 0 2px;

}


.emergency-person {

    display:flex;

    align-items:center;

    gap:13px;

    flex:1;

}


.emergency-avatar {

    width:50px;
    height:50px;

    flex-shrink:0;

    display:flex;

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

    border-radius:50%;

    background:#FFF3F3;

    color:#DC2626;

    font-size:17px;

}


.emergency-person span {

    display:block;

    color:#98A2B3;

    font-size:12px;

    text-transform:uppercase;

    margin-bottom:3px;

}


.emergency-person h3 {

    color:#344054;

    font-size:14px;

    font-weight:600;

    margin-bottom:2px;

}


.emergency-person p {

    color:#667085;

    font-size:12px;

}


.emergency-details {

    display:flex;

    flex-direction:column;

    gap:7px;

}


.emergency-details span {

    display:flex;

    align-items:center;

    gap:7px;

    color:#667085;

    font-size:12px;

}


.emergency-details i {

    color:#4477FE;

}


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

.apt-btn-outline {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:10px 18px;

    border:1px solid #01219C;

    border-radius:8px;

    background:#ffffff;

    color:#01219C;

    font-size:11px;

    font-weight:500;

    white-space:nowrap;

    transition:.3s;

}


.apt-btn-outline:hover {

    background:#01219C;

    color:#ffffff;

}


/* =====================================================
   FAMILY NOTE
===================================================== */

.family-note {

    display:flex;

    align-items:flex-start;

    gap:13px;

    padding:18px 20px;

    margin-top:5px;

    border-radius:10px;

    background:#F8FBFF;

    border:1px solid #E5EEF9;

}


.family-note-icon {

    width:35px;
    height:35px;

    flex-shrink:0;

    display:flex;

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

    border-radius:8px;

    background:#EEF4FF;

    color:#4477FE;

    font-size:14px;

}


.family-note strong {

    display:block;

    color:#344054;

    font-size:11px;

    margin-bottom:3px;

}


.family-note p {

    color:#98A2B3;

    font-size:10px;

    line-height:18px;

}


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

@media (max-width:991px) {

    .family-members-grid {

        grid-template-columns:1fr;

    }

}


@media (max-width:768px) {

    .container {

        width:92%;

    }


    .family-overview {

        flex-direction:column;

        align-items:flex-start;

    }


    .family-status {

        align-self:flex-start;

    }


    .information-grid {

        grid-template-columns:1fr;

    }


    .emergency-contact {

        align-items:flex-start;

        flex-direction:column;

    }


    .emergency-person {

        width:100%;

    }


    .emergency-details {

        width:100%;

    }


    .emergency-contact .apt-btn-outline {

        width:100%;

    }

}


@media (max-width:480px) {

    .family-overview {

        padding:22px;

    }


    .family-overview-content {

        align-items:flex-start;

    }


    .family-icon {

        width:60px;
        height:60px;

        font-size:21px;

    }


    .family-summary h2 {

        font-size:20px;

    }


    .family-meta {

        flex-direction:column;

        gap:6px;

    }


    .family-card {
        padding:20px;
    }


    .family-member-card {

        align-items:flex-start;

        flex-direction:column;

    }


    .member-photo {

        width:85px;
        height:85px;

    }


    .member-photo img {

        width:85px;
        height:85px;

    }

}




/* =====================================================
   APTFLOW
   MY VEHICLES PAGE
===================================================== */


/* =====================================================
   VEHICLES PAGE
===================================================== */

.vehicles-page {

    padding:55px 0 100px;

    background:#ffffff;

}


/* =====================================================
   VEHICLE OVERVIEW
===================================================== */

.vehicle-overview {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    padding:30px;

    margin-bottom:22px;

    background:
        linear-gradient(
            135deg,
            #F8FBFF,
            #EEF4FF
        );

    border:1px solid #E1EAF7;

    border-radius:16px;

}


.vehicle-overview-content {

    display:flex;

    align-items:center;

    gap:22px;

}


.vehicle-icon {

    width:78px;
    height:78px;

    flex-shrink:0;

    display:flex;

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

    border-radius:14px;

    background:#ffffff;

    color:#01219C;

    font-size:27px;

    box-shadow:
        0 8px 20px rgba(1,33,156,.08);

}


.vehicle-summary {

    display:flex;

    flex-direction:column;

}


.vehicle-label {

    color:#4477FE;

    font-size:9px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:4px;

}


.vehicle-summary h2 {

    color:#01219C;

    font-size:24px;

    font-weight:600;

    margin-bottom:4px;

}


.vehicle-summary > p {

    color:#667085;

    font-size:12px;

}


.vehicle-meta {

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-top:12px;

}


.vehicle-meta span {

    display:flex;

    align-items:center;

    gap:6px;

    color:#7A8198;

    font-size:10px;

}


.vehicle-meta i {

    color:#4477FE;

}


/* =====================================================
   STATUS
===================================================== */

.vehicle-status {

    display:flex;

    align-items:center;

    gap:7px;

    padding:7px 13px;

    border-radius:30px;

    color:#16803C;

    background:#ECFDF3;

    font-size:10px;

    font-weight:600;

}


.status-dot {

    width:7px;
    height:7px;

    border-radius:50%;

    background:#22C55E;

}


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

.vehicle-card {

    background:#ffffff;

    border:1px solid #E5EAF3;

    border-radius:14px;

    padding:28px;

    margin-bottom:22px;

    box-shadow:
        0 8px 25px rgba(2,13,41,.025);

}


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

.card-header {

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-bottom:18px;

    margin-bottom:5px;

    border-bottom:1px solid #EEF1F6;

}


.card-tag {

    display:block;

    color:#4477FE;

    font-size:9px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:4px;

}


.card-header h2 {

    color:#01219C;

    font-size:17px;

    font-weight:600;

}


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

.card-header-icon {

    width:45px;
    height:45px;

    display:flex;

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

    flex-shrink:0;

    padding:0;
    margin:0;

    border-radius:6px;

    background:#EEF4FF;

    color:#01219C;

    font-size:16px;

    line-height:1;

}


.card-header-icon i {

    display:flex;

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

    width:16px;
    height:16px;

    padding:0;
    margin:0;

    line-height:1;

}


/* =====================================================
   REGISTERED VEHICLES
===================================================== */

.vehicle-list {

    display:flex;

    flex-direction:column;

    gap:12px;

    padding-top:18px;

}


.registered-vehicle {

    display:flex;

    align-items:center;

    gap:20px;

    padding:20px;

    border:1px solid #EEF1F6;

    border-radius:12px;

    background:#FCFDFF;

    transition:.3s ease;

}


.registered-vehicle:hover {

    border-color:#DCE7FF;

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

    transform:translateY(-2px);

}


/* =====================================================
   VEHICLE IMAGE / ICON
===================================================== */

.vehicle-image {

    width:75px;
    height:75px;

    flex-shrink:0;

    display:flex;

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

    border-radius:12px;

    background:#EEF4FF;

    color:#01219C;

    font-size:28px;

}


.vehicle-image.two-wheeler {

    background:#F3F0FF;

    color:#5B35C9;

}


/* =====================================================
   VEHICLE DETAILS
===================================================== */

.vehicle-details {

    flex:1;

    min-width:0;

}


.vehicle-title-row {

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:15px;

}


.vehicle-type {

    display:inline-block;

    color:#4477FE;

    font-size:8px;

    font-weight:700;

    letter-spacing:.8px;

    margin-bottom:3px;

}


.vehicle-title-row h3 {

    color:#020D29;

    font-size:16px;

    font-weight:600;

}


.vehicle-active {

    display:flex;

    align-items:center;

    gap:5px;

    padding:5px 9px;

    border-radius:20px;

    background:#ECFDF3;

    color:#16803C;

    font-size:8px;

    font-weight:600;

}


.vehicle-active span {

    width:6px;
    height:6px;

    border-radius:50%;

    background:#22C55E;

}


.vehicle-number {

    display:flex;

    align-items:center;

    gap:7px;

    margin-top:8px;

    color:#344054;

    font-size:11px;

    font-weight:500;

}


.vehicle-number i {

    color:#4477FE;

}


.vehicle-information {

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

    margin-top:10px;

}


.vehicle-information span {

    display:flex;

    align-items:center;

    gap:5px;

    color:#7A8198;

    font-size:9px;

}


.vehicle-information strong {

    color:#98A2B3;

    font-size:8px;

    font-weight:500;

}


/* =====================================================
   VEHICLE ACTION
===================================================== */

.vehicle-action {

    flex-shrink:0;

}


.vehicle-view-btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    padding:9px 14px;

    border:1px solid #01219C;

    border-radius:7px;

    color:#01219C;

    background:#ffffff;

    font-size:10px;

    font-weight:500;

    white-space:nowrap;

    transition:.3s;

}


.vehicle-view-btn:hover {

    background:#01219C;

    color:#ffffff;

}


/* =====================================================
   INFORMATION GRID
===================================================== */

.information-grid {

    display:grid;

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

    column-gap:45px;

}


.information-item {

    display:flex;

    flex-direction:column;

    padding:17px 0;

    border-bottom:1px solid #F0F2F6;

}


.information-label {
    color:#98A2B3;
    font-size:12px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:.4px;
    margin-bottom:6px;
}


.information-item strong {
    color:#344054;
    font-size:14px;
    font-weight:500;
}


/* =====================================================
   PARKING
===================================================== */

.parking-grid {

    display:grid;

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

    gap:12px;

    padding-top:18px;

}


.parking-item {

    display:flex;

    align-items:center;

    gap:13px;

    padding:17px;

    border:1px solid #EEF1F6;

    border-radius:10px;

    background:#FCFDFF;

}


.parking-icon {

    width:43px;
    height:43px;

    flex-shrink:0;

    display:flex;

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

    border-radius:9px;

    background:#EEF4FF;

    color:#01219C;

    font-size:15px;

}


.parking-details {

    flex:1;

}


.parking-details span {

    display:block;

    color:#98A2B3;

    font-size:8px;

    margin-bottom:2px;

}


.parking-details strong {

    display:block;

    color:#344054;

    font-size:11px;

    font-weight:600;

    margin-bottom:2px;

}


.parking-details small {

    color:#667085;

    font-size:8px;

}


.parking-status {

    padding:5px 9px;

    border-radius:20px;

    background:#ECFDF3;

    color:#16803C;

    font-size:8px;

    font-weight:600;

}


/* =====================================================
   DOCUMENTS
===================================================== */

.document-list {

    padding-top:10px;

}


.document-item {

    display:flex;

    align-items:center;

    gap:13px;

    padding:14px 0;

    border-bottom:1px solid #F0F2F6;

}


.document-item:last-child {

    border-bottom:none;

}


.document-icon {

    width:42px;
    height:42px;

    flex-shrink:0;

    display:flex;

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

    border-radius:9px;

    background:#FFF1F1;

    color:#DC2626;

    font-size:16px;

}


.document-info {

    flex:1;

}


.document-info strong {

    display:block;

    color:#344054;

    font-size:11px;

    font-weight:600;

    margin-bottom:3px;

}


.document-info span {

    color:#98A2B3;

    font-size:8px;

}


.document-status {

    padding:5px 9px;

    border-radius:20px;

    background:#ECFDF3;

    color:#16803C;

    font-size:8px;

    font-weight:600;

}


.document-action {

    width:35px;
    height:35px;

    display:flex;

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

    border-radius:7px;

    background:#EEF4FF;

    color:#01219C;

    font-size:11px;

    transition:.3s;

}


.document-action:hover {

    background:#01219C;

    color:#ffffff;

}


/* =====================================================
   SECURITY
===================================================== */

.security-grid {

    display:grid;

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

    gap:12px;

    padding-top:18px;

}


.security-item {

    display:flex;

    align-items:center;

    gap:13px;

    padding:18px;

    border:1px solid #EEF1F6;

    border-radius:10px;

    background:#FCFDFF;

}


.security-icon {

    width:45px;
    height:45px;

    flex-shrink:0;

    display:flex;

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

    border-radius:9px;

    background:#EEF4FF;

    color:#01219C;

    font-size:16px;

}


.security-content {

    flex:1;

}


.security-content span {

    display:block;

    color:#98A2B3;

    font-size:8px;

    margin-bottom:3px;

}


.security-content strong {

    display:block;

    color:#344054;

    font-size:12px;

    font-weight:600;

    margin-bottom:3px;

}


.security-content small {

    display:block;

    color:#667085;

    font-size:8px;

}


/* =====================================================
   INFORMATION NOTE
===================================================== */

.vehicle-note {

    display:flex;

    align-items:flex-start;

    gap:13px;

    padding:18px 20px;

    margin-top:5px;

    border-radius:10px;

    background:#F8FBFF;

    border:1px solid #E5EEF9;

}


.vehicle-note-icon {

    width:35px;
    height:35px;

    flex-shrink:0;

    display:flex;

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

    border-radius:8px;

    background:#EEF4FF;

    color:#4477FE;

    font-size:14px;

}


.vehicle-note strong {

    display:block;

    color:#344054;

    font-size:11px;

    margin-bottom:3px;

}


.vehicle-note p {

    color:#98A2B3;

    font-size:10px;

    line-height:18px;

}


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

@media (max-width:991px) {

    .parking-grid,
    .security-grid {

        grid-template-columns:1fr;

    }

}


@media (max-width:768px) {

    .container {

        width:92%;

    }


    .vehicle-overview {

        flex-direction:column;

        align-items:flex-start;

    }


    .vehicle-status {

        align-self:flex-start;

    }


    .registered-vehicle {

        align-items:flex-start;

        flex-wrap:wrap;

    }


    .vehicle-details {

        min-width:calc(100% - 100px);

    }


    .vehicle-action {

        width:100%;

        margin-left:95px;

    }


    .vehicle-view-btn {

        width:100%;

    }


    .information-grid {

        grid-template-columns:1fr;

    }


    .parking-grid,
    .security-grid {

        grid-template-columns:1fr;

    }

}


@media (max-width:480px) {

    .vehicle-overview {

        padding:22px;

    }


    .vehicle-overview-content {

        align-items:flex-start;

    }


    .vehicle-icon {

        width:60px;
        height:60px;

        font-size:21px;

    }


    .vehicle-summary h2 {

        font-size:20px;

    }


    .vehicle-meta {

        flex-direction:column;

        gap:6px;

    }


    .vehicle-card {

        padding:20px;

    }


    .registered-vehicle {

        flex-direction:column;

    }


    .vehicle-image {

        width:65px;
        height:65px;

    }


    .vehicle-details {

        width:100%;

    }


    .vehicle-action {

        width:100%;

        margin-left:0;

    }


    .vehicle-title-row {

        flex-direction:column;

    }


    .vehicle-information {

        flex-direction:column;

        align-items:flex-start;

        gap:6px;

    }


    .document-status {

        display:none;

    }

}





/* =====================================================
   APTFLOW
   MAINTENANCE PAGE
===================================================== */


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

.maintenance-page {

    padding:55px 0 100px;

    background:#ffffff;

}


/* =====================================================
   OVERVIEW
===================================================== */

.maintenance-overview {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    padding:30px;

    margin-bottom:22px;

    background:
        linear-gradient(
            135deg,
            #F8FBFF,
            #EEF4FF
        );

    border:1px solid #E1EAF7;

    border-radius:16px;

}


.maintenance-overview-content {

    display:flex;

    align-items:center;

    gap:22px;

}


.maintenance-icon {

    width:78px;
    height:78px;

    flex-shrink:0;

    display:flex;

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

    border-radius:14px;

    background:#ffffff;

    color:#01219C;

    font-size:27px;

    box-shadow:
        0 8px 20px rgba(1,33,156,.08);

}


.maintenance-summary {

    display:flex;

    flex-direction:column;

}


.maintenance-label {

    color:#4477FE;

    font-size:9px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:4px;

}


.maintenance-summary h2 {

    color:#01219C;

    font-size:24px;

    font-weight:600;

    margin-bottom:4px;

}


.maintenance-summary > p {

    color:#667085;

    font-size:12px;

}


.maintenance-meta {

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-top:12px;

}


.maintenance-meta span {

    display:flex;

    align-items:center;

    gap:6px;

    color:#7A8198;

    font-size:10px;

}


.maintenance-meta i {

    color:#4477FE;

}


/* =====================================================
   ACTIONS
===================================================== */

.maintenance-actions {

    display:flex;

    align-items:center;

    gap:9px;

}


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

.maintenance-btn {

    height:38px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    padding:0 15px;

    border-radius:7px;

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

    font-size:10px;

    font-weight:500;

    cursor:pointer;

    transition:.3s;

}


.maintenance-btn.primary {

    border:1px solid #01219C;

    background:#01219C;

    color:#ffffff;

}


.maintenance-btn.primary:hover {

    background:#00176F;

}


.maintenance-btn.outline {

    border:1px solid #01219C;

    background:#ffffff;

    color:#01219C;

}


.maintenance-btn.outline:hover {

    background:#EEF4FF;

}


/* =====================================================
   STATS
===================================================== */

.maintenance-stats {

    display:grid;

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

    gap:14px;

    margin-bottom:22px;

}


.maintenance-stat-card {

    display:flex;

    align-items:center;

    gap:13px;

    padding:20px;

    border:1px solid #E5EAF3;

    border-radius:12px;

    background:#ffffff;

}


.stat-icon {

    width:43px;
    height:43px;

    flex-shrink:0;

    display:flex;

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

    border-radius:9px;

    font-size:14px;

}


.stat-icon.blue {

    background:#EEF4FF;
    color:#01219C;

}


.stat-icon.green {

    background:#ECFDF3;
    color:#16803C;

}


.stat-icon.orange {

    background:#FFF7E8;
    color:#D97706;

}


.stat-icon.purple {

    background:#F4F0FF;
    color:#6D4AFF;

}


.maintenance-stat-card span {

    display:block;

    color:#98A2B3;

    font-size:8px;

    font-weight:600;

    letter-spacing:.4px;

    margin-bottom:3px;

}


.maintenance-stat-card strong {

    display:block;

    color:#344054;

    font-size:17px;

    font-weight:600;

}


.maintenance-stat-card small {

    color:#98A2B3;

    font-size:8px;

}


/* =====================================================
   TOOLBAR
===================================================== */

.maintenance-toolbar {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    padding:10px;

    margin-bottom:15px;

    border:1px solid #E5EAF3;

    border-radius:10px;

    background:#ffffff;

}


.maintenance-tabs {

    display:flex;

    gap:4px;

}


.maintenance-tab {

    padding:9px 15px;

    border:0;

    border-radius:7px;

    background:transparent;

    color:#667085;

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

    font-size:10px;

    cursor:pointer;

    transition:.3s;

}


.maintenance-tab:hover {

    background:#F5F8FF;

    color:#01219C;

}


.maintenance-tab.active {

    background:#EEF4FF;

    color:#01219C;

    font-weight:600;

}


.maintenance-filters {

    display:flex;

    align-items:center;

    gap:7px;

}


.maintenance-filters select {

    height:35px;

    padding:0 10px;

    border:1px solid #E1E6EF;

    border-radius:6px;

    background:#ffffff;

    color:#667085;

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

    font-size:9px;

    outline:none;

}


.filter-button {

    width:35px;
    height:35px;

    border:1px solid #E1E6EF;

    border-radius:6px;

    background:#ffffff;

    color:#01219C;

    cursor:pointer;

}


/* =====================================================
   CONTENT
===================================================== */

.maintenance-content {

    display:none;

}


.maintenance-content.active {

    display:block;

}


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

.maintenance-card {

    background:#ffffff;

    border:1px solid #E5EAF3;

    border-radius:14px;

    padding:28px;

    margin-bottom:22px;

    box-shadow:
        0 8px 25px rgba(2,13,41,.025);

}


.card-header {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding-bottom:18px;

    margin-bottom:5px;

    border-bottom:1px solid #EEF1F6;

}


.card-tag {

    display:block;

    color:#4477FE;

    font-size:9px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:4px;

}


.card-header h2 {

    color:#01219C;

    font-size:17px;

    font-weight:600;

}


.card-header-icon {

    width:45px;
    height:45px;

    display:flex;

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

    border-radius:6px;

    background:#EEF4FF;

    color:#01219C;

    font-size:16px;

}


.card-header-actions {

    display:flex;

    align-items:center;

    gap:7px;

}


.card-action {

    height:34px;

    display:flex;

    align-items:center;

    gap:6px;

    padding:0 10px;

    border:1px solid #E1E6EF;

    border-radius:6px;

    background:#ffffff;

    color:#667085;

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

    font-size:9px;

    cursor:pointer;

}


.card-action:hover {

    color:#01219C;

    background:#EEF4FF;

}


/* =====================================================
   TABLE
===================================================== */

.maintenance-table-wrapper {

    width:100%;

    overflow-x:auto;

    padding-top:15px;

}


.maintenance-table {

    width:100%;

    border-collapse:collapse;

    min-width:900px;

}


.maintenance-table th {

    padding:13px 12px;

    background:#F8FAFD;

    color:#667085;

    border-bottom:1px solid #E8ECF3;

    text-align:left;

    font-size:9px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.3px;

}


.maintenance-table td {

    padding:15px 12px;

    border-bottom:1px solid #F0F2F6;

    color:#667085;

    font-size:10px;

    vertical-align:middle;

}


.maintenance-table tbody tr:hover {

    background:#FCFDFF;

}


.maintenance-table td strong {

    display:block;

    color:#344054;

    font-size:11px;

    font-weight:600;

}


.maintenance-table td small {

    display:block;

    color:#98A2B3;

    font-size:8px;

    margin-top:2px;

}


.maintenance-table .amount {

    color:#344054;

    font-weight:600;

}


/* =====================================================
   STATUS
===================================================== */

.status {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:5px 9px;

    border-radius:20px;

    font-size:8px;

    font-weight:600;

}


.status.paid {

    color:#16803C;

    background:#ECFDF3;

}


.status.pending {

    color:#B45309;

    background:#FFF7E8;

}


.status.overdue {

    color:#DC2626;

    background:#FFF1F1;

}


/* =====================================================
   TABLE ACTIONS
===================================================== */

.table-actions {

    display:flex;

    align-items:center;

    gap:5px;

}


.table-actions button {

    width:30px;
    height:30px;

    display:flex;

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

    border:1px solid #E5EAF3;

    border-radius:6px;

    background:#ffffff;

    color:#667085;

    cursor:pointer;

    transition:.25s;

}


.table-actions button:hover {

    background:#EEF4FF;

    color:#01219C;

    border-color:#D7E2FF;

}


.receipt-button {

    display:inline-flex;

    align-items:center;

    gap:5px;

    padding:6px 9px;

    border:1px solid #DCE5F8;

    border-radius:6px;

    background:#F8FAFF;

    color:#01219C;

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

    font-size:8px;

    cursor:pointer;

}


/* =====================================================
   NOTE
===================================================== */

.maintenance-note {

    display:flex;

    align-items:flex-start;

    gap:13px;

    padding:18px 20px;

    margin-top:5px;

    border-radius:10px;

    background:#F8FBFF;

    border:1px solid #E5EEF9;

}


.maintenance-note-icon {

    width:35px;
    height:35px;

    flex-shrink:0;

    display:flex;

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

    border-radius:8px;

    background:#EEF4FF;

    color:#4477FE;

    font-size:14px;

}


.maintenance-note strong {

    display:block;

    color:#344054;

    font-size:11px;

    margin-bottom:3px;

}


.maintenance-note p {

    color:#98A2B3;

    font-size:10px;

    line-height:18px;

}


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

.maintenance-modal {

    position:fixed;

    inset:0;

    z-index:99999;

    display:none;

    align-items:center;

    justify-content:center;

    padding:20px;

}


.maintenance-modal.show {

    display:flex;

}


.modal-overlay {

    position:absolute;

    inset:0;

    background:rgba(2,13,41,.55);

    backdrop-filter:blur(3px);

}


.modal-box {

    position:relative;

    z-index:2;

    width:100%;

    max-width:560px;

    max-height:90vh;

    overflow-y:auto;

    padding:28px;

    border-radius:14px;

    background:#ffffff;

    box-shadow:
        0 25px 70px rgba(0,0,0,.20);

}


.modal-header {

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:20px;

    padding-bottom:18px;

    margin-bottom:20px;

    border-bottom:1px solid #EEF1F6;

}


.modal-header h2 {

    color:#01219C;

    font-size:19px;

    font-weight:600;

}


.modal-close {

    width:32px;
    height:32px;

    display:flex;

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

    border:0;

    border-radius:6px;

    background:#F5F7FA;

    color:#667085;

    cursor:pointer;

}


.modal-close:hover {

    background:#EEF4FF;

    color:#01219C;

}




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

.modal-actions {

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:8px;

    padding-top:5px;

}


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

@media(max-width:1100px) {

    .maintenance-stats {

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

    }

}


@media(max-width:900px) {

    .maintenance-overview {

        flex-direction:column;

        align-items:flex-start;

    }


    .maintenance-actions {

        width:100%;

    }

}


@media(max-width:768px) {

    .container {

        width:92%;

    }


    .maintenance-stats {

        grid-template-columns:1fr;

    }


    .maintenance-toolbar {

        align-items:flex-start;

        flex-direction:column;

    }


    .maintenance-tabs {

        width:100%;

        overflow-x:auto;

    }


    .maintenance-filters {

        width:100%;

    }


    .maintenance-filters select {

        flex:1;

    }


    .card-header {

        align-items:flex-start;

        flex-direction:column;

    }


    .card-header-actions {

        width:100%;

    }


    .card-action {

        flex:1;

        justify-content:center;

    }


    .form-row {

        grid-template-columns:1fr;

        gap:0;

    }

}


@media(max-width:480px) {

    .maintenance-overview {

        padding:22px;

    }


    .maintenance-overview-content {

        align-items:flex-start;

    }


    .maintenance-icon {

        width:60px;
        height:60px;

        font-size:21px;

    }


    .maintenance-summary h2 {

        font-size:20px;

    }


    .maintenance-meta {

        flex-direction:column;

        gap:6px;

    }


    .maintenance-actions {

        flex-direction:column;

    }


    .maintenance-actions .maintenance-btn {

        width:100%;

    }


    .maintenance-card {

        padding:20px;

    }


    .modal-box {

        padding:20px;

    }

}





/* =====================================================
   APTFLOW
   WATER BILL PAGE
===================================================== */

.water-page {
    padding:55px 0 100px;
    background:#ffffff;
}


/* =====================================================
   OVERVIEW
===================================================== */

.water-overview {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding:30px;
    margin-bottom:22px;

    background:linear-gradient(
        135deg,
        #F8FBFF,
        #EEF9FF
    );

    border:1px solid #DDECF6;
    border-radius:16px;
}


.water-overview-content {
    display:flex;
    align-items:center;
    gap:22px;
}


.water-icon {
    width:78px;
    height:78px;

    flex-shrink:0;

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

    border-radius:14px;

    background:#ffffff;
    color:#087EA4;

    font-size:27px;

    box-shadow:
        0 8px 20px rgba(8,126,164,.08);
}


.water-summary {
    display:flex;
    flex-direction:column;
}


.water-label {
    color:#087EA4;
    font-size:9px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:4px;
}


.water-summary h2 {
    color:#01219C;
    font-size:24px;
    font-weight:600;
    margin-bottom:4px;
}


.water-summary > p {
    color:#667085;
    font-size:12px;
}


.water-meta {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    margin-top:12px;
}


.water-meta span {
    display:flex;
    align-items:center;
    gap:6px;

    color:#7A8198;
    font-size:10px;
}


.water-meta i {
    color:#087EA4;
}


/* =====================================================
   ACTIONS
===================================================== */

.water-actions {
    display:flex;
    align-items:center;
    gap:9px;
}


.water-btn {
    height:38px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    padding:0 15px;

    border-radius:7px;

    font-family:'Poppins',sans-serif;
    font-size:10px;
    font-weight:500;

    cursor:pointer;

    transition:.3s;
}


.water-btn.primary {
    border:1px solid #087EA4;
    background:#087EA4;
    color:#ffffff;
}


.water-btn.primary:hover {
    background:#05647F;
}


.water-btn.outline {
    border:1px solid #087EA4;
    background:#ffffff;
    color:#087EA4;
}


.water-btn.outline:hover {
    background:#EFFAFF;
}


/* =====================================================
   STATS
===================================================== */

.water-stats {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    margin-bottom:22px;
}


.water-stat-card {
    display:flex;
    align-items:center;
    gap:13px;

    padding:20px;

    border:1px solid #E5EAF3;
    border-radius:12px;

    background:#ffffff;
}


.water-stat-icon {
    width:43px;
    height:43px;

    flex-shrink:0;

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

    border-radius:9px;

    font-size:14px;
}


.water-stat-icon.blue {
    background:#EEF4FF;
    color:#01219C;
}


.water-stat-icon.green {
    background:#ECFDF3;
    color:#16803C;
}


.water-stat-icon.orange {
    background:#FFF7E8;
    color:#D97706;
}


.water-stat-icon.cyan {
    background:#EAFBFF;
    color:#087EA4;
}


.water-stat-card span {
    display:block;

    color:#98A2B3;

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

    letter-spacing:.4px;

    margin-bottom:3px;
}


.water-stat-card strong {
    display:block;

    color:#344054;

    font-size:17px;
    font-weight:600;
}


.water-stat-card small {
    color:#98A2B3;
    font-size:8px;
}


/* =====================================================
   TOOLBAR
===================================================== */

.water-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;

    padding:10px;
    margin-bottom:15px;

    border:1px solid #E5EAF3;
    border-radius:10px;

    background:#ffffff;
}


.water-tabs {
    display:flex;
    gap:4px;
}


.water-tab {
    padding:9px 15px;

    border:0;
    border-radius:7px;

    background:transparent;
    color:#667085;

    font-family:'Poppins',sans-serif;
    font-size:10px;

    cursor:pointer;

    transition:.3s;
}


.water-tab:hover {
    background:#F5FBFD;
    color:#087EA4;
}


.water-tab.active {
    background:#EAFBFF;
    color:#087EA4;
    font-weight:600;
}


.water-filters {
    display:flex;
    align-items:center;
    gap:7px;
}


.water-filters select {
    height:35px;

    padding:0 10px;

    border:1px solid #E1E6EF;
    border-radius:6px;

    background:#ffffff;
    color:#667085;

    font-family:'Poppins',sans-serif;
    font-size:9px;

    outline:none;
}


.water-filter-button {
    width:35px;
    height:35px;

    border:1px solid #E1E6EF;
    border-radius:6px;

    background:#ffffff;
    color:#087EA4;

    cursor:pointer;
}


/* =====================================================
   CONTENT
===================================================== */

.water-content {
    display:none;
}


.water-content.active {
    display:block;
}


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

.water-card {
    background:#ffffff;

    border:1px solid #E5EAF3;
    border-radius:14px;

    padding:28px;
    margin-bottom:22px;

    box-shadow:
        0 8px 25px rgba(2,13,41,.025);
}


.card-header {
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    padding-bottom:18px;
    margin-bottom:5px;

    border-bottom:1px solid #EEF1F6;
}


.card-tag {
    display:block;

    color:#087EA4;

    font-size:9px;
    font-weight:700;

    letter-spacing:1px;

    margin-bottom:4px;
}


.card-header h2 {
    color:#01219C;

    font-size:17px;
    font-weight:600;
}


.card-header-icon {
    width:45px;
    height:45px;

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

    border-radius:6px;

    background:#EAFBFF;
    color:#087EA4;

    font-size:16px;
}


.card-header-actions {
    display:flex;
    align-items:center;
    gap:7px;
}


.card-action {
    height:34px;

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

    padding:0 10px;

    border:1px solid #E1E6EF;
    border-radius:6px;

    background:#ffffff;
    color:#667085;

    font-family:'Poppins',sans-serif;
    font-size:9px;

    cursor:pointer;
}


.card-action:hover {
    color:#087EA4;
    background:#EAFBFF;
}


/* =====================================================
   TABLE
===================================================== */

.water-table-wrapper {
    width:100%;
    overflow-x:auto;
    padding-top:15px;
}


.water-table {
    width:100%;
    min-width:1100px;

    border-collapse:collapse;
}


.water-table th {
    padding:13px 12px;

    background:#F8FAFD;

    color:#667085;

    border-bottom:1px solid #E8ECF3;

    text-align:left;

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

    text-transform:uppercase;
    letter-spacing:.3px;
}


.water-table td {
    padding:15px 12px;

    border-bottom:1px solid #F0F2F6;

    color:#667085;

    font-size:10px;

    vertical-align:middle;
}


.water-table tbody tr:hover {
    background:#FCFDFF;
}


.water-table td strong {
    display:block;

    color:#344054;

    font-size:11px;
    font-weight:600;
}


.water-table td small {
    display:block;

    color:#98A2B3;

    font-size:8px;

    margin-top:2px;
}


.water-table .amount {
    color:#344054;
    font-weight:600;
}


.water-table .consumption {
    color:#087EA4;
    font-weight:600;
}


/* =====================================================
   STATUS
===================================================== */

.status {
    display:inline-flex;

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

    padding:5px 9px;

    border-radius:20px;

    font-size:8px;
    font-weight:600;
}


.status.paid {
    color:#16803C;
    background:#ECFDF3;
}


.status.pending {
    color:#B45309;
    background:#FFF7E8;
}


.status.overdue {
    color:#DC2626;
    background:#FFF1F1;
}


/* =====================================================
   TABLE ACTIONS
===================================================== */

.table-actions {
    display:flex;
    align-items:center;
    gap:5px;
}


.table-actions button {
    width:30px;
    height:30px;

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

    border:1px solid #E5EAF3;
    border-radius:6px;

    background:#ffffff;
    color:#667085;

    cursor:pointer;

    transition:.25s;
}


.table-actions button:hover {
    background:#EAFBFF;
    color:#087EA4;
    border-color:#CFEAF3;
}


.receipt-button {
    display:inline-flex;
    align-items:center;
    gap:5px;

    padding:6px 9px;

    border:1px solid #D7EAF1;
    border-radius:6px;

    background:#F7FCFE;
    color:#087EA4;

    font-family:'Poppins',sans-serif;
    font-size:8px;

    cursor:pointer;
}


/* =====================================================
   ADJUSTMENTS
===================================================== */

.adjustment-credit {
    display:inline-flex;

    padding:5px 9px;

    border-radius:20px;

    background:#ECFDF3;
    color:#16803C;

    font-size:8px;
    font-weight:600;
}


.adjustment-debit {
    display:inline-flex;

    padding:5px 9px;

    border-radius:20px;

    background:#FFF1F1;
    color:#DC2626;

    font-size:8px;
    font-weight:600;
}


/* =====================================================
   NOTE
===================================================== */

.water-note {
    display:flex;
    align-items:flex-start;
    gap:13px;

    padding:18px 20px;
    margin-top:5px;

    border-radius:10px;

    background:#F8FBFF;
    border:1px solid #E5EEF9;
}


.water-note-icon {
    width:35px;
    height:35px;

    flex-shrink:0;

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

    border-radius:8px;

    background:#EAFBFF;
    color:#087EA4;

    font-size:14px;
}


.water-note strong {
    display:block;

    color:#344054;

    font-size:11px;

    margin-bottom:3px;
}


.water-note p {
    color:#98A2B3;

    font-size:10px;

    line-height:18px;
}


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

.water-modal {
    position:fixed;

    inset:0;

    z-index:99999;

    display:none;

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

    padding:20px;
}


.water-modal.show {
    display:flex;
}


.water-modal-overlay {
    position:absolute;

    inset:0;

    background:rgba(2,13,41,.55);

    backdrop-filter:blur(3px);
}


.water-modal-box {
    position:relative;

    z-index:2;

    width:100%;
    max-width:560px;

    max-height:90vh;

    overflow-y:auto;

    padding:28px;

    border-radius:14px;

    background:#ffffff;

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


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

.modal-header {
    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:20px;

    padding-bottom:18px;
    margin-bottom:20px;

    border-bottom:1px solid #EEF1F6;
}


.modal-header h2 {
    color:#01219C;

    font-size:19px;
    font-weight:600;
}


.modal-close {
    width:32px;
    height:32px;

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

    border:0;

    border-radius:6px;

    background:#F5F7FA;
    color:#667085;

    cursor:pointer;
}


.modal-close:hover {
    background:#EAFBFF;
    color:#087EA4;
}



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

.modal-actions {
    display:flex;

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

    gap:8px;

    padding-top:5px;
}


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

@media(max-width:1100px) {

    .water-stats {
        grid-template-columns:
            repeat(2,1fr);
    }

}


@media(max-width:900px) {

    .water-overview {
        flex-direction:column;
        align-items:flex-start;
    }

    .water-actions {
        width:100%;
    }

}


@media(max-width:768px) {

    .container {
        width:92%;
    }

    .water-stats {
        grid-template-columns:1fr;
    }

    .water-toolbar {
        align-items:flex-start;
        flex-direction:column;
    }

    .water-tabs {
        width:100%;
        overflow-x:auto;
    }

    .water-filters {
        width:100%;
    }

    .water-filters select {
        flex:1;
    }

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

    .card-header-actions {
        width:100%;
    }

    .card-action {
        flex:1;
        justify-content:center;
    }

    .form-row {
        grid-template-columns:1fr;
        gap:0;
    }

}


@media(max-width:480px) {

    .water-overview {
        padding:22px;
    }

    .water-overview-content {
        align-items:flex-start;
    }

    .water-icon {
        width:60px;
        height:60px;
        font-size:21px;
    }

    .water-summary h2 {
        font-size:20px;
    }

    .water-meta {
        flex-direction:column;
        gap:6px;
    }

    .water-actions {
        flex-direction:column;
    }

    .water-actions .water-btn {
        width:100%;
    }

    .water-card {
        padding:20px;
    }

    .water-modal-box {
        padding:20px;
    }

}






/* =====================================================
   APTFLOW
   OTHER CHARGES PAGE
===================================================== */

.charges-page {
    padding:55px 0 100px;
    background:#ffffff;
}


/* =====================================================
   OVERVIEW
===================================================== */

.charges-overview {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;

    padding:30px;
    margin-bottom:22px;

    background:linear-gradient(
        135deg,
        #F8FBFF,
        #EEF4FF
    );

    border:1px solid #E1EAF7;
    border-radius:16px;
}


.charges-overview-content {
    display:flex;
    align-items:center;
    gap:22px;
}


.charges-icon {
    width:78px;
    height:78px;

    flex-shrink:0;

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

    border-radius:14px;

    background:#ffffff;
    color:#01219C;

    font-size:27px;

    box-shadow:
        0 8px 20px rgba(1,33,156,.08);
}


.charges-summary {
    display:flex;
    flex-direction:column;
}


.charges-label {
    color:#4477FE;

    font-size:9px;
    font-weight:700;

    letter-spacing:1px;

    margin-bottom:4px;
}


.charges-summary h2 {
    color:#01219C;

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

    margin-bottom:4px;
}


.charges-summary > p {
    color:#667085;
    font-size:12px;
}


.charges-meta {
    display:flex;
    flex-wrap:wrap;
    gap:20px;

    margin-top:12px;
}


.charges-meta span {
    display:flex;
    align-items:center;
    gap:6px;

    color:#7A8198;
    font-size:10px;
}


.charges-meta i {
    color:#4477FE;
}


/* =====================================================
   ACTIONS
===================================================== */

.charges-actions {
    display:flex;
    align-items:center;
    gap:9px;
}


.charges-btn {
    height:38px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    padding:0 15px;

    border-radius:7px;

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

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

    cursor:pointer;

    transition:.3s;
}


.charges-btn.primary {
    border:1px solid #01219C;

    background:#01219C;
    color:#ffffff;
}


.charges-btn.primary:hover {
    background:#00176F;
}


.charges-btn.outline {
    border:1px solid #01219C;

    background:#ffffff;
    color:#01219C;
}


.charges-btn.outline:hover {
    background:#EEF4FF;
}


/* =====================================================
   SUMMARY CARDS
===================================================== */

.charges-stats {
    display:grid;

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

    gap:14px;

    margin-bottom:22px;
}


.charges-stat-card {
    display:flex;
    align-items:center;

    gap:13px;

    padding:20px;

    border:1px solid #E5EAF3;
    border-radius:12px;

    background:#ffffff;
}


.charges-stat-icon {
    width:43px;
    height:43px;

    flex-shrink:0;

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

    border-radius:9px;

    font-size:14px;
}


.charges-stat-icon.blue {
    background:#EEF4FF;
    color:#01219C;
}


.charges-stat-icon.green {
    background:#ECFDF3;
    color:#16803C;
}


.charges-stat-icon.orange {
    background:#FFF7E8;
    color:#D97706;
}


.charges-stat-icon.purple {
    background:#F4F0FF;
    color:#6D4AFF;
}


.charges-stat-card span {
    display:block;

    color:#98A2B3;

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

    letter-spacing:.4px;

    margin-bottom:3px;
}


.charges-stat-card strong {
    display:block;

    color:#344054;

    font-size:17px;
    font-weight:600;
}


.charges-stat-card small {
    color:#98A2B3;
    font-size:8px;
}


/* =====================================================
   TOOLBAR
===================================================== */

.charges-toolbar {
    display:flex;

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

    gap:15px;

    padding:10px;
    margin-bottom:15px;

    border:1px solid #E5EAF3;
    border-radius:10px;

    background:#ffffff;
}


.charges-tabs {
    display:flex;
    gap:4px;
}


.charges-tab {
    padding:9px 15px;

    border:0;
    border-radius:7px;

    background:transparent;

    color:#667085;

    font-family:'Poppins',sans-serif;
    font-size:10px;

    cursor:pointer;

    transition:.3s;
}


.charges-tab:hover {
    background:#F5F8FF;
    color:#01219C;
}


.charges-tab.active {
    background:#EEF4FF;

    color:#01219C;

    font-weight:600;
}


.charges-filters {
    display:flex;

    align-items:center;

    gap:7px;
}


.charges-filters select {
    height:35px;

    padding:0 10px;

    border:1px solid #E1E6EF;
    border-radius:6px;

    background:#ffffff;

    color:#667085;

    font-family:'Poppins',sans-serif;
    font-size:9px;

    outline:none;
}


.charges-filter-button {
    width:35px;
    height:35px;

    border:1px solid #E1E6EF;
    border-radius:6px;

    background:#ffffff;

    color:#01219C;

    cursor:pointer;
}


/* =====================================================
   CONTENT
===================================================== */

.charges-content {
    display:none;
}


.charges-content.active {
    display:block;
}


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

.charges-card {
    background:#ffffff;

    border:1px solid #E5EAF3;
    border-radius:14px;

    padding:28px;
    margin-bottom:22px;

    box-shadow:
        0 8px 25px rgba(2,13,41,.025);
}


.card-header {
    display:flex;

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

    gap:20px;

    padding-bottom:18px;
    margin-bottom:5px;

    border-bottom:1px solid #EEF1F6;
}


.card-tag {
    display:block;

    color:#4477FE;

    font-size:9px;
    font-weight:700;

    letter-spacing:1px;

    margin-bottom:4px;
}


.card-header h2 {
    color:#01219C;

    font-size:17px;
    font-weight:600;
}


.card-header-actions {
    display:flex;
    align-items:center;
    gap:7px;
}


.card-header-icon {
    width:45px;
    height:45px;

    display:flex;

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

    border-radius:6px;

    background:#EEF4FF;
    color:#01219C;

    font-size:16px;
}


.card-action {
    height:34px;

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

    padding:0 10px;

    border:1px solid #E1E6EF;
    border-radius:6px;

    background:#ffffff;

    color:#667085;

    font-family:'Poppins',sans-serif;
    font-size:9px;

    cursor:pointer;
}


.card-action:hover {
    color:#01219C;
    background:#EEF4FF;
}


/* =====================================================
   TABLE
===================================================== */

.charges-table-wrapper {
    width:100%;

    overflow-x:auto;

    padding-top:15px;
}


.charges-table {
    width:100%;

    min-width:1050px;

    border-collapse:collapse;
}


.charges-table th {
    padding:13px 12px;

    background:#F8FAFD;

    color:#667085;

    border-bottom:1px solid #E8ECF3;

    text-align:left;

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

    text-transform:uppercase;

    letter-spacing:.3px;
}


.charges-table td {
    padding:15px 12px;

    border-bottom:1px solid #F0F2F6;

    color:#667085;

    font-size:10px;

    vertical-align:middle;
}


.charges-table tbody tr:hover {
    background:#FCFDFF;
}


.charges-table td strong {
    display:block;

    color:#344054;

    font-size:11px;
    font-weight:600;
}


.charges-table td small {
    display:block;

    color:#98A2B3;

    font-size:8px;

    margin-top:2px;
}


.charges-table .amount {
    color:#344054;

    font-weight:600;
}


/* =====================================================
   CATEGORY TAGS
===================================================== */

.category-tag {
    display:inline-flex;

    padding:5px 9px;

    border-radius:20px;

    font-size:8px;

    font-weight:600;
}


.category-tag.repair {
    background:#FFF1F1;
    color:#DC2626;
}


.category-tag.late {
    background:#FFF7E8;
    color:#B45309;
}


.category-tag.parking {
    background:#EEF4FF;
    color:#01219C;
}


.category-tag.access {
    background:#F3F0FF;
    color:#6D4AFF;
}


.category-tag.special {
    background:#ECFDF3;
    color:#16803C;
}


/* =====================================================
   STATUS
===================================================== */

.status {
    display:inline-flex;

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

    padding:5px 9px;

    border-radius:20px;

    font-size:8px;

    font-weight:600;
}


.status.paid {
    color:#16803C;
    background:#ECFDF3;
}


.status.pending {
    color:#B45309;
    background:#FFF7E8;
}


.status.overdue {
    color:#DC2626;
    background:#FFF1F1;
}


/* =====================================================
   TABLE ACTIONS
===================================================== */

.table-actions {
    display:flex;

    align-items:center;

    gap:5px;
}


.table-actions button {
    width:30px;
    height:30px;

    display:flex;

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

    border:1px solid #E5EAF3;

    border-radius:6px;

    background:#ffffff;

    color:#667085;

    cursor:pointer;

    transition:.25s;
}


.table-actions button:hover {
    background:#EEF4FF;

    color:#01219C;

    border-color:#D7E2FF;
}


.receipt-button,
.view-button {
    display:inline-flex;

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

    gap:5px;

    padding:6px 9px;

    border:1px solid #DCE5F8;

    border-radius:6px;

    background:#F8FAFF;

    color:#01219C;

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

    font-size:8px;

    cursor:pointer;
}


/* =====================================================
   NOTE
===================================================== */

.charges-note {
    display:flex;

    align-items:flex-start;

    gap:13px;

    padding:18px 20px;

    margin-top:5px;

    border-radius:10px;

    background:#F8FBFF;

    border:1px solid #E5EEF9;
}


.charges-note-icon {
    width:35px;
    height:35px;

    flex-shrink:0;

    display:flex;

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

    border-radius:8px;

    background:#EEF4FF;

    color:#4477FE;

    font-size:14px;
}


.charges-note strong {
    display:block;

    color:#344054;

    font-size:11px;

    margin-bottom:3px;
}


.charges-note p {
    color:#98A2B3;

    font-size:10px;

    line-height:18px;
}


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

.charges-modal {
    position:fixed;

    inset:0;

    z-index:99999;

    display:none;

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

    padding:20px;
}


.charges-modal.show {
    display:flex;
}


.charges-modal-overlay {
    position:absolute;

    inset:0;

    background:rgba(2,13,41,.55);

    backdrop-filter:blur(3px);
}


.charges-modal-box {
    position:relative;

    z-index:2;

    width:100%;

    max-width:560px;

    max-height:90vh;

    overflow-y:auto;

    padding:28px;

    border-radius:14px;

    background:#ffffff;

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


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

.modal-header {
    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:20px;

    padding-bottom:18px;

    margin-bottom:20px;

    border-bottom:1px solid #EEF1F6;
}


.modal-header h2 {
    color:#01219C;

    font-size:19px;

    font-weight:600;
}


.modal-close {
    width:32px;
    height:32px;

    display:flex;

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

    border:0;

    border-radius:6px;

    background:#F5F7FA;

    color:#667085;

    cursor:pointer;
}


.modal-close:hover {
    background:#EEF4FF;

    color:#01219C;
}




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

.modal-actions {
    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:8px;

    padding-top:5px;
}


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

@media(max-width:1100px) {

    .charges-stats {
        grid-template-columns:
            repeat(2,1fr);
    }

}


@media(max-width:900px) {

    .charges-overview {
        flex-direction:column;

        align-items:flex-start;
    }


    .charges-actions {
        width:100%;
    }

}


@media(max-width:768px) {

    .container {
        width:92%;
    }


    .charges-stats {
        grid-template-columns:1fr;
    }


    .charges-toolbar {
        align-items:flex-start;

        flex-direction:column;
    }


    .charges-tabs {
        width:100%;

        overflow-x:auto;
    }


    .charges-filters {
        width:100%;
    }


    .charges-filters select {
        flex:1;
    }


    .card-header {
        align-items:flex-start;

        flex-direction:column;
    }


    .card-header-actions {
        width:100%;
    }


    .card-action {
        flex:1;

        justify-content:center;
    }


    .form-row {
        grid-template-columns:1fr;

        gap:0;
    }

}


@media(max-width:480px) {

    .charges-overview {
        padding:22px;
    }


    .charges-overview-content {
        align-items:flex-start;
    }


    .charges-icon {
        width:60px;
        height:60px;

        font-size:21px;
    }


    .charges-summary h2 {
        font-size:20px;
    }


    .charges-meta {
        flex-direction:column;

        gap:6px;
    }


    .charges-actions {
        flex-direction:column;
    }


    .charges-actions .charges-btn {
        width:100%;
    }


    .charges-card {
        padding:20px;
    }


    .charges-modal-box {
        padding:20px;
    }

}







/* =====================================================
   APTFLOW
   PAYMENT HISTORY PAGE
===================================================== */

.payments-page {

    padding:55px 0 100px;

    background:#ffffff;

}


/* =====================================================
   OVERVIEW
===================================================== */

.payments-overview {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    padding:30px;

    margin-bottom:22px;

    background:
        linear-gradient(
            135deg,
            #F8FBFF,
            #EEF4FF
        );

    border:1px solid #E1EAF7;

    border-radius:16px;

}


.payments-overview-content {

    display:flex;

    align-items:center;

    gap:22px;

}


.payments-icon {

    width:78px;
    height:78px;

    flex-shrink:0;

    display:flex;

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

    border-radius:14px;

    background:#ffffff;

    color:#01219C;

    font-size:27px;

    box-shadow:
        0 8px 20px rgba(1,33,156,.08);

}


.payments-summary {

    display:flex;

    flex-direction:column;

}


.payments-label {

    color:#4477FE;

    font-size:9px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:4px;

}


.payments-summary h2 {

    color:#01219C;

    font-size:24px;

    font-weight:600;

    margin-bottom:4px;

}


.payments-summary > p {

    color:#667085;

    font-size:12px;

}


.payments-meta {

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-top:12px;

}


.payments-meta span {

    display:flex;

    align-items:center;

    gap:6px;

    color:#7A8198;

    font-size:10px;

}


.payments-meta i {

    color:#4477FE;

}


/* =====================================================
   ACTIONS
===================================================== */

.payments-actions {

    display:flex;

    align-items:center;

    gap:9px;

}


.payments-btn {

    height:38px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    padding:0 15px;

    border-radius:7px;

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

    font-size:10px;

    font-weight:500;

    cursor:pointer;

    transition:.3s;

}


.payments-btn.primary {

    border:1px solid #01219C;

    background:#01219C;

    color:#ffffff;

}


.payments-btn.primary:hover {

    background:#00176F;

}


.payments-btn.outline {

    border:1px solid #01219C;

    background:#ffffff;

    color:#01219C;

}


.payments-btn.outline:hover {

    background:#EEF4FF;

}


/* =====================================================
   SUMMARY CARDS
===================================================== */

.payments-stats {

    display:grid;

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

    gap:14px;

    margin-bottom:22px;

}


.payment-stat-card {

    display:flex;

    align-items:center;

    gap:13px;

    padding:20px;

    border:1px solid #E5EAF3;

    border-radius:12px;

    background:#ffffff;

}


.payment-stat-icon {

    width:43px;
    height:43px;

    flex-shrink:0;

    display:flex;

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

    border-radius:9px;

    font-size:14px;

}


.payment-stat-icon.blue {

    background:#EEF4FF;

    color:#01219C;

}


.payment-stat-icon.green {

    background:#ECFDF3;

    color:#16803C;

}


.payment-stat-icon.orange {

    background:#FFF7E8;

    color:#D97706;

}


.payment-stat-icon.purple {

    background:#F4F0FF;

    color:#6D4AFF;

}


.payment-stat-card span {

    display:block;

    color:#98A2B3;

    font-size:8px;

    font-weight:600;

    letter-spacing:.4px;

    margin-bottom:3px;

}


.payment-stat-card strong {

    display:block;

    color:#344054;

    font-size:17px;

    font-weight:600;

}


.payment-stat-card small {

    color:#98A2B3;

    font-size:8px;

}


/* =====================================================
   TOOLBAR
===================================================== */

.payments-toolbar {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    padding:10px;

    margin-bottom:15px;

    border:1px solid #E5EAF3;

    border-radius:10px;

    background:#ffffff;

}


.payments-tabs {

    display:flex;

    gap:4px;

}


.payment-tab {

    padding:9px 15px;

    border:0;

    border-radius:7px;

    background:transparent;

    color:#667085;

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

    font-size:10px;

    cursor:pointer;

    transition:.3s;

}


.payment-tab:hover {

    background:#F5F8FF;

    color:#01219C;

}


.payment-tab.active {

    background:#EEF4FF;

    color:#01219C;

    font-weight:600;

}


.payments-filters {

    display:flex;

    align-items:center;

    gap:7px;

}


.payments-filters select {

    height:35px;

    padding:0 10px;

    border:1px solid #E1E6EF;

    border-radius:6px;

    background:#ffffff;

    color:#667085;

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

    font-size:9px;

    outline:none;

}


.payment-filter-button {

    width:35px;
    height:35px;

    border:1px solid #E1E6EF;

    border-radius:6px;

    background:#ffffff;

    color:#01219C;

    cursor:pointer;

}


/* =====================================================
   CONTENT
===================================================== */

.payment-content {

    display:none;

}


.payment-content.active {

    display:block;

}


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

.payment-card {

    background:#ffffff;

    border:1px solid #E5EAF3;

    border-radius:14px;

    padding:28px;

    margin-bottom:22px;

    box-shadow:
        0 8px 25px rgba(2,13,41,.025);

}


.card-header {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding-bottom:18px;

    margin-bottom:5px;

    border-bottom:1px solid #EEF1F6;

}


.card-tag {

    display:block;

    color:#4477FE;

    font-size:9px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:4px;

}


.card-header h2 {

    color:#01219C;

    font-size:17px;

    font-weight:600;

}


.card-header-actions {

    display:flex;

    align-items:center;

    gap:7px;

}


.card-action {

    height:34px;

    display:flex;

    align-items:center;

    gap:6px;

    padding:0 10px;

    border:1px solid #E1E6EF;

    border-radius:6px;

    background:#ffffff;

    color:#667085;

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

    font-size:9px;

    cursor:pointer;

}


.card-action:hover {

    color:#01219C;

    background:#EEF4FF;

}


/* =====================================================
   TABLE
===================================================== */

.payment-table-wrapper {

    width:100%;

    overflow-x:auto;

    padding-top:15px;

}


.payment-table {

    width:100%;

    min-width:1100px;

    border-collapse:collapse;

}


.payment-table th {

    padding:13px 12px;

    background:#F8FAFD;

    color:#667085;

    border-bottom:1px solid #E8ECF3;

    text-align:left;

    font-size:9px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.3px;

}


.payment-table td {

    padding:15px 12px;

    border-bottom:1px solid #F0F2F6;

    color:#667085;

    font-size:10px;

    vertical-align:middle;

}


.payment-table tbody tr:hover {

    background:#FCFDFF;

}


.payment-table td strong {

    display:block;

    color:#344054;

    font-size:11px;

    font-weight:600;

}


.payment-table td small {

    display:block;

    color:#98A2B3;

    font-size:8px;

    margin-top:2px;

}


.payment-table .amount {

    color:#344054;

    font-weight:600;

}


.transaction-id {

    color:#667085;

    font-family:monospace;

    font-size:9px !important;

}


/* =====================================================
   PAYMENT CATEGORY
===================================================== */

.payment-category {

    display:inline-flex;

    padding:5px 9px;

    border-radius:20px;

    font-size:8px;

    font-weight:600;

}


.payment-category.maintenance {

    background:#EEF4FF;

    color:#01219C;

}


.payment-category.water {

    background:#EAFBFF;

    color:#087EA4;

}


.payment-category.other {

    background:#F4F0FF;

    color:#6D4AFF;

}


/* =====================================================
   PAYMENT STATUS
===================================================== */

.payment-status {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:5px 9px;

    border-radius:20px;

    font-size:8px;

    font-weight:600;

}


.payment-status.success {

    color:#16803C;

    background:#ECFDF3;

}


.payment-status.pending {

    color:#B45309;

    background:#FFF7E8;

}


.payment-status.failed {

    color:#DC2626;

    background:#FFF1F1;

}


/* =====================================================
   TABLE ACTIONS
===================================================== */

.payment-table-actions {

    display:flex;

    align-items:center;

    gap:5px;

}


.payment-table-actions button {

    width:30px;
    height:30px;

    display:flex;

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

    border:1px solid #E5EAF3;

    border-radius:6px;

    background:#ffffff;

    color:#667085;

    cursor:pointer;

    transition:.25s;

}


.payment-table-actions button:hover {

    background:#EEF4FF;

    color:#01219C;

    border-color:#D7E2FF;

}


/* =====================================================
   NOTE
===================================================== */

.payments-note {

    display:flex;

    align-items:flex-start;

    gap:13px;

    padding:18px 20px;

    margin-top:5px;

    border-radius:10px;

    background:#F8FBFF;

    border:1px solid #E5EEF9;

}


.payments-note-icon {

    width:35px;
    height:35px;

    flex-shrink:0;

    display:flex;

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

    border-radius:8px;

    background:#EEF4FF;

    color:#4477FE;

    font-size:14px;

}


.payments-note strong {

    display:block;

    color:#344054;

    font-size:11px;

    margin-bottom:3px;

}


.payments-note p {

    color:#98A2B3;

    font-size:10px;

    line-height:18px;

}


/* =====================================================
   MODALS
===================================================== */

.payment-modal {

    position:fixed;

    inset:0;

    z-index:99999;

    display:none;

    align-items:center;

    justify-content:center;

    padding:20px;

}


.payment-modal.show {

    display:flex;

}


.payment-modal-overlay {

    position:absolute;

    inset:0;

    background:rgba(2,13,41,.55);

    backdrop-filter:blur(3px);

}


.payment-modal-box {

    position:relative;

    z-index:2;

    width:100%;

    max-width:560px;

    max-height:90vh;

    overflow-y:auto;

    padding:28px;

    border-radius:14px;

    background:#ffffff;

    box-shadow:
        0 25px 70px rgba(0,0,0,.20);

}


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

.modal-header {

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:20px;

    padding-bottom:18px;

    margin-bottom:20px;

    border-bottom:1px solid #EEF1F6;

}


.modal-header h2 {

    color:#01219C;

    font-size:19px;

    font-weight:600;

}


.modal-close {

    width:32px;
    height:32px;

    display:flex;

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

    border:0;

    border-radius:6px;

    background:#F5F7FA;

    color:#667085;

    cursor:pointer;

}


.modal-close:hover {

    background:#EEF4FF;

    color:#01219C;

}


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

.receipt-header {

    display:flex;

    align-items:center;

    gap:13px;

    padding:15px;

    border-radius:9px;

    background:#ECFDF3;

    margin-bottom:15px;

}


.receipt-success-icon {

    width:40px;
    height:40px;

    display:flex;

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

    border-radius:50%;

    background:#22C55E;

    color:#ffffff;

    font-size:15px;

}


.receipt-header strong {

    display:block;

    color:#16803C;

    font-size:12px;

    margin-bottom:2px;

}


.receipt-header span {

    color:#667085;

    font-size:8px;

}


/* =====================================================
   AMOUNT
===================================================== */

.receipt-amount {

    text-align:center;

    padding:15px;

    border-bottom:1px solid #EEF1F6;

}


.receipt-amount span {

    display:block;

    color:#98A2B3;

    font-size:9px;

    margin-bottom:3px;

}


.receipt-amount strong {

    color:#01219C;

    font-size:25px;

    font-weight:600;

}


/* =====================================================
   RECEIPT DETAILS
===================================================== */

.receipt-details {

    display:grid;

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

    gap:0 25px;

}


.receipt-detail {

    display:flex;

    flex-direction:column;

    padding:13px 0;

    border-bottom:1px solid #F0F2F6;

}


.receipt-detail span {

    color:#98A2B3;

    font-size:8px;

    margin-bottom:4px;

}


.receipt-detail strong {

    color:#344054;

    font-size:10px;

    font-weight:500;

}


.success-text {

    color:#16803C !important;

}



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

.modal-actions {

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:8px;

    padding-top:18px;

}


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

@media(max-width:1100px) {

    .payments-stats {

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

    }

}


@media(max-width:900px) {

    .payments-overview {

        flex-direction:column;

        align-items:flex-start;

    }


    .payments-actions {

        width:100%;

    }

}


@media(max-width:768px) {

    .container {

        width:92%;

    }


    .payments-stats {

        grid-template-columns:1fr;

    }


    .payments-toolbar {

        align-items:flex-start;

        flex-direction:column;

    }


    .payments-tabs {

        width:100%;

        overflow-x:auto;

    }


    .payments-filters {

        width:100%;

    }


    .payments-filters select {

        flex:1;

    }


    .card-header {

        align-items:flex-start;

        flex-direction:column;

    }


    .card-header-actions {

        width:100%;

    }


    .card-action {

        flex:1;

        justify-content:center;

    }


    .receipt-details {

        grid-template-columns:1fr;

    }


    .form-row {

        grid-template-columns:1fr;

        gap:0;

    }

}


@media(max-width:480px) {

    .payments-overview {

        padding:22px;

    }


    .payments-overview-content {

        align-items:flex-start;

    }


    .payments-icon {

        width:60px;
        height:60px;

        font-size:21px;

    }


    .payments-summary h2 {

        font-size:20px;

    }


    .payments-meta {

        flex-direction:column;

        gap:6px;

    }


    .payments-actions {

        flex-direction:column;

    }


    .payments-actions .payments-btn {

        width:100%;

    }


    .payment-card {

        padding:20px;

    }


    .payment-modal-box {

        padding:20px;

    }

}




/* =====================================================
   APTFLOW
   FILE MANAGER / DOCUMENTS PAGE
===================================================== */

.documents-page {

    padding:55px 0 100px;

    background:#ffffff;

}


/* =====================================================
   OVERVIEW
===================================================== */

.documents-overview {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    padding:30px;

    margin-bottom:22px;

    background:
        linear-gradient(
            135deg,
            #F8FBFF,
            #EEF4FF
        );

    border:1px solid #E1EAF7;

    border-radius:16px;

}


.documents-overview-content {

    display:flex;

    align-items:center;

    gap:22px;

}


.documents-icon {

    width:78px;
    height:78px;

    flex-shrink:0;

    display:flex;

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

    border-radius:14px;

    background:#ffffff;

    color:#01219C;

    font-size:27px;

    box-shadow:
        0 8px 20px rgba(1,33,156,.08);

}


.documents-summary {

    display:flex;

    flex-direction:column;

}


.documents-label {

    color:#4477FE;

    font-size:9px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:4px;

}


.documents-summary h2 {

    color:#01219C;

    font-size:24px;

    font-weight:600;

    margin-bottom:4px;

}


.documents-summary > p {

    color:#667085;

    font-size:12px;

}


.documents-meta {

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-top:12px;

}


.documents-meta span {

    display:flex;

    align-items:center;

    gap:6px;

    color:#7A8198;

    font-size:10px;

}


.documents-meta i {

    color:#4477FE;

}


/* =====================================================
   ACTIONS
===================================================== */

.documents-actions {

    display:flex;

    align-items:center;

    gap:9px;

}


.documents-btn {

    height:38px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    padding:0 15px;

    border-radius:7px;

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

    font-size:10px;

    font-weight:500;

    cursor:pointer;

    transition:.3s;

}


.documents-btn.primary {

    border:1px solid #01219C;

    background:#01219C;

    color:#ffffff;

}


.documents-btn.primary:hover {

    background:#00176F;

}


.documents-btn.outline {

    border:1px solid #01219C;

    background:#ffffff;

    color:#01219C;

}


.documents-btn.outline:hover {

    background:#EEF4FF;

}


/* =====================================================
   STORAGE
===================================================== */

.storage-card {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    padding:18px 22px;

    margin-bottom:22px;

    border:1px solid #E5EAF3;

    border-radius:12px;

    background:#ffffff;

}


.storage-left {

    display:flex;

    align-items:center;

    gap:12px;

}


.storage-icon {

    width:43px;
    height:43px;

    display:flex;

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

    border-radius:9px;

    background:#EEF4FF;

    color:#01219C;

    font-size:15px;

}


.storage-left span {

    display:block;

    color:#98A2B3;

    font-size:8px;

    font-weight:600;

    letter-spacing:.5px;

}


.storage-left strong {

    display:inline-block;

    color:#344054;

    font-size:16px;

    margin-right:5px;

}


.storage-left small {

    color:#98A2B3;

    font-size:8px;

}


.storage-progress {

    width:40%;

}


.storage-progress-bar {

    width:100%;

    height:7px;

    overflow:hidden;

    border-radius:20px;

    background:#EEF1F6;

}


.storage-progress-bar span {

    display:block;

    height:100%;

    border-radius:20px;

    background:#4477FE;

}


.storage-progress small {

    display:block;

    margin-top:5px;

    color:#98A2B3;

    font-size:8px;

    text-align:right;

}


/* =====================================================
   TOOLBAR
===================================================== */

.documents-toolbar {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    padding:10px;

    margin-bottom:15px;

    border:1px solid #E5EAF3;

    border-radius:10px;

    background:#ffffff;

}


.documents-tabs {

    display:flex;

    gap:4px;

}


.document-tab {

    padding:9px 15px;

    border:0;

    border-radius:7px;

    background:transparent;

    color:#667085;

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

    font-size:10px;

    cursor:pointer;

    transition:.3s;

}


.document-tab:hover {

    background:#F5F8FF;

    color:#01219C;

}


.document-tab.active {

    background:#EEF4FF;

    color:#01219C;

    font-weight:600;

}


.documents-tools {

    display:flex;

    align-items:center;

    gap:7px;

}


.document-search {

    width:190px;
    height:35px;

    display:flex;

    align-items:center;

    gap:7px;

    padding:0 10px;

    border:1px solid #E1E6EF;

    border-radius:6px;

    background:#ffffff;

}


.document-search i {

    color:#98A2B3;

    font-size:10px;

}


.document-search input {

    width:100%;

    border:0;

    outline:0;

    background:transparent;

    color:#344054;

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

    font-size:9px;

}


.documents-tools select {

    height:35px;

    padding:0 10px;

    border:1px solid #E1E6EF;

    border-radius:6px;

    background:#ffffff;

    color:#667085;

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

    font-size:9px;

    outline:none;

}


.document-filter-button {

    width:35px;
    height:35px;

    border:1px solid #E1E6EF;

    border-radius:6px;

    background:#ffffff;

    color:#01219C;

    cursor:pointer;

}


/* =====================================================
   CONTENT
===================================================== */

.document-content {

    display:none;

}


.document-content.active {

    display:block;

}


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

.document-card {

    padding:28px;

    margin-bottom:22px;

    border:1px solid #E5EAF3;

    border-radius:14px;

    background:#ffffff;

    box-shadow:
        0 8px 25px rgba(2,13,41,.025);

}


.card-header {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding-bottom:18px;

    margin-bottom:20px;

    border-bottom:1px solid #EEF1F6;

}


.card-tag {

    display:block;

    color:#4477FE;

    font-size:9px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:4px;

}


.card-header h2 {

    color:#01219C;

    font-size:17px;

    font-weight:600;

}


.card-header-actions {

    display:flex;

    align-items:center;

    gap:7px;

}


.card-action {

    height:34px;

    display:flex;

    align-items:center;

    gap:6px;

    padding:0 10px;

    border:1px solid #E1E6EF;

    border-radius:6px;

    background:#ffffff;

    color:#667085;

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

    font-size:9px;

    cursor:pointer;

}


.card-action:hover {

    color:#01219C;

    background:#EEF4FF;

}


/* =====================================================
   FOLDER GRID
===================================================== */

.folder-grid {

    display:grid;

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

    gap:12px;

    margin-bottom:25px;

}


.folder-item {

    position:relative;

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px;

    border:1px solid #E8ECF3;

    border-radius:10px;

    background:#FCFDFF;

    cursor:pointer;

    transition:.25s;

}


.folder-item:hover {

    border-color:#D5E0F8;

    background:#F8FBFF;

    transform:translateY(-2px);

}


.folder-icon {

    width:42px;
    height:42px;

    flex-shrink:0;

    display:flex;

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

    border-radius:8px;

    font-size:17px;

}


.folder-icon.blue {

    background:#EEF4FF;

    color:#4477FE;

}


.folder-icon.purple {

    background:#F4F0FF;

    color:#6D4AFF;

}


.folder-icon.green {

    background:#ECFDF3;

    color:#16803C;

}


.folder-icon.orange {

    background:#FFF7E8;

    color:#D97706;

}


.folder-icon.cyan {

    background:#EAFBFF;

    color:#087EA4;

}


.folder-icon.red {

    background:#FFF1F1;

    color:#DC2626;

}


.folder-details {

    min-width:0;

}


.folder-details strong {

    display:block;

    overflow:hidden;

    color:#344054;

    font-size:10px;

    font-weight:600;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.folder-details span {

    display:block;

    color:#98A2B3;

    font-size:8px;

    margin-top:3px;

}


.folder-menu {

    position:absolute;

    top:13px;

    right:10px;

    width:25px;
    height:25px;

    display:flex;

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

    border:0;

    background:transparent;

    color:#98A2B3;

    cursor:pointer;

}


/* =====================================================
   DOCUMENT TABLE
===================================================== */

.documents-table-wrapper {

    width:100%;

    overflow-x:auto;

}


.documents-table {

    width:100%;

    min-width:950px;

    border-collapse:collapse;

}


.documents-table th {

    padding:13px 12px;

    background:#F8FAFD;

    color:#667085;

    border-bottom:1px solid #E8ECF3;

    text-align:left;

    font-size:9px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.3px;

}


.documents-table td {

    padding:13px 12px;

    border-bottom:1px solid #F0F2F6;

    color:#667085;

    font-size:9px;

    vertical-align:middle;

}


.documents-table tbody tr:hover {

    background:#FCFDFF;

}


/* =====================================================
   DOCUMENT NAME
===================================================== */

.document-name {

    display:flex;

    align-items:center;

    gap:10px;

}


.file-icon {

    width:36px;
    height:36px;

    flex-shrink:0;

    display:flex;

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

    border-radius:7px;

    font-size:14px;

}


.file-icon.pdf {

    background:#FFF1F1;

    color:#DC2626;

}


.file-icon.doc {

    background:#EEF4FF;

    color:#2563EB;

}


.file-icon.image {

    background:#ECFDF3;

    color:#16803C;

}


.document-name strong {

    display:block;

    max-width:220px;

    overflow:hidden;

    color:#344054;

    font-size:10px;

    font-weight:600;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.document-name small {

    display:block;

    color:#98A2B3;

    font-size:8px;

    margin-top:2px;

}


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

.document-category {

    display:inline-flex;

    padding:5px 9px;

    border-radius:20px;

    font-size:8px;

    font-weight:600;

}


.document-category.association {

    background:#EEF4FF;

    color:#01219C;

}


.document-category.financial {

    background:#ECFDF3;

    color:#16803C;

}


.document-category.water {

    background:#EAFBFF;

    color:#087EA4;

}


.document-category.notice {

    background:#FFF7E8;

    color:#B45309;

}


.document-category.maintenance {

    background:#F4F0FF;

    color:#6D4AFF;

}


/* =====================================================
   VISIBILITY
===================================================== */

.visibility {

    display:inline-flex;

    padding:5px 8px;

    border-radius:20px;

    font-size:8px;

    font-weight:500;

}


.visibility.public {

    background:#ECFDF3;

    color:#16803C;

}


.visibility.private {

    background:#F5F6F8;

    color:#667085;

}


/* =====================================================
   DOCUMENT ACTIONS
===================================================== */

.document-actions {

    display:flex;

    align-items:center;

    gap:5px;

}


.document-actions button {

    width:30px;
    height:30px;

    display:flex;

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

    border:1px solid #E5EAF3;

    border-radius:6px;

    background:#ffffff;

    color:#667085;

    cursor:pointer;

    transition:.25s;

}


.document-actions button:hover {

    background:#EEF4FF;

    color:#01219C;

    border-color:#D7E2FF;

}


/* =====================================================
   EMPTY STATE
===================================================== */

.empty-document-state {

    padding:70px 25px;

    text-align:center;

    border:1px solid #E5EAF3;

    border-radius:14px;

    background:#ffffff;

}


.empty-document-icon {

    width:60px;
    height:60px;

    display:flex;

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

    margin:0 auto 15px;

    border-radius:12px;

    background:#EEF4FF;

    color:#4477FE;

    font-size:22px;

}


.empty-document-state h3 {

    color:#344054;

    font-size:15px;

    margin-bottom:5px;

}


.empty-document-state p {

    max-width:450px;

    margin:auto;

    color:#98A2B3;

    font-size:10px;

    line-height:18px;

}


/* =====================================================
   NOTE
===================================================== */

.documents-note {

    display:flex;

    align-items:flex-start;

    gap:13px;

    padding:18px 20px;

    margin-top:5px;

    border-radius:10px;

    background:#F8FBFF;

    border:1px solid #E5EEF9;

}


.documents-note-icon {

    width:35px;
    height:35px;

    flex-shrink:0;

    display:flex;

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

    border-radius:8px;

    background:#EEF4FF;

    color:#4477FE;

    font-size:14px;

}


.documents-note strong {

    display:block;

    color:#344054;

    font-size:11px;

    margin-bottom:3px;

}


.documents-note p {

    color:#98A2B3;

    font-size:10px;

    line-height:18px;

}


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

.document-modal {

    position:fixed;

    inset:0;

    z-index:99999;

    display:none;

    align-items:center;

    justify-content:center;

    padding:20px;

}


.document-modal.show {

    display:flex;

}


.document-modal-overlay {

    position:absolute;

    inset:0;

    background:rgba(2,13,41,.55);

    backdrop-filter:blur(3px);

}


.document-modal-box {

    position:relative;

    z-index:2;

    width:100%;

    max-width:570px;

    max-height:90vh;

    overflow-y:auto;

    padding:28px;

    border-radius:14px;

    background:#ffffff;

    box-shadow:
        0 25px 70px rgba(0,0,0,.20);

}


.folder-modal-box {

    max-width:480px;

}


.preview-modal-box {

    max-width:600px;

}


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

.modal-header {

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:20px;

    padding-bottom:18px;

    margin-bottom:20px;

    border-bottom:1px solid #EEF1F6;

}


.modal-header h2 {

    color:#01219C;

    font-size:19px;

    font-weight:600;

}


.modal-close {

    width:32px;
    height:32px;

    display:flex;

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

    border:0;

    border-radius:6px;

    background:#F5F7FA;

    color:#667085;

    cursor:pointer;

}


.modal-close:hover {

    background:#EEF4FF;

    color:#01219C;

}


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

.form-row {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.form-group {
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:16px;
}

.form-group label {
    color:#344054;
    font-size:14px;
    font-weight:600;
}

.form-group input,
.form-group select,
.form-group textarea {
    width:100%;
    border:1px solid #DDE3EC;
    border-radius:7px;
    outline:none;
    background:#ffffff;
    color:#344054;
    font-family:'Poppins',sans-serif;
    font-size:10px;
}


.form-group input,
.form-group select {
    height:40px;
    padding:0 12px;
}


.form-group textarea {
    min-height:80px;
    padding:10px 12px;
    resize:vertical;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color:#4477FE;
    box-shadow:
        0 0 0 3px rgba(68,119,254,.08);

}


/* =====================================================
   UPLOAD AREA
===================================================== */

.upload-area {
    min-height:135px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px;
    padding:25px;
    border:1px dashed #C9D5EB;
    border-radius:9px;
    background:#F8FBFF;
    cursor:pointer;
    transition:.25s;
}

.upload-area:hover {
    border-color:#4477FE;
    background:#F3F7FF;
}

.upload-area i {
    color:#4477FE;
    font-size:25px;
    margin-bottom:3px;
}

.upload-area strong {
    color:#344054;
    font-size:11px;
}

.upload-area span {
    color:#98A2B3;
    font-size:8px;
}

#selectedFile {
    display:block;
    color:#667085;
    font-size:8px;
    margin-top:6px;
}


/* =====================================================
   PREVIEW
===================================================== */

.preview-area {
    min-height:280px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:8px;
    padding:30px;
    border:1px solid #E5EAF3;
    border-radius:10px;
    background:#F8FAFD;
}


.preview-icon {

    width:70px;
    height:70px;

    display:flex;

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

    border-radius:12px;

    background:#FFF1F1;

    color:#DC2626;

    font-size:30px;

    margin-bottom:8px;

}


.preview-area strong {

    color:#344054;

    font-size:12px;

}


.preview-area span {

    color:#98A2B3;

    font-size:9px;

}


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

.modal-actions {

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:8px;

    padding-top:18px;

}


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

@media(max-width:1100px) {

    .folder-grid {

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

    }

}


@media(max-width:900px) {

    .documents-overview {

        flex-direction:column;

        align-items:flex-start;

    }


    .documents-actions {

        width:100%;

    }


    .storage-card {

        align-items:flex-start;

        flex-direction:column;

    }


    .storage-progress {

        width:100%;

    }

}


@media(max-width:768px) {

    .documents-toolbar {

        align-items:flex-start;

        flex-direction:column;

    }


    .documents-tabs {

        width:100%;

        overflow-x:auto;

    }


    .documents-tools {

        width:100%;

        flex-wrap:wrap;

    }


    .document-search {

        flex:1;

    }


    .folder-grid {

        grid-template-columns:1fr;

    }


    .card-header {

        align-items:flex-start;

        flex-direction:column;

    }


    .card-header-actions {

        width:100%;

    }


    .card-action {

        flex:1;

        justify-content:center;

    }


    .form-row {

        grid-template-columns:1fr;

        gap:0;

    }

}


@media(max-width:480px) {

    .documents-overview {

        padding:22px;

    }


    .documents-overview-content {

        align-items:flex-start;

    }


    .documents-icon {

        width:60px;
        height:60px;

        font-size:21px;

    }


    .documents-summary h2 {

        font-size:20px;

    }


    .documents-meta {

        flex-direction:column;

        gap:6px;

    }


    .documents-actions {

        flex-direction:column;

    }


    .documents-actions .documents-btn {

        width:100%;

    }


    .document-card {

        padding:20px;

    }


    .document-modal-box {

        padding:20px;

    }

}


/* =====================================================
   APTFLOW OTP SIGN IN
===================================================== */

.signin-card {
    position: relative;
    width: 100%;
    max-width: 430px;
    padding: 34px 34px 32px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(1, 33, 156, 0.14);
}


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

.signin-header {
    margin-bottom: 30px;
}

.signin-header h2 {
    margin: 0 0 7px;
    color: #0B1B55;
    font-size: 25px;
    font-weight: 600;
}

.signin-header p {
    margin: 0;
    color: #7B87A3;
    font-size: 15px;
}


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

.form-group {
    margin-bottom: 22px;
}

.form-group label {
    display: block;
    color: #344054;
    font-size: 15px;
    font-weight: 600;
}


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

.mobile-input {
    display: flex;
    align-items: center;
    height: 58px;

    background: #F8F9FD;
    border: 1px solid #D8DFEF;
    border-radius: 9px;

    overflow: hidden;
    transition: .25s ease;
}

.mobile-input:focus-within {
    border-color: #1748EB;
    /* box-shadow: 0 0 0 3px rgba(23, 72, 235, .08); */
}

.country-code {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 15px;
    color: #344054;
    font-size: 16px;
    font-weight: 600;
    border-right: 1px solid #D8DFEF;
    background: #F1F4FA;
    border-radius: 9px 0px 0px 9px;
}

.mobile-input input {
    flex: 1;
    width: 100%;
    height: 100%;
    padding: 0 16px;
    border: none;
    outline: none;
    background: transparent;
    color: #344054;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
}

.mobile-input input::placeholder {
    color: #A1ABC0;
}


/* =====================================================
   SIGN IN BUTTON
===================================================== */

.signin-btn {
    width: 100%;
    height: 42px;
    border: 1px solid #0526A8;
    border-radius: 6px;
    background: #ffffff;
    color: #0526A8;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: .25s ease;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 22px;
    padding-right: 22px;
}

.signin-btn:hover {
    background: #01219C;
    transform: translateY(-1px);
    color: #ffffff;
    border: 1px solid #ffffff;
}


/* =====================================================
   OTP STEP
===================================================== */

.otp-step {
    display: none;
}

.otp-message {
    margin-bottom: 24px;
}

.otp-message p {
    margin: 0 0 7px;

    color: #7B87A3;
    font-size: 13px;
}

.otp-message strong {
    color: #344054;
    font-weight: 600;
}

.change-number {
    padding: 0;

    border: none;
    background: transparent;

    color: #1748EB;

    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}

.change-number:hover {
    color: #01219C;
}


/* =====================================================
   OTP BOXES
===================================================== */

.otp-inputs {
    display: flex;
    gap: 9px;
}

.otp-inputs input {
    width: 100%;
    height: 54px;

    text-align: center;

    border: 1px solid #D8DFEF;
    border-radius: 8px;

    outline: none;

    background: #F8F9FD;

    color: #01219C;

    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;

    transition: .25s ease;
}

.otp-inputs input:focus {
    border-color: #1748EB;
    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(23, 72, 235, .08);
}


/* =====================================================
   RESEND OTP
===================================================== */

.otp-resend {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: -5px 0 22px;

    font-size: 12px;
}

#otpTimer {
    color: #98A2B3;
}

#resendBtn {
    padding: 0;

    border: none;
    background: transparent;

    color: #1748EB;

    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}

#resendBtn:disabled {
    color: #B5BDCD;
    cursor: not-allowed;
}


/* =====================================================
   DIVIDER
===================================================== */

.signin-divider {
    width: 100%;
    height: 1px;

    margin: 27px 0;

    background: #E8ECF3;
}


/* =====================================================
   CREATE ACCOUNT
===================================================== */

.create-account {
    text-align: center;

    color: #7B87A3;
    font-size: 13px;
}

.create-account a {
    color: #1748EB;
    font-weight: 600;
    text-decoration: none;
}

.create-account a:hover {
    color: #01219C;
}


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

@media (max-width: 520px) {

    .signin-card {
        padding: 28px 22px;
        border-radius: 14px;
    }

    .signin-header h2 {
        font-size: 22px;
    }

    .otp-inputs {
        gap: 6px;
    }

    .otp-inputs input {
        height: 50px;
        font-size: 18px;
    }
}

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

.login-modal {

    position: fixed;

    inset: 0;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 25px;

    z-index: 9999;
}


/* Open state */

.login-modal.active {

    display: flex;
}


/* =========================================================
   BLACK TRANSPARENT BACKDROP
========================================================= */

.login-backdrop {

    position: absolute;

    inset: 0;

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

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);

    opacity: 0;

    transition:
        opacity .25s ease;
}


.login-modal.active .login-backdrop {

    opacity: 1;
}


/* =========================================================
   LOGIN POPUP
========================================================= */

.login-popup {

    position: relative;

    width: 100%;

    max-width: 430px;

    padding: 38px 38px 30px;

    background: #ffffff;

    border-radius: 16px;

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.28);

    transform:
        translateY(20px)
        scale(.97);

    opacity: 0;

    z-index: 2;

    transition:
        transform .28s ease,
        opacity .28s ease;
}


.login-modal.active .login-popup {

    transform:
        translateY(0)
        scale(1);

    opacity: 1;
}


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

.login-close {

    position: absolute;

    top: 17px;

    right: 17px;

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    border-radius: 50%;

    background: #f4f5f7;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}


.login-close:hover {

    background: #eeeeef;

    transform: rotate(90deg);
}


.login-close span {

    position: absolute;

    width: 15px;

    height: 1.5px;

    background: #202b3f;

    border-radius: 2px;
}


.login-close span:first-child {

    transform: rotate(45deg);
}


.login-close span:last-child {

    transform: rotate(-45deg);
}


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

.login-header {
    text-align: center;
    margin-bottom: 28px;
}

/* =========================================================
   TITLE
========================================================= */

.login-header h2 {
    margin-top: 22px;
    color: #0c1e43;
    font-size: 22px;
    font-weight: 600;
}

.login-header p {
    margin: 0;
    color: #7b8799;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
}


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

.login-form {
    width: 100%;
}


/* =========================================================
   FORM GROUP
========================================================= */

.form-group {
    margin-bottom: 18px;
}


.form-group label {
    display: block;
    color: #273750;
    font-size: 13px;
    font-weight: 500;
}


/* =========================================================
   PASSWORD LABEL
========================================================= */

.password-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.password-label label {
    margin-bottom: 7px;
}


.password-label a {
    margin-bottom: 7px;
    color: #1647d8;
    font-size: 12px;
    text-decoration: none;
}


.password-label a:hover {
    text-decoration: underline;
}


/* =========================================================
   INPUT WRAPPER
========================================================= */

.input-wrapper {
    position: relative;
    width: 100%;
}


/* =========================================================
   INPUT ICON
========================================================= */

.input-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ba5b5;
    transform:translateY(-50%);
    pointer-events: none;
}


.input-icon svg {
    width: 16px;
    height: 16px;
}


/* =========================================================
   INPUT
========================================================= */

.input-wrapper input {
    width: 100%;
    height: 47px;
    padding:0 44px;
    border:1px solid #dfe3e9;
    border-radius: 8px;
    outline: none;
    background: #ffffff;
    color: #17253e;
    font-family: inherit;
    font-size: 13px;
    transition:border-color .2s ease, box-shadow .2s ease;
}


.input-wrapper input::placeholder {
    color: #a4adba;
}


.input-wrapper input:hover {
    border-color: #cbd1da;
}


.input-wrapper input:focus {
    border-color: #1647d8;
    box-shadow:0 0 0 3px rgba(22,71,216,.08);
}


/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.password-toggle {
    position: absolute;
    top: 50%;
    right: 13px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: #8c96a6;
    cursor: pointer;
    transform:translateY(-50%);
}

.password-toggle:hover {
    color: #1647d8;
}

.password-toggle svg {
    width: 17px;
    height: 17px;
}


/* =========================================================
   REMEMBER ME
========================================================= */

.login-options {
    display: flex;
    align-items: center;
    margin:2px 0 20px;
}


.remember-me {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #68758a;
    font-size: 13px;
    cursor: pointer;
}


.remember-me input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


.custom-checkbox {
    width: 15px;
    height: 15px;
    border: 1px solid #d7dce3;
    border-radius: 4px;
    background: #ffffff;
    transition:background .2s ease, border-color .2s ease;
}


.remember-me input:checked +
.custom-checkbox {

    background: #01219c;

    border-color: #01219c;
}


.remember-me input:checked +
.custom-checkbox::after {

    content: "";

    display: block;

    width: 7px;

    height: 4px;

    margin:
        3px 0 0 3px;

    border-left:
        1.5px solid #ffffff;

    border-bottom:
        1.5px solid #ffffff;

    transform:
        rotate(-45deg);
}


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

.login-submit {

    width: 100%;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    border: none;

    border-radius: 8px;

    background: #01219c;

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


.login-submit svg {

    width: 16px;

    height: 16px;
}


.login-submit:hover {

    background: #001878;

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 18px
        rgba(1,33,156,.18);
}


.login-submit:active {

    transform:
        translateY(0);
}


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

.login-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 20px;
    padding-top: 18px;
    border-top:1px solid #eef0f3;
    color: #929baa;
    font-size: 12px;
    text-align: center;
}


.login-footer a {
    color: #1647d8;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}


.login-footer a:hover {
    text-decoration: underline;
}


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

@media (max-width: 500px) {

    .login-modal {

        padding: 15px;
    }


    .login-popup {
        max-width: 100%;

        padding:
            32px 24px 25px;

        border-radius: 10px;
    }


    .login-header h2 {

        font-size: 22px;
    }

}

body.login-open {
    overflow: hidden;
}

.login-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 25px;
    z-index: 9999;
}

.login-modal.active {
    display: flex;
}

.login-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.68);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.login-popup {
    position: relative;
    width: 100%;
    max-width: 430px;
    padding: 38px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,.28);
    z-index: 2;
}


/* =========================================================
   MOBILE LOGIN FORM
========================================================= */


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

.mobile-input-wrapper {

    width: 100%;

    height: 47px;

    display: flex;

    align-items: center;

    border:
        1px solid #dfe3e9;

    border-radius: 8px;

    background: #ffffff;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.mobile-input-wrapper:focus-within {

    border-color: #1647d8;
border-radius: 8px;
    /* box-shadow:
        0 0 0 3px
        rgba(22,71,216,.08); */
}


/* =========================================================
   COUNTRY CODE
========================================================= */

.country-code {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 13px;
    color: #273750;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}


.country-code svg {
    width: 13px;
    height: 13px;
    color: #8c96a6;
}


/* =========================================================
   DIVIDER
========================================================= */

.mobile-divider {
    width: 1px;
    height: 22px;
    margin:
        0 10px;

    background: #e3e6eb;
}


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

.mobile-icon {

    width: 18px;

    height: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #9ba5b5;

    flex-shrink: 0;
}


.mobile-icon svg {

    width: 16px;

    height: 16px;
}


/* =========================================================
   MOBILE INPUT FIELD
========================================================= */

.mobile-input-wrapper input {

    flex: 1;

    min-width: 0;

    height: 100%;

    padding:
        0 13px 0 9px;

    border: none;

    outline: none;

    background: transparent;

    color: #17253e;

    font-family: inherit;

    font-size: 12px;
}


.mobile-input-wrapper input::placeholder {

    color: #a4adba;
}


/* Remove number arrows */

.mobile-input-wrapper input::-webkit-outer-spin-button,
.mobile-input-wrapper input::-webkit-inner-spin-button {

    -webkit-appearance: none;

    margin: 0;
}


/* =========================================================
   ERROR
========================================================= */

.field-error {

    display: block;

    min-height: 0;

    margin-top: 5px;

    color: #e5484d;

    font-size: 8px;
}


/* =========================================================
   OTP SECTION
========================================================= */

.otp-section {

    display: none;

    margin-top: 20px;
}


.otp-section.active {

    display: block;

    animation:
        otpFade .25s ease;
}


@keyframes otpFade {

    from {

        opacity: 0;

        transform:
            translateY(5px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


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

.otp-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 12px;
}


.otp-header label {

    display: block;

    margin-bottom: 4px;

    color: #273750;

    font-size: 10px;

    font-weight: 600;
}


.otp-header p {

    margin: 0;

    color: #8993a2;

    font-size: 8px;
}


.otp-header p strong {

    color: #4f5d72;

    font-weight: 600;
}


.change-number {

    padding: 0;

    border: none;

    background: transparent;

    color: #1647d8;

    font-family: inherit;

    font-size: 8px;

    font-weight: 500;

    cursor: pointer;
}


.change-number:hover {

    text-decoration: underline;
}


/* =========================================================
   OTP INPUTS
========================================================= */

.otp-inputs {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 7px;
}


.otp-input {

    width: 45px;

    height: 48px;

    padding: 0;

    border:
        1px solid #dfe3e9;

    border-radius: 8px;

    outline: none;

    background: #ffffff;

    color: #17253e;

    font-family: inherit;

    font-size: 18px;

    font-weight: 600;

    text-align: center;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.otp-input:focus {

    border-color: #1647d8;

    box-shadow:
        0 0 0 3px
        rgba(22,71,216,.08);
}


/* =========================================================
   OTP RESEND
========================================================= */

.otp-resend {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin:
        12px 0 18px;

    color: #929baa;

    font-size: 8px;
}


.otp-resend strong {

    color: #59667a;

    font-weight: 600;
}


.otp-resend button {

    padding: 0;

    border: none;

    background: transparent;

    color: #1647d8;

    font-family: inherit;

    font-size: 8px;

    font-weight: 600;

    cursor: pointer;
}


.otp-resend button:disabled {

    color: #b5bbc4;

    cursor: not-allowed;
}


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

#verifyOtpBtn {

    margin-top: 0;
}


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

@media (max-width: 500px) {

    .otp-inputs {

        gap: 5px;
    }


    .otp-input {

        width: 42px;

        height: 46px;
    }

}


@media (max-width: 380px) {

    .otp-input {

        width: 39px;

        height: 44px;
    }

}






/* =========================================================
   SOCIAL LOGIN
========================================================= */

.social-login-section {

    margin-top: 18px;

}


/* =========================================================
   OR DIVIDER
========================================================= */

.login-divider {

    display: flex;

    align-items: center;

    gap: 10px;

    margin:
        17px 0;
}


.login-divider span {

    flex: 1;

    height: 1px;

    background: #e8ebef;
}


.login-divider em {

    color: #a0a8b4;

    font-family: inherit;

    font-size: 12px;

    font-style: normal;

    font-weight: 500;
}


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

.social-login-btn {

    position: relative;

    width: 100%;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-bottom: 9px;

    border: 1px solid #dfe3e9;

    border-radius: 8px;

    background: #ffffff;

    color: #273750;

    font-family: inherit;

    font-size: 12px;

    font-weight: 500;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


.social-login-btn:hover {

    background: #fafbfc;

    border-color: #cdd3dc;

    box-shadow:
        0 4px 12px
        rgba(20,35,60,.06);

    transform:
        translateY(-1px);
}


.social-login-btn:active {

    transform:
        translateY(0);
}


/* =========================================================
   SOCIAL ICON
========================================================= */

.social-icon {

    width: 19px;

    height: 19px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;
}


.social-icon svg {

    width: 18px;

    height: 18px;

    display: block;
}


/* =========================================================
   APPLE
========================================================= */

.apple-icon {

    color: #000000;
}


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

@media (max-width: 500px) {

    .social-login-btn {

        height: 44px;

    }

}

















/* ---------------------------------------------------------------------------------------------------------------- */

/* =====================================================
   APTFLOW BLOG GRID
===================================================== */

.blogs-section {
    padding:90px 0 110px;
    background:#ffffff;
}


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

.blogs-header {
    max-width:720px;
    margin:0 auto 50px;
    text-align:center;
}


.section-tag {
    display:inline-flex;
    padding:7px 15px;
    margin-bottom:14px;
    border:1px solid #C9D8FF;
    border-radius:30px;
    background:#EEF4FF;
    color:#01219C;
    font-size:9px;
    font-weight:700;
    letter-spacing:.8px;
}


.blogs-header h2 {
    margin:0 0 14px;
    color:#020D29;
    font-size:40px;
    line-height:1.2;
    font-weight:600;
}


.blogs-header h2 span {
    color:#01219C;
}


.blogs-header p {
    max-width:650px;
    margin:auto;
    color:#667085;
    font-size:13px;
    line-height:1.7;
}


/* =====================================================
   BLOG GRID
===================================================== */

.blogs-grid {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px 22px;
}


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

.blog-card {
    overflow:hidden;
    background:#ffffff;
    border:1px solid #E2E8F2;
    border-radius:12px;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.blog-card:hover {
    transform:translateY(-6px);
    border-color:#C8D6F8;
    box-shadow:0 15px 35px rgba(1,33,156,.08);
}


/* =====================================================
   IMAGE
===================================================== */

.blog-image {
    display:block;
    width:100%;
    height:180px;
    overflow:hidden;
    background:#EEF4FF;
}


.blog-image img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .5s ease;
}


.blog-card:hover .blog-image img {
    transform:scale(1.06);
}


/* =====================================================
   CONTENT
===================================================== */

.blog-content {
    padding:22px;
}

.blog-category {
    display:inline-block;
    margin-bottom:9px;
    color:#667085;
    font-size:12px;
    font-weight:400;
}

.blog-content h3 {
    margin:0 0 10px;
    color:#01219C;
    font-size:18px;
    line-height:1.4;
    font-weight:600;
}

.blog-content p {
    min-height:58px;
    margin:0 0 18px;
    color:#667085;
    font-size:13px;
    line-height:1.6;
    font-weight:500;
}

/* -- BLOG FOOTER -- */

.blog-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:15px;
    border-top:1px solid #EEF1F5;
}

.blog-date {
    display:flex;
    align-items:center;
    gap:6px;
    color:#98A2B3;
    font-size:12px;
}

.blog-date i {
    color:#01219C;
}

.blog-read-more {
    display:flex;
    align-items:center;
    gap:6px;
    color:#01219C;
    font-size:14px;
    font-weight:500;
    text-decoration:none;
}

.blog-read-more i {
    font-size:12px;
    transition:transform .25s ease;
}

.blog-read-more:hover i {

    transform:translateX(4px);

}


/* =====================================================
   HOME PAGE - RECENT BLOGS
===================================================== */

.recent-blogs {

    padding:90px 0;

    background:#EEF4FF;

}


.recent-blogs .blogs-grid {

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

}


.recent-blogs .blog-card {

    background:#ffffff;

}


/* Hide extra content if using same cards
   for the home page */

.recent-blogs .blog-card:nth-child(n+4) {

    display:none;

}


/* =====================================================
   RECENT BLOG HEADER
===================================================== */

.recent-blogs-header {

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    margin-bottom:35px;

}


.recent-blogs-heading {

    max-width:650px;

}


.recent-blogs-heading .section-tag {

    margin-bottom:10px;

}


.recent-blogs-heading h2 {

    margin:0;

    color:#020D29;

    font-size:34px;

    font-weight:600;

}


.recent-blogs-heading h2 span {

    color:#01219C;

}


.view-all-blogs {

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#01219C;

    font-size:11px;

    font-weight:600;

    text-decoration:none;

}


.view-all-blogs i {

    transition:
        transform .25s ease;

}


.view-all-blogs:hover i {

    transform:translateX(4px);

}


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

@media(max-width:1000px) {

    .blogs-grid {

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

    }

}


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

@media(max-width:700px) {

    .blogs-section {

        padding:70px 0;

    }


    .blogs-header {

        margin-bottom:35px;

    }


    .blogs-header h2 {

        font-size:31px;

    }


    .blogs-grid {

        grid-template-columns:1fr;

        gap:20px;

    }


    .blog-image {

        height:220px;

    }


    .recent-blogs {

        padding:70px 0;

    }


    .recent-blogs-header {

        display:block;

    }


    .view-all-blogs {

        margin-top:15px;

    }


    .recent-blogs-heading h2 {

        font-size:29px;

    }

}


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

@media(max-width:450px) {

    .blog-content {

        padding:18px;

    }


    .blog-image {

        height:200px;

    }


    .blogs-header h2 {

        font-size:27px;

    }

}













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

.legal-hero {
    position:relative;
    padding:155px 0 75px;
    background:#01219C;
    color:#ffffff;
    overflow:hidden;
}


.legal-hero::before {
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    top:-350px;
    right:-150px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;
    box-shadow:
        0 0 0 50px rgba(255,255,255,.025),
        0 0 0 100px rgba(255,255,255,.02);
}

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


.legal-tag {
    display:inline-flex;
    padding:7px 15px;
    margin-bottom:15px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:30px;
    background:rgba(255,255,255,.08);
    color:#EEF4FF;
    font-size:9px;
    font-weight:600;
    letter-spacing:.8px;
}


.legal-hero h1 {

    margin:0 0 12px;

    font-size:42px;

    line-height:1.2;

    font-weight:600;

}


.legal-hero p {

    max-width:650px;

    margin:0;

    color:rgba(255,255,255,.78);

    font-size:13px;

    line-height:1.7;

}


/* =====================================================
   BREADCRUMB
===================================================== */

.legal-breadcrumb {

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:35px;

    color:rgba(255,255,255,.7);

    font-size:10px;

}


.legal-breadcrumb a {

    color:#ffffff;

    text-decoration:none;

}


.legal-breadcrumb i {

    font-size:8px;

}


/* =====================================================
   MAIN SECTION
===================================================== */

.legal-section {

    padding:70px 0 100px;

    background:#ffffff;

}


.legal-layout {

    display:grid;

    grid-template-columns:250px 1fr;

    gap:45px;

    align-items:start;

}


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

.legal-sidebar {

    position:sticky;

    top:110px;

    padding:18px;

    border:1px solid #E0E7F2;

    border-radius:12px;

    background:#ffffff;

}


.legal-sidebar-title {
    padding:5px 10px 15px;
    color:#98A2B3;
    font-size:14px;
    font-weight:500;
}


.legal-nav-item {
    width:100%;
    display:flex;
    align-items:center;
    gap:11px;
    padding:12px 10px;
    margin-bottom:5px;
    border:0;
    border-radius:7px;
    background:transparent;
    color:#667085;
    font-family:'Poppins', sans-serif;
    font-size:14px;
    font-weight:500;
    text-align:left;
    cursor:pointer;
    transition:.25s;
}

.legal-nav-item i {
    width:20px;
    color:#667085;
    font-size:14px;
    text-align:center;
}

.legal-nav-item:hover {
    background:#EEF4FF;
    color:#01219C;
}

.legal-nav-item:hover i {
    color:#01219C;
}

.legal-nav-item.active {
    background:#EEF4FF;
    color:#01219C;
    font-weight:600;
}

.legal-nav-item.active i {
    color:#01219C;
}

/* =====================================================
   SIDEBAR HELP
===================================================== */

.legal-sidebar-help {
    margin-top:20px;
    padding:15px;
    border-radius:9px;
    background:#F8FAFD;
}


.legal-sidebar-help > i {
    display:flex;
    align-items:center;
    justify-content:center;
    width:50px;
    height:50px;
    margin-bottom:10px;
    border-radius:7px;
    background:#EEF4FF;
    color:#01219C;
    font-size:20px;
}


.legal-sidebar-help strong {
    display:block;
    margin-bottom:4px;
    color:#344054;
    font-size:14px;
}


.legal-sidebar-help p {
    margin:0 0 10px;
    color:#98A2B3;
    font-size:12px;
    line-height:1.6;
}


.legal-sidebar-help a {

    display:inline-flex;
    align-items:center;
    gap:5px;
    color:#01219C;
    font-size:12px;
    font-weight:600;
    text-decoration:none;

}


/* =====================================================
   DOCUMENT
===================================================== */

.legal-document {
    display:none;
}

.legal-document.active {
    display:block;
}


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

.document-header {

    display:flex;

    align-items:center;

    gap:17px;

    padding-bottom:25px;

    margin-bottom:25px;

    border-bottom:1px solid #E8EDF4;

}


.document-icon {
    width:80px;
    height:80px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    background:#EEF4FF;
    color:#01219C;
    font-size:30px;
}


.document-label {
    display:block;
    color:#4477FE;
    font-size:12px;
    font-weight:500;
}

.document-header h2 {
    color:#020D29;
    font-size:26px;
    font-weight:700;
}

.document-header p {
    margin:0;
    color:#98A2B3;
    font-size:12px;
}


/* =====================================================
   INTRO
===================================================== */

.legal-intro {
    margin-bottom:30px;
    padding:20px 22px;
    border-left:3px solid #01219C;
    border-radius:0 8px 8px 0;
    background:#EEF4FF;
}


.legal-intro p {
    margin:0;
    color:#475467;
    font-size:14px;
    line-height:1.8;
}


/* =====================================================
   BODY
===================================================== */

.legal-body h3 {
    margin:30px 0 10px;
    color:#020D29;
    font-size:15px;
    font-weight:600;
}


.legal-body h3:first-child {
    margin-top:0;
}


.legal-body p {
    margin:0 0 12px;
    color:#667085;
    font-size:14px;
    line-height:1.85;
}


.legal-body a {
    color:#01219C;
    font-weight:500;
    text-decoration:none;
}


.legal-body a:hover {
    text-decoration:underline;
}


/* =====================================================
   COOKIE TYPES
===================================================== */

.cookie-types {

    display:grid;

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

    gap:12px;

    margin:20px 0 25px;

}


.cookie-type {

    padding:18px;

    border:1px solid #E1E8F2;

    border-radius:9px;

    background:#ffffff;

}


.cookie-type-icon {

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:12px;

    border-radius:7px;

    background:#EEF4FF;

    color:#01219C;

    font-size:12px;

}


.cookie-type h4 {

    margin:0 0 6px;

    color:#344054;

    font-size:10px;

    font-weight:600;

}


.cookie-type p {

    margin:0;

    color:#98A2B3;

    font-size:8px;

    line-height:1.7;

}


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

@media(max-width:900px) {

    .legal-layout {

        grid-template-columns:1fr;

        gap:30px;

    }


    .legal-sidebar {

        position:static;

        display:flex;

        align-items:center;

        gap:5px;

        padding:10px;

        overflow-x:auto;

    }


    .legal-sidebar-title,
    .legal-sidebar-help {
        display:none;
    }


    .legal-nav-item {
        width:auto;
        flex-shrink:0;
        margin:0;
        padding:10px 13px;
        white-space:nowrap;
    }
}


@media(max-width:700px) {
    .legal-hero {

        padding:125px 0 60px;

    }


    .legal-hero h1 {

        font-size:32px;

    }


    .legal-section {

        padding:50px 0 70px;

    }


    .document-header h2 {
        font-size:22px;
    }


    .cookie-types {

        grid-template-columns:1fr;

    }

}


@media(max-width:480px) {

    .legal-hero h1 {

        font-size:28px;

    }


    .legal-hero p {

        font-size:11px;

    }


    .legal-layout {

        gap:20px;

    }


    .legal-sidebar {

        margin:0 -5px;

    }


    .document-header {

        align-items:flex-start;

    }


    .document-icon {

        width:48px;

        height:48px;

        font-size:17px;

    }


    .document-header h2 {

        font-size:19px;

    }


    .legal-body h3 {

        font-size:14px;

    }


    .legal-body p {

        font-size:10px;

    }

}




/* =====================================================
   BLOG PAGINATION
===================================================== */

.blog-pagination {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:100%;

    margin-top:55px;

}


/* =====================================================
   PAGINATION ITEMS
===================================================== */

.pagination-number,
.pagination-arrow {
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #DCE4F2;
    border-radius:7px;
    background:#ffffff;
    color:#667085;
    font-size:14px;
    font-weight:500;
    text-decoration:none;
    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;

}


/* =====================================================
   HOVER
===================================================== */

.pagination-number:hover,
.pagination-arrow:hover {
    background:#EEF4FF;
    border-color:#BFD0F5;
    color:#01219C;
    transform:translateY(-2px);
}


/* =====================================================
   ACTIVE PAGE
===================================================== */

.pagination-number.active {
    background:#01219C;
    border-color:#01219C;
    color:#ffffff;
}


/* =====================================================
   ARROWS
===================================================== */

.pagination-arrow {
    font-size:14px;
}


/* =====================================================
   DISABLED ARROW
===================================================== */

.pagination-arrow.disabled {
    background:#F6F8FB;
    border-color:#E8ECF2;
    color:#C4CBD6;
    cursor:not-allowed;
    pointer-events:none;
}


/* =====================================================
   DOTS
===================================================== */

.pagination-dots {
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#98A2B3;
    font-size:14px;
}


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

@media(max-width:480px) {
    .blog-pagination {
        gap:5px;
        margin-top:40px;
    }


    .pagination-number,
    .pagination-arrow {
        width:34px;
        height:34px;
        font-size:14px;
    }


    .pagination-dots {
        width:20px;
        height:34px;
    }

}














/* CAREERS PAGE CSS */


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

.careers-hero {
    position:relative;
    min-height:400px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(255,255,255,.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #EEF4FF,
            #d3e0f4
        );
}

.careers-hero::before {
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    right:-300px;
    top:-300px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;
    box-shadow:
        0 0 0 60px rgba(255,255,255,.025),
        0 0 0 120px rgba(255,255,255,.02);
}

.careers-hero-content {
    position:relative;
    z-index:2;
    max-width:900px;
    padding:10px 0;
}

.careers-tag {
    display:inline-flex;
    padding:7px 15px;
    margin-bottom:18px;
    border:1px solid #020D29;
    border-radius:30px;
    background:rgba(255,255,255,.08);
    color:#020D29;
    font-size:12px;
    font-weight:500;
}

.careers-hero h1 {
    margin:0 0 6px;
    color:#020D29;
    font-size:32px;
    line-height:1.25;
    font-weight:600;
}

.careers-hero h1 span {
    color:#01219C;
}

.careers-hero p {
    max-width:750px;
    margin:0 0 30px;
    color:rgba(255,255,255,.78);
    font-size:14px;
    line-height:1.8;
    color: #020D29;
}

.careers-hero-btn {
    display:inline-flex;
    align-items:center;
    gap:10px;
    height:50px;
    padding:0 20px;
    border-radius:6px;
    background:#01219C;
    color:#ffffff;
    font-size:14px;
    font-weight:500;
    text-decoration:none;
    transition:.3s;
}

.careers-hero-btn:hover {
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}


/* =====================================================
   COMMON
===================================================== */

.section-tag {
    display:inline-flex;
    padding:7px 14px;
    margin-bottom:13px;
    border:1px solid #CCD9F7;
    border-radius:30px;
    background:#EEF4FF;
    color:#01219C;
    font-size:12px;
    font-weight:600;
}

.section-tag.light {
    border-color:rgba(255,255,255,.2);
    background:rgba(255,255,255,.08);
    color:#EEF4FF;
}


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

.career-about {
    padding:100px 0;
}

.career-two-column {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.career-about-content h2 {
    margin:0 0 6px;
    color:#020D29;
    font-size:30px;
    line-height:1.25;
    font-weight:600;
}

.career-about-content h2 span {
    color:#01219C;
}

.career-about-content p {
    margin-top:20px;
    color:#667085;
    font-size:14px;
    line-height:1.6;
}

.about-stats {
    display:flex;
    gap:12px;
    margin-top:28px;
}

.about-stat {
    min-width:125px;
    padding:15px;
    border:1px solid #E2E8F2;
    border-radius:9px;
    background:#ffffff;
}

.about-stat strong {
    display:block;
    color:#01219C;
    font-size:24px;
}

.about-stat span {
    color:#667085;
    font-size:12px;
}


/* =====================================================
   ABOUT VISUAL
===================================================== */

.career-about-visual {
    position:relative;
    min-height:420px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#EEF4FF;
    border-radius:18px;
    overflow:hidden;
}

.career-visual-card {
    position:relative;
    z-index:2;
    width:90%;
    padding:34px;
    background:#ffffff;
    border-radius:12px;
    box-shadow:
        0 20px 50px rgba(1,33,156,.12);
}

.visual-icon {
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:25px;
    border-radius:12px;
    background:#01219C;
    color:#ffffff;
    font-size:26px;
}

.career-visual-card > span {
    display:block;
    margin-bottom:6px;
    color:#4477FE;
    font-size:12px;
    font-weight:600;
}

.career-visual-card h3 {
    margin:0 0 12px;
    color:#020D29;
    font-size:22px;
    line-height:1.35;
    font-weight:600;
}

.career-visual-card p {
    margin:0;
    color:#667085;
    font-size:14px;
    line-height:1.7;
}

.visual-pattern {
    position:absolute;

    width:300px;
    height:300px;

    right:-130px;
    bottom:-150px;

    border:1px solid #C7D5F5;
    border-radius:50%;

    box-shadow:
        0 0 0 40px #E3ECFF,
        0 0 0 80px #E9F0FF;
}


/* =====================================================
   WORK CULTURE
===================================================== */

.work-culture {
    padding:100px 0;
    background:#F8FAFD;
}

.culture-header {
    max-width:680px;
    margin:0 auto 50px;
    text-align:center;
}

.culture-header h2 {
    margin:0 0 15px;
    color:#020D29;
    font-size:30px;
    line-height:1.25;
    font-weight:600;
}

.culture-header h2 span {
    color:#01219C;
}

.culture-header p {
    margin:0;
    color:#667085;
    font-size:14px;
    line-height:1.7;
}

.culture-grid {
    display:grid;

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

    gap:15px;
}

.culture-card {
    padding:30px 30px;
    border:1px solid #E2E8F2;
    border-radius:11px;
    background:#ffffff;
    transition:.3s;
}

.culture-card:hover {
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(1,33,156,.07);
}

.culture-icon {
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:20px;
    border-radius:10px;
    background:#EEF4FF;
    color:#01219C;
    font-size:24px;
}

.culture-card h3 {
    margin:0 0 9px;
    color:#01219C;
    font-size:18px;
    font-weight:600;
}

.culture-card p {
    margin:0;
    color:#667085;
    font-size:14px;
    line-height:1.7;
}


/* =====================================================
   WHY WORK
===================================================== */

.why-work {
    padding:80px 0;

    background:#01219C;

    color:#ffffff;
}

.why-work-inner {
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;
}

.why-work h2 {
    margin:0 0 15px;
    color:#ffffff;
    font-size:28px;
    line-height:1.25;
    font-weight:600;
}

.why-work h2 span {
    color:#EEF4FF;
}

.why-work p {
    max-width:550px;
    margin:0;
    color:rgba(255,255,255,.7);
    font-size:14px;
    line-height:1.5;
}

.why-points {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}

.why-points div {
    display:flex;
    align-items:center;
    gap:14px;
    color:#ffffff;
    font-size:14px;
}

.why-points i {
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#EEF4FF;
    color:#01219C;
    font-size:14px;
}


/* =====================================================
   OPEN POSITIONS
===================================================== */

.open-positions {
    padding:100px 0;
}

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

.positions-header h2 {
    color:#020D29;
    font-size:30px;
    font-weight:600;
}

.positions-header h2 span {
    color:#01219C;
}

.positions-header p {
    margin:0;
    color:#667085;
    font-size:14px;
}

.positions-count {
    padding:10px 16px;
    border-radius:20px;
    background:#EEF4FF;
    color:#01219C;
    font-size:13px;
    font-weight:500;
}


/* =====================================================
   JOB GRID
===================================================== */

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

.job-card {
    position:relative;
    padding:35px;
    min-height:300px;
    border:1px solid #E1E7F0;
    border-radius:12px;
    background:#ffffff;
    cursor:pointer;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.job-card:hover {
    transform:translateY(-6px);
    border-color:#C8D6F5;
    box-shadow:0 18px 40px rgba(1,33,156,.08);
}

.job-card-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
}

.job-icon {
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#EEF4FF;
    color:#01219C;
    font-size:24px;
}

.job-type {
    padding:9px 12px;
    border-radius:20px;
    background:#F1F8F3;
    color:#16803C;
    font-size:12px;
    font-weight:600;
}

.job-card h3 {
    margin:0 0 9px;
    color:#01219C;
    font-size:18px;
    font-weight:600;
}

.job-card > p {
    min-height:55px;
    margin:0 0 18px;
    color:#667085;
    font-size:14px;
    line-height:1.7;
}

.job-meta {
    display:flex;
    gap:28px;
    padding-bottom:32px;
    border-bottom:1px solid #EEF1F5;
}

.job-meta span {
    display:flex;
    align-items:center;
    gap:10px;
    color:#98A2B3;
    font-size:12px;
}

.job-meta i {
    color:#01219C;
}

.job-card-link {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:22px;
    color:#01219C;
    font-size:14px;
    font-weight:500;
}

.job-card-link i {
    transition:.25s;
}

.job-card:hover .job-card-link i {
    transform:translateX(5px);
}


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

.job-modal {
    position:fixed;

    inset:0;

    z-index:5000;

    display:none;

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

    padding:25px;
}

.job-modal.active {
    display:flex;
}

.job-modal-overlay {
    position:absolute;

    inset:0;

    background:rgba(2,13,41,.65);

    backdrop-filter:blur(4px);
}

.job-modal-container {
    position:relative;

    z-index:2;

    width:100%;
    max-width:800px;

    max-height:90vh;

    display:flex;
    flex-direction:column;

    border-radius:14px;

    background:#ffffff;

    box-shadow:
        0 30px 80px rgba(0,0,0,.2);

    overflow:hidden;
}


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

.job-modal-header {
    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    padding:25px 30px;

    border-bottom:1px solid #E8EDF3;

    background:#F8FAFD;
}

.modal-label {
    display:block;
    margin-bottom:5px;
    color:#01219C;
    font-size:14px;
    font-weight:600;
}

.job-modal-header h2 {
    margin:0 0 10px;
    color:#020D29;
    font-size:28px;
    font-weight:600;
}

.modal-job-meta {
    display:flex;
    flex-wrap:wrap;
    gap:35px;
}

.modal-job-meta span {
    display:flex;
    align-items:center;
    gap:10px;
    color:#667085;
    font-size:14px;
}

.modal-job-meta i {
    color:#01219C;
}

.modal-close {
    width:35px;
    height:35px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #E1E6EF;
    border-radius:7px;
    background:#ffffff;
    color:#667085;
    cursor:pointer;
}

.modal-close:hover {
    background:#EEF4FF;
    color:#01219C;
}


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

.job-modal-body {
    padding:28px 30px;

    overflow-y:auto;
}

.modal-section {
    margin-bottom:27px;
}

.modal-section h3 {
    margin:0 0 10px;
    color:#020D29;
    font-size:16px;
    font-weight:600;
}

.modal-section p,
.modal-section li {
    color:#667085;
    font-size:14px;
    line-height:1.5;
    font-weight:400;
}

.modal-section p {
    margin:0;
}

.modal-section ul {
    margin:0;
    padding-left:24px;
}

.modal-section li {
    margin-bottom:5px;
}

.skills-list {
    display:flex;
    flex-wrap:wrap;

    gap:7px;
}

.skill {
    padding:10px 14px;
    border-radius:20px;
    background:#EEF4FF;
    color:#01219C;
    font-size:12px;
    font-weight:400;
}


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

.modal-info-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    padding:17px;
    border-radius:9px;
    background:#EEF4FF;
}

.modal-info-grid div {
    display:flex;
    flex-direction:column;
    gap:3px;
}

.modal-info-grid span {
    color:#4477FE;
    font-size:10px;
    font-weight:500;
}

.modal-info-grid strong {
    color:#344054;
    font-size:14px;
    font-weight:500;
}


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

.job-modal-footer {
    display:flex;

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

    gap:10px;

    padding:18px 30px;

    border-top:1px solid #E8EDF3;

    background:#ffffff;
}

.modal-secondary-btn {
    height:45px;
    padding:0 18px;
    border:1px solid #D9E1EC;
    border-radius:7px;
    background:#ffffff;
    color:#667085;
    font-family:'Poppins',sans-serif;
    font-size:14px;
    cursor:pointer;
}

.modal-apply-btn {
    height:45px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 18px;
    border-radius:7px;
    background:#01219C;
    color:#ffffff;
    font-size:14px;
    font-weight:500;
    text-decoration:none;
}

.modal-apply-btn:hover {
    background:#00176F;
}


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

@media(max-width:1000px) {

    .career-two-column {
        gap:45px;
    }

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

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

}


@media(max-width:800px) {

    .careers-hero {
        min-height:520px;
    }

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

    .career-two-column {
        grid-template-columns:1fr;
    }

    .career-about-visual {
        min-height:350px;
    }

    .why-work-inner {
        grid-template-columns:1fr;
        gap:35px;
    }

}


@media(max-width:600px) {

    .careers-hero {
        min-height:500px;
    }

    .careers-hero-content {
        padding:60px 0;
    }

    .careers-hero h1 {
        font-size:32px;
    }

    .careers-hero p {
        font-size:12px;
    }

    .career-about,
    .work-culture,
    .open-positions {
        padding:70px 0;
    }

    .career-about-content h2,
    .culture-header h2,
    .positions-header h2 {
        font-size:30px;
    }

    .about-stats {
        flex-wrap:wrap;
    }

    .culture-grid,
    .jobs-grid {
        grid-template-columns:1fr;
    }

    .positions-header {
        display:block;
    }

    .positions-count {
        display:inline-block;
        margin-top:15px;
    }

    .why-points {
        grid-template-columns:1fr;
    }

    .job-modal {
        padding:10px;
    }

    .job-modal-container {
        max-height:95vh;
    }

    .job-modal-header {
        padding:20px;
    }

    .job-modal-body {
        padding:22px 20px;
    }

    .job-modal-footer {
        padding:15px 20px;
    }

    .modal-info-grid {
        grid-template-columns:1fr;
    }

}


@media(max-width:450px) {

    .career-visual-card {
        width:85%;
        padding:25px;
    }

    .career-visual-card h3 {
        font-size:19px;
    }

    .about-stat {
        min-width:100px;
    }

    .job-modal-header h2 {
        font-size:20px;
    }

    .modal-job-meta {
        flex-direction:column;
        gap:6px;
    }

}








/* =====================================================
   APTFLOW FAQ PAGE
===================================================== */

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;

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

    color:#020D29;

    background:#ffffff;
}

.container {
    width:100%;

    max-width:1180px;

    margin:auto;

    padding:0 20px;
}


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

.faq-hero {

    position:relative;

    padding:150px 0 75px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(255,255,255,.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #01219C,
            #0736C7
        );

    color:#ffffff;
}

.faq-hero::before {

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    right:-280px;
    top:-350px;

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

    border-radius:50%;

    box-shadow:
        0 0 0 50px rgba(255,255,255,.025),
        0 0 0 100px rgba(255,255,255,.02);
}

.faq-hero-content {

    position:relative;

    z-index:2;

    max-width:750px;

    text-align:center;

    margin:auto;
}

.faq-tag {

    display:inline-flex;

    padding:7px 15px;

    margin-bottom:15px;

    border:1px solid rgba(255,255,255,.25);

    border-radius:30px;

    background:rgba(255,255,255,.08);

    color:#EEF4FF;

    font-size:9px;

    font-weight:600;

    letter-spacing:.8px;
}

.faq-hero h1 {

    margin:0 0 15px;

    color:#ffffff;

    font-size:44px;

    line-height:1.2;

    font-weight:600;
}

.faq-hero h1 span {

    color:#EEF4FF;
}

.faq-hero p {

    max-width:650px;

    margin:0 auto 25px;

    color:rgba(255,255,255,.75);

    font-size:12px;

    line-height:1.8;
}


/* =====================================================
   SEARCH
===================================================== */

.faq-search {

    width:100%;

    max-width:560px;

    height:52px;

    display:flex;

    align-items:center;

    gap:12px;

    margin:auto;

    padding:0 18px;

    border:1px solid rgba(255,255,255,.2);

    border-radius:8px;

    background:#ffffff;

    box-shadow:
        0 12px 35px rgba(0,0,0,.12);
}

.faq-search i {

    color:#01219C;

    font-size:13px;
}

.faq-search input {

    width:100%;

    height:100%;

    border:0;

    outline:0;

    background:transparent;

    color:#344054;

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

    font-size:11px;
}

.faq-search input::placeholder {

    color:#98A2B3;
}


/* =====================================================
   BREADCRUMB
===================================================== */

.faq-breadcrumb {

    position:relative;

    z-index:2;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-top:35px;

    color:rgba(255,255,255,.65);

    font-size:9px;
}

.faq-breadcrumb a {

    color:#ffffff;

    text-decoration:none;
}

.faq-breadcrumb i {

    font-size:7px;
}


/* =====================================================
   MAIN SECTION
===================================================== */

.faq-section {

    padding:75px 0 100px;

    background:#ffffff;
}


/* =====================================================
   CATEGORY FILTER
===================================================== */

.faq-categories {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:20px;
    margin-bottom:45px;
}

.faq-category {
    height:40px;
    padding:0 20px;
    border:1px solid #DCE4F0;
    border-radius:20px;
    background:#ffffff;
    color:#667085;
    font-family:'Poppins',sans-serif;
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    transition:.25s;
}

.faq-category:hover {

    border-color:#B9C9EA;

    background:#EEF4FF;

    color:#01219C;
}

.faq-category.active {

    border-color:#01219C;

    background:#01219C;

    color:#ffffff;
}


/* =====================================================
   LAYOUT
===================================================== */

.faq-layout {

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        280px;

    gap:40px;

    align-items:start;
}


/* =====================================================
   FAQ LIST
===================================================== */

.faq-list {

    width:100%;
}

.faq-item {

    margin-bottom:10px;

    border:1px solid #E2E8F1;

    border-radius:9px;

    background:#ffffff;

    overflow:hidden;

    transition:.25s;
}

.faq-item:hover {

    border-color:#CBD8EE;
}

.faq-item.active {

    border-color:#C8D7F5;

    box-shadow:
        0 8px 25px rgba(1,33,156,.05);
}


/* =====================================================
   QUESTION
===================================================== */

.faq-question {

    width:100%;

    min-height:64px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:20px 30px;

    border:0;

    background:#ffffff;

    color:#020D29;

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

    font-size:14px;

    font-weight:500;

    text-align:left;

    cursor:pointer;
}

.faq-question i {

    width:25px;

    height:25px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#EEF4FF;

    color:#01219C;

    font-size:14px;

    transition:.3s;
}

.faq-item.active .faq-question i {

    transform:rotate(45deg);

    background:#01219C;

    color:#ffffff;
}


/* =====================================================
   ANSWER
===================================================== */

.faq-answer {

    max-height:0;

    overflow:hidden;

    transition:
        max-height .35s ease;
}

.faq-answer p {

    margin:0;

    padding:0 50px 30px 30px;

    color:#667085;

    font-size:14px;

    line-height:1.6;
}


/* =====================================================
   NO RESULTS
===================================================== */

.faq-no-results {

    display:none;

    padding:60px 20px;

    text-align:center;

    border:1px dashed #D8E0EC;

    border-radius:10px;

    background:#F8FAFD;
}

.faq-no-results i {

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 15px;

    border-radius:50%;

    background:#EEF4FF;

    color:#01219C;
}

.faq-no-results h3 {

    margin:0 0 5px;

    font-size:14px;

    color:#344054;
}

.faq-no-results p {

    margin:0;

    color:#98A2B3;

    font-size:9px;
}


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

.faq-sidebar {

    position:sticky;

    top:110px;
}


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

.faq-help-card {

    padding:25px;

    margin-bottom:15px;

    border-radius:11px;

    background:#EEF4FF;
}

.faq-help-icon {

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:15px;

    border-radius:9px;

    background:#01219C;

    color:#ffffff;

    font-size:20px;
}

.faq-help-card h3 {

    margin:0 0 8px;

    color:#020D29;

    font-size:18px;

    font-weight:600;
}

.faq-help-card p {

    margin:0 0 18px;

    color:#667085;

    font-size:14px;

    line-height:1.5;
}

.faq-help-btn {

    height:38px;

    display:inline-flex;

    align-items:center;

    gap:7px;

    padding:0 14px;

    border-radius:6px;

    background:#01219C;

    color:#ffffff;

    font-size:13px;

    font-weight:500;

    text-decoration:none;
}


/* =====================================================
   QUICK LINKS
===================================================== */

.faq-sidebar-links {

    padding:20px;

    border:1px solid #E1E7F0;

    border-radius:10px;

    background:#ffffff;
}

.faq-sidebar-links > span {

    display:block;

    margin-bottom:16px;

    color:#98A2B3;

    font-size:14px;

    font-weight:700;
}

.faq-sidebar-links a {

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 0;

    border-bottom:1px solid #F0F2F5;

    color:#667085;

    font-size:13px;

    text-decoration:none;

    transition:.2s;
}

.faq-sidebar-links a:last-child {

    border-bottom:0;
}

.faq-sidebar-links a:hover {

    color:#01219C;
}

.faq-sidebar-links i {

    width:20px;

    color:#01219C;

    text-align:center;
}


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

.faq-cta {

    padding:55px 0;

    background:#01219C;
}

.faq-cta-inner {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;
}

.faq-cta-inner > div > span {

    display:block;

    margin-bottom:8px;

    color:#AFC3FF;

    font-size:8px;

    font-weight:700;

    letter-spacing:1px;
}

.faq-cta h2 {

    margin:0;

    color:#ffffff;

    font-size:25px;

    font-weight:600;
}

.faq-cta a {

    height:42px;

    display:flex;

    align-items:center;

    gap:9px;

    padding:0 18px;

    flex-shrink:0;

    border-radius:6px;

    background:#ffffff;

    color:#01219C;

    font-size:13px;

    font-weight:600;

    text-decoration:none;
}


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

@media(max-width:900px) {

    .faq-layout {

        grid-template-columns:1fr;
    }

    .faq-sidebar {

        position:static;

        display:grid;

        grid-template-columns:1fr 1fr;

        gap:15px;
    }

    .faq-help-card {

        margin-bottom:0;
    }

}


@media(max-width:700px) {

    .faq-hero {

        padding:125px 0 60px;
    }

    .faq-hero h1 {

        font-size:34px;
    }

    .faq-section {

        padding:55px 0 70px;
    }

    .faq-sidebar {

        display:block;
    }

    .faq-help-card {

        margin-bottom:15px;
    }

    .faq-cta-inner {

        flex-direction:column;

        align-items:flex-start;
    }

}


@media(max-width:500px) {

    .faq-hero h1 {

        font-size:29px;
    }

    .faq-hero p {

        font-size:10px;
    }

    .faq-search {

        height:48px;
    }

    .faq-categories {

        justify-content:flex-start;

        overflow-x:auto;

        flex-wrap:nowrap;

        padding-bottom:5px;
    }

    .faq-category {

        flex-shrink:0;
    }

    .faq-question {

        min-height:58px;

        padding:13px 15px;

        font-size:10px;
    }

    .faq-answer p {

        padding:0 40px 18px 15px;

        font-size:9px;
    }

}


/* =====================================================
   VISION & MISSION
===================================================== */

.vision-mission-section {
    position:relative;

    padding:100px 0;

    background:#F8FAFD;

    overflow:hidden;
}


/* =====================================================
   BACKGROUND ABSTRACT
===================================================== */

.vision-mission-section::before {
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    left:-280px;
    top:100px;

    border:1px solid #DDE7FA;

    border-radius:50%;

    box-shadow:
        0 0 0 60px #F4F7FC,
        0 0 0 120px #F8FAFD;

    pointer-events:none;
}


/* =====================================================
   CONTAINER
===================================================== */

.vision-mission-section .container {
    position:relative;

    z-index:2;

    width:100%;
    max-width:1180px;

    margin:auto;

    padding:0 20px;
}


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

.vm-header {
    max-width:650px;
    margin:0 auto 50px;
    text-align:center;
}

.vm-header .section-tag {
    display:inline-flex;
    padding:7px 14px;
    margin-bottom:13px;
    border:1px solid #CBD8F3;
    border-radius:30px;
    background:#EEF4FF;
    color:#01219C;
    font-size:12px;
    font-weight:600;
}

.vm-header h2 {
    margin:0 0 15px;
    color:#020D29;
    font-size:32px;
    line-height:1.2;
    font-weight:500;
    letter-spacing:-.5px;
}

.vm-header h2 span {
    color:#01219C;
}

.vm-header p {
    max-width:570px;
    margin:auto;
    color:#667085;
    font-size:14px;
    line-height:1.5;
}


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

.vm-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
}


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

.vm-card {
    position:relative;
    min-height:430px;
    padding:35px;
    border:1px solid #E0E7F1;
    border-radius:15px;
    background:#ffffff;
    overflow:hidden;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.vm-card:hover {
    transform:translateY(-6px);
    border-color:#C8D7F3;
    box-shadow:0 20px 50px rgba(1,33,156,.08);
}


/* =====================================================
   CARD ABSTRACT CIRCLE
===================================================== */

.vm-card::after {
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    right:-120px;
    bottom:-130px;
    border:1px solid #DCE7FA;
    border-radius:50%;
    box-shadow:
        0 0 0 35px #F6F8FC,
        0 0 0 70px #FAFBFD;
    pointer-events:none;
}


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

.vm-card-top {
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:35px;
}

.vm-icon {
    width:55px;
    height:55px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    background:#EEF4FF;
    color:#01219C;
    font-size:26px;
}

.vm-number {
    color:#C8D5EC;
    font-size:14px;
    font-weight:600;
}


/* =====================================================
   LABEL
===================================================== */

.vm-label {
    position:relative;
    z-index:2;
    display:block;
    margin-bottom:9px;
    color:#4477FE;
    font-size:12px;
    font-weight:500;
}


/* =====================================================
   TITLE
===================================================== */

.vm-card h3 {
    position:relative;
    z-index:2;
    margin:0 0 18px;
    color:#020D29;
    font-size:18px;
    line-height:1.5;
    font-weight:600;
    letter-spacing:-.3px;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.vm-card p {
    position:relative;
    z-index:2;
    max-width:510px;
    margin:0;
    color:#667085;
    font-size:14px;
    line-height:1.6;
}


/* =====================================================
   DIVIDER
===================================================== */

.vm-line {
    position:relative;
    z-index:2;
    width:100%;
    height:1px;
    margin-top:30px;
    background:#E9EDF3;
}


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

.vm-footer {
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:17px;
}

.vm-footer span {
    color:#98A2B3;
    font-size:14px;
    font-weight:400;
}

.vm-footer i {
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#EEF4FF;
    color:#01219C;
    font-size:14px;
    transition:.3s;
}

.vm-card:hover .vm-footer i {
    background:#01219C;
    color:#ffffff;
    transform:translateX(4px);
}


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

.vm-vision {
    background:
        linear-gradient(
            145deg,
            #FFFFFF 0%,
            #F8FAFF 100%
        );
}


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

.vm-mission {
    background:
        linear-gradient(
            145deg,
            #FFFFFF 0%,
            #F5F8FF 100%
        );
}

.vm-mission .vm-icon {
    background:#01219C;

    color:#ffffff;
}


/* =====================================================
   BOTTOM STATEMENT
===================================================== */

.vm-statement {
    max-width:750px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    margin:45px auto 0;
    padding:20px 25px;
    border:1px solid #E0E7F1;
    border-radius:10px;
    background:#ffffff;
    text-align:center;
    box-shadow:0 8px 25px rgba(1,33,156,.03);
}

.vm-statement i {
    color:#01219C;
    font-size:24px;
}

.vm-statement p {
    margin:0;
    color:#344054;
    font-size:14px;
    font-weight:500;
}


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

@media(max-width:800px) {

    .vision-mission-section {
        padding:75px 0;
    }

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

    .vm-header h2 {
        font-size:34px;
    }

}


@media(max-width:500px) {

    .vision-mission-section {
        padding:60px 0;
    }

    .vm-header {
        margin-bottom:35px;
    }

    .vm-header h2 {
        font-size:29px;
    }

    .vm-header p {
        font-size:10px;
    }

    .vm-card {
        min-height:auto;

        padding:25px;
    }

    .vm-card h3 {
        font-size:22px;
    }

    .vm-card p {
        font-size:9px;
    }

    .vm-statement {
        padding:17px;

        gap:10px;
    }

    .vm-statement p {
        font-size:10px;
    }

}






/* =====================================================
   OUR TEAM
===================================================== */

.our-team-section {
    position:relative;
    padding:100px 0;
    background:#ffffff;
    overflow:hidden;
}


/* =====================================================
   CONTAINER
===================================================== */

.our-team-section .container {
    position:relative;
    z-index:2;
    width:100%;
    max-width:1180px;
    margin:auto;
    padding:0 20px;
}


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

.team-header {
    max-width:650px;
    margin:0 auto 50px;
    text-align:center;
}

.team-header .section-tag {
    display:inline-flex;
    padding:7px 14px;
    margin-bottom:13px;
    border:1px solid #CBD8F3;
    border-radius:30px;
    background:#EEF4FF;
    color:#01219C;
    font-size:8px;
    font-weight:700;
    letter-spacing:.8px;
}

.team-header h2 {
    margin:0 0 15px;
    color:#020D29;
    font-size:32px;
    line-height:1.2;
    font-weight:600;
}

.team-header h2 span {
    color:#01219C;
}

.team-header p {
    max-width:600px;
    margin:auto;
    color:#667085;
    font-size:14px;
    line-height:1.5;
}


/* =====================================================
   TEAM GRID
===================================================== */

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


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

.team-card {
    position:relative;
    border:1px solid #E2E8F1;
    border-radius:12px;
    background:#ffffff;
    overflow:hidden;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.team-card:hover {
    transform:translateY(-6px);
    border-color:#C7D6F2;
    box-shadow:0 18px 40px rgba(1,33,156,.08);
}


/* =====================================================
   PHOTO
===================================================== */

.team-photo {
    position:relative;
    width:100%;
    aspect-ratio:1 / 1.08;
    overflow:hidden;
    background:#EEF4FF;
}

.team-photo::after {
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            to top,
            rgba(1,33,156,.20),
            transparent 45%
        );
    pointer-events:none;
}

.team-photo img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .5s ease;
}

.team-card:hover .team-photo img {
    transform:scale(1.04);
}


/* =====================================================
   SOCIAL
===================================================== */

.team-social {
    position:absolute;
    z-index:3;
    right:12px;
    bottom:12px;
}

.team-social a {
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#ffffff;
    color:#01219C;
    font-size:11px;
    text-decoration:none;
    box-shadow:0 5px 15px rgba(0,0,0,.12);
    transition:.25s;
}

.team-social a:hover {
    background:#01219C;
    color:#ffffff;
    transform:translateY(-2px);
}


/* =====================================================
   TEAM INFO
===================================================== */

.team-info {
    padding:20px 20px 22px;
}

.team-role {
    display:block;
    margin-bottom:7px;
    color:#4477FE;
    font-size:12px;
    font-weight:500;
}

.team-info h3 {
    margin:0 0 7px;
    color:#020D29;
    font-size:16px;
    font-weight:600;
}

.team-info p {
    min-height:35px;
    margin:0;
    color:#667085;
    font-size:14px;
}


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

@media(max-width:1000px) {

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

}


@media(max-width:700px) {

    .our-team-section {
        padding:75px 0;
    }

    .team-header {
        margin-bottom:35px;
    }

    .team-header h2 {
        font-size:34px;
    }

}


@media(max-width:500px) {

    .team-grid {
        grid-template-columns:1fr;

        max-width:350px;

        margin:auto;
    }

    .team-header h2 {
        font-size:29px;
    }

    .team-header p {
        font-size:10px;
    }

}











/* =====================================================
   APTFLOW BLOG DETAIL
===================================================== */
/* 
* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;

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

    color:#020D29;

    background:#ffffff;
}

.container {
    width:100%;

    max-width:1180px;

    margin:auto;

    padding:0 20px;
} */


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

.blog-detail-hero {
    position:relative;
    padding:180px 0 40px;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(255,255,255,.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #01219C,
            #0736C7
        );

    color:#ffffff;
}

.blog-detail-hero::before {
    content:"";
    position:absolute;
    width:650px;
    height:550px;
    right:-300px;
    top:-350px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;
    box-shadow:
        0 0 0 60px rgba(255,255,255,.025),
        0 0 0 120px rgba(255,255,255,.02);
}


/* =====================================================
   BREADCRUMB
===================================================== */

.blog-breadcrumb {
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:left;
    gap:9px;
    margin-bottom:35px;
    color:rgba(255,255,255,.55);
    font-size:12px;
    margin-top:30px;
}

.blog-breadcrumb a {
    color:#ffffff;
    text-decoration:none;
}

.blog-breadcrumb i {
    font-size:12px;
}


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

.blog-header {
    position:relative;
    z-index:2;
    max-width:900px;
    margin:auto;
    margin-left: 0px;
    text-align:left;
}

.blog-category {
    display:inline-flex;
    padding:4px 10px;
    margin-bottom:18px;
    border:1px solid #01219C;
    border-radius:30px;
    background:rgba(255,255,255,.08);
    color:#01219C;
    font-size:10px;
    font-weight:500;
}

.blog-header h1 {
    margin:0 0px 20px;
    max-width:850px;
    color:#ffffff;
    font-size:32px;
    line-height:1.4;
    font-weight:600;
}

.blog-header h1 span {
    color:#EEF4FF;
}

.blog-excerpt {
    max-width:720px;
    margin:0 auto 28px;
    color:rgba(255,255,255,.72);
    font-size:14px;
    line-height:1.8;
}


/* =====================================================
   META
===================================================== */

.blog-meta {
    display:flex;
    align-items:center;
    justify-content:left;
    flex-wrap:wrap;
    gap:18px;
}

.blog-author-meta {
    display:flex;
    align-items:center;
    gap:12px;
    text-align:left;
}

.author-avatar {
    width:55px;
    height:55px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#EEF4FF;
    color:#01219C;
    font-size:14px;
}

.avatar-img {
    width:55px;
    height:55px;
    border-radius: 50%;
}

.blog-author-meta strong {
    display:block;
    color:#ffffff;
    font-size:14px;
    font-weight:500;
}

.blog-author-meta span {
    display:block;
    margin-top:2px;
    color:rgba(255,255,255,.55);
    font-size:12px;
}

.meta-divider {
    width:1px;
    height:28px;
    background:rgba(255,255,255,.18);
}

.blog-meta-item {
    display:flex;
    align-items:center;
    gap:6px;
    color:rgba(255,255,255,.65);
    font-size:14px;
}

.blog-meta-item i {
    color:#EEF4FF;
}


/* =====================================================
   FEATURED IMAGE
===================================================== */

.blog-featured {
    position:relative;
    margin-top:80px;
    /* padding:0 0 75px; */
}

.featured-image {
    position:relative;
    z-index:3;
    width:100%;
    height:400px;
    overflow:hidden;
    border-radius:14px;
    background:#EEF4FF;
    box-shadow:0 25px 70px rgba(1,33,156,.18);
}

.featured-image img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}


/* =====================================================
   CONTENT SECTION
===================================================== */

.blog-content-section {

    padding:80px 0 100px;

    background:#ffffff;
}

.blog-layout {

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        280px;

    gap:60px;

    align-items:start;
}


/* =====================================================
   ARTICLE
===================================================== */

.blog-article {

    max-width:760px;
}

.blog-article p {

    margin:0 0 10px;

    color:#667085;

    font-size:14px;

    line-height:1.5;
}

.blog-article .article-intro {

    color:#344054;

    font-size:16px;

    line-height:1.5;

    font-weight:500;
}

.blog-article h2 {

    margin:20px 0 15px;

    color:#020D29;

    font-size:18px;

    line-height:1.35;

    font-weight:600;
}


/* =====================================================
   HIGHLIGHT
===================================================== */

.article-highlight {

    display:flex;

    gap:18px;

    margin:35px 0;

    padding:25px;

    border-left:4px solid #01219C;

    border-radius:0 9px 9px 0;

    background:#EEF4FF;
}

.article-highlight i {

    color:#01219C;

    font-size:18px;
}

.article-highlight p {

    margin:0;

    color:#01219C;

    font-size:14px;

    line-height:1.7;

    font-weight:500;
}


/* =====================================================
   ARTICLE IMAGE
===================================================== */

.article-image {

    margin:35px 0;
}

.article-image img {
    width:100%;
    height:260px;
    display:block;
    object-fit:cover;
    border-radius:10px;
}

.article-image span {
    display:block;
    margin-top:8px;
    color:#98A2B3;
    font-size:12px;
    text-align:center;
}


/* =====================================================
   CONCLUSION
===================================================== */

.article-conclusion {

    display:flex;

    gap:18px;

    margin:45px 0;

    padding:25px;

    border:1px solid #D9E4F8;

    border-radius:10px;

    background:
        linear-gradient(
            135deg,
            #F8FAFF,
            #EEF4FF
        );
}

.conclusion-icon {
    width:60px;
    height:60px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#01219C;
    color:#ffffff;
    font-size:18px;
}

.article-conclusion h3 {
    margin:0 0 8px;
    color:#020D29;
    font-size:16px;
    font-weight:600;
}

.article-conclusion p {
    margin:0;
    font-size:14px;
}


/* =====================================================
   TAGS
===================================================== */

.article-tags {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
    padding:20px 0;
    border-top:1px solid #E9EDF3;
    border-bottom:1px solid #E9EDF3;
}

.article-tags > span {
    margin-right:5px;
    color:#344054;
    font-size:12px;
    font-weight:500;
}

.article-tags a {
    padding:8px 14px;
    border-radius:20px;
    background:#F4F6F9;
    color:#667085;
    font-size:12px;
    text-decoration:none;
}

.article-tags a:hover {

    background:#EEF4FF;

    color:#01219C;
}


/* =====================================================
   SHARE
===================================================== */

.article-share {

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-top:20px;
}

.article-share > span {

    color:#667085;
    font-size:14px;
    font-weight:500;
}

.share-buttons {
    display:flex;
    gap:7px;
}

.share-buttons a {

    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #E1E6EF;
    border-radius:50%;
    color:#667085;
    font-size:14px;
    text-decoration:none;
    transition:.25s;
}

.share-buttons a:hover {

    background:#01219C;

    border-color:#01219C;

    color:#ffffff;
}


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

.blog-sidebar {

    position:sticky;

    top:110px;
}


/* =====================================================
   SIDEBAR COMMON
===================================================== */

.sidebar-label {
    display:block;
    margin-bottom:7px;
    color:#4477FE;
    font-size:12px;
    font-weight:600;
}


/* =====================================================
   TOC
===================================================== */

.toc-card {
    padding:22px;
    margin-bottom:15px;
    border:1px solid #E1E7F0;
    border-radius:10px;
    background:#ffffff;
}

.toc-card h3 {
    margin:0 0 15px;
    color:#020D29;
    font-size:16px;
    font-weight:600;
}

.toc-card a {
    display:block;
    padding:12px 0;
    border-bottom:1px solid #F0F2F5;
    color:#667085;
    font-size:14px;
    line-height:1.5;
    text-decoration:none;
    transition:.2s;
}

.toc-card a:last-child {
    border-bottom:0;
}

.toc-card a:hover {
    color:#01219C;
}


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

.author-card {
    padding:22px;
    margin-bottom:15px;
    border-radius:10px;
    background:#EEF4FF;
}

.author-profile {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
}

.author-photo {
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#01219C;
    color:#ffffff;
    font-size:14px;
}

.author-profile strong {
    display:block;
    color:#020D29;
    font-size:14px;
    font-weight: 500;
}

.author-profile span {
    display:block;
    color:#667085;
    font-size:12px;
}

.author-card p {
    margin:0;
    color:#667085;
    font-size:12px;
    line-height:1.5;
}


/* =====================================================
   NEWSLETTER
===================================================== */

.blog-newsletter {
    padding:22px;
    border-radius:10px;
    background:#01219C;
    color:#ffffff;
}

.newsletter-icon {
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:13px;
    border-radius:8px;
    background:#EEF4FF;
    color:#01219C;
    font-size:16px;
}

.blog-newsletter h3 {
    margin:0 0 7px;
    font-size:16px;
    font-weight:600;
}

.blog-newsletter p {
    margin:0 0 15px;
    color:rgba(255,255,255,.68);
    font-size:12px;
    line-height:1.5;
}

.blog-newsletter form {
    display:flex;
    flex-direction:column;
    gap:7px;
}

.blog-newsletter input {
    width:100%;
    height:37px;
    padding:0 10px;
    border:0;
    outline:0;
    border-radius:5px;
    font-family:'Poppins',sans-serif;
    font-size:12px;
}

.blog-newsletter button {
    height:37px;
    border:0;
    border-radius:5px;
    background:#ffffff;
    color:#01219C;
    font-family:'Poppins',sans-serif;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
}


/* =====================================================
   RELATED BLOGS
===================================================== */

.related-blogs {
    padding:90px 0;
    background:#F8FAFD;
}

.related-header {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    margin-bottom:35px;
}

.related-header h2 {
    margin:0;
    color:#020D29;
    font-size:32px;
    font-weight:600;
}

.related-header h2 span {
    color:#01219C;
}

.related-header > a {
    display:flex;
    align-items:center;
    gap:7px;
    color:#01219C;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
}


/* =====================================================
   RELATED GRID
===================================================== */

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

.related-card {
    border:1px solid #E1E7F0;
    border-radius:10px;
    background:#ffffff;
    overflow:hidden;
    transition:.3s;
}

.related-card:hover {
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(1,33,156,.07);
}

.related-image {
    position:relative;
    height:190px;
    overflow:hidden;
    background:#EEF4FF;
}

.related-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s;
}

.related-card:hover .related-image img {
    transform:scale(1.04);
}

.related-image span {
    position:absolute;
    top:12px;
    left:12px;
    padding:8px 12px;
    border-radius:20px;
    background:#ffffff;
    color:#01219C;
    font-size:10px;
    font-weight:600;
}

.related-content {
    padding:18px;
}

.related-date {
    display:block;
    margin-bottom:8px;
    color:#98A2B3;
    font-size:12px;
    font-weight: 500;
}

.related-content h3 {
    min-height:48px;
    margin:0 0 15px;
    color:#01219C;
    font-size:18px;
    line-height:1.5;
    font-weight:600;
}

.related-content a {
    display:flex;
    align-items:center;
    gap:7px;
    color:#01219C;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
}


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

.blog-cta {
    padding:60px 0;
    background:#01219C;
}

.blog-cta-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.blog-cta-inner span {
    display:block;
    color:#AFC3FF;
    font-size:12px;
    font-weight:600;
}

.blog-cta h2 {
    margin:0;
    color:#ffffff;
    font-size:25px;
    font-weight:600;
}

.blog-cta a {
    height:42px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 18px;
    border-radius:6px;
    background:#ffffff;
    color:#01219C;
    font-size:12px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
}


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

@media(max-width:900px) {

    .blog-layout {

        grid-template-columns:1fr;
    }

    .blog-sidebar {

        position:static;

        display:grid;

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

        gap:15px;
    }

    .toc-card {

        grid-column:span 2;
    }

}


@media(max-width:700px) {

    .blog-detail-hero {
        padding-top:140px;
        padding-bottom:0px;
    }

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

    .featured-image {

        height:350px;
    }

    .blog-content-section {

        padding:60px 0 75px;
    }

    .related-grid {

        grid-template-columns:1fr;
    }

    .blog-cta-inner {

        flex-direction:column;

        align-items:flex-start;
    }

}


@media(max-width:550px) {

    .blog-header h1 {

        font-size:29px;
    }

    .blog-excerpt {

        font-size:10px;
    }

    .blog-meta {

        flex-direction:column;

        gap:10px;
    }

    .meta-divider {

        display:none;
    }

    .featured-image {

        height:250px;

        border-radius:9px;
    }

    .blog-article .article-intro {

        font-size:12px;
    }

    .blog-article p {

        font-size:10px;
    }

    .blog-article h2 {

        font-size:21px;
    }

    .article-image img {
        height:240px;
    }

    .blog-sidebar {

        display:block;
    }

    .toc-card {

        margin-bottom:15px;
    }

    .related-header {

        display:block;
    }

    .related-header > a {

        margin-top:12px;
    }

}


/* =====================================================
   APTFLOW CONTACT / SUPPORT SECTION
===================================================== */

.contact-support-section {
    position:relative;

    padding:100px 0;

    background:#F8FAFD;

    overflow:hidden;
}


/* =====================================================
   CONTAINER
===================================================== */

.contact-support-section .container {
    width:100%;
    max-width:1180px;
    margin:auto;
    padding:0 20px;
}


/* =====================================================
   TWO COLUMN GRID
===================================================== */

.contact-support-grid {
    display:grid;
    grid-template-columns:0.8fr 1fr 1fr;
    gap:25px;
    align-items:stretch;
}

/* =====================================================
   LEFT COLUMN
===================================================== */

.contact-info-column {
    grid-column:1;
    padding:30px;
    border-radius:14px;
    background:#EEF4FF;
    border:1px solid #DCE7FA;
}

.section-tag {
    display:inline-flex;
    padding:8px 14px;
    margin-bottom:15px;
    border:1px solid #CBD8F3;
    border-radius:30px;
    background:#EEF4FF;
    color:#01219C;
    font-size:12px;
    font-weight:500;
}

.contact-info-column h2 {
    margin:0 0 15px;
    color:#020D29;
    font-size:24px;
    line-height:1.2;
    font-weight:600;
    letter-spacing:-.5px;
}

.contact-info-column h2 span {
    color:#01219C;
}

.contact-intro {
    max-width:450px;
    /* margin:0 0 35px; */
    color:#667085;
    font-size:14px;
}


/* =====================================================
   CONTACT INFORMATION ITEM
===================================================== */

.contact-info-item {
    display:flex;
    align-items:center;
    gap:15px;
    padding:17px 0;
    border-bottom:1px solid #E2E8F1;
}

.contact-info-icon {
    width:55px;
    height:55px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#ffffff;
    color:#01219C;
    font-size:18px;
}

.contact-info-content span {
    display:block;
    color:#98A2B3;
    font-size:12px;
    font-weight:500;
}

.contact-info-content a,
.contact-info-content strong {
    display:block;
    color:#020D29;
    font-size:14px;
    font-weight:500;
    text-decoration:none;
}

.contact-info-content a:hover {
    color:#01219C;
}

.contact-info-content small {
    display:block;
    margin-top:3px;
    color:#98A2B3;
    font-size:12px;
}


/* =====================================================
   INFO NOTE
===================================================== */

.contact-info-note {
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-top:25px;
    border-radius:8px;
    background:#EEF4FF;
}

.contact-info-note i {
    margin-top:2px;
    color:#01219C;
    font-size:18px;
}

.contact-info-note p {
    margin:0;
    color:#667085;
    font-size:12px;
    line-height:1.5;
}


/* =====================================================
   COLUMN 2 + 3 — CONTACT FORM
===================================================== */

.contact-form-card {
    grid-column:2 / 4;
    padding:35px;
    border:1px solid #E0E7F1;
    border-radius:14px;
    background:#ffffff;
    box-shadow:0 15px 45px rgba(1,33,156,.06);
}


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

.form-header {
    margin-bottom:25px;
}

.form-header > span {
    display:block;
    margin-bottom:7px;
    color:#4477FE;
    font-size:12px;
    font-weight:500;
}

.form-header h3 {
    margin:0 0 7px;
    color:#020D29;
    font-size:24px;
    font-weight:600;
}

.form-header p {
    margin:0;
    color:#98A2B3;
    font-size:14px;
    line-height:1.5;
}


/* =====================================================
   FORM ROW
===================================================== */

.form-row {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}


/* =====================================================
   FORM GROUP
===================================================== */

.form-group {
    margin-bottom:17px;
}

.form-group label {
    display:block;
    color:#344054;
    font-size:13px;
    font-weight:500;
}


/* =====================================================
   INPUT / SELECT / TEXTAREA
===================================================== */

.form-group input,
.form-group select,
.form-group textarea {
    width:100%;
    border:1px solid #DCE2EA;
    border-radius:6px;
    background:#ffffff;
    color:#7e7e7e;
    font-family:'Poppins', sans-serif;
    font-size:13px;
    outline:none;
    transition:border-color .2s, box-shadow .2s;
}

.form-group input,
.form-group select {
    height:43px;
    padding:0 12px;
}

.form-group textarea {
    min-height:180px;
    padding:12px;
    resize:vertical;
    line-height:1.7;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    /* color:#344054; */
    color: #7e7e7e;
}


/* =====================================================
   FOCUS
===================================================== */

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color:#01219C;
    box-shadow:0 0 0 3px rgba(1,33,156,.07);
}


/* =====================================================
   SELECT
===================================================== */

.select-wrapper {
    position:relative;
}

.select-wrapper::after {
    content:"\f078";
    position:absolute;
    top:50%;
    right:13px;
    transform:translateY(-50%);
    color:#667085;
    font-family:"Font Awesome 6 Free";
    font-size:8px;
    font-weight:900;
    pointer-events:none;
}

.select-wrapper select {
    appearance:none;
    -webkit-appearance:none;
    padding-right:35px;
    cursor:pointer;
}


/* =====================================================
   SUBMIT
===================================================== */

.form-submit {
    display:flex;
    justify-content:flex-end;
    margin-top:5px;
}

.contact-submit {
    height:43px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:0 20px;
    border:0;
    border-radius:6px;
    background:#01219C;
    color:#ffffff;
    font-family:'Poppins', sans-serif;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:
        background .25s,
        transform .25s,
        box-shadow .25s;
}

.contact-submit:hover {
    background:#001A7D;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(1,33,156,.18);
}

.contact-submit i {
    font-size:8px;
    transition:.25s;
}

.contact-submit:hover i {
    transform:translateX(3px);
}

/* =====================================================
   OPTIONAL LABEL
===================================================== */

.optional-label {
    margin-left:5px;
    color:#98A2B3;
    font-size:12px;
    font-weight:400;
}


/* =====================================================
   FILE UPLOAD BOX
===================================================== */

.file-upload-box {
    position:relative;
    width:100%;
    min-height:75px;
    border:1px dashed #C9D5E8;
    border-radius:7px;
    background:#F8FAFD;
    transition:border-color .25s, background .25s;
}

.file-upload-box:hover {
    border-color:#01219C;
    background:#F5F8FF;
}


/* =====================================================
   HIDDEN FILE INPUT
===================================================== */

.file-upload-box input[type="file"] {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    cursor:pointer;
    z-index:3;
}


/* =====================================================
   UPLOAD CONTENT
===================================================== */

.file-upload-content {
    min-height:75px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
}


/* =====================================================
   UPLOAD ICON
===================================================== */

.file-upload-icon {
    width:50px;
    height:50px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
    background:#EEF4FF;
    color:#01219C;
    font-size:18px;
}


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

.file-upload-text {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:0px;
}

.file-upload-text strong {
    color:#344054;
    font-size:14px;
    font-weight:600;
}

.file-upload-text span {
    color:#98A2B3;
    font-size:12px;
}


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

.browse-file-btn {
    position:relative;
    z-index:4;
    height:40px;
    padding:0px 20px;
    border:1px solid #C9D5E8;
    border-radius:5px;
    background:#ffffff;
    color:#01219C;
    font-family:'Poppins', sans-serif;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
}

.browse-file-btn:hover {
    border-color:#01219C;

    background:#EEF4FF;
}


/* =====================================================
   SELECTED FILE
===================================================== */

.selected-file {
    display:none;

    align-items:center;

    gap:10px;

    margin-top:8px;

    padding:8px 10px;

    border:1px solid #DCE4F0;

    border-radius:6px;

    background:#ffffff;
}


/* =====================================================
   PREVIEW
===================================================== */

.selected-file-preview {
    width:42px;
    height:42px;

    flex-shrink:0;

    overflow:hidden;

    border-radius:5px;

    background:#EEF4FF;
}

.selected-file-preview img {
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}


/* =====================================================
   FILE INFORMATION
===================================================== */

.selected-file-info {
    flex:1;

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:3px;
}

.selected-file-info strong {
    overflow:hidden;

    color:#344054;

    font-size:8px;

    font-weight:600;

    text-overflow:ellipsis;

    white-space:nowrap;
}

.selected-file-info span {
    color:#98A2B3;

    font-size:7px;
}


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

.remove-file {
    width:27px;
    height:27px;

    display:flex;

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

    flex-shrink:0;

    border:0;

    border-radius:50%;

    background:#FFF0F0;

    color:#D92D20;

    font-size:8px;

    cursor:pointer;

    transition:.2s;
}

.remove-file:hover {
    background:#D92D20;

    color:#ffffff;
}


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

@media(max-width:500px) {

    .file-upload-content {
        gap:8px;

        padding:10px;
    }

    .file-upload-text span {
        font-size:6px;
    }

    .browse-file-btn {
        padding:0 9px;

        font-size:7px;
    }

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

@media(max-width:900px) {
    .contact-support-grid {
        grid-template-columns:1fr;

        gap:45px;
    }

    .contact-info-column {
        padding-top:0;
    }

}


@media(max-width:650px) {

    .contact-support-section {
        padding:70px 0;
    }

    .contact-info-column h2 {
        font-size:32px;
    }

    .form-row {
        grid-template-columns:1fr;

        gap:0;
    }

    .contact-form-card {
        padding:25px 20px;
    }

    .form-submit {
        justify-content:stretch;
    }

    .contact-submit {
        width:100%;
    }

}


@media(max-width:450px) {

    .contact-info-column h2 {
        font-size:29px;
    }

    .contact-intro {
        font-size:10px;
    }

    .contact-info-item {
        gap:12px;
    }

    .contact-info-icon {
        width:40px;
        height:40px;
    }

}












/* =====================================================
   APTFLOW USER GUIDE
===================================================== */

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;

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

    color:#020D29;

    background:#ffffff;
}

.container {
    width:100%;

    max-width:1180px;

    margin:auto;

    padding:0 20px;
}


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

.guide-hero {
    position:relative;

    padding:125px 0 75px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(255,255,255,.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #01219C,
            #0736C7
        );

    color:#ffffff;
}

.guide-hero::before {
    content:"";

    position:absolute;

    width:600px;
    height:600px;

    right:-300px;
    top:-300px;

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

    border-radius:50%;

    box-shadow:
        0 0 0 60px rgba(255,255,255,.025),
        0 0 0 120px rgba(255,255,255,.02);
}


/* =====================================================
   BREADCRUMB
===================================================== */

.guide-breadcrumb {
    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:45px;

    color:rgba(255,255,255,.55);

    font-size:8px;
}

.guide-breadcrumb a {
    color:#ffffff;

    text-decoration:none;
}

.guide-breadcrumb i {
    font-size:7px;
}


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

.guide-hero-content {
    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;
}

.guide-hero-text {
    max-width:700px;
}

.guide-hero .section-tag {
    display:inline-flex;

    padding:7px 14px;

    margin-bottom:16px;

    border:1px solid rgba(255,255,255,.2);

    border-radius:30px;

    background:rgba(255,255,255,.08);

    color:#EEF4FF;

    font-size:8px;

    font-weight:700;

    letter-spacing:.8px;
}

.guide-hero h1 {
    margin:0 0 18px;

    color:#ffffff;

    font-size:46px;

    line-height:1.2;

    font-weight:600;

    letter-spacing:-.6px;
}

.guide-hero h1 span {
    color:#EEF4FF;
}

.guide-hero-text p {
    max-width:650px;

    margin:0;

    color:rgba(255,255,255,.7);

    font-size:11px;

    line-height:1.9;
}


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

.guide-hero-icon {
    position:relative;

    width:250px;
    height:220px;

    flex-shrink:0;
}

.guide-icon-circle {
    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:120px;
    height:120px;

    display:flex;

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

    border:1px solid rgba(255,255,255,.2);

    border-radius:50%;

    background:rgba(255,255,255,.08);

    color:#ffffff;

    font-size:38px;

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

.floating-icon {
    position:absolute;

    width:42px;
    height:42px;

    display:flex;

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

    border:1px solid rgba(255,255,255,.15);

    border-radius:9px;

    background:rgba(255,255,255,.1);

    color:#ffffff;

    font-size:12px;

    backdrop-filter:blur(5px);
}

.icon-one {
    top:15px;
    left:15px;
}

.icon-two {
    right:10px;
    top:50px;
}

.icon-three {
    left:35px;
    bottom:10px;
}


/* =====================================================
   GUIDE SECTION
===================================================== */

.user-guide-section {
    padding:80px 0 100px;

    background:#F8FAFD;
}


/* =====================================================
   MAIN LAYOUT
===================================================== */

.guide-layout {
    display:grid;

    grid-template-columns:240px minmax(0,1fr);

    gap:35px;

    align-items:start;
}


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

.guide-sidebar {
    position:sticky;

    top:100px;
}

.guide-sidebar-card {
    padding:18px;

    border:1px solid #E1E7F0;

    border-radius:11px;

    background:#ffffff;
}

.sidebar-heading {
    display:block;

    padding:5px 10px 12px;

    color:#98A2B3;

    font-size:7px;

    font-weight:700;

    letter-spacing:.9px;
}


/* =====================================================
   GUIDE NAV
===================================================== */

.guide-nav {
    display:flex;

    flex-direction:column;

    gap:2px;
}

.guide-nav a {
    display:flex;

    align-items:center;

    gap:10px;

    padding:10px;

    border-radius:6px;

    color:#667085;

    font-size:8px;

    font-weight:500;

    text-decoration:none;

    transition:.2s;
}

.guide-nav a i {
    width:15px;

    color:#98A2B3;

    text-align:center;
}

.guide-nav a:hover {
    background:#F5F7FA;

    color:#01219C;
}

.guide-nav a:hover i {
    color:#01219C;
}

.guide-nav a.active {
    background:#EEF4FF;

    color:#01219C;

    font-weight:600;
}

.guide-nav a.active i {
    color:#01219C;
}


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

.guide-support-card {
    margin-top:15px;

    padding:20px;

    border-radius:11px;

    background:#01219C;

    color:#ffffff;
}

.support-icon {
    width:38px;
    height:38px;

    display:flex;

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

    margin-bottom:12px;

    border-radius:8px;

    background:#EEF4FF;

    color:#01219C;

    font-size:12px;
}

.guide-support-card h3 {
    margin:0 0 7px;

    font-size:13px;

    font-weight:600;
}

.guide-support-card p {
    margin:0 0 15px;

    color:rgba(255,255,255,.65);

    font-size:8px;

    line-height:1.7;
}

.guide-support-card a {
    display:inline-flex;

    align-items:center;

    gap:7px;

    color:#ffffff;

    font-size:8px;

    font-weight:600;

    text-decoration:none;
}


/* =====================================================
   MAIN CONTENT
===================================================== */

.guide-content {
    min-width:0;
}

.guide-content-section {
    scroll-margin-top:100px;

    margin-bottom:20px;

    padding:32px;

    border:1px solid #E1E7F0;

    border-radius:11px;

    background:#ffffff;
}

.content-icon {
    width:42px;
    height:42px;

    display:flex;

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

    margin-bottom:16px;

    border-radius:8px;

    background:#EEF4FF;

    color:#01219C;

    font-size:13px;
}

.content-label {
    display:block;
    margin-bottom:7px;
    color:#4477FE;
    font-size:12px;
    font-weight:600;
}

.guide-content-section h2 {
    margin:0 0 12px;

    color:#020D29;

    font-size:24px;

    line-height:1.35;

    font-weight:600;
}

.guide-content-section > p {
    max-width:760px;

    margin:0 0 22px;

    color:#667085;

    font-size:10px;

    line-height:1.9;
}


/* =====================================================
   GETTING STARTED STEPS
===================================================== */

.guide-steps {
    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:25px;
}

.guide-step {
    display:flex;

    gap:15px;

    padding:15px;

    border:1px solid #E8EDF4;

    border-radius:8px;

    background:#FAFBFD;
}

.step-number {
    width:38px;
    height:38px;

    flex-shrink:0;

    display:flex;

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

    border-radius:7px;

    background:#EEF4FF;

    color:#01219C;

    font-size:8px;

    font-weight:700;
}

.guide-step h3 {
    margin:0 0 5px;

    color:#020D29;

    font-size:11px;

    font-weight:600;
}

.guide-step p {
    margin:0;

    color:#667085;

    font-size:8px;

    line-height:1.7;
}


/* =====================================================
   FEATURE LIST
===================================================== */

.guide-feature-list {
    display:grid;

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

    gap:9px;

    margin-top:20px;
}

.guide-feature-list div {
    display:flex;

    align-items:center;

    gap:8px;

    padding:11px;

    border-radius:6px;

    background:#F8FAFD;

    color:#667085;

    font-size:8px;
}

.guide-feature-list i {
    color:#01219C;

    font-size:8px;
}


/* =====================================================
   INFO BOX
===================================================== */

.guide-info-box {
    display:flex;

    align-items:flex-start;

    gap:10px;

    padding:15px;

    border-left:3px solid #01219C;

    border-radius:0 7px 7px 0;

    background:#EEF4FF;
}

.guide-info-box i {
    margin-top:2px;

    color:#01219C;

    font-size:11px;
}

.guide-info-box p {
    margin:0;

    color:#667085;

    font-size:8px;

    line-height:1.7;
}


/* =====================================================
   FINANCE CARDS
===================================================== */

.guide-finance-grid {
    display:grid;

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

    gap:12px;

    margin-top:20px;
}

.finance-guide-card {
    padding:17px;

    border:1px solid #E6EBF2;

    border-radius:8px;

    background:#FAFBFD;

    transition:.25s;
}

.finance-guide-card:hover {
    border-color:#C9D7F1;

    background:#F8FAFF;

    transform:translateY(-2px);
}

.finance-guide-card > i {
    color:#01219C;

    font-size:13px;

    margin-bottom:10px;
}

.finance-guide-card h3 {
    margin:0 0 5px;

    color:#020D29;

    font-size:10px;

    font-weight:600;
}

.finance-guide-card p {
    margin:0;

    color:#667085;

    font-size:8px;

    line-height:1.7;
}


/* =====================================================
   BOTTOM CTA
===================================================== */

.guide-bottom-cta {
    display:flex;

    align-items:center;

    gap:15px;

    margin-top:25px;

    padding:22px;

    border-radius:10px;

    background:#01219C;
}

.cta-icon {
    width:42px;
    height:42px;

    flex-shrink:0;

    display:flex;

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

    border-radius:8px;

    background:#EEF4FF;

    color:#01219C;

    font-size:13px;
}

.guide-bottom-cta > div:nth-child(2) {
    flex:1;
}

.guide-bottom-cta h3 {
    margin:0 0 4px;

    color:#ffffff;

    font-size:12px;

    font-weight:600;
}

.guide-bottom-cta p {
    margin:0;

    color:rgba(255,255,255,.6);

    font-size:8px;
}

.guide-bottom-cta a {
    display:flex;

    align-items:center;

    gap:7px;

    padding:10px 14px;

    border-radius:5px;

    background:#ffffff;

    color:#01219C;

    font-size:8px;

    font-weight:600;

    text-decoration:none;

    white-space:nowrap;
}


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

@media(max-width:850px) {

    .guide-hero {
        padding:110px 0 65px;
    }

    .guide-hero-content {
        align-items:flex-start;
    }

    .guide-hero-icon {
        width:180px;

        transform:scale(.8);
    }

    .guide-layout {
        grid-template-columns:200px minmax(0,1fr);

        gap:20px;
    }

}


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

@media(max-width:700px) {

    .guide-hero {
        padding:100px 0 55px;
    }

    .guide-hero-content {
        display:block;
    }

    .guide-hero h1 {
        font-size:34px;
    }

    .guide-hero-text p {
        font-size:10px;
    }

    .guide-hero-icon {
        display:none;
    }

    .guide-breadcrumb {
        margin-bottom:30px;
    }

    .user-guide-section {
        padding:60px 0 70px;
    }

    .guide-layout {
        display:block;
    }

    .guide-sidebar {
        position:static;

        margin-bottom:25px;
    }

    .guide-sidebar-card {
        overflow-x:auto;
    }

    .guide-nav {
        flex-direction:row;

        min-width:max-content;
    }

    .guide-nav a {
        padding:9px 12px;
    }

    .guide-support-card {
        display:none;
    }

    .guide-content-section {
        padding:25px;

        margin-bottom:15px;
    }

    .guide-content-section h2 {
        font-size:21px;
    }

    .guide-feature-list {
        grid-template-columns:1fr;
    }

    .guide-finance-grid {
        grid-template-columns:1fr;
    }

    .guide-bottom-cta {
        flex-wrap:wrap;
    }

    .guide-bottom-cta a {
        width:100%;

        justify-content:center;
    }

}


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

@media(max-width:450px) {

    .guide-hero h1 {
        font-size:29px;
    }

    .guide-content-section {
        padding:20px;
    }

    .guide-content-section > p {
        font-size:9px;
    }

    .guide-step {
        padding:12px;
    }

}




















/* =====================================================
   APTFLOW VIDEO TUTORIALS
===================================================== */

.container-career {
    width:100%;
    max-width:1180px;
    margin:auto;
    padding:0 20px;
    align-content: center;
}


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

.tutorial-hero {

    position:relative;

    padding:125px 0 75px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(255,255,255,.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #01219C,
            #0736C7
        );

    color:#ffffff;
}

.tutorial-hero::before {

    content:"";

    position:absolute;

    width:600px;
    height:600px;

    right:-300px;
    top:-300px;

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

    border-radius:50%;

    box-shadow:
        0 0 0 60px rgba(255,255,255,.025),
        0 0 0 120px rgba(255,255,255,.02);
}


/* =====================================================
   BREADCRUMB
===================================================== */

.tutorial-breadcrumb {

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:45px;

    color:rgba(255,255,255,.55);

    font-size:8px;
}

.tutorial-breadcrumb a {

    color:#ffffff;

    text-decoration:none;
}

.tutorial-breadcrumb i {

    font-size:7px;
}


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

.tutorial-hero-content {

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        1fr 430px;

    gap:60px;

    align-items:center;
}

.tutorial-hero-text {

    max-width:650px;
}

.tutorial-hero .section-tag {

    display:inline-flex;

    padding:7px 14px;

    margin-bottom:16px;

    border:1px solid rgba(255,255,255,.2);

    border-radius:30px;

    background:rgba(255,255,255,.08);

    color:#EEF4FF;

    font-size:8px;

    font-weight:700;

    letter-spacing:.8px;
}

.tutorial-hero h1 {

    margin:0 0 18px;

    color:#ffffff;

    font-size:46px;

    line-height:1.2;

    font-weight:600;

    letter-spacing:-.6px;
}

.tutorial-hero h1 span {

    color:#EEF4FF;
}

.tutorial-hero-text p {

    max-width:620px;

    margin:0;

    color:rgba(255,255,255,.7);

    font-size:11px;

    line-height:1.9;
}


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

.hero-video {

    position:relative;
}

.hero-video-image {

    position:relative;

    height:245px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.15);

    border-radius:13px;

    background:#0B2BA8;

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

.hero-video-image img {

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    opacity:.7;
}

.hero-video-image::after {

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(1,33,156,.7),
            rgba(1,33,156,.2)
        );
}

.hero-play-btn {

    position:absolute;

    z-index:3;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:65px;
    height:65px;

    display:flex;

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

    border:0;

    border-radius:50%;

    background:#ffffff;

    color:#01219C;

    font-size:16px;

    cursor:pointer;

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

    transition:.25s;
}

.hero-play-btn:hover {

    transform:
        translate(-50%,-50%)
        scale(1.08);
}

.hero-play-btn i {

    margin-left:3px;
}


/* =====================================================
   MAIN SECTION
===================================================== */

.tutorial-section {

    padding:80px 0 100px;

    background:#F8FAFD;
}


/* =====================================================
   TOOLBAR
===================================================== */

.tutorial-toolbar {

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:30px;

    margin-bottom:25px;
}

.content-label {
    display:block;
    margin-bottom:7px;
    color:#4477FE;
    font-size:12px;
    font-weight:600;
}

.tutorial-intro h2 {
    margin:0;
    color:#020D29;
    font-size:28px;
    font-weight:600;
}

.tutorial-intro h2 span {
    color:#01219C;
}


/* =====================================================
   SEARCH
===================================================== */

.tutorial-search {
    position:relative;
    width:260px;
}

.tutorial-search i {
    position:absolute;
    left:13px;
    top:50%;
    transform:translateY(-50%);
    color:#98A2B3;
    font-size:13px;
}

.tutorial-search input {
    width:100%;
    height:40px;
    padding:0 12px 0 35px;
    border:1px solid #DCE3ED;
    border-radius:6px;
    background:#ffffff;
    outline:none;
    color:#344054;
    font-family:'Poppins', sans-serif;
    font-size:13px;
}

.tutorial-search input:focus {

    border-color:#01219C;

    box-shadow:
        0 0 0 3px rgba(1,33,156,.06);
}


/* =====================================================
   CATEGORIES
===================================================== */

.tutorial-categories {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
    margin-bottom:30px;
}

.category-btn {
    height:40px;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:20px;
    padding-right:20px;
    border:1px solid #DCE3ED;
    border-radius:30px;
    background:#ffffff;
    color:#667085;
    font-family:'Poppins', sans-serif;
    font-size:13px;
    font-weight:400;
    cursor:pointer;
    transition:.2s;
}

.category-btn:hover {

    border-color:#B8C8E5;

    color:#01219C;
}

.category-btn.active {

    border-color:#01219C;

    background:#01219C;

    color:#ffffff;
}


/* =====================================================
   FEATURED TUTORIAL
===================================================== */

.featured-tutorial {

    display:grid;

    grid-template-columns:
        1.2fr .8fr;

    margin-bottom:45px;

    overflow:hidden;

    border:1px solid #DFE6F0;

    border-radius:13px;

    background:#ffffff;

    box-shadow:
        0 12px 35px rgba(1,33,156,.04);
}

.featured-video {

    position:relative;

    height:330px;

    overflow:hidden;

    background:#EEF4FF;
}

.featured-video img {

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.featured-video::after {

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(1,33,156,.3),
            rgba(1,33,156,.05)
        );

    pointer-events:none;
}

.video-duration {
    position:absolute;
    z-index:4;
    right:12px;
    bottom:12px;
    padding:5px 7px;
    border-radius:4px;
    background:rgba(0,0,0,.7);
    color:#ffffff;
    font-size:12px;
    font-weight:500;
}

.video-play-btn {
    position:absolute;
    z-index:5;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:70px;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:#ffffff;
    color:#01219C;
    font-size:22px;
    cursor:pointer;
    box-shadow:0 8px 25px rgba(0,0,0,.2);
    transition:.25s;
}

.video-play-btn:hover {
    transform:
        translate(-50%,-50%)
        scale(1.08);
}

.video-play-btn i {
    margin-left:2px;
}

.video-play-btn-small {
    position:absolute;
    z-index:5;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:#ffffff;
    color:#01219C;
    font-size:18px;
    cursor:pointer;
    box-shadow:0 8px 25px rgba(0,0,0,.2);
    transition:.25s;
}

.video-play-btn-small:hover {
    transform:
        translate(-50%,-50%)
        scale(1.08);
}

.video-play-btn-small i {
    margin-left:2px;
}


/* =====================================================
   FEATURED CONTENT
===================================================== */

.featured-content {

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:35px;
}

.video-category {
    display:block;
    margin-bottom:8px;
    color:#4477FE;
    font-size:12px;
    font-weight:500;
}

.featured-content h3 {
    margin:0 0 12px;
    color:#020D29;
    font-size:24px;
    line-height:1.35;
    font-weight:600;
}

.featured-content > p {
    margin:0 0 18px;
    color:#667085;
    font-size:14px;
    line-height:1.5;
}

.video-meta {
    display:flex;
    gap:15px;
    margin-bottom:22px;
}

.video-meta span {
    display:flex;
    align-items:center;
    gap:5px;
    color:#98A2B3;
    font-size:13px;
}

.video-meta i {
    color:#01219C;
}

.watch-btn {
    align-self:flex-start;
    display:flex;
    align-items:center;
    gap:8px;
    height:38px;
    padding:0 15px;
    border:0;
    border-radius:5px;
    background:#01219C;
    color:#ffffff;
    font-family:'Poppins', sans-serif;
    font-size:12px;
    font-weight:500;
    cursor:pointer;
    transition:.25s;
}

.watch-btn:hover {

    background:#001A7D;

    transform:translateY(-2px);
}

.watch-btn i {

    font-size:7px;
}


/* =====================================================
   VIDEO GRID
===================================================== */

.tutorial-grid {

    display:grid;

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

    gap:18px;
}


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

.tutorial-card {

    overflow:hidden;

    border:1px solid #E0E6EF;

    border-radius:10px;

    background:#ffffff;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.tutorial-card:hover {

    transform:translateY(-5px);

    border-color:#C9D7EF;

    box-shadow:
        0 15px 35px rgba(1,33,156,.07);
}


/* =====================================================
   THUMBNAIL
===================================================== */

.tutorial-thumbnail {

    position:relative;

    height:185px;

    overflow:hidden;

    background:#EEF4FF;
}

.tutorial-thumbnail img {

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:.4s;
}

.tutorial-card:hover
.tutorial-thumbnail img {

    transform:scale(1.04);
}

.tutorial-thumbnail::after {

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(1,33,156,.25),
            transparent 50%
        );

    pointer-events:none;
}


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

.tutorial-card-content {
    padding:24px;
    gap: 40px;
}

.tutorial-card-content h3 {
    min-height:40px;
    color:#01219C;
    font-size:18px;
    font-weight:600;
}

.tutorial-card-content > p {
    min-height:38px;
    margin:0 0 15px;
    color:#667085;
    font-size:14px;
    line-height:1.5;
}


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

.tutorial-card-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:12px;
    border-top:1px solid #EEF1F5;
}

.tutorial-card-footer > span {
    color:#98A2B3;
    font-size:12px;
}

.tutorial-card-footer > span i {
    margin-right:4px;
    color:#01219C;
}

.open-video {
    display:flex;
    align-items:center;
    gap:5px;
    color:#01219C;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
}

.open-video i {

    font-size:7px;

    transition:.2s;
}

.open-video:hover i {

    transform:translateX(3px);
}


/* =====================================================
   NO RESULTS
===================================================== */

.no-results {

    display:none;

    padding:60px 20px;

    text-align:center;
}

.no-results i {

    color:#98A2B3;

    font-size:28px;
}

.no-results h3 {

    margin:15px 0 5px;

    color:#344054;

    font-size:16px;
}

.no-results p {

    margin:0;

    color:#98A2B3;

    font-size:9px;
}

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

.video-modal {

    position:fixed;

    inset:0;

    z-index:99999;

    display:none;

    align-items:center;

    justify-content:center;

    padding:30px;

}


/* =====================================================
   ACTIVE STATE
===================================================== */

.video-modal.active {

    display:flex;

}


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

.video-modal-overlay {

    position:absolute;

    inset:0;

    background:rgba(2,13,41,.88);

    backdrop-filter:blur(5px);

    cursor:pointer;

}


/* =====================================================
   VIDEO CONTAINER
===================================================== */

.video-modal-container {

    position:relative;

    z-index:2;

    width:100%;

    max-width:900px;

    background:#000000;

    border-radius:10px;

    overflow:visible;

    box-shadow:
        0 30px 80px rgba(0,0,0,.35);

}


/* =====================================================
   VIDEO FRAME
===================================================== */

.video-frame {

    position:relative;

    width:100%;

    aspect-ratio:16 / 9;

    overflow:hidden;

    border-radius:10px;

    background:#000000;

}


.video-frame iframe {

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    display:block;

    border:0;

}


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

.close-video {

    position:absolute;

    z-index:10;

    top:-45px;

    right:0;

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:0;

    border-radius:50%;

    background:#ffffff;

    color:#01219C;

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

    font-size:12px;

    cursor:pointer;

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

    transition:
        background .2s,
        color .2s,
        transform .2s;

}


.close-video:hover {

    background:#01219C;

    color:#ffffff;

    transform:scale(1.05);

}


/* =====================================================
   PREVENT PAGE SCROLL WHEN MODAL IS OPEN
===================================================== */

body.video-open {

    overflow:hidden;

}


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

@media(max-width:700px) {

    .video-modal {

        padding:20px;

    }

    .video-modal-container {

        max-width:100%;

    }

    .close-video {

        top:-42px;

        right:0;

    }

}

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

@media(max-width:950px) {

    .tutorial-hero-content {

        grid-template-columns:
            1fr 350px;

        gap:30px;
    }

    .tutorial-grid {

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

}


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

@media(max-width:700px) {

    .tutorial-hero {
        padding:100px 0 60px;
    }

    .tutorial-hero-content {
        display:block;
    }

    .tutorial-hero h1 {
        font-size:34px;
    }

    .tutorial-hero-text p {
        font-size:10px;
    }

    .hero-video {
        margin-top:30px;
    }

    .hero-video-image {
        height:220px;
    }

    .tutorial-toolbar {
        display:block;
    }

    .tutorial-search {
        width:100%;
        margin-top:20px;
    }

    .featured-tutorial {
        grid-template-columns:1fr;
    }

    .featured-video {
        height:250px;
    }

    .featured-content {
        padding:25px;
    }

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

}


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

@media(max-width:450px) {

    .tutorial-hero h1 {

        font-size:29px;
    }

    .tutorial-section {

        padding:60px 0 70px;
    }

    .tutorial-intro h2 {

        font-size:25px;
    }

    .tutorial-categories {

        overflow-x:auto;

        flex-wrap:nowrap;

        padding-bottom:5px;
    }

    .category-btn {

        flex-shrink:0;
    }

    .featured-video {

        height:210px;
    }

    .tutorial-thumbnail {

        height:200px;
    }

    .video-modal {

        padding:15px;
    }

    .close-video {

        top:-42px;
    }

}