/*
Theme Name: demeter
Description: Child theme of demeter
Author: demeter
Version: 1.0.0
Text Domain: demeter
Template: twentytwentyone
*/

/*  =========================== banner section =========================== */ 
.section-banner{height:100svh;min-height:600px;}
.banner-slider-wrap,.banner-slider-wrap .slick-track,.banner-slider-wrap .slick-list{height: 100%;}
.banner-image{position: relative;height:100%;}
.banner-image img{height:100%;object-fit: cover;}
.banner-content{position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index: 1;max-width:892px;text-align:center;margin: 0 auto;width: 100%;}
.section-banner .heading-style-1{margin-bottom: 16px;}
.section-banner .p-big{margin-bottom: 24px;font-family: 'Neufile Grotesk reg';color: var(--secondary);}

/* slick dots */
.section-banner .slick-dotted.slick-slider { margin-bottom:0; }
.section-banner .slick-dots{ bottom: 54px; right: auto; width: unset;left: 50%;transform:translateX(-50%); display: flex;column-gap: 8px;} 
.section-banner .slick-dots button:not(:hover):not(:active):not(.has-background){background-color: transparent;}
.section-banner .slick-dots li {margin-inline: 0;width: auto;height: auto;}
.section-banner .slick-dots li button{padding: 0;width: 10px; height: 6px; font-size: unset; opacity: 0.3; background: white !important;transition: opacity 0.5s, background-color 0.5s, width 0.5s; transition-delay: 0.5s, 0.5s, 0s;font-size:0;}
.section-banner .slick-dots li button:before{display:none;}
.section-banner .slick-dots li.slick-active button{ opacity: 1; width:30px;transition-delay: 0s; }

/*  =========================== expertise section =========================== */ 
.section-expertise .heading-style-4{margin-bottom: 64px;}
.section-expertise .expertise-wrap{display: flex;align-items:center;gap: 24px;}
.section-expertise .expertise-inner{position: relative;overflow:hidden;max-width:312px;height: 453px;}
.section-expertise .expertise-image{position: relative;height: 100%;}
.section-expertise .expertise-image img{height: 100%;transition:0.4s ease-in-out;object-fit:cover;}
.section-expertise .expertise-image:after{content: "";width: 100%;height: 35%;position: absolute;bottom: 0;left: 0;background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); z-index: 1;}
.section-expertise .expertise-inner .expertise-image:before{content: "";width: 100%;height: 100%;position: absolute;bottom: 0;left: 0; z-index: 1;opacity:0;transition: 0.2s ease-in-out;}
.section-expertise .expertise-inner:first-child .expertise-image:before{background: linear-gradient(155.22deg, #285252 0%, #2D7676 99.29%); }
.section-expertise .expertise-inner:nth-child(2) .expertise-image:before{background: linear-gradient(155.22deg, #7D8081 0%, #5D6060 99.29%); }
.section-expertise .expertise-inner:nth-child(3) .expertise-image:before{background: linear-gradient(155.22deg, #32614A 0%, #246969 99.29%); }
.section-expertise .expertise-inner:last-child .expertise-image:before{background: linear-gradient(155.22deg, #672E39 0%, #CC7062 99.29%); }

.section-expertise .expertise-content{ position: absolute; top: 80%; height: 100%; left: 0; padding: 14px 10px; display: flex;z-index: 1; width: 100%; flex-direction: column;transition: 0.4s ease-in-out !important;}
.section-expertise .expertise-content p{margin-top: 10px;opacity: 0;color: var(--light-green);font-family: 'Neufile Grotesk reg'; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical;}
.section-expertise .button-link{margin-top: auto;}

.section-expertise .expertise-inner:hover .expertise-image:after{z-index:-1;}
.section-expertise .expertise-inner:hover .expertise-image:before{opacity:1;}
.section-expertise .expertise-inner:hover .expertise-content{top: 0;}
.section-expertise .expertise-inner:hover p{opacity: 1;}
.section-expertise .expertise-inner:hover .expertise-image img{scale: 1.2;}

/*  =========================== about us section =========================== */ 
.section-about-us .heading-style-4{margin-bottom: 64px;}
.section-about-us .heading-style-2{font-family: 'Neufile Grotesk light';color:var(--gray);margin-bottom: 44px;}
.section-about-us .heading-style-2 span{font-family: 'Neufile Grotesk bold';color: var(--white);}


/*  =========================== key section =========================== */
.section-key{display: none;}
.section-key .button-link{display: none;}
.section-key .heading-style-4{margin-bottom: 50px;}
.section-key .key-slider-wrap{margin-inline: -12px;}
.key-slider-inner .heading-style-4{text-transform: unset;}
.section-key .key-slider-inner{padding:24px;max-width: 424px;min-height: 270px;margin-inline: 12px;overflow: hidden;position:relative;}
.section-key .key-slider-inner:nth-child(5n+1),.section-key .key-slider-inner:nth-child(5n+1):focus{background-color: #295FB1 !important;}
.section-key .key-slider-inner:nth-child(5n+1)::before{content: "";position: absolute;background:url(../images/key-image-1.png) no-repeat center bottom / 100%;height:100%;width:100%;left:0; pointer-events:none;}
.section-key .key-slider-inner:nth-child(5n+2),.section-key .key-slider-inner:nth-child(5n+2):focus{background-color: #107474 !important;}
.section-key .key-slider-inner:nth-child(5n+2)::before{content: "";position: absolute;background:url(../images/key-image-2.png) no-repeat center bottom / 100%;height:100%;width:100%;left:0; pointer-events:none;}
.section-key .key-slider-inner:nth-child(5n+3),.section-key .key-slider-inner:nth-child(5n+3):focus{background-color: #69107F !important;}
.section-key .key-slider-inner:nth-child(5n+3)::before{content: "";position: absolute;background:url(../images/key-image-3.png) no-repeat center bottom / 100%;height:100%;width:100%;left:0; pointer-events:none;}
.section-key .key-slider-inner:nth-child(5n+4),.section-key .key-slider-inner:nth-child(5n+4):focus{background-color: #844A14 !important;}
.section-key .key-slider-inner:nth-child(5n+4)::before{content: "";position: absolute;background:url(../images/key-image-4.png) no-repeat center bottom / 100%;height:100%;width:100%;left:0; pointer-events:none;}
.section-key .key-slider-inner:nth-child(5n+5),.section-key .key-slider-inner:nth-child(5n+5):focus{background-color: #144184 !important;}
.section-key .key-slider-inner:nth-child(5n+5)::before{content: "";position: absolute;background:url(../images/key-image-5.png) no-repeat center bottom / 100%;height:100%;width:100%;left:0; pointer-events:none;}

.section-key .key-slider-inner .key-card-title{top: 24px;max-width:90%; position:absolute;transition: 0.4s ease-in-out;}
.section-key .key-card-detail{padding:24px; position: absolute;height: 100%;top:100%;left:0; display:flex;flex-direction:column;justify-content:space-between;transition:0.4s ease-in-out !important;}
.section-key .key-card-detail p{overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;}
.section-key .key-slider-inner:hover .key-card-detail{top: 0;}
.section-key .key-slider-inner:hover .key-card-title{top: -100%;}
.section-key .key-slider-inner:hover:before{opacity:0;}

/* slick arrow */
.slick-arrow{ top: -70px; background-color: var(--f0) !important; border-radius: 0 !important; height: 32px; width: 32px; display: flex; justify-content: center; align-items: center; z-index: 10; transform: unset; }
.slick-prev { right: calc(100% - (1320px) + 24px); transform: translate(-100%, -50%); left: auto; }
.slick-next { right: calc(100% - (1320px) - 30px); transform: translate(-100%, -50%); }
.slick-prev:before, .slick-next:before{content: ''; background: url(../images/btn-arrow.svg) no-repeat center / cover; width: 30px; height: 30px; display: block; opacity: 1;}
.slick-prev:before { transform: rotate(180deg); }


/* ===================================== media quiery  ===================================== */
@media screen and (max-width:1366px) {
    /*  =========================== banner section =========================== */ 
    .section-banner .heading-style-1{margin-bottom: 15px;}
    .section-banner .p-big{margin-bottom: 22px;}
    
    /*  =========================== expertise section =========================== */ 
    .section-expertise .heading-style-4{margin-bottom: 52px;}
    .section-expertise .expertise-wrap{gap: 22px;}
    .section-expertise .expertise-inner{height: 383px;} 
    .section-expertise .expertise-content p{margin-top: 10px;}

   /*  =========================== about us section =========================== */ 
    .section-about-us .heading-style-4{margin-bottom: 52px;}
    .section-about-us .heading-style-2{margin-bottom: 38px;}

    /*  =========================== key section =========================== */ 
    .section-key .heading-style-4{margin-bottom: 45px;}
    .section-key .key-slider-wrap{margin-inline: -12px;}
    .section-key .key-slider-inner{padding:24px;max-width: 424px;min-height: 270px;margin-inline: 12px;}   
    .section-key .key-slider-inner .key-card-title{top: 24px;}
    .section-key .key-card-detail{padding:24px;}   
    /* slick arrow */
    .slick-arrow{ top: -66px;  height: 32px; width: 32px;}
    .slick-prev { right: calc(100% - (1120px) + 24px);}
    .slick-next { right: calc(100% - (1120px) - 30px);}
    /*  .slick-prev:before,   .slick-next:before{ width: 30px; height: 30px;} */

}
@media screen and (max-width:1199px) {
    /*  =========================== banner section =========================== */ 
    .section-banner .banner-content{max-width: 762px;}
    .section-banner .heading-style-1{margin-bottom: 12px;}
    .section-banner .p-big{margin-bottom: 20px;}
    /*  =========================== expertise section =========================== */ 
    .section-expertise .heading-style-4{margin-bottom: 48px;}
    .section-expertise .expertise-wrap{gap: 15px;}
    .section-expertise .expertise-inner{height: 375px;} 
    .section-expertise .expertise-content{top:74%;}
    .section-expertise .expertise-content p{margin-top: 8px;}
    
     /*  =========================== about us section =========================== */ 
    .section-about-us .heading-style-4{margin-bottom: 48px;}
    .section-about-us .heading-style-2{margin-bottom: 36px;}

    /*  =========================== key section =========================== */ 
    .section-key .heading-style-4{margin-bottom: 42px;}
    .section-key .key-slider-wrap{margin-inline: -9px;}
    .section-key .key-slider-inner{padding:20px;margin-inline: 9px;}   
    .section-key .key-slider-inner .key-card-title{top: 20px;max-width: 88%;}
    .section-key .key-card-detail{padding:20px;}   
    /* slick arrow */
    .slick-arrow{ top: -60px;  height: 30px; width: 30px;}
    .slick-prev { right: calc(100% - (960px) + 20px);}
    .slick-next { right: calc(100% - (960px) - 24px);}
    .slick-prev:before, .slick-next:before{ width: 25px; height: 25px;}
    
}
@media screen and (max-width:991px) {
    /*  =========================== banner section =========================== */ 
    .section-banner .banner-content{max-width: 670px;}
    .section-banner .heading-style-1{margin-bottom: 11px;}
    .section-banner .p-big{margin-bottom: 19px;}
    /* dots */
    .section-banner .slick-dots{column-gap: 6px;}
    .section-banner .slick-dots li.slick-active button{width:18px;}
    .section-banner .slick-dots li button{width: 8px; height: 5px;}
    
    /*  =========================== expertise section =========================== */ 
    .section-expertise .heading-style-4{margin-bottom: 48px;}
    .section-expertise .expertise-wrap{gap: 15px;margin-inline:-12px;}
    .section-expertise .expertise-inner{height: 450px;margin-inline:12px;max-width: 350px;} 
    .section-expertise .expertise-content{top:80%;padding: 20px;}
    .section-expertise .expertise-content p{margin-top: 10px;}   
     
     /*  */
    .section-expertise .expertise-inner:first-child .expertise-content{background: linear-gradient(155.22deg, #285252 0%, #2D7676 99.29%); }
    .section-expertise .expertise-inner:nth-child(2) .expertise-content{background: linear-gradient(155.22deg, #7D8081 0%, #5D6060 99.29%); }
    .section-expertise .expertise-inner:nth-child(3) .expertise-content{background: linear-gradient(155.22deg, #32614A 0%, #246969 99.29%); }
    .section-expertise .expertise-inner:last-child .expertise-content{background: linear-gradient(155.22deg, #672E39 0%, #CC7062 99.29%); }

    .section-expertise .expertise-content,.section-expertise .expertise-inner:hover .expertise-content{top: auto;bottom:0; height: auto;min-height: 182px;padding: 15px;}
    .section-expertise .expertise-content p{opacity: 1;-webkit-line-clamp: 2;margin-bottom: 10px;}
    .section-expertise .expertise-inner .expertise-image:before{display:none;}
    .section-expertise .expertise-inner:hover .expertise-image img{scale: 1;}
    
    /*  =========================== about us section =========================== */ 
    .section-about-us .heading-style-4{margin-bottom: 48px;}
    .section-about-us .heading-style-2{margin-bottom: 36px;}

    /*  =========================== key section =========================== */ 
    .section-key .heading-style-4{margin-bottom: 40px;}
    .section-key .key-slider-wrap{margin-inline: -9px;}    
    /* slick arrow */
    .slick-arrow{ top: -60px;  height: 30px; width: 30px;}
    .slick-prev { right: calc(100% - (720px) + 20px);}
    .slick-next { right: calc(100% - (720px) - 24px);}    
}
@media screen and (max-width:767px) {
    
    /*  =========================== banner section =========================== */ 
    .section-banner{height: 700px;min-height:unset;}
    .section-banner .banner-content{max-width: 520px;padding-inline:15px;}    
    /* dots */
    .section-banner .slick-dots{column-gap: 6px;}
    .section-banner .slick-dots li.slick-active button{width:16px;}
    .section-banner .slick-dots li button{width: 6px; height: 4px;}
    
    /*  =========================== expertise section =========================== */ 
    .section-expertise .heading-style-4{margin-bottom: 42px;}
    .section-expertise .expertise-wrap{margin-inline:-9px;}
    .section-expertise .expertise-inner{height: 360px;margin-inline:9px;max-width: 360px;} 
    .section-expertise .expertise-content{padding: 16px;}  
    
    
    /* .section-expertise .expertise-inner:first-child .expertise-content{background: linear-gradient(155.22deg, #285252 0%, #2D7676 99.29%); }
    .section-expertise .expertise-inner:nth-child(2) .expertise-content{background: linear-gradient(155.22deg, #7D8081 0%, #5D6060 99.29%); }
    .section-expertise .expertise-inner:nth-child(3) .expertise-content{background: linear-gradient(155.22deg, #32614A 0%, #246969 99.29%); }
    .section-expertise .expertise-inner:last-child .expertise-content{background: linear-gradient(155.22deg, #672E39 0%, #CC7062 99.29%); }

    .section-expertise .expertise-content,.section-expertise .expertise-inner:hover .expertise-content{top: auto;bottom:0; height: auto;min-height: 170px;}
    .section-expertise .expertise-content p{opacity: 1;-webkit-line-clamp: 2;margin-bottom: 20px;}
    .section-expertise .expertise-inner .expertise-image:before{display:none;}
    .section-expertise .expertise-inner:hover .expertise-image img{scale: 1;} */
    
    /*  =========================== about us section =========================== */ 
    .section-about-us .heading-style-4{margin-bottom: 42px;}
    .section-about-us .heading-style-2{margin-bottom: 30px;}

    /*  =========================== key section =========================== */ 
    .section-key .heading-style-4{margin-bottom: 38px;}
    .section-key .key-slider-wrap{margin-inline: -9px;}
    .section-key .key-card-detail{position: relative;padding: 0;top: 0;}
    .section-key .key-card-detail p{font-family: 'Neufile Grotesk reg';}
    .section-key .key-slider-inner .key-card-title{position: relative;top: 0;max-width: 100%;}
    .section-key .key-card-title .heading-style-4{margin-bottom: 15px;}
    /* .section-key .key-slider-inner{padding:20px;margin-inline: 9px;}   
    .section-key .key-slider-inner .key-card-title{top: 20px;max-width: 88%;}
    .section-key .key-card-detail{padding:20px;}    */
    /* slick arrow */
    .slick-arrow{ top: -53px;  height: 30px; width: 30px;}
    .slick-prev { right: calc(100% - (100%) + 12px);}
    .slick-next { right: calc(100% - (100%) - 24px);}
    .slick-prev:before, .slick-next:before{ width: 20px; height: 20px;}
    
}
@media screen and (max-width:575px) {
    
    /*  =========================== banner section =========================== */ 
    .section-banner .banner-content{max-width: 100%;} 
    
    /*  =========================== expertise section =========================== */ 
    .section-expertise .heading-style-4{margin-bottom: 40px;}
    .section-expertise .expertise-inner{height: auto;max-width: 100%;overflow: hidden;} 
    .section-expertise .expertise-content, .section-expertise .expertise-inner:hover .expertise-content{min-height: auto;}
    .section-expertise .expertise-content{position: relative;min-height: 178px;}
    .section-expertise .expertise-image{height: 320px;}
    .section-expertise .slick-list{min-height: 530px;}
    .section-expertise .expertise-image:after{background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #0000008c 100%);}
    
     /*  =========================== about us section =========================== */ 
    .section-about-us .heading-style-4{margin-bottom: 40px;}
    .section-about-us .heading-style-2{margin-bottom: 28px;}
    
     /*  =========================== key section =========================== */ 
    .section-key .heading-style-4{margin-bottom: 40px;}
    .section-key .key-slider-wrap{margin-inline: -9px;}
    .section-key .key-slider-inner{max-width:100%;min-height: 230px;}   
    /* slick arrow */
    .slick-arrow{ top: -24px; }
    .slick-prev { right: calc(100% - (100%) + 12px);}
    .slick-next { right: calc(100% - (100%) - 24px);}
    .slick-prev:before, .slick-next:before{ width: 18px; height: 18px;}
}