*,
*::before,
*::after {
    box-sizing: border-box;
}

.hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:1400px;
    margin:80px auto;
    padding:40px;
    gap:80px;
}
.hero-text{
    flex:1;
    padding-top:15px;
}

.hero-image{
    flex:1.3;
    text-align:center;
}

.hero-text h1{

    font-size:52px;
    color:#8d6c42;
    margin-bottom:25px;

}

.hero-text p{

    font-size:22px;
    line-height:1.8;
    color:#555;
    margin-bottom:35px;

}

.hero-button {
    display: inline-block;

    position: relative;
    overflow: hidden;

    background:
    radial-gradient(
        ellipse at 28% 22%,
        rgba(255, 255, 255, 0.95) 0%,
       rgba(255, 255, 255, 0.70) 24%,
        rgba(255, 255, 255, 0) 42%
    ),
    linear-gradient(
        135deg,
        #fffaf1 0%,
        #f8e9cf 45%,
        #fff8ec 70%,
        #ead1a6 100%
    );
    color: #7a582d;

    padding: 14px 34px;

    border: 3px solid #c99746;
    border-radius: 40px;

    text-decoration: none;
    font-size: 20px;

    box-shadow:
    inset 0 3px 3px rgba(255, 255, 255, 0.98),
    inset 0 -3px 3px rgba(139, 91, 32, 0.25),
    0 0 0 2px rgba(255, 229, 174, 0.80),
    0 4px 2px rgba(139, 91, 32, 0.30),
    0 7px 14px rgba(91, 59, 24, 0.18);
    transition: 0.3s;
}
.hero-button::before {
    content: "";
    position: absolute;

    width: 65%;
    height: 70%;

    left: 6%;
    top: -10%;

    background: radial-gradient(
        ellipse,
        rgba(255, 255, 255, 0.32) 0%,
        rgba(255, 255, 255, 0.18) 35%,
        rgba(255, 255, 255, 0.07) 60%,
        transparent 78%
    );

    border-radius: 50%;
    pointer-events: none;
}
.hero-button::after {
    content: "";
    position: absolute;

    right: 2px;
    bottom: 0.1px;

    width: 25px;
    height: 25px;

    border-right: 2px solid rgba(255, 255, 255, 0.75);
    border-bottom: 3px solid rgba(255, 255, 255, 0.95);

    border-radius: 0 0 36px 0;
-webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 25%,
    black 55%,
    black 100%
);

mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 25%,
    black 55%,
    black 100%
);
    pointer-events: none;
}
.hero-button:hover {
    background:
        linear-gradient(
            135deg,
            #fffdf8 0%,
            #f3dfbd 45%,
            #fff8e9 70%,
            #dfbd82 100%
        );

    border-color: #b8863b;

    box-shadow:
        inset 0 1px 3px rgba(255, 255, 255, 0.95),
        0 6px 14px rgba(91, 59, 24, 0.22);

    transform: translateY(-2px);
}

.hero-image img{
    width:110%;
    max-width:950px;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
    background-image: url("../images/hero/hero-banner.jpg");
}