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

:root {
    --primary-font: "proza-bold";
    --secondary-font: 'ibm';
    --oswald-regular: 'proza-regular';
    --header-font: 'Varela-Round';
    --secondary-color: #fff;
    --slide-text: #D1D7E0;
    --subtitle: #F84233;
    --gradient-color: linear-gradient(-45deg, rgba(248, 66, 51, 1) 0%, #d81956 100%);
    --heading: #2D283E;
    --nav-text: #555759;
    --text-white: #f7f7f7;
    --text-color: #7e7e7e;
    --footer: #15121d;
}

html {
    font-size: 10px;
}

#root p {
    font-size: 1.6rem;
    font-family: var(--secondary-font);
}

/*=============================================== FONTS ===================================*/
@font-face {
    font-family: "proza-bold";
    src: url('../fonts/ProzaLibre-Bold.ttf');
}

@font-face {
    font-family: 'Varela-Round';
    src: url('../fonts/VarelaRound-Regular.ttf');
}

@font-face {
    font-family: "ibm";
    src: url('../fonts/IBMPlexSans-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: 'proza-regular';
    src: url('../fonts/ProzaLibre-Medium.ttf');
    font-weight: 500;
}

/*=============================================== HEADER ==================================*/
.znav-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 11;
    width: 100%;
}

.navbar {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(11.5px);
    padding: 1rem 4.5rem !important;
    margin: 0rem auto;
    box-shadow: 0 3px 4px rgba(0, 0, 0, .15);
}

a.navbar-brand img {
    height: 60px;
}

.navbar-collapse {
    justify-content: end;
}

.navbar-nav {
    display: flex;
}

.navbar-nav li {
    margin: 0rem 1.5rem;
    padding: 2rem 0rem;
}

.navbar-nav li.has-dropdown {
    transition: 0.5s;
}

.navbar-nav li.has-dropdown a {
    position: relative;
}

.navbar-nav li a {
    text-decoration: none;
    font-size: 1.6rem;
    text-transform: capitalize;
    color: var(--nav-text);
    font-family: var(--primary-font);
    letter-spacing: 0.3px;
    position: relative;
    padding: 3.2rem 0rem;
    transition: 0.3s all;
}

.navbar-nav li a:hover {
    color: #d81956;
}

.navbar-nav li a.active {
    color: #d81956;
}

.dropdown {
    display: none;
    list-style: none;
    padding-left: 0rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(11.5px);
    padding: 1rem 1rem !important;
    margin: 0rem auto;
    box-shadow: 0 3px 4px rgba(0, 0, 0, .15);
    position: absolute;
    transform: translateY(20px);
    transition: 0.3s;
}

.navbar-nav li.has-dropdown:hover .dropdown {
    display: block;
    position: absolute;
    transform: translateY(31px);
}

.dropdown li {
    padding: .6rem 0rem;
    margin: 0rem 0rem;
}


.section-padding-skew {
    padding: 5rem 0rem 4rem;
    overflow: hidden;
}

.section-padding-skew-2 {
    padding: 4rem 0rem 7rem;
    overflow: hidden;
}

.section-padding {
    padding: 5rem 0rem;
    overflow: hidden;
}

/*=================================== HERO SECTION =======================================*/
.hero-slide h1 {
    font-size: 4rem;
    font-family: var(--primary-font);
}

.hero-slide p {
    margin-top: 1.5rem;
    font-family: var(--secondary-font);
    font-style: italic;
    color: var(--slide-text);
}

.hero {
    position: absolute;
    left: 0;
    bottom: 7%;
    z-index: 11;
    display: flex;
    justify-content: space-between;
}

.hero-contact {
    padding-left: 7rem;
}

.hero-contact a {
    text-decoration: none;
    color: var(--text-white) !important;
    font-size: 1.6rem;
    border-bottom: 1px solid var(--text-white);
    transition: 0.3s all;
    font-weight: 700;
    cursor: pointer;
}

.hero-contact a:hover {
    color: #d81956 !important;
    border-bottom: 1px solid #d81956;
}

.hero-social {
    padding-right: 7rem;
}

.hero-social a {
    text-decoration: none;
    color: var(--text-white);
    font-size: 1.6rem;
    transition: 0.3s all;
    margin-left: 2rem;
}

.hero-social a:hover {
    color: #d81956;
}

/*=================================== ABOUT SECTION =======================================*/
#about .image-wrapper {
    height: 100%;
}

#about .image-wrapper img {
    height: 100%;
    object-fit: cover;
    border-radius: 1.2rem;
}

.content-wrapper .section-heading .sub-title {
    font-size: 1.5rem;
    color: var(--subtitle);
    text-transform: capitalize;
    font-weight: 700;
}

.content-wrapper .section-heading h2 {
    color: var(--heading);
    font-size: 3rem;
    font-family: var(--primary-font);
}

.brief-card {
    margin-top: 4rem;
    border: 1px solid var(--slide-text);
    border-radius: .8rem;
    padding: 3rem 1.2rem 2rem 1.6rem;
    position: relative;
    transition: 0.3s;
    height: 220px;
}

.brief-card:hover {
    border: none;
    box-shadow: rgba(149, 157, 165, 0.2) 2px 8px 16px;
    transition: 0.3s;
}

.brief-card .about-icon {
    position: absolute;
    top: -12%;
    background: var(--gradient-color);
    padding: 1rem;
    border-radius: .5rem;
}

.brief-card .about-icon i {
    color: var(--text-white);
    font-size: 2.5rem;
}

.brief-card h3 {
    font-size: 1.8rem;
    font-family: var(--oswald-regular);
    color: var(--heading);
}

.brief-card p {
    color: var(--text-color);
    margin-bottom: 1.6rem;
}

/*============================== CUSTOM BUTTON =================================*/
.btnfos {
    color: var(--subtitle);
    cursor: pointer;
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 400;
    max-width: 100px;
    padding: .7rem;
    position: relative;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    background-color: var(--gradient-color);
    text-decoration: none;
}

.btnfos-4 {
    border: 1px solid var(--subtitle);
    overflow: hidden;
    position: relative;
}

.btnfos-4 span {
    z-index: 20;
}

.btnfos-4::after {
    background: var(--gradient-color);
    content: "";
    height: 155px;
    left: -75px;
    opacity: .5;
    position: absolute;
    top: -50px;
    width: 50px;
    -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    transform: rotate(35deg);
}

.btnfos-4:hover:after {
    left: 120%;
    -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

/*=================================== CUSTOM TITLE =======================================*/
.section-heading h5 {
    color: var(--text-white);
    font-size: 1.5rem;
    text-transform: capitalize;
}

.section-heading h2 {
    font-size: 3.5rem;
    font-family: var(--primary-font);
    text-transform: uppercase;
    color: var(--heading);
}

.section-heading.light h2 {
    color: var(--text-white);
}

.section-heading h2 span {
    color: var(--subtitle);
}

/*=================================== PROCESS SECTION =======================================*/
#process {
    width: 100%;
    height: 770px;
    clip-path: polygon(0 18%, 100% 0, 100% 82%, 0 100%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        url('../img/process1.webp');
    padding-top: 13rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

#process .section-heading {
    margin-bottom: 3rem;
}

#process .process-border {
    border-bottom: 2px solid var(--subtitle);
}

#process .process-item {
    /* background: #fff; */
    background: var(--text-white);
    text-align: center;
    position: relative;
    padding: 2rem 1rem;
    transition: 0.3s ease all;
    height: 100%;
}

#process .process-item.top {
    left: 0;
    bottom: 1px;
}

#process .process-item.bottom {
    left: 0;
    top: 153.312px;
}

#process .process-item .num {
    position: absolute;
    top: 0px;
    left: 5px;
    background: var(--gradient-color);
    color: var(--text-white);
    padding: .4rem .7rem;
    transition: 0.3s ease all;
}

#process .process-item span {
    font-size: 1.8rem;
    font-family: var(--primary-font);
}

#process .process-item .icon {
    margin-top: 2rem;
    margin-bottom: .6rem;
}

#process .process-item .icon i {
    color: var(--heading);
    font-size: 3rem;
}

#process .process-item h4 {
    margin-bottom: 0;
    font-size: 1.5rem;
    color: var(--heading);
}


#process .process-item:hover {
    background: var(--gradient-color);
    transition: 0.3s ease all;
}

#process .process-item:hover .num {
    background: var(--text-white);
    color: var(--subtitle);
}

#process .process-item:hover .icon i {
    color: var(--text-white);
}

#process .process-item:hover.process-item h4 {
    color: var(--text-white);
}

/*=================================== SOLUTION SECTION =======================================*/
#solution .section-heading {
    margin-bottom: 3rem;
}

#solution .solution-card {
    background: #fff;
    padding: 2rem;
    box-shadow: 0px 0px 16px #00000012;
    position: relative;
    text-align: center;
    transition: 0.3s all;
    height: 100%;
}

#solution .solution-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 94%;
    height: 93%;
    border: 1px dashed var(--text-white);
    opacity: 0;
    transition: 0.2s all;
}

#solution .solution-card:hover::after {
    opacity: 1;
}

#solution .solution-card:hover {
    background: var(--gradient-color);
    box-shadow: none;
}

#solution .solution-card .icon i {
    color: var(--subtitle);
    font-size: 3.2rem;
    transition: 0.2s all;
}

#solution .solution-card:hover.solution-card .icon i {
    color: var(--text-white);
}

#solution .solution-card h4 {
    font-size: 2rem;
    font-family: var(--primary-font);
    color: var(--heading);
    margin: 1rem 0rem;
    transition: 0.2s all;
}

#solution .solution-card:hover.solution-card h4 {
    color: var(--text-white);
}

#solution .solution-card p {
    color: var(--text-color);
    transition: 0.2s all;
}

#solution .solution-card:hover.solution-card p {
    color: #f1f1f1;
}

#solution .solution-card a.rm-btn2 {
    text-decoration: none;
    font-size: 1.5rem;
    text-transform: capitalize;
    font-family: var(--oswald-regular);
    letter-spacing: .6px;
    color: var(--subtitle);
    transition: 0.3s all;
    position: relative;
    z-index: 2;
}

#solution .solution-card:hover.solution-card a.rm-btn2 {
    color: var(--text-white);
}

#solution .solution-card a.rm-btn2 i {
    background: var(--gradient-color);
    padding: 4px;
    border-radius: 3px;
    margin-left: .3rem;
    color: var(--text-white);
    font-size: 1.4rem;
    transition: 0.3s all;
}

#solution .solution-card:hover.solution-card a.rm-btn2 i {
    background: var(--text-white);
    color: var(--subtitle);
}

#solution .solution-card a.rm-btn2:hover i {
    margin-left: .6rem;
}

/*=================================== COUNTER SECTION =======================================*/
#counter {
    width: 100%;
    height: 550px;
    clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        url('../img/counter.webp');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    background-attachment: fixed;
}

#counter .counter {
    color: var(--subtitle);
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 3rem 2.5rem 2.5rem;
    margin: 0 auto;
    border: 3px solid var(--subtitle);
    border-radius: 20px 20px;
    position: relative;
    z-index: 1;

}

.counter:before,
.counter:after {
    content: "";
    background: var(--text-white);
    border-radius: 20px;
    position: absolute;
    left: 15px;
    top: 15px;
    bottom: 15px;
    right: 15px;
    z-index: -1;
    padding: 1rem;
}

.counter:after {
    background: transparent;
    width: 100px;
    height: 100px;
    border: 12px solid var(--subtitle);
    border-top: none;
    border-right: none;
    border-radius: 0 0 0 20px;
    box-shadow: none;
    top: auto;
    left: -8px;
    bottom: -8px;
    right: auto;
}

.counter .counter-icon {
    font-size: 3.5rem;
    line-height: 3.5rem;
    margin: 0 0 2rem;
    transition: all 0.3s ease 0s;
}

.counter:hover .counter-icon {
    transform: rotateY(360deg);
}

.counter .counter-value {
    color: var(--heading);
    font-size: 3rem;
    font-weight: 600;
    line-height: 2rem;
    margin: 1.5rem;
    display: block;
    transition: all 0.3s ease 0s;
}

.counter h3 {
    font-size: 1.7rem;
    font-weight: 700;
    text-transform: uppercase;
    font-family: var(--primary-font);
    margin-top: .8rem;
    color: var(--heading);
}

/*=================================== INDUSTRY SECTION =======================================*/
#industry {
    background: #e4e4e4;
    clip-path: polygon(0 -18%, 100% 0, 100% 100%, 0 100%);
}

#wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#wrapper .content {
    margin-top: 5rem;
    width: 100%;
    transition: 0.3s ease;
}

.tabs {
    display: flex;
    justify-content: center;
}

.tablinks {
    background-image: linear-gradient(90deg, transparent 70%, rgba(255, 255, 255, 0.2) 100%);
    border: none;
    outline: none;
    cursor: pointer;
    width: 160px;
    height: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    overflow: hidden;
    transition: 0.3s ease;
}

.tablinks:before {
    background: var(--gradient-color);
    content: "";
    width: 100%;
    height: 0px;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.3s ease-in-out;
    z-index: 2;
}

.tablinks:hover::before {
    height: 100%;
    z-index: 2;
    bottom: 0;
}

.tablinks.active {
    background-color: white;
    z-index: 0;
    border-right: 0px;
    border-left: 0px;
    height: 50px;
    bottom: 0px;
    overflow: hidden;
}

.tablinks.active:before {
    content: "";
    width: 100%;
    height: 5px;
    top: 0;
    left: 0;
}

.tablinks.active p,
.tablinks.active:hover p {
    opacity: 1;
    color: var(--heading);
}

.tablinks p {
    opacity: 0.6;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: 0.5s ease;
    padding: 0;
    margin: 0;
    color: var(--heading);
    backface-visibility: hidden;
    font-family: var(--oswald-regular) !important;
}

.tablinks:hover p {
    color: white;
    opacity: 1;
}

.tablinks p:before {
    content: attr(data-title);
    position: absolute;
    height: auto;
    width: auto;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.1;
    font-size: 40px;
    transition: 1s ease-out;
    z-index: -1;
    font-weight: 600;
    top: 110%;
}

.tablinks:hover p:before {
    opacity: 0.2;
    font-size: 3rem;
    top: -100%;
}

/* tab content */
.wrapper_tabcontent {
    background-color: white;
    margin-top: 0px;
    position: relative;
    opacity: 1;
    padding: 4rem 4rem;
    /* overflow: hidden; */
    transition: all 1s ease;
    top: 0;
}

.tabcontent {
    display: none;
    min-height: 180px;
}

#industry .industry-item {
    background: var(--secondary-color);
    box-shadow: rgba(149, 157, 165, 0.2) 2px 8px 16px;
    padding: 1.5rem;
    text-align: center;
    height: 100%;
    position: relative;
}

#industry .industry-item::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 0%;
    left: 50%;
    top: 50%;
    background: var(--subtitle);
    opacity: .2;
    transform: translate(-50%, -50%);
    transition: 0.3s all;
}

#industry .industry-item:hover::after {
    width: 100%;
    height: 100%;
}

#industry .industry-item img {
    height: 70px;
    object-fit: cover;
    transition: all 0.5s cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

#industry .industry-item:hover.industry-item img {
    filter: grayscale(100%);
}

#industry .card-content h4 {
    color: var(--heading);
    font-family: var(--oswald-regular);
    margin-top: 1.5rem;
    font-size: 1.4rem;
}

@keyframes tabEffect {
    from {
        top: -40px;
    }

    to {
        top: 0px;
    }
}

.tabcontent.active {
    transition: all 1s ease;
    display: block;
}

/* Title */
.tabcontent h3 {
    font-size: 4rem;
    font-family: var(--primary-font);
    top: 140px;
    transform: rotate(90deg);
    position: absolute;
    left: -210px;
    opacity: 0.3;
    width: 340px;
    height: 60px;
    background: var(--gradient-color);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 0;
    animation: city 1s ease;
}

@keyframes city {
    from {
        left: -280px;
    }

    to {
        left: -210px;
    }
}

/* Text*/
.tabcontent .industry-item {
    color: var(--text-color);
    margin: 0;
    padding: 0;
    line-height: 28px;
    font-weight: 100;
    transition: all 1s ease;
    animation: fadeEffect 0.6s ease;
    width: 100%;
    font-size: 16px;
    font-family: "IBM Plex Sans", sans-serif;
}

@keyframes fadeEffect {
    from {
        opacity: 0;
        margin-left: 30px;
    }

    to {
        opacity: 1;
        margin-left: 0;
    }
}

/*=================================== TESTIMONIAL SECTION =======================================*/
#testimonial .section-heading {
    margin-bottom: 3rem;
}

#testimonial .testimonial-card {
    background: var(--secondary-color);
    width: 100%;
    text-align: center;
    padding: 2rem 12rem;
    border-radius: 1rem;
    position: relative;
}

.slick-initialized .slick-slide {
    width: 100%;
}

.testimonial-card .testimonial-name .img {
    display: inline-block;
    width: 90px;
    height: 90px;
    border-radius: 50%;
}

.testimonial-card .testimonial-name .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.testimonial-card .testimonial-name h2 {
    font-size: 2rem;
    color: var(--subtitle);
    font-family: var(--secondary-font);
    text-transform: capitalize;
    margin: .3rem 0rem .6rem;
    font-weight: 600;
}

.testimonial-card .testimonial-name .desg {
    font-size: 1.6rem;
    font-family: var(--secondary-font);
    color: var(--text-color);
    text-transform: capitalize;
}

.testimonial-card .content-wrapper {
    position: relative;
}

.testimonial-card .content-wrapper img {
    position: absolute;
    height: 40px;
    opacity: 1;
    filter: brightness(0.9);
}

.testimonial-card .content-wrapper img.quote {
    right: 0;
    bottom: -65;
}

.testimonial-card .content-wrapper img.rotate {
    transform: rotateY(180deg);
    left: -4%;
    top: -50%;
}

.testimonial-card .content-wrapper p {
    margin-top: 2rem;
    color: var(--text-color);
    font-style: italic;
}

/*=================================== ROADMAP SECTION =======================================*/
#roadmap {
    background: #e4e4e4;
}

.embla {
    position: relative;
    background-color: #f7f7f7;
    padding: 20px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.embla__viewport {
    overflow: hidden;
    width: 100%;
}

.embla__viewport.is-draggable {
    cursor: move;
    cursor: grab;
}

.embla__viewport.is-dragging {
    cursor: grabbing;
}

.embla__container {
    display: flex;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -webkit-tap-highlight-color: transparent;
    margin-left: -10px;
}

.embla__slide {
    padding-left: 10px;
    min-width: 84%;
    position: relative;
}

.embla__slide__inner {
    position: relative;
    height: 550px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.embla__slide__parallax {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
    z-index: 11;
    width: 100%;
    height: 100%;
}

.embla__slide__parallax img {
    object-fit: cover !important;
    height: 100%;
    width: 100%;
}

.embla__slide__img {
    position: absolute;
    display: block;
    top: 0%;
    left: 0%;
    width: auto;
    height: 400px;
    min-width: 100%;
    max-width: none;
}

.slider-overlay {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7));
    position: absolute;
    z-index: 1;
}

.embla-slide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 111;
    text-align: center;
    width: 60%;
}

h4.year {
    width: 60px;
    height: 40px;
    padding: 10px 0;
    position: absolute;
    top: 0px;
    left: 22px;
    text-align: center;
    border-top-left-radius: 3px;
    background: #8d0e00;
    z-index: 111;
    font-size: 1.8rem;
    color: var(--secondary-color);
    font-family: var(--primary-font);
}

h4.year:before,
h4.year:after {
    content: "";
    position: absolute;
}

h4.year:after {
    height: 0;
    width: 0;
    bottom: -29.5px;
    left: 0;
    border-left: 30px solid #8d0e00;
    border-right: 30px solid #8d0e00;
    border-bottom: 30px solid transparent;
}

.embla-slide-content h2 {
    color: var(--secondary-color);
    font-size: 2.4rem;
    font-family: var(--oswald-regular);
    margin-top: 1rem;
}

.embla-slide-content h2 i {
    padding-right: .8rem;
}

.embla-slide-content img {
    width: 180px;
    margin-bottom: 1.5rem;
    object-fit: cover;
    margin: 0rem 1rem;
}

.embla-slide-content img.sampledge-logo {
    width: 100px;
    height: 100px;
}

.embla-slide-content p {
    color: var(--slide-text);
    text-align: justify;
}

.embla__button {
    outline: 0;
    cursor: pointer;
    background-color: transparent;
    touch-action: manipulation;
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    fill: var(--text-white);
    padding: 0;
}

.embla__button:disabled {
    cursor: default;
    opacity: 0.3;
}

.embla__button__svg {
    width: 100%;
    height: 100%;
}

.embla__button--prev {
    left: 40px;
}

.embla__button--next {
    right: 40px;
}

/*================================ AFFILIATION SECTION ================================= */
.affiliation-area {
    padding: 2rem 0rem;
    border-top: 2px solid rgb(189 189 189 / 0.45);
}

.affiliation-img img {
    height: 75px;
}

.affiliation-area h2 {
    font-size: 3rem;
    text-transform: capitalize;
}

/*=================================== FOOTER SECTION =======================================*/
/*=================================== FOOTER TOP =======================================*/
#footer {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/footer_bg.webp);
    background-attachment: fixed;
    background-position: center center;
    background-size: cover
}

#footer .footer-above {
    background: #000;
    border-bottom: 1px solid var(--nav-text)
}

.footer-above :first-child .footer-card {
    border-left: none;
}

.footer-above .footer-card {
    border-left: 1px solid var(--nav-text);
    padding: 1.5rem 3rem;
    height: 100%
}

.footer-above .footer-card .icon i {
    color: var(--subtitle);
    font-size: 3rem
}

.footer-above .footer-card .title h4 {
    font-size: 1.8rem;
    color: var(--secondary-color);
    text-transform: capitalize;
    font-family: var(--oswald-regular);
    letter-spacing: 1px;
    font-weight: 600
}

.footer-above .footer-card a {
    text-decoration: none;
    color: var(--text-white);
    font-size: 1.5rem;
    font-family: var(--secondary-font)
}

#footer .footer-main {
    padding: 3rem 0
}

#footer .footer-main .content h3 {
    font-size: 1.8rem;
    font-family: var(--primary-font);
    color: var(--text-white);
    margin-bottom: 2rem
}

#footer .footer-main .content p {
    color: var(--text-white);
    text-align: justify;
    margin-bottom: 3rem
}

.footer-main .footer-social a i {
    font-size: 1.6rem;
    margin: 0 1rem;
    width: 37px;
    height: 37px;
    background: var(--text-white);
    border-radius: .5rem;
    line-height: 3.7rem;
    color: var(--subtitle);
    text-align: center
}

#footer .footer-main .footer-menu {
    padding-left: 0
}

#footer .footer-main .footer-menu li {
    list-style: none;
    margin-bottom: 1.5rem
}

#footer .footer-main .footer-menu li a {
    text-decoration: none;
    color: var(--text-white);
    font-size: 1.5rem;
    font-family: var(--secondary-font);
    transition: .2s all
}

#footer .footer-main .footer-menu li a:hover {
    color: var(--subtitle);
    padding-left: .5rem
}

#footer .footer-main .recent-post {
    margin-bottom: 2.5rem
}

#footer .footer-main .recent-post .image img {
    width: 70px;
    height: 55px;
    object-fit: cover
}

#footer .footer-main .recent-post h5 {
    color: var(--text-white);
    font-size: 1.4rem;
    font-family: var(--secondary-font)
}

#footer .footer-main .recent-post span {
    color: var(--subtitle);
    font-size: 1.3rem
}

#footer .footer-bottom {
    background: #000;
    border-top: 1px solid var(--nav-text)
}

.footer-bottom .footer-copyright {
    text-align: center;
    border-left: none;
    padding: 2rem 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.footer-bottom .footer-copyright p {
    margin-bottom: 0;
    padding: 0 .8rem;
    color: var(--text-white)
}

/*================================= ABOUT PAGE ==================================*/
/*================================= INNER BANNER ==================================*/
.inner-banner {
    width: 100%;
    height: 55vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url('../img/banner.webp');
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
}

.inner-banner .content-wrapper h3 {
    font-size: 4rem;
    color: var(--secondary-color);
    text-transform: uppercase;
    font-weight: 700;
}

.inner-banner .content-wrapper .bredcrumb ul {
    list-style: none;
    padding-left: 0rem;
}

.inner-banner .content-wrapper .bredcrumb ul li,
.bredcrumb ul li a {
    font-size: 1.6rem;
    color: var(--secondary-color);
    padding: 0px 5px;
    font-weight: 600;
    transition: 0.3s ease;
    text-decoration: none;
}

.bredcrumb ul li a:hover {
    color: var(--subtitle);
    border-bottom: 1px solid var(--subtitle);
}

/*=========================== VISION & MISSION SECTION ============================*/
#mission-vision p {
    color: var(--text-color);
}

#mission-vision .about-page-section .image-wrapper img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

#mission-vision .about-page-section .content-wrapper {
    background: var(--secondary-color);
    padding: 1.5rem 2rem;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.07);
    text-align: justify;
    height: 200px;
}

#mission-vision .about-page-section .content-wrapper h6 {
    font-size: 2.4rem;
    text-transform: capitalize;
    color: var(--heading);
    font-family: var(--primary-font);
}

#mission-vision .about-page-section .content-wrapper p {
    color: var(--text-color);
}


/* #mission-vision .about-page-section .img-wrapper img {
    width: 100%;
    height: 270px;
    object-fit: cover;
    border-radius: 1rem;
}

#mission-vision .about-page-section .content-box {
    text-align: center;
    background: #fff;
    padding: 4rem 3.5rem;
    border-radius: 10px;
    box-shadow: 0px 0px 40px 0px rgba(0,0,0,.09);
}

#mission-vision .about-page-section .content-box .icon img{
    height: 40px;
}

#mission-vision .about-page-section .content-box h6 {
    font-size: 2.4rem;
    text-transform: capitalize;
    color: var(--heading);
    font-family: var(--primary-font);
}

#mission-vision .about-page-section .content-box p {
    color: var(--text-color);
}

#mission-vision .about-page-section .content-box ul{
    margin: 3rem 0rem;
    padding: 0;
}

#mission-vision .about-page-section .content-box ul li{
    text-align: left;
    list-style: none;
    padding-left: 2rem;
    position: relative;
    margin-bottom: 1rem;
    font-size: 1.6rem;
    color: var(--text-color);
}

#mission-vision .about-page-section .content-box ul li::before{
    position: absolute;
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 20px;
    border: 2px solid var(--slide-text);
    left: 0;
    top: 2px;
    bottom: 0;
    margin: auto;
} */


/*=========================== CORE VALUE SECTION ============================*/
#coreValue {
    background: #f8f8f8;
}

.core-value-card {
    background: var(--secondary-color);
    display: flex;
    gap: 1rem;
}

.core-value-card .image-wrapper {
    background: #f8443332;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 1.2rem;
}

.core-value-card .image-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 2px;
    background: var(--subtitle);
    height: 105%;
    transform: translateY(-50%);
    width: 2px;
    height: 105%;
    left: 0;
    bottom: 0;
}

.core-value-card .image-wrapper img {
    height: 70px;
}

.core-value-card .content-wrapper {
    padding: 1rem 2rem 1rem 0rem;
    text-align: justify;
}

.core-value-card .content-wrapper h4 {
    font-size: 1.9rem;
    color: var(--heading);
    font-family: var(--oswald-regular);
    text-align: left;
}

.core-value-card .content-wrapper p {
    margin-bottom: 0;
    color: var(--text-color);
}

/*=========================== TEAM SECTION ============================*/
.about-our-team .box {
    box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    position: relative;
}

.about-our-team .box:hover .image-wrapper img {
    filter: grayscale(100%);
}

.about-our-team .box .image-wrapper img {
    height: 180px;
    transition: 0.5s ease;
}

.about-our-team .box .content-wrapper {
    background: #f8f8f8;
    text-align: left;
    padding: 1rem;
    margin-top: 1.5rem;
}

.about-our-team .box .content-wrapper h6 {
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.about-our-team .box .content-wrapper h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #021326;
    text-transform: capitalize;
}

.about-our-team .box .content-wrapper ul {
    margin-bottom: 0rem;
    padding-left: 0rem;
    position: absolute;
    list-style: none;
    left: 50%;
    transform: translateX(-50%);
    bottom: -5%;
    display: flex;
}

.about-our-team .box .content-wrapper ul li {
    margin: 0rem 0.5rem;
    border-radius: 7px;
}

.about-our-team .box .content-wrapper ul li a {
    display: flex;
    background: #06305f;
    align-items: center;
    justify-content: center;
    height: 30px;
    color: #fff;
    width: 30px;
    border-radius: 10px;
    margin: 0;
    transform: rotate(45deg);
    font-size: 14px;
    text-decoration: none;
}

.about-our-team .box .content-wrapper ul li a i {
    transform: rotate(-45deg);
}

/* .team-member {
    position: relative;
    overflow: hidden;
    transition: all .4s ease-in-out
}
.team-member .team-img {
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
}

 .team-member img {
    width: 100%;
    height: 100%;
    filter: grayscale(50%)
}

.team-member .team-img:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: transform 1.5s cubic-bezier(.19, 1, .22, 1);
    transform: scaleY(0);
    transform-origin: bottom left;
    background: linear-gradient(to bottom,rgba(15,15,15,0),rgba(15,15,15,.75) 100%);
}

 .team-member .team-title {
    padding: 10px 8px;
    height: 80px;
    text-align: left;
    background: #fff;
    position: relative;
    top: -50px;
    z-index: 2;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 5px;
    box-shadow: 0 15px 55px -5px rgba(9,31,67,.1);
    transition: transform .3s cubic-bezier(0, 0, .5, .99)
}

 .team-member .team-title h5 {
    color: #14133b;
    margin-bottom: 0;
    font-size: 1.8rem;
    font-family: var(--primary-font);
    text-transform: capitalize;
}

 .team-member .team-title h6 {
    color: #6a7c92;
    opacity: .8;
    margin-bottom: 0;
    font-size: 1.2rem;
    line-height: 18px;
    font-family: var(--secondary-font);
    text-transform: capitalize;
}

 .team-member .team-social {
    position: absolute;
    z-index: 1;
    opacity: 0;
    text-align: center;
    width: 100%;
    transition-delay: .5s;
    transform: translateY(100%);
    transition: transform .5s ease .2s
}

.team-member .team-social.social-icons{
    transition: .3s cubic-bezier(0, 0, .5, .99)
}

.team-member:hover .team-social:hover a {
    opacity: 0.5
}

.team-member:hover .team-social a:hover {
    opacity: 1
}

.team-member .team-social a {
    transform: translateY(40px);
    transition: all .4s ease-in-out
}

.social-icons a {
    display: inline-block;
    text-align: center;
    margin: 5px;
    border-radius: 4px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.team-member .team-social.social-icons a:before {
    position: absolute;
    z-index: -1;
    content: '';
    top: 0;
    background: inherit;
    width: inherit;
    height: inherit;
    display: block;
    border-radius: inherit;
    transition: transform .3s;
    transform: scale(.9);
}

.team-member .team-social.social-icons a:hover:before {
    transform: scale(1.15);
}


.social-icons.style1 a.linkedin {
    background: #0798cf;
    color: #fff;
}

.social-icons.style1 a.mail {
    background: #f04235;
    color: #fff;
}

 .team-member .team-social a:first-child {
    -webkit-transition-delay: .07s;
    transition-delay: .07s
}

 .team-member .team-social a:nth-child(2) {
    -webkit-transition-delay: .15s;
    transition-delay: .15s
}

 .team-member:hover {
    z-index: 1;
    transform: scale(1.08) translateZ(0)
}

 .team-member:hover img {
    filter: grayscale(90%)
}

.team-member:hover .team-img:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    background: linear-gradient(to bottom,rgba(0,0,0,0),#14133b 100%)
}

 .team-member:hover .team-title {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px)
}

 .team-member:hover .team-social {
    opacity: 1;
    bottom: 180px;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
}

 .team-member:hover a {
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0)
} */

/*================================= RESEARCH SOLUTION PAGE ==================================*/
#quantitative-bg {
    background: #f8f8f8;
}

.quantitative-heading h3 {
    font-size: 3rem;
    font-family: var(--primary-font);
    color: var(--heading);
}

.quantitative-heading p {
    color: var(--text-color);
    margin-bottom: 1.5rem;
}

.quantitative-heading h5 {
    font-size: 2rem;
    color: var(--heading);
    font-family: var(--oswald-regular);
}

.reasearch-solution-content h6 {
    font-size: 2rem;
    color: var(--heading);
    font-family: var(--primary-font);
}

.reasearch-solution-content p {
    color: var(--text-color);

}

.reasearch-solution-content ul {
    padding-left: 0rem !important;
    list-style: none;
}

.reasearch-solution-content .survey-box {
    display: flex;
}

.reasearch-solution-content .survey-box li {
    width: 19%;
    margin: 0px 8px;
    background: var(--secondary-color);
    border-radius: 1rem;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.06);
    padding: 15px;
    text-align: center;
}

.reasearch-solution-content .survey-box li img {
    width: 100%;
    border-radius: 1rem;
    margin-bottom: 6px;
}

.reasearch-solution-content .survey-box li span {
    color: var(--heading);
    font-size: 1.4rem;
    font-family: var(--oswald-regular)
}

.programming-capabilities li {
    list-style: none;
    height: 100%;
    padding: 1.5rem 1rem;
    background: var(--secondary-color);
    color: var(--text-color);
    font-size: 1.4rem;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.programming-capabilities li i {
    color: var(--subtitle);
    padding-right: 0.7rem;
}

.Unique-Delivery li {
    color: var(--text-color);
    font-size: 1.5rem;
    font-weight: 500;
    list-style: none;
    display: flex;
    align-items: flex-start;
}

.Unique-Delivery li i {
    margin-top: 4px;
    color: var(--subtitle);
    padding-right: 0.7rem;
}

.Tool-Expertise li {
    color: var(--text-color);
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    list-style: none;
    text-align: center;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--subtitle);
}

#quantitative-bg .accordion-body {
    margin-bottom: 2rem;
}

/*================================= ACCORDION ==================================*/
.szh-accordion__item {
    background: var(--secondary-color);
}

.itemBtn {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: .8rem 1.2rem;
    font-size: 1.7rem;
    text-align: left;
    color: #000;
    font-family: var(--secondary-font);
    background: var(--secondary-color);
    border: 1px solid transparent;
    box-shadow: 0 5px 16px 0 rgba(8, 15, 52, 0.06);
    outline: none !important;
    margin: 1.8rem 0rem;
}

.itemBtn.key {
    border-left: 4px solid var(--subtitle);
    text-transform: uppercase;
    font-family: var(--oswald-regular);
    color: var(--heading);
}

.itemBtn:hover {
    border: 1px solid var(--subtitle);
    outline: none;
}

.itemBtn.key:hover {
    border-left: 4px solid var(--subtitle);
}


.itemBtnExpanded {
    border: 1px solid var(--subtitle);
    outline: none;
}

.itemContent {
    transition: height 0.3s cubic-bezier(0, 0, 0, 1);
}

.itemContent p {
    color: var(--text-color);
    padding: 0rem 1rem;
}

.itemPanel,
.jobPanel {
    padding: 0rem 1rem;
}

.chevron-icon {
    width: 40px;
    height: 40px;
    background: var(--secondary-color);
    box-shadow: 0px 0px 15px rgba(8, 15, 52, 0.08);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.itemBtnExpanded .chevron-icon {
    background: var(--subtitle);
}

.chevron {
    transform: rotate(0deg);
    transition: transform 0.3s cubic-bezier(0, 0, 0, 1);
    font-size: 1.8rem;
    color: var(--subtitle);
}

.itemBtnExpanded .chevron {
    transform: rotate(90deg);
    color: var(--secondary-color);
}

/* 2 */
.jobitemBtn {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .9rem 1.2rem;
    border: none;
    background: #f4f4f4;
    font-size: 1.5rem;
    text-align: left;
    color: #000;
    text-transform: capitalize;
    font-family: var(--oswald-regular);
    margin: .8rem 0rem;
}

.job-chevron-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.job-chevron-icon .chevron {
    transform: rotate(0deg);
    transition: transform 0.3s cubic-bezier(0, 0, 0, 1);
    font-size: 2rem;
    color: var(--subtitle);
}

.itemBtnExpanded .job-chevron-icon .chevron {
    transform: rotate(90deg);
    color: var(--subtitle);
}

/* 3 */
.esomaritemBtn {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.8rem;
    border: none;
    background: #06305f;
    font-size: 1.8rem;
    text-align: left;
    color: var(--secondary-color);
    text-transform: uppercase;
    font-family: var(--oswald-regular);
    letter-spacing: 1px;
    margin: 2rem 0rem;
    border-radius: 1rem;
}

.esomar-chevron-icon .chevron {
    transform: rotate(0deg);
    transition: transform 0.3s cubic-bezier(0, 0, 0, 1);
    font-size: 2rem;
    color: #06305f;
    background: var(--secondary-color);
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

.c-mb {
    margin-bottom: 2rem;
}

.country-card {
    padding: 1rem;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.country-card .country-name {
    width: 30%;
    margin-bottom: 0rem;
}

.country-progress {
    width: 100%;
}

.country-progress .progress-full {
    width: 85%;
    height: 9px;
    border-radius: 5px;
    background: #f5f5f5;
}

.country-progress .progress-full .progress-contrast {
    background: var(--subtitle);
    height: 100%;
    border-radius: 5px;
}

.country-progress .progress-percent h5 {
    margin-bottom: 0rem;
}


/* 4 */
.subitemBtn {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    width: 100%;
    border: none;
    font-size: 1.4rem;
    color: var(--subtitle);
    text-align: justify;
    background: transparent;
    font-family: var(--secondary-font);
    margin-bottom: 2rem;
    font-weight: 600;
}

.sub-chevron-icon .chevron {
    transform: rotate(0deg);
    transition: transform 0.3s cubic-bezier(0, 0, 0, 1);
    font-size: 2rem;
    color: #06305f;
    background: var(--secondary-color);
}

.itemContent.sub ul {
    padding-left: 0rem;
    font-size: 1.6rem;
}

.itemContent.sub ul li {
    padding: .6rem 0rem;
}

.accordion-body .image-wrapper {
    background: #fd877e;
    padding: 1rem;
}

.accordion-body .image-wrapper img {
    width: 100%;
}

.nav-tabs {
    border-bottom: none !important;
    background: var(--text-white);
}

.nav-tabs .nav-link {
    border: none !important;
}

.nav-tabs li.filter-menu .nav-link {
    border-left: 1px solid var(--slide-text) !important;
    border-radius: 0px !important;
    color: var(--footer);
    font-size: 1.5rem;
    padding: 0.8rem 1.6rem;
    font-weight: 500;
}

.nav-tabs li.filter-menu:first-child .nav-link {
    border-left: none !important;
}

.nav-tabs li.filter-menu .nav-link.active {
    background: var(--subtitle) !important;
    color: var(--secondary-color);
}

.accordion-body ul {
    padding-left: 0rem !important;
}

.accordion-body .content h6 {
    font-size: 2rem;
    color: var(--heading);
    font-family: var(--primary-font);
}

.accordion-body .content p {
    color: var(--text-color);
    margin: 1.5rem 0rem;
}

.accordion-body .content p strong {
    color: var(--heading);
}

.accordion-body .content li strong {
    color: var(--heading);
}

#f2f ul li,
#papi-cap ul li,
#cati-cap ul li,
#cawi ul li,
#dp ul li,
#cp ul li,
#professional ul li,
#wcu ul li,
#range ul li {
    color: var(--text-color);
    font-size: 1.5rem;
    font-weight: 600;
    list-style: none;
    margin: 1rem 1rem;
    position: relative;
    font-family: var(--secondary-font);
    font-weight: 500;
}

#f2f ul li::before,
#papi-cap ul li::before,
#cati-cap ul li::before,
#cawi ul li::before,
#dp ul li::before,
#cp ul li::before,
#professional ul li::before,
#wcu ul li::before,
#range ul li::before {
    content: "";
    width: 5px;
    height: 5px;
    background: #fff;
    transform: rotate(45deg);
    border: 2px solid var(--subtitle);
    box-sizing: border-box;
    position: absolute;
    top: 9px;
    left: -11px;
}

/*================================= RESEARCH CONSULTANCY PAGE ==================================*/
.section-head h3 {
    font-size: 2.4rem;
    font-family: var(--primary-font);
    color: var(--subtitle);
}

/*=================== CARD IMAGE BOX ==================*/
.concultancy-item-box {
    height: 100%;
}

.concultancy-item-box .image-box {
    border: 1px solid rgba(0, 0, 0, .08);
    height: 100%;
    max-width: 100%;
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.068);
}

.image-box-style2 .caption {
    position: relative;
    overflow: hidden;
    padding: 40px 30px;
    height: 100%;
    background-color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all .5s cubic-bezier(.25, .8, .25, 1);
    transition: all .5s cubic-bezier(.25, .8, .25, 1);
}

.image-box-style2 .caption:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-transition: -webkit-transform 1.5s cubic-bezier(.19, 1, .22, 1);
    transition: transform 1.5s cubic-bezier(.19, 1, .22, 1);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    z-index: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #14133be2 90%);
}

.image-box-style2 .thumb-service {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.image-box-style2 .thumb-service:before {
    content: "";
    width: 100%;
    z-index: 1;
    position: absolute;
    left: 0;
    bottom: 0;
    visibility: visible;
    opacity: 1;
    height: 100%;
    opacity: .8;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.image-box-style2 .thumb-service .thumb {
    background-size: cover;
    background-repeat: no-repeat;
    background-clip: content-box;
    height: 100%;
    background-position: center;
    filter: grayscale(90%);
}

.image-box-style2 .title-wrap {
    position: relative;
    clear: both
}

.image-box-style2 .title-wrap h3 {
    margin-bottom: 0;
    font-size: 2rem;
    font-family: var(--primary-font);
}

.image-box-style2 .title-wrap .content {
    margin-top: 15px;
}

.image-box-style2 .title-wrap .content P {
    text-align: justify;
}

.image-box-style2 .title-wrap .icon-wrap {
    margin-bottom: 15px
}

.image-box-style2:hover .caption {
    background: 0 0 !important
}

.image-box-style2:hover .caption:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1)
}

.image-box-style2:hover .caption .title-wrap {
    color: #fff
}

.image-box-style2:hover .caption .title-wrap h6 {
    color: #fff
}

.image-box-style2:hover .caption .title-wrap .button {
    color: #fff
}

.image-box-style2:hover .caption .title-wrap .icon-wrap {
    color: #fff !important
}

.image-box-style2:hover .caption .thumb-service {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.image-box-style2:hover .caption .thumb-service img {
    filter: grayscale(90%)
}

.bg-dark .image-box-style2 .caption {
    border-color: rgba(255, 255, 255, .2)
}

.concultancy-item-box .content ul {
    column-count: 2;
    list-style: none;
    padding-left: 0;
    margin-top: 1rem;
}

.concultancy-item-box .content ul li {
    font-size: 1.5rem;
    color: var(--text-color);
    font-family: var(--secondary-font);
    margin: 0.5rem 0;
}

.concultancy-item-box .content ul li i {
    font-size: 1.4rem;
    color: var(--subtitle);
    padding-right: 0.2rem;
}

.image-box-style2:hover .caption .content ul li {
    color: var(--secondary-color);
}

.image-box-style2:hover .caption .content ul li i {
    color: var(--secondary-color);
}

/*============================= OUR PROCESS SECTION ======================*/
#ourProcess {
    background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
        url("../img/bgn-hero.webp");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.process-card {
    background: rgba(255, 255, 255, 0.3);
    color: var(--secondary-color);
    border-radius: 1.2rem;
    padding: 1.5rem;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(2px);
    min-height: 260px;
}

.process-card h4 {
    font-size: 1.8rem;
    font-family: var(--primary-font);
}

.process-card h4 span {
    font-size: 2.2rem;
}

.process-card p {
    text-align: justify;
}

.process-box-style3 {
    background: rgba(255, 255, 255, 1);
    position: relative;
    padding: 30px 20px 5px;
    max-width: 100%;
    height: 100%;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(2px);
    transform-style: preserve-3d;
    transform: rotateX(-45deg) translateY(120px);
    transform: matrix(1, 0, 0, 1, 0, 0);
    transition: all .5s cubic-bezier(.25, .8, .25, 1);
}

.process-box-style3::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: var(--subtitle);
    transition: all .3s linear 0s;
}

.process-box-style3:hover::after {
    width: 100%;
}

.process-box-style3:hover .process-wrap h6,
.process-box-style3:hover .process-wrap .content {
    transform: translateY(-50px)
}

.process-box-style3 .number-step {
    position: relative;
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
}

.process-box-style3 .number-step:before {
    border-radius: inherit;
    position: absolute;
    content: '';
    z-index: -1;
    width: 60px;
    background: var(--subtitle);
    height: 60px;
    left: 0;
    top: 0;
    opacity: .07;
    transition: all .5s ease;
}

.process-box-style3 .number-step h3 {
    line-height: 60px;
    margin-bottom: 0;
    text-align: center;
    font-size: 3.6rem;
    font-family: var(--primary-font);
    font-weight: 700;
    color: var(--subtitle);
}

.process-box-style3:hover .number-step {
    opacity: 0
}

.process-box h6 {
    font-size: 22px !important;
    font-family: var(--primary-font);
    line-height: 32px;
    text-transform: none;
    letter-spacing: 0;
    margin: 10px auto;
    color: #14133b;
    transition: all .5s cubic-bezier(.25, .8, .25, 1);
}

.process-box .content {
    color: var(--text-color);
    margin: 10px auto;
    font-size: 16px !important;
    line-height: 29px;
    text-transform: none;
    text-align: justify;
    transition: all .5s cubic-bezier(.25, .8, .25, 1);

}

/*=========================== TAX CONSULTING PAGE ===========================*/
#tax .col-md-6,
#tax .col-lg-4 {
    margin-bottom: 3rem;
}

.service-box {
    position: relative;
    height: 100%;
}

.service-box .service-content {
    position: relative;
    height: 100%;
    padding: 0px 20px 20px 20px;
    box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, .09);
    ;
    background: var(--secondary-color);
    border-radius: 10px;
    text-align: center;
}

.service-box .service-content .image-box {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    top: -20px;
}

.service-box .service-content .image-box::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    bottom: -100%;
    left: 0;
    background: #232323;
    opacity: 0;
    transition: 0.5s ease-in-out;
}

.service-box .service-content:hover .image-box::before {
    bottom: 0;
    opacity: .7;
}

.service-box .service-content .image-box img {
    width: 100%;
    height: 230px;
    -o-object-fit: cover;
    object-fit: cover;
}

.service-box .service-content .content-inner {
    position: relative;
    padding: 5px 0px;
}

.service-box .service-content .content-inner h2 {
    font-size: 1.8rem;
    color: var(--subtitle);
    font-family: var(--primary-font);
    text-transform: capitalize;
}

.service-box .service-content .content-inner p {
    text-align: justify;
    color: var(--text-color);
}

/*============================ B2B PAGE ============================*/
.entry-section-head h2 {
    font-size: 4.2rem;
    color: var(--heading);
    font-family: var(--primary-font);
}

.entry-content p {
    color: var(--text-color);
    text-align: justify;
}

/*============================ B2B ACCORDION SECTION ============================*/
#keyAttribute {
    background: #f8f8f8;
}

.accordion-header-key {
    border-left: 4px solid var(--contrast-color);
}

.accordion-header-key>button>img {
    height: 35px !important;
    padding-right: 1.5rem;
}

.itemContent .country {
    margin-bottom: 1.5rem;
}

.itemContent .icon-img {
    background: var(--secondary-color);
    padding: 0.8rem 0.6rem;
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.09);
}

.itemContent .icon-img img {
    height: 22px;
    width: 22px;
}

.itemContent .icon-name span {
    font-size: 1.5rem;
    color: var(--heading);

}

.itemContent .accordion-list ul {
    list-style: none;
    gap: .8rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-left: 0rem;
}

.itemContent .accordion-list ul li {
    font-size: 1.5rem;
    color: var(--text-color);
    font-family: var(--secondary-font);
}

.itemContent .accordion-list ul li i {
    color: var(--subtitle);
    font-size: 1.4rem;
    padding-right: .6rem;
}

.itemContent .accordion-list ul.multy-list {
    display: flex;
    flex-direction: column;
}

.itemContent .accordion-list ul.multy-list b {
    color: var(--footer);
    margin-top: 1rem;
}

.itemContent .accordion-list ul.multy-list>li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.itemContent .accordion-list ul.multy-list>li>ul {
    width: 100%;
    margin-top: 5px;
}

.itemContent .accordion-list ul.with-icon li ul li {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.itemContent .accordion-list ul.with-icon li span {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    background: #fff;
    padding: 5px;
    margin-right: 5px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.itemContent .accordion-list ul.with-icon li span img {
    height: 100%;
    object-fit: contain;
}

/*======================= RECRUIMENT PROCESS SECTION ==========================*/
.single-service-box-item {
    background-color: #fafafb;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 4.5rem 3rem;
    clip-path: polygon(0 11%, 100% 0, 100% 89%, 0% 100%);
}

.single-service-box-item:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: var(--subtitle);
    -webkit-transition: -webkit-transform 1.5s cubic-bezier(.19, 1, .22, 1);
    transition: transform 1.5s cubic-bezier(.19, 1, .22, 1);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    clip-path: polygon(0 11%, 100% 0, 100% 89%, 0% 100%);
}

.single-service-box-item .number {
    color: #eeedef;
    position: absolute;
    z-index: 3;
    line-height: 1;
    font-style: italic;
    right: 15px;
    bottom: 15px;
    font-size: 70px;
    font-weight: 700;
    transition: 0.5s ease-in-out;
}

.single-service-box-item:hover .number {
    color: #fff;
    opacity: 0.4;
}

.single-service-box-item:hover:before {
    transform: scaleY(1);
}

.single-service-box-item .content,
.single-service-box-item .icon,
.single-service-box-item .title {
    position: relative;
    z-index: 2
}



.single-service-box-item .title h3 {
    font-size: 2rem;
    color: var(--primary-color);
    font-family: var(--primary-font);
    text-transform: capitalize;
    margin-top: 1rem;
    transition: 0.5s ease-in-out;
}

.single-service-box-item:hover .title h3 {
    color: var(--secondary-color);
}

.single-service-box-item .icon i {
    height: 40px;
    width: 40px;
    font-size: 2.5rem;
    border-radius: 5px;
    text-align: center;
    color: var(--subtitle);
    transition: 0.5s ease-in-out;
}

.single-service-box-item:hover .icon i {
    color: var(--secondary-color);
}

.single-service-box-item .content p {
    color: var(--text-color);
    font-weight: 500;
    transition: 0.4s ease-in-out;
}

.single-service-box-item:hover .content p {
    color: var(--secondary-color);
}

/*============================ KEY ATTRIBUTES ============================*/
#keyAttribute .section-heading {
    margin-bottom: 2.5rem;
}

/*=============================== CAREER PAGE ============================*/
.career-info-item {
    height: 100%;
}

.career-info-item button {
    border: none;
    width: 100%;
    height: 100%;
    background: var(--secondary-color);
    box-shadow: rgb(0 0 0 / 5%) 0px 5px 10px 0px;
    border-radius: 1rem;
    color: var(--sub-heading);
    padding: 2.5rem 2rem;
    transition: 0.5s all ease;
}

.career-info-item button:hover {
    background: rgb(255 59 43 / 15%);
}

.career-info-item button .icon img {
    height: 50px;
}

.career-info-item .title h4 {
    font-size: 1.4rem;
    color: var(--text-color);
    font-family: var(--oswald-regular);
    margin-top: .7rem;
}

/* recent job */
.career-recent-job ul {
    padding-left: 0rem;
    list-style: none;
}

.career-recent-job ul li {
    background: #f4f4f4;
    border-top: 2px solid var(--contrast-color);
}

.career-recent-job ul li .left h5 {
    font-size: 1.5rem;
    text-transform: uppercase;
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 1.1rem;
}

.career-recent-job ul li .list {
    color: var(--sub-heading);
}

.career-recent-job ul li .list span {
    font-size: 1.4rem;
    margin: 0rem 1rem;
}

.career-recent-job ul li .list span i {
    padding-right: 5px;
}

/*=================== contact form ===================*/
.contact-form {
    margin-top: 6rem;
}

.contact-form h4 {
    font-size: 2.4rem;
    font-family: var(--primary-font);
    color: var(--heading);
}

.contact-form form label {
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--footer);
    margin-top: 1.5rem;
}

.contact-form form label span {
    color: red;
}

.contact-form form input,
.contact-form form textarea {
    padding: 0.4rem 0rem;
    width: 100%;
    font-size: 1.5rem;
    color: var(--text-color);
    outline: none;
    border: none;
    border-bottom: 1px solid #d8d8d890;
}

.contact-form form input[type="file"] {
    padding: .6rem 0rem 0rem 0rem;
}

::-webkit-file-upload-button {
    color: #fff;
    background: var(--subtitle);
    outline: none;
    border: none;
    padding: .6rem 1rem;
    font-weight: 600;
}

.contact-form form textarea {
    height: 90px;
}

.contact-form form .form-btn,
.popup-form form .form-btn {
    background: var(--subtitle);
    color: var(--secondary-color);
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 5px;
    border: none;
    font-family: var(--primary-font);
    width: 100%;
    padding: .8rem 0rem;
    font-size: 1.5rem;
}

.contact-form form .form-btn:disabled {
    background: #ff6665;
}

.contact-form svg {
    margin-bottom: 3px;
    margin-left: 10px;
}

.contact-form svg circle {
    stroke: #fff !important;
}


.contact-form button span {
    display: flex;
    justify-content: center;
}


.gZmPOF {
    display: inline-block !important;
}

.contact-form span.error {
    font-size: 1.3rem;
    color: red;
    font-weight: 500;
}

.contact-map {
    margin-top: 3rem;
}

.contact-map iframe {
    height: 550px;
}



/*============== PRIVACY PAGE ================*/
#privacy .entry-content h5 {
    font-size: 2.4rem;
    font-family: var(--primary-font);
    color: var(--heading);
    margin-top: 2rem;
}

/*========================== CATI PAGE ===========================*/
.banner-slider {
    width: 100%;
    height: 100vh;
    position: relative;
}

.banner-slider::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 0;
}

.banner-slider video {
    height: 100vh;
    width: 100%;
    object-fit: cover;
}

.banner-slider .banner-text {
    width: 85%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 21;
}

.banner-slider .banner-text h2 {
    color: var(--secondary-color);
    font-size: 4.8rem;
    font-weight: 700;
}

#cati-intro .image-wrapper {
    height: 100%;
}

#cati-intro .image-wrapper img {
    height: 100%;
    width: 100%;
    border-radius: 1rem;
}

/*============== CATI INDUSTRY ==============*/
#cati-industry {
    background: #F7F7F7;
}

#cati-industry .item {
    background: var(--secondary-color);
    padding: 1.5rem;
    border-radius: 5px;
    height: 100%;
    border: none;
    outline: none;
}

#cati-industry .item p {
    margin-top: 1rem;
    color: var(--subtitle);
    font-size: 1.6rem;
    font-family: var(--primary-font);
}

#cati-industry img {
    height: 230px;
    width: 100%;
    object-fit: cover;
}

#cati-industry .slick-slide {
    margin: 0rem;
    padding: 0rem 1rem;
}

/*================= CATI INFRASTRUCTURE =================*/
#cati-infra .content-wrapper ul {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
    list-style: none;
    padding-left: 4rem;
    position: relative;
}

#cati-infra .content-wrapper ul::before {
    position: absolute;
    left: 0;
    width: 1rem;
    height: 100%;
    background: var(--subtitle);
    top: 0;
    content: "";
    border-radius: 10px;
}

#cati-infra .content-wrapper ul li {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 4px 7px;
    padding: 1rem;
    background: rgba(255, 59, 43, 0.2);
    border-radius: 5px;
    position: relative;
    font-size: 1.5rem;
    color: var(--footer);
    font-family: var(--oswald-regular);
}

#cati-infra .content-wrapper ul li::before {
    content: "";
    top: 50%;
    left: -45px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: rgb(255, 59, 43);
    position: absolute;
    border-radius: 50%;
}

/*================== CATI CAPABILITIES ================*/
#cati-capability {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        url('../img/cati/capablity.webp');
    background-attachment: fixed;
}

#cati-capability .capability-content {
    padding: 15px;
    background: rgb(0 0 0 / 55%);
    border-radius: 5px;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.6;
    height: 100%;
}

#cati-capability .capability-content p {
    color: var(--slide-text);
}

/*================== CATI EXPERTISE ================*/
#cati-expertise {
    background: #021326;
}

#cati-expertise .expertise-item {
    padding: 3rem 1.2rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    ;
    font-size: 1.5rem;
    position: relative;
    color: var(--secondary-color);
    height: 100%;
}

#cati-expertise .expertise-item i {
    position: absolute;
    top: -20px;
    background: #1c2b3c;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.8rem;
}

#cati-expertise .expertise-item p {
    font-size: 1.5rem;
}

/*================== CATI OPERATION ================*/
#cati-operation .img-item {
    padding: 1rem;
    background: #f4f4f4;
    height: 100%;
}

#cati-operation .img-item .img {
    margin-bottom: 1.5rem;
}

#cati-operation .img-item .img img {
    height: 210px;
    width: 100%;
    object-fit: cover;
}

#cati-operation .img-item .content h6 {
    font-size: 1.7rem;
    color: var(--footer);
    font-family: var(--oswald-regular);
}

#cati-operation .img-item .content p {
    font-size: 1.4rem;
    color: var(--text-color);
}

/*=================== LANGUAGE =================*/
#language {
    background: #f4f4f4;
    position: relative;
}

#language .lang {
    position: absolute;
    width: 100%;
    max-width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.1;
}

#language ul.obj {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
}

#language ul.obj li {
    display: flex;
    font-size: 1.5rem;
    font-family: var(--oswald-regular);
}

#language ul.obj li i {
    margin-right: 8px;
    margin-top: 2px;
    color: var(--subtitle);
}

#language ul.language .list-title {
    font-size: 1.5rem;
    font-family: var(--oswald-regular);
    color: #000;
}

#language ul.language .list-title ul {
    column-count: 4;
    margin-bottom: 1.6rem;
    font-family: var(--secondary-font);
    color: var(--nav-text);
}

/*================== KEY BENIFIT ================*/
#keybenefit {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
        url('../img/cati/key-bg.webp');
}

#keybenefit .section-heading h6 {
    font-size: 1.4rem;
    color: var(--subtitle);
    text-transform: uppercase;
    font-family: var(--primary-font);
}

#keybenefit .section-heading p {
    color: var(--secondary-color);
    margin-top: 2.5rem;
}

#keybenefit ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 0;
    list-style: none;
    font-weight: 300;
    padding-left: 0;
}

#keybenefit ul li {
    padding: 2rem;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    background: rgba(0, 0, 0, 0.7);
    font-size: 1.5rem;
    color: var(--slide-text);
    font-family: var(--secondary-font);
}

/*================== COMPANY SLIDER ================*/
#company .section-heading {
    margin-bottom: 7rem;
}

#company .company-item {
    text-align: center;
    border: none;
    outline: none;
}

#company .company-item img {
    height: 60px;
    object-fit: contain;

}

#company .slick-slide img {
    display: inline-block;
}

/*================== CATI EXPERIENCE ================*/
#experience {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
        url('../img/cati/exp-bg.webp');
    background-attachment: fixed;
}

#experience .section-heading p {
    color: var(--slide-text);
}

#experience .follow {
    color: var(--slide-text);
    font-size: 1.8rem;
    font-family: var(--oswald-regular);
    margin-bottom: 2rem;
}

#experience .ex-item {
    padding: 20px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.3);
    list-style-type: auto;
    height: 100%;
}

#experience .ex-item p span {
    font-family: var(--primary-font);

}

#experience .ex-item p {
    color: var(--secondary-color);
}

/*================== CATI QUALITATIVE ================*/
#qualitative {
    background: #f7f7f7;
}

#qualitative .section-heading p {
    margin-top: 3rem;
}

#qualitative .box {
    background: var(--secondary-color);
}

#qualitative .box h6 {
    padding: 2rem;
    text-align: center;
    color: var(--subtitle);
    font-size: 1.8rem;
    font-family: var(--primary-font);
}

/*================== PROJECT QUALITY ================*/
#project .project-item {
    padding: 2rem;
    border-radius: 2rem;
    background: var(--subtitle);
    color: #fff;
    position: relative;
    z-index: 0;
    text-align: center;
    height: 100%;
}

#project .project-item::before {
    content: "";
    position: absolute;
    top: -15px;
    left: -15px;
    width: 100%;
    height: 100%;
    background: rgba(245, 57, 42, 0.3);
    z-index: -1;
    border-radius: 20px;
}

#project .project-item p {
    margin-bottom: 0;
}

/*================== CATI SUPPORT ================*/
#why-area .col-lg-12 {
    padding: 2.5rem;
}


#why-area .list .icon img.icon-img {
    width: 40px;
    height: 40px;
    background: rgb(255 255 255 / 10%);
    border-radius: 50%;
    padding: 5px;
}

#why-area .left .list .icon img.icon-img {
    background: rgb(0 0 0 / 10%);
}

#qs {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
        url('../img/cati/about1.webp');
    background-attachment: fixed;
}

#cs {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        url('../img/cati/cati-bg.webp');
    background-attachment: fixed;
}

#cs p {
    color: var(--slide-text);
}

#why-area .list {
    margin-top: 2.5rem;
}

#why-area .list .item {
    display: flex;
    gap: 15px;
    margin: 1rem 0rem;
    align-items: start;
}

#why-area .list .item .icon img {
    width: 40px;
    height: 40px;
    background: rgb(255 255 255 / 10%);
    border-radius: 50%;
    padding: 5px;
}

#why-area .item h5 {
    font-size: 1.6rem;
    font-family: var(--oswald-regular);
    color: var(--secondary-color);
}

#why-area .left .item h5 {
    color: var(--footer);
}

/*================== POPUP ================*/
.popup-body,
.form-popup-body,
.success-popup-body {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 111;
}


.popup-download {
    background: var(--secondary-color);
    padding: 4.5rem 3rem 2.5rem;
    width: 450px;
    border-radius: 5px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.popup-download .icon {
    width: 35px;
    height: 35px;
    background: red;
    position: absolute;
    right: 0;
    top: 0;
    line-height: 4rem;
    cursor: pointer;
}

.popup-download .icon i {
    font-size: 2rem;
    color: var(--secondary-color);
}

.popup-download i.fa-book-open {
    font-size: 3.5rem;
    color: var(--text-color);
    margin: 1rem 0rem;
}

.popup-download h2 {
    font-size: 2rem;
    color: var(--heading);
    font-family: var(--primary-font);
    margin-bottom: 2rem;
}

/*======================= FORM POPUP ====================*/
.popup-form {
    background: var(--secondary-color);
    padding: 2rem 3rem;
    width: 500px;
    border-radius: 5px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: relative;
}

.popup-form .icon {
    width: 35px;
    height: 35px;
    background: red;
    position: absolute;
    right: 0;
    top: 0;
    line-height: 4rem;
    cursor: pointer;
    text-align: center;
    border-top-right-radius: 5px;
}

.popup-form .icon i {
    font-size: 2rem;
    color: var(--secondary-color);
}

.popup-form h2 {
    font-size: 2rem;
    text-transform: capitalize;
    font-family: var(--primary-font);
    color: var(--footer);
    text-align: center;
}

.popup-form .form-group {
    margin-top: 2rem;
}

.popup-form form label {
    display: block;
    font-size: 1.3rem;
    color: var(--footer);
    font-family: var(--secondary-font);
}

.popup-form form input,
.popup-form form textarea {
    width: 100%;
    padding: .4rem 0rem;
    font-size: 1.5rem;
    color: var(--text-color);
    outline: none;
    border: none;
    border-bottom: 1px solid var(--text-color);
    font-family: var(--secondary-font);
}

.popup-form form textarea {
    height: 90px;
    resize: none;
}

.popup-form form ::placeholder {
    color: var(--text-color);
}

.popup-form form input:focus,
.popup-form form textarea:focus {
    border-bottom: 1px solid var(--footer);
}

.popup-form form input:focus::placeholder,
.popup-form form textarea:focus::placeholder {
    color: var(--footer);
}

.popup-form form .form-btn {
    width: auto;
    padding: 0.7rem 1.8rem;
}

/*=================== SUCCESS POPUP ==================*/
.popup-success,
.popup-error {
    background: var(--secondary-color);
    width: 450px;
    border-radius: 5px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.popup-success .head {
    background: #6ebc45;
    padding: 1rem 0rem;
    border-radius: 5px 5px 0px 0px;
}

.popup-success .head h3 {
    font-size: 2.2rem;
    color: var(--secondary-color);
    font-family: var(--primary-font);
    margin-bottom: 0rem;
}

.popup-success .body {
    padding: 2rem;
}

.popup-success .body i {
    font-size: 2.6rem;
    color: var(--text-color);
    margin-bottom: 1.5rem;
}

.popup-success .body p {
    font-size: 1.5rem;
    color: var(--text-color);
    margin-bottom: 0rem;
    margin-bottom: 1.5rem;
}

.popup-success .body p a {
    color: var(--text-color);
    transition: .2s;
}

.popup-success .body p a:hover {
    color: var(--footer);
}

.popup-success .body button,
.popup-error .body button {
    background: #6ebc45;
    border: none;
    padding: .6rem 2rem;
    font-size: 1.5rem;
    color: var(--secondary-color);
    font-family: var(--primary-font);
    margin-top: .7rem
}

.popup-error .head {
    background: #f33a34;
    padding: 1rem 0rem;
    border-radius: 5px 5px 0px 0px;
}

.popup-error .head h3 {
    font-size: 2.2rem;
    color: var(--secondary-color);
    font-family: var(--primary-font);
    margin-bottom: 0rem;
}

.popup-error .body {
    padding: 2rem;
}

.popup-error .body button {
    background: #f33a34;
}