/* =====================================
   ABOUT SECTION
===================================== */

.about-section{

    padding:80px 0;

    position:relative;


}

/* Layout */

.about-wrapper{

    display:grid;

    grid-template-columns:
    1fr 1.1fr;

    align-items:center;

    gap:80px;
}

/* Image Side */

.about-image-box{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;
}

.about-glow{

    position:absolute;

    width:650px;

    height:650px;

    background:
    radial-gradient(
        circle,
        rgba(239,68,59,.9) 0%,
        rgba(239,68,59,.45) 30%,
        rgba(239,68,59,.15) 55%,
        transparent 75%
    );

    border-radius:50%;

    filter:blur(70px);

    z-index:1;

    animation:
    glowPulse 5s ease-in-out infinite;
}
.about-image-box img{

    position:relative;

    z-index:3;

    width:100%;

    max-width:520px;

    mask-image:
    radial-gradient(
        ellipse at center,
        black 60%,
        transparent 95%
    );

    -webkit-mask-image:
    radial-gradient(
        ellipse at center,
        black 60%,
        transparent 95%
    );
}

.about-image-box img{

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

@keyframes floatingImage{

    0%,100%{

        transform:
        translateY(0px);
    }

    50%{

        transform:
        translateY(-18px);
    }

}
.about-image-box:hover img{

    transform:
    translateY(-10px);
}

.about-image-box::after{

    content:"";

    position:absolute;

    bottom:-10px;

    left:0;

    width:100%;

    height:180px;

    background:
    linear-gradient(
        to top,
        #000 0%,
        rgba(0,0,0,.95) 20%,
        rgba(0,0,0,.75) 40%,
        transparent 100%
    );

    z-index:4;

    pointer-events:none;
}


/* Content */

.about-tag{

    color:#ef443b;

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    display:inline-block;

    margin-bottom:18px;
}

.about-content h2{

    font-family:'Montserrat',sans-serif;

    font-size:52px;

    line-height:1.2;

    margin-bottom:25px;

    color:#fff;
}

.about-content p{

    color:#c8c8c8;

    font-size:16px;

    line-height:1.9;

    margin-bottom:18px;
}

/* Button */

.about-buttons{

    margin-top:35px;
}

.download-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 38px;

    border-radius:14px;

    background:#ef443b;

    color:#fff;

    font-weight:600;

    text-decoration:none;

    transition:.35s ease;

    border:
    1px solid transparent;
}

.download-btn:hover{

    transform:
    translateY(-5px);

    box-shadow:
    0 0 30px rgba(239,68,59,.4);

    background:transparent;

    border:
    1px solid #ef443b;
}

/* Glow Animation */

@keyframes pulseGlow{

    0%{

        transform:scale(1);
    }

    50%{

        transform:scale(1.15);
    }

    100%{

        transform:scale(1);
    }

}


/* =====================================
   ABOUT RESPONSIVE
===================================== */

@media(max-width:991px){

    .about-wrapper{

        grid-template-columns:1fr;

        gap:60px;
    }

    .about-content{

        text-align:center;
    }

    .about-content h2{

        font-size:42px;
    }

    .about-buttons{

        display:flex;

        justify-content:center;
    }

}


@media(max-width:768px){

    .about-section{

        padding:40px 0;
    }

    .about-content h2{

        font-size:34px;
    }

    .about-content p{

        font-size:15px;
    }

    .about-image-box img{

        max-width:100%;
    }

}


@media(max-width:480px){

    .about-content h2{

        font-size:30px;
    }

    .download-btn{

        width:100%;
    }

}