/* =========================
GOOGLE FONT
========================= */

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

/* =========================
RESET
========================= */

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

body{
    font-family:'Inter',sans-serif;
    background:#f4f7fb;
    overflow-x:hidden;
}

/* =========================
COLOR VARIABLES
========================= */

:root{

    --primary-blue:#2373ff;

    --dark-blue:#1652c7;

    --light-blue:#edf4ff;

    --light-bg:#f4f7fb;

    --white:#ffffff;

    --yellow:#ffd43b;

    --green:#22c55e;

    --text-dark:#101828;
}

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

.container{
    width:100%;
    max-width:1400px;
    margin:auto;
    padding:0 22px;
}

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

.header{
    width:100%;
}

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

.top-header{

    background:linear-gradient(
    90deg,
    #1652c7,
    #2373ff
    );
}

/* CONTAINER */

.top-header-container{

    min-height:38px;

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

/* CONTACT */

.top-contact{

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

    gap:24px;

    flex-wrap:wrap;
}

/* LINKS */

.top-contact a{

    text-decoration:none;

    color:var(--white);

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

    display:flex;
    align-items:center;

    gap:7px;

    transition:0.3s ease;
}

.top-contact a:hover{
    opacity:0.85;
}

/* MOBILE */

@media(max-width:768px){

    .top-contact{

        gap:12px;
    }

    .top-contact a{

        font-size:11px;
    }
}



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

.main-header{

    background:#f2f4f8;
}

.main-header-container{

    min-height:150px;

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

/* =========================
LOGO
========================= */

.header-logo{

    width:260px;

    display:flex;
    align-items:center;
}

.header-logo img{

    height:130px;

    width:auto;

    object-fit:contain;
}

/* =========================
CENTER
========================= */

.header-center{

    flex:1;

    text-align:center;
}

.header-center h1{

    color:#2373ff;

    font-size:58px;
    font-weight:900;
   
    line-height:1;
}

.header-center p{

    margin-top:10px;

    color:#1652c7;

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

    letter-spacing:1px;
}

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

.header-actions{

    width:260px;

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

    gap:18px;
}

/* BUTTON */

.header-action-btn{

    width:74px;
    height:74px;

    border-radius:50%;

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

    text-decoration:none;

    transition:0.35s ease;
}

/* ICONS */

.header-action-btn i{

    color:#ffffff;

    font-size:28px;
}

/* CALL BUTTON */

.call-btn{

    background:linear-gradient(
    135deg,
    #2373ff,
    #1652c7
    );

    box-shadow:
    0 12px 30px rgba(35,115,255,0.28);
}

/* WHATSAPP BUTTON */

.whatsapp-btn{

    background:linear-gradient(
    135deg,
    #22c55e,
    #16a34a
    );

    box-shadow:
    0 12px 30px rgba(34,197,94,0.22);
}

/* HOVER */

.header-action-btn:hover{

    transform:
    translateY(-4px)
    scale(1.05);
}
/* =========================
NAVBAR
========================= */

.navbar{

    background:linear-gradient(
    90deg,
    #1652c7,
    #2373ff
    );

    overflow:hidden;
}

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

.navbar-container{

    min-height:74px;

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

/* =========================
NAV LINKS
========================= */

.nav-links{

    display:flex;
    align-items:center;

    gap:58px;

    list-style:none;

    padding:0;
    margin:0;
}

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

.nav-links li a{

    text-decoration:none;

    color:var(--white);

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

    position:relative;

    transition:0.3s ease;

    white-space:nowrap;

    display:inline-block;

    line-height:1.2;
}

/* =========================
HOVER EFFECT
========================= */

.nav-links li a::after{

    content:'';

    position:absolute;

    left:0;
    bottom:-10px;

    width:0%;
    height:3px;

    border-radius:30px;

    background:var(--yellow);

    transition:0.35s ease;
}

/* HOVER */

.nav-links li a:hover{

    color:var(--yellow);
}

.nav-links li a:hover::after{

    width:100%;
}

/* =========================
ULTRA LARGE SCREEN
========================= */

@media(min-width:1600px){

    .container{
        max-width:1550px;
    }

    .header-center h1{
        font-size:68px;
    }

    .header-center p{
        font-size:32px;
    }

    .nav-links{
        gap:72px;
    }

    .nav-links li a{
        font-size:20px;
    }

    .header-logo img{
        height:102px;
    }
}

/* =========================
LAPTOP
========================= */

@media(max-width:1200px){

    .header-center h1{
        font-size:46px;
    }

    .header-center p{
        font-size:22px;
    }

    .nav-links{
        gap:38px;
    }
}

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

@media(max-width:992px){

    .main-header-container{

        min-height:115px;
    }

    .header-logo{
        width:180px;
    }

    .header-logo img{
        height:70px;
    }

    .header-center h1{
        font-size:34px;
    }

    .header-center p{
        font-size:16px;
    }

    .header-actions{
        width:180px;
    }

    .header-action-btn{

        width:58px;
        height:58px;
    }

    .header-action-btn i{
        font-size:22px;
    }

    .nav-links{

        gap:28px;
    }

    .nav-links li a{

        font-size:15px;
    }
}

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

@media(max-width:768px){

    .top-header-container{
        justify-content:center;
    }

    .top-contact{
        gap:14px;
    }

    .top-contact a{
        font-size:11px;
    }

    .main-header-container{

        min-height:92px;
    }

    .header-logo{
        width:70px;
    }

    .header-logo img{
        height:70px;
    }

    .header-center h1{

        font-size:25px;
    }

    .header-center p{

        margin-top:4px;

        font-size:12px;
    }

    .header-actions{

        width:90px;

        gap:5px;
    }

    .header-action-btn{

        width:42px;
        height:42px;
    }

    .header-action-btn i{
        font-size:16px;
    }

    /* NAVBAR */

    .navbar-container{

        min-height:56px;

        justify-content:flex-start;

        overflow:hidden;
    }

    /* NAV LINKS */

    .nav-links{

        gap:28px;

        overflow-x:auto;
        overflow-y:hidden;

        width:100%;

        padding:0 4px 6px;

        flex-wrap:nowrap;

        scroll-behavior:smooth;

        -webkit-overflow-scrolling:touch;
    }

    /* HIDE SCROLLBAR */

    .nav-links::-webkit-scrollbar{
        display:none;
    }

    .nav-links{

        scrollbar-width:none;
    }

    /* LINKS */

    .nav-links li a{

        font-size:13px;

        white-space:nowrap;
    }
}

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

@media(max-width:480px){

    .container{
        padding:0 14px;
    }

    .header-center h1{
        font-size:20px;
    }

    .header-center p{
        font-size:8px;
    }

    .header-logo img{
        height:70px;
    }

    .nav-links{
        gap:20px;
    }

    .nav-links li a{
        font-size:12px;
    }
}

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

.header-title{

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

    gap:14px;

    flex-wrap:wrap;
}

/* MAX */

.max-text{

    color:#2373ff;

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

    line-height:1;
}

/* POWERTECH */

.powertech-text{

    color:#000000;

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

    line-height:1;
}

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

@media(max-width:1200px){

    .max-text,
    .powertech-text{

        font-size:46px;
    }
}

@media(max-width:992px){

    .max-text,
    .powertech-text{

        font-size:34px;
    }
}

@media(max-width:768px){

    .header-title{
        gap:8px;
    }

    .max-text,
    .powertech-text{

        font-size:22px;
    }
}

@media(max-width:480px){

    .header-title{
        gap:6px;
    }

    .max-text,
    .powertech-text{

        font-size:18px;
    }
}



/* =========================
SOLUTIONS SLIDER SECTION
========================= */

.solutions-slider-section{

    width:100%;

    background:#ffffff;

    padding:32px 0;

    overflow:hidden;

    border-top:1px solid #e7edf7;
    border-bottom:1px solid #e7edf7;
}

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

.solutions-heading{

    text-align:center;

    margin-bottom:28px;
}

.solutions-heading h2{

    color:#2373ff;

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

    letter-spacing:1px;
}

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

.solutions-slider{

    width:100%;

    overflow:hidden;

    position:relative;
}

/* =========================
TRACK
========================= */

.solutions-track{

    display:flex;
    align-items:center;

    width:max-content;

    animation:solutionScroll 30s linear infinite;
}

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

.solution-card{

    min-width:240px;
    height:82px;

    padding:0 28px;

    margin-right:22px;

    border-radius:20px;

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

    background:linear-gradient(
    135deg,
    #1652c7,
    #2373ff
    );

    color:#ffffff;

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

    letter-spacing:0.5px;

    box-shadow:
    0 12px 28px rgba(35,115,255,0.18);

    transition:0.35s ease;
}

/* HOVER */

.solution-card:hover{

    transform:
    translateY(-4px)
    scale(1.03);
}

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

@keyframes solutionScroll{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }
}

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

@media(max-width:992px){

    .solutions-heading h2{

        font-size:28px;
    }

    .solution-card{

        min-width:200px;
        height:72px;

        font-size:18px;
    }
}

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

@media(max-width:768px){

    .solutions-slider-section{

        padding:24px 0;
    }

    .solutions-heading{

        margin-bottom:20px;
    }

    .solutions-heading h2{

        font-size:22px;
    }

    .solution-card{

        min-width:160px;
        height:58px;

        padding:0 18px;

        margin-right:14px;

        border-radius:14px;

        font-size:14px;
    }
}

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

@media(max-width:480px){

    .solutions-heading h2{

        font-size:18px;
    }

    .solution-card{

        min-width:145px;

        font-size:13px;
    }
}


/* =========================
PRODUCTS SECTION
========================= */

.products-section{

    width:100%;

    padding:90px 0;

    background:#f4f7fb;
}

/* TITLE */

.section-title{

    text-align:center;

    margin-bottom:60px;
}

.section-title h2{

    color:#101828;

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

    letter-spacing:1px;
}

.section-title p{

    margin-top:14px;

    color:#2373ff;

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

/* GRID */

.products-grid{

    display:grid;

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

    gap:34px;
}

/* CARD */

.product-card{

    background:#ffffff;

    border-radius:34px;

    overflow:hidden;

    position:relative;

    border:1px solid #edf2f7;

    box-shadow:
    0 18px 50px rgba(15,23,42,0.06);

    transition:0.4s ease;
}

/* TOP EFFECT */

.product-card::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:6px;

    background:linear-gradient(
    90deg,
    #1652c7,
    #2373ff
    );
}

/* HOVER */

.product-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 28px 60px rgba(35,115,255,0.12);
}

/* IMAGE */

.product-image{

    width:100%;

    height:300px;

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

    padding:30px;
}

.product-image img{

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

    object-fit:contain;

    transition:0.4s ease;
}

.product-card:hover .product-image img{

    transform:scale(1.05);
}

/* CONTENT */

.product-content{

    padding:10px 30px 32px;
}

/* TITLE */

.product-content h3{

    color:#101828;

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

    text-align:center;
}

/* DESCRIPTION */

.product-content p{

    margin-top:14px;

    color:#475467;

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

    line-height:1.7;

    text-align:center;
}

/* BUTTONS */

.product-buttons{

    margin-top:26px;

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

    gap:14px;

    flex-wrap:wrap;
}

/* BUTTON */

.product-buttons a{

    height:52px;

    padding:0 24px;

    border-radius:50px;

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

    gap:10px;

    text-decoration:none;

    color:#ffffff;

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

    transition:0.35s ease;
}

/* CALL */

.call-product-btn{

    background:linear-gradient(
    135deg,
    #1652c7,
    #2373ff
    );

    box-shadow:
    0 10px 24px rgba(35,115,255,0.18);
}

/* WHATSAPP */

.whatsapp-product-btn{

    background:linear-gradient(
    135deg,
    #22c55e,
    #16a34a
    );

    box-shadow:
    0 10px 24px rgba(34,197,94,0.18);
}

/* BUTTON HOVER */

.product-buttons a:hover{

    transform:
    translateY(-3px)
    scale(1.03);
}

/* =========================
LAPTOP
========================= */

@media(max-width:1200px){

    .products-grid{

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

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

@media(max-width:992px){

    .section-title h2{

        font-size:40px;
    }

    .product-image{

        height:260px;
    }

    .product-content h3{

        font-size:28px;
    }
}

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

@media(max-width:768px){

    .products-section{

        padding:70px 0;
    }

    .section-title{

        margin-bottom:36px;
    }

    .section-title h2{

        font-size:28px;
    }

    .section-title p{

        font-size:14px;
    }

    .products-grid{

        grid-template-columns:1fr;

        gap:24px;
    }

    .product-card{

        border-radius:24px;
    }

    .product-image{

        height:220px;

        padding:24px;
    }

    .product-content{

        padding:10px 22px 24px;
    }

    .product-content h3{

        font-size:24px;
    }

    .product-content p{

        font-size:14px;
    }

    .product-buttons{

        gap:10px;
    }

    .product-buttons a{

        height:46px;

        padding:0 18px;

        font-size:14px;
    }
}



/* =========================
WHY CHOOSE SECTION
========================= */

.why-choose-section{

    width:100%;

    padding:90px 0;

    background:#ffffff;
}

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

.why-title{

    text-align:center;

    margin-bottom:60px;
}

.why-title h2{

    color:#101828;

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

    letter-spacing:1px;
}

.why-title p{

    margin-top:14px;

    color:#2373ff;

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

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

.why-grid{

    display:grid;

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

    gap:24px;
}

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

.why-card{

    background:#ffffff;

    border-radius:30px;

    padding:40px 26px;

    text-align:center;

    border:1px solid #edf2f7;

    box-shadow:
    0 16px 40px rgba(15,23,42,0.05);

    transition:0.4s ease;
}

/* HOVER */

.why-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 26px 60px rgba(35,115,255,0.10);
}

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

.why-icon{

    width:90px;
    height:90px;

    margin:auto auto 24px;

    border-radius:50%;

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

/* ICONS */

.why-icon i{

    font-size:34px;

    color:#ffffff;
}

/* COLORS */

.blue-icon{

    background:linear-gradient(
    135deg,
    #1652c7,
    #2373ff
    );
}

.yellow-icon{

    background:linear-gradient(
    135deg,
    #ffbf00,
    #ffd43b
    );
}

.green-icon{

    background:linear-gradient(
    135deg,
    #16a34a,
    #22c55e
    );
}

/* =========================
TEXT
========================= */

.why-card h3{

    color:#101828;

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

    line-height:1.3;
}

.why-card p{

    margin-top:14px;

    color:#475467;

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

    line-height:1.7;
}

/* =========================
LAPTOP
========================= */

@media(max-width:1200px){

    .why-grid{

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

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

@media(max-width:992px){

    .why-title h2{

        font-size:40px;
    }

    .why-grid{

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

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

@media(max-width:768px){

    .why-choose-section{

        padding:70px 0;
    }

    .why-title{

        margin-bottom:36px;
    }

    .why-title h2{

        font-size:28px;
    }

    .why-title p{

        font-size:14px;
    }

    .why-grid{

        grid-template-columns:1fr;

        gap:22px;
    }

    .why-card{

        border-radius:24px;

        padding:34px 22px;
    }

    .why-icon{

        width:72px;
        height:72px;
    }

    .why-icon i{

        font-size:28px;
    }

    .why-card h3{

        font-size:22px;
    }

    .why-card p{

        font-size:14px;
    }
}


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

.hero-section{

    position:relative;

    width:100%;

    overflow:hidden;

    padding:70px 0;

    background:
    linear-gradient(
    180deg,
    #f8fbff,
    #eef5ff
    );
}

/* =========================
BACKGROUND GLOW
========================= */

.hero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:0.18;
}

.hero-glow-1{

    width:280px;
    height:280px;

    background:#2373ff;

    top:-100px;
    left:-100px;
}

.hero-glow-2{

    width:220px;
    height:220px;

    background:#60a5fa;

    bottom:-80px;
    right:-80px;
}

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

.hero-container{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr;

    gap:42px;

    align-items:center;
}

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

.hero-content{

    text-align:center;
}

/* BADGE */

.hero-badge{

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

    padding:10px 18px;

    border-radius:50px;

    background:#ffffff;

    border:1px solid #dbeafe;

    color:#2373ff;

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

    box-shadow:
    0 8px 20px rgba(35,115,255,0.08);
}

/* TITLE */

.hero-content h1{

    margin-top:22px;

    color:#101828;

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

    line-height:1.2;
}

/* TEXT */

.hero-content p{

    margin-top:18px;

    color:#475467;

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

    line-height:1.8;
}

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

.hero-buttons{

    margin-top:28px;

    display:flex;
    flex-direction:column;

    gap:14px;
}

/* BUTTON */

.hero-buttons a{

    width:100%;

    height:52px;

    border-radius:18px;

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

    gap:10px;

    text-decoration:none;

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

    transition:0.35s ease;
}

/* CALL */

.hero-call-btn{

    background:linear-gradient(
    135deg,
    #1652c7,
    #2373ff
    );

    color:#ffffff;

    box-shadow:
    0 12px 30px rgba(35,115,255,0.20);
}

/* WHATSAPP */

.hero-whatsapp-btn{

    background:#ffffff;

    border:1px solid #dcfce7;

    color:#16a34a;

    box-shadow:
    0 10px 24px rgba(15,23,42,0.05);
}

/* HOVER */

.hero-buttons a:hover{

    transform:
    translateY(-3px);
}

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

.hero-stats{

    margin-top:26px;

    display:grid;

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

    gap:12px;
}

/* CARD */

.hero-stat-card{

    background:#ffffff;

    padding:18px 12px;

    border-radius:20px;

    border:1px solid #edf2f7;

    box-shadow:
    0 10px 24px rgba(15,23,42,0.04);
}

/* NUMBER */

.hero-stat-card h3{

    color:#2373ff;

    font-size:24px;
    font-weight:900;
}

/* TEXT */

.hero-stat-card span{

    display:block;

    margin-top:6px;

    color:#475467;

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

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

.hero-image-wrapper{

    position:relative;
}

/* IMAGE CARD */

.hero-image-card{

    background:#ffffff;

    border-radius:28px;

    overflow:hidden;

    box-shadow:
    0 20px 60px rgba(35,115,255,0.10);
}

.hero-image-card img{

    width:100%;

    display:block;
}

/* =========================
FLOATING TAG
========================= */

.hero-floating-tag{

    position:absolute;

    left:50%;
    bottom:-18px;

    transform:translateX(-50%);

    background:#ffffff;

    padding:14px 18px;

    border-radius:18px;

    display:flex;
    align-items:center;

    gap:10px;

    box-shadow:
    0 14px 30px rgba(15,23,42,0.08);

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

    color:#101828;
}

/* ICON */

.hero-floating-tag i{

    color:#2373ff;
}

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

@media(min-width:768px){

    .hero-section{

        padding:90px 0;
    }

    .hero-content h1{

        font-size:52px;
    }

    .hero-buttons{

        flex-direction:row;

        justify-content:center;
    }

    .hero-buttons a{

        width:auto;

        min-width:220px;
    }

    .hero-image-card{

        max-width:680px;

        margin:auto;
    }
}

/* =========================
DESKTOP
========================= */

@media(min-width:1100px){

    .hero-container{

        grid-template-columns:
        1fr 1fr;

        gap:70px;
    }

    .hero-content{

        text-align:left;
    }

    .hero-buttons{

        justify-content:flex-start;
    }

    .hero-content h1{

        font-size:68px;
    }

    .hero-content p{

        max-width:580px;

        font-size:17px;
    }

    .hero-image-card{

        max-width:100%;
    }
}

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

.hero-quote-card{

    background:#ffffff;

    border-radius:34px;

    padding:40px 34px;

    position:relative;

    overflow:hidden;

    border:1px solid #edf2f7;

    box-shadow:
    0 24px 60px rgba(35,115,255,0.10);
}

/* TOP GLOW */

.hero-quote-card::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:6px;

    background:linear-gradient(
    90deg,
    #1652c7,
    #2373ff
    );
}

/* BADGE */

.quote-badge{

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

    padding:10px 18px;

    border-radius:50px;

    background:#edf4ff;

    color:#2373ff;

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

/* TITLE */

.hero-quote-card h2{

    margin-top:24px;

    color:#101828;

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

    line-height:1.2;
}

/* TEXT */

.hero-quote-card p{

    margin-top:18px;

    color:#475467;

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

    line-height:1.9;
}

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

.quote-features{

    margin-top:32px;

    display:grid;

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

    gap:18px;
}

/* ITEM */

.quote-feature{

    background:#f8fbff;

    border-radius:20px;

    padding:18px 16px;

    display:flex;
    align-items:center;

    gap:14px;

    border:1px solid #e6eefc;

    transition:0.35s ease;
}

/* HOVER */

.quote-feature:hover{

    transform:
    translateY(-4px);

    background:#2373ff;
}

.quote-feature:hover i,
.quote-feature:hover span{

    color:#ffffff;
}

/* ICON */

.quote-feature i{

    color:#2373ff;

    font-size:20px;

    transition:0.35s ease;
}

/* TEXT */

.quote-feature span{

    color:#101828;

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

    transition:0.35s ease;
}

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

@media(max-width:768px){

    .hero-quote-card{

        border-radius:26px;

        padding:30px 22px;
    }

    .hero-quote-card h2{

        font-size:30px;
    }

    .hero-quote-card p{

        font-size:14px;
    }

    .quote-features{

        grid-template-columns:1fr;

        gap:14px;
    }

   /* =========================
MOBILE FEATURES GRID
========================= */

.quote-features{

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

    gap:12px;
}

/* FEATURE */

.quote-feature{

    flex-direction:column;

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

    text-align:center;

    gap:10px;

    padding:18px 12px;
}

/* ICON */

.quote-feature i{

    font-size:18px;
}

/* TEXT */

.quote-feature span{

    font-size:13px;

    line-height:1.4;
}
}



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

.footer{

    background:#0f172a;

    color:#ffffff;

    margin-top:80px;
}

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

.footer-top{

    padding:80px 0 60px;
}

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

.footer-grid{

    display:grid;

    grid-template-columns:
    1.3fr 1fr 1.1fr;

    gap:60px;
}

/* =========================
COMPANY TITLE
========================= */

.footer-company-title{

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

    margin-bottom:24px;

    color:#2373ff;
}

.footer-company-title span{

    color:#ffffff;
}

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

.footer-about{

    color:#cbd5e1;

    font-size:15px;

    line-height:1.9;
}

/* =========================
SOCIALS
========================= */

.footer-socials{

    margin-top:28px;

    display:flex;
    align-items:center;

    gap:14px;
}

/* SOCIAL ICON */

.footer-socials a{

    width:48px;
    height:48px;

    border-radius:50%;

    background:#1e293b;

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

    text-decoration:none;

    color:#ffffff;

    font-size:18px;

    transition:0.35s ease;
}

/* HOVER */

.footer-socials a:hover{

    background:#2373ff;

    transform:
    translateY(-4px);
}

/* =========================
COLUMN TITLE
========================= */

.footer-column h3{

    color:#ffffff;

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

    margin-bottom:24px;
}

/* =========================
LIST
========================= */

.footer-column ul{

    list-style:none;
}

.footer-column ul li{

    margin-bottom:16px;
}

/* LINKS */

.footer-column ul li a{

    text-decoration:none;

    color:#cbd5e1;

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

    transition:0.3s ease;
}

/* HOVER */

.footer-column ul li a:hover{

    color:#2373ff;

    padding-left:6px;
}

/* =========================
CONTACT
========================= */

.footer-contact{

    display:flex;
    flex-direction:column;

    gap:18px;
}

/* CONTACT ITEM */

.footer-contact p{

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

    gap:12px;

    color:#cbd5e1;

    font-size:15px;

    line-height:1.7;
}

/* CONTACT LINKS */

.footer-contact a{

    color:#cbd5e1;

    text-decoration:none;

    transition:0.3s ease;
}

.footer-contact a:hover{

    color:#2373ff;
}

/* ICON */

.footer-contact i{

    color:#2373ff;

    margin-top:3px;
}

/* =========================
MAP
========================= */

.footer-map{

    width:100%;

    height:320px;

    overflow:hidden;
}

/* IFRAME */

.footer-map iframe{

    width:100%;
    height:100%;

    border:none;

    filter:grayscale(15%);
}

/* =========================
BOTTOM
========================= */

.footer-bottom{

    background:#0b1220;

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

    padding:22px 0;
}

/* CONTAINER */

.footer-bottom-container{

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

    gap:18px;

    flex-wrap:wrap;
}

/* TEXT */

.footer-bottom p,
.footer-bottom span{

    color:#94a3b8;

    font-size:14px;

    text-align:center;
}

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

@media(max-width:992px){

    .footer-grid{

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

        gap:40px;
    }
}

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

@media(max-width:768px){

    .footer{

        margin-top:60px;
    }

    .footer-top{

        padding:60px 0 40px;
    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:36px;
    }

    .footer-company-title{

        font-size:30px;
    }

    .footer-column h3{

        font-size:22px;
    }

    .footer-map{

        height:240px;
    }

    .footer-bottom-container{

        flex-direction:column;

        justify-content:center;
    }

    .footer-bottom p,
    .footer-bottom span{

        font-size:13px;
    }
}



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

.floating-social{

    position:fixed;

    right:18px;
    bottom:18px;

    z-index:9999;

    display:flex;
    flex-direction:column;

    gap:14px;
}

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

.floating-btn{

    width:58px;
    height:58px;

    border-radius:50%;

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

    text-decoration:none;

    color:#ffffff;

    font-size:24px;

    box-shadow:
    0 14px 30px rgba(15,23,42,0.18);

    transition:0.35s ease;

    animation:floatButton 3s ease-in-out infinite;
}

/* HOVER */

.floating-btn:hover{

    transform:
    translateY(-5px)
    scale(1.08);
}

/* =========================
COLORS
========================= */

/* CALL */

.call-float{

    background:linear-gradient(
    135deg,
    #1652c7,
    #2373ff
    );
}

/* WHATSAPP */

.whatsapp-float{

    background:linear-gradient(
    135deg,
    #16a34a,
    #22c55e
    );
}

/* FACEBOOK */

.facebook-float{

    background:linear-gradient(
    135deg,
    #1877f2,
    #3b82f6
    );
}

/* INSTAGRAM */

.instagram-float{

    background:linear-gradient(
    135deg,
    #f58529,
    #dd2a7b,
    #8134af
    );
}

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

@keyframes floatButton{

    0%{
        transform:translateY(0);
    }

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

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

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

@media(max-width:768px){

    .floating-social{

        right:14px;
        bottom:14px;

        gap:12px;
    }

    .floating-btn{

        width:52px;
        height:52px;

        font-size:20px;
    }
}