@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Roboto+Slab:wght@400;500;600;800&display=swap');

:root{
    --primary-color-1: #14203B;
    --primary-color-2: #47A9D3;
    --primary-color-3: #683BD3;
    --primary-gradient: linear-gradient(90deg, #1799D0, #683BD3);
    --primary-gradient-2: linear-gradient(180deg, #1799D0, #683BD3);
    --font-montserrat: 'Montserrat', sans-serif;
    --font-roboto-slab: 'Roboto Slab', serif;
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html,body{
    font-family: var(--font-montserrat);
    font-size: 16px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
    appearance: none;
}
input[type=number]{
    -moz-appearance: textfield;
}

.c-h-100{
    height: 100%;
    padding: 1rem 0;
}

.cp-l{
    padding-left: 5rem;
}
.cp-r{
    padding-right: 5rem;
}

.sec-padding{
    /* padding-top: 5rem;
    padding-bottom: 5rem; */
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.sec-margin{
    margin-top: 5rem;
    margin-bottom: 5rem;
}

@media screen and (max-width: 991px) {
    .cp-l{
        padding-left: 3rem;
    }
    .cp-r{
        padding-right: 3rem;
    }
}

@media screen and (max-width: 767px) {
    .sec-padding{
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .sec-margin{
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
}

@media screen and (max-width: 575px) {
    .cp-l{
        padding-left: 1rem;
    }
    .cp-r{
        padding-right: 1rem;
    }
}

.btn-1,
.btn-1:hover{
    position: relative;
    text-decoration: none;
    border: none;
    outline: none;
    box-shadow: none;
    display: inline-block;
    color: #fff;
    font-size: 0.8rem;
    padding: 0.8rem 2rem;
    overflow: hidden;
}
.btn-1::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-image: var(--primary-gradient);
    transition: 0.3s;
}
.btn-1:hover::before{
    transform: rotateY(180deg);
}
.btn-1 span{
    position: relative;
    z-index: 1;
}

.btn-2{
    display: inline-block;
    text-decoration: none;
    border: 2px solid var(--primary-color-2);
    color: var(--primary-color-2);
    font-weight: 500;
    font-size: 0.8rem;
    padding: 0.65rem 1.8rem;
    transition: 0.3s;
}
.btn-2:hover{
    background-color: var(--primary-color-2);
    color: #fff;
}

.text-overflow {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    overflow: hidden;
}


/* Owl-Carousel */
.owl-carousel .owl-nav.disabled{
    display: none;
}
.owl-carousel .owl-nav{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next{
    pointer-events: all;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* width: 50px;
    height: 50px;
    border-radius: 50%; */
    background-color: transparent !important;
    color: #aaa !important;
    font-size: 42px !important;
    font-weight: bolder !important;
}
.owl-carousel .owl-nav .owl-prev.disabled,
.owl-carousel .owl-nav .owl-next.disabled{
    pointer-events: none;
    opacity: 0.5;
}

.owl-carousel .owl-dots.disabled{
    display: none;
}
.owl-carousel .owl-dots{
    position: relative;
    left: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    text-align: center;
    margin-top: 2rem;
    pointer-events: none;
}
.owl-carousel .owl-dots .owl-dot{
    pointer-events: all;
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: var(--primary-gradient);
    margin: 0 8px;
    opacity: 0.3;
}
.owl-carousel .owl-dots .owl-dot.active{
    opacity: 1;
}

/* .owl-carousel .owl-stage{
    display: flex;
    flex-wrap: wrap;
}
.owl-carousel .owl-stage .owl-item .slide,
.owl-carousel .owl-stage .owl-item .slide > *{
    height: 100%;
} */

/* File Box Code */
.file-box input[type=file]{
    display: none !important;
}
.file-box label{
    position: relative;
    width: 100%;
    height: 100%;
    user-select: none;
    cursor: pointer;
}
.file-box label p{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    overflow: hidden;

    width: 100%;
    padding: 0;
    margin: 0;

    color: #777;
}
.file-box label p.selected{
    color: #333;
}
.file-box label span{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    min-width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    background-color: var(--primary-color-2);
    color: #fff;
    font-size: 12px;
    padding: 5px 20px;
    margin: -1px;
}
/* End File Box Code */

/* =============== Side-Element-Sticky Area =============== */
@media screen and (min-width: 768px) {
    [data-sticky-main-ele]{
        position: relative;
    }
    [data-sticky-main-ele] [data-sticky-content-ele]{
        position: sticky;
        top: 80px;
        z-index: 1;
        height: 100%;
    }
}
/* =============== End Side-Element-Sticky Area =============== */

/* ====================== Side-Popup ====================== */
.side-popup-sec{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
}
.side-popup-sec.active{
    pointer-events: all;
}
.side-popup-sec .overlay{
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: 0.3s ease;
}
.side-popup-sec.active .overlay{
    opacity: 1;
}
.side-popup-sec .side-popup-box{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 280px;
    height: 100%;
    transform: translateX(120%);
    transition: 0.3s ease;
}
.side-popup-sec.active .side-popup-box{
    transform: translateX(0%);
}
.side-popup-sec .side-popup::-webkit-scrollbar {
    appearance: none;
    display: none;
    width: 0% !important;
}
.side-popup-sec .side-popup{
    scrollbar-width: none;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}
.side-popup-sec .close-btn{
    text-align: right;
}
.side-popup-sec .close-btn button{
    border: none;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    line-height: 1;
    font-size: 1.2rem;
    padding: 0.3rem 0.5rem;
    margin-right: -1rem;
}
/* ====================== Side-Popup ====================== */

/* ====================== Header Area ====================== */
header{
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    width: 100%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
    /* background-color: #fff; */
    background-color: rgba(0,0,0,0.6);
}
header.sticky{
    position: sticky;
    animation: sticky 1s ease-out;
}
@keyframes sticky {
    0%{
        transform: translateY(-150px);
    }
    100%{
        transform: translateY(0);
    }
}

.top-header{
    /* background-color: #F7FAFD; */
    color: rgba(0,0,0,0.6);
}
.top-header .header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.top-header .header ul{
    list-style: none;
    padding: 5px 0;
    margin: 0;
}
.top-header .header ul li{
    display: inline-block;
}
.top-header .header ul:first-child li{
    margin-right: 1.8rem;
}
.top-header .header ul:last-child li{
    margin-left: 1.8rem;
}
.top-header .header ul li a{
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
    font-size: 0.82rem;
    /* color: #333; */
    color: #fff;
}
.top-header .header ul li a i{
    display: inline-block;
    margin-right: 0.3rem;
}

.main-header .header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}
.main-header .header .logo img{
    width: 120px;
}
.main-header .header .nav ul{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    margin: 0;
}
.main-header .header .nav ul li{
    position: relative;
    display: inline-flex;
    align-items: center;
    /* margin-left: 2.2rem; */
}
.main-header .header .nav ul li a:not(.btn-1){
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
    font-size: 0.92rem;
    /* color: #333; */
    color: #fff;
    /* padding: 8px 15px; */
    padding: 8px 12px;
}
.main-header .header .nav ul li.menu > a::after{
    content: '\f107';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 600;
    display: inline-block;
    position: relative;
    top: 1px;
    margin-left: 8px;
    transition: 0.3s;
}
.main-header .header .nav ul li.menu:hover > a::after{
    top: -1px;
    transform: rotate(180deg);
}
.main-header .header .nav ul li.menu ul{
    position: absolute;
    top: 100%;
    left: 0;
    display: block;
    width: 200px;
    /* background-color: #fff; */
    /* background-color: rgba(0,0,0,0.6); */
    background-color: #000;
    border-bottom: 2px solid var(--primary-color-3);
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
}
.main-header .header .nav ul li.menu:hover ul{
    opacity: 1;
    pointer-events: all;
}
.main-header .header .nav ul li.menu ul li{
    display: block;
    margin-left: 0;
}
.main-header .header .nav ul li.menu ul li a{
    font-size: 0.85rem;
}

.main-header .header .side-menu-btn{
    display: inline-block;
    border: none;
    outline: none;
    box-shadow: none;
    background-color: transparent;
}
.main-header .header .side-menu-btn img{
    width: 24px;
}

@media screen and (min-width: 1200px){
    .main-header .header .side-menu-btn{
        display: none;
    }
}

@media screen and (max-width: 1199px){
    .top-header{
        display: none;
    }
    .main-header .header .nav{
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .main-header .header{
        padding: 8px 0;
    }
    .main-header .header .logo img{
        width: 72px;
    }
}
/* ====================== End Header Area ====================== */

/* ====================== Side-Menu Area ====================== */
[data-side-popup="side-menu"] .side-popup-box{
    right: unset;
    left: 0;
    transform: translateX(-120%);
}
[data-side-popup="side-menu"] .side-popup{
    padding: 0;
}
[data-side-popup="side-menu"] .close-btn{
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    padding: 8px 1rem;
}
[data-side-popup="side-menu"] .close-btn .logo img{
    width: 100%;
    max-width: 72px;
}
[data-side-popup="side-menu"] .close-btn button{
    position: relative;
    top: 2px;
    margin-right: -5px;
}
[data-side-popup="side-menu"] .content-box{
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.2rem;
}
[data-side-popup="side-menu"] .content-box .nav{
    display: block;
    width: 100%;
    margin-top: 0.8rem;
    margin-bottom: 1rem;
}
[data-side-popup="side-menu"] .content-box .nav ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
[data-side-popup="side-menu"] .content-box .nav ul li{
    margin-bottom: 1.8rem;
}
[data-side-popup="side-menu"] .content-box .nav ul li a{
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    font-size: 0.92rem;
    color: #333;
}
[data-side-popup="side-menu"] .content-box .nav ul li a.btn-1,
[data-side-popup="side-menu"] .content-box .nav ul li a.btn-1:hover{
    font-weight: 500;
    color: #fff;
    padding: 0.65rem 2rem;
}
[data-side-popup="side-menu"] .content-box .nav ul li .menu{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
[data-side-popup="side-menu"] .content-box .nav ul li .menu span{
    position: relative;
    right: -6px;
}
[data-side-popup="side-menu"] .content-box .nav ul li .menu span::after{
    content: '\f107';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 600;
    display: inline-block;
    padding: 0.2rem 0.4rem;
    transition: 0.3s;
}
[data-side-popup="side-menu"] .content-box .nav ul li .drop-down{
    display: none;
    border-bottom: 2px solid #000;
    border-image: linear-gradient(135deg, #1799D0, #683BD3) 1;
    padding-left: 0.65rem;
    padding-bottom: 0.4rem;
    margin-top: 0.65rem;
    margin-bottom: 2.4rem;
}
[data-side-popup="side-menu"] .content-box .nav ul li .drop-down li{
    margin-bottom: 0.5rem;
}
[data-side-popup="side-menu"] .content-box .nav ul li .drop-down li a{
    font-size: 0.82rem;
}

[data-side-popup="side-menu"] .content-box .contact-info{
    margin-top: auto;
}
[data-side-popup="side-menu"] .content-box .contact-info ul,
[data-side-popup="side-menu"] .content-box .location-box ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
[data-side-popup="side-menu"] .content-box .contact-info ul li a,
[data-side-popup="side-menu"] .content-box .location-box ul li a{
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
    font-size: 0.88rem;
    color: #333;
}

[data-side-popup="side-menu"] .content-box .contact-info ul li{
    margin-bottom: 0.4rem;
}
[data-side-popup="side-menu"] .content-box .contact-info ul li a i{
    display: inline-block;
    margin-right: 0.4rem;
}

[data-side-popup="side-menu"] .content-box .location-box ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.8rem;
}
[data-side-popup="side-menu"] .content-box .location-box ul li a{
    font-size: 0.8rem;
}
/* ====================== End Side-Menu Area ====================== */

/* ====================== Banner-Sec Area ====================== */
.banner-sec .slider-box{
    position: relative;
}
.banner-sec .slider-box .slide{
    position: relative;
}
.banner-sec .slider-box .slider-btns{
    position: absolute;
    /* bottom: 4rem;
    right: 3rem; */
    bottom: 2rem;
    left: 5rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    column-gap: 1.2rem;
}
.banner-sec .slider-box .slider-btns button{
    border: none;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    width: 92px;
    text-align: left;
    font-size: 0.85rem;
    color: #fff;
    border-bottom: 1px solid transparent;
    padding: 0.2rem 0;
}
.banner-sec .slider-box .slider-btns button.active{
    border-color: #fff;
}
.banner-sec .banner-video{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.banner-sec .banner-video video{
    min-width: 100%;
    min-height: 100%;
    vertical-align: middle;
}
.banner-sec .banner-video::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(105, 59, 211, 0.0)), linear-gradient(180deg, rgba(23, 153, 208, 0.2), rgba(105, 59, 211, 0.65));
    filter: contrast(200%);
    opacity: 0.2;
}

.banner-sec .banner-content{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}
.banner-sec .banner-content .content-box{
    position: relative;
    height: 100%;
}
.banner-sec .banner-content .content-box .content{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    padding-bottom: 5.2rem;
}
.banner-sec .banner-content .content-box .content h2{
    max-width: 640px;
    font-weight: 800;
    font-size: 3rem;
    color: #fff;
    margin-bottom: 2.2rem;
}

@media screen and (max-width: 991px) {
    .banner-sec .slider-box .slider-btns{
        /* bottom: 3rem;
        right: 1rem; */
        bottom: 2rem;
        left: 3rem;
    }
    }
    .banner-sec .slider-box .slider-btns button{
        width: 80px;
    }
}

@media screen and (max-width: 767px) {
    .banner-sec .banner-content .content-box .content{
        padding-bottom: 3rem;
    }
    .banner-sec .banner-content .content-box .content h2{
        font-size: 2.4rem;
    }
    .banner-sec .slider-box .slider-btns{
        bottom: 2rem;
    }
    .banner-sec .slider-box .slider-btns button{
        width: 65px;
    }
}

@media screen and (max-width: 575px) {
    .banner-sec .slider-box .slider-btns{
        bottom: 2rem;
        left: 1rem;
        column-gap: 0.8rem;

    }
    .banner-sec .slider-box .slider-btns button{
        width: 50px;
        font-size: 0.8rem;
    }
}
/* ====================== End Banner-Sec Area ====================== */

/* ====================== About-Sec Area ====================== */
.about-sec > div{
    background-color: #F9F8FA;
}
.about-sec .sec-img img{
    width: 100%;
}
/* .about-sec .content-box{
    padding-left: 2.4rem;
} */
.about-sec .content-box h2{
    font-family: var(--font-roboto-slab);
    font-weight: 400;
    /* font-size: 2.2rem; */
    font-size: 1.8rem;
    margin-bottom: 1.8rem;
}
.about-sec .content-box p{
    font-size: 0.8rem;
    margin-bottom: 2.2em;
}

@media screen and (max-width: 767px) {
    .about-sec .content-box{
        /* padding-top: 3rem; */
        padding-left: 0;
    }
}

@media screen and (max-width: 575px) {
    .about-sec{
        padding-right: 0;
    }
    .about-sec .content-box h2{
        font-size: 1.8rem;
    }
}
/* ====================== End About-Sec Area ====================== */

/* ====================== End About-Sec Area ====================== */
.approach-sec .heading h2{
    font-family: var(--font-roboto-slab);
    font-weight: 400;
    font-size: 2.2rem;
    margin-bottom: 1.8rem;
}
.approach-sec .content p{
    font-size: 0.95rem;
    margin-bottom: 1.8rem;
}
.approach-sec .content p:last-child{
    margin-bottom: 0;
}

@media screen and (max-width: 767px) {
    .approach-sec .content p{
        font-size: 0.85rem;
    }
}

@media screen and (max-width: 575px) {
    .approach-sec .content p{
        font-size: 0.82rem;
        margin-bottom: 1.2rem;
    }
}
/* ====================== End About-Sec Area ====================== */

/* ====================== Solutions-Sec Area ====================== */
.solution-main-section .content {
    line-height: 1.8;
    font-size: 1.2rem;
}
.solutions-sec{
    background-color: var(--primary-color-1);
}
.solutions-sec .heading h2{
    text-align: center;
    font-family: var(--font-roboto-slab);
    font-weight: 400;
    color: #fff;
    margin-bottom: 3.2rem;
}
.solutions-sec .filter-btns{
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #999;
    margin-bottom: 3.2rem;
}
.solutions-sec .filter-btns button{
    display: inline-block;
    border: none;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    border-top: 3px solid transparent;
    font-weight: 500;
    font-size: 0.92rem;
    color: #999;
    padding: 1.2rem 0;
    margin-top: -2px;
}
.solutions-sec .filter-btns button.active{
    border-color: var(--primary-color-2);
    color: #fff;
}
.solutions-sec .filter-box .img{
    padding-right: 5rem;
}
.solutions-sec .filter-box .img img{
    width: 100%;
}
.solutions-sec .filter-box .content-box .title{
    font-weight: 600;
    font-size: 1.8rem;
    color: var(--primary-color-2);
    margin-bottom: 3rem;
}
.solutions-sec .filter-box .content-box p{
    color: #fff;
    font-size: 0.85rem;
    line-height: 1.8;
    margin-bottom: 2rem;
}
.solutions-sec .filter-box .slider-btns button{
    border: none;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    font-size: 1.8rem;
    color: #fff;
    margin-right: 3rem;
}

/* .solutions-sec .filter-box .slider .slide > *{
    height: auto !important;
}
.solutions-sec .filter-box .slider .owl-stage{
    display: block !important;
} */

@media screen and (max-width: 767px) {
    .solutions-sec .heading h2{
        margin-bottom: 1.8rem;
    }
    .solutions-sec .filter-btns{
        display: none;
    }
    .solutions-sec .filter-box .img{
        padding-right: 0;
    }
    .solutions-sec .filter-box .content-box{
        margin-top: 3rem;
    }
    .solutions-sec .filter-box .content-box .title{
        margin-bottom: 1.8rem;
    }
    .solutions-sec .filter-box .content-box p{
        margin-bottom: 1rem;
    }
    .solutions-sec .filter-box .slider-btns{
        margin-top: 1rem;
    }
}
/* ====================== End Solutions-Sec Area ====================== */

/* ====================== Ribben-Sec Area ====================== */
.ribben-sec{
    border: 1px solid #aaa;
    border-left: none;
    border-right: none;
    text-align: center;
    font-family: var(--font-roboto-slab);
    font-weight: 400;
    font-size: 2.2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.ribben-sec span{
    color: var(--primary-color-2);
}

@media screen and (max-width: 991px) {
    .ribben-sec{
        font-size: 1.8rem;
    }
}

@media screen and (max-width: 767px) {
    .ribben-sec{
        font-size: 1.4rem;
    }
}
/* ====================== End Ribben-Sec Area ====================== */

/* ====================== Assignments-Sec Area ====================== */
.assignments-sec{
    background-image: url('../img/home/assignment.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center right;
}
.assignments-sec .heading h2{
    font-family: var(--font-roboto-slab);
    font-weight: 400;
    color: var(--primary-color-1);
    margin-bottom: 3rem;
}
.assignments-sec .content-box::after{
    content: '';
    display: block;
    max-width: 360px;
    height: 4px;
    background-color: var(--primary-color-1);
}
.assignments-sec .content-box{
    background-color: #F2F5FE;
    padding: 0 4rem;
}

.assignments-sec .assignment-slider{
    /* display: flex; */
    padding: 3rem 0;
}
/* .assignments-sec .assignment-slider .owl-stage{
    display: block;
}
.assignments-sec .assignment-slider .slide{
    height: auto !important;
} */
.assignments-sec .assignment-slider .date{
    font-weight: 500;
    font-size: 0.8rem;
    margin-bottom: 1rem;
}
.assignments-sec .assignment-slider .title{
    font-family: var(--font-roboto-slab);
    font-size: 1.2rem;
    margin-bottom: 1rem ;
}
.assignments-sec .assignment-slider .des p{
    line-height: 1.6;
    font-size: 0.88rem;
}
.assignments-sec .assignment-slider .des p:last-child{
    margin-bottom: 0;
}

.assignments-sec .assignment-slider .slider-btns{
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    column-gap: 1rem;
    padding-left: 4rem;
    margin-top: 3rem;
}
.assignments-sec .assignment-slider .slider-btns button{
    display: inline-block;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    border: 2px solid var(--primary-color-2);
    font-size: 0.65rem;
    padding: 0.65rem 1rem;
    transition: 0.3s;
}
.assignments-sec .assignment-slider .slider-btns button:hover{
    background-image: var(--primary-gradient);
    color: #fff;
}

@media screen and (min-width: 992px) {
    .assignments-sec .sec-img{
        display: none;
    }
}

@media screen and (max-width: 991px) {
    .assignments-sec{
        background: none;
    }
    .assignments-sec .sec-img img{
        width: 100%;
    }
    .assignments-sec .content-box{
        padding: 0 3rem;
    }
    .assignments-sec .assignment-slider .slider-btns{
        padding-left: 2rem;
    }
}

@media screen and (max-width: 767px) {
    .assignments-sec .heading h2{
        margin-bottom: 2rem;
    }
    .assignments-sec .content-box{
        padding: 0 2rem;
    }
    .assignments-sec .assignment-slider{
        display: block;
        padding: 2rem 0;
    }
    .assignments-sec .assignment-slider .slider-btns{
        margin-top: 2rem;
    }
}

@media screen and (max-width: 575px) {
    .assignments-sec .content-box{
        padding: 0 1rem;
    }
}
/* ====================== End Assignments-Sec Area ====================== */

/* ====================== Why-KNR-Sec Area ====================== */
.why-knr-sec .heading{
    font-family: var(--font-roboto-slab);
    font-size: 2rem;
    color: var(--primary-color-1);
    margin-bottom: 1rem;
}
.why-knr-sec .des{
    margin-bottom: 3rem;
}
.why-knr-sec .des p{
    font-size: 0.85rem;
}
.why-knr-sec .des p:last-child{
    margin-bottom: 0;
}
.why-knr-sec .sec-img img{
    width: 100%;
}
.why-knr-sec .content-box{
    background-color: var(--primary-color-1);
    padding: 5rem;
}
.why-knr-sec .content-box .content:not(:last-child){
    margin-bottom: 3rem;
}
.why-knr-sec .content-box .content .title{
    font-family: var(--font-roboto-slab);
    font-size: 1.4rem;
    color: var(--primary-color-2);
    margin-bottom: 0.8rem;
}
.why-knr-sec .content-box .content p{
    font-size: 0.85rem;
    color: #fff;
}
.why-knr-sec .content-box .content a{
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: #fff;
}

@media screen and (min-width: 992px) {
    .why-knr-sec{
        padding-right: 0;
    }
}

@media screen and (max-width: 767px) {
    .why-knr-sec .content-box{
        padding: 3rem;
    }
}

@media screen and (max-width: 575px) {
    .why-knr-sec .content-box{
        padding: 2rem;
    }
    .why-knr-sec .content-box .content:not(:last-child){
        margin-bottom: 2rem;
    }
}
/* ====================== End Why-KNR-Sec Area ====================== */

/* ====================== Our-Clients-Sec Area ====================== */
.our-clients-sec{
    background-color: #F9F8FA;
}
.our-clients-sec .heading{
    text-align: center;
    font-family: var(--font-roboto-slab);
    font-size: 2rem;
    color: var(--primary-color-1);
    margin-bottom: 3rem;
}

.our-client-slider .img{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid #ccc; */
    border-top: none;
    border-bottom: none;
    padding: 2rem 3rem;
}
.our-client-slider .img img{
    max-width: 100%;
    max-height: 100%;
}

@media screen and (max-width: 767px) {
    .our-clients-sec .heading{
        margin-bottom: 2rem;
    }
    .our-client-slider .img{
        padding: 2rem;
    }
}

@media screen and (max-width: 575px) {
    .our-clients-sec .heading{
        font-size: 1.6rem;
    }
    .our-client-slider .img{
        padding: 1rem;
    }
}
/* ====================== End Our-Clients-Sec Area ====================== */

/* ====================== Blogs-Sec Area ====================== */
.blogs-sec.original {
    background-color: #F9F8FA;
}
.blogs-sec .heading{
    max-width: 380px;
    font-family: var(--font-roboto-slab);
    font-size: 2rem;
    color: var(--primary-color-1);
    margin-bottom: 3rem;
}
.blog-card{
    width: 100%;
    padding: 1.8rem 0;
}
.blog-card .img{
    width: 100%;
    aspect-ratio: 3 / 4;
    margin-bottom: 0.8rem;
}
.blog-card .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-card .info > *:not(:last-child){
    border-right: 2px solid var(--primary-color-2);
    padding-right: 0.5rem;
    margin-right: 0.5rem;
}
.blog-card .info .author,
.blog-card .info .date{
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--primary-color-2);
}
.blog-card .title,
.blog-card .title h5{
    text-decoration: none;
    line-height: 1.5;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--primary-color-1);
    margin-top: 0.4rem;
    margin-bottom: 0.2rem;
}
.blog-card .des{
    font-weight: 500;
    font-size: 0.88rem;
    color: #555;
}

@media screen and (max-width: 767px) {
    .blogs-sec .heading{
        margin-bottom: 1.4rem;
    }
    .blog-card{
        padding: 1.4rem 0;
    }
}

@media screen and (max-width: 575px) {
    .blogs-sec .heading{
        font-size: 1.4rem;
        margin-bottom: 0.8rem;
    }
}
/* ====================== End Blogs-Sec Area ====================== */

/* ====================== Testimonials-Sec Area ====================== */
.testimonials-sec > div{
    background-color: #F2F5FE;
}
.testimonials-sec .heading{
    border-bottom: 2px solid #ccc;
    padding-bottom: 2rem;
    margin-bottom: 3rem;
}
.testimonials-sec .heading > div{
    max-width: 520px;
}
.testimonials-sec .heading h2{
    font-family: var(--font-roboto-slab);
    font-size: 2rem;
    color: var(--primary-color-1);
}
.testimonials-sec .heading P{
    font-weight: 500;
    font-size: 0.85rem;
    color: #555;
}

.testimonial-card .profile-info{
    display: flex;
    margin-bottom: 2rem;
}
.testimonial-card .profile-info .pic{
    flex: none;
    width: 80px;
    aspect-ratio: 1 / 1;
    margin-right: 1rem;
}
.testimonial-card .profile-info .pic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.testimonial-card .profile-info .info .name{
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--primary-color-2);
}
.testimonial-card .profile-info .info .pro,
.testimonial-card .profile-info .info .comp{
    font-weight: 500;
    font-size: 0.88rem;
    margin-bottom: 0.2rem;
}
.testimonial-card .des p{
    font-weight: 500;
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 1.2rem;
}
.testimonial-card .des p:last-child{
    margin-bottom: 0;
}

/* .testimonial-slider .owl-stage{
    display: block;
}
.testimonial-slider .slide{
    height: auto !important;
} */
.testimonial-slider .slider-indicator{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 3rem;
}
.testimonial-slider .slider-count{
    display: flex;
    align-items: center;
}
.testimonial-slider .slider-count span{
    display: inline-block;
    width: 20px;
}
.testimonial-slider .slider-count .line{
    width: 180px;
    height: 2px;
    background-color: #aaa;
    margin: 0 1rem;
}
.testimonial-slider .slider-btns{
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    column-gap: 1rem;
    padding-left: 1.5rem;
}
.testimonial-slider .slider-btns button{
    display: inline-block;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    border: 2px solid var(--primary-color-2);
    font-size: 0.65rem;
    padding: 0.65rem 1rem;
    transition: 0.3s;
}
.testimonial-slider .slider-btns button:hover{
    background-image: var(--primary-gradient);
    color: #fff;
}

@media screen and (max-width: 575px) {
    .testimonials-sec{
        padding-left: 0;
    }
    .testimonial-slider .slider-count{
        width: 100%;
        max-width: 240px;
    }
    .testimonial-slider .slider-count .line{
        width: 100%;
        margin: 0 0.8rem;
    }
}
/* ====================== End Testimonials-Sec Area ====================== */

/* ====================== Get-Touch-Sec Area ====================== */
.get-touch-sec .content-box.sec-padding{
    padding-bottom: 1.2rem;
    padding-top: 1.2rem;
   }
.get-touch-sec{
    background-color: var(--primary-color-1);
}
.get-touch-sec .content-box{
    background-image: linear-gradient(180deg, rgba(23, 153, 208, 0.3), rgba(105, 59, 211, 0.3));
    color: #fff;
}
.get-touch-sec .content-box span{
    display: inline-block;
    font-family: var(--font-roboto-slab);
    font-size: 1.2rem;
    margin-bottom: 0.6rem;
}
.get-touch-sec .content-box h2{
    font-weight: 600;
    font-size: 2rem;
    /* border-bottom: 1px solid #aaa; */
    /* padding-bottom: 1.5rem;
    margin-bottom: 2rem; */
}
.get-touch-sec .content-box .des p{
    font-size: 0.85rem;
}
.get-touch-sec .content-box .des p:last-child{
    margin-bottom: 0;
}
.get-touch-sec .btn-box{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 767px) {
    .get-touch-sec .content-box span{
        font-size: 0.92rem;
    }
    .get-touch-sec .content-box h2{
        font-size: 2.4rem;
    }
    .get-touch-sec .btn-box{
        margin-top: 1.2rem;
    }
}

@media screen and (max-width: 767px) {
    .get-touch-sec .content-box h2{
        font-size: 1.5rem;
        margin-bottom: 0;
        /* padding-bottom: 1.2rem;
        margin-bottom: 1.2rem; */
        text-align: center;
    }
}
/* ====================== End Get-Touch-Sec Area ====================== */

/* ====================== Footer Area ====================== */
footer{
    background-color: #F9F8FA;
}
footer .title{
    font-family: var(--font-roboto-slab);
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}
footer ul{
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 3rem;
}
footer ul li{
    margin-bottom: 0.2rem;
}
footer ul a{
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
    font-size: 0.85rem;
    color: #333;
    transition: 0.3s;
}
footer ul a:hover{
    color: var(--primary-color-1);
}
footer ul.address li{
    margin-bottom: 1rem;
}
footer ul.links{
    column-count: 2;
}
footer .social-links{
    display: flex;
    align-items: center;
}
footer .social-links span{
    display: inline-block;
    font-weight: 500;
    font-size: 0.92rem;
    margin-right: 0.5rem;
}
footer .social-links a{
    text-decoration: none;
    display: inline-block;
    color: var(--primary-color-1);
    padding: 0.2rem;
    margin: 0 0;
}
footer .subscribe{
    border-bottom: 1px solid #aaa;
    margin-top: 2.8rem;
}
footer .subscribe .title{
    text-align: center;
    font-weight: 400;
    margin-bottom: 1.4rem;
}
footer .subscribe form{
    display: flex;
    padding: 0.5rem 0.2rem;
}
footer .subscribe form input,
footer .subscribe form button{
    border: none;
    outline: none;
    box-shadow: none;
    background-color: transparent;
}
footer .subscribe form input{
    width: 100%;
    font-size: 0.85rem;
}
footer .subscribe form button{
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--primary-color-2);
}
footer .copyright{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
}
footer .copyright *{
    padding: 0;
    margin: 0;
}
footer .copyright p{
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--primary-color-1);
}
footer .copyright a{
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--primary-color-1);
    margin-left: 2rem;
    transition: 0.3s;
}
footer .copyright a:hover{
    color: var(--primary-color-1);
}

footer .footer-logo img{
    max-width: 220px;
}

@media screen and (min-width: 992px) {
    footer ul.c-mb{
        margin-bottom: 0;
    }
    footer .custom-flex{
        justify-content: space-between;
    }
    /* footer .custom-flex > div{
        flex: none;
        width: calc(33.33% - 60px);
    } */
}

@media screen and (max-width: 767px) {
    footer .copyright{
        flex-direction: column-reverse;
    }
    footer .copyright a{
        margin: 0 1rem;
    }
    footer .copyright .privacies{
        text-align: center;
        margin-bottom: 1.4rem;
    }
    footer ul.links{
        column-count: 1;
    }
}

@media screen and (max-width: 575px) {
    footer ul{
        margin-bottom: 2rem;
    }
    footer .subscribe{
        border-bottom: none;
        margin-top: 2rem;
    }
    footer .subscribe .title{
        font-size: 1rem;
        margin-bottom: 0.8rem;
    }
    footer .subscribe form{
        display: block;
        text-align: center;
    }
    footer .subscribe form input{
        border-bottom: 1px solid #aaa;
        padding: 0.5rem;
        margin-bottom: 1rem;
    }
    footer .copyright{
        margin-top: 1.8rem;
    }
    footer .copyright a{
        margin: 0 0.65rem 0.5rem;
    }
    footer .copyright .privacies{
        margin-bottom: 0.85rem;
    }
}
/* ====================== End Footer Area ====================== */

/* ====================== Our-Expert-Sec-1 Area ====================== */
.our-expert-sec-1 .content-box{
    line-height: 1.8;
    font-size: 1.2rem;
}
.our-expert-sec-1 .content-box .title{
      font-family: var(--font-roboto-slab);
    font-size: 2rem;
    margin-bottom: 1.2rem;
}
.our-expert-sec-1 .sec-img img{
    width: 100%;
}

@media screen and (min-width: 768px) {
    .our-expert-sec-1{
        margin: 0;
    }
}

@media screen and (max-width: 991px) {
    .our-expert-sec-1 .content-box{
        font-size: 1.1rem;
        padding: 0;
    }
}

@media screen and (max-width: 767px) {
    .our-expert-sec-1 .content-box{
        padding: 0;
        margin-top: 3rem;
    }
}

@media screen and (max-width: 575px) {
    .our-expert-sec-1 .content-box{
        font-size: 0.92rem;
        margin-top: 2.4rem;
    }
}
/* ====================== End Our-Expert-Sec-1 Area ====================== */

/* ====================== Our-Expert-Sec-2 Area ====================== */
.our-expert-sec-2{
    background-color: var(--primary-color-1);
}
.our-expert-sec-2 .filter-btns button{
    position: relative;
    text-decoration: none;
    border: none;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    display: block;
    width: 100%;
    text-align: right;
    font-family: var(--font-roboto-slab);
    font-size: 0.85rem;
    color: #fff;
    padding: 0.4rem 1rem;
    margin-bottom: 0.2rem;
}
.our-expert-sec-2 .filter-btns.right-filter button{
    text-align: left;
}
.our-expert-sec-2 .filter-btns button.active{
    background-color: var(--primary-color-2);
}
.our-expert-sec-2 .filter-btns button.active::after{
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background-color: var(--primary-color-2);
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%) rotate(45deg);
}
.our-expert-sec-2 .filter-btns.right-filter button.active::after{
    left: -6px;
}
.our-expert-sec-2 .owl-slider .img img{
    width: 100%;
}
.our-expert-sec-2 .owl-slider .content-box .title{
    font-family: var(--font-roboto-slab);
    font-size: 1.4rem;
    color: var(--primary-color-2);
    margin-bottom: 1.2rem;
}
.our-expert-sec-2 .owl-slider .content-box .des p{
    font-size: 0.85rem;
    color: #fff;
}
.our-expert-sec-2 .owl-slider .content-box .des p:last-child{
    margin-bottom: 0;
}
.our-expert-sec-2 .slider-btns{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    column-gap: 1rem;
    padding-top: 3rem;
}
.our-expert-sec-2 .slider-btns button{
    display: inline-block;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    border: 2px solid var(--primary-color-2);
    color: #fff;
    font-size: 0.65rem;
    padding: 0.65rem 1rem;
    transition: 0.3s;
}
.our-expert-sec-2 .slider-btns button:hover{
    background-image: var(--primary-gradient);
}

@media screen and (max-width: 991px) {
    .our-expert-sec-2 .owl-slider .content-box{
        margin-top: 2.4rem;
    }
}
/* ====================== End Our-Expert-Sec-2 Area ====================== */



/* ====================== Start Success-Stories-Sec-2 Area ====================== */
.success-stories-sec {
    background-color: #F7FAFD;
}
.success-stories-sec .heading h4 {
    font-weight: 600;
    font-size: 1.8rem;
    color: var(--primary-color-2);
    margin-bottom: 3rem;
}
/* ====================== End Success-Stories-Sec-2 Area ====================== */



/* ====================== Our-Expert-Sec-3 Area ====================== */
.our-expert-sec-3 .content-box .heading{
    font-family: var(--font-roboto-slab);
    font-size: 2rem;
    margin-bottom: 1.2rem;
}
.our-expert-sec-3 .btns-box{
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.our-expert-sec-3 .btns-box a{
    margin-left: 2rem;
}
.our-expert-sec-3 .btns-box a i{
    display: inline-block;
}
.our-expert-sec-3 .btns-box a.left i{
    margin-right: 0.3rem;
}
.our-expert-sec-3 .btns-box a.right i{
    margin-left: 0.3rem;
}

@media screen and (max-width: 991px) {
    .our-expert-sec-3 .content-box .des p{
        font-size: 0.92rem;
    }
    .our-expert-sec-3 .btns-box{
        justify-content: flex-start;
        padding-top: 1rem;
    }
    .our-expert-sec-3 .btns-box a{
        padding: 0.65rem 1.2rem;
        margin-left: 0;
        margin-right: 0.4rem;
    }
}

@media screen and (max-width: 575px) {
    .our-expert-sec-3 .content-box .heading{
        line-height: 1.4;
        font-size: 1.65rem;
        margin-bottom: 1rem;
    }
}
/* ====================== End Our-Expert-Sec-3 Area ====================== */

/* ====================== Our-Expert-Sec-4 Area ====================== */
.our-expert-sec-4 .sec-img img{
    width: 100%;
}
.our-expert-sec-4 .content-box .title{
    font-family: var(--font-roboto-slab);
    font-size: 2rem;
    margin-bottom: 1.2rem;
}
.our-expert-sec-4 .content-box .des p{
    line-height: 1.8;
    font-size: 1.2rem;
    margin-bottom: 1.2rem;
}
.our-expert-sec-4 .content-box .des p:last-child{
    margin-bottom: 0;
}

@media screen and (min-width: 1200px) {
    .our-expert-sec-4{
        padding-top: 0;
    }
    .our-expert-sec-4.other{
        padding-left: 0;
    }
}

@media screen and (max-width: 1199px) {
    .our-expert-sec-4 .content-box{
        padding-left: 0;
    }
}

@media screen and (max-width: 991px) {
    .our-expert-sec-4 .content-box{
        padding-top: 3rem;
    }
}

@media screen and (max-width: 575px) {
    .our-expert-sec-4 .content-box{
        padding-top: 2rem;
    }
    .our-expert-sec-4 .content-box .title{
        font-size: 1.8rem;
    }
    .our-expert-sec-4 .content-box .des p{
        font-size: 0.92rem;
    }
}
/* ====================== End Our-Expert-Sec-4 Area ====================== */

/* ====================== About-Hero Area ====================== */
.about-hero p{
    line-height: 1.8;
    font-size: 1.2rem;
    margin-bottom: 1.8rem;
}
.about-hero p b{
    font-weight: 600;
}

@media screen and (max-width: 767px) {
    .about-hero p{
        font-size: 1rem;
    }
}

@media screen and (max-width: 575px) {
    .about-hero p{
        font-size: 0.92rem;
    }
}
/* ====================== End About-Hero Area ====================== */

/* ====================== Company-Status Area ====================== */
.company-status-sec .status-card{
    max-width: 220px;
    height: 100%;
    margin: 0 auto;
}
.company-status-sec .status-card .status-box{
    position: relative;
    height: 100%;
    background-color: #F7FAFD;
    padding: 2rem 2rem;
}
.company-status-sec .status-card .status-box::after{
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: block;
    width: 3px;
    height: 70%;
    background-image: var(--primary-gradient-2);
}
.company-status-sec .status-card .status-box .count{
    font-weight: 600;
    font-size: 2.2rem;
    color: var(--primary-color-2);
    margin-bottom: 1rem;
}
.company-status-sec .status-card .status-box .name{
    max-width: 80px;
    font-weight: 500;
    font-size: 0.85rem;
}

@media screen and (max-width: 991px) {
    .company-status-sec .status-card{
        padding: 1.8rem 0;
    }
}

@media screen and (max-width: 991px) {
    .company-status-sec .status-card{
        max-width: 100%;
        padding: 0.8rem 0;
    }
}
/* ====================== End Company-Status Area ====================== */

/* ====================== Our-Vision-Sec Area ====================== */
.our-vision-sec .spl{
    padding-left: 0.5rem !important;
}
.our-vision-sec .spt{
    padding-top: 0.5rem !important;
}
.our-vision-sec .sec-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.our-vision-sec .content-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color-1);
    color: #fff;
    padding: 4rem;
}
.our-vision-sec .content-box .title{
    font-family: var(--font-roboto-slab);
    font-weight: 600;
    font-size: 1.8rem;
    color: var(--primary-color-2);
    margin-bottom: 1.2rem;
}
.our-vision-sec .content-box .des p{
    line-height: 1.8;
    font-size: 0.85rem;
}
.our-vision-sec .content-box .des p:last-child{
    margin-bottom: 0;
}

@media screen and (min-width: 992px) {
    .our-vision-sec{
        padding-left: 0;
        padding-right: 0;
    }
}

@media screen and (max-width: 991px) {
    .our-vision-sec .spl{
        padding-left: 0 !important;
    }
    .our-vision-sec .spl .spl{
        padding-left: 0.5rem !important;
    }
}

@media screen and (max-width: 767px) {
    .our-vision-sec .h-100{
        height: auto !important;
    }
    .our-vision-sec .content-box{
        padding: 3rem;
    }
}

@media screen and (max-width: 575px) {
    .our-vision-sec .spl .spl{
        padding-left: 0 !important;
    }
    .our-vision-sec .content-box{
        padding: 1.8rem;
    }
}
/* ====================== End Our-Vision-Sec Area ====================== */

/* ====================== Our-Philosophy-Sec Area ====================== */
.our-philosophy-sec .heading h2{
    font-family: var(--font-roboto-slab);
    font-size: 2rem;
    color: var(--primary-color-1);
    margin-bottom: 3rem;
}
.our-philosophy-sec .content-box{
    display: flex;
    align-items: flex-start;
}
.our-philosophy-sec .content-box .count{
    flex: none;
    width: 60px;
    line-height: 1;
    font-weight: 800;
    font-size: 3rem;
    color: #CACDD3;
    margin-right: 1rem;
}
.our-philosophy-sec .content-box .des p{
    line-height: 1.8;
    font-weight: 500;
    font-size: 0.85rem;
}
.our-philosophy-sec .content-box .des p:last-child{
    margin-bottom: 0;
}

@media screen and (max-width: 991px) {
    .our-philosophy-sec .content-box{
        padding-bottom: 3rem;
    }
}

@media screen and (max-width: 767px) {
    .our-philosophy-sec .heading h2{
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }
}
/* ====================== End Our-Philosophy-Sec Area ====================== */

/* ====================== Team-Hero Area ====================== */
.team-hero .sec-img img{
    width: 100%;
}
.team-hero .content-box{
    position: relative;
}
.team-hero .content-box .content{
    width: calc(100% - 140px);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    background-color: var(--primary-color-1);
    color: #fff;
    padding: 3rem 4rem;
}
.team-hero .content-box .content .title{
    font-family: var(--font-roboto-slab);
    font-size: 2rem;
    color: var(--primary-color-2);
    margin-bottom: 1rem;
}
.team-hero .content-box .content .des p{
    line-height: 1.8;
    font-size: 0.85rem;
}
.team-hero .content-box .content .des p:last-child{
    margin-bottom: 0;
}

@media screen and (max-width: 991px) {
    .team-hero .content-box .content{
        position: relative;
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .team-hero .content-box .content{
        padding: 2rem 3rem;
    }
}

@media screen and (max-width: 767px) {
    .team-hero .content-box .content{
        padding: 1.4rem 1.4rem 1.8rem;
    }
}
/* ====================== End Team-Hero Area ====================== */

/* ====================== Our-Team-Sec Area ====================== */
.our-team-sec .heading h2{
    font-family: var(--font-roboto-slab);
    font-size: 2rem;
    color: var(--primary-color-1);
    margin-bottom: 3rem;
}
.our-team-sec .team-card{
    text-decoration: none;
    display: block;
    color: #333;
    padding-left: 1rem;
}
.our-team-sec .team-card .box{
    border: 1px solid var(--primary-color-2);
    padding: 1rem;
}
.our-team-sec .team-card .box .img{
    width: calc(100% + 2rem);
    aspect-ratio: 1 / 1;
    margin-left: -2rem;
}
.our-team-sec .team-card .box .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.our-team-sec .team-card .content-box{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 1rem;
}
.our-team-sec .team-card .content-box .name{
    font-weight: 500;
    font-size: 0.92rem;
    margin-bottom: 0.2rem;
}
.our-team-sec .team-card .content-box .role{
    font-weight: 500;
    font-size: 0.72rem;
    color: #555;
}
.our-team-sec .team-card .content-box button{
    padding: 0.5rem 0.8rem;
}
/* ====================== End Our-Team-Sec Area ====================== */

/* ====================== Team-Detail-Sec Area ====================== */
.team-detail-sec{
    background-color: #FBF9F9;
}
.team-detail-sec .sec-img{
    border: 1px solid var(--primary-color-2);
    width: calc(100% - 1rem);
    padding: 1rem;
    margin-left: auto;
}
.team-detail-sec .sec-img img{
    width: calc(100% + 2rem);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin-left: -2rem;
}
.team-detail-sec .content-box .name{
    font-weight: 500;
    font-size: 2.4rem;
    color: var(--primary-color-1);
    margin-bottom: 0.3rem;
}
.team-detail-sec .content-box .role{
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--primary-color-2);
    border-bottom: 1px solid var(--primary-color-2);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
.team-detail-sec .content-box .social-links{
    margin-bottom: 1.4rem;
}
.team-detail-sec .content-box .social-links a{
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    color: var(--primary-color-1);
    margin-right: 0.4rem;
}
.team-detail-sec .content-box .des{
    margin-bottom: 1.4rem;
}
.team-detail-sec .content-box .des p{
    line-height: 1.8;
    font-weight: 500;
    font-size: 0.85rem;
}
.team-detail-sec .content-box .des p:last-child{
    margin-bottom: 0;
}
.team-detail-sec .content-box .areas .title{
    font-family: var(--font-roboto-slab);
    font-weight: 400;
    margin-bottom: 0.5rem;
}
.team-detail-sec .content-box .areas .tabs button{
    border: none;
    outline: none;
    box-shadow: none;
    background-color: #E2DCD3;
    color: var(--primary-color-2);
    font-weight: 500;
    font-size: 0.85rem;
    padding: 0.4rem 1.2rem;
    margin: 0.4rem 0;
    margin-right: 1rem;
}

@media screen and (max-width: 767px) {
    .team-detail-sec .content-box{
        padding-top: 2.2rem;
    }
}

@media screen and (max-width: 575px) {
    .team-detail-sec .content-box .name{
        font-size: 1.8rem;
    }
    .team-detail-sec .content-box .role{
        font-size: 0.92rem;
    }
}

.lak-banner {
    background-image: url("/assets/img/team/lak-banner.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
.lak-banner .btn-box {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lak-banner .btn-box .btn-1, .lak-banner .btn-box .btn-1:hover {
    font-size: 1.5rem;
    font-weight: 600;
}

@media screen and (max-width: 767px) {
    .lak-banner{
        background-image: url("/assets/img/team/lak-banner-mob.jpg");
    }

    .lak-banner .btn-box {
        height: 200px;
    }
    .lak-banner .btn-box .btn-1, .lak-banner .btn-box .btn-1:hover {
        font-size: inherit;
    }
}
/* ====================== End Team-Detail-Sec Area ====================== */

/* ====================== Team-Detail-About Area ====================== */
.team-detail-about p{
    line-height: 1.8;
    font-size: 0.85rem;
}
.team-detail-about p:last-child{
    margin-bottom: 0;
}
/* ====================== End Team-Detail-About Area ====================== */

/* ====================== Custom-UL Area ====================== */
.custom-ul .title{
    font-family: var(--font-roboto-slab);
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--primary-color-2);
    margin-bottom: 1.8rem;
}
.custom-ul ul{
    list-style: none;
    max-width: 620px;
    padding-left: 0;
    margin-bottom: 0;
}
.custom-ul ul li{
    position: relative;
    padding-left: 25px;
}
.custom-ul ul li::before{
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    z-index: 1;
    display: block;
    width: 10px;
    height: 10px;
    background-color: var(--primary-color-2);
}
.custom-ul ul p{
    line-height: 1.8;
    font-weight: 500;
    font-size: 0.88rem;
    margin-bottom: 1.2rem;
}
.custom-ul ul li:last-child p:last-child{
    margin-bottom: 0;
}
/* ====================== End Custom-UL Area ====================== */

/* ====================== Media-About Area ====================== */
.media-about p{
    line-height: 1.8;
    font-weight: 400;
    font-size: 1.2rem;
}
.media-about p a{
    text-decoration: none;
    display: inline-block;
    font-size: 0.85rem;
    color: #333;
}
.media-about p a i{
    display: inline-block;
    color: var(--primary-color-2);
    margin-left: 0.2rem;
}

@media screen and (max-width: 767px) {
    .media-about p{
        font-size: 0.92rem;
    }
}
/* ====================== End Media-About Area ====================== */

/* ====================== Our-Press-Releases Area ====================== */
.our-press-releases{
    background-color: #F7FAFD;
}
.our-press-releases .heading h2{
    font-family: var(--font-roboto-slab);
    font-weight: 500;
    /* font-size: 2rem; */
    color: var(--primary-color-1);
    margin-bottom: 1rem;
}
.our-press-releases .media-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.our-press-releases .link-card{
    position: relative;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #FFF;
    word-wrap: break-word;
    line-height: 1.6;
    font-size: 0.85rem;
    color: #333;
    padding: 2rem;
}
.our-press-releases .link-card:hover{
    background-image: var(--primary-gradient);
    color: #fff;
}
.our-press-releases .link-card i{
    display: inline-block;
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    z-index: 1;
    color: var(--primary-color-2);
}
/* ====================== End Our-Press-Releases Area ====================== */

/* ====================== Recruiting-Sec Area ====================== */
.recruiting-sec .sec-img img{
    width: 100%;
}
.recruiting-sec .content-box{
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-right: 4rem;
}
.recruiting-sec .content-box .content{
    line-height: 1.8;
    font-size: 1.2rem;
}
.recruiting-sec .content-box .boxes{
    display: flex;
    justify-content: space-between;
    margin-top: auto;
}
.recruiting-sec .content-box .boxes .box{
    flex: none;
    position: relative;
    width: 100%;
    max-width: 280px;
    background-color: var(--primary-color-2);
    color: var(--primary-color-1);
    padding: 2.4rem 2.4rem;
}
.recruiting-sec .content-box .boxes .box .count{
    line-height: 1;
    font-family: var(--font-roboto-slab);
    font-size: 2rem;
    margin-bottom: 1rem;
}
.recruiting-sec .content-box .boxes .box .name{
    font-weight: 500;
    font-size: 0.8rem;
}
.recruiting-sec .content-box .boxes .box .icon{
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
}
.recruiting-sec .content-box .boxes .box .icon svg{
    width: 25px;
    fill: var(--primary-color-2);
}
.recruiting-sec .content-box .boxes .box:first-child{
    background-color: #F1F0FE;
}
.recruiting-sec .content-box .boxes .box:last-child .icon svg{
    fill: #fff;
}

@media screen and (min-width: 1200px) {
    .recruiting-sec{
        /* padding-right: 0; */
    }
}

@media screen and (max-width: 1199px) {
    .recruiting-sec .content-box{
        padding-right: 0;
        padding-top: 3rem;
    }
    .recruiting-sec .content-box .boxes{
        justify-content: flex-start;
        column-gap: 3rem;
        margin-top: 3rem;
    }
}

@media screen and (max-width: 767px) {
    .recruiting-sec .content-box .content{
        font-size: 1rem;
    }
    .recruiting-sec .content-box .boxes{
        justify-content: space-between;
        column-gap: 0;
    }
    .recruiting-sec .content-box .boxes .box{
        max-width: calc(50% - 1rem);
    }
}

@media screen and (max-width: 575px) {
    .recruiting-sec .content-box .boxes{
        flex-direction: column;
        gap: 1rem;
    }
    .recruiting-sec .content-box .boxes .box{
        max-width: 320px;
    }
}
/* ====================== End Recruiting-Sec Area ====================== */

/* ====================== Employee-Reviews-Hero Area ====================== */
.employee-reviews-hero .sec-img img{
    width: 100%;
}
/* ====================== End Employee-Reviews-Hero Area ====================== */

/* ====================== Employee-Reviews-Sec Area ====================== */
.employee-reviews-sec .review-card{
    text-decoration: none;
    position: relative;
    display: block;
    height: 100%;
    background-color: #F7FAFD;
    color: #333;
    padding: 3rem;
}
.employee-reviews-sec .review-card:hover{
    color: #333;
}
.employee-reviews-sec .review-card::before{
    content: '\f10d';
    font-family: 'Font Awesome 5 Pro';
    font-weight: bold;
    color: #ddd;
    font-size: 3rem;
    position: absolute;
    top: 1rem;
    left: 2rem;
    z-index: 0;
}
.employee-reviews-sec .review-card .comment{
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}
.employee-reviews-sec .review-card .comment p:last-child{
    margin-bottom: 0;
}
.employee-reviews-sec .review-card .info{
    display: flex;
}
.employee-reviews-sec .review-card .info .img{
    flex: none;
    width: 72px;
    aspect-ratio: 1 / 1;
    margin-right: 1.4rem;
}
.employee-reviews-sec .review-card .info .img img{
    width: 100%;
}
.employee-reviews-sec .review-card .info .box .name{
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--primary-color-2);
}
.employee-reviews-sec .review-card .info .box .role{
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--primary-color-1);
    margin-bottom: 0.2rem;
}
.employee-reviews-sec .review-card .info .box .comp{
    font-weight: 500;
    font-size: 0.72rem;
}
.employee-reviews-sec .job-sec{
    display: flex;
    background-color: #F1F0FE;
    border-right: 3px solid var(--primary-color-2);
    margin: 4rem 0;
}
.employee-reviews-sec .job-sec > div{
    flex: none;
    width: 50%;
}
.employee-reviews-sec .job-sec .img img{
    width: 100%;
}
.employee-reviews-sec .job-sec .content-box{
    display: flex;
    align-items: center;
    justify-content: center;
}
.employee-reviews-sec .job-sec .content-box .content p{
    line-height: 1;
    font-family: var(--font-roboto-slab);
    font-weight: 500;
    font-size: 8rem;
    color: var(--primary-color-2);
    margin-bottom: 3rem;
}
.employee-reviews-sec .job-sec .content-box .content p span{
    display: inline-block;
    color: #F1F0FE;
    text-shadow: 0 0 2px #000;
}

@media screen and (max-width: 991px) {
    .employee-reviews-sec .job-sec .content-box .content p{
        font-size: 6rem;
    }
}

@media screen and (max-width: 767px) {
    .employee-reviews-sec .job-sec .content-box .content p{
        font-size: 4rem;
    }
}

@media screen and (max-width: 575px) {
    .employee-reviews-sec .job-sec{
        flex-direction: column;
    }
    .employee-reviews-sec .job-sec > div{
        width: 100%;
    }
    .employee-reviews-sec .job-sec .content-box{
        text-align: center;
        padding: 2rem 1rem;
    }
    .employee-reviews-sec .job-sec .content-box .content p{
        margin-bottom: 2rem;
    }
    .employee-reviews-sec .review-card{
        padding: 2rem;
    }
    .employee-reviews-sec .review-card::before{
        top: 0;
        left: 1rem;
    }
    .employee-reviews-sec .review-card .comment p{
        font-size: 0.85rem;
    }
    .employee-reviews-sec .review-card .info .img{
        width: 62px;
        margin-right: 1rem;
    }
    .employee-reviews-sec .review-card .info .box .name{
        font-size: 0.92rem;
    }
}
/* ====================== End Employee-Reviews-Sec Area ====================== */

/* ====================== Contact-Hero Area ====================== */
.contact-hero{
    display: flex;
    background-color: #FBF9F9;
}
.contact-hero .sec-img{
    flex: none;
    width: 40%;
}
.contact-hero .sec-img img{
    width: 100%;
}
.contact-hero .content-box{
    flex: none;
    /* width: 60%; */
    width: 100%;
    display: flex;
    align-items: center;
    padding: 5rem;
}
.contact-hero .content-box form{
    width: 100%;
}
.contact-hero .content-box .tag{
    font-weight: 600;
    font-size: 1rem;
    color: var(--primary-color-2);
    margin-bottom: 1rem;
}
.contact-hero .content-box .title{
    line-height: 1.2;
    font-family: var(--font-roboto-slab);
    font-weight: 400;
    font-size: 2.4rem;
    column-gap: var(--primary-color-1);
    margin-bottom: 2rem;
}
.contact-hero .content-box .input-field{
    margin-bottom: 1rem;
    position: relative;
}
.contact-hero .content-box .input-field textarea,
.contact-hero .content-box .input-field input,
.contact-hero .content-box .input-field select{
    border: none;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    width: 100%;
    /* border-bottom: 2px solid #aaa; */
    /* padding: 1rem; */
    border-bottom: 1px solid #aaa;
    padding: .4rem;
}
.contact-hero .content-box .input-field .select-arrow{
    position: absolute;
    pointer-events: none;
    top: 10px;
    right: 0;
    display: flex;
    align-items: center;
    padding-left: .5rem;
    padding-right: .5rem;
}
.contact-hero .content-box .input-field .select-arrow svg{
    width: 1rem;
    fill: currentColor;
    height: 1rem;
    display: block;
    /* vertical-align: middle; */
}
/* .contact-hero .content-box .input-field select option{
} */
.contact-hero .content-box .input-field textarea::placeholder,
.contact-hero .content-box .input-field input::placeholder{
    font-size: .8rem;
}

.contact-hero .content-box .input-field.submit{
    text-align: right;
    margin-top: 2.4rem;
}
.contact-hero .content-box .input-field.submit button{
    border: none;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--primary-color-1);
}
.contact-hero .content-box .input-field.submit button i{
    display: inline-block;
    position: relative;
    top: 1px;
    margin-left: 0.2rem;
}

@media screen and (max-width: 991px) {
    .contact-hero{
        display: block;
    }
    .contact-hero > div{
        width: 100% !important;
    }
    .contact-hero .sec-img{
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .contact-hero .content-box{
        padding: 3rem;
    }
    .contact-hero .content-box .title{
        font-size: 2rem;
        margin-bottom: 1rem;
    }
}

@media screen and (max-width: 767px) {
    .contact-hero .content-box{
        padding: 1rem;
    }
    .contact-hero .content-box .title{
        font-size: 1.6rem;
        margin-bottom: 0.4rem;
    }
}
/* ====================== End Contact-Hero Area ====================== */

/* ====================== Contact-Address Area ====================== */
.contact-address .content-box{
    display: flex;
}
.contact-address .content-box .sec-img{
    flex: none;
    width: 30%;
}
.contact-address .content-box .sec-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.contact-address .content-box .content{
    flex: none;
    width: 70%;
    display: flex;
    flex-direction: column;
    background-color: #F7FAFD;
}
.contact-address .content-box .content .box{
    padding: 4rem;
}
.contact-address .content-box .content .title{
    font-family: var(--font-roboto-slab);
    font-size: 1.8rem;
    color: var(--primary-color-2);
    margin-bottom: 1.6rem;
}
.contact-address .content-box .content .address-box{
    display: flex;
}
.contact-address .content-box .content .address-box .address{
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
    color: var(--primary-color-1);
    border-right: 2px solid var(--primary-color-2);
    padding-right: 4rem;
    margin-right: 4rem;
}
.contact-address .content-box .content .address-box .address:last-child{
    border-right: none;
    padding-right: 0;
    margin-right: 0;
}
.contact-address .content-box .content .contact-box{
    display: flex;
    background-color: #F1F0FE;
    padding: 1rem 4rem;
    margin-top: auto;
}
.contact-address .content-box .content .contact-box .contact{
    text-decoration: none;
    display: inline-block;
    color: var(--primary-color-1);
    font-weight: 500;
    font-size: 0.92rem;
    border-right: 2px solid var(--primary-color-2);
    padding-right: 2rem;
    margin-right: 2rem;
}
.contact-address .content-box .content .contact-box .contact:last-child{
    border-right: none;
    padding-right: 0;
    margin-right: 0;
}

@media screen and (max-width: 991px) {
    .contact-address .content-box .sec-img{
        display: none;
    }
    .contact-address .content-box .content{
        width: 100%;
    }
    .contact-address .content-box .content .box{
        padding: 3rem;
    }
    .contact-address .content-box .content .address-box .address{
        padding-right: 2.4rem;
        margin-right: 2.4rem;
    }
    .contact-address .content-box .content .contact-box{
        padding: 1rem 3rem;
    }
}

@media screen and (max-width: 767px) {
    .contact-address .content-box .content .box{
        padding: 2rem;
    }
    .contact-address .content-box .content .contact-box{
        padding: 1rem 2rem;
    }
    .contact-address .content-box .content .address-box{
        display: block;
    }
    .contact-address .content-box .content .address-box .address{
        border-right: none;
        padding-right: 0;
        margin-right: 0;
        margin-bottom: 2rem;
    }
    .contact-address .content-box .content .address-box .address:last-child{
        margin-bottom: 0;
    }
}

@media screen and (max-width: 767px) {
    .contact-address .content-box .content .box{
        padding: 1rem;
    }
    .contact-address .content-box .content .contact-box{
        display: block;
        padding: 1rem;
        margin-top: 0.4rem;
    }
    .contact-address .content-box .content .title{
        margin-bottom: 1.2rem;
    }
    .contact-address .content-box .content .address-box .address{
        font-size: 0.88rem;
    }
    .contact-address .content-box .content .contact-box .contact{
        width: 100%;
        font-size: 0.85rem;
        border-right: none;
        padding-right: 0;
        margin-right: 0;
        margin-bottom: 0.3rem;
    }
    .contact-address .content-box .content .contact-box .contact:last-child{
        margin-bottom: 0;
    }
}
/* ====================== End Contact-Address Area ====================== */

/* ====================== Subscribe-Sec Area ====================== */
.subscribe-sec .heading h2{
    font-family: var(--font-roboto-slab);
    font-weight: 400;
    color: var(--primary-color-1);
    margin-bottom: 2rem;
}
.subscribe-sec input{
    border: none;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    display: block;
    width: 100%;
    max-width: 920px;
    font-weight: 500;
    font-size: 0.92rem;
    border-bottom: 2px solid #aaa;
    padding: 1rem 0;
    margin-bottom: 2rem;
}

@media screen and (max-width: 575px) {
    .subscribe-sec .heading h2{
        font-size: 1.72rem;
        margin-bottom: 1rem;
    }
}
/* ====================== End Subscribe-Sec Area ====================== */

/* ====================== Gallary-Hero Area ====================== */
.gallary-hero .content-box{
    display: flex;
    background-color: #002849;
    color: #FFF;
}
.gallary-hero .content{
    display: flex;
    align-items: center;
    padding: 4rem;
}
.gallary-hero .content .des p{
    font-size: 0.85rem;
}
.gallary-hero .content .des p:last-child{
    margin-bottom: 0;
}
.gallary-hero .content .status-box{
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    aspect-ratio: 1 / 1;
    line-height: 1;
    text-align: center;
    background-color: var(--primary-color-2);
    margin-left: 4rem;
}
.gallary-hero .content .status-box .count{
    font-family: var(--font-roboto-slab);
    font-size: 2.6rem;
    margin-bottom: 0.6rem;
}
.gallary-hero .content .status-box .tag{
    white-space: nowrap;
    font-size: 0.78rem;
}
.gallary-hero .content .status-box::before{
    content: '';
    position: absolute;
    top: -15px;
    left: 15px;
    z-index: 1;
    display: block;
    width: 34px;
    aspect-ratio: 1 / 1;
    background-image: url(../img/gallary/dots.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.gallary-hero .sec-img{
    flex: none;
    width: 36%;
}
.gallary-hero .sec-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 1199px) {
    .gallary-hero .sec-img{
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .gallary-hero .content .status-box{
        display: none;
    }
}

@media screen and (max-width: 575px) {
    .gallary-hero .content{
        padding: 2rem;
    }
    .gallary-hero .content .des p{
        font-size: 0.8rem;
    }
}
/* ====================== End Gallary-Hero Area ====================== */

/* ====================== Gallary-Sec Area ====================== */
.gallary-sec .heading h2{
    text-align: center;
    font-family: var(--font-roboto-slab);
    font-weight: 400;
    color: var(--primary-color-1);
    margin-bottom: 2rem;
}
.gallary-sec .gallary-img img{
    width: 100%;
}

.gallary-sec .slider-count{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}
.gallary-sec .slider-count span{
    display: inline-block;
    width: 20px;
}
.gallary-sec .slider-count .line{
    width: 180px;
    height: 2px;
    background-color: #aaa;
    margin: 0 1rem;
}

.gallary-sec .slider-btns{
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 1rem;
    margin-top: 1rem;
}
.gallary-sec .slider-btns button{
    display: inline-block;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    border: 2px solid var(--primary-color-2);
    font-size: 0.65rem;
    padding: 0.65rem 1rem;
    transition: 0.3s;
}
.gallary-sec .slider-btns button:hover{
    background-image: var(--primary-gradient);
    color: #fff;
}
/* ====================== End Gallary-Sec Area ====================== */

/* ====================== Story-Sec Area ====================== */
.story-sec{
    /* background-color: #F7FAFD; */
    background-color: var(--primary-color-1);
}
.story-sec .logo{
    width: 220px;
    background-color: #fff;
    padding: 2rem 3rem;
}
.story-sec .logo img{
    width: 100%;
}
.story-sec .story-box{
    border-left: 2px solid var(--primary-color-2);
}
.story-sec .story-card{
    position: relative;
    max-width: 380px;
    background-color: #FFF;
    margin-top: 6rem;
}
.story-sec .story-card .date{
    position: relative;
    max-width: 180px;
    font-family: var(--font-roboto-slab);
    font-weight: 500;
    font-size: 1rem;
    background-color: #F1F0FE;
    color: var(--primary-color-2);
    padding: 0.65rem 1.2rem;
    padding-left: 1.8rem;
}
.story-sec .story-card .date::before{
    content: '';
    display: block;
    width: 8px;
    height: 14px;
    background-image: var(--primary-gradient-2);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.story-sec .story-card .content{
    position: relative;
    padding: 2rem 2.4rem;
}
.story-sec .story-card .content::after{
    content: '';
    display: block;
    width: 220px;
    height: 3px;
    background-image: var(--primary-gradient-2);
    position: absolute;
    right: 1.6rem;
    bottom: 0;
}
.story-sec .filter-box{
    max-width: 220px;
    background-color: #fff;
    padding: 3rem 0;
    margin-left: auto;
}
.story-sec .filter-box button{
    position: relative;
    display: block;
    border: none;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    font-weight: 500;
    font-size: 0.85rem;
    padding: 0.4rem 3rem;
}
.story-sec .filter-box button::before{
    content: '';
    display: block;
    width: 6px;
    height: 14px;
    background-image: var(--primary-gradient-2);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
}
.story-sec .filter-box button.active::before{
    opacity: 1;
}

@media screen and (max-width: 767px) {
    .story-sec .filter-box{
        display: none;
    }
    .story-sec .story-card{
        max-width: 100%;
        margin-top: 4rem;
    }
}

@media screen and (max-width: 767px) {
    .story-sec .story-card .content{
        font-size: 0.92rem;
    }
}
/* ====================== End Story-Sec Area ====================== */

/* ====================== Blog-Detail Area ====================== */
.blog-detail .blog-img img{
    width: 100%;
}
.blog-detail .blog-title h2{
    font-family: var(--font-roboto-slab);
    font-size: 2rem;
    color: var(--primary-color-1);
    margin: 2.4rem 0 2rem;
}
.blog-detail .blog-tabs{
    padding-left: 2rem;
}
.blog-detail .blog-tabs .title{
    font-family: var(--font-roboto-slab);
    font-size: 1.6rem;
    color: var(--primary-color-1);
    margin-bottom: 0.8rem;
}
.blog-detail .blog-tabs ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
.blog-detail .blog-tabs ul a{
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
    font-size: 0.85rem;
    color: #333;
    margin-bottom: 0.4rem;
    transition: 0.3s;
}
.blog-detail .blog-tabs ul a:hover{
    color: #333;
}

@media screen and (max-width: 767px) {
    .blog-detail .blog-tabs{
        padding-top: 2rem;
        padding-left: 0;
    }
}

@media screen and (max-width: 767px) {
    .blog-detail .blog-title h2{
        font-size: 1.6rem;
        margin: 1.8rem 0 1.4rem;
    }
}
/* ====================== End Blog-Detail Area ====================== */

/* ====================== Search-Job-Sec Area ====================== */
.search-job-sec{
    position: relative;
}
.search-job-sec .sec-img img{
    width: 100%;
}
.search-job-sec .content-box{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
}
.search-job-sec .content-box .heading{
    max-width: 280px;
    font-family: var(--font-roboto-slab);
    background-color: var(--primary-color-1);
    color: var(--primary-color-2);
    padding: 2rem;
    margin-top: auto;
}
/* ====================== End Search-Job-Sec Area ====================== */

/* ====================== Search-Job-Form Area ====================== */
.search-job-form{
    background-color: #F7FAFD;
}
.search-job-form form{
    display: flex;
    justify-content: center;
}
.search-job-form form .input-field{
    flex: none;
    width: calc(16.67%);
    display: flex;
    align-items: center;
    border: 1px solid #333;
    padding: 0.3rem 0.8rem;
    margin-right: -1px;
}
.search-job-form form .input-field .icon{
    position: relative;
    top: 1px;
    margin-right: 0.5rem;
}
.search-job-form form .input-field input,
.search-job-form form .input-field select{
    display: block;
    width: 100%;
    border: none;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    font-weight: 500;
    font-size: 0.85rem;
}
.search-job-form form .input-field.submit{
    padding: 0;
}
.search-job-form form .input-field.submit button{
    width: 100%;
    padding: 1rem 0.8rem;
}
/* ====================== End Search-Job-Form Area ====================== */

/* ====================== Search-Job-Work Area ====================== */
.search-job-work .heading h2{
    font-family: var(--font-roboto-slab);
    color: var(--primary-color-1);
    margin-bottom: 2rem;
}
.search-job-work .box .label{
    display: inline-block;
    width: 100%;
    max-width: 120px;
    text-align: center;
    font-family: var(--font-roboto-slab);
    font-weight: 500;
    font-size: 1rem;
    background-color: #eee;
    color: var(--primary-color-2);
    padding: 0.65rem 1.2rem;
    margin-bottom: 1rem;
}
.search-job-work .box .label.last{
    background-color: var(--primary-color-2);
    color: #fff;
}
.search-job-work .box .title{
    font-family: var(--font-roboto-slab);
    font-size: 1rem;
    color: var(--primary-color-1);
    margin-bottom: 0.5rem;
}
.search-job-work .box .des{
    font-size: 0.85rem;
}
/* ====================== End Search-Job-Work Area ====================== */

/* ====================== Search-Job-Filter Area ====================== */
.search-job-filter form{
    background-color: #fff;
    padding: 2.2rem 0 2rem;
    margin: 0;
}
.search-job-filter form .input-field{
    display: inline-flex;
    align-items: center;
    font-family: var(--font-roboto-slab);
    font-weight: 500;
    font-size: 0.92rem;
    margin: 0;
    margin-right: 1.2rem;
    cursor: pointer;
}
.search-job-filter form .input-field::before{
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    outline: 1px solid #333;
    border: 3px solid #fff;
    margin-right: 0.5rem;
}
.search-job-filter form .input-field.active::before{
    background-color: var(--primary-color-2);
}
.search-job-filter form .input-field input{
    display: none;
}
/* ====================== End Search-Job-Filter Area ====================== */

/* ====================== Search-Job-Result Area ====================== */
.search-job-result{
    background-color: #F7FAFD;
}
.search-job-result .result-box{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background-color: #fff;
    padding: 1rem;
}
.search-job-result .result-box:not(:last-child){
    margin-bottom: 1.4rem;
}
.search-job-result .result-box > div{
    flex: none;
    display: flex;
    align-items: center;
}
.search-job-result .result-box .info{
    width: 40%;
    justify-content: flex-start;
}
.search-job-result .result-box .job-type{
    width: 40%;
    justify-content: center;
}
.search-job-result .result-box .job-apply{
    width: 20%;
    justify-content: flex-end;
}
@media screen and (max-width: 768px) {
    .search-job-result .result-box .job-apply{
        justify-content: center;
        margin-top: 15px;
    }
}
.search-job-result .result-box .info .pic{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    aspect-ratio: 1 / 1;
    margin-right: 1rem;
}
.search-job-result .result-box .info .pic img{
    max-width: 100%;
    max-height: 100%;
}
.search-job-result .result-box .info .name{
    font-family: var(--font-roboto-slab);
    margin-right: 2rem;
}
.search-job-result .result-box .info .word,
.search-job-result .result-box .info .loca,
.search-job-result .result-box .info .price{
    font-weight: 500;
    font-size: 0.82rem;
}
.search-job-result .result-box .info .loca i,
.search-job-result .result-box .info .price i{
    display: inline-block;
    font-size: 1rem;
    color: #909AAD;
    margin-right: 0.3rem;
}
.search-job-result .result-box .info .other{
    display: flex;
    align-items: center;
    margin-top: 0.8rem;
}
.search-job-result .result-box .info .other > div{
    margin-right: 1rem;
}
.search-job-result .result-box .job-type .type{
    display: inline-block;
    border-radius: 5px;
    color: #fff;
    font-weight: 500;
    font-size: 0.8rem;
    padding: 0.4rem 1.2rem;
    margin-right: 1rem;
}
.search-job-result .result-box .job-type .type.hybrid{
    background-color: #909AAD;
}
.search-job-result .result-box .job-type .type.wfh{
    background-color: #FF3366;
}
.search-job-result .result-box .job-type .type.office{
    background-color: #2F7BBD;
}
.search-job-result .result-box .job-type .exp{
    display: inline-block;
    font-weight: 500;
    font-size: 0.92rem;
}
.search-job-result .result-box .job-apply a,
.search-job-result .result-box .job-apply a:hover{
    padding: 0.65rem 1.92rem;
}
/* ====================== End Search-Job-Result Area ====================== */

/* ====================== Search-Job-Detail Area ====================== */
.search-job-detail .job-type{
    margin-bottom: 2.2rem;
}
.search-job-detail .job-type .type{
    display: inline-block;
    border-radius: 5px;
    background-color: #909AAD;
    color: #fff;
    font-weight: 500;
    font-size: 0.85rem;
    padding: 0.5rem 1.4rem;
    margin-right: 1rem;
}
.search-job-detail .job-type .exp{
    display: inline-block;
    font-weight: 500;
}
.search-job-detail .job-title{
    font-family: var(--font-roboto-slab);
    font-weight: 400;
    font-size: 2.2rem;
    color: var(--primary-color-1);
    margin-bottom: 0.8rem;
}
.search-job-detail .job-des{
    margin-bottom: 2rem;
}
.search-job-detail .job-des p{
    font-size: 0.85rem;
}
.search-job-detail .job-des p:last-child{
    margin-bottom: 0;
}
.search-job-detail .custom-ul{
    margin: 4rem 0;
}
.search-job-detail .custom-ul ul{
    max-width: 100%;
}
.search-job-detail .custom-ul .title{
    font-weight: 400;
    color: var(--primary-color-1);
    margin-bottom: 1.2rem;
}
.search-job-detail .social-links{
    display: inline-block;
    border: 1px solid var(--primary-color-2);
    padding: 0.4rem 0.8rem;
}
.search-job-detail .social-links a{
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background-color: #F7FAFD;
    color: var(--primary-color-1);
    margin: 1rem 0;
}
/* ====================== End Search-Job-Detail Area ====================== */

/* ====================== Job-Apply-Popup Area ====================== */
[data-side-popup="job-apply-popup"] .side-popup-box::-webkit-scrollbar {
    appearance: none;
    display: none;
    width: 0% !important;
}
[data-side-popup="job-apply-popup"] .side-popup-box{
    scrollbar-width: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    transform: translateY(-100px);
    background-color: transparent;
    width: auto;
    height: auto;
    max-width: 620px;
    max-height: 100%;
    margin: auto;
    padding: 1rem;
    overflow-y: auto;
    opacity: 0;
}
[data-side-popup="job-apply-popup"].active .side-popup-box{
    transform: translateY(0);
    opacity: 1;
}
[data-side-popup="job-apply-popup"] .side-popup-box .side-popup{
    display: block;
    height: auto;
    overflow-y: visible;
    background-color: #fff;
    padding: 2.4rem;
}
[data-side-popup="job-apply-popup"] .close-btn{
    margin-top: -0.8rem;
    margin-bottom: 1.2rem;
}
[data-side-popup="job-apply-popup"] .close-btn button{
    margin-right: -0.4rem;
}
[data-side-popup="job-apply-popup"] .input-field{
    margin-bottom: 1.8rem;
}
[data-side-popup="job-apply-popup"] .input-field.file-box label,
[data-side-popup="job-apply-popup"] .input-field input,
[data-side-popup="job-apply-popup"] .input-field select,
[data-side-popup="job-apply-popup"] .input-field textarea{
    display: block;
    width: 100%;
    border: none;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    border: 1px solid #aaa;
    font-size: 0.85rem;
    padding: 0.8rem 1rem;
}
/* ====================== End Job-Apply-Popup Area ====================== */

/* ====================== Form-Sec Area ====================== */
.form-sec .input-field input,
.form-sec .input-field button{
    display: block;
    width: 100%;
    border: none;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    border: 1px solid #333;
    font-weight: 500;
    font-size: 0.92rem;
    padding: 0.72rem 1.2rem;
}
.form-sec .input-field button{
    border: none;
    padding: 0.75rem 1.2rem;
}

@media screen and (max-width: 767px) {
    .form-sec .input-field{
        padding-bottom: 1.2rem;
    }
}
/* ====================== End Form-Sec Area ====================== */