/* ==========================================
        ABOUT LUXURY SECTION
        GOLD + EMERALD STYLE
========================================== */


.about-luxury{

    position:relative;

    padding:120px 8%;

    background:
            linear-gradient(
                    135deg,
                    #faf8f3,
                    #ffffff
            );

    overflow:hidden;

}


/* Background Emerald Glow */

.about-luxury::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    left:-250px;

    top:-200px;

    border-radius:50%;


    background:

            radial-gradient(
                    circle,
                    rgba(17,64,44,.18),
                    transparent 70%
            );

}



.about-luxury::after{


    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-250px;

    bottom:-200px;

    border-radius:50%;


    background:

            radial-gradient(
                    circle,
                    rgba(198,169,107,.25),
                    transparent 70%
            );


}




/* MAIN */

.about-wrapper{


    position:relative;

    z-index:5;


    display:flex;

    align-items:center;

    gap:100px;


}




/* ==========================
        IMAGE AREA
========================== */


.about-gallery{


    width:50%;

    height:650px;

    position:relative;


}



.gallery-bg{


    position:absolute;


    width:420px;

    height:420px;


    background:

            linear-gradient(
                    145deg,
                    #11402c,
                    #c6a96b
            );


    opacity:.12;


    border-radius:50%;


    left:60px;

    top:90px;


    filter:blur(3px);


}




.img-main{


    position:absolute;


    width:360px;

    height:520px;


    object-fit:cover;


    left:80px;

    top:40px;


    border-radius:35px;


    z-index:3;


    box-shadow:


            0 50px 100px rgba(17,64,44,.25);



    animation:

            floatImage 6s infinite ease-in-out;


}



.img-main:hover{

    transform:scale(1.04);

}




.img-small{


    position:absolute;


    width:220px;

    height:280px;


    object-fit:cover;


    right:20px;


    bottom:70px;


    border-radius:30px;


    border:

            10px solid #faf8f3;


    z-index:5;



    box-shadow:


            0 30px 70px rgba(0,0,0,.18);



    transition:.5s;


}



.img-small:hover{


    transform:

            translateY(-15px);


}




.img-side{


    position:absolute;


    width:160px;


    height:220px;


    object-fit:cover;


    left:0;


    bottom:80px;


    border-radius:25px;


    opacity:.9;


    z-index:2;


}





/* EXPERIENCE */


.experience-circle{


    position:absolute;


    width:160px;

    height:160px;


    background:


            linear-gradient(
                    145deg,
                    #c6a96b,
                    #11402c
            );



    border-radius:50%;


    bottom:40px;


    left:280px;


    z-index:10;


    display:flex;

    align-items:center;

    justify-content:center;


    color:white;


    box-shadow:


            0 30px 70px rgba(17,64,44,.45);


    animation:pulse 3s infinite;


}



.experience-circle strong{


    display:block;

    text-align:center;


    font-size:45px;


}



.experience-circle span{


    display:block;

    text-align:center;


    font-size:15px;

}





/* ==========================
        CONTENT
========================== */


.about-content{


    width:50%;


}



.about-label{


    color:#11402c;


    letter-spacing:7px;


    font-size:18px;


    font-weight:600;


}




.about-content h2{


    font-size:60px;


    line-height:1.5;


    margin:25px 0;


    color:#111;


}



.about-content h2 span{


    color:#c6a96b;


}



.about-content p{


    font-size:19px;


    line-height:40px;


    color:#666;


}




/* ==========================
        STATISTICS
========================== */


.statistics{


    display:flex;

    gap:20px;


    margin:45px 0;


}




.stat{


    width:150px;

    height:170px;


    background:white;


    border-radius:30px;



    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;



    box-shadow:


            0 20px 50px rgba(17,64,44,.08);



    border-top:

            3px solid #c6a96b;



    transition:.5s;


}



.stat:hover{


    transform:

            translateY(-15px);



    background:#11402c;


    color:white;


}



.stat i{


    font-size:32px;


    color:#c6a96b;


    margin-bottom:15px;


}




.stat strong{


    font-size:32px;


}




.stat span{


    font-size:14px;


    color:#777;


}




.stat:hover span{

    color:#ddd;

}





/* BUTTON */


.luxury-btn{


    display:inline-block;


    padding:18px 55px;


    border-radius:50px;


    background:


            linear-gradient(
                    135deg,
                    #11402c,
                    #1d6847
            );


    color:white;


    font-size:17px;


    transition:.5s;


    box-shadow:


            0 20px 50px rgba(17,64,44,.35);



}



.luxury-btn:hover{


    transform:

            translateY(-8px);



    background:


            linear-gradient(
                    135deg,
                    #c6a96b,
                    #11402c
            );


}





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


@keyframes floatImage{


    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-18px);

    }


}





@keyframes pulse{


    0%{

        box-shadow:

                0 0 0 0 rgba(198,169,107,.5);

    }


    70%{

        box-shadow:

                0 0 0 30px rgba(198,169,107,0);

    }


    100%{

        box-shadow:none;

    }


}





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



@media(max-width:1100px){


    .about-wrapper{

        flex-direction:column;

    }



    .about-gallery,

    .about-content{

        width:100%;

    }



    .about-content{

        text-align:center;

    }



    .statistics{

        justify-content:center;

    }


}




@media(max-width:600px){


    .about-luxury{

        padding:80px 20px;

    }



    .about-gallery{

        height:500px;

    }



    .img-main{

        width:250px;

        height:370px;

        left:50%;

        transform:translateX(-50%);

    }



    .img-small{

        width:130px;

        height:180px;

    }



    .img-side{

        width:100px;

        height:150px;

    }



    .experience-circle{

        width:110px;

        height:110px;

        left:50%;

    }



    .about-content h2{

        font-size:36px;

    }



    .statistics{

        flex-direction:column;

        align-items:center;

    }



    .stat{

        width:220px;

    }



}