/* =====================================
        ABOUT LUXURY SECTION
        Emerald Gold Edition
===================================== */


.about{

    position:relative;

    padding:120px 8%;

    background:

            linear-gradient(
                    135deg,
                    #ffffff,
                    #f5f0e6
            );

    overflow:hidden;

}



/* Background Decorations */


.about::before{

    content:"";

    position:absolute;

    left:-180px;

    top:-180px;

    width:450px;

    height:450px;


    background:

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


    border-radius:50%;

}



.about::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:500px;

    height:500px;


    background:

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


    border-radius:50%;

}







/* =====================================
        CONTAINER
===================================== */


.about-container{

    max-width:1300px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:90px;

    position:relative;

    z-index:5;

}






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


.about-left{

    flex:1;

    position:relative;

}



.image-box{

    position:relative;

    width:100%;

    height:700px;

}




.big-image{


    position:absolute;


    left:0;


    bottom:0;


    width:78%;


    height:620px;


    object-fit:cover;


    border-radius:30px;


    box-shadow:

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


    transition:.7s;


}




.big-image:hover{


    transform:scale(1.04);


}





.small-image{


    position:absolute;


    right:0;


    top:0;


    width:48%;


    height:330px;


    object-fit:cover;


    border:12px solid #fff;


    border-radius:25px;


    box-shadow:

            0 30px 80px rgba(17,64,44,.18);


    transition:.6s;


}



.small-image:hover{


    transform:

            translateY(-15px);


}







/* Experience */


.experience{


    position:absolute;


    left:40px;


    bottom:25px;


    width:160px;


    height:160px;


    background:


            linear-gradient(

                    145deg,

                    #11402c,

                    #1d6546

            );


    border-radius:50%;


    display:flex;


    justify-content:center;


    align-items:center;


    flex-direction:column;


    color:white;


    box-shadow:


            0 35px 80px rgba(17,64,44,.55);


    animation:

            float 4s infinite ease-in-out;


}



.experience h2{


    font-size:48px;


    margin:0;


}



.experience span{


    font-size:15px;


}






@keyframes float{


    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-18px);

    }

}







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


.about-right{


    flex:1;

}




.about-content{


    position:relative;

    z-index:10;

}






.mini-title{


    display:inline-block;


    letter-spacing:6px;


    font-size:18px;


    color:#C6A96B;


    font-family:

            'Cormorant Garamond',serif;


}







.section-subtitle{


    display:flex;


    align-items:center;


    gap:15px;


    color:#C6A96B;


    letter-spacing:5px;


    font-size:16px;


}





.section-subtitle::before{


    content:"";


    width:55px;


    height:2px;


    background:#C6A96B;


}








.about-right h2,

.about-content h2{


    font-size:62px;


    line-height:85px;


    font-weight:800;


    color:#11402c;


    margin:25px 0;


}





.about-right h2 span,

.about-content h2 span{


    color:#C6A96B;


}







.about-right p,

.about-content p{


    font-size:19px;


    line-height:42px;


    color:#53665d;


    max-width:620px;


    margin-bottom:45px;


}








/* =====================================
        INFO BOXES
===================================== */


.about-info{


    display:flex;


    gap:20px;


    margin-bottom:45px;


    flex-wrap:wrap;


}






.info-box{


    flex:1;


    min-width:150px;


    padding:30px 20px;


    text-align:center;


    border-radius:25px;



    background:


            linear-gradient(

                    145deg,

                    #ffffff,

                    #f8f3e8

            );



    border:


            1px solid rgba(17,64,44,.15);



    box-shadow:


            0 20px 60px rgba(17,64,44,.12);



    transition:.5s;


}




.info-box:hover{


    transform:


            translateY(-15px);



    background:#11402c;



    box-shadow:


            0 40px 90px rgba(17,64,44,.35);


}




.info-box i{


    font-size:32px;


    color:#C6A96B;


    margin-bottom:15px;


}





.info-box h3{


    font-size:36px;


    color:#11402c;


    margin-bottom:10px;


}





.info-box:hover h3{


    color:#ffffff;


}





.info-box span{


    color:#777;


}



.info-box:hover span{


    color:#ddd;


}








/* =====================================
        BUTTON
===================================== */


.about-btn{


    display:inline-block;


    padding:18px 55px;


    background:


            linear-gradient(

                    135deg,

                    #11402c,

                    #1d6546

            );


    color:white;


    border-radius:50px;


    font-size:17px;


    transition:.5s;


    box-shadow:


            0 25px 60px rgba(17,64,44,.35);


}




.about-btn:hover{


    transform:


            translateY(-8px);



    background:


            linear-gradient(

                    135deg,

                    #C6A96B,

                    #a77c32

            );


    box-shadow:


            0 35px 80px rgba(198,169,107,.45);


}







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


@media(max-width:1100px){


    .about-container{


        flex-direction:column;


    }



    .about-left,

    .about-right{


        width:100%;


    }



    .about-content{


        text-align:center;


    }



}





@media(max-width:600px){


    .about{


        padding:80px 20px;


    }



    .image-box{


        height:500px;


    }



    .big-image{


        height:420px;


    }



    .small-image{


        height:220px;


    }



    .about-right h2,

    .about-content h2{


        font-size:40px;


        line-height:60px;


    }



    .about-right p,

    .about-content p{


        font-size:16px;


        line-height:35px;


    }



    .about-info{


        justify-content:center;


    }



}
.about-content h2{

    margin:20px 0;

    font-size:54px;

    line-height:75px;

    color:#111;

}

.about-content p{

    font-size:18px;

    line-height:40px;

    color:#666;

    margin-bottom:40px;

}