:root {
    /* --primary-color: #114A43; */
    /* --secondary-color: #D8E28C; */


    --primary-color: #114A43;

    --primary-light: #1B655B;

    --primary-dark: #0B3732;

    --secondary-color: #D8E28C;

    --secondary-dark: #C8D96B;

    --secondary-darker: #98a43b;

    --text-color: #2e2e2e;

    --text-dark: #16211F;

    --text-light: #6B7280;

    --white: #FFFFFF;

    --light-bg: #F8FBF8;

    --border: #E7ECE9;


}

.color-secondary {
    color: var(--primary-light);
}

.secondary-color {
    color: #848d50;
    font-size: 18px;
}

.primary-button {
    background: var(--primary-light);
    color: #fff;
    border-color: var(--primary-color);
}

.primary-button:hover {
    background: var(--primary-dark);
}

.primary-button1 {
    background: var(--primary-light);
    color: #fff;
    border-color: var(--primary-color);
}

.primary-button1:hover {
    background: var(--secondary-color);
    color: black;
}

.primary-outline {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.primary-outline:hover {
    background: var(--primary-light);
    color: white;
}

.span-color {
    color: var(--primary-light);
}

.secondary-button {
    background-color: var(--secondary-color);
    color: black;
}

.secondary-button:hover {
    background-color: var(--secondary-dark);
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', 'Noto Sans Arabic', sans-serif;
}

body {

    /* font-family: Inter, sans-serif; */
    font-family: 'Inter', 'Noto Sans Arabic', sans-serif;

    background: #f8fbff;

    color: #1d1d1d;

    /* font-weight: 500; */

}

.ver-hor-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ================= Navbar ================= */

.navbar {

    background: #fff;
    position: sticky;
    top: 0;
    z-index: 99;

}

.navbar .dropdown-menu {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.navbar .dropdown-menu .icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 6px;
}

.navbar .dropdown-menu .menu-heading {
    font-weight: 500;
    padding-left: 10px;
}

.navbar .dropdown-menu .list-group-item {
    color: black;
}

@media (min-width: 992px) {
    .navbar .dropdown:hover>.dropdown-menu {
        display: block;
        border: none;
        border-top: 2px solid var(--primary-color);
        margin-top: 0;
    }

    .navbar .dropdown>.dropdown-toggle::after {
        transition: transform .2s ease;
    }

    .navbar .dropdown:hover>.dropdown-toggle::after {
        transform: rotate(180deg);
    }
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--primary-light);
}

.navbar .nav-item .nav-link.active {
    color: #006256;
    font-weight: 800;
}

.navbar .dropdown:hover .dropdown-menu li {
    border-top: 1px solid #efefef;
}

.navbar .dropdown:hover .dropdown-menu li:first-child {
    border-top: 0;
}

.navbar .navbar-brand .logo-img {
    max-width: 150px;
}

.navbar .nav-link {

    margin: 0 12px;

    font-weight: 700;

}

.navbar .btn-primary {

    background: var(--primary-color);

    border: none;

    border-radius: 10px;

    padding: 12px 25px;

}

.navbar .btn-primary:hover {

    background: var(--secondary-color);
    color: black
}

.navbar .btn-outline-primary {

    border-radius: 10px;

    padding: 12px 25px;

}

.dropdown:hover>.dropdown-menu,
.dropend:hover>.dropdown-menu {
    /* display: block; */
    margin-top: .1em;
    margin-left: .1em;
}

.navbar .dropdown-item {
    font-weight: 500;
    padding: 8px 15px;
}

@media only screen and (max-width: 768px) {
    .navbar .navbar-collapse {
        overflow: auto;
        max-height: 80vh;
    }
}

@media screen and (min-width:769px) {
    .dropend:hover>.dropdown-menu {
        position: absolute;
        top: 0;
        left: 100%;
    }

    .dropend .dropdown-toggle {
        /* margin-left: .5em; */
    }
}

/* ================= Hero ================= */

.hero {

    padding: 40px 0;

    /* background: linear-gradient(180deg, #ffffff, #eef6ff); */
    /* background-image: linear-gradient(180deg, rgb(19 114 106), rgb(0 0 0 / 58%)), url(../images/home1/hero1.jpg); */
    background-image: linear-gradient(180deg, rgb(14 80 72), rgb(0 0 0 / 58%)), url(../images/home1/hero1.jpg);
    /* background-image: url(../images/home1/home-hero.jpg); */
    /* background-image: url('../images/home1/hero1.jpg'); */
    background-size: cover;
    background-position: center;

}

.hero-tag {

    /* color: #CDDC39; */
    color: var(--secondary-dark);

    font-weight: 700;

    letter-spacing: 1px;

    font-size: 13px;
    border: 1px solid #d8e28c4f;
    padding: 4px 8px;
    border-radius: 6px;

}

.hero h1 {

    font-size: 31px;

    font-weight: 800;

    margin-top: 20px;

    line-height: 1.1;
    color: white;

}

.hero h1 span {

    /* color: var(--secondary-color); */
    color: var(--secondary-dark);

}

.hero p {

    margin-top: 25px;

    color: #d7d7d7;

    line-height: 32px;

    font-size: 18px;

}

.hero-icons {

    display: flex;

    gap: 30px;

    margin-top: 35px;

}

.hero-icons div {

    display: flex;

    align-items: center;

    gap: 10px;
    color: #d5d5d5;

    font-weight: 600;

}

.hero-icons i {

    color: var(--secondary-color);

    font-size: 20px;

}

/* Dashboard */

.dashboard-box {

    background: #fff;

    border-radius: 25px;

    padding: 18px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, .08);

}

.dashboard-box img {

    width: 100%;

    border-radius: 18px;

}

/* Responsive */

@media(max-width:991px) {

    .hero {

        text-align: left;

    }

    .hero h1 {

        font-size: 46px;

    }

    .hero-icons {

        justify-content: left;

        flex-wrap: wrap;

    }

    .dashboard-box {

        margin-top: 40px;

    }

}

@media(max-width:576px) {

    .hero {

        padding: 60px 0;

    }

    .hero h1 {

        font-size: 27px;

    }

    .hero p {

        font-size: 16px;

        line-height: 28px;

    }

    .hero-icons {

        gap: 15px;

    }

}


/*==============================
Trusted Companies
===============================*/

.trusted-section {
    background: #fff;
}

.brand-item {

    font-weight: 600;

    color: #555;

    transition: .3s;

}

.brand-item i {

    color: #2563eb;

    margin-right: 8px;

    font-size: 22px;

}

.brand-item:hover {

    color: #2563eb;

    transform: translateY(-4px);

}

/*==============================
Stats
===============================*/
/* 
.stats-section {

    padding-bottom: 80px;

}

.stat-card {

    background: #fff;

    border-radius: 18px;

    text-align: center;

    padding: 35px 20px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, .05);

    transition: .3s;

}

.stat-card:hover {

    transform: translateY(-8px);

}

.stat-card h2 {

    font-weight: 800;

    margin-top: 15px;

}

.stat-card p {

    color: #777;

    margin: 0;

}

.icon {

    width: 65px;

    height: 65px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 28px;

    margin: auto;

    color: #fff;

}

*/
.blue {

    background: #2563eb;

}

.green {

    background: #16a34a;

}

.orange {

    background: #f59e0b;

}

.purple {

    background: #8b5cf6;

}

.teal {

    background: #14b8a6;

}



/*==========================
Stats Section
===========================*/

.stats-section {

    background: #fff;
    padding: 60px 0;

}

.stats-section .stats-wrapper {

    background: #fff;

    border: 1px solid #edf1f7;

    border-radius: 22px;

    box-shadow: 0 8px 25px rgba(15, 23, 42, .05);

    overflow: hidden;

}

.stats-section .stat-item {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    padding: 20px 25px;

    border-right: 1px solid #edf1f7;

    transition: .3s;

}

.stats-section .stat-item:hover {

    background: #fafcff;

}

.stats-section .stat-icon {

    width: 64px;

    height: 64px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 32px;

    flex-shrink: 0;

}

/* Icon Colors */

.stats-section .primary-light {
    color: var(--primary-light);

    background: #eff6ff;
}

.stats-section .blue {

    color: #2563eb;

    background: #eff6ff;

}

.stats-section .green {

    color: #16a34a;

    background: #ecfdf3;

}

.stats-section .purple {

    color: #7c3aed;

    background: #f5f3ff;

}

.stats-section .orange {

    color: #839201;

    background: #fff7ed;

}

.stats-section .stat-item h2 {

    margin: 0;

    font-size: 24px;

    font-weight: 800;

    line-height: 1;

    color: #111827;

}

.stats-section .stat-item p {

    margin: 8px 0 0;

    font-size: 16px;

    color: var(--text-color);

}

/*==========================
Responsive
===========================*/

@media(max-width:991px) {

    .stats-section .stat-item {

        justify-content: flex-start;

        border-right: none;

        border-bottom: 1px solid #edf1f7;

    }

    .stats-section .row>.col-md-6:nth-last-child(-n+2) .stat-item {

        border-bottom: none;

    }

}

@media(max-width:767px) {
    .stats-section {
        padding-bottom: 0;
    }

    .stats-section .container {
        margin-bottom: -45px !important;
    }

    .stats-section .stat-item {

        padding: 22px 10px;
        border-right: 1px solid #f2f2f2;
        height: 100%;

    }

    .stats-section .row>div:nth-child(2) .stat-item {
        border-right: none;
    }

    .stats-section .stat-item h2 {

        font-size: 22px;

    }

    .stats-section .stat-icon {

        width: 55px;
        height: 55px;
        font-size: 26px;

    }

    .stats-section .stat-item p {
        font-size: 14px;
        font-weight: 500;
    }

    .stats-section .row {
        align-items: unset !important;
    }

    .stats-section .stats-wrapper {
        position: relative;
        top: -75px;
    }

    /* .stats-section .row > div{
        display:flex;
    }

    .stats-section .stat-item{
        flex:1;
    } */
}

/*==============================
Services
===============================*/

/* .services {

    background: #f8fbff;

}

.service-card {
    text-align: center;
    background: #fff;

    border-radius: 18px;

    padding: 35px;

    height: 100%;

    transition: .35s;

    box-shadow: 0 10px 40px rgba(0, 0, 0, .05);

}

.service-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);

}

.service-icon {

    width: 60px;

    height: 60px;

    border-radius: 14px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-size: 25px;

    margin-bottom: 20px;

}

.service-card h5 {

    font-weight: 700;

    margin-bottom: 15px;

}

.service-card p {

    color: #777;

    line-height: 28px;

    margin: 0;

} */

/*=========================
Services
=========================*/

.py-50 {

    padding: 50px 0;

}

.services-section {

    /* background:#fff; */
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff, #f8fbff);

}

.services-section::before {

    content: "";

    position: absolute;

    width: 250px;
    height: 250px;
    left: -110px;
    top: -90px;

    border-radius: 50%;

    /* background:rgba(37,99,235,.08); */
    background: #19875414;

    filter: blur(80px);

}

.services-section::after {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    right: -180px;

    bottom: -180px;

    border-radius: 50%;

    /* background:rgba(20,184,166,.08); */
    background: rgb(152 216 69 / 16%);

    filter: blur(80px);
    z-index: 0;

}

.services-section .section-title {

    max-width: 820px;

    margin: auto;

}

.services-section .icon {

    transition: .35s;

}

.services-section .service-card:hover .icon {

    transform: rotate(10deg) scale(1.08);

}

.services-section .sub-title {

    color: var(--secondary-darker);

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.services-section .section-title h2 {

    margin: 18px 0;

    font-size: 35px;

    font-weight: 800;

    line-height: 1.2;

    color: #0f172a;

}

.services-section .section-title h2 span {

    color: var(--primary-color);

}

.section-title p {

    color: var(--text-color);

    font-size: 18px;

}

/* Columns */

.service-column h3 {

    font-size: 28px;

    font-weight: 700;

    margin-bottom: 35px;

    color: #0f172a;

}

/* Cards */

.left-column .service-card {
    position: relative;

    overflow: hidden;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding: 22px;

    margin-bottom: 20px;

    border-radius: 20px;

    background: #fff;

    border: 1px solid #edf2f7;

    box-shadow: 0 10px 35px rgba(15, 23, 42, .05);

    transition: .35s;

}

.left-column .service-card::before {

    content: "";

    position: absolute;

    inset: 0;

    /* background:linear-gradient(90deg,rgba(37,99,235,.04),transparent); */
    background: linear-gradient(90deg, rgba(37, 99, 235, .04), #19875414);


    opacity: 0;

    transition: .35s;

}

.left-column .service-card:hover::before {

    opacity: 1;

}

.left-column .service-card:hover {

    transform: translateY(-8px);

    border-color: var(--primary-light);

    /* box-shadow:0 25px 50px rgba(37,99,235,.15); */
    box-shadow: 0 25px 50px #4c9f7817;

}

.right-column .service-card {
    position: relative;

    overflow: hidden;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding: 22px;

    margin-bottom: 20px;

    border-radius: 20px;

    background: #fff;

    border: 1px solid #edf2f7;

    box-shadow: 0 10px 35px rgba(15, 23, 42, .05);

    transition: .35s;
    z-index: 2;

}

.right-column .service-card::before {

    content: "";

    position: absolute;

    inset: 0;

    /* background:linear-gradient(90deg,rgba(37,99,235,.04),transparent); */
    background: linear-gradient(90deg, rgb(238 248 89 / 4%), #e2f67914);


    opacity: 0;

    transition: .35s;

}

.right-column .service-card:hover::before {

    opacity: 1;

}

.right-column .service-card:hover {

    transform: translateY(-8px);

    border-color: var(--secondary-color);

    /* box-shadow:0 25px 50px rgba(37,99,235,.15); */
    box-shadow: 0 25px 50px #4c9f7817;
}

.service-card h5 {

    margin-bottom: 6px;

    font-size: 18px;

    font-weight: 700;

}

.service-card p {

    margin: 0;

    color: var(--text-color);

    font-size: 15px;

}

.icon {

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #eff6ff;

    color: var(--primary-light);

    font-size: 30px;

    flex-shrink: 0;

}

.right-column .icon {

    background: #e9fadfd6;

    /* color: #c2d24d; */
    color: #737c33;

}

.services-image {

    min-height: 700px;

    display: flex;

    align-items: center;

    justify-content: center;

}

/*=================================
Center Illustration
==================================*/

.services-image {

    position: relative;

    height: 720px;

    display: flex;

    align-items: center;

    justify-content: center;

}

/* Glow */

.glow-circle {

    position: absolute;

    width: 430px;

    height: 430px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(37, 99, 235, .15),
            transparent 70%);

    filter: blur(20px);

}

/* Image */

.center-graphic {

    position: relative;

    z-index: 5;

}

.center-graphic img {

    width: 380px;

    animation: floatImage 5s ease-in-out infinite;
    filter: drop-shadow(0 30px 40px rgba(37, 99, 235, .18));

}

@keyframes floatImage {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-15px);

    }

    100% {

        transform: translateY(0);

    }

}

.shape {

    position: absolute;

    border-radius: 50%;

    animation: move 7s linear infinite;

}

.shape1 {

    width: 18px;

    height: 18px;

    background: #2563eb;

    top: 18%;

    left: 35%;

}

.shape2 {

    width: 12px;

    height: 12px;

    background: #14b8a6;

    bottom: 22%;

    left: 38%;

}

.shape3 {

    width: 14px;

    height: 14px;

    background: #3b82f6;

    right: 34%;

    top: 35%;

}

.shape4 {

    width: 10px;

    height: 10px;

    background: #0ea5e9;

    right: 38%;

    bottom: 28%;

}

@keyframes move {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0);

    }

}

@media(max-width:991px) {

    .services-image {

        height: auto;

        margin: 60px 0;

    }

    .center-graphic img {

        max-width: 280px;

    }

    .service-column {

        margin-bottom: 40px;

    }

    .shape,

    .connector {

        display: none;

    }

}

/*==========================
Connectors
===========================*/

.connector {

    position: absolute;

    height: 2px;

    background: var(--primary-light);

}

.connector::after {

    content: "";

    position: absolute;

    left: -7px;

    top: -5px;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: var(--primary-light);

    box-shadow: 0 0 12px var(--primary-light);

    animation: pulse 2s infinite;

}

.connector-r::after {

    content: "";

    position: absolute;

    right: -7px;
    left: unset;

    top: -5px;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: #2563eb;

    box-shadow: 0 0 12px #3b82f6;

    animation: pulse 2s infinite;

}

@keyframes pulse {

    0% {

        transform: scale(.8);

        opacity: .5;

    }

    50% {

        transform: scale(1.3);

        opacity: 1;

    }

    100% {

        transform: scale(.8);

        opacity: .5;

    }

}

/* LEFT */

.connector-left {

    right: 50%;

    width: 150px;

}

.connector-left::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 40px;

    height: 40px;

    border-left: 2px dashed var(--primary-light);

    border-bottom: 2px dashed var(--primary-light);

    border-radius: 0 0 0 20px;

    transform: translate(-40px, -19px);

}

/* RIGHT */

.connector-right {

    left: 50%;

    width: 150px;

}

.connector-right::before {

    content: "";

    position: absolute;

    right: 0;

    top: 0;

    width: 40px;

    height: 40px;

    border-right: 2px dashed var(--secondary-dark);

    border-bottom: 2px dashed var(--secondary-dark);

    border-radius: 0 0 20px 0;

    transform: translate(40px, -19px);

}

.connector-right {

    background: var(--secondary-dark);

}

.connector-right::after {

    background: var(--secondary-dark);

    box-shadow: 0 0 12px #c2d24d;

}

/* Positions */

.connector-one {

    top: 137px;

}

.connector-two {

    top: 256px;

}

.connector-three {

    top: 390px;

}

.connector-four {

    top: 517px;

}

.connector-five {

    top: 639px;

}

.dot {

    animation: moveDot 3s linear infinite;

}

@keyframes floating {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0);

    }

}

/*==========================
How it Works
===========================*/

.how-work {

    padding: 90px 0;
    background: #fff;

}

.how-work .process-wrapper {

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

}

.how-work .process-item {

    width: 180px;
    text-align: center;
    position: relative;

}

.how-work .icon-box {

    width: 74px;
    height: 74px;
    border-radius: 50%;
    margin: auto;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

}

.how-work .icon-box i {

    font-size: 30px;

}

.how-work .step-no {

    position: absolute;

    width: 30px;
    height: 30px;

    left: -5px;
    bottom: -5px;

    border-radius: 50%;
    background: #0a9582;
    color: #fff;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 13px;
    font-weight: 700;

    border: 3px solid #fff;

}

.how-work .process-item h5 {

    margin-top: 22px;
    font-weight: 700;
    font-size: 18px;

}

.how-work .process-item p {

    font-size: 14px;
    color: var(--text-color);
    line-height: 24px;

}

.how-work .line {

    flex: 1;

    margin: 35px 0px 0;

    border-top: 2px dashed #d7d7d7;

}

/* Colors */

.how-work .primary-light {
    color: var(--primary-light);
}

.how-work .blue {
    color: #2563eb;
}

.how-work .green {
    color: #22c55e;
}

.how-work .orange {
    color: #f59e0b;
}

.how-work .purple {
    color: #9333ea;
}

/* Hover */

.how-work .process-item:hover {

    transform: translateY(-8px);
    transition: .35s;

}

.how-work .process-item:hover .icon-box {

    box-shadow: 0 20px 40px rgba(37, 99, 235, .18);

}

/* Mobile */

@media(max-width:991px) {

    .how-work .process-wrapper {

        flex-direction: column;
        align-items: center;

    }

    .how-work .line {

        width: 2px;
        height: 60px;
        border-top: none;
        border-left: 2px dashed #ddd;
        margin: 15px 0;

    }

    .how-work .process-item {

        width: 260px;

    }

}


/*========================================
Why + Features Section
========================================*/

.why-feature-section {

    /* padding:90px 0;
    background:#fff; */
    position: relative;
    padding: 90px 0;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    overflow: hidden;

}

.why-content h2 {

    font-size: 33px;
    font-weight: 700;
    margin-bottom: 35px;
    color: #1e293b;

}

.why-content ul {

    padding: 0;
    margin: 0;
    list-style: none;

}

.why-content li {

    display: flex;
    align-items: center;

    margin-bottom: 22px;

    color: #555;

    font-size: 17px;

    font-weight: 500;

}

.why-content li i {

    color: #2563eb;

    font-size: 18px;

    margin-right: 15px;

}

/*============================*/

.illustration-box {

    padding: 10px;

}

.illustration-box img {

    width: 100%;
    max-width: 360px;

    transition: .35s;

}

.illustration-box img:hover {

    transform: scale(1.03);

}

/* Divider */

.vertical-divider {

    width: 1px;
    height: 360px;

    background: #ececec;

}

/*============================*/

@media(max-width:991px) {

    .why-content {

        text-align: center;

        margin-bottom: 40px;

    }

    .why-content li {

        justify-content: center;

    }

    .vertical-divider {

        display: none;

    }

    .illustration-box {

        margin-bottom: 50px;

    }

}

/*==================================
Powerful Features
===================================*/

.features-content h2 {

    font-size: 42px;
    font-weight: 700;
    margin-bottom: 35px;

}

.feature-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 16px;

}

.feature-box {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 18px;

    border: 1px solid #edf0f5;

    border-radius: 14px;

    background: #fff;

    transition: .35s;

}

.feature-box:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 35px rgba(0, 0, 0, .07);

    border-color: #dce8ff;

}

.feature-icon {

    width: 48px;

    height: 48px;

    border-radius: 12px;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-shrink: 0;

    font-size: 20px;

}

.feature-icon i {

    color: #fff;

}

.feature-box h6 {

    margin: 0 0 6px;

    font-size: 16px;

    font-weight: 700;

}

.feature-box p {

    margin: 0;

    color: #666;

    font-size: 13px;

    line-height: 20px;

}

/* Colors */

.feature-icon.primary-light {

    /* background:#2563eb; */
    background: #f8fbff;
    border: 1px solid #dbeafe;
    color: var(--primary-light);

}

.feature-icon.blue {

    /* background:#2563eb; */
    background: #f8fbff;
    border: 1px solid #dbeafe;
    color: #2563eb;

}

.feature-icon.green {

    /* background:#22c55e; */
    background: #f3fff7;
    border: 1px solid #d8f5df;
    color: #16a34a;

}

.feature-icon.secondary-dark {

    /* background:#f59e0b; */
    background: #fff8ef;
    border: 1px solid var(--secondary-dark);
    color: var(--secondary-dark);

}

.feature-icon.orange {

    /* background:#f59e0b; */
    background: #fff8ef;
    border: 1px solid #fde3bb;
    color: #f59e0b;

}

/* Responsive */

@media(max-width:991px) {

    .features-content {

        margin-top: 50px;

    }

}

@media(max-width:576px) {

    .feature-grid {

        grid-template-columns: 1fr;

    }

}

/* .why-feature-section{
    position: relative;
    padding: 90px 0;
    background: linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
    overflow: hidden;
} */

.why-feature-section::before {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    background: #edf5ff;
    border-radius: 50%;
    filter: blur(90px);
    /* top:-180px;
    left:-180px; */
    top: -286px;
    left: -311px;
}

.why-feature-section::after {
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    background: #f5f9ff;
    border-radius: 50%;
    filter: blur(80px);
    bottom: -230px;
    right: -120px;
}

.why-feature-section .features-content .feature-grid {
    width: 125%;
    overflow: hidden;
    max-height: 325px;
    overflow-y: scroll;
    scrollbar-width: thin;
    /* Options: auto | thin */
    scrollbar-color: #888888 #f1f1f1;
    /* Format: thumb_color track_color */
    padding-right: 15px;
}

.feature-divider {
    width: 28px;
}

.why-content h2,
.features-content h2 {

    font-size: 33px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -1px;
    margin-bottom: 32px;

}

.why-content ul li {

    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 18px;

    color: var(--text-color);

    font-size: 16px;

    font-weight: 500;

}

.why-content ul li i {

    width: 24px;
    height: 24px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 50%;

    background: #eff6ff;

    color: var(--primary-light);

    font-size: 13px;
}

.illustration-box {

    position: relative;

    text-align: center;

}

.illustration-box::before {

    content: '';

    position: absolute;

    width: 260px;

    height: 260px;

    background: #eef5ff;

    border-radius: 50%;

    filter: blur(70px);

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    z-index: 0;

}

.illustration-box img {

    position: relative;

    z-index: 2;

    max-width: 330px;

    transition: .35s;

}

.illustration-box:hover img {

    transform: translateY(-8px);

}

.vertical-divider {

    width: 1px;

    height: 360px;

    background: linear-gradient(transparent,

            #ececec,

            transparent);

}

.feature-box {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 18px;

    border: 1px solid #edf0f5;

    border-radius: 14px;

    background: #fff;

    transition: .3s;

    min-height: 96px;

}

.feature-box:hover {

    transform: translateY(-4px);

    border-color: #dbeafe;

    box-shadow:

        0 12px 28px rgba(37, 99, 235, .08);

}

.feature-icon {

    width: 44px;

    height: 44px;

    border-radius: 12px;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-shrink: 0;

    font-size: 18px;

}

.feature-icon i {

    color: inherit;

}

.feature-icon.blue {

    background: #f5f9ff;

    border: 1px solid #dbeafe;

    color: #2563eb;

}

.feature-icon.green {

    background: #f2fdf6;

    border: 1px solid #dcfce7;

    color: #22c55e;

}

.feature-icon.orange {

    background: #fff8ee;

    border: 1px solid #fde7bf;

    color: #f59e0b;

}

.feature-box h6 {

    font-size: 15px;

    font-weight: 700;

    margin-bottom: 4px;

    color: #111827;

}

.feature-box p {

    font-size: 13px;

    color: #6b7280;

    line-height: 20px;

}

.feature-box {

    transition:

        transform .3s,

        box-shadow .3s,

        border-color .3s;

}

@keyframes floating {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

    100% {

        transform: translateY(0);

    }

}

.illustration-box img {

    animation: floating 4s ease-in-out infinite;

}

/*==========================
FAQ
===========================*/

.faq-section {

    padding: 90px 0;

    background: #fff;

}

.faq-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 40px;

}

.faq-header h2 {

    font-weight: 700;

}

.faq-header a {

    text-decoration: none;
    color: var(--secondary-dark);

}

.custom-faq .accordion-item {

    border: 1px solid #ececec;

    border-radius: 14px;

    overflow: hidden;

    margin-bottom: 16px;

}

.custom-faq .accordion-button {

    background: #fff;

    font-weight: 600;

    padding: 20px;

    box-shadow: none;

}

.custom-faq .accordion-button:not(.collapsed) {

    background: #fff;

    color: var(--primary-light);

}

.custom-faq .accordion-button::after {

    display: none;

}

.custom-faq .accordion-button::before {

    content: "+";

    /* margin-left:auto; */
    margin-right: 15px;

    font-size: 24px;

    font-weight: 600;

}

.custom-faq .accordion-button:not(.collapsed)::before {

    content: "−";

}

.custom-faq .accordion-body {

    padding: 20px;

    color: #666;

}

/*==========================
CTA
===========================*/

/* .cta-section-home {

    padding-bottom: 90px;

}

.cta-section-home .cta-box {

    background: linear-gradient(90deg, var(--primary-light), var(--secondary-color));

    border-radius: 24px;

    padding: 20px 45px;

    color: #fff;

    overflow: hidden;

}

.cta-section-home .cta-box h2 {

    font-size: 33px;

    font-weight: 700;

}

.cta-section-home .cta-box p {

    color: #d7d9e3;

    margin-top: 15px;

}

.cta-section-home .cta-box .btn {

    padding: 15px 23px;

    border-radius: 12px;

}

.cta-section-home .cta-box img {

    max-width: 260px;

} */

/* Mobile */

@media(max-width:991px) {

    .faq-header {

        flex-direction: column;

        gap: 15px;

        text-align: center;

    }

    /* .cta-section-home .cta-box {

        text-align: center;

        padding: 40px 25px;

    }

    .cta-section-home .cta-box img {

        margin-top: 35px;

    } */

}


/*==========================
Footer
===========================*/

.footer {

    background: var(--primary-dark);

    color: #fff;

    padding: 70px 0 25px;

}

.footer-logo img {

    /* height:42px; */
    max-width: 150px;

    margin-bottom: 25px;

}

.footer-text {

    color: #c8d0e4;

    line-height: 30px;

    margin-bottom: 30px;

}

.footer h5 {

    margin-bottom: 25px;

    font-size: 20px;

    font-weight: 700;

}

.footer ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

.footer ul li {

    margin-bottom: 16px;

}

.footer ul li a {

    color: #c8d0e4;

    text-decoration: none;

    transition: .3s;

}

.footer ul li a:hover {

    color: #fff;

    padding-left: 6px;

}

.social-links {

    display: flex;

    gap: 15px;

}

.social-links a {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .08);

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    transition: .35s;

}

.social-links a:hover {

    background: #2563eb;

    transform: translateY(-5px);

}

.contact-info li {

    display: flex;

    gap: 12px;

    color: #c8d0e4;

}

.contact-info i {

    color: var(--secondary-color);

    margin-top: 5px;

}

.footer-bottom {

    border-top: 1px solid rgba(255, 255, 255, .08);

    margin-top: 55px;

    padding-top: 25px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.footer-bottom p {

    margin: 0;

    color: #c8d0e4;

}

.footer-bottom a {

    color: #c8d0e4;

    margin-left: 30px;

    text-decoration: none;

}

.footer-bottom a:hover {

    color: #fff;

}

/* Responsive */

@media(max-width:991px) {

    .footer {

        text-align: center;

    }

    .social-links {

        justify-content: center;

    }

    .contact-info li {

        justify-content: center;

    }

    .footer-bottom {

        flex-direction: column;

        gap: 15px;

    }

    .footer-bottom a {

        margin: 0 10px;

    }

}

/* -------------------About us start------------------------------------ */

.about-hero {
    background-image: url('../images/home1/about-hero.png');
    padding: 50px 0;
    background-size: cover;
    background-position: center;
    color: white;
}

.about-hero .about-content {
    max-width: 50%;
}

.about-hero .about-content h1 {
    margin-top: 30px;
    font-size: 35px;
    position: relative;
    margin-bottom: 35px;
    font-weight: 700;
}

.about-hero .about-content h1::before {
    position: absolute;
    content: '';
    width: 60px;
    height: 2px;
    background-color: var(--secondary-color);
    bottom: -15px;
    left: 0;
}

.about-hero .about-content .secondary-button {
    margin-top: 15px;
}

/* hero section end */

/* our story start */

/*==========================================
    Our Story
==========================================*/

.our-story {

    padding: 100px 0;

    background: #ffffff;

}

.our-story .story-content {

    max-width: 430px;

}

.our-story .section-tag {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: var(--primary-color);

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 22px;

}

.our-story .section-tag::after {

    content: "";

    width: 55px;

    height: 3px;

    background: var(--secondary-color);

    border-radius: 50px;

}

.our-story .story-content h2 {

    font-size: 35px;

    font-weight: 800;

    line-height: 1.15;

    color: var(--primary-color);

    margin-bottom: 28px;

}

.our-story .story-content p {

    color: var(--text-color);

    font-size: 16px;

    line-height: 1.9;

    margin-bottom: 22px;

}

.our-story .btn-story {

    margin-top: 15px;

    display: inline-flex;

    align-items: center;

    padding: 12px 20px;

    background: var(--primary-color);

    color: #fff;

    border-radius: 10px;

    font-weight: 600;

    transition: .35s;

}

.our-story .btn-story:hover {

    background: var(--secondary-color);

    color: var(--primary-color);

    transform: translateY(-3px);

}

.our-story .story-card {

    background: #fff;

    border-radius: 22px;

    padding: 30px 15px;

    text-align: center;

    box-shadow:

        0 10px 40px rgba(0, 0, 0, .08);

    transition: .35s;

    height: 100%;

}

.our-story .story-card:hover {

    transform: translateY(-10px);

    box-shadow:

        0 25px 60px rgba(17, 74, 67, .15);

}

.our-story .story-icon {

    width: 65px;

    height: 65px;

    margin: auto;

    border-radius: 50%;

    background: #EDF4C7;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 28px;

}

.our-story .story-icon i {

    font-size: 28px;

    color: var(--primary-color);

}

.our-story .story-card h3 {

    font-size: 30px;

    font-weight: 700;

    color: var(--primary-color);

    margin-bottom: 12px;

}

.our-story .story-card h5 {

    font-size: 14px;

    color: var(--text-color);

    font-weight: 500;

    margin-bottom: 28px;

}

.our-story .story-card span {

    display: block;

    width: 45px;

    height: 4px;

    background: var(--primary-color);

    border-radius: 50px;

    margin: auto;

}

@media(max-width:991px) {

    .our-story .story-content {

        max-width: 100%;

        text-align: center;

        margin-bottom: 30px;

    }

    .our-story .section-tag {

        justify-content: center;

    }

    .our-story .story-content h2 {

        font-size: 40px;

    }

    .our-story .story-card {

        padding: 35px 20px;

    }

    .our-story .story-card h3 {

        font-size: 44px;

    }

    .our-story .story-card h5 {

        font-size: 18px;

    }

}

/*==========================================
        Our Values
==========================================*/

.our-values {

    padding: 50px 0;
    position: relative;
    /* background:#fffff5; */
    background: white;
    overflow: hidden;
}

.our-values::before {

    content: "";

    position: absolute;

    inset: 0;

    /* background-image:radial-gradient(rgba(17,74,67,.04) 1px,transparent 1px); */
    background-image: radial-gradient(rgb(17 74 67 / 45%) 1px, #00000008 1px);

    background-size: 28px 28px;

    opacity: .5;

    pointer-events: none;

}

.our-values .section-heading {

    max-width: 700px;

    margin: auto;

}

.our-values .section-heading h2 {

    font-size: 35px;

    font-weight: 800;

    color: var(--primary-color);

    margin-top: 18px;


}

.our-values .section-tag {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: var(--primary-color);

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}

.our-values .section-tag::after {

    content: "";

    width: 55px;

    height: 3px;

    background: var(--secondary-color);

    border-radius: 50px;

}

.our-values .value-box {

    text-align: center;

    padding: 25px 15px;

    position: relative;

    height: 100%;

    transition: .45s;

}

.our-values .value-box::after {

    content: "";

    position: absolute;

    right: 0;

    top: 95px;

    width: 1px;

    height: 160px;

    /* background: #E8E8E8; */
    background: linear-gradient(transparent, #E5E5E5, transparent);
}

.our-values .border-0::after {

    display: none;

}

.our-values .value-icon {

    width: 65px;

    height: 65px;

    margin: auto;

    border-radius: 50%;

    /* background:var(--primary-color); */
    background: linear-gradient(135deg, #114A43, #0B3732);

    box-shadow: 0 15px 35px rgba(17, 74, 67, .20);

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 30px;

    transition: .4s;

}

.our-values .value-icon::before {

    content: "";

    position: absolute;

    width: 120px;

    height: 120px;

    border-radius: 50%;

    background:

        rgba(216, 226, 140, .18);

    filter: blur(18px);

    z-index: -1;

}

.our-values .value-icon i {

    font-size: 33px;

    color: #fff;

    transition: .35s;

}

.our-values .value-box h4 {

    font-size: 21px;

    font-weight: 700;

    color: var(--primary-color);

    margin-bottom: 8px;

}

.our-values .value-box p {

    color: var(--text-color);

    font-size: 16px;

    line-height: 1.8;

    margin: 0;

}

.our-values .value-box::before {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 0;

    width: 0;

    height: 4px;

    background: #D8E28C;

    transition: .4s;

    transform: translateX(-50%);

}

.our-values .value-box:hover::before {

    width: 80px;

}

.our-values .value-box:hover {

    transform: translateY(-12px);

}

.our-values .value-box:hover .value-icon {

    /* background:var(--secondary-color);

    transform:rotate(8deg) scale(1.08); */
    transform: scale(1.08) rotate(-6deg);

    background: linear-gradient(135deg, #D8E28C, #C9D96B);

}


.our-values .value-box:hover .value-icon i {

    color: var(--primary-color);

}

@media(max-width:991px) {

    .our-values .value-box {

        margin-bottom: 50px;

    }

    .our-values .value-box::after {

        display: none;

    }

    .our-values .section-heading h2 {

        font-size: 40px;

    }

    .our-values .value-box h4 {

        font-size: 28px;

    }

    .our-values .value-box p {

        font-size: 17px;

    }

}

/*==========================================
        Mission & Vision
==========================================*/

.mission-vision .mission-vision {

    padding: 100px 0;

    background: #fff;
    position: relative;

    overflow: hidden;

}

.mission-vision .mission-vision::before {

    content: "";

    position: absolute;

    right: -120px;

    top: -120px;

    width: 350px;

    height: 350px;

    border-radius: 50%;

    background:

        rgba(216, 226, 140, .12);

    filter: blur(80px);

}

.mission-vision .mission-vision::after {
    content: "";
    position: absolute;
    left: -120px;
    top: -120px;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    /* background: rgba(216, 226, 140, .12); */
    background: rgb(55 129 119 / 8%);
    filter: blur(80px);
}

.mission-vision .mv-card {

    background: #F8FAF4;

    border: 1px solid rgba(17, 74, 67, .08);

    border-radius: 24px;

    padding: 30px;

    height: 100%;

    transition: .35s;

    box-shadow:

        0 12px 35px rgba(0, 0, 0, .05);
    position: relative;

    overflow: hidden;

}

.mission-vision .mv-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 5px;

    background:

        linear-gradient(90deg,
            #114A43,
            #D8E28C);

}

.mission-vision .mv-card:hover {

    transform: translateY(-8px);

    box-shadow:

        0 20px 50px rgba(17, 74, 67, .12);

}

.mission-vision .mv-icon {

    width: 100px;

    height: 100px;

    border-radius: 50%;

    background: linear-gradient(135deg, #114A43, #0B3732);

    display: flex;

    justify-content: center;

    align-items: center;

    margin: auto;

    position: relative;

}

.mission-vision .mv-icon::before {

    content: "";

    position: absolute;

    width: 150px;

    height: 150px;

    border-radius: 50%;

    background:

        rgba(216, 226, 140, .20);

    filter: blur(25px);

    z-index: -1;

}

.mission-vision .mv-icon i {

    font-size: 58px;

    color: #fff;

}

.mission-vision .mv-content {

    border-left: 2px solid rgba(17, 74, 67, .15);

    padding-left: 35px;

}

.mission-vision .mv-content span {

    display: block;

    color: var(--primary-color);

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 15px;

}

.mission-vision .mv-content h3 {

    font-size: 22px;

    font-weight: 700;

    color: var(--primary-color);

    line-height: 1.3;

    margin-bottom: 18px;

}

.mission-vision .mv-content p {

    font-size: 18px;

    line-height: 1.9;

    color: var(--text-color);

    margin: 0;

}

.mission-vision .mv-card:hover .mv-icon {

    background:

        linear-gradient(135deg,
            #D8E28C,
            #C9D96B);

}

.mission-vision .mv-card:hover .mv-icon i {

    color: #114A43;

}

@media(max-width:991px) {

    .mission-vision .mv-card {

        padding: 35px;

    }

    .mission-vision .mv-icon {

        margin-bottom: 35px;

        width: 100px;

        height: 100px;

    }

    .mission-vision .mv-icon i {

        font-size: 46px;

    }

    .mission-vision .mv-content {

        border-left: none;

        padding-left: 0;

        text-align: center;

    }

    .mission-vision .mv-content h3 {

        font-size: 28px;

    }

    .mission-vision .mv-content p {

        font-size: 17px;

    }

}

/*==========================================
        CTA Section
==========================================*/

.cta-section {

    padding: 80px 0;

    background: #fff;


}

.cta-section .cta-box {

    position: relative;

    overflow: hidden;

    background-image: linear-gradient(135deg, #0B3732, #114A43);

    border-radius: 24px;

    padding: 55px 60px;

    box-shadow:

        0 20px 50px rgba(17, 74, 67, .15);

}

.cta-section .cta-box::after {
    content: "";
    position: absolute;
    right: 0;
    background-image: url(../images/home1/background-cta.png);
    width: 100%;
    max-width: 450px;
    height: 100%;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: initial;
    z-index: 0;

}

.cta-section .cta-box::before {

    content: "";

    position: absolute;

    top: -100px;

    left: -100px;

    width: 280px;

    height: 280px;

    border-radius: 50%;

    background: rgba(216, 226, 140, .08);

    filter: blur(60px);

}

.cta-section .cta-content {

    position: relative;

    z-index: 2;

}

.cta-section .cta-content h2 {

    font-size: 32px;

    font-weight: 800;

    color: #fff;

    line-height: 1.2;

    margin-bottom: 15px;

}

.cta-section .cta-content p {

    font-size: 16px;

    color: rgba(255, 255, 255, .85);

    margin: 0;

}

.cta-section .cta-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 25px;

    background: var(--secondary-color);

    color: var(--primary-color);

    border-radius: 14px;

    font-size: 18px;

    font-weight: 700;

    transition: .35s;

    min-width: 150px;
    position: relative;
    z-index: 1;

}

.cta-section .cta-btn:hover {

    background: #fff;

    color: var(--primary-color);

    transform: translateY(-4px);

    box-shadow:

        0 15px 35px rgba(0, 0, 0, .15);

}

.cta-section .cta-graphic {

    position: relative;

    text-align: right;

    z-index: 2;

}

.cta-section .cta-graphic img {

    width: 100%;

    max-width: 220px;

    opacity: .95;

}

/*------------------------------------- Service page -------------------------- */

/*=====================================
    Service Banner
======================================*/

.service-banner {

    position: relative;

    padding: 90px 0 85px;

    background: url('../images/home1/digital-transformation.jpg') center center/cover no-repeat;

    overflow: hidden;

}

.asset-manager-banner {
    background: url('../images/home1/asset-manager-hero.jpg') center center/cover no-repeat;
}
.wealth-manager-banner {
    background: url('../images/home1/wealth-manager-hero.jpg') center center/cover no-repeat;
}

.rpa-banner {
    background: url('../images/home1/rpa-hero.jpg') center center/cover no-repeat;
}

.fintech-banner {
    background: url('../images/home1/fintech-banner.jpg') center center/cover no-repeat;
}

.custom-software-solutions {
    background: url('../images/home1/custom-software-solutions.jpg') center center/cover no-repeat;
}

.cloud-solutions {
    background: url('../images/home1/cloud-solutions.jpg') center center/cover no-repeat;
}

.data-science-solutions {
    background: url('../images/home1/data-science-solutions.jpg') center center/cover no-repeat;
}

.investment-operations-outsourcing-banner{
    background: url('../images/home1/investment-operations-outsourcing.jpg') center center/cover no-repeat;
}

.reconciliation-services-banner{
    background: url('../images/home1/reconciliation-services.jpg') center center/cover no-repeat;
}

.reconciliation-services-banner{
    background: url('../images/home1/reconciliation-services.jpg') center center/cover no-repeat;
}
.portfolio-and-fund-accounting-banner{
    background: url('../images/home1/portfolio-and-fund-accounting.jpg') center center/cover no-repeat;
}
.trade-sattlement-banner{
    background: url('../images/home1/trade-sattlement.jpg') center center/cover no-repeat;
}
.investor-relations-and-client-administration-banner{
    background: url('../images/home1/investor-relations-and-client-administration.jpg') center center/cover no-repeat;
}
.compliance-service-banner{
    background: url('../images/home1/compliance-service.jpg') center center/cover no-repeat;
}
.emerging-manager-banner{
    background: url('../images/home1/emerging-manager-banner.jpg') center center/cover no-repeat;
}

/* Dark Overlay */

.service-banner::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(90deg,
            rgba(6, 34, 30, .90) 0%,
            rgba(10, 48, 42, .75) 35%,
            rgba(10, 48, 42, .35) 100%);

}

/* Content */

.service-banner .service-banner-content {

    position: relative;

    z-index: 2;

}

/* Breadcrumb */

.service-banner .breadcrumb {

    margin-bottom: 25px;

    background: none;

    padding: 0;

}

.service-banner .breadcrumb-item {

    color: rgba(255, 255, 255, .85);

    font-size: 15px;

}

.service-banner .breadcrumb-item+.breadcrumb-item::before {

    color: rgba(255, 255, 255, .6);

}

.service-banner .breadcrumb-item a {

    color: rgba(255, 255, 255, .85);

    text-decoration: none;

    transition: .3s;

}

.service-banner .breadcrumb-item a:hover {

    color: var(--secondary-color);

}

.service-banner .breadcrumb-item.active {

    color: #fff;

}

/* Heading */

.service-banner h1 {

    font-size: 35px;

    font-weight: 800;

    color: #fff;

    margin-bottom: 22px;

    line-height: 1.15;

}

/* Accent Line */

.service-banner .banner-line {

    display: block;

    width: 95px;

    height: 5px;

    border-radius: 50px;

    background: var(--secondary-color);

}

@media(max-width:991px) {

    .service-banner {

        padding: 70px 0;

    }

    .service-banner h1 {

        font-size: 42px;

    }

}

@media(max-width:576px) {

    .service-banner {

        padding: 60px 0;

    }

    .service-banner h1 {

        font-size: 34px;

    }

    .service-banner .breadcrumb-item {

        font-size: 14px;

    }

    .banner-line {

        width: 70px;

    }

}

/*=====================================
        Service Intro
======================================*/

.service-intro {

    padding: 90px 0;

}

.service-intro .section-tag {

    display: inline-block;

    color: var(--primary-color);

    font-size: 14px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 18px;

}

.service-intro .section-tag::after {

    content: "";

    display: block;

    width: 60px;

    height: 3px;

    margin-top: 10px;

    background: var(--secondary-color);

}

.service-intro .service-content h2 {

    font-size: 35px;

    font-weight: 800;

    color: var(--primary-color);

    /* margin-bottom: 28px; */

}

.service-intro .service-content p {

    color: var(--text-color);

    font-size: 18px;

    line-height: 1.9;

    margin-bottom: 20px;

}

/* Highlight Box */

.service-intro .highlight-box {

    display: flex;

    align-items: center;

    gap: 18px;

    background: #fff;

    padding: 22px;

    border-radius: 16px;

    border: 1px solid #E8ECEB;

    transition: .3s;

    height: 100%;

}

.service-intro .highlight-box:hover {

    transform: translateY(-5px);

    border-color: var(--secondary-color);

    box-shadow: 0 18px 40px rgba(17, 74, 67, .08);

}

.service-intro .highlight-box i {

    width: 58px;

    min-width: 58px;

    height: 58px;

    border-radius: 14px;

    background: #F3F8F5;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary-color);

    font-size: 24px;

}

.service-intro .highlight-box h6 {

    margin: 0;

    font-weight: 700;

    color: var(--primary-color);

}

.service-intro .highlight-box small {

    color: #777;

    font-size: 14px;

}


/*====================================
        sidebar
=====================================*/
.service-sidebar {
    position: sticky;
    top: 120px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.service-sidebar .sidebar-widget {

    background: #fff;

    border-radius: 22px;

    padding: 28px;

    border: 1px solid #ECECEC;

    box-shadow:

        0 15px 40px rgba(0, 0, 0, .05);

}

.service-sidebar .widget-title {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 28px;

}

.service-sidebar .widget-title i {
    font-size: 22px;
    color: var(--primary-light);
}

.service-sidebar .widget-title h4 {

    margin: 0;

    font-size: 24px;

    font-weight: 700;
    color: var(--primary-light);

}

.service-sidebar .service-list {

    list-style: none;

    padding: 0;

    margin: 0;

}

.service-sidebar .service-list li {

    margin-bottom: 10px;

}

.service-sidebar .service-list a {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 16px 18px;

    border-radius: 12px;

    text-decoration: none;

    transition: .35s;

    color: var(--text-color);

}

.service-sidebar .service-list a span {

    width: 85%;

    line-height: 1.5;

}

.service-sidebar .service-list a:hover {

    background: #F5FAF8;

    color: #114A43;

}

.service-sidebar .service-list a:hover i {

    transform: translateX(5px);

}

.service-sidebar .service-list .active a {

    background: #114A43;

    color: #fff;

    border-left: 4px solid #D8E28C;

}

.service-sidebar .service-list .active i {

    color: #D8E28C;

}

.service-sidebar .sidebar-contact {

    margin-top: 30px;

    padding: 35px;

    background: linear-gradient(135deg,
            #114A43,
            #0A3933);

    border-radius: 22px;

    text-align: center;

    color: #fff;

}

.service-sidebar .contact-circle {

    width: 90px;

    height: 90px;

    margin: auto;

    background: #D8E28C;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

}

.service-sidebar .contact-circle i {

    font-size: 36px;

    color: #114A43;

}

.service-sidebar .sidebar-download {

    margin-top: 30px;

    padding: 30px;

    background: #F8FAF8;

    border-radius: 22px;

    text-align: center;

    border: 1px solid #ECECEC;

}

.service-sidebar .sidebar-download i {

    font-size: 40px;

    color: #114A43;

    margin-bottom: 18px;

}

.service-sidebar .sidebar-download a {

    display: inline-block;

    margin-top: 15px;

    font-weight: 700;

    text-decoration: none;

    color: #114A43;

}

/*====================================
        Timeline
=====================================*/

.strategy-section {

    padding: 20px 0;

}

.strategy-section .section-heading span {
    display: inline-block;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

.strategy-section .section-heading span::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    margin-top: 10px;
    background: var(--secondary-color);
}

.strategy-section .section-heading h2 {
    font-size: 35px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 28px;
}

.strategy-section .timeline-wrapper {

    position: relative;

    margin-top: 50px;

}

.strategy-section .timeline-item {

    display: flex;

    gap: 35px;

    margin-bottom: 20px;

}

.strategy-section .timeline-number {

    min-width: 70px;

    height: 70px;

    border-radius: 50%;

    background: #114A43;

    color: #fff;

    font-size: 24px;

    font-weight: 700;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

}

.strategy-section .timeline-number::after {

    content: "";

    position: absolute;

    top: 70px;

    left: 50%;

    transform: translateX(-50%);

    width: 2px;

    height: 90px;

    background: #D8E28C;

}

.strategy-section .timeline-item:last-child .timeline-number::after {

    display: none;

}

.strategy-section .timeline-content {

    flex: 1;

    background: #fff;

    border: 1px solid #E8ECEB;

    border-radius: 18px;

    padding: 30px;

    display: flex;

    gap: 25px;

    transition: .35s;

}

.strategy-section .timeline-content:hover {

    transform: translateX(8px);

    border-color: #D8E28C;

    box-shadow: 0 18px 45px rgba(17, 74, 67, .08);

}

.strategy-section .timeline-icon {

    width: 70px;

    height: 70px;

    border-radius: 16px;

    background: #F3F8F5;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}

.strategy-section .timeline-icon i {

    font-size: 28px;

    color: #114A43;

}

.strategy-section .timeline-content h4 {

    font-size: 24px;

    color: #114A43;

    font-weight: 700;

    margin-bottom: 12px;

}

.strategy-section .timeline-content p {

    margin: 0;

    color: #666;

    line-height: 1.8;

}

@media(max-width:768px) {

    .strategy-section .timeline-item {

        flex-direction: column;

        gap: 20px;

    }

    .strategy-section .timeline-number {

        margin: auto;

    }

    .strategy-section .timeline-number::after {

        display: none;

    }

    .strategy-section .timeline-content {

        flex-direction: column;

        text-align: center;

    }

    .strategy-section .timeline-icon {

        margin: auto;

    }

}

/*=====================================
        Outcomes
======================================*/

.outcomes-section {

    position: relative;

    padding: 50px 20px;

    background: url("../images/service-outcomes.jpg") center/cover no-repeat;

    overflow: hidden;
    border-radius: 10px;

}

.outcomes-section .overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(rgba(5, 28, 24, .88),

            rgba(5, 28, 24, .82));

}

.outcomes-section .container {

    position: relative;

    z-index: 2;

}

/* Heading */

.outcomes-section .section-heading span {

    color: #D8E28C;

    font-weight: 700;

    letter-spacing: 1px;

}

.outcomes-section h2 {

    color: #fff;

    font-size: 35px;

    margin: 15px 0;

    font-weight: 800;

}

.outcomes-section p {

    color: rgba(255, 255, 255, .8);

}

/* Card */

.outcomes-section .outcome-card {

    background: rgba(255, 255, 255, .08);

    backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, .12);

    border-radius: 22px;

    padding: 25px;

    transition: .35s;

    height: 100%;

}

.outcomes-section .outcome-card:hover {

    transform: translateY(-8px);

    border-color: #D8E28C;

}

/* Icon */

.outcomes-section .outcome-icon {

    width: 60px;

    height: 60px;

    border-radius: 18px;

    background: #D8E28C;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

}

.outcomes-section .outcome-icon i {

    color: #114A43;

    font-size: 30px;

}

/* Text */

.outcomes-section .outcome-card h4 {

    color: #fff;

    font-size: 22px;

    margin-bottom: 15px;

    font-weight: 700;

}

.outcomes-section .outcome-card p {

    margin: 0;

    color: rgba(255, 255, 255, .82);

    line-height: 1.9;

}

/*=====================================
        CTA
======================================*/

.service-cta {

    padding: 100px 0;

    background: #fff;

}

.cta-wrapper {

    background: linear-gradient(135deg,
            #114A43,
            #0C3933);

    border-radius: 28px;

    padding: 70px;

    position: relative;

    overflow: hidden;

}

.cta-wrapper::before {

    content: "";

    position: absolute;

    right: -80px;

    top: -80px;

    width: 280px;

    height: 280px;

    border-radius: 50%;

    background: rgba(216, 226, 140, .08);

    filter: blur(70px);

}

.cta-wrapper::after {

    content: "";

    position: absolute;

    bottom: -100px;

    left: -80px;

    width: 250px;

    height: 250px;

    border-radius: 50%;

    background: rgba(216, 226, 140, .06);

    filter: blur(80px);

}

.cta-wrapper span {

    display: inline-block;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1px;

    color: #D8E28C;

    margin-bottom: 18px;

}

.cta-wrapper h2 {

    font-size: 48px;

    font-weight: 800;

    color: #fff;

    line-height: 1.2;

    margin-bottom: 20px;

}

.cta-wrapper p {

    font-size: 18px;

    line-height: 1.9;

    color: rgba(255, 255, 255, .82);

    max-width: 650px;

    margin: 0;

}

.cta-btn {

    padding: 18px 38px;

    background: #D8E28C;

    color: #114A43;

    font-weight: 700;

    border-radius: 12px;

    font-size: 17px;

}

.cta-btn:hover {

    background: #fff;

    color: #114A43;

}

@media(max-width:991px) {

    .cta-wrapper {

        padding: 45px 35px;

        text-align: center;

    }

    .cta-wrapper h2 {

        font-size: 34px;

    }

    .cta-btn {

        margin-top: 35px;

    }

}

/*=====================================
        FAQ
======================================*/

.service-faq {

    padding: 0 0 60px 0;

    /* background: #F8FAF8; */

}

.service-faq .section-heading span {
    display: inline-block;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

.service-faq .section-heading span::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    margin-top: 10px;
    background: var(--secondary-color);
}

.service-faq .section-heading h2 {
    font-size: 35px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 28px;
}

.service-faq .faq-wrapper {

    /* max-width: 900px; */

    margin: auto;

}

.service-faq .accordion-item {

    border: none;

    border-radius: 18px !important;

    overflow: hidden;

    margin-bottom: 20px;

    box-shadow:

        0 10px 30px rgba(0, 0, 0, .05);

}

.service-faq .accordion-button {

    padding: 24px 30px;

    font-size: 19px;

    font-weight: 600;

    color: #114A43;

    background: #fff;

    box-shadow: none;

}

.service-faq .accordion-button:not(.collapsed) {

    background: #114A43;

    color: #fff;

}

.service-faq .accordion-button:focus {

    box-shadow: none;

}

.service-faq .accordion-body {

    padding: 28px 30px;

    color: #666;

    line-height: 1.9;

    font-size: 17px;

}

.service-faq .accordion-button::after {

    filter: brightness(0);

}

.service-faq .accordion-button:not(.collapsed)::after {

    filter: brightness(100);

}

@media(max-width:768px) {

    .service-faq .service-faq {

        padding: 70px 0;

    }

    .service-faq .accordion-button {

        font-size: 17px;

        padding: 20px;

    }

    .service-faq .accordion-body {

        padding: 20px;

    }

}

/* -------- Service page end ------------- */


/* -------- Who we serve start */
.we-serve-intro .we-serve-content h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    margin-top: 10px;
    background: var(--secondary-color);
}

/*==================================
    Institution Features
==================================*/

.we-serve-intro .institution-features {

    margin-top: 30px;

}

.we-serve-intro .feature-item {

    display: flex;

    align-items: flex-start;

    gap: 22px;

    padding: 15px 0;

    border-bottom: 1px solid #ECECEC;

    transition: .3s;

}

.we-serve-intro .feature-item:last-child {

    border-bottom: none;

}

.we-serve-intro .feature-item:hover {

    padding-left: 12px;

}

.we-serve-intro .feature-icon {

    width: 62px;

    height: 62px;

    min-width: 62px;

    border-radius: 50%;

    background: #F2F7F3;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: .3s;

}

.we-serve-intro .feature-icon i {

    font-size: 26px;

    color: var(--primary-color);

}

.we-serve-intro .feature-item:hover .feature-icon {

    background: var(--primary-color);

}

.we-serve-intro .feature-item:hover .feature-icon i {

    color: #fff;

}

.we-serve-intro .feature-text h5 {

    font-size: 22px;

    font-weight: 700;

    color: var(--primary-color);

    margin-bottom: 8px;

}

.we-serve-intro .feature-text p {

    margin: 0;

    font-size: 17px;

    color: #666;

    line-height: 1.8;

}

.we-serve-intro .feature-item {

    position: relative;

    border-radius: 12px;

}

.we-serve-intro .feature-item::before {

    content: "";

    position: absolute;

    left: -20px;

    top: 15px;

    width: 4px;

    height: 0;

    background: var(--secondary-color);

    border-radius: 10px;

    transition: .35s;

}

.we-serve-intro .feature-item:hover {

    background: #fff;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);

}

.we-serve-intro .feature-item:hover::before {

    height: 65%;

}

/* who we serve end  */

/* -----------blog page start----------- */
/*=================================
        BLOG HERO
=================================*/

.blog-hero {

    position: relative;

    min-height: 375px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: url("../images/home1/blog-banner.jpg") center center / cover no-repeat;

}

/* Dark Overlay */

.blog-hero .blog-overlay {

    position: absolute;

    inset: 0;

    /* background:linear-gradient(
        90deg,
        rgba(0,0,0,.82) 0%,
        rgba(0,0,0,.65) 40%,
        rgba(0,0,0,.25) 100%
    ); */
    /* background: linear-gradient(90deg,
            rgba(7, 28, 25, .92),
            rgba(7, 28, 25, .70),
            rgba(7, 28, 25, .25)); */
    background: linear-gradient(90deg, rgb(22 56 51 / 92%), rgba(7, 28, 25, .70), rgba(7, 28, 25, .25));

}

/* Content */

.blog-hero .blog-hero-content {

    position: relative;

    z-index: 2;

    max-width: 520px;

}

/* Green Line */

.blog-hero .section-tag {

    display: block;

    width: 42px;

    height: 4px;

    border-radius: 30px;

    background: var(--secondary-color);

    margin-bottom: 28px;

}

.blog-hero .section-tag.bottom {

    margin-top: 32px;

}

/* Heading */

.blog-hero h1 {

    font-size: 38px;

    font-weight: 800;

    color: #fff;

    margin-bottom: 25px;

    line-height: 1.1;
    text-shadow: 0 0 30px rgba(216, 226, 140, .08);

}

/* Text */

.blog-hero p {

    font-size: 18px;

    color: rgba(255, 255, 255, .88);

    line-height: 1.8;

    margin: 0;

}

@media(max-width:991px) {

    .blog-hero {

        min-height: 340px;

        padding: 80px 0;

    }

    .blog-hero h1 {

        font-size: 52px;

    }

    .blog-hero p {

        font-size: 18px;

    }

}

@media(max-width:767px) {

    .blog-hero {

        min-height: 280px;

        padding: 60px 0;

    }

    .blog-hero h1 {

        font-size: 38px;

    }

    .blog-hero p {

        font-size: 16px;

        line-height: 1.7;

    }

    .blog-hero .section-tag {

        width: 32px;

        margin-bottom: 20px;

    }

    .blog-hero .section-tag.bottom {

        margin-top: 22px;

    }

}


/*  */

/*=====================================
        BLOG LISTING
======================================*/

.blog-listing {

    background: #fff;

    padding: 90px 0;

}

.blog-listing .blog-sidebar {

    position: sticky;

    top: 120px;

}

.blog-listing .blog-content {

    padding-left: 15px;

}

.blog-listing .blog-breadcrumb .breadcrumb {

    margin: 0;

    background: transparent;

    padding: 0;

}

.blog-listing .blog-breadcrumb .breadcrumb-item {

    font-size: 15px;

}

.blog-listing .blog-breadcrumb .breadcrumb-item a {

    color: #777;

    text-decoration: none;

}

.blog-listing .blog-breadcrumb .breadcrumb-item.active {

    color: var(--primary-color);

    font-weight: 600;

}

/*===================================
        SIDEBAR
===================================*/

.blog-listing .blog-sidebar {

    position: sticky;

    top: 120px;

}

.blog-listing .sidebar-widget {

    background: #fff;

    border: 1px solid #ECECEC;

    border-radius: 18px;

    padding: 28px;

    margin-bottom: 25px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .04);

}

.blog-listing .widget-title {

    font-size: 24px;

    font-weight: 700;

    color: var(--primary-color);

    margin-bottom: 22px;

}

.blog-listing .search-form {

    position: relative;

}

.blog-listing .search-form input {

    height: 55px;

    border-radius: 12px;

    padding-right: 55px;

    border: 1px solid #ddd;

}

.blog-listing .search-form button {

    position: absolute;

    right: 15px;

    top: 50%;

    transform: translateY(-50%);

    border: none;

    background: none;

    color: var(--primary-color);

}

.blog-listing .category-list {

    list-style: none;

    margin: 0;

    padding: 0;

}

.blog-listing .category-list li {

    margin-bottom: 12px;

}

.blog-listing .category-list li:last-child {

    margin-bottom: 0;

}

.blog-listing .category-list a {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 14px 18px;

    border-radius: 10px;

    text-decoration: none;

    color: #444;

    transition: .3s;

    border: 1px solid #F2F2F2;

}

.blog-listing .category-list a:hover {

    background: #F7FAF7;

    color: var(--primary-color);

    transform: translateX(5px);

}

.blog-listing .category-list span i {

    margin-right: 10px;

    color: var(--primary-color);

}

.blog-listing .count {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: #F3F5F4;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 13px;

    font-weight: 600;

}

.blog-listing .tag-list {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}

.blog-listing .tag-list a {

    text-decoration: none;

    padding: 8px 14px;

    border-radius: 30px;

    background: #F3F5F4;

    color: #555;

    font-size: 14px;

    transition: .3s;

}

.blog-listing .tag-list a:hover {

    background: var(--primary-color);

    color: #fff;

}

.blog-listing .sidebar-social {

    display: flex;

    gap: 15px;

    margin-top: 20px;

}

.blog-listing .sidebar-social a {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: #F5F7F6;

    display: flex;

    justify-content: center;

    align-items: center;

    text-decoration: none;

    color: var(--primary-color);

    transition: .3s;

}

.blog-listing .sidebar-social a:hover {

    background: var(--primary-color);

    color: #fff;

}

/*=====================================
        BLOG FILTER
======================================*/

.blog-listing .blog-filter {

    margin-bottom: 40px;

}

.blog-listing .filter-tabs {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

}

.blog-listing .filter-tabs a {

    text-decoration: none;

    padding: 13px 24px;

    border-radius: 10px;

    font-size: 15px;

    font-weight: 600;

    color: #444;

    background: #fff;

    border: 1px solid #ECECEC;

    transition: .35s;
    display: flex;

    align-items: center;

    gap: 8px;


}

.blog-listing .filter-tabs a i {

    font-size: 15px;

}

.blog-listing .filter-tabs a:hover {

    background: #F4F8F5;

    color: var(--primary-color);

    border-color: var(--secondary-color);

}

.blog-listing .filter-tabs a.active {

    background: var(--primary-color);

    color: #fff;

    border-color: var(--primary-color);

}

.blog-listing .filter-sort {

    display: flex;

    justify-content: flex-end;

}

.blog-listing .filter-sort .form-select {

    width: 220px;

    height: 52px;

    border-radius: 10px;

    border: 1px solid #E5E5E5;

    font-weight: 500;

    color: #555;

    box-shadow: none;

}

.blog-listing .filter-sort .form-select:focus {

    border-color: var(--primary-color);

    box-shadow: none;

}

@media(max-width:991px) {

    .blog-listing .filter-tabs {

        margin-bottom: 20px;

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 10px;

    }

    .blog-listing .filter-tabs::-webkit-scrollbar {

        height: 4px;

    }

    .blog-listing .filter-sort {

        justify-content: flex-start;

    }

}

/*=====================================
        BLOG CARD
======================================*/

.blog-listing .blog-card {

    background: #fff;

    border-radius: 18px;

    overflow: hidden;

    border: 1px solid #ECECEC;

    transition: .35s;

    height: 100%;

}

.blog-listing .blog-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);

}

.blog-listing .blog-image {

    overflow: hidden;

}

.blog-listing .blog-image img {

    width: 100%;

    height: 240px;

    object-fit: cover;

    transition: .5s;

}

.blog-listing .blog-card:hover .blog-image img {

    transform: scale(1.08);

}

.blog-listing .blog-body {

    padding: 24px;

}

.blog-listing .blog-category {

    display: inline-block;

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    color: var(--primary-color);

    margin-bottom: 15px;

    letter-spacing: .5px;
    background: #F2F7F3;

    padding: 7px 14px;

    border-radius: 30px;


}

.blog-listing .blog-body h3 {

    font-size: 23px;

    line-height: 1.45;

    margin-bottom: 18px;

}

.blog-listing .blog-body h3 a {

    text-decoration: none;

    color: #222;

    transition: .3s;

}

.blog-listing .blog-body h3 a:hover {

    color: var(--primary-color);

}

.blog-listing .blog-body p {

    color: #666;

    line-height: 1.8;

    margin-bottom: 22px;

}

.blog-listing .blog-meta {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    border-top: 1px solid #ECECEC;

    padding-top: 18px;

}

.blog-listing .blog-meta span {

    color: #777;

    font-size: 14px;

}

.blog-listing .blog-meta i {

    color: var(--primary-color);

    margin-right: 6px;

}

@media(max-width:768px) {

    .blog-listing .blog-body {

        padding: 20px;

    }

    .blog-listing .blog-body h3 {

        font-size: 21px;

    }

    .blog-listing .blog-image img {

        height: 220px;

    }

}

.blog-listing .read-more {

    display: inline-flex;

    gap: 8px;

    align-items: center;

    font-weight: 600;

    color: var(--primary-color);

    text-decoration: none;

    margin-bottom: 20px;

}

.blog-listing .read-more:hover i {

    transform: translateX(5px);

}

/*=====================================
        Pagination
======================================*/

.blog-listing .blog-pagination {

    margin-top: 70px;

}

.blog-listing .blog-pagination .pagination {

    gap: 10px;

}

.blog-listing .blog-pagination .page-link {

    width: 48px;

    height: 48px;

    border-radius: 12px;

    display: flex;

    justify-content: center;

    align-items: center;

    border: 1px solid #E8E8E8;

    color: #444;

    font-weight: 600;

    transition: .3s;

}

.blog-listing .blog-pagination .page-link:hover {

    background: var(--primary-color);

    color: #fff;

    border-color: var(--primary-color);

}

.blog-listing .blog-pagination .page-item.active .page-link {

    background: var(--primary-color);

    border-color: var(--primary-color);

    color: #fff;

}


/*=====================================
        Newsletter
======================================*/

.newsletter-section {

    margin-top: 90px;

}

.newsletter-box {

    background: #F8FAF8;

    border-radius: 24px;

    padding: 45px;

    border: 1px solid #ECECEC;

}

.newsletter-content {

    display: flex;

    align-items: center;

    gap: 22px;

}

.newsletter-icon {

    width: 80px;

    height: 80px;

    min-width: 80px;

    border-radius: 18px;

    background: var(--primary-color);

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 34px;

}

.newsletter-content h3 {

    font-size: 32px;

    margin-bottom: 10px;

    color: var(--primary-color);

}

.newsletter-content p {

    margin: 0;

    color: #666;

    line-height: 1.8;

}

.newsletter-form {

    display: flex;

    gap: 15px;

}

.newsletter-form input {

    height: 60px;

    border-radius: 12px;

    border: 1px solid #ddd;

}

.newsletter-form .btn {

    min-width: 180px;

    border-radius: 12px;

    background: var(--primary-color);

    border: none;

    font-weight: 600;

}

.newsletter-form .btn i {

    margin-left: 8px;

}

@media(max-width:991px) {

    .newsletter-box {

        padding: 30px;

    }

    .newsletter-content {

        margin-bottom: 30px;

    }

    .newsletter-form {

        flex-direction: column;

    }

    .newsletter-form .btn {

        width: 100%;

    }

}

/* --------- blog page end ----------*/

/* --------- Blog detail page start--------- */

/*=====================================
        BLOG DETAIL HERO
======================================*/

.blog-detail-hero {

    position: relative;

    padding: 60px 0 60px;

    background: url("../images/blog-detail-banner.jpg") center/cover no-repeat;

    overflow: hidden;

}

.blog-detail-hero .hero-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(90deg,
            rgba(6, 34, 30, .92),
            rgba(6, 34, 30, .78),
            rgba(6, 34, 30, .45));

}

.blog-detail-hero .container {

    position: relative;

    z-index: 2;

}

.blog-detail-hero .blog-breadcrumb {

    background: none;

    padding: 0;

    margin-bottom: 25px;

}

.blog-detail-hero .blog-breadcrumb a {

    color: rgba(255, 255, 255, .8);

    text-decoration: none;

}

.blog-detail-hero .blog-breadcrumb .breadcrumb-item.active {

    color: var(--secondary-color);

}

.blog-detail-hero .blog-breadcrumb .breadcrumb-item+.breadcrumb-item::before {

    color: rgba(255, 255, 255, .6);

}

.blog-detail-hero .blog-label {

    display: inline-block;

    padding: 8px 18px;

    border-radius: 40px;

    background: rgba(216, 226, 140, .18);

    color: #D8E28C;

    border: 1px solid rgba(216, 226, 140, .35);

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 25px;

}

.blog-detail-hero h1 {

    color: #fff;

    font-size: 35px;

    font-weight: 800;

    line-height: 1.15;

    margin-bottom: 25px;

}

.blog-detail-hero p {

    color: rgba(255, 255, 255, .88);

    font-size: 21px;

    line-height: 1.9;

    max-width: 850px;

}

.blog-detail-hero .blog-meta-info {

    display: flex;

    flex-wrap: wrap;

    gap: 30px;

    margin-top: 35px;

}

.blog-detail-hero .blog-meta-info div {

    display: flex;

    align-items: center;

    gap: 10px;

    color: rgba(255, 255, 255, .85);

    font-size: 15px;

}

.blog-detail-hero .blog-meta-info i {

    color: var(--secondary-color);

}

@media(max-width:991px) {

    .blog-detail-hero {

        padding: 90px 0;

    }

    .blog-detail-hero h1 {

        font-size: 44px;

    }

    .blog-detail-hero p {

        font-size: 18px;

    }

}

@media(max-width:768px) {

    .blog-detail-hero h1 {

        font-size: 34px;

    }

    .blog-detail-hero .blog-meta-info {

        gap: 15px;

        flex-direction: column;

        align-items: flex-start;

    }

}

/*=====================================
        BLOG DETAIL
======================================*/

.blog-detail-section {

    padding: 100px 0;

}

.blog-detail-section .blog-article {

    font-size: 18px;

    color: #555;

    line-height: 1.95;

}

.blog-detail-section .featured-image {

    margin-bottom: 45px;

    overflow: hidden;

    border-radius: 22px;

}

.blog-detail-section .featured-image img {

    width: 100%;

    transition: .5s;

}

.blog-detail-section .featured-image:hover img {

    transform: scale(1.05);

}

.blog-detail-section .blog-article h2 {

    margin-top: 50px;

    margin-bottom: 22px;

    color: var(--primary-color);

    font-size: 38px;

    font-weight: 700;

}

.blog-detail-section .blog-article p {

    margin-bottom: 25px;

}

.blog-detail-section .blog-article .lead {

    font-size: 19px;

    color: #333;

    font-weight: 500;

}

.blog-detail-section .blog-list {

    margin-top: 30px;

    padding: 0;

    list-style: none;

}

.blog-detail-section .blog-list li {

    position: relative;

    padding-left: 35px;

    margin-bottom: 18px;

}

.blog-detail-section .blog-list li::before {

    content: "✓";

    position: absolute;

    left: 0;

    color: var(--primary-color);

    font-weight: bold;

}

@media(max-width:991px) {

    .blog-detail-section .blog-detail-section {

        padding: 70px 0;

    }

    .blog-detail-section .blog-article h2 {

        font-size: 30px;

    }

    .blog-detail-section .blog-article {

        font-size: 17px;

    }

    .blog-detail-section .blog-article .lead {

        font-size: 20px;

    }

}

/*=====================================
        BLOG SIDEBAR
======================================*/

.blog-detail-sidebar .blog-sidebar {

    position: sticky;

    top: 120px;

}

.blog-detail-sidebar .sidebar-widget {

    background: #fff;

    border: 1px solid #ECECEC;

    border-radius: 18px;

    padding: 28px;

    margin-bottom: 25px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .04);

}

.blog-detail-sidebar .sidebar-widget h4 {

    color: var(--primary-color);

    font-size: 24px;

    margin-bottom: 22px;

}

.blog-detail-sidebar .toc-list {

    list-style: none;

    padding: 0;

    margin: 0;

}

.blog-detail-sidebar .toc-list li {

    margin-bottom: 15px;

}

.blog-detail-sidebar .toc-list a {

    text-decoration: none;

    color: #666;

    transition: .3s;

    display: block;

}

.blog-detail-sidebar .toc-list a:hover {

    color: var(--primary-color);

    padding-left: 8px;

}

.blog-detail-sidebar .category-list {

    list-style: none;

    padding: 0;

    margin: 0;

}

.blog-detail-sidebar .category-list li {

    margin-bottom: 12px;

}

.blog-detail-sidebar .category-list a {

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #555;

    text-decoration: none;

}

.blog-detail-sidebar .category-list span {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: #F3F5F4;

    display: flex;

    align-items: center;

    justify-content: center;

}

.blog-detail-sidebar .recent-post {

    display: flex;

    gap: 15px;

    margin-bottom: 20px;

}

.blog-detail-sidebar .recent-post img {

    width: 90px;

    height: 80px;

    border-radius: 12px;

    object-fit: cover;

}

.blog-detail-sidebar .recent-post a {

    text-decoration: none;

    color: #222;

    font-weight: 600;

    display: block;

    margin-bottom: 6px;

}

.blog-detail-sidebar .recent-post span {

    color: #777;

    font-size: 13px;

}

.blog-detail-sidebar .share-icons {

    display: flex;

    gap: 15px;

}

.blog-detail-sidebar .share-icons a {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #F4F6F5;

    color: var(--primary-color);

    transition: .3s;

    text-decoration: none;

}

.blog-detail-sidebar .share-icons a:hover {

    background: var(--primary-color);

    color: #fff;

}

/*=====================================
        Quote
======================================*/

.blog-quote {

    margin: 60px 0;

    padding: 45px;

    border-left: 6px solid var(--secondary-color);

    background: #F7FAF8;

    border-radius: 18px;

    position: relative;

}

.blog-quote i {

    font-size: 55px;

    color: var(--primary-color);

    opacity: .2;

    position: absolute;

    top: 25px;

    right: 30px;

}

.blog-quote blockquote {

    margin: 0;

    font-size: 30px;

    line-height: 1.6;

    font-weight: 600;

    color: var(--primary-color);

}

/*=====================================
        Expert Insight
======================================*/

.expert-insight {

    display: flex;

    gap: 25px;

    padding: 35px;

    border-radius: 18px;

    background: #114A43;

    color: #fff;

    margin: 60px 0;

}

.expert-insight .insight-icon {

    width: 70px;

    height: 70px;

    border-radius: 50%;

    background: #D8E28C;

    display: flex;

    align-items: center;

    justify-content: center;

}

.expert-insight .insight-icon i {

    color: #114A43;

    font-size: 32px;

}

.expert-insight h4 {

    margin-bottom: 12px;

}

.expert-insight p {

    color: rgba(255, 255, 255, .9);

    margin: 0;

}

/*=====================================
        Stats
======================================*/

.stats-row {

    margin: 70px 0;

}

.stats-row .stat-card {

    text-align: center;

    background: #fff;

    border-radius: 18px;

    padding: 35px;

    border: 1px solid #ECECEC;

    transition: .3s;

}

.stats-row .stat-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 15px 35px rgba(0, 0, 0, .06);

}

.stats-row .stat-card h3 {

    font-size: 48px;

    color: var(--primary-color);

    font-weight: 800;

}

.stats-row .stat-card span {

    color: #666;

}

/*=====================================
        Takeaways
======================================*/

.key-takeaways {

    margin-top: 70px;

    background: #F8FAF8;

    padding: 40px;

    border-radius: 18px;

}

.key-takeaways h3 {

    margin-bottom: 30px;

    color: var(--primary-color);

}

.key-takeaways ul {

    list-style: none;

    padding: 0;

}

.key-takeaways li {

    position: relative;

    padding-left: 38px;

    margin-bottom: 18px;

    font-size: 18px;

}

.key-takeaways li::before {

    content: "✓";

    position: absolute;

    left: 0;

    top: 0;

    width: 24px;

    height: 24px;

    border-radius: 50%;

    background: var(--secondary-color);

    color: var(--primary-color);

    display: flex;

    justify-content: center;

    align-items: center;

    font-weight: 700;

}

/*=====================================
        AUTHOR
======================================*/

.author-box {

    display: flex;

    gap: 35px;

    padding: 45px;

    margin-top: 80px;

    background: #F8FAF8;

    border-radius: 22px;

    align-items: center;

}

.author-box .author-image img {

    width: 170px;

    height: 170px;

    border-radius: 50%;

    object-fit: cover;

}

.author-box .author-role {

    font-size: 13px;

    letter-spacing: 2px;

    font-weight: 700;

    color: var(--primary-color);

}

.author-box .author-content h3 {

    margin: 12px 0 18px;

    font-size: 34px;

    color: var(--primary-color);

}

.author-box .author-skills {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin: 25px 0;

}

.author-box .author-skills span {

    padding: 8px 16px;

    border-radius: 30px;

    background: #EAF4EF;

    color: var(--primary-color);

    font-size: 14px;

    font-weight: 600;

}

.author-box .author-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    text-decoration: none;

    font-weight: 600;

    color: var(--primary-color);

}

.related-blogs {

    padding: 110px 0;

    background: #fff;

}

.related-blogs .section-title {

    margin-bottom: 60px;

}

.related-blogs span {

    color: var(--primary-color);

    font-weight: 700;

    letter-spacing: 2px;

}

.related-blogs h2 {

    font-size: 46px;

    margin-top: 15px;

}

/*=====================================
        BLOG CTA
======================================*/

.blog-cta {

    padding: 100px 0;

}

.blog-cta .cta-box {

    background: linear-gradient(135deg, #114A43, #0C3933);

    padding: 70px;

    border-radius: 24px;

    color: #fff;

}

.blog-cta .cta-box span {

    color: #D8E28C;

    font-weight: 700;

    letter-spacing: 2px;

}

.blog-cta .cta-box h2 {

    font-size: 48px;

    margin: 18px 0;

    font-weight: 700;

}

.blog-cta .cta-box p {

    color: rgba(255, 255, 255, .85);

    font-size: 18px;

}

.blog-cta .cta-btn {

    padding: 18px 40px;

    background: #D8E28C;

    color: #114A43;

    font-weight: 700;

    border-radius: 12px;

}

.blog-cta .cta-btn:hover {

    background: #fff;

    color: #114A43;

}

.reading-progress {

    position: fixed;

    top: 0;

    left: 0;

    height: 4px;

    width: 0;

    background: var(--secondary-color);

    z-index: 9999;

}

/* -------------blog detail page end ------------ */

/* --------------Contact page start --------------- */
/*====================================
        CONTACT HERO
====================================*/

.contact-hero {

    position: relative;

    padding: 50px 0 150px;

    background: url("../images/home1/contact-hero.jpg") center center/cover no-repeat;

    overflow: hidden;

}

.contact-hero::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 120px;

    background: linear-gradient(to bottom, rgb(255 255 255 / 0%), #00000075);

    z-index: 1;

}

.contact-hero .contact-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(90deg,
            rgba(7, 33, 30, .90),
            rgba(7, 33, 30, .72),
            rgba(7, 33, 30, .25));

}

.contact-hero .container {

    position: relative;

    z-index: 2;

}

.contact-hero .contact-breadcrumb {

    background: none;

    padding: 0;

    margin-bottom: 25px;

}

.contact-hero .contact-breadcrumb a {

    color: rgba(255, 255, 255, .8);

    text-decoration: none;

}

.contact-hero .contact-breadcrumb .breadcrumb-item.active {

    color: var(--secondary-color);

}

.contact-hero .contact-breadcrumb .breadcrumb-item+.breadcrumb-item::before {

    color: rgba(255, 255, 255, .55);

}

.contact-hero .contact-hero-content h1 {

    font-size: 45px;

    color: #fff;

    font-weight: 800;

    margin-bottom: 15px;

}

.contact-hero .contact-hero-content h3 {

    color: var(--secondary-color);

    font-size: 35px;

    margin-bottom: 25px;

    font-weight: 600;

}

.contact-hero .contact-hero-content p {

    color: rgba(255, 255, 255, .88);

    font-size: 20px;

    line-height: 1.9;

    max-width: 560px;

}

@media(max-width:991px) {

    .contact-hero {

        padding: 90px 0 160px;

    }

    .contact-hero .contact-hero-content h1 {

        font-size: 48px;

    }

    .contact-hero .contact-hero-content h3 {

        font-size: 30px;

    }

}

@media(max-width:767px) {

    .contact-hero {

        padding: 70px 0 140px;

    }

    .contact-hero .contact-hero-content h1 {

        font-size: 38px;

    }

    .contact-hero .contact-hero-content h3 {

        font-size: 24px;

    }

    .contact-hero .contact-hero-content p {

        font-size: 16px;

    }

}

/*=====================================
        CONTACT STRIP
======================================*/

.contact-strip {

    margin-top: -90px;

    position: relative;

    z-index: 5;

}

.contact-strip .contact-strip-box {

    background: #fff;

    border-radius: 22px;

    overflow: hidden;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);

    border: 1px solid #ECECEC;

}

.contact-strip .contact-item {

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 20px;

    text-decoration: none;

    color: #222;

    transition: .35s;

    position: relative;

    height: 100%;

}

.contact-strip .contact-item:hover {

    background: #F7FAF8;

}

.contact-strip .contact-item::after {

    content: "";

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 1px;

    height: 70%;

    background: #ECECEC;

}

.contact-strip .col-lg-4:last-child .contact-item::after {

    display: none;

}

.contact-strip .contact-icon {

    width: 68px;

    height: 68px;

    min-width: 68px;

    border-radius: 50%;

    background: var(--primary-color);

    display: flex;

    justify-content: center;

    align-items: center;

    transition: .3s;

}

.contact-strip .contact-icon i {

    color: #fff;

    font-size: 24px;

}

.contact-strip .contact-text {

    flex: 1;

}

.contact-strip .contact-text small {

    display: block;

    color: #777;

    margin-bottom: 6px;

    font-size: 14px;

}



.contact-strip .contact-text h5 {

    margin: 0;

    font-size: 20px;

    color: var(--primary-color);

    font-weight: 700;

}

.contact-strip .contact-text .addr-sm {
    font-size: 18px;
}

.contact-strip .contact-arrow {

    font-size: 28px;

    color: #999;

    transition: .3s;

}

.contact-strip .contact-item:hover .contact-arrow {

    transform: translateX(8px);

    color: var(--primary-color);

}

.contact-strip .contact-item:hover .contact-icon {

    background: var(--secondary-color);

}

.contact-strip .contact-item:hover .contact-icon i {

    color: var(--primary-color);

}

@media(max-width:991px) {

    .contact-strip {

        margin-top: -60px;

    }

    .contact-strip .contact-item {

        padding: 25px;

    }

    .contact-strip .contact-item::after {

        display: none;

    }

    .contact-strip .contact-text h5 {

        font-size: 18px;

    }

}

@media(max-width:767px) {

    .contact-strip {

        margin-top: 40px;

    }

    .contact-strip .contact-strip-box {

        border-radius: 18px;

    }

    .contact-strip .contact-item {

        padding: 22px;

    }

    .contact-strip .contact-icon {

        width: 58px;

        height: 58px;

        min-width: 58px;

    }

    .contact-strip .contact-text h5 {

        font-size: 17px;

    }

}

/*=====================================
        CONTACT SECTION
======================================*/

.contact-section {

    padding: 75px 0;

}

.contact-section .section-heading {

    max-width: 700px;

    margin: 0 auto 70px;

}

.contact-section .section-subtitle {

    color: var(--primary-color);

    text-transform: uppercase;

    letter-spacing: 2px;

    font-weight: 700;

}

.contact-section .section-heading h2 {

    font-size: 40px;

    margin: 18px 0;

    color: var(--primary-color);

}

.contact-section .section-heading p {

    color: #666;

    font-size: 18px;

    line-height: 1.8;

}

.contact-section .contact-info-card {

    background: #0E3B35;

    color: #fff;

    padding: 40px;

    border-radius: 20px;

    height: 100%;



}

.contact-section .info-item {

    display: flex;

    gap: 20px;

    padding: 25px 0;

    border-bottom: 1px solid rgba(255, 255, 255, .15);

}

.contact-section .info-icon {

    width: 58px;

    height: 58px;

    min-width: 58px;

    border-radius: 50%;

    background: rgba(216, 226, 140, .15);

    display: flex;

    justify-content: center;

    align-items: center;

}

.contact-section .info-icon i {

    color: var(--secondary-color);

    font-size: 22px;

}

.contact-section .info-item h5 {

    color: #fff;

    margin-bottom: 10px;

}

.contact-section .info-item p {

    color: rgba(255, 255, 255, .8);

    margin: 0;

    line-height: 1.8;

}

.contact-section .contact-form-box {

    background: #fff;

    border: 1px solid #ECECEC;

    border-radius: 20px;

    padding: 40px;

    box-shadow: 0 10px 35px rgba(0, 0, 0, .05);

}

.contact-section .contact-form-box h3 {

    margin-bottom: 35px;

    color: var(--primary-color);

    font-size: 34px;

}

.contact-section .contact-form-box label {

    font-weight: 600;

    margin-bottom: 10px;

    display: block;

}

.contact-section .contact-form-box label span {

    color: #dc3545;

}

.contact-form-box .form-control,
.contact-form-box .form-select {

    height: 56px;

    border-radius: 12px;

    border: 1px solid #ddd;

    box-shadow: none;

}

.contact-section .contact-form-box textarea.form-control {

    height: auto;

    resize: none;

    padding-top: 15px;

}

.contact-form-box .form-control:focus,
.contact-form-box .form-select:focus {

    border-color: var(--primary-color);

    box-shadow: none;

}

.contact-section .contact-btn {


    border-radius: 12px;

    /* background:var(--secondary-color); */

    color: var(--primary-color);

    border: none;

    font-weight: 700;
    padding: 18px 38px;

    font-weight: 700;

    border-radius: 14px;

    background: linear-gradient(90deg, #D8E28C, #C7D66A);

    transition: .35s;
}

.contact-section .contact-btn i {

    margin-left: 8px;

}

.contact-section .contact-btn:hover {

    background: var(--primary-color);

    color: #fff;
    transform: translateY(-4px);

    box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
}

/* premium */

.contact-section .contact-info-card {
    /* background:#fff; */

    border-radius: 28px;

    padding: 45px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .08);

    border: 1px solid rgba(0, 0, 0, .05);
}

.contact-section .contact-form-box input {
    height: 62px;

    border-radius: 14px;

    transition: .35s;
}

.contact-form-box .form-control:focus,
.contact-form-box .form-select:focus {
    border-color: var(--secondary-color);

    box-shadow:

        0 0 0 5px rgba(216, 226, 140, .18);
}

.contact-section iframe {
    height: 100%;
}

@media(max-width:991px) {
    .contact-section iframe {
        height: 450px;
    }
}

/*=====================================
        WHY CONTACT
======================================*/

.why-contact {

    padding: 70px 0;

    background: #fff;
}

.why-contact .section-heading {
    max-width: 700px;

    margin: 0 auto 70px;
}

.why-contact .section-heading h2 {

    font-size: 40px;

    margin: 18px 0;

    color: var(--primary-color);

}

.why-contact .section-heading p {

    color: #666;

    font-size: 18px;

    line-height: 1.8;

}

.why-contact .section-subtitle {

    color: var(--primary-color);

    text-transform: uppercase;

    letter-spacing: 2px;

    font-weight: 700;

}

.why-contact .why-card {

    background: #fff;

    border: 1px solid #ECECEC;

    border-radius: 22px;

    padding: 45px 30px;

    text-align: center;

    height: 100%;

    transition: .35s;

    position: relative;

    overflow: hidden;

}

.why-contact .why-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 60px rgba(0, 0, 0, .08);

    border-color: rgba(216, 226, 140, .5);

}

.why-contact .why-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 0;

    height: 4px;

    background: var(--secondary-color);

    transition: .4s;

}

.why-contact .why-card:hover::before {

    width: 100%;

}

.why-contact .why-icon {

    width: 85px;

    height: 85px;

    margin: 0 auto 28px;

    border-radius: 50%;

    background: #F5F8E9;

    display: flex;

    justify-content: center;

    align-items: center;

    transition: .35s;

}

.why-contact .why-icon i {

    font-size: 34px;

    color: var(--primary-color);

}

.why-contact .why-card:hover .why-icon {

    background: var(--primary-color);

    transform: rotateY(180deg);

}

.why-contact .why-card:hover .why-icon i {

    color: var(--secondary-color);

}

.why-contact .why-card h4 {

    font-size: 26px;

    margin-bottom: 18px;

    color: var(--primary-color);

    font-weight: 700;

}

.why-contact .why-card p {

    color: #666;

    line-height: 1.9;

    margin: 0;

}

@media(max-width:991px) {

    .why-contact {

        padding: 80px 0;

    }

    .why-contact .why-card {

        padding: 35px 25px;

    }

    .why-contact .why-card h4 {

        font-size: 22px;

    }

}

/*-------------- contact page end -------------*/


/*-------- Responsive ---------*/
@media(max-width:576px) {
    .services-section {
        padding-bottom: 15px;
    }

    .services-section .section-title h2 {
        font-size: 24px;
    }

    .service-column h3 {
        font-size: 21px;
        margin-bottom: 18px;
        color: var(--primary-light);
    }

    .services-image {
        margin: 20px 0;
        min-height: unset;
    }

    .service-column.right-column {
        margin-top: 25px;
    }

    .service-column.right-column>h3 {
        color: var(--secondary-darker);
    }

    .services-section::after {
        width: 225px;
        height: 225px;
        right: -90px;
        bottom: -90px;
    }

    .why-content h2,
    .features-content h2 {
        font-size: 24px;
    }

    .why-content {
        text-align: left;
    }

    .why-content li {
        justify-content: left;
    }

    .illustration-box {
        margin-bottom: 0;
    }

    .why-feature-section .features-content .feature-grid {
        width: 100%;
        max-height: unset;
    }

    .how-work>h2 span {
        color: var(--primary-light);
    }

    .how-work .line {
        min-height: 28px;
        border-left: 2px dashed #ddd;
        margin: 12px 5px 20px 5px;
    }

    .center-graphic img {
        max-width: 200px;
    }

    .center-graphic img {
        filter: drop-shadow(0 30px 40px rgba(27, 101, 91, .18));
    }

    .footer {
        text-align: left;
    }

    .social-links {
        justify-content: left;
    }

    .about-hero {
        padding: 35px 0;
    }

    .about-hero .about-content {
        max-width: 100%;
    }

    .our-story .story-content h2 {
        font-size: 24px;
    }

    .our-story .story-icon {
        width: 45px;
        height: 45px;
    }

    .our-story .story-icon i {
        font-size: 28px;
    }

    .our-story .story-card h3 {
        font-size: 25px;
    }

    .mission-vision .mv-icon i {
        font-size: 40px;
    }

    .mission-vision .mv-icon {
        width: 80px;
        height: 80px;
    }

    .mission-vision .mv-content h3 {
        font-size: 24px;
    }

    .our-values .section-heading h2 {
        font-size: 28px;
    }

    .our-values .value-box h4 {
        font-size: 22px;
    }

    .our-values .value-box {
        margin-bottom: 10px;
    }

    .service-banner h1 {
        font-size: 28px;
    }

    .service-banner .banner-line {
        width: 55px;
    }

    .service-intro .service-content h2 {
        font-size: 28px;
    }

    .service-faq .section-heading h2 {
        font-size: 28px;
    }

    .our-story .story-card {
        padding: 25px 15px;
    }

    .strategy-section .section-heading h2 {
        font-size: 28px;
    }

    .outcomes-section h2 {
        font-size: 28px;
    }

    .outcomes-section .outcome-card h4 {
        font-size: 20px;
    }

    .contact-hero {
        padding: 50px 0 50px;
    }

    .contact-strip .contact-item {
        border-bottom: 1px solid #e3e3e3;
    }

    .contact-section .section-heading h2 {
        font-size: 28px;
    }

    .contact-section .contact-form-box h3 {
        font-size: 28px;
    }

    .contact-section .contact-btn {
        padding: 13px 25px;
    }

    .contact-section iframe {
        height: 350px;
    }

    .why-contact .section-heading h2 {
        font-size: 28px;
    }

    .contact-section {
        padding: 55px 0;
    }

    .contact-section .section-heading {
        margin: 0 auto 40px;
    }

    .contact-section .contact-form-box {
        padding: 30px 20px;
    }

    .contact-section .contact-form-box input {
        height: 50px;
    }

    .why-contact {
        padding: 40px 0;
    }

    .why-contact .section-heading {
        margin: 0 auto 30px;
    }

}

/* end  */

/* fixed popup form start */
#popupSubmitBtn{
    background-color: var(--primary-color);
}
.popupContactForm .form-control:focus{
    box-shadow: 0 0 0 .25rem rgb(17 74 67 / 19%);
    border-color: #114a436b;
}
#contactFab {

    position: fixed;

    right: 25px;

    bottom: 25px;

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background: #114A43;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    cursor: pointer;

    z-index: 9999;

    box-shadow: 0 8px 25px rgba(0, 0, 0, .2);

}

#popupContact {

    position: fixed;

    right: 25px;

    bottom: 100px;

    width: 360px;

    background: #fff;

    border-radius: 12px;

    padding: 20px;

    display: none;

    box-shadow: 0 10px 35px rgba(0, 0, 0, .25);

    z-index: 9999;

}

.popupContact .popup-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;

}

#closePopup {

    background: none;

    border: none;

    font-size: 20px;

}