/*=====>=====>=====>*** CSS Variable Start Here ***<=====<=====<=====*/
:root {
    /* =========================
       Color Variables Are Here
    ========================= */
    --ds-primary-color: #548DB1;
    --ds-black-color: #000000;
    --ds-white-color: #FFFFFF;
    --ds-light-gray: #F8F8F8;
    --ds-gray-400: #8A8A8A;
    --ds-gray-500: #878787;
    --ds-gray-600: #707070;
    --ds-gray-650: #747474;
    --ds-gray-700: #3D3D3D;
    --ds-gray-800: #C9D1D7;
    --ds-blue-50: #EBF5FD;
    --ds-blue-100: #EAF5FF;
    --ds-blue-gradient-50: linear-gradient(180deg, #EBF5FD 0%, #FFFFFF 100%);
    /* =========================
       Font Variables Are Here
    ========================= */
    --ds-font-family: 'Outfit', sans-serif;
    --ds-fs-70: clamp(42px, 4.35vw, 70px);
    --ds-fs-48: clamp(32px, 2.95vw, 48px);
    --ds-fs-38: clamp(28px, 2.55vw, 38px);
    --ds-fs-36: clamp(26px, 2.45vw, 36px);
    --ds-fs-32: clamp(24px, 2.15vw, 32px);

    --ds-fs-25: clamp(20px, 1.575vw, 25px);
    --ds-fs-24: clamp(20px, 1.55vw, 24px);

    --ds-fs-20: clamp(18px, 1.35vw, 20px);
    --ds-fs-19: clamp(17px, 1.175vw, 19px);
    --ds-fs-18: clamp(16px, 1.125vw, 18px);

    --ds-fs-17: clamp(16px, 1.05vw, 17px);
    --ds-fs-16: clamp(15px, .95vw, 16px);
    --ds-fs-15: clamp(14px, .85vw, 15px);
    --ds-fs-14: clamp(13px, .75vw, 14px);

    /* =========================
       Font Variables Are Here
    ========================= */
    --ds-fw-300: 300;
    --ds-fw-400: 400;
    --ds-fw-500: 500;
    --ds-fw-600: 600;
    --ds-fw-700: 700;

    /* =========================
        Spacing Variables Are Here
    ========================= */
    --ds-top-space: 104px;
    --ds-sp-100: clamp(60px, 6.45vw, 100px);
    --ds-top-space-50: clamp(30px, 2.13vw, 50px);
    --ds-bottom-space-50: clamp(30px, 2.13vw, 50px);
    --ds-top-space-70: clamp(40px, 2.86vw, 70px);
    --ds-top-space-90: clamp(50px, 3.57vw, 90px);

    /* =========================
        Border Radius Variables Are Here
    ========================= */

    --ds-bd-radius-20: 20px;
}

/* Variable Responsive CSS Are Here */
@media (max-width: 1599px) {
    :root {
        --ds-top-space: 96px;
    }
}

@media (max-width: 1399px) {
    :root {
        --ds-top-space: 92px;
    }
}

@media (max-width: 1199px) {
    :root {
        --ds-top-space: 79px;
    }
}

@media (max-width: 350px) {
    :root {
        --ds-top-space: 68px;
    }
}


/*=====>=====>=====>*** CSS Variable End Here ***<=====<=====<=====*/
/*=====>=====>=====>*** Global CSS Start Here ***<=====<=====<=====*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--ds-font-family);
    font-size: var(--ds-fs-19);
    color: var(--ds-gray-700);
    line-height: 1.5;
    font-weight: 300;
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    transition: all 0.375s ease-in-out;
    color: inherit;
}

ul {
    list-style: none;
}

img,
video {
    max-width: 100%;
    height: auto;
}

:where(input, select, button, textarea) {
    font-family: var(--ds-font-family);
    border-style: none;
}

:where(input, select, button, textarea):focus {
    outline: none;
}

input[type="submit"] {
    cursor: pointer;
}



/* ========================= 
    Container CSS Are Here 
========================= */
.container {
    --henshaw-container-size: 100%;
    max-width: var(--henshaw-container-size);
    padding-inline: 15px;
    margin-inline: auto;
    width: 100%;
}

@media (min-width: 576px) {
    .container {
        --henshaw-container-size: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        --henshaw-container-size: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        --henshaw-container-size: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        --henshaw-container-size: 1140px;
    }
}

@media (min-width: 1400px) {
    .container {
        --henshaw-container-size: 1320px;
    }
}

@media (min-width: 1600px) {
    .container {
        --henshaw-container-size: 1500px;
    }

}

/* ========================= 
    Colors (text) Classes Are Here 
========================= */
.text-primary {
    color: var(--ds-primary-color);
}

.text-black {
    color: var(--ds-black-color);
}

.text-white {
    color: var(--ds-white-color);
}

.text-gray-700 {
    color: var(--ds-gray-700);
}

.text-gray-650 {
    color: var(--ds-gray-650);
}

.text-gray-600 {
    color: var(--ds-gray-600);
}

.text-gray-500 {
    color: var(--ds-gray-500);
}

/* ========================= 
    Colors (background) Classes Are Here 
========================= */
.bg-primary {
    background-color: var(--ds-primary-color);
}

.bg-black {
    background-color: var(--ds-black-color);
}

.bg-white {
    background-color: var(--ds-white-color);
}

.bg-light-gray {
    background-color: var(--ds-light-gray);
}

.bg-blue-50 {
    background-color: var(--ds-blue-50);
}

.bg-blue-100 {
    background-color: var(--ds-blue-100);
}

.bg-blue-gradient-50 {
    background: var(--ds-blue-gradient-50);
}

/* =========================
   Font CSS Classes Are Here
========================= */
/*  Font Family CSS Classes Are Here  */
.font-outfit {
    font-family: var(--ds-font-family);
}

/*  Font Size CSS Classes Are Here  */
.fs-70 {
    font-size: var(--ds-fs-70);
}

.fs-48 {
    font-size: var(--ds-fs-48);
}

.fs-38 {
    font-size: var(--ds-fs-38);
}

.fs-36 {
    font-size: var(--ds-fs-36);
}

.fs-32 {
    font-size: var(--ds-fs-32);
}

.fs-25 {
    font-size: var(--ds-fs-25);
}

.fs-24 {
    font-size: var(--ds-fs-24);
}

.fs-20 {
    font-size: var(--ds-fs-20);
}

.fs-19 {
    font-size: var(--ds-fs-19);
}

.fs-18 {
    font-size: var(--ds-fs-18);
}

.fs-17 {
    font-size: var(--ds-fs-17);
}

.fs-16 {
    font-size: var(--ds-fs-16);
}

.fs-15 {
    font-size: var(--ds-fs-15);
}

.fs-14 {
    font-size: var(--ds-fs-14);
}

/*  Font Weight CSS Classes Are Here  */
.fw-300 {
    font-weight: var(--ds-fw-300);
}

.fw-400 {
    font-weight: var(--ds-fw-400);
}

.fw-500 {
    font-weight: var(--ds-fw-500);
}

.fw-600 {
    font-weight: var(--ds-fw-600);
}

.fw-700 {
    font-weight: var(--ds-fw-700);
}

/*  Line Height CSS Classes Are Here  */
.lh-1 {
    line-height: 1;
}

.lh-117 {
    line-height: 1.17;
}

.lh-125 {
    line-height: 1.125;
}

.lh-131 {
    line-height: 1.31;
}

.lh-142 {
    line-height: 1.42;
}

.lh-15 {
    line-height: 1.5;
}

.lh-168 {
    line-height: 1.68;
}

/* =========================
    Letter Spacing Classes Are Here
========================= */
.ls-1 {
    letter-spacing: 0.01em;
}

.ls-2 {
    letter-spacing: 0.02em;
}

.ls-10 {
    letter-spacing: 0.1em;
}

.ls-15 {
    letter-spacing: 0.15em;
}

.ls-22 {
    letter-spacing: 0.22em;
}

/* =========================
    Text Align Classes Are Here
========================= */
.text-center {
    text-align: center;
}

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

.text-right {
    text-align: right;
}



@media (min-width: 992px) {
    .text-lg-right {
        text-align: right;
    }
}



/* =========================
   Spacing Classes Are Here
========================= */
/* Padding Classes Are Here */
.top-space {
    --section-top-space: clamp(60px, 6.35vw, 110px);
    padding-top: calc(var(--ds-top-space) + var(--section-top-space));
}

.p-30 {
    padding: 30px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pt-10 {
    padding-top: 10px;
}

.pt-15 {
    padding-top: 15px;
}

.pb-15 {
    padding-bottom: 15px;
}

.pb-116 {
    padding-bottom: clamp(60px, 6.85vw, 116px);
}

.pt-100 {
    padding-top: var(--ds-sp-100);
}

.pb-100 {
    padding-bottom: var(--ds-sp-100);
}

.pt-50 {
    padding-top: var(--ds-top-space-50);
}

.pb-50 {
    padding-bottom: var(--ds-bottom-space-50);
}

.pt-70 {
    padding-top: var(--ds-top-space-70);
}


.pt-90 {
    padding-top: var(--ds-top-space-90);
}

/* Margin Classes Are Here */
.mt-auto {
    margin-top: auto;
}

.mx-auto {
    margin-inline: auto;
}

.ms-auto {
    margin-left: auto;
}

.me-auto {
    margin-right: auto;
}

.mt-100 {
    margin-top: var(--ds-sp-100);
}

.mt-72 {
    margin-top: clamp(40px, 4.95vw, 72px);
}

.mt-10 {
    margin-top: 10px;
}

.mt-4 {
    margin-top: 4px;
}

/* =========================
    Width & Height Classes Are Here
========================= */
/* Width Classes Are Here */
.w-full {
    width: 100%;
}

.w-auto {
    width: auto;
}

.w-fit {
    width: fit-content;
}

/* Height Classes Are Here */
.h-full {
    height: 100%;
}

.h-screen {
    height: 100vh;
}

.h-auto {
    height: auto;
}

/* =========================
    Display Classes Are Here
========================= */
.d-none {
    display: none;
}

.d-block {
    display: block;
}

.d-inline {
    display: inline;
}

.d-inline-block {
    display: inline-block;
}

.d-flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-column {
    flex-direction: column;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-start {
    justify-content: flex-start;
}

.justify-content-end {
    justify-content: flex-end;
}

.justify-content-between {
    justify-content: space-between;
}

.align-items-center {
    align-items: center;
}

.align-items-start {
    align-items: flex-start;
}

.align-items-end {
    align-items: flex-end;
}

.align-content-start {
    flex-wrap: wrap;
    align-content: flex-start;
}

.align-self-center {
    align-self: center;
}

.align-self-start {
    align-self: flex-start;
}

.align-self-end {
    align-self: flex-end;
}

.flex-1 {
    flex: 1;
}

.gap-50 {
    gap: clamp(20px, 2.95vw, 50px);
}

.gap-20 {
    gap: clamp(10px, 1.39vw, 20px);
}

.gap-15 {
    gap: clamp(10px, .95vw, 15px);
}

/*  Responsive Display Classes Are Here */
@media (max-width: 768px) {
    .d-md-none {
        display: none;
    }

    .d-md-block {
        display: block;
    }

    .flex-md-1 {
        flex: 1;
    }
}

@media (min-width: 992px) {
    .d-lg-none {
        display: none;
    }

    .d-lg-block {
        display: block;
    }

    .flex-lg-1 {
        flex: 1;
    }
}

@media (min-width: 1200px) { 
    .d-xl-none { 
        display: none;
    }
}

/* =========================
    Position Classes Are Here
========================= */
.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.position-sticky {
    position: sticky;
}

.top-0 {
    top: 0;
}

.left-0 {
    left: 0;
}

.right-0 {
    right: 0;
}

.bottom-0 {
    bottom: 0;
}

.z-index-99 {
    z-index: 99;
}


/*=====>=====>=====>*** Global CSS End Here ***<=====<=====<=====*/
/*=====>=====>=====>*** Common Classes CSS Start Here ***<=====<=====<=====*/
.hero-main-title {
    font-size: var(--ds-fs-70);
    font-weight: 400;
    line-height: 1.17;
    letter-spacing: 0.01em;
}

.sec-title {
    font-size: var(--ds-fs-48);
    font-weight: 500;
    line-height: 1.125;
    letter-spacing: 0.02em;
}

/* =========================
    Buttons Classes Are Here
========================= */
.btn {
    padding: 17px 26px;
    font-size: var(--ds-fs-20);
    line-height: 1;
    font-weight: 600;
    border-radius: 40px;
    transition: all 0.375s ease-in-out;
    display: inline-block;
}

.btn-primary {
    background-color: var(--ds-primary-color);
    color: var(--ds-white-color);
}

.btn-white {
    background-color: var(--ds-white-color);
    color: var(--ds-primary-color);
}

.btn-primary.btn-black-hover:hover,
.btn-white.btn-black-hover:hover {
    background-color: var(--ds-black-color);
    color: var(--ds-white-color);
    transform: translateY(-4px);
}

.btn-primary.btn-white-hover:hover {
    background-color: var(--ds-white-color);
    color: var(--ds-primary-color);
    transform: translateY(-4px);
}

/* =========================
    Row & Column Classes Are Here
========================= */
.ds-row {
    display: flex;
    flex-wrap: wrap;
    --ds-col-gap: 20px;
    --ds-row-gap: 20px;
    --ds-col-count: 1;
    grid-gap: var(--ds-row-gap) var(--ds-col-gap);
}

.ds-row.ds-cols-2 {
    --ds-col-count: 2;
}

.ds-row.ds-cols-3 {
    --ds-col-count: 3;
}

.ds-row.ds-cols-4 {
    --ds-col-count: 4;
}

.ds-row>.ds-inner-col {
    flex: 0 1 calc((100% - var(--ds-col-gap) * (var(--ds-col-count) - 1)) / var(--ds-col-count));
    width: 100%;
}


/*  Responsive Row & Column Classes Are Here */

@media (max-width: 991px) {

    .ds-row.ds-cols-3,
    .ds-row.ds-cols-4 {
        --ds-col-count: 2;
    }
}

@media (max-width: 767px) {

    .ds-row.ds-cols-2,
    .ds-row.ds-cols-3,
    .ds-row.ds-cols-4 {
        --ds-col-count: 1;
    }
}

/* =========================
    Content Block Classes Are Here
========================= */
.ds-content-block p+p {
    margin-top: 20px;
}

.ds-content-block a {
    color: var(--ds-primary-color);
    text-decoration: underline;
    font-weight: 400;
}

.ds-content-block a:hover {
    color: var(--ds-black-color);
}

/*=====>=====>=====>*** Common Classes CSS End Here ***<=====<=====<=====*/


/* border classes are here */
.border-bottom-1 {
    border-bottom: 1px solid var(--ds-gray-800);
}

.border-top-2 {
    border-top: 2px solid rgb(0 0 0 / 10%);
}

.bd-radius-20 {
    border-radius: var(--ds-bd-radius-20);
}


/*  inner banner css are here */
.inner-banner-sec {
    background-image: url('../images/inner-banner-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}