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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f7f9ff;
    color:#222;
    overflow-x:hidden;
}

/* =========================
TOP BAR
========================= */
.topbar{
    background:#fff;
    padding:10px 7%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid #eee;
    flex-wrap:wrap;
    gap:15px;
}

.top-middle{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    justify-content:center;
}

.topbar span{
    font-size:14px;
    color:#555;
}

.topbar i{
    color:#2952ff;
    margin-right:6px;
}

.top-right{
    display:flex;
    align-items:center;
    gap:15px;
    flex-wrap:wrap;
}

.top-right a{
    color:#555;
    font-size:18px;
    transition:0.3s ease;
}

.top-right a:hover{
    color:#2952ff;
    transform:scale(1.1);
}

/* =========================
LOGO
========================= */
.logo{
    display:flex;
    align-items:center;
    gap:10px;
}

.logo img{
    width:45px;
    height:auto;
    object-fit:contain;
}

.logo h2{
    font-size:24px;
    color:#111;
    font-weight:700;
    line-height:1;
}

.logo span{
    color:#2952ff;
}

/* =========================
NAVBAR
========================= */
nav{
    position:sticky;
    top:0;
 
    background:#0056D2;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 5%;
    z-index:1000;
    box-shadow:0 4px 10px rgba(0,0,0,0.15);
    border:3px solid transparent;
    overflow:visible;
}

/* Animated Border */
nav::before{
    content:'';
    position:absolute;
    inset:-2px;
    background:linear-gradient(90deg,#ff0000,#001eff,#ff0000);
    background-size:200% 200%;
    animation:flashBorder 4s linear infinite;
    z-index:0;
}

@keyframes flashBorder{
    0%{
        background-position:0% 50%;
    }
    100%{
        background-position:200% 50%;
    }
}

nav > *{
    position:relative;
    z-index:1;
}

/* =========================
NAV MENU
========================= */
.nav-menu{
    list-style:none;
    display:flex;
    align-items:center;
    gap:35px;
    margin:0;
    padding:0;
    flex:1;
    flex-wrap:wrap;
}

.nav-menu li{
    position:relative;
}

.nav-menu li a{
    color:#fff;
    text-decoration:none;
    font-weight:500;
    font-size:16px;
    transition:0.3s ease;
    position:relative;
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
}

.nav-menu li a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-6px;
    width:0%;
    height:2px;
    background:#fff;
    transition:0.3s ease;
}

.nav-menu li a:hover::after{
    width:100%;
}

/* =========================
BUTTON
========================= */
.quote-btn{
    background:#fff;
    color:#0056D2;
    padding:12px 24px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
    white-space:nowrap;
    transition:0.3s ease;
    margin-left:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:160px;
}

.quote-btn:hover{
    background:#07143d;
    color:#fff;
    transform:translateY(-2px);
}

/* =========================
DROPDOWN
========================= */
.dropdown{
    position:relative;
}

.dropdown-menu{
    position:absolute;
    top:130%;
    left:0;
    min-width:290px;
    background:#fff;
    border-radius:12px;
    padding:10px 0;
    box-shadow:0 10px 30px rgba(0,0,0,0.12);
    display:none;
    flex-direction:column;
    z-index:999;
}

.dropdown-menu li{
    width:100%;
    list-style:none;
}

.dropdown-menu li a{
    color:#222 !important;
    padding:14px 22px;
    display:block;
    font-size:15px;
    transition:0.3s ease;
}

.dropdown-menu li a::after{
    display:none;
}

.dropdown-menu li a:hover{
    background:#f2f5ff;
    color:#2952ff !important;
    padding-left:28px;
}

.dropdown:hover .dropdown-menu{
    display:flex;
}

/* =========================
HERO
========================= */
.hero{
    padding:80px 7%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:50px;
    flex-wrap:wrap;
}

.hero-text{
    flex:1;
    min-width:300px;
}

.hero-text small{
    background:#fff;
    color:#2952ff;
    padding:10px 18px;
    border-radius:30px;
    font-weight:600;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.hero-text h1{
    font-size:65px;
    line-height:1.1;
    margin:25px 0;
}

.hero-text h1 span{
    color:#2952ff;
}

.hero-text p{
    color:#666;
    line-height:1.8;
    margin-bottom:30px;
    max-width:550px;
}

.hero-btns{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.btn1{
    background:#2952ff;
    color:#fff;
    padding:15px 28px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
    transition:0.3s ease;
}

.btn2{
    border:2px solid #2952ff;
    color:#2952ff;
    padding:13px 28px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
    transition:0.3s ease;
}

.btn1:hover,
.btn2:hover{
    transform:translateY(-2px);
}

/* =========================
HERO IMAGE
========================= */
.hero-image{
    flex:1;
    min-width:300px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#fff;
    border-radius:12px;
    padding:10px;
}

.hero-image img{
    width:100%;
    max-width:600px;
    height:420px;
    object-fit:cover;
    border-radius:10px;
}

/* =========================
TRUSTED
========================= */
.trusted{
    background:#fff;
    padding:35px 7%;
    text-align:center;
}

.trusted p{
    color:#777;
    margin-bottom:25px;
    font-weight:600;
}

.brand-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:40px;
    align-items:center;
}

.brand-grid img{
    width:120px;
    margin:auto;
    opacity:0.7;
}

/* =========================
SECTION
========================= */
section{
   padding:10px 7%;
}

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title small{
    color:#2952ff;
    font-weight:700;
}

.section-title h2{
    font-size:45px;
    margin-top:10px;
}

/* =========================
SERVICES
========================= */
.services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}

/* CARD */
.service-card{
    background:#fff;
    padding:35px 28px;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(0,0,0,0.06);
    transition:0.35s ease;
    position:relative;
    overflow:hidden;
}

.service-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,#2952ff,#8e44ff,#2ecc71);
    transform:scaleX(0);
    transform-origin:left;
    transition:0.4s ease;
}

.service-card:hover::before{
    transform:scaleX(1);
}

.service-card:hover{
    transform:translateY(-12px);
    box-shadow:0 18px 40px rgba(0,0,0,0.12);
}

/* ICON */
.service-icon{
    width:65px;
    height:65px;
    border-radius:16px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:26px;
    color:#fff;
    margin-bottom:18px;
}

/* COLORS */
.blue{background:#4d7cff;}
.green{background:#2ecc71;}
.orange{background:#ff9f43;}
.purple{background:#8e44ff;}
.red{background:#ff4d4d;}
.darkblue{background:#1e3a8a;}
.teal{background:#14b8a6;}

/* TEXT */
.service-card h3{
    margin-bottom:10px;
    font-size:18px;
    font-weight:600;
}

.service-card p{
    color:#666;
    line-height:1.6;
    font-size:14.5px;
}

/* LINK */
.service-link{
    display:inline-block;
    margin-top:15px;
    color:#2952ff;
    font-weight:600;
    text-decoration:none;
    transition:0.3s;
}

.service-link:hover{
    color:#07143d;
    transform:translateX(5px);
}
.service-hero-bg{
    height:420px;
    background-size:cover;
    background-position:center;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
}

.service-hero-bg .overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.6);
}

.service-hero-bg .text{
    position:relative;
    text-align:center;
    max-width:750px;
    padding:20px;
}

.service-hero-bg h2{
    font-size:42px;
    margin-bottom:10px;
}

.service-hero-bg p{
    font-size:16px;
    opacity:0.9;
}

/* INFO SECTION */
.service-info{
    display:flex;
    gap:50px;
    padding:70px 10%;
    align-items:center;
}

.service-info .left h3{
    font-size:28px;
    margin-bottom:15px;
}

.service-info .left p{
    color:#555;
    line-height:1.8;
    font-size:15px;
}

.service-info .right img{
    width:100%;
    border-radius:14px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}
/* =========================
STATS
========================= */
.stats{
    background:#07143d;
    color:#fff;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:40px;
    text-align:center;
}

/* =========================
CONTACT
========================= */
.contact-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
}

.contact-form{
    background:#fff;
    padding:40px;
    border-radius:20px;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:16px;
    margin-bottom:20px;
    border:1px solid #ddd;
    border-radius:10px;
    font-family:'Poppins',sans-serif;
    outline:none;
}

.contact-form button{
    width:100%;
    padding:16px;
    border:none;
    background:#2952ff;
    color:#fff;
    border-radius:10px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s ease;
}

.contact-form button:hover{
    background:#07143d;
}

.map{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
}

.map iframe{
    width:100%;
    height:100%;
    min-height:450px;
    border:none;
}

/* =========================
FOOTER
========================= */
footer{
    background:#07143d;
    color:#fff;
    padding:70px 7% 20px;
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:40px;
}

.footer-grid h3{
    margin-bottom:20px;
}

.footer-grid p,
.footer-grid a{
    color:#ccc;
    text-decoration:none;
    line-height:2;
}

.copy{
    border-top:1px solid rgba(255,255,255,0.1);
    margin-top:40px;
    padding-top:20px;
    text-align:center;
    color:#ccc;
}

/* =========================
CHAT BUTTON
========================= */
.chat-btn{
    position:fixed;
    bottom:25px;
    right:25px;
    width:65px;
    height:65px;
    background:#2952ff;
    color:#fff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    box-shadow:0 10px 30px rgba(0,0,0,0.2);
    cursor:pointer;
    z-index:999;
}

/* =========================
TABLET
========================= */
@media(max-width:992px){

    .topbar{
        justify-content:center;
        text-align:center;
    }

    nav{
        flex-direction:column;
        gap:18px;
        padding:16px 5%;
    }

    .nav-menu{
        justify-content:center;
        gap:20px;
    }

    .quote-btn{
        margin-left:0;
        width:220px;
    }

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

    .hero-text h1{
        font-size:48px;
    }

    .hero-text p{
        margin:auto;
    }

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

/* =========================
MOBILE
========================= */
@media(max-width:768px){

    .topbar{
        flex-direction:column;
    }

    .top-middle{
        flex-direction:column;
        gap:10px;
    }

    .nav-menu{
        gap:15px;
        justify-content:center;
    }

    .nav-menu li a{
        font-size:14px;
    }

    .hero{
        padding:60px 5%;
    }

    .hero-text h1{
        font-size:36px;
    }

    .section-title h2{
        font-size:30px;
    }

    .hero-image img{
        height:320px;
    }

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

    .dropdown-menu{
        position:relative;
        top:10px;
        width:100%;
        min-width:100%;
        box-shadow:none;
        border-radius:10px;
    }
}

/* =========================
SMALL MOBILE
========================= */
@media(max-width:480px){

    .hero-text h1{
        font-size:28px;
    }

    .hero-btns{
        flex-direction:column;
    }

    .btn1,
    .btn2{
        width:100%;
        text-align:center;
    }

    .hero-image img{
        height:260px;
    }

    .quote-btn{
        width:100%;
    }

    .nav-menu{
        flex-direction:column;
        width:100%;
    }

    .nav-menu li{
        width:100%;
        text-align:center;
    }

    .nav-menu li a{
        justify-content:center;
    }
}
/* HERO */
.dynamic-hero{
    height:60vh;
    background-size:cover;
    background-position:center;
    position:relative;
    display:flex;
    align-items:center;
    padding:0 8%;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.65);
}

.hero-content{
    position:relative;
    z-index:2;
    color:#fff;
    max-width:650px;
}

.hero-content small{
    background:#2952ff;
    padding:10px 20px;
    border-radius:30px;
    font-weight:600;
}

.hero-content h1{
    font-size:65px;
    margin:25px 0;
    line-height:1.1;
}

.hero-content p{
    font-size:18px;
    line-height:1.8;
}

.hero-btn{
    display:inline-block;
    margin-top:30px;
    background:#2952ff;
    color:#fff;
    padding:15px 30px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
}

/* DETAILS */
.service-details{
    padding:90px 8%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.details-left h2{
    font-size:42px;
    margin-bottom:20px;
}

.details-left p{
    color:#666;
    line-height:1.9;
    margin-bottom:20px;
}

.details-left ul{
    margin-top:30px;
}

.details-left ul li{
    list-style:none;
    margin-bottom:15px;
    font-weight:500;
}

.details-left ul li i{
    color:#2952ff;
    margin-right:10px;
}

.details-right img{
    width:100%;
    height:500px;
    object-fit:cover;
    border-radius:20px;
}

/* GRID */
.services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

.service-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    text-decoration:none;
    color:#222;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transition:0.3s;
}

.service-card:hover{
    transform:translateY(-10px);
}

.service-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.service-card h3{
    padding:20px 20px 10px;
}

.service-card p{
    padding:0 20px 25px;
    color:#666;
}

/* MOBILE */
@media(max-width:900px){

    .dynamic-hero{
        height:75vh;
    }

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

    .service-details{
        grid-template-columns:1fr;
    }

}
/*990*/

/* ============================================================
   BOZALIGHTIT SOLUTIONS
   PROJECTS PAGE
   VISUAL PORTFOLIO GALLERY
============================================================ */


/* ============================================================
   PAGE
============================================================ */

.projects-page {
    width: 100%;
    min-height: 100vh;

    background:
        #ffffff;

    color: #0a0d1f;
}


/* ============================================================
   INTRO SECTION
============================================================ */

.projects-page-intro {
    position: relative;

    padding: 100px 20px 70px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(0, 86, 210, 0.07),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(255, 127, 80, 0.10),
            transparent 28%
        ),
        #ffffff;
}


.projects-page-intro::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -120px;
    top: -120px;

    border-radius: 50%;

    background:
        rgba(255, 127, 80, 0.10);

    pointer-events: none;
}


.projects-page-intro::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    left: -100px;
    bottom: -120px;

    border-radius: 50%;

    background:
        rgba(0, 86, 210, 0.07);

    pointer-events: none;
}


.projects-intro-inner {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1000px;

    margin: 0 auto;

    text-align: center;
}


.projects-intro-eyebrow {
    display: inline-flex;

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

    gap: 12px;

    margin-bottom: 16px;

    color: #ff7f50;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.projects-intro-eyebrow span {
    display: block;

    width: 35px;
    height: 2px;

    background: #ff7f50;
}


.projects-page-intro h1 {
    margin: 0;

    font-size:
        clamp(
            42px,
            7vw,
            78px
        );

    line-height: 0.95;

    font-weight: 950;

    letter-spacing: -2px;

    color: #0a0d1f;
}


.projects-page-intro p {
    max-width: 700px;

    margin: 22px auto 0;

    font-size: 16px;

    line-height: 1.8;

    color: #666666;
}


/* ============================================================
   CATEGORY SECTION
============================================================ */

.projects-category-section {
    position: relative;

    z-index: 10;

    padding: 0 20px 40px;

    background: #ffffff;
}


.projects-category-navigation {
    width: 100%;
    max-width: 1250px;

    margin: 0 auto;

    display: flex;

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

    flex-wrap: wrap;

    gap: 10px;
}


.projects-category-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 11px 16px;

    border:
        1px solid
        #e4e7ec;

    border-radius: 50px;

    background: #ffffff;

    color: #555;

    text-decoration: none;

    font-size: 12px;
    font-weight: 800;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.projects-category-link:hover {
    transform: translateY(-2px);

    color: #0056d2;

    border-color: #0056d2;

    box-shadow:
        0 8px 20px
        rgba(0, 86, 210, 0.10);
}


.projects-category-link.active {
    color: #ffffff;

    background: #0056d2;

    border-color: #0056d2;

    box-shadow:
        0 8px 20px
        rgba(0, 86, 210, 0.22);
}


.projects-category-icon {
    width: 28px;
    height: 28px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(0, 86, 210, 0.08);

    color: #0056d2;

    transition:
        background 0.25s ease,
        color 0.25s ease;
}


.projects-category-link.active
.projects-category-icon {
    background:
        rgba(255, 255, 255, 0.15);

    color: #ffffff;
}


/* ============================================================
   EXPLORER SECTION
============================================================ */

.projects-explorer-section {
    width: 100%;

    padding:
        40px 20px
        100px;

    background:
        #f7f8fa;
}


.projects-explorer-container {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;
}


/* ============================================================
   GALLERY WRAPPER
============================================================ */

.projects-gallery-wrapper {
    width: 100%;
}


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

.projects-gallery-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 38px;
}


.projects-gallery-heading {
    max-width: 750px;
}


.projects-gallery-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 11px;

    color: #0056d2;

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

    letter-spacing: 2px;

    text-transform: uppercase;
}


.projects-gallery-eyebrow span {
    display: block;

    width: 25px;
    height: 2px;

    background: #ff7f50;
}


.projects-gallery-heading h2 {
    margin: 0 0 12px;

    color: #0a0d1f;

    font-size:
        clamp(
            32px,
            4vw,
            50px
        );

    line-height: 1;

    font-weight: 950;

    letter-spacing: -1.5px;
}


.projects-gallery-heading p {
    margin: 0;

    max-width: 650px;

    color: #707070;

    font-size: 15px;

    line-height: 1.7;
}


.projects-gallery-count {
    min-width: 100px;

    display: flex;

    flex-direction: column;

    align-items: flex-end;
}


.projects-gallery-count strong {
    display: block;

    color: #0056d2;

    font-size: 46px;

    line-height: 0.9;

    font-weight: 950;
}


.projects-gallery-count span {
    margin-top: 7px;

    color: #777777;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;
}


/* ============================================================
   VISUAL PROJECT GRID
============================================================ */

.projects-visual-grid {
    display: grid;

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

    gap: 25px;

    width: 100%;
}


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

.project-visual-card {
    position: relative;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    background: #ffffff;

    border:
        1px solid
        #e4e6e9;

    cursor: pointer;

    outline: none;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


.project-visual-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(0, 86, 210, 0.55);

    box-shadow:
        0 25px 55px
        rgba(0, 0, 0, 0.12);
}


.project-visual-card:focus-visible {
    outline:
        3px solid
        rgba(0, 86, 210, 0.35);

    outline-offset: 4px;
}


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

.project-visual-image {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #eeeeee;
}


.project-visual-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.65s
        cubic-bezier(
            0.2,
            0.7,
            0.2,
            1
        );
}


.project-visual-card:hover
.project-visual-image img {
    transform:
        scale(1.06);
}


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

.project-visual-overlay {
    position: absolute;

    inset: 0;

    display: flex;

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

    background:
        linear-gradient(
            135deg,
            rgba(0, 86, 210, 0.88),
            rgba(10, 13, 31, 0.90)
        );

    opacity: 0;

    transition:
        opacity 0.35s ease;
}


.project-visual-card:hover
.project-visual-overlay,
.project-visual-card:focus-visible
.project-visual-overlay {
    opacity: 1;
}


.project-visual-overlay-content {
    display: flex;

    align-items: center;

    gap: 12px;

    color: #ffffff;

    transform:
        translateY(10px);

    transition:
        transform 0.35s ease;
}


.project-visual-card:hover
.project-visual-overlay-content {
    transform:
        translateY(0);
}


.project-view-label {
    font-size: 11px;

    font-weight: 900;

    letter-spacing: 2px;
}


.project-view-icon {
    width: 43px;
    height: 43px;

    display: flex;

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

    border:
        1px solid
        rgba(255,255,255,0.6);

    border-radius: 50%;

    font-size: 14px;
}


/* ============================================================
   PROJECT NUMBER
============================================================ */

.project-visual-number {
    position: absolute;

    top: 15px;
    left: 15px;

    min-width: 43px;
    height: 43px;

    display: flex;

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

    background:
        rgba(
            10,
            13,
            31,
            0.90
        );

    color: #ffffff;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1px;
}


/* ============================================================
   FEATURED
============================================================ */

.project-visual-featured {
    position: absolute;

    top: 15px;
    right: 15px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        8px 11px;

    background: #ff7f50;

    color: #ffffff;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;
}


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

.project-visual-image-count {
    position: absolute;

    right: 15px;
    bottom: 15px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        7px 10px;

    background:
        rgba(
            10,
            13,
            31,
            0.88
        );

    color: #ffffff;

    font-size: 10px;

    font-weight: 800;
}


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

.project-visual-no-image {
    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

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

    gap: 12px;

    color: #999999;
}


.project-visual-no-image i {
    font-size: 42px;
}


.project-visual-no-image span {
    font-size: 11px;

    font-weight: 800;
}


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

.project-visual-content {
    flex: 1;

    display: flex;

    flex-direction: column;

    padding:
        21px 22px 20px;
}


.project-visual-category {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 9px;

    color: #0056d2;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.project-visual-category span {
    width: 19px;
    height: 2px;

    background: #ff7f50;
}


.project-visual-content h3 {
    margin: 0;

    color: #0a0d1f;

    font-size: 21px;

    line-height: 1.25;

    font-weight: 900;
}


.project-visual-client {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 9px;

    color: #777777;

    font-size: 11px;

    font-weight: 600;
}


.project-visual-client i {
    color: #0056d2;
}


.project-visual-content p {
    margin:
        11px 0 0;

    color: #777777;

    font-size: 12px;

    line-height: 1.65;
}


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

.project-visual-footer {
    display: flex;

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

    margin-top: auto;
    padding-top: 17px;

    border-top:
        1px solid
        #eeeeee;

    color: #0a0d1f;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.project-visual-footer i {
    color: #0056d2;

    transition:
        transform 0.3s ease;
}


.project-visual-card:hover
.project-visual-footer i {
    transform:
        translateX(7px);
}


/* ============================================================
   EMPTY STATE
============================================================ */

.projects-empty-state {
    max-width: 700px;

    margin:
        30px auto;

    padding:
        70px 35px;

    text-align: center;

    background: #ffffff;

    border:
        1px solid
        #e5e5e5;

    box-shadow:
        0 20px 50px
        rgba(0,0,0,0.06);
}


.projects-empty-icon {
    width: 70px;
    height: 70px;

    display: flex;

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

    margin:
        0 auto 20px;

    border-radius: 50%;

    background:
        rgba(0,86,210,0.08);

    color: #0056d2;

    font-size: 28px;
}


.projects-empty-label {
    display: block;

    margin-bottom: 8px;

    color: #ff7f50;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.projects-empty-state h2 {
    margin:
        0 0 12px;

    color: #0a0d1f;

    font-size: 32px;

    font-weight: 900;
}


.projects-empty-state p {
    max-width: 540px;

    margin:
        0 auto 25px;

    color: #777777;

    font-size: 14px;

    line-height: 1.7;
}


.projects-btn {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        13px 20px;

    background: #0056d2;

    color: #ffffff;

    text-decoration: none;

    font-size: 12px;

    font-weight: 800;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


.projects-btn:hover {
    background: #0a0d1f;

    color: #ffffff;

    transform:
        translateY(-2px);
}


/* ============================================================
   DATABASE ERROR
============================================================ */

.projects-error-section {
    padding:
        100px 20px;
}


.projects-error-box {
    max-width: 600px;

    margin: 0 auto;

    padding: 60px 30px;

    text-align: center;

    background: #ffffff;

    border:
        1px solid
        #e5e5e5;

    box-shadow:
        0 20px 50px
        rgba(0,0,0,0.07);
}


.projects-error-icon {
    width: 70px;
    height: 70px;

    display: flex;

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

    margin:
        0 auto 20px;

    border-radius: 50%;

    background:
        rgba(255,127,80,0.10);

    color: #ff7f50;

    font-size: 28px;
}


.projects-error-box h1 {
    margin:
        0 0 12px;

    color: #0a0d1f;

    font-size: 30px;

    font-weight: 900;
}


.projects-error-box p {
    margin:
        0 0 25px;

    color: #777777;

    line-height: 1.7;
}


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

.boza-project-modal {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

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

    padding: 25px;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


.boza-project-modal.show {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


.boza-project-modal-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(
            5,
            8,
            18,
            0.88
        );

    backdrop-filter:
        blur(7px);
}


.boza-project-modal-dialog {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1150px;

    max-height:
        calc(100vh - 50px);

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.20
        );

    box-shadow:
        0 35px 100px
        rgba(0,0,0,0.35);

    transform:
        translateY(20px)
        scale(0.98);

    transition:
        transform 0.3s ease;
}


.boza-project-modal.show
.boza-project-modal-dialog {
    transform:
        translateY(0)
        scale(1);
}


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

.boza-project-modal-header {
    display: flex;

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

    gap: 20px;

    padding:
        18px 22px;

    background: #0a0d1f;

    color: #ffffff;
}


.boza-modal-category {
    display: block;

    margin-bottom: 5px;

    color: #ff7f50;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.boza-project-modal-header h2 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            21px,
            3vw,
            30px
        );

    line-height: 1.2;

    font-weight: 900;
}


.boza-project-modal-close {
    flex: 0 0 auto;

    width: 43px;
    height: 43px;

    display: flex;

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

    border:
        1px solid
        rgba(255,255,255,0.25);

    border-radius: 50%;

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

    color: #ffffff;

    cursor: pointer;

    font-size: 17px;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


.boza-project-modal-close:hover {
    background: #ff7f50;

    transform:
        rotate(90deg);
}


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

.boza-project-modal-body {
    display: grid;

    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(280px, 0.75fr);

    min-height: 0;

    flex: 1;

    overflow: hidden;

    background: #f7f8fa;
}


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

.boza-project-main-image {
    position: relative;

    min-width: 0;
    min-height: 0;

    display: flex;

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

    padding: 25px;

    background: #11131d;

    overflow: hidden;
}


.boza-project-main-image img {
    display: block;

    max-width: 100%;
    max-height: 60vh;

    width: auto;
    height: auto;

    object-fit: contain;

    user-select: none;

    transition:
        opacity 0.2s ease;
}


.boza-gallery-arrow {
    position: absolute;

    top: 50%;

    z-index: 4;

    width: 45px;
    height: 45px;

    display: flex;

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

    border:
        1px solid
        rgba(255,255,255,0.30);

    border-radius: 50%;

    background:
        rgba(0,0,0,0.50);

    color: #ffffff;

    cursor: pointer;

    transform:
        translateY(-50%);

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


.boza-gallery-arrow:hover {
    background: #0056d2;

    transform:
        translateY(-50%)
        scale(1.06);
}


.boza-gallery-prev {
    left: 20px;
}


.boza-gallery-next {
    right: 20px;
}


.boza-gallery-counter {
    position: absolute;

    right: 20px;
    bottom: 20px;

    padding:
        7px 11px;

    background:
        rgba(0,0,0,0.65);

    color: #ffffff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;
}


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

.boza-project-modal-info {
    display: flex;

    flex-direction: column;

    padding: 28px;

    overflow-y: auto;

    background: #ffffff;
}


.boza-modal-featured {
    display: inline-flex;

    align-items: center;

    align-self: flex-start;

    gap: 7px;

    padding:
        8px 11px;

    margin-bottom: 18px;

    background:
        rgba(
            255,
            127,
            80,
            0.12
        );

    color: #ff6b3d;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.boza-modal-client {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 18px;

    color: #555555;

    font-size: 12px;

    font-weight: 700;
}


.boza-modal-client i {
    color: #0056d2;
}


.boza-modal-client span {
    color: #999999;

    font-weight: 500;
}


.boza-modal-description {
    margin: 0;

    color: #666666;

    font-size: 14px;

    line-height: 1.8;
}


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

.boza-modal-actions {
    margin-top: auto;

    padding-top: 25px;
}


.boza-modal-project-button {
    display: flex;

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

    gap: 15px;

    width: 100%;

    padding:
        14px 17px;

    background: #0056d2;

    color: #ffffff;

    text-decoration: none;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


.boza-modal-project-button:hover {
    background: #0a0d1f;

    color: #ffffff;

    transform:
        translateY(-2px);
}


/* ============================================================
   THUMBNAILS
============================================================ */

.boza-project-thumbnails {
    display: flex;

    align-items: center;

    gap: 9px;

    min-height: 85px;

    padding:
        12px 18px;

    overflow-x: auto;

    background: #0a0d1f;

    scrollbar-width: thin;
}


.boza-project-thumbnail {
    flex:
        0 0 75px;

    width: 75px;
    height: 58px;

    padding: 0;

    overflow: hidden;

    border:
        2px solid
        transparent;

    background: #222631;

    cursor: pointer;

    opacity: 0.55;

    transition:
        opacity 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


.boza-project-thumbnail:hover {
    opacity: 0.85;

    transform:
        translateY(-2px);
}


.boza-project-thumbnail.active {
    opacity: 1;

    border-color: #ff7f50;
}


.boza-project-thumbnail img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ============================================================
   NO IMAGES IN MODAL
============================================================ */

.boza-modal-no-images {
    width: 100%;

    display: flex;

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

    gap: 10px;

    color: #aaaaaa;

    font-size: 11px;

    font-weight: 700;
}


/* ============================================================
   BODY LOCK
============================================================ */

body.boza-modal-open {
    overflow: hidden;
}


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

@media (max-width: 1050px) {

    .projects-visual-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .boza-project-modal-body {
        grid-template-columns:
            1fr;
    }


    .boza-project-main-image {
        min-height: 420px;
    }


    .boza-project-main-image img {
        max-height: 50vh;
    }


    .boza-project-modal-info {
        max-height: 300px;

        overflow-y: auto;
    }


    .boza-modal-actions {
        margin-top: 20px;
    }

}


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

@media (max-width: 700px) {

    .projects-page-intro {
        padding:
            75px 18px 50px;
    }


    .projects-page-intro h1 {
        font-size: 43px;

        letter-spacing: -1px;
    }


    .projects-page-intro p {
        font-size: 14px;
    }


    .projects-category-section {
        padding:
            0 15px 30px;
    }


    .projects-category-navigation {
        justify-content: flex-start;

        flex-wrap: nowrap;

        overflow-x: auto;

        padding-bottom: 5px;

        scrollbar-width: none;
    }


    .projects-category-navigation::-webkit-scrollbar {
        display: none;
    }


    .projects-category-link {
        flex:
            0 0 auto;

        white-space: nowrap;
    }


    .projects-explorer-section {
        padding:
            30px 15px 70px;
    }


    .projects-gallery-header {
        align-items: flex-start;

        flex-direction: column;

        margin-bottom: 27px;
    }


    .projects-gallery-heading h2 {
        font-size: 34px;
    }


    .projects-gallery-heading p {
        font-size: 13px;
    }


    .projects-gallery-count {
        align-items: flex-start;

        flex-direction: row;

        gap: 8px;
    }


    .projects-gallery-count strong {
        font-size: 30px;
    }


    .projects-gallery-count span {
        align-self: center;

        margin-top: 0;
    }


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

        gap: 20px;
    }


    .project-visual-image {
        aspect-ratio: 4 / 3;
    }


    .project-visual-content {
        padding:
            18px;
    }


    .project-visual-content h3 {
        font-size: 20px;
    }


    /* --------------------------------------------------------
       MODAL
    -------------------------------------------------------- */

    .boza-project-modal {
        padding: 0;
    }


    .boza-project-modal-dialog {
        width: 100%;
        height: 100%;

        max-width: none;
        max-height: none;

        border: 0;
    }


    .boza-project-modal-header {
        padding:
            15px 16px;
    }


    .boza-project-modal-header h2 {
        font-size: 21px;
    }


    .boza-project-modal-body {
        display: flex;

        flex-direction: column;

        overflow-y: auto;
    }


    .boza-project-main-image {
        flex:
            0 0 auto;

        min-height:
            42vh;

        height:
            42vh;

        padding:
            15px;
    }


    .boza-project-main-image img {
        max-width: 100%;
        max-height: 100%;
    }


    .boza-gallery-arrow {
        width: 40px;
        height: 40px;
    }


    .boza-gallery-prev {
        left: 10px;
    }


    .boza-gallery-next {
        right: 10px;
    }


    .boza-gallery-counter {
        right: 12px;
        bottom: 12px;
    }


    .boza-project-modal-info {
        flex:
            0 0 auto;

        max-height: none;

        padding:
            20px;
    }


    .boza-modal-description {
        font-size: 13px;
    }


    .boza-modal-actions {
        margin-top: 20px;
    }


    .boza-project-thumbnails {
        min-height: 72px;

        padding:
            8px 12px;
    }


    .boza-project-thumbnail {
        flex-basis: 65px;

        width: 65px;
        height: 50px;
    }

}


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

@media (max-width: 400px) {

    .projects-page-intro h1 {
        font-size: 36px;
    }


    .project-visual-number {
        top: 10px;
        left: 10px;

        min-width: 38px;
        height: 38px;
    }


    .project-visual-featured {
        top: 10px;
        right: 10px;

        padding:
            7px 9px;
    }


    .project-visual-image-count {
        right: 10px;
        bottom: 10px;
    }


    .boza-project-main-image {
        min-height: 36vh;

        height: 36vh;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .project-visual-card,
    .project-visual-image img,
    .project-visual-overlay,
    .project-visual-overlay-content,
    .project-visual-footer i,
    .boza-project-modal,
    .boza-project-modal-dialog,
    .boza-project-modal-close,
    .boza-gallery-arrow,
    .boza-project-thumbnail {
        transition: none !important;
    }

}
/* ============================================================
   SIMPLE PROJECT IMAGE GALLERY
============================================================ */

.projects-visual-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
}


/* ============================================================
   PROJECT IMAGE CARD
============================================================ */

.project-visual-card {
    position: relative;
    width: 100%;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.project-visual-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.12);
}


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

.project-visual-image {
    width: 100%;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f6f8;
    overflow: hidden;
}


/* ============================================================
   FULL IMAGE — NO CROPPING
============================================================ */

.project-visual-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}


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

.project-visual-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    color: #777;
}

.project-visual-no-image i {
    font-size: 32px;
}


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

@media (max-width: 1100px) {

    .projects-visual-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}


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

@media (max-width: 800px) {

    .projects-visual-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .project-visual-image {
        height: 220px;
    }

}


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

@media (max-width: 520px) {

    .projects-visual-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .project-visual-image {
        height: 170px;
    }

    .project-visual-card {
        border-radius: 7px;
    }

}
/* =========================================================
   BOZALIGHTIT MODERN HOMEPAGE
========================================================= */

:root{
    --boza-blue:#0056D2;
    --boza-blue-dark:#07143d;
    --boza-orange:#FF7F50;
    --boza-dark:#0a0d1f;
    --boza-text:#222;
    --boza-muted:#687080;
    --boza-light:#f7f9ff;
}

/* =========================================================
   BOZALIGHTIT HERO — FULLY RESPONSIVE
========================================================= */

.boza-home-hero{
    position:relative;
    /*min-height:clamp(620px, 90vh, 820px);*/
    padding:clamp(50px, 7vw, 90px) clamp(18px, 5vw, 7%) clamp(70px, 8vw, 100px);
    overflow:hidden;

    background:
        radial-gradient(
            circle at 8% 25%,
            rgba(0,86,210,.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 30%,
            rgba(255,127,80,.10),
            transparent 28%
        ),
        #f7f9ff;
}


/* =========================================================
   BACKGROUND GLOWS
========================================================= */

.hero-bg-glow{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter:blur(10px);
    max-width:100vw;
}

.hero-bg-glow-blue{
    width:clamp(280px, 35vw, 500px);
    height:clamp(280px, 35vw, 500px);

    left:clamp(-250px, -15vw, -80px);
    bottom:clamp(-300px, -18vw, -100px);

    background:rgba(0,86,210,.08);
}

.hero-bg-glow-orange{
    width:clamp(250px, 30vw, 420px);
    height:clamp(250px, 30vw, 420px);

    right:clamp(-200px, -12vw, -70px);
    top:clamp(-180px, -12vw, -70px);

    background:rgba(255,127,80,.08);
}


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

.boza-hero-container{
    position:relative;
    z-index:3;

    width:100%;
    max-width:1450px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1.05fr);

    align-items:center;

    gap:clamp(25px, 4vw, 60px);
}


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

.boza-hero-content{
    position:relative;
    z-index:10;

    width:100%;
    max-width:650px;
}

.hero-badge{
    display:inline-flex;

    align-items:center;
    gap:10px;

    max-width:100%;

    padding:10px 16px;

    background:rgba(255,255,255,.85);

    border:1px solid rgba(0,86,210,.08);
    border-radius:50px;

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

    color:#0056D2;

    font-size:clamp(9px, .7vw, 10px);
    font-weight:900;

    letter-spacing:1.5px;

    white-space:normal;
}

.badge-dot{
    width:8px;
    height:8px;

    flex-shrink:0;

    border-radius:50%;

    background:#2ecc71;

    box-shadow:
        0 0 0 5px rgba(46,204,113,.12);
}


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

.boza-hero-content h1{
    margin:clamp(20px, 2.5vw, 28px) 0 clamp(16px, 2vw, 22px);

    color:#0a0d1f;

    font-size:
        clamp(
            40px,
            5vw,
            76px
        );

    line-height:1.02;

    letter-spacing:
        clamp(-3.5px, -.25vw, -1.5px);

    font-weight:900;

    overflow-wrap:break-word;
}

.boza-hero-content h1 span{
    color:#0056D2;
}


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

.boza-hero-content > p{
    width:100%;
    max-width:600px;

    margin:0 0 clamp(22px, 3vw, 30px);

    color:#667085;

    font-size:clamp(14px, 1.1vw, 16px);

    line-height:1.8;
}


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

.hero-actions{
    display:flex;

    align-items:center;

    gap:13px;

    flex-wrap:wrap;
}

.hero-primary-btn,
.hero-secondary-btn{
    display:inline-flex;

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

    gap:10px;

    min-height:52px;

    padding:0 clamp(17px, 2vw, 23px);

    border-radius:11px;

    text-decoration:none;

    font-size:13px;
    font-weight:800;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        color .3s ease;

    white-space:nowrap;
}

.hero-primary-btn{
    background:#0056D2;
    color:#fff;

    box-shadow:
        0 14px 30px rgba(0,86,210,.25);
}

.hero-primary-btn:hover{
    background:#07143d;
    color:#fff;

    transform:translateY(-3px);
}

.hero-secondary-btn{
    background:#fff;

    border:1px solid #d9deea;

    color:#0a0d1f;
}

.hero-secondary-btn:hover{
    color:#0056D2;

    border-color:#0056D2;

    transform:translateY(-3px);
}


/* =========================================================
   TRUST POINTS
========================================================= */

.hero-trust-points{
    display:flex;

    align-items:center;

    gap:clamp(12px, 2vw, 20px);

    margin-top:clamp(20px, 2.5vw, 28px);

    flex-wrap:wrap;
}

.hero-trust-points div{
    display:flex;

    align-items:center;

    gap:7px;

    color:#687080;

    font-size:11px;
    font-weight:700;
}

.hero-trust-points i{
    color:#20c777;
}


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

.boza-hero-visual{
    position:relative;

    width:100%;
    min-width:0;

    min-height:clamp(480px, 42vw, 580px);

    display:flex;

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


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

.hero-image-background{
    position:relative;

    width:min(650px, 100%);

    height:clamp(430px, 42vw, 590px);

    display:flex;

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

    overflow:visible;
}


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

.hero-image-background img{
    position:relative;

    z-index:2;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    border-radius:clamp(22px, 3vw, 35px);

    opacity:1;

    transition:
        opacity .7s ease,
        transform 1s ease;

    -webkit-mask-image:
        radial-gradient(
            ellipse 75% 75% at center,
            black 45%,
            rgba(0,0,0,.85) 60%,
            rgba(0,0,0,.45) 72%,
            transparent 100%
        );

    mask-image:
        radial-gradient(
            ellipse 75% 75% at center,
            black 45%,
            rgba(0,0,0,.85) 60%,
            rgba(0,0,0,.45) 72%,
            transparent 100%
        );

    filter:
        saturate(1.05)
        contrast(1.02);
}


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

.hero-image-fade{
    position:absolute;

    z-index:3;

    inset:0;

    pointer-events:none;

    border-radius:40px;

    background:

        linear-gradient(
            to right,
            #f7f9ff 0%,
            transparent 16%,
            transparent 84%,
            #f7f9ff 100%
        ),

        linear-gradient(
            to bottom,
            #f7f9ff 0%,
            transparent 16%,
            transparent 82%,
            #f7f9ff 100%
        );
}


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

.hero-image-background::before{
    content:"";

    position:absolute;

    z-index:0;

    width:75%;
    height:75%;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,86,210,.17),
            rgba(0,86,210,.05),
            transparent 70%
        );

    filter:blur(35px);
}


/* =========================================================
   BRAND BADGE
========================================================= */

.hero-brand-badge{
    position:absolute;

    z-index:8;

    top:clamp(25px, 5vw, 65px);

    left:50%;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:8px;

    max-width:calc(100% - 40px);

    padding:8px 13px;

    background:rgba(255,255,255,.88);

    border:1px solid rgba(255,255,255,.9);

    border-radius:30px;

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

    color:#687080;

    font-size:9px;

    font-weight:900;

    letter-spacing:1.5px;

    white-space:nowrap;
}

.hero-brand-dot{
    width:7px;
    height:7px;

    flex-shrink:0;

    border-radius:50%;

    background:#20c777;
}


/* =========================================================
   FLOATING SERVICE CARDS
========================================================= */

.floating-service-card{
    position:absolute;

    z-index:10;

    display:flex;

    align-items:center;

    gap:10px;

    width:max-content;

    min-width:170px;

    max-width:210px;

    padding:11px 13px;

    background:rgba(255,255,255,.94);

    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.9);

    border-radius:14px;

    box-shadow:
        0 18px 45px rgba(10,13,31,.13);

    animation:
        serviceFloat 5s ease-in-out infinite;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.floating-service-card:hover{
    transform:
        translateY(-5px)
        scale(1.03);

    box-shadow:
        0 22px 55px rgba(10,13,31,.18);
}


.floating-service-card strong{
    display:block;

    color:#111827;

    font-size:11px;

    line-height:1.2;
}

.floating-service-card small{
    display:block;

    margin-top:4px;

    color:#8a93a3;

    font-size:9px;

    line-height:1.2;
}


/* =========================================================
   SERVICE ICONS
========================================================= */

.floating-service-icon{
    width:40px;
    height:40px;

    flex-shrink:0;

    display:flex;

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

    border-radius:11px;

    color:#fff;

    font-size:16px;
}

.floating-service-icon.blue{
    background:#0056D2;
}

.floating-service-icon.orange{
    background:#FF7F50;
}

.floating-service-icon.green{
    background:#20b96a;
}

.floating-service-icon.purple{
    background:#7c4dff;
}

.floating-service-icon.red{
    background:#ed4c5c;
}

.floating-service-icon.darkblue{
    background:#1e3a8a;
}


/* =========================================================
   DESKTOP CARD POSITIONS
========================================================= */

.service-card-one{
    left:0;
    top:23%;
    animation-delay:0s;
}

.service-card-two{
    right:0;
    top:13%;
    animation-delay:.7s;
}

.service-card-three{
    right:-1%;
    top:46%;
    animation-delay:1.4s;
}

.service-card-four{
    left:1%;
    bottom:27%;
    animation-delay:2.1s;
}

.service-card-five{
    right:5%;
    bottom:13%;
    animation-delay:2.8s;
}

.service-card-six{
    left:10%;
    bottom:9%;
    animation-delay:3.5s;
}


/* =========================================================
   FLOAT ANIMATION
========================================================= */

@keyframes serviceFloat{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-9px);
    }

}


/* =========================================================
   SLIDER DOTS
========================================================= */

.hero-slider-dots{
    position:absolute;

    z-index:20;

    left:clamp(18px, 7%, 100px);

    bottom:clamp(18px, 3vw, 32px);

    display:flex;

    gap:7px;
}

.hero-dot{
    width:24px;
    height:4px;

    border-radius:20px;

    background:#d5dbe7;

    transition:.35s ease;
}

.hero-dot.active{
    width:43px;

    background:#0056D2;
}


/* =========================================================
   LARGE LAPTOPS / SMALL DESKTOPS
   1200px and below
========================================================= */

@media (max-width:1200px){

    .boza-home-hero{
        padding-left:5%;
        padding-right:5%;
    }

    .boza-hero-container{
        grid-template-columns:
            minmax(0, .95fr)
            minmax(0, 1fr);

        gap:25px;
    }

    .boza-hero-content h1{
        font-size:clamp(42px, 5vw, 64px);
    }

    .boza-hero-visual{
        min-height:500px;
    }

    .hero-image-background{
        height:520px;
    }

    .floating-service-card{
        min-width:155px;
        max-width:190px;

        padding:9px 10px;
    }

    .floating-service-icon{
        width:36px;
        height:36px;
    }

    .floating-service-card strong{
        font-size:10px;
    }

    .floating-service-card small{
        font-size:8px;
    }
}


/* =========================================================
   TABLETS / SMALL LAPTOPS
   992px and below
========================================================= */

@media (max-width:992px){

    .boza-home-hero{
        min-height:auto;

        padding-top:65px;
        padding-bottom:90px;
    }

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

        gap:35px;
    }

    .boza-hero-content{
        max-width:760px;

        margin:0 auto;

        text-align:center;
    }

    .hero-badge{
        margin-left:auto;
        margin-right:auto;
    }

    .boza-hero-content h1{
        font-size:clamp(44px, 7vw, 68px);
    }

    .boza-hero-content > p{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-actions{
        justify-content:center;
    }

    .hero-trust-points{
        justify-content:center;
    }

    .boza-hero-visual{
        width:100%;
        max-width:720px;

        margin:0 auto;

        min-height:520px;
    }

    .hero-image-background{
        width:min(650px, 90%);
        height:520px;
    }

    .hero-slider-dots{
        left:50%;

        transform:translateX(-50%);
    }
}


/* =========================================================
   TABLETS PORTRAIT
   768px and below
========================================================= */

@media (max-width:768px){

    .boza-home-hero{
        padding:
            55px
            20px
            85px;
    }

    .boza-hero-container{
        gap:20px;
    }

    .boza-hero-content h1{
        margin-top:20px;

        font-size:
            clamp(
                38px,
                9vw,
                56px
            );

        letter-spacing:-2px;
    }

    .boza-hero-content > p{
        font-size:14px;
        line-height:1.7;
    }

    .hero-actions{
        gap:10px;
    }

    .hero-primary-btn,
    .hero-secondary-btn{
        min-height:50px;
        padding:0 18px;
    }

    .boza-hero-visual{
        min-height:470px;
    }

    .hero-image-background{
        width:100%;
        height:470px;
    }

    /*
       Bring cards slightly inward
    */

    .service-card-one{
        left:1%;
        top:22%;
    }

    .service-card-two{
        right:1%;
        top:12%;
    }

    .service-card-three{
        right:0;
        top:44%;
    }

    .service-card-four{
        left:2%;
        bottom:25%;
    }

    .service-card-five{
        right:4%;
        bottom:12%;
    }

    .service-card-six{
        left:8%;
        bottom:7%;
    }

    .floating-service-card{
        min-width:145px;
        max-width:175px;

        padding:8px 9px;

        gap:8px;
    }

    .floating-service-icon{
        width:34px;
        height:34px;

        border-radius:9px;

        font-size:14px;
    }

    .floating-service-card strong{
        font-size:9px;
    }

    .floating-service-card small{
        font-size:7px;
    }
}


/* =========================================================
   MOBILE
   600px and below
========================================================= */

@media (max-width:600px){

    .boza-home-hero{
        padding:
            45px
            16px
            75px;
    }

    .hero-badge{
        padding:8px 12px;

        font-size:8px;

        letter-spacing:1.1px;
    }

    .boza-hero-content h1{
        font-size:
            clamp(
                35px,
                10.5vw,
                48px
            );

        line-height:1.04;

        letter-spacing:-1.8px;
    }

    .boza-hero-content > p{
        font-size:13.5px;
        line-height:1.65;
    }

    .hero-actions{
        width:100%;

        flex-direction:column;

        align-items:stretch;
    }

    .hero-primary-btn,
    .hero-secondary-btn{
        width:100%;
    }

    .hero-trust-points{
        flex-direction:column;

        align-items:center;

        gap:9px;
    }

    .boza-hero-visual{
        min-height:400px;

        margin-top:5px;
    }

    .hero-image-background{
        width:100%;
        height:400px;
    }

    /*
       Smaller cards on phones
    */

    .floating-service-card{
        min-width:0;

        width:auto;

        max-width:145px;

        padding:7px 8px;

        gap:6px;

        border-radius:11px;
    }

    .floating-service-icon{
        width:29px;
        height:29px;

        font-size:12px;

        border-radius:8px;
    }

    .floating-service-card strong{
        font-size:8px;
    }

    .floating-service-card small{
        display:none;
    }

    /*
       Mobile card positioning
    */

    .service-card-one{
        left:0;
        top:19%;
    }

    .service-card-two{
        right:0;
        top:8%;
    }

    .service-card-three{
        right:-1%;
        top:40%;
    }

    .service-card-four{
        left:0;
        bottom:24%;
    }

    .service-card-five{
        right:0;
        bottom:10%;
    }

    .service-card-six{
        left:7%;
        bottom:4%;
    }

    .hero-brand-badge{
        top:25px;

        font-size:7px;

        padding:7px 10px;
    }

    .hero-slider-dots{
        bottom:20px;
    }
}


/* =========================================================
   VERY SMALL PHONES
   430px and below
========================================================= */

@media (max-width:430px){

    .boza-home-hero{
        padding:
            38px
            12px
            70px;
    }

    .boza-hero-content h1{
        font-size:34px;
        letter-spacing:-1.5px;
    }

    .boza-hero-content > p{
        font-size:13px;
    }

    .boza-hero-visual{
        min-height:350px;
    }

    .hero-image-background{
        height:350px;
    }

    /*
       Keep floating cards away from edges
    */

    .floating-service-card{
        max-width:125px;

        padding:6px 7px;
    }

    .floating-service-icon{
        width:27px;
        height:27px;

        font-size:11px;
    }

    .floating-service-card strong{
        font-size:7px;
    }

    .service-card-one{
        left:0;
        top:18%;
    }

    .service-card-two{
        right:0;
        top:7%;
    }

    .service-card-three{
        right:0;
        top:39%;
    }

    .service-card-four{
        left:0;
        bottom:23%;
    }

    .service-card-five{
        right:0;
        bottom:9%;
    }

    .service-card-six{
        left:4%;
        bottom:3%;
    }

    .hero-dot{
        width:18px;
    }

    .hero-dot.active{
        width:34px;
    }
}


/* =========================================================
   EXTRA SMALL PHONES
   360px and below
========================================================= */

@media (max-width:360px){

    .boza-home-hero{
        padding-left:10px;
        padding-right:10px;
    }

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

    .hero-badge{
        font-size:7px;
    }

    .boza-hero-visual{
        min-height:315px;
    }

    .hero-image-background{
        height:315px;
    }

    .floating-service-card{
        max-width:112px;

        padding:5px 6px;
    }

    .floating-service-icon{
        width:24px;
        height:24px;

        font-size:10px;
    }

    .floating-service-card strong{
        font-size:6.5px;
    }

    .service-card-one{
        left:-2px;
    }

    .service-card-two{
        right:-2px;
    }

    .service-card-three{
        right:-2px;
    }

    .service-card-four{
        left:-2px;
    }

    .service-card-five{
        right:-2px;
    }
}


/* =========================================================
   REDUCE MOTION
   Accessibility
========================================================= */

@media (prefers-reduced-motion:reduce){

    .floating-service-card{
        animation:none;
    }

    .hero-primary-btn,
    .hero-secondary-btn,
    .floating-service-card,
    .hero-image-background img{
        transition:none;
    }
}


/* GRID */

.boza-services-grid{
    max-width:1300px;

    margin:auto;

    display:grid;

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

    gap:22px;
}


/* CARD */

.boza-service-card{
    position:relative;

    min-height:310px;

    display:flex;
    flex-direction:column;

    padding:32px;

    background:#fff;

    border:1px solid #e8ebf2;

    border-radius:20px;

    text-decoration:none;

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.boza-service-card:hover{
    transform:translateY(-8px);

    border-color:
        rgba(0,86,210,.25);

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


/* NUMBER */

.service-number{
    position:absolute;

    top:22px;
    right:25px;

    color:#edf0f6;

    font-size:45px;
    font-weight:900;

    line-height:1;
}


/* ICON */

.service-card-icon{
    width:58px;
    height:58px;

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

    margin-bottom:25px;

    border-radius:16px;

    color:#fff;

    font-size:22px;

    position:relative;
    z-index:2;
}

.service-card-icon.blue{
    background:var(--boza-blue);
}

.service-card-icon.orange{
    background:var(--boza-orange);
}

.service-card-icon.green{
    background:#20b96a;
}

.service-card-icon.purple{
    background:#7c4dff;
}

.service-card-icon.red{
    background:#ed4c5c;
}

.service-card-icon.darkblue{
    background:#1e3a8a;
}


.boza-service-card h3{
    position:relative;
    z-index:2;

    margin:0 0 12px;

    color:var(--boza-dark);

    font-size:19px;
    line-height:1.3;
}

.boza-service-card p{
    margin:0;

    color:#747d8d;

    font-size:13px;
    line-height:1.75;
}


.service-arrow{
    margin-top:auto;
    padding-top:25px;

    color:var(--boza-blue);

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

    text-transform:uppercase;
    letter-spacing:.7px;
}

.service-arrow i{
    margin-left:6px;

    transition:.3s ease;
}

.boza-service-card:hover .service-arrow i{
    transform:translateX(6px);
}


/* VIEW ALL */

.services-more{
    max-width:1300px;

    margin:35px auto 0;

    text-align:right;
}

.services-more a{
    display:inline-flex;
    align-items:center;
    gap:10px;

    color:var(--boza-blue);

    text-decoration:none;

    font-size:13px;
    font-weight:800;
}

.services-more a:hover{
    color:var(--boza-dark);
}


/* =========================================================
   WHY BOZALIGHTIT
========================================================= */

.boza-about-strip{
    padding:90px 7%;

    display:grid;

    grid-template-columns:
        1.1fr
        .9fr;

    gap:80px;

    background:
        linear-gradient(
            135deg,
            #07143d,
            #0a0d1f
        );

    color:#fff;
}

.section-eyebrow.light{
    color:var(--boza-orange);
}

.about-content h2{
    max-width:650px;

    margin:0 0 22px;

    font-size:
        clamp(
            36px,
            4vw,
            55px
        );

    line-height:1.05;

    letter-spacing:-1.5px;
}

.about-content h2 span{
    color:#70a1ff;
}

.about-content p{
    max-width:620px;

    color:#b9c1d2;

    font-size:15px;
    line-height:1.9;
}

.about-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;

    margin-top:30px;

    padding:14px 22px;

    border:1px solid rgba(255,255,255,.2);

    border-radius:10px;

    color:#fff;

    text-decoration:none;

    font-size:13px;
    font-weight:700;

    transition:.3s ease;
}

.about-btn:hover{
    background:#fff;
    color:var(--boza-dark);
}


/* POINTS */

.about-points{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.about-point{
    display:flex;
    align-items:center;
    gap:18px;

    padding:20px;

    background:
        rgba(255,255,255,.05);

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

    border-radius:15px;
}

.about-point > div{
    width:48px;
    height:48px;

    flex-shrink:0;

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

    border-radius:13px;

    background:rgba(0,86,210,.35);

    color:#70a1ff;
}

.about-point h3{
    margin:0 0 5px;

    font-size:15px;
}

.about-point p{
    margin:0;

    color:#9da7ba;

    font-size:12px;
}


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

.boza-stats{
    padding:100px 7%;

    background:#fff;

    text-align:center;
}

.stats-heading{
    margin-bottom:55px;
}

.stats-heading span{
    color:var(--boza-orange);

    font-size:10px;
    font-weight:900;

    letter-spacing:2px;
}

.stats-heading h2{
    margin-top:10px;

    color:var(--boza-dark);

    font-size:38px;
}


.boza-stats-grid{
    max-width:1100px;

    margin:auto;

    display:grid;

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

    border:1px solid #e7eaf0;

    border-radius:20px;

    overflow:hidden;
}

.boza-stat{
    padding:38px 20px;

    border-right:1px solid #e7eaf0;

    transition:.3s ease;
}

.boza-stat:last-child{
    border-right:none;
}

.boza-stat:hover{
    background:#f7f9ff;
}

.stat-icon{
    width:52px;
    height:52px;

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

    margin:0 auto 15px;

    border-radius:50%;

    background:#edf4ff;

    color:var(--boza-blue);
}

.boza-stat h2{
    margin:0;

    color:var(--boza-dark);

    font-size:40px;
    line-height:1;
}

.boza-stat p{
    margin-top:8px;

    color:#858d9c;

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


/* =========================================================
   FINAL CTA
========================================================= */

.boza-final-cta{
    position:relative;

    padding:110px 7%;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(255,127,80,.14),
            transparent 25%
        ),
        radial-gradient(
            circle at 20% 70%,
            rgba(0,86,210,.12),
            transparent 30%
        ),
        #f7f9ff;

    text-align:center;
}

.cta-content{
    max-width:850px;

    margin:auto;
}

.cta-content h2{
    margin:0;

    color:var(--boza-dark);

    font-size:
        clamp(
            40px,
            6vw,
            65px
        );

    line-height:1;

    letter-spacing:-2px;
}

.cta-content h2 span{
    color:var(--boza-blue);
}

.cta-content p{
    max-width:650px;

    margin:22px auto 0;

    color:#6e7787;

    line-height:1.8;
}


.cta-buttons{
    display:flex;
    justify-content:center;

    gap:12px;

    margin-top:30px;

    flex-wrap:wrap;
}

.cta-primary,
.cta-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    min-height:52px;

    padding:0 25px;

    border-radius:11px;

    text-decoration:none;

    font-size:13px;
    font-weight:800;

    transition:.3s ease;
}

.cta-primary{
    background:var(--boza-blue);
    color:#fff;
}

.cta-primary:hover{
    background:var(--boza-dark);
    color:#fff;

    transform:translateY(-3px);
}

.cta-secondary{
    background:#fff;

    border:1px solid #dce1eb;

    color:var(--boza-dark);
}

.cta-secondary:hover{
    border-color:var(--boza-blue);
    color:var(--boza-blue);

    transform:translateY(-3px);
}


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

@media(max-width:1050px){

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

        gap:50px;
    }

    .boza-hero-content{
        max-width:800px;
        margin:auto;
        text-align:center;
    }

    .boza-hero-content > p{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-actions,
    .hero-trust-points{
        justify-content:center;
    }

    .boza-hero-visual{
        min-height:470px;
    }

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

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

    .boza-about-strip{
        grid-template-columns:1fr;
        gap:50px;
    }

}


@media(max-width:800px){

    .boza-home-hero{
        padding:
            65px 5%
            90px;
    }

    .boza-hero-content h1{
        font-size:48px;
        letter-spacing:-2px;
    }

    .hero-image-card img{
        height:360px;
    }

    .floating-card-one{
        left:-10px;
    }

    .floating-card-two{
        right:-10px;
    }

    .trusted-inner{
        flex-direction:column;
        gap:25px;
        text-align:center;
    }

    .brand-grid{
        width:100%;

        flex-wrap:wrap;

        justify-content:center;
    }

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

    .boza-stat:nth-child(2){
        border-right:none;
    }

    .boza-stat:nth-child(1),
    .boza-stat:nth-child(2){
        border-bottom:1px solid #e7eaf0;
    }

}


@media(max-width:600px){

    .boza-home-hero{
        min-height:auto;
    }

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

    .boza-hero-content > p{
        font-size:14px;
    }

    .hero-actions{
        flex-direction:column;
    }

    .hero-primary-btn,
    .hero-secondary-btn{
        width:100%;
    }

    .hero-trust-points{
        flex-direction:column;
        align-items:center;
        gap:10px;
    }

    .boza-hero-visual{
        min-height:350px;
    }

    .hero-image-card img{
        height:280px;
    }

    .floating-card{
        padding:10px 12px;
    }

    .floating-card-one{
        top:40px;
        left:-5px;
    }

    .floating-card-two{
        bottom:35px;
        right:-5px;
    }

    .floating-card strong{
        font-size:10px;
    }

    .floating-card small{
        font-size:9px;
    }

    .floating-icon{
        width:35px;
        height:35px;
        font-size:14px;
    }

    .boza-services-section,
    .boza-stats{
        padding-left:5%;
        padding-right:5%;
    }

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

    .boza-section-heading h2{
        font-size:35px;
    }

    .boza-about-strip{
        padding:
            75px 5%;
    }

    .boza-stats-grid{
        grid-template-columns:1fr;
    }

    .boza-stat{
        border-right:none !important;
        border-bottom:1px solid #e7eaf0;
    }

    .boza-stat:last-child{
        border-bottom:none;
    }

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

    .hero-slider-dots{
        left:50%;
        transform:translateX(-50%);
    }

}
/* =========================================================
   BOZALIGHTIT TRUSTED BY
========================================================= */

.boza-trusted{
    position:relative;

    width:100%;

    padding:55px 7%;

    background:#ffffff;

    border-top:1px solid #edf0f7;
    border-bottom:1px solid #edf0f7;

    overflow:hidden;

    box-sizing:border-box;
}


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

.trusted-inner{
    width:100%;

    max-width:1450px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        minmax(220px,.65fr)
        minmax(0,2fr);

    align-items:center;

    gap:55px;
}


/* =========================================================
   TRUST TITLE
========================================================= */

.trusted-title{
    position:relative;
}


.trusted-title span{
    display:block;

    margin-bottom:8px;

    color:#0056D2;

    font-size:10px;

    font-weight:900;

    letter-spacing:2px;
}


.trusted-title strong{
    display:block;

    color:#0a0d1f;

    font-size:24px;

    line-height:1.2;

    font-weight:900;
}


.trusted-title p{
    max-width:270px;

    margin:10px 0 0;

    color:#7a8496;

    font-size:12px;

    line-height:1.7;
}


/* =========================================================
   BRAND GRID
========================================================= */

.brand-grid{
    display:grid;

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

    align-items:center;

    gap:15px;

    min-width:0;
}


/* =========================================================
   BRAND ITEM
========================================================= */

.brand-item{
    height:85px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:15px 20px;

    background:#f8faff;

    border:1px solid #e8ecf5;

    border-radius:14px;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;

    box-sizing:border-box;
}


.brand-item:hover{
    transform:translateY(-4px);

    background:#ffffff;

    border-color:#d6e0f5;

    box-shadow:
        0 15px 35px
        rgba(10,13,31,.08);
}


.brand-item img{
    display:block;

    width:auto;

    max-width:100%;

    height:auto;

    max-height:45px;

    object-fit:contain;

    opacity:.75;

    filter:grayscale(100%);

    transition:
        opacity .3s ease,
        filter .3s ease,
        transform .3s ease;
}


.brand-item:hover img{
    opacity:1;

    filter:grayscale(0%);

    transform:scale(1.04);
}


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

@media(max-width:1100px){

    .boza-trusted{
        padding:
            50px
            5%;
    }

    .trusted-inner{
        grid-template-columns:1fr;

        gap:30px;

        text-align:center;
    }

    .trusted-title p{
        margin-left:auto;
        margin-right:auto;
    }

    .brand-grid{
        grid-template-columns:
            repeat(5,minmax(0,1fr));
    }

}


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

@media(max-width:768px){

    .boza-trusted{
        padding:
            45px
            5%;
    }

    .trusted-title strong{
        font-size:22px;
    }

    .brand-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:12px;
    }

    .brand-item{
        height:75px;

        padding:
            12px;
    }

}


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

@media(max-width:480px){

    .boza-trusted{
        padding:
            40px
            5%;
    }

    .trusted-title span{
        font-size:9px;
    }

    .trusted-title strong{
        font-size:20px;
    }

    .trusted-title p{
        font-size:11px;
    }

    .brand-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:10px;
    }

    .brand-item{
        height:70px;

        padding:10px;
    }

    .brand-item img{
        max-height:38px;
    }

}