.hero {
padding: 129px 0;
    position: relative;

    overflow: hidden;

    min-height: 100vh;

    display: flex;

    align-items: center;

   background: linear-gradient(
  135deg,
  #800020,
  #A52A2A,
  #D4AF37
) !important;
}

.hero::before {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

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

    border-radius: 50%;

    top: -250px;

    right: -150px;

    filter: blur(40px);

}

.hero::after {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

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

    border-radius: 50%;

    bottom: -220px;

    left: -180px;

    filter: blur(50px);

}

.hero-grid {

    display: grid;

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

    align-items: center;

    gap: 80px;

    position: relative;

    z-index: 5;

}

.hero h1 {

    font-size: 62px;

    font-weight: 800;

    line-height: 1.08;

    color: white;

    margin-bottom: 25px;

}

.hero p {

    font-size: 20px;

    line-height: 1.8;

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

    margin-bottom: 40px;

}

.hero-buttons {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

}
.hero-buttons {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-top: 25px;
    flex-wrap: wrap;
}

.hero-btn {
    display: inline-block;
    padding: 14px 30px;
    background: linear-gradient(
        135deg,
        #800020,
        #A52A2A
    );
    color: #fff !important;
    border: 2px solid #D4AF37;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(128, 0, 32, 0.25);
}

.hero-btn:hover {
    background: linear-gradient(
        135deg,
        #A52A2A,
        #D4AF37
    );
    color: #fff !important;
    transform: translateY(-3px);
}

.hero-btn-outline {
    background: transparent;
    color: #800020 !important;
    border: 2px solid #800020;
    box-shadow: none;
}

.hero-btn-outline:hover {
    background: #800020;
    color: #fff !important;
}
/*=========================================
    FLOATING IMAGE
=========================================*/

.hero img {

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

    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .2));

}

@keyframes floating {

    0% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-20px);

    }

    100% {

        transform: translateY(0px);

    }

}

/*=========================================
    BACKGROUND SHAPES
=========================================*/

.blur {

    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    opacity: .25;

    z-index: 0;

}

.blur.one {

    width: 300px;

    height: 300px;

    background:var(#A52A2A);

    left: -100px;

    top: 150px;

}

.blur.two {

    width: 280px;

    height: 280px;

    background:var(#D4AF37);

    right: -80px;

    bottom: 120px;

}