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

.hero{
    width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#f8fbff 0%,#eef5ff 100%);
}

/* Background Blobs */

.hero::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    background:#dbeafe;
    border-radius:50%;
    top:-180px;
    left:-180px;
    filter:blur(80px);
    opacity:.6;
}

.hero::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    background:#dcfce7;
    border-radius:50%;
    right:-150px;
    bottom:-150px;
    filter:blur(80px);
    opacity:.5;
}

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

.hero .container{

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

    align-items:center;

    gap:70px;

    padding:90px 0;

    position:relative;

    z-index:5;
}

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

.hero-left{

    display:flex;

    flex-direction:column;

    justify-content:center;
}

/* Badge */

.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:50px;

    background:#ffffff;

    border:1px solid #dbeafe;

    color:#2563eb;

    font-size:15px;

    font-weight:600;

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

    margin-bottom:30px;

    width:max-content;
}

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

.hero-left h1{

    font-size:68px;

    line-height:1.12;

    font-weight:800;

    color:#0f172a;

    margin-bottom:24px;
}

.hero-left h1 span{

    color:#2563eb;
}

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

.hero-description{

    max-width:560px;

    font-size:18px;

    color:#64748b;

    line-height:1.8;

    margin-bottom:35px;
}

/*====================================================
        SEARCH BOX
====================================================*/

.search-box{

    display:flex;

    align-items:center;

    background:#fff;

    border-radius:60px;

    padding:10px;

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

    margin-bottom:30px;

    transition:.35s;
}

.search-box:hover{

    transform:translateY(-3px);

    box-shadow:0 25px 55px rgba(37,99,235,.15);
}

.search-box input{

    flex:1;

    padding:18px 22px;

    background:transparent;

    font-size:16px;
}

.search-box button{

    width:58px;

    height:58px;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    font-size:20px;

    transition:.3s;
}

.search-box button:hover{

    background:#1d4ed8;

    transform:scale(1.08);
}

/*====================================================
        POPULAR TAGS
====================================================*/

.popular-search{

    margin-bottom:35px;
}

.popular-search span{

    display:block;

    font-weight:600;

    margin-bottom:16px;

    color:#334155;
}

.search-tags{

    display:flex;

    flex-wrap:wrap;

    gap:14px;
}

.search-tags a{

    padding:10px 18px;

    background:#fff;

    border:1px solid #e2e8f0;

    border-radius:40px;

    transition:.3s;
}

.search-tags a:hover{

    background:#2563eb;

    color:#fff;

    transform:translateY(-4px);
}

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

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;
}

/* hero part3.2 */

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

.hero-right{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 780px;
}

/*====================================================
            BUILDING WRAPPER
====================================================*/

.building-image{
    position: relative;
    width: 560px;
    z-index: 5;
    transition: .4s ease;
}

.building-image img{
    width: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 30px 50px rgba(0,0,0,.18));
}

.building-image:hover{
    transform: translateY(-8px);
}

/* new add */
/*====================================================
                FLOATING CARDS V2
====================================================*/

.floating-card{

    position:absolute;

    width:220px;

    display:flex;

    align-items:center;

    gap:16px;

    padding:16px 18px;

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

    backdrop-filter:blur(18px);

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

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

    border-radius:22px;

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

    transition:.35s ease;

    cursor:pointer;

    z-index:20;
}


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

.floating-card i{

    width:56px;

    height:56px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    color:#fff;

    font-size:24px;

    flex-shrink:0;

    transition:.35s;
}


/* Different Colors */

.card-1 i{

    background:linear-gradient(135deg,#2563eb,#3b82f6);

}

.card-2 i{

    background:linear-gradient(135deg,#7c3aed,#9333ea);

}

.card-3 i{

    background:linear-gradient(135deg,#10b981,#22c55e);

}

.card-4 i{

    background:linear-gradient(135deg,#f59e0b,#f97316);

}


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

.floating-card h4{

    font-size:17px;

    font-weight:700;

    color:#0f172a;

    margin-bottom:5px;

}

.floating-card p{

    font-size:14px;

    color:#64748b;

}


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

.floating-card:hover{

    transform:translateY(-10px) scale(1.02);

    box-shadow:
        0 28px 55px rgba(37,99,235,.18);

}

.floating-card:hover i{

    transform:rotate(10deg) scale(1.08);

}


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

.card-1{

    top:40px;

    left:10px;

}

.card-2{

    top:140px;

    right:0;

}

.card-3{

    bottom:210px;

    left:-5px;

}

.card-4{

    bottom:120px;

    right:15px;

}


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

.card-1{

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

}

.card-2{

    animation:cardFloat2 6s ease-in-out infinite;

}

.card-3{

    animation:cardFloat3 5.5s ease-in-out infinite;

}

.card-4{

    animation:cardFloat4 6.5s ease-in-out infinite;

}


/*============ KEYFRAMES ============*/

@keyframes cardFloat1{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

@keyframes cardFloat2{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(12px);

    }

}

@keyframes cardFloat3{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

@keyframes cardFloat4{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(10px);

    }

}

/* part-3.3 */

/*====================================================
                HERO DASHBOARD
====================================================*/

.hero-dashboard{

    position:absolute;

    left:50%;

    bottom:-35px;

    transform:translateX(-50%);

    width:100%;

    max-width:720px;

    display:grid;

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

    gap:28px;

    padding:18px;

    border-radius:24px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    box-shadow:
    0 25px 60px rgba(37,99,235,.25);

    z-index:30;

    overflow:hidden;
}


/*=========================================
            Shine Effect
=========================================*/

.hero-dashboard::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );

    transition:1s;
}

.hero-dashboard:hover::before{

    left:120%;
}


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

.stat-card{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px;

    border-radius:18px;

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

    backdrop-filter:blur(10px);

    transition:.35s ease;

    cursor:pointer;
}


/* Hover */

.stat-card:hover{

    transform:translateY(-8px);

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

    box-shadow:
    0 18px 35px rgba(0,0,0,.15);
}


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

.stat-card i{

    width:52px;

    height:52px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:15px;

    background:#ffffff;

    color:#2563eb;

    font-size:22px;

    transition:.35s;
}

.stat-card:hover i{

    transform:rotate(12deg) scale(1.08);
}


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

.stat-card h3{

    color:#fff;

    font-size:24px;

    font-weight:700;

    margin-bottom:4px;
}

.stat-card p{

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

    font-size:14px;

    line-height:1.3;
}


/*====================================================
            Floating Shadow
====================================================*/

.hero-dashboard::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-20px;

    transform:translateX(-50%);

    width:90%;

    height:25px;

    border-radius:50%;

    background:rgba(37,99,235,.18);

    filter:blur(20px);
}

/* part-3.4 */

/*====================================================
        PREMIUM BACKGROUND DECORATIONS
====================================================*/

/* Large Gradient Glow */

.hero-bg-glow{

    position:absolute;

    width:650px;
    height:650px;

    top:-250px;
    right:-220px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(37,99,235,.15),
        transparent 70%
    );

    filter:blur(60px);

    animation:bgFloat 12s ease-in-out infinite;

    z-index:0;
}


/* Small Gradient Glow */

.hero-bg-glow-2{

    position:absolute;

    width:450px;
    height:450px;

    bottom:-150px;
    left:-150px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(16,185,129,.12),
        transparent 70%
    );

    filter:blur(50px);

    animation:bgFloatReverse 14s ease-in-out infinite;

    z-index:0;
}


/*=====================================
        Glass Circle
======================================*/

.glass-circle{

    position:absolute;

    width:120px;
    height:120px;

    border-radius:50%;

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

    backdrop-filter:blur(18px);

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

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

    top:110px;
    right:130px;

    box-shadow:
    0 15px 35px rgba(0,0,0,.08);

    animation:glassFloat 6s ease-in-out infinite;
}


/*=====================================
        Small Floating Dots
======================================*/

.dot{

    position:absolute;

    border-radius:50%;

    animation:dotFloat 5s ease-in-out infinite;
}

.dot1{

    width:16px;
    height:16px;

    background:#2563eb;

    top:170px;
    left:52%;
}

.dot2{

    width:12px;
    height:12px;

    background:#10b981;

    right:110px;
    top:340px;
}

.dot3{

    width:20px;
    height:20px;

    background:#f59e0b;

    bottom:170px;
    left:60%;
}


/*=====================================
        Dashed Ring
======================================*/

.hero-ring{

    position:absolute;

    width:320px;
    height:320px;

    border-radius:50%;

    border:2px dashed rgba(37,99,235,.15);

    right:80px;
    top:100px;

    animation:ringRotate 30s linear infinite;

    z-index:0;
}


/*=====================================
        Keyframes
======================================*/

@keyframes bgFloat{

    0%,100%{

        transform:translate(0,0);
    }

    50%{

        transform:translate(-25px,30px);
    }

}

@keyframes bgFloatReverse{

    0%,100%{

        transform:translate(0,0);
    }

    50%{

        transform:translate(35px,-25px);
    }

}

@keyframes glassFloat{

    0%,100%{

        transform:translateY(0);
    }

    50%{

        transform:translateY(-20px);
    }

}

@keyframes dotFloat{

    0%,100%{

        transform:translateY(0);
    }

    50%{

        transform:translateY(-18px);
    }

}

@keyframes ringRotate{

    from{

        transform:rotate(0deg);
    }

    to{

        transform:rotate(360deg);
    }

}


/* ===========================================
        HERO 1 RESPONSIVE
=========================================== */

/* ---------- Laptop ---------- */
@media (max-width:1200px){

    .hero .container{
        grid-template-columns:1fr 1fr;
        gap:40px;
        padding:80px 20px;
    }

    .hero-left h1{
        font-size:52px;
    }

    .building-image{
        width:460px;
    }

    .floating-card{
        width:180px;
    }

    .hero-dashboard{
        max-width:620px;
    }

}


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

    .hero{
        padding:70px 0;
    }

    .hero .container{

        grid-template-columns:1fr;
        text-align:center;
        gap:60px;

    }

    .hero-left{

        align-items:center;

    }

    .hero-description{

        max-width:650px;
        margin:0 auto 30px;

    }

    .hero-buttons,
    .search-tags{

        justify-content:center;

    }

    .hero-right{

        min-height:620px;

    }

    .building-image{

        width:380px;

    }

    .floating-card{

        width:170px;

    }

    .hero-dashboard{

        position:relative;
        left:auto;
        bottom:auto;
        transform:none;

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

        margin:30px auto 0;

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

    }

}


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

    .hero{

        min-height:auto;
        padding:50px 0;

    }

    .hero .container{

        padding:20px;

    }

    .hero-left h1{

        font-size:38px;
        line-height:1.3;

    }

    .hero-description{

        font-size:16px;

    }

    .search-box{

        flex-direction:column;
        border-radius:20px;
        padding:15px;
        gap:12px;

    }

    .search-box input{

        width:100%;
        padding:15px;

    }

    .search-box button{

        width:100%;
        height:52px;
        border-radius:12px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-right{

        min-height:500px;

    }

    .building-image{

        width:280px;

    }

    .floating-card{

        width:140px;
        padding:10px;

    }

    .floating-card h4{

        font-size:13px;

    }

    .floating-card p{

        display:none;

    }

    .floating-card i{

        width:40px;
        height:40px;
        font-size:16px;

    }

    .card-1{

        top:10px;
        left:5px;

    }

    .card-2{

        top:60px;
        right:5px;

    }

    .card-3{

        bottom:110px;
        left:5px;

    }

    .card-4{

        bottom:50px;
        right:5px;

    }

    .hero-dashboard{

        grid-template-columns:1fr;
        gap:15px;

    }

}


/* ---------- Small Mobile ---------- */
@media (max-width:480px){

    .hero-left h1{

        font-size:30px;

    }

    .hero-tag{

        width:100%;
        justify-content:center;

    }

    .building-image{

        width:230px;

    }

    .floating-card{

        display:none;

    }

    .hero-dashboard{

        padding:15px;

    }

    .stat-card{

        flex-direction:column;
        text-align:center;

    }

    .stat-card h3{

        font-size:20px;

    }

    .stat-card p{

        font-size:13px;

    }

    .glass-circle,
    .hero-ring,
    .hero-bg-glow,
    .hero-bg-glow-2,
    .dot{

        display:none;

    }

}