*{
    box-sizing:border-box;
}

html,
body{

    overflow-x:hidden;

}

/*====================================
ABOUT HERO
====================================*/

.about-hero{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

}

.about-hero-image{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

}

.about-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.42);

}

.about-hero .container{

    position:relative;

    height:100%;

    z-index:2;

}

.about-hero-content{

    position:absolute;

    left:0;
    right:0;
    bottom:55px;

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

}

.about-hero-content h1{

    font-family:"Monument", sans-serif;

    font-size:48px;

    font-weight:400;

    color:#fff;

    letter-spacing:1px;

}

.about-scroll{

    display:flex;

    justify-content:center;

    align-items:center;

    animation:aboutBounce 2s infinite;

}

.about-scroll svg{

    width:56px;

    height:56px;

    transition:.3s;

}

.about-scroll:hover{

    transform:translateY(6px);

}

@keyframes aboutBounce{

    0%,20%,50%,80%,100%{

        transform:translateY(0);

    }

    40%{

        transform:translateY(8px);

    }

    60%{

        transform:translateY(4px);

    }

}

/*====================================
TABLET
====================================*/

@media(max-width:991px){

.about-hero-content h1{

    font-size:34px;

}

.about-scroll svg{

    width:46px;
    height:46px;

}

}

/*====================================
MOBILE
====================================*/

@media(max-width:768px){

.about-hero{

    height:100vh;

    min-height:650px;

}

.about-hero-content{

    bottom:120px;

}

.about-hero-content h1{

    font-size:22px;

}

.about-scroll svg{

    width:36px;

    height:36px;

}

}




/*======================================
SERVICE DETAILS
======================================*/

.service-details{

    padding:90px 0;

    background:#fff;

}

.service-detail-card{

    position:relative;

    width:100%;
    height:650px;

    overflow:hidden;

    margin-bottom:40px;

    cursor:pointer;

}

.service-detail-card:last-child{

    margin-bottom:0;

}

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

.service-detail-card img{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.6s;

}

.service-detail-card:hover img{

    transform:scale(1.05);

}

/*==========================
OVERLAY
==========================*/

.service-detail-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.35);

    transition:.5s;

}

.service-detail-card:hover .service-detail-overlay{

    background:rgba(0,0,0,.45);

}

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

.service-detail-content{

    position:relative;

    z-index:2;

    width:100%;
    height:100%;

}

/*==========================
BOTTOM TITLE
==========================*/

.service-title{

    position:absolute;

    left:40px;

    bottom:45px;

    transition:.45s;

}

.service-title h2{

    color:#fff;

    font-family:"Monument", sans-serif;

    font-size:40px;

    font-weight:400;

}

/*==========================
RIGHT PANEL
==========================*/

.service-info{

    position:absolute;

    top:0;

    right:-50%;

    width:50%;

    height:100%;

    padding:90px 70px;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(6px);

    color:#fff;

    transition:.55s ease;

}

/*==========================
HOVER
==========================*/

.service-detail-card:hover .service-info{

    right:0;

}

.service-detail-card:hover .service-title{

    opacity:0;

}

/*==========================
TEXT
==========================*/

.service-info h3{

    font-family:"Monument", sans-serif;

    font-size:40px;

    font-weight: 400;

    margin-bottom:30px;

}

.service-info p{

    font-family:"DM Sans", sans-serif;

    font-size:20px;

    line-height:1.8;

    margin-bottom:35px;

}

.service-info h4{

    font-family:"Monument", sans-serif;

    font-size:22px;

    margin-bottom:18px;

    font-weight: 400;

}

.service-info ul{

    padding-left:20px;

}

.service-info li{

    font-family:"DM Sans", sans-serif;

    font-size:18px;

    line-height:2;

}


/*======================================
TABLET
======================================*/

@media (max-width:991px){

.service-detail-card{

    height:520px;

}

.service-title h2,
.service-info h3{

    font-size:32px;

}

.service-info{

    width:60%;

    right:-60%;

    padding:55px 40px;

}

.service-info p{

    font-size:17px;

}

.service-info li{

    font-size:16px;

}

}



/*======================================
MOBILE
======================================*/

@media (max-width:768px){

.service-details{

    padding:60px 0;

}

.service-detail-card{

    height:520px;

    margin-bottom:25px;

}

/* Remove hover effect on mobile */

.service-detail-card:hover img{

    transform:none;

}

.service-detail-card:hover .service-title{

    opacity:1;

}

.service-detail-card:hover .service-info{

    right:0;

}

/* Image */

.service-detail-card img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/* Dark overlay */

.service-detail-overlay{

    background:rgba(0,0,0,.45);

}

/* Hide bottom title */

.service-title{

    display:none;

}

/* Always visible content */

.service-info{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    right:0;

    padding:28px 22px;

    background:rgba(0,0,0,.42);

    backdrop-filter:none;

}

/* Heading */

.service-info h3{

    font-size:24px;

    margin-bottom:18px;

    color:#fff;

}

/* Paragraph */

.service-info p{

    font-size:14px;

    line-height:1.6;

    margin-bottom:18px;

    color:#fff;

}

/* Key Points */

.service-info h4{

    font-size:16px;

    margin-bottom:10px;

    color:#fff;

}

.service-info ul{

    padding-left:18px;

}

.service-info li{

    font-size:13px;

    line-height:1.7;

    color:#fff;

}

}