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

#home{
    position:relative;
    overflow:hidden;
}

/* Badge */

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 20px;

background:#FFF5EE;

border:1px solid #FFD8BF;

border-radius:50px;

color:#FF7528;

font-weight:600;

font-size:14px;

box-shadow:0 10px 25px rgba(255,117,40,.08);
margin-top:20px;

}

.hero-badge i{

font-size:18px;

}

/* Heading */

.hero-title{

margin-top:28px;

font-size:58px;

line-height:1.1;

font-weight:700;

letter-spacing:-1px;

color:#0B2C4D;

}

.hero-title span{

color:#FF7528;

}

/* Description */

.hero-desc{

margin-top:28px;

font-size:18px;

line-height:1.9;

color:#64748B;

max-width:620px;

}

/* Buttons */

.hero-buttons{

display:flex;

gap:18px;

margin-top:38px;

flex-wrap:wrap;

}

.btn-primary{

display:inline-flex;

align-items:center;

gap:10px;

padding:16px 30px;

background:#FF7528;

color:#fff;

font-weight:700;

border-radius:18px;

transition:.35s;

box-shadow:0 18px 45px rgba(255,117,40,.25);

}

.btn-primary:hover{

transform:translateY(-5px);

background:#ef6513;

}

.btn-outline{

display:inline-flex;

align-items:center;

gap:10px;

padding:16px 30px;

border:2px solid #0B2C4D;

border-radius:18px;

font-weight:700;

color:#0B2C4D;

transition:.35s;

}

.btn-outline:hover{

background:#0B2C4D;

color:#fff;

}

/* Service Pills */

.hero-services{

display:flex;

flex-wrap:wrap;

gap:14px;

margin-top:42px;

}

.hero-services span{

display:flex;

align-items:center;

gap:8px;

padding:12px 18px;

background:#fff;

border-radius:999px;

font-size:15px;

font-weight:600;

color:#0B2C4D;

border:1px solid #E8EDF5;

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

transition:.3s;

}

.hero-services span:hover{

transform:translateY(-4px);

border-color:#FF7528;

}

.hero-services i{

color:#FF7528;

}

/* Device */

.hero-device{

position:relative;

width:100%;

max-width:700px;

background:#fff;

border-radius:30px;

padding:16px;

box-shadow:

0 40px 90px rgba(15,23,42,.15);

overflow:hidden;

z-index:5;

}

/* Browser */

.hero-browser{

display:flex;

gap:8px;

margin-bottom:16px;

}

.hero-browser span{

width:12px;

height:12px;

border-radius:50%;

}

.hero-browser span:nth-child(1){

background:#FF605C;

}

.hero-browser span:nth-child(2){

background:#FFBD44;

}

.hero-browser span:nth-child(3){

background:#00CA4E;

}

/* Dashboard */

.hero-dashboard{

width:100%;

display:block;

border-radius:18px;

transition:.5s;

}

.hero-device:hover .hero-dashboard{

transform:scale(1.02);

}

/* Floating Cards */

.floating-card{

position:absolute;

display:flex;

align-items:center;

gap:15px;

padding:18px;

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

backdrop-filter:blur(18px);

border-radius:22px;

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

z-index:20;

animation:floatCard 4s ease-in-out infinite;

}

.card-left{

left:-35px;

top:80px;

}

.card-right{

right:-35px;

top:35px;

animation-delay:.8s;

}

.card-bottom{

right:0;

bottom:60px;

animation-delay:1.5s;

}

/* Icons */

.icon{

width:58px;

height:58px;

display:flex;

align-items:center;

justify-content:center;

border-radius:18px;

font-size:24px;

flex-shrink:0;

}

.orange{

background:#FFF1E8;

color:#FF7528;

}

.green{

background:#ECFDF3;

color:#16A34A;

}

.blue{

background:#EAF2FF;

color:#0B2C4D;

}

.floating-card h5{

font-size:17px;

font-weight:700;

color:#0B2C4D;

}

.floating-card p{

font-size:13px;

margin-top:4px;

color:#64748B;

}

/* Animation */

@keyframes floatCard{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}
/*=========================================
        HERO RESPONSIVE
=========================================*/

@media (max-width:1200px){

.hero-title{

font-size:48px;

}

.hero-device{

max-width:620px;

}

.card-left{

left:-15px;

}

.card-right{

right:-15px;

}

}



@media (max-width:991px){

#home{

padding:70px 0;

}

#home .grid{

grid-template-columns:1fr;

gap:70px;

}

.hero-title{

font-size:42px;

text-align:center;

}

.hero-desc{

max-width:100%;

text-align:center;

}

.hero-badge{

margin:0 auto;

display:inline-flex;

}

.hero-buttons{

justify-content:center;

}

.hero-services{

justify-content:center;

}

.hero-right{

display:flex;

justify-content:center;

}

.hero-device{

max-width:650px;

}

.card-left,
.card-right,
.card-bottom{

display:none;

}
.hero-ring
{
    display:none;
}

}



@media (max-width:768px){

#home{

padding:40px 0 60px;

}

.hero-title{

font-size:34px;

line-height:1.2;

letter-spacing:0;

}

.hero-desc{

font-size:16px;

line-height:1.8;

margin-top:20px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons a{

width:100%;

justify-content:center;

}

.hero-services{

display:grid;

grid-template-columns:1fr 1fr;

gap:12px;

margin-top:30px;

}

.hero-services span{

justify-content:center;

font-size:14px;

padding:12px;

}

.hero-device{

margin-top:15px;

padding:12px;

border-radius:24px;

}

.hero-browser{

margin-bottom:12px;

}

}



@media (max-width:480px){

.hero-title{

font-size:30px;

}

.hero-badge{

font-size:12px;

padding:10px 14px;

}

.hero-desc{

font-size:15px;

}

.hero-services{

grid-template-columns:1fr;

}

.hero-device{

border-radius:18px;

}

}
  /*=====================================================
                CONSULTATION POPUP
=====================================================*/

.popup-overlay{

position:fixed;

inset:0;

background:rgba(8,15,30,.55);

backdrop-filter:blur(8px);

display:flex;

align-items:center;

justify-content:center;

padding:20px;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:99999;

}

.popup-overlay.active{

opacity:1;

visibility:visible;

}

.popup-box{

position:relative;

width:100%;

max-width:980px;

display:grid;

grid-template-columns:1fr 420px;

background:#fff;

border-radius:30px;

overflow:hidden;

box-shadow:0 40px 90px rgba(0,0,0,.18);

transform:translateY(30px);

transition:.4s;

}

.popup-overlay.active .popup-box{

transform:translateY(0);

}

/* LEFT */

.popup-left{

padding:60px;

background:linear-gradient(135deg,#0B2C4D 0%,#123C66 100%);

color:#fff;

position:relative;

overflow:hidden;

}

.popup-left::before{

content:"";

position:absolute;

right:-80px;

top:-80px;

width:250px;

height:250px;

border-radius:50%;

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

}

.popup-left::after{

content:"";

position:absolute;

left:-120px;

bottom:-120px;

width:280px;

height:280px;

border-radius:50%;

background:rgba(255,117,40,.15);

}

.popup-badge{

display:inline-flex;

padding:10px 18px;

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

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

border-radius:999px;

font-size:14px;

font-weight:600;

backdrop-filter:blur(10px);

}

.popup-left h2{

margin-top:28px;

font-size:42px;

line-height:1.15;

font-weight:800;

}

.popup-left h2 span{

color:#FF7528;

}

.popup-left p{

margin-top:22px;

font-size:16px;

line-height:1.9;

opacity:.9;

}

.popup-left ul{

margin-top:30px;

display:grid;

gap:18px;

}

.popup-left li{

display:flex;

align-items:center;

gap:12px;

font-size:16px;

}

.popup-left li i{

width:34px;

height:34px;

display:flex;

align-items:center;

justify-content:center;

background:#FF7528;

border-radius:50%;

}

/* RIGHT */

.popup-right{

padding:50px;

display:flex;

flex-direction:column;

justify-content:center;

}

.popup-right h3{

font-size:30px;

font-weight:700;

color:#0B2C4D;

margin-bottom:30px;

}

.popup-right form{

display:grid;

gap:16px;

}

.popup-right input,

.popup-right select{

height:56px;

padding:0 18px;

border:1px solid #E5E7EB;

border-radius:16px;

font-size:15px;

transition:.3s;

outline:none;

}

.popup-right input:focus,

.popup-right select:focus{

border-color:#FF7528;

box-shadow:0 0 0 4px rgba(255,117,40,.15);

}

.popup-right button{

height:58px;

border:none;

background:#FF7528;

color:#fff;

font-weight:700;

font-size:16px;

border-radius:16px;

cursor:pointer;

transition:.35s;

box-shadow:0 20px 40px rgba(255,117,40,.25);

}

.popup-right button:hover{

background:#f06614;

transform:translateY(-3px);

}

/* CLOSE */

.popup-close{

position:absolute;

right:18px;

top:18px;

width:46px;

height:46px;

border:none;

background:#fff;

border-radius:50%;

cursor:pointer;

font-size:24px;

color:#0B2C4D;

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

z-index:20;

transition:.3s;

}

.popup-close:hover{

transform:rotate(90deg);

background:#FF7528;

color:#fff;

}

/* MOBILE */

@media(max-width:900px){

.popup-box{

grid-template-columns:1fr;

max-width:520px;

}

.popup-left{

padding:35px;

}

.popup-right{

padding:35px;

}

.popup-left h2{

font-size:34px;

}

}

@media(max-width:600px){

.popup-left{

display:none;

}

.popup-right{

padding:28px;

}

.popup-right h3{

font-size:24px;

}

.popup-right input,

.popup-right select,

.popup-right button{

height:52px;

}

}
/* ABOUT FEATURES */

.about-feature{

display:flex;

align-items:center;

gap:12px;

padding:16px 20px;
color: #000;

background:#F8FAFD;

border:1px solid #E5E7EB;

border-radius:18px;

font-weight:600;

transition:.3s;

}

.about-feature:hover{

transform:translateY(-5px);

border-color:#FF7528;

box-shadow:0 15px 40px rgba(15,23,42,.08);

}

.about-feature i{

color:#FF7528;

font-size:22px;

}

/* Stats */

.about-stat{

padding:24px;

background:#fff;

border:1px solid #ECECEC;

border-radius:20px;

text-align:center;

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

}

.about-stat h3{

font-size:34px;

font-weight:800;

color:#FF7528;

}

.about-stat p{

margin-top:8px;

color:#64748B;

font-weight:500;

}
.timeline-item{

text-align:center;

position:relative;

padding-top:40px;

}

.timeline-dot{

width:22px;

height:22px;

background:#FF7528;

border:5px solid white;

border-radius:50%;

margin:0 auto;

box-shadow:0 0 0 6px rgba(255,117,40,.18);

margin-bottom:25px;

transition:.35s;

}

.timeline-item:hover .timeline-dot{

transform:scale(1.25);

}

.timeline-item h4{

font-size:24px;

font-weight:700;

color:#FF7528;

}

.timeline-item h5{

margin-top:10px;

font-size:18px;

font-weight:700;

color:#0B2C4D;

}

.timeline-item p{

margin-top:12px;

font-size:15px;

line-height:1.8;

color:#64748B;

}
/*==============================
      MOBILE TIMELINE
===============================*/

@media (max-width:768px){

    .grid-cols-5{
        display:block !important;
    }

    .absolute.top-7{
        display:none;
    }

    .timeline-item{

        position:relative;

        text-align:left;

        padding:0 0 35px 55px;

        margin:0;

    }

    .timeline-item:last-child{

        padding-bottom:0;

    }

    /* Vertical Line */

    .timeline-item::before{

        content:"";

        position:absolute;

        left:10px;

        top:10px;

        width:2px;

        height:100%;

        background:#E5E7EB;

    }

    .timeline-item:last-child::before{

        display:none;

    }

    /* Orange Dot */

    .timeline-dot{

        position:absolute;

        left:0;

        top:0;

        margin:0;

        width:22px;

        height:22px;

    }

    .timeline-item h4{

        font-size:22px;

        margin-bottom:6px;

    }

    .timeline-item h5{

        font-size:18px;

        margin-bottom:8px;

    }

    .timeline-item p{

        font-size:15px;

        line-height:1.7;

    }

}
/*==============================
      TRUST SECTION
===============================*/

.trust-card{

background:#fff;

padding:35px;

border-radius:24px;

border:1px solid #EAEAEA;

transition:.35s;

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

}

.trust-card:hover{

transform:translateY(-8px);

border-color:#FF7528;

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

}

.trust-icon{

width:70px;

height:70px;

border-radius:20px;

background:#FFF4ED;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:25px;

}

.trust-icon i{

font-size:34px;

color:#FF7528;

}

.trust-card h3{

font-size:22px;

font-weight:700;

color:#0B2C4D;

margin-bottom:15px;

}

.trust-card p{

line-height:1.8;

color:#64748B;

}

@media(max-width:768px){

.trust-card{

padding:28px;

}

}
/*==============================
        PURPOSE SECTION
===============================*/

.purpose-card{

background:#fff;

padding:40px 35px;

border-radius:24px;

border:1px solid #ECECEC;

transition:.35s;

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

height:100%;

}

.purpose-card:hover{

transform:translateY(-8px);

border-color:#FF7528;

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

}

.purpose-icon{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

border-radius:20px;

background:#FFF4ED;

margin-bottom:25px;

}

.purpose-icon i{

font-size:34px;

color:#FF7528;

}

.purpose-card h3{

font-size:24px;

font-weight:700;

color:#0B2C4D;

margin-bottom:18px;

}

.purpose-card p{

line-height:1.9;

color:#64748B;

}

.purpose-card ul{

margin-top:15px;

display:grid;

gap:12px;

}

.purpose-card li{

list-style:none;

color:#64748B;

font-weight:500;

}

@media(max-width:768px){

.purpose-card{

padding:30px;

}

}
/*==================================================
                TESTIMONIALS
==================================================*/

.testimonialSwiper{
    padding:15px 5px 65px;
}

.testimonial-card{

    position:relative;

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:24px;

    padding:35px;

    height:100%;

    min-height:340px;

    transition:.35s;

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

}

.testimonial-card:hover{

    transform:translateY(-10px);

    border-color:#FF7528;

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

}

.quote-icon{

    position:absolute;

    right:30px;

    top:25px;

    font-size:42px;

    color:#FFE3D3;

}

/* Client */

.client{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:22px;

}

.client-avatar{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#FF7528;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:700;

    flex-shrink:0;

}

.client h4{

    margin:0;

    font-size:20px;

    font-weight:700;

    color:#0B2C4D;

}

.client span{

    color:#64748B;

    font-size:14px;

}

/* Stars */

.stars{

    color:#FFB400;

    font-size:18px;

    letter-spacing:3px;

    margin-bottom:20px;

}

/* Text */

.testimonial-card p{

    color:#475569;

    line-height:1.9;

    font-size:16px;

}

/*=====================================
        NAVIGATION
=====================================*/

.swiper-button-next,
.swiper-button-prev{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#fff;

    color:#0B2C4D;

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

    transition:.3s;

}

.swiper-button-next:hover,
.swiper-button-prev:hover{

    background:#FF7528;

    color:#fff;

}

.swiper-button-next::after,
.swiper-button-prev::after{

    font-size:20px;

    font-weight:700;

}

/*=====================================
        PAGINATION
=====================================*/

.swiper-pagination-bullet{

    width:12px;

    height:12px;

    background:#CBD5E1;

    opacity:1;

}

.swiper-pagination-bullet-active{

    width:30px;

    border-radius:999px;

    background:#FF7528;

}

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

@media(max-width:768px){

.testimonial-card{

    min-height:auto;

    padding:28px;

}

.client-avatar{

    width:60px;

    height:60px;

    font-size:18px;

}

.client h4{

    font-size:18px;

}

.testimonial-card p{

    font-size:15px;

}

.swiper-button-next,
.swiper-button-prev{

    display:none;

}

}
.group:hover .group-hover\:visible{
    visibility:visible;
}

.group:hover .group-hover\:opacity-100{
    opacity:1;
}

.group:hover .group-hover\:translate-y-0{
    transform:translateY(0);
}