.hero-section{

    padding:70px 0;
    background:white;
}

.hero-content{

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

.hero-text{

    flex:0 0 50%;
}

.hero-image{
    flex:0 0 45%;
}

.hero-image img{
    width:100%;
    height:auto;
    display:block;
}

.hero-tag{

    color:var(--gold);
    font-weight:600;
    letter-spacing:1px;
}

.hero-text h1{

    margin-top:20px;

    font-size:4rem;
    line-height:1.2;

    font-weight:700;

    color:var(--dark);
}

.hero-text h1{
    max-width:700px;
}

.hero-text h1 span{

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

.hero-text p{

    margin-top:20px;

    font-size:1.1rem;

    color:#666;
}

.hero-buttons{

    margin-top:30px;

    display:flex;
    gap:20px;
}

.btn-primary-custom{

    text-decoration:none;

    background:var(--primary-blue);

    color:white;

    padding:14px 28px;

    border-radius:10px;

    font-weight:600;
}

.btn-secondary-custom{

    text-decoration:none;

    color:var(--primary-blue);

    border:2px solid var(--primary-blue);

    padding:14px 28px;

    border-radius:10px;

    font-weight:600;
}

.hero-features{

    margin-top:35px;

    display:flex;

    gap:30px;

    flex-wrap:wrap;

    font-weight:500;
}

.hero-image{

    flex:1;
}

.hero-image img{

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

    display:block;
}

.btn-primary-custom,
.btn-secondary-custom{

    display:inline-block;

    text-decoration:none;

    font-weight:600;
}

.btn-primary-custom{

    background:var(--primary-blue);

    color:white;

    padding:14px 28px;

    border-radius:10px;
}

.demo-btn:hover,
.btn-primary-custom:hover{

    background:#0c3277;

    transition:0.3s ease;
}

.btn-secondary-custom:hover{

    background:var(--primary-blue);
    color:white;

    transition:0.3s ease;
}

.hero-section{
    position:relative;
    overflow:hidden;
}

.hero-features{
    display:flex;
    gap:35px;
    margin-top:30px;
    flex-wrap:wrap;
}

.feature-item{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:1rem;
    font-weight:500;
    color:#1f2d3d;
}

.hero-features .feature-item i{
    color:#f4b400 !important;
    font-size:1.15rem;
}

.about-hero{
    padding:90px 0 70px;
    background:#fff;
}

.about-hero-content{
    display:flex;
    align-items:center;
    gap:60px;
}

.about-text{
    flex:1;
}

.about-image{
    flex:1;
}

.about-image img{
    width:100%;
    border-radius:20px;
}

.section-tag{
    color:var(--gold);
    font-weight:700;
    letter-spacing:1px;
    display:block;
    margin-bottom:15px;
}

.about-text h1{
    font-size:52px;
    line-height:1.2;
    margin-bottom:20px;
}

.about-text h1 span{
    color:var(--primary);
}

.about-text p{
    font-size:18px;
    color:#555;
    max-width:600px;
    margin-bottom:30px;
}

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

@media (max-width: 768px){

    .hero-content{
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .hero-text,
    .hero-image{
        flex: 100%;
    }

    .hero-text h1{
        font-size: 2.8rem;
        line-height: 1.15;
    }

    .hero-text p{
        font-size: 1rem;
    }

    .hero-buttons{
        flex-direction: column;
        gap: 12px;
    }

    .btn-primary-custom,
    .btn-secondary-custom{
        width: 100%;
        text-align: center;
    }

    .hero-features{
        justify-content: center;
        gap: 15px;
    }

    .hero-image img{
        max-width: 100%;
    }

}