/* ============================================================
    [Mastering Stylesheet]

    Theme Name  : HavioTop        
    Description : HavioTop- Online Recharge & Payment Platform.
    Author      : coUI         
    Author URL  : https://themeforest.net/user/coui  
    Version     : 1.0.1

============================================================== */
/*
========================================
*********** TABLE OF CONTENTS **********

    00. Fonts
    01. Css Variables
    02. Common Class 
    03. Common Typography
    04. Custom Classes
    05. Common Button 
    06. Cursor
    07. Colors
    08. margin css
    09. padding css
    10. Accordion Css
    11. Custom Input
    12. Table Css
    13. Preloader Css
    14. Header Css
    15. Footer css
    16. Scroll to Top
    17. Template Selection
    18. Banner Section
    19. Pagination Section
    20. Hero Section
    21. Recommendation Section
    22. Service Section
    23. Payment Section
    24. Feature Section
    25. Counter Section
    26. Testimonial Section
    27. FAQ Section
    28. App Section
    29. Brand Section
    30. Blog Section
    31. Blog Details Section
    32. About Section
    33. Contact Section
    34. Sign Page
    35. Privacy Page

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

/* ========================= Fonts Start ======================== */
@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* ========================= Fonts End ======================== */

/* ========================= Css Variables Start ======================== */
:root {
    /* Font Family */
    --heading-font: "ClashDisplay-Variable";
    --body-font: "Poppins", sans-serif;
    /* ========================= Theme Color Start ============================= */
    /* Base Color */
    --base-h: 150;
    --base-s: 100%;
    --base-l: 54%;
    --base: var(--base-h) var(--base-s) var(--base-l);
    --base-d-100: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.1);
    --base-d-200: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.2);
    --base-d-300: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.3);
    --base-d-400: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.4);
    --base-d-500: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.5);
    --base-d-600: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.6);
    --base-d-700: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.7);
    --base-d-800: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.8);
    --base-d-900: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.9);
    --base-d-1000: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 1);
    --base-l-100: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.1);
    --base-l-200: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.2);
    --base-l-300: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.3);
    --base-l-400: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.4);
    --base-l-500: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.5);
    --base-l-600: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.6);
    --base-l-700: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.7);
    --base-l-800: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.8);
    --base-l-900: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.9);
    --base-l-1000: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 1);
    /* Base Two Color */
    --base-two-h: 69;
    --base-two-s: 100%;
    --base-two-l: 50%;
    --base-two: var(--base-two-h) var(--base-two-s) var(--base-two-l);
    --base-two-d-100: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.1);
    --base-two-d-200: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.2);
    --base-two-d-300: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.3);
    --base-two-d-400: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.4);
    --base-two-d-500: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.5);
    --base-two-d-600: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.6);
    --base-two-d-700: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.7);
    --base-two-d-800: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.8);
    --base-two-d-900: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.9);
    --base-two-d-1000: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 1);
    --base-two-l-100: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.1);
    --base-two-l-200: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.2);
    --base-two-l-300: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.3);
    --base-two-l-400: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.4);
    --base-two-l-500: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.5);
    --base-two-l-600: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.6);
    --base-two-l-700: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.7);
    --base-two-l-800: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.8);
    --base-two-l-900: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.9);
    --base-two-l-1000: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 1);
    /* ========================= Theme Color End ============================= */
    /* ========================= Color Variables Start =========================== */
    --white: 0 0% 100%;
    --body-color: 0 0% 100%;
    --heading-color: 0 0% 16%;
    --text-color: 0 0% 33%;
    --black: 0 0% 0%;
    --border-color: 0 0% 88%;
    --section-bg: 0 0% 98%;
    --background-color: var(--white);
    /* ================================ Box Shadow Start =============================== */
    --header-box-shadow: 0px -1px 15px 3px hsl(var(--black) / 0.3);
    --mobile-box-shadow: 0px -1px 5px 0px hsl(var(--black) / 0.92);
    --box-shadow: 0px 2px 15px hsl(var(--black) / 0.05);
    /* ================================ Box Shadow End =============================== */
    /* ============================== Bootstrap Modifier Start ============================== */
    /* Primary Color */
    --primary-h: 238;
    --primary-s: 100%;
    --primary-l: 40%;
    --primary: var(--primary-h) var(--primary-s) var(--primary-l);
    --primary-d-100: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.1);
    --primary-d-200: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.2);
    --primary-d-300: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.3);
    --primary-d-400: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.4);
    --primary-d-500: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.5);
    --primary-l-100: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.1);
    --primary-l-200: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.2);
    --primary-l-300: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.3);
    --primary-l-400: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.4);
    --primary-l-500: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.5);
    /* Secondary Color */
    --secondary-h: 208;
    --secondary-s: 7%;
    --secondary-l: 46%;
    --secondary: var(--secondary-h) var(--secondary-s) var(--secondary-l);
    --secondary-d-100: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.1);
    --secondary-d-200: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.2);
    --secondary-d-300: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.3);
    --secondary-d-400: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.4);
    --secondary-d-500: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.5);
    --secondary-l-100: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.1);
    --secondary-l-200: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.2);
    --secondary-l-300: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.3);
    --secondary-l-400: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.4);
    --secondary-l-500: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.5);
    /* Success Color */
    --success-h: 112;
    --success-s: 100%;
    --success-l: 40%;
    --success: var(--success-h) var(--success-s) var(--success-l);
    --success-d-100: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.1);
    --success-d-200: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.2);
    --success-d-300: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.3);
    --success-d-400: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.4);
    --success-d-500: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.5);
    --success-l-100: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.1);
    --success-l-200: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.2);
    --success-l-300: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.3);
    --success-l-400: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.4);
    --success-l-500: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.5);
    /* Danger Color */
    --danger-h: 0;
    --danger-s: 96%;
    --danger-l: 63%;
    --danger: var(--danger-h) var(--danger-s) var(--danger-l);
    --danger-d-100: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.1);
    --danger-d-200: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.2);
    --danger-d-300: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.3);
    --danger-d-400: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.4);
    --danger-d-500: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.5);
    --danger-l-100: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.1);
    --danger-l-200: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.2);
    --danger-l-300: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.3);
    --danger-l-400: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.4);
    --danger-l-500: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.5);
    /* Warning Color */
    --warning-h: 40;
    --warning-s: 100%;
    --warning-l: 46%;
    --warning: var(--warning-h) var(--warning-s) var(--warning-l);
    --warning-d-100: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.1);
    --warning-d-200: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.2);
    --warning-d-300: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.3);
    --warning-d-400: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.4);
    --warning-d-500: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.5);
    --warning-l-100: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.1);
    --warning-l-200: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.2);
    --warning-l-300: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.3);
    --warning-l-400: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.4);
    --warning-l-500: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.5);
    /* Info Color */
    --info-h: 196;
    --info-s: 100%;
    --info-l: 50%;
    --info: var(--info-h) var(--info-s) var(--info-l);
    --info-d-100: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.1);
    --info-d-200: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.2);
    --info-d-300: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.3);
    --info-d-400: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.4);
    --info-d-500: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.5);
    --info-l-100: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.1);
    --info-l-200: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.2);
    --info-l-300: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.3);
    --info-l-400: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.4);
    --info-l-500: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.5);
    /* ============================== Bootstrap Modifier End ============================== */
}

/* ========================= Css Variables End =========================== */

/* ========================= Common Class Start =========================== */
/* Fully Fit image Css */
.fit-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

/* ============================= Display Flex Css Start ============================= */
.flex-wrap,
.form--radio,
.form--check {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-align,
.action-buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.flex-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.flex-between {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* ============================= Display Flex Css End ============================= */
/* ============================= Positioning Css Class Start ===================== */
.pa-extend,
.alert__link::before {
    position: absolute;
    content: "";
}

.top-center-extend,
.custom--accordion .accordion-button[aria-expanded=true]::after,
.custom--accordion .accordion-button[aria-expanded=false]::after {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.left-center-extend {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.top-left-center-extend {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* ============================= Positioning Css Class End ===================== */
/* ===================== Font Size For responsive devices Start =================== */
.fs-10 {
    font-size: 0.625rem;
}

.fs-11 {
    font-size: 0.6875rem;
}

.fs-12 {
    font-size: 0.75rem;
}

.fs-13 {
    font-size: 0.8125rem;
}

.fs-14 {
    font-size: 0.875rem;
}

.fs-15 {
    font-size: 0.9375rem;
}

.fs-16 {
    font-size: 1rem;
}

@media screen and (max-width: 1199px) {
    .fs-16 {
        font-size: 0.9375rem;
    }
}

.fs-17 {
    font-size: 1.0625rem;
}

@media screen and (max-width: 1199px) {
    .fs-17 {
        font-size: 1rem;
    }
}

@media screen and (max-width: 767px) {
    .fs-17 {
        font-size: 0.9375rem;
    }
}

.fs-18 {
    font-size: 1.125rem;
}

@media screen and (max-width: 1399px) {
    .fs-18 {
        font-size: 1.0625rem;
    }
}

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

.fs-20 {
    font-size: 1.25rem;
}

@media screen and (max-width: 1399px) {
    .fs-20 {
        font-size: 1.125rem;
    }
}

@media screen and (max-width: 767px) {
    .fs-20 {
        font-size: 1.0625rem;
    }
}

/* ===================== Font Size For responsive devices End =================== */

/* ========================= Common Class Start =========================== */

/* ================================= Common Typography Css Start =========================== */
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: var(--body-font);
    color: hsl(var(--heading-color));
    word-break: break-word;
    background-color: var(--background-color);
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

p {
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    color: hsl(var(--text-color));
}

span {
    display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 20px 0;
    font-family: var(--heading-font);
    color: hsl(var(--heading-color));
    line-height: 1.3;
    font-weight: 600;
}

@media screen and (max-width: 767px) {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0 0 15px 0;
    }
}

h1 {
    font-size: 3.75rem;
}

@media screen and (max-width: 1399px) {
    h1 {
        font-size: 3.125rem;
    }
}

@media screen and (max-width: 1199px) {
    h1 {
        font-size: 2.8125rem;
    }
}

@media screen and (max-width: 991px) {
    h1 {
        font-size: 2.5rem;
    }
}

@media screen and (max-width: 767px) {
    h1 {
        font-size: 2.1875rem;
    }
}

@media screen and (max-width: 575px) {
    h1 {
        font-size: 1.875rem;
    }
}

h2 {
    font-size: 2.5rem;
}

@media screen and (max-width: 1399px) {
    h2 {
        font-size: 2.8125rem;
    }
}

@media screen and (max-width: 1199px) {
    h2 {
        font-size: 2.5rem;
    }
}

@media screen and (max-width: 991px) {
    h2 {
        font-size: 2.1875rem;
    }
}

@media screen and (max-width: 767px) {
    h2 {
        font-size: 1.875rem;
    }
}

@media screen and (max-width: 575px) {
    h2 {
        font-size: 1.5625rem;
    }
}

h3 {
    font-size: 1.875rem;
}

@media screen and (max-width: 1399px) {
    h3 {
        font-size: 1.75rem;
    }
}

@media screen and (max-width: 1199px) {
    h3 {
        font-size: 1.5625rem;
    }
}

@media screen and (max-width: 991px) {
    h3 {
        font-size: 1.4375rem;
    }
}

@media screen and (max-width: 767px) {
    h3 {
        font-size: 1.375rem;
    }
}

@media screen and (max-width: 575px) {
    h3 {
        font-size: 1.25rem;
    }
}

h4 {
    font-size: 1.5rem;
}

@media screen and (max-width: 1399px) {
    h4 {
        font-size: 1.3125rem;
    }
}

@media screen and (max-width: 1199px) {
    h4 {
        font-size: 1.25rem;
    }
}

@media screen and (max-width: 991px) {
    h4 {
        font-size: 1.1875rem;
    }
}

@media screen and (max-width: 767px) {
    h4 {
        font-size: 1.125rem;
    }
}

@media screen and (max-width: 575px) {
    h4 {
        font-size: 1.0625rem;
    }
}

h5 {
    font-size: 1.25rem;
}

@media screen and (max-width: 1399px) {
    h5 {
        font-size: 1.1875rem;
    }
}

@media screen and (max-width: 1199px) {
    h5 {
        font-size: 1.125rem;
    }
}

@media screen and (max-width: 991px) {
    h5 {
        font-size: 1.0625rem;
    }
}

@media screen and (max-width: 767px) {
    h5 {
        font-size: 1rem;
    }
}

@media screen and (max-width: 575px) {
    h5 {
        font-size: 1rem;
    }
}

h6 {
    font-size: 1rem;
}

@media screen and (max-width: 1399px) {
    h6 {
        font-size: 1rem;
    }
}

@media screen and (max-width: 1199px) {
    h6 {
        font-size: 0.9375rem;
    }
}

@media screen and (max-width: 991px) {
    h6 {
        font-size: 0.875rem;
    }
}

@media screen and (max-width: 767px) {
    h6 {
        font-size: 0.875rem;
    }
}

@media screen and (max-width: 575px) {
    h6 {
        font-size: 0.875rem;
    }
}

h1>a,
h2>a,
h3>a,
h4>a,
h5>a,
h6>a {
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    -webkit-transition: 0.2s linear;
    transition: 0.2s linear;
    line-height: inherit;
}

a {
    display: inline-block;
    -webkit-transition: 0.2s linear;
    transition: 0.2s linear;
    text-decoration: none;
    color: hsl(var(--info));
}

a:hover {
    color: hsl(var(--base));
}

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

select {
    cursor: pointer;
}

ul,
ol {
    padding: 0;
    margin: 0;
    list-style: none;
}

button {
    border: 0;
    background-color: transparent;
}

button:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form-select:focus {
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.dashboard-body h1,
.dashboard-body h2,
.dashboard-body h3,
.dashboard-body h4,
.dashboard-body h5,
.dashboard-body h6 {
    font-family: var(--body-font);
}

/* ================================= Common Typography Css End =========================== */
/* ================================= Custom Classes Css Start =========================== */
/* Column Extra Small Screen */
@media screen and (min-width: 425px) and (max-width: 575px) {
    .col-xsm-6 {
        width: 50%;
    }
}

/* Section Background */
.section-bg {
    background-color: hsl(var(--section-bg));
}

.text-muted {
    color: hsl(var(--white)/0.6) !important;
}

/* Hide Scroll bar Css For Custom Modal */
.scroll-hide {
    position: absolute;
    overflow-y: hidden;
    padding-right: 17px;
    top: 0;
    left: 0;
    width: 100%;
}

@media screen and (max-width: 991px) {
    .scroll-hide {
        padding-right: 0;
    }
}

.scroll-hide-sm {
    position: absolute;
    overflow-y: hidden;
    top: 0;
    left: 0;
    width: calc(100% - 0px);
}

/* Overlay Start */
.body-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    content: "";
    left: 0;
    top: 0;
    background-color: hsl(var(--black)/0.8);
    z-index: 99;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    -webkit-transition: 0.2s linear;
    transition: 0.2s linear;
    visibility: hidden;
    opacity: 0;
}

.body-overlay.show-overlay {
    visibility: visible;
    opacity: 1;
}

.gradient-text {
    background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(var(--base-d-200))), to(hsl(var(--base))));
    background-image: linear-gradient(180deg, hsl(var(--base-d-200)) 0%, hsl(var(--base)) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.gradient-text::-moz-selection {
    color: hsl(var(--white));
    -webkit-text-fill-color: hsl(var(--white));
    background: transparent;
}

.gradient-text::selection {
    color: hsl(var(--white));
    -webkit-text-fill-color: hsl(var(--white));
    background: transparent;
}

.sidebar-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    content: "";
    left: 0;
    top: 0;
    background-color: hsl(var(--black)/0.6);
    z-index: 99;
    -webkit-transition: 0.2s linear;
    transition: 0.2s linear;
    visibility: hidden;
    opacity: 0;
}

.sidebar-overlay.show {
    visibility: visible;
    opacity: 1;
    z-index: 999;
}

/* Overlay End */
/* ================================= Custom Classes Css End =========================== */
/* ====================== Common Button CSS Start ==================== */
.common__btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0.0625rem;
    position: relative;
    z-index: 1;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.common__btn span:first-child {
    width: 6.25rem;
    height: 3.25rem;
    background-color: #2f6fc0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 2.5rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    text-transform: capitalize;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.common__btn span:last-child {
    width: 3.25rem;
    height: 3.25rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 1.25rem;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.common__btn span:last-child::after {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #2f6fc0;
    content: "";
    z-index: -1;
    -webkit-transition: all 0s ease;
    transition: all 0s ease;
}

.common__btn:hover span:last-child::after {
    width: 60%;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

.common__btn span:last-child i {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.common__btn::after {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: 0%;
    background-color: #2f6fc0;
    border-radius: 2.5rem;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    content: "";
    z-index: -1;
}

.common__btn:hover {
    gap: 0;
}

.common__btn:hover::after {
    width: 100%;
    height: 100%;
}

.common__btn:hover span:last-child i {
    -webkit-transform: rotate(0deg) !important;
    transform: rotate(0deg) !important;
}

.common__btn:hover span:last-child {
    margin-left: -1.5625rem;
}

/* ====================== Common Button CSS End ==================== */
/* ====================== Cursor CSS Start ==================== */
.cursor {
    width: 1.25rem;
    height: 1.25rem;
    position: fixed;
    top: 0;
    left: 0;
    background-color: hsl(var(--heading-color)/0.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
}

@media screen and (max-width: 991px) {
    .cursor {
        display: none;
    }
}

/* ====================== Cursor CSS End ==================== */
/* ================================= Background Color Css Start =========================== */
.bg--base {
    background-color: hsl(var(--base)) !important;
}

.bg--primary {
    background-color: hsl(var(--primary)) !important;
}

.bg--secondary {
    background-color: hsl(var(--secondary)) !important;
}

.bg--success {
    background-color: hsl(var(--success)) !important;
}

.bg--danger {
    background-color: hsl(var(--danger)) !important;
}

.bg--warning {
    background-color: hsl(var(--warning)) !important;
}

.bg--info {
    background-color: hsl(var(--info)) !important;
}

/* ================================= Background Color Css End =========================== */
/* ================================= Color Css Start =========================== */
.text--base {
    color: hsl(var(--base)) !important;
}

.text--primary {
    color: hsl(var(--primary)) !important;
}

.text--secondary {
    color: hsl(var(--secondary)) !important;
}

.text--success {
    color: hsl(var(--success)) !important;
}

.text--danger {
    color: hsl(var(--danger)) !important;
}

.text--warning {
    color: hsl(var(--warning)) !important;
}

.text--info {
    color: hsl(var(--info)) !important;
}

/* ================================= Color Css End =========================== */
/* ================================= margin Css Start =========================== */
.my-120 {
    margin-top: 60px;
    margin-bottom: 60px;
}

@media (min-width: 576px) {
    .my-120 {
        margin-top: 80px;
        margin-bottom: 80px;
    }
}

@media (min-width: 992px) {
    .my-120 {
        margin-top: 120px;
        margin-bottom: 120px;
    }
}

.mt-120 {
    margin-top: 60px;
}

@media (min-width: 576px) {
    .mt-120 {
        margin-top: 80px;
    }
}

@media (min-width: 992px) {
    .mt-120 {
        margin-top: 120px;
    }
}

.mb-120 {
    margin-bottom: 60px;
}

@media (min-width: 576px) {
    .mb-120 {
        margin-bottom: 80px;
    }
}

@media (min-width: 992px) {
    .mb-120 {
        margin-bottom: 120px;
    }
}

.my-60 {
    margin-top: 30px;
    margin-bottom: 30px;
}

@media (min-width: 576px) {
    .my-60 {
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

@media (min-width: 992px) {
    .my-60 {
        margin-top: 60px;
        margin-bottom: 60px;
    }
}

.mt-60 {
    margin-top: 30px;
}

@media (min-width: 576px) {
    .mt-60 {
        margin-top: 40px;
    }
}

@media (min-width: 992px) {
    .mt-60 {
        margin-top: 60px;
    }
}

.mb-60 {
    margin-bottom: 30px;
}

@media (min-width: 576px) {
    .mb-60 {
        margin-bottom: 40px;
    }
}

@media (min-width: 992px) {
    .mb-60 {
        margin-bottom: 60px;
    }
}

/* ================================= margin Css End =========================== */
/* ================================= padding Css Start =========================== */
.py-120 {
    padding-top: 60px;
    padding-bottom: 60px;
}

@media (min-width: 576px) {
    .py-120 {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

@media (min-width: 992px) {
    .py-120 {
        padding-top: 120px;
        padding-bottom: 120px;
    }
}

.pt-120 {
    padding-top: 60px;
}

@media (min-width: 576px) {
    .pt-120 {
        padding-top: 80px;
    }
}

@media (min-width: 992px) {
    .pt-120 {
        padding-top: 120px;
    }
}

.pb-120 {
    padding-bottom: 60px;
}

@media (min-width: 576px) {
    .pb-120 {
        padding-bottom: 80px;
    }
}

@media (min-width: 992px) {
    .pb-120 {
        padding-bottom: 120px;
    }
}

.py-60 {
    padding-top: 30px;
    padding-bottom: 30px;
}

@media (min-width: 576px) {
    .py-60 {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

@media (min-width: 992px) {
    .py-60 {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

.pt-60 {
    padding-top: 30px;
}

@media (min-width: 576px) {
    .pt-60 {
        padding-top: 40px;
    }
}

@media (min-width: 992px) {
    .pt-60 {
        padding-top: 60px;
    }
}

.pb-60 {
    padding-bottom: 30px;
}

@media (min-width: 576px) {
    .pb-60 {
        padding-bottom: 40px;
    }
}

@media (min-width: 992px) {
    .pb-60 {
        padding-bottom: 60px;
    }
}

/* ================================= padding Css End =========================== */
/* ================================= Border Color Css Start =========================== */
.border--base {
    border-color: hsl(var(--base)) !important;
}

.border--primary {
    border-color: hsl(var(--primary)) !important;
}

.border--secondary {
    border-color: hsl(var(--secondary)) !important;
}

.border--success {
    border-color: hsl(var(--success)) !important;
}

.border--danger {
    border-color: hsl(var(--danger)) !important;
}

.border--warning {
    border-color: hsl(var(--warning)) !important;
}

.border--info {
    border-color: hsl(var(--info)) !important;
}

/* ================================= Border Color Css End =========================== */
/* =========================== Accordion Css start ============================= */
.custom--accordion .accordion-item {
    border: 1px solid hsl(var(--black)/0.09);
    background-color: transparent !important;
    border-radius: 5px;
    overflow: hidden;
}

.custom--accordion .accordion-item:not(:last-child) {
    margin-bottom: 20px;
}

.custom--accordion .accordion-header {
    line-height: 1;
}

.custom--accordion .accordion-body {
    padding: 20px;
    background-color: hsl(var(--section-bg));
}

.custom--accordion .accordion-body .text {
    max-width: 60%;
}

@media screen and (max-width: 575px) {
    .custom--accordion .accordion-body .text {
        max-width: 100%;
    }
}

.custom--accordion:first-of-type .accordion-button.collapsed {
    border-radius: 5px;
}

.custom--accordion:last-of-type .accordion-button.collapsed {
    border-radius: 5px;
}

.custom--accordion .accordion-button {
    background-color: hsl(var(--section-bg));
    color: var(--heading-color);
    font-size: 1.125rem;
    padding: 15px;
}

@media screen and (max-width: 575px) {
    .custom--accordion .accordion-button {
        padding: 13px;
        padding-right: 30px;
    }
}

.custom--accordion .accordion-button::after {
    background-image: none;
}

.custom--accordion .accordion-button:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.custom--accordion .accordion-button:not(.collapsed) {
    color: hsl(var(--white));
    background-color: hsl(var(--black)) !important;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.custom--accordion .accordion-button:not(.collapsed)::after {
    background-image: none;
    color: hsl(var(--base));
}

.custom--accordion .accordion-button[aria-expanded=true]::after,
.custom--accordion .accordion-button[aria-expanded=false]::after {
    font-family: "Line Awesome Free";
    font-weight: 900;
    content: "\f068";
    display: inline-block;
    position: absolute;
    right: 15px;
    height: unset;
}

.custom--accordion .accordion-button[aria-expanded=false]::after {
    content: "\f067";
    color: hsl(var(--body-color));
}

/* ================================= Accordion Css End =========================== */
/* ================================= Button Css Start =========================== */
.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    color: none;
    background-color: none;
    border-color: none;
}

.pill {
    border-radius: 40px !important;
}

.btn {
    color: hsl(var(--white)) !important;
    font-weight: 500;
    padding: 17px 29px;
    border-radius: 5px;
    position: relative;
    z-index: 1;
    border: 1px solid transparent;
    font-family: var(--body-font);
    display: inline-block !important;
    font-size: 1rem;
    line-height: 1;
}

@media screen and (max-width: 767px) {
    .btn {
        padding: 14px 25px;
        font-size: 0.875rem;
    }
}

@media screen and (max-width: 575px) {
    .btn {
        padding: 12px 20px;
    }
}

.btn:hover,
.btn:focus,
.btn:focus-visible {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btn:active {
    top: 1px;
}

.btn--lg {
    padding: 20px 35px;
}

@media screen and (max-width: 991px) {
    .btn--lg {
        padding: 18px 30px;
    }
}

@media screen and (max-width: 767px) {
    .btn--lg {
        padding: 16px 25px;
    }
}

.btn--sm {
    padding: 7px 18px;
    font-weight: 600;
    font-size: 0.75rem;
}

@media screen and (max-width: 767px) {
    .btn--sm {
        padding: 8px 12px;
    }
}

.btn--icon {
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 0.9375rem;
    padding: 0;
}

.btn--base {
    position: relative;
}

.btn--base::before,
.btn--base::after {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    background: -webkit-gradient(linear, left top, right top, from(hsl(var(--base-two))), to(hsl(var(--base))));
    background: linear-gradient(90deg, hsl(var(--base-two)) 0%, hsl(var(--base)) 100%);
    border-radius: inherit !important;
    z-index: -1;
    -webkit-transition: 0.2s linear;
    transition: 0.2s linear;
}

.btn--base::after {
    background: -webkit-gradient(linear, left top, right top, from(hsl(var(--base))), to(hsl(var(--base-two))));
    background: linear-gradient(90deg, hsl(var(--base)) 0%, hsl(var(--base-two)) 100%);
    visibility: hidden;
    opacity: 0;
}

.btn--base:hover::after,
.btn--base:focus::after,
.btn--base:focus-visible::after {
    visibility: visible;
    opacity: 1;
}

.btn-outline--base {
    background-color: transparent !important;
    border: 1px solid hsl(var(--base)) !important;
    color: hsl(var(--base)) !important;
    position: relative;
    -webkit-transition: 0.2s linear;
    transition: 0.2s linear;
}

.btn-outline--base::before,
.btn-outline--base::after {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    background: -webkit-gradient(linear, left top, right top, from(hsl(var(--base-two))), to(hsl(var(--base))));
    background: linear-gradient(90deg, hsl(var(--base-two)) 0%, hsl(var(--base)) 100%);
    border-radius: inherit !important;
    z-index: -1;
    -webkit-transition: 0.2s linear;
    transition: 0.2s linear;
    visibility: hidden;
    opacity: 0;
}

.btn-outline--base:hover,
.btn-outline--base:focus,
.btn-outline--base:focus-visible {
    color: hsl(var(--white)) !important;
}

.btn-outline--base:hover::before,
.btn-outline--base:hover::after,
.btn-outline--base:focus::before,
.btn-outline--base:focus::after,
.btn-outline--base:focus-visible::before,
.btn-outline--base:focus-visible::after {
    visibility: visible;
    opacity: 1;
}

.btn--primary {
    background-color: hsl(var(--primary)) !important;
}

.btn--primary:hover,
.btn--primary:focus .btn--primary:focus-visible {
    background-color: hsl(var(--primary-d-200)) !important;
    border: 1px solid hsl(var(--primary-d-200)) !important;
}

.btn-outline--primary {
    background-color: transparent !important;
    border: 1px solid hsl(var(--primary)) !important;
    color: hsl(var(--primary)) !important;
}

.btn-outline--primary:hover,
.btn-outline--primary:focus .btn-outline--primary:focus-visible {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--white)) !important;
}

.btn--secondary {
    background-color: hsl(var(--secondary)) !important;
}

.btn--secondary:hover,
.btn--secondary:focus .btn--secondary:focus-visible {
    background-color: hsl(var(--secondary-d-200)) !important;
    border: 1px solid hsl(var(--secondary-d-200)) !important;
}

.btn-outline--secondary {
    background-color: transparent !important;
    border: 1px solid hsl(var(--secondary)) !important;
    color: hsl(var(--secondary)) !important;
}

.btn-outline--secondary:hover,
.btn-outline--secondary:focus .btn-outline--secondary:focus-visible {
    background-color: hsl(var(--secondary)) !important;
    color: hsl(var(--white)) !important;
}

.btn--danger {
    background-color: hsl(var(--danger)) !important;
}

.btn--danger:hover,
.btn--danger:focus .btn--danger:focus-visible {
    background-color: hsl(var(--danger-d-200)) !important;
    border: 1px solid hsl(var(--danger-d-200)) !important;
}

.btn-outline--danger {
    background-color: transparent !important;
    border: 1px solid hsl(var(--danger)) !important;
    color: hsl(var(--danger)) !important;
}

.btn-outline--danger:hover,
.btn-outline--danger:focus .btn-outline--danger:focus-visible {
    background-color: hsl(var(--danger)) !important;
    color: hsl(var(--white)) !important;
}

.btn--warning {
    background-color: hsl(var(--warning)) !important;
}

.btn--warning:hover,
.btn--warning:focus .btn--warning:focus-visible {
    background-color: hsl(var(--warning-d-200)) !important;
    border: 1px solid hsl(var(--warning-d-200)) !important;
}

.btn-outline--warning {
    background-color: transparent !important;
    border: 1px solid hsl(var(--warning)) !important;
    color: hsl(var(--warning)) !important;
}

.btn-outline--warning:hover,
.btn-outline--warning:focus .btn-outline--warning:focus-visible {
    background-color: hsl(var(--warning)) !important;
    color: hsl(var(--white)) !important;
}

.btn--info {
    background-color: hsl(var(--info)) !important;
}

.btn--info:hover,
.btn--info:focus .btn--info:focus-visible {
    background-color: hsl(var(--info-d-200)) !important;
    border: 1px solid hsl(var(--info-d-200)) !important;
}

.btn-outline--info {
    background-color: transparent !important;
    border: 1px solid hsl(var(--info)) !important;
    color: hsl(var(--info)) !important;
}

.btn-outline--info:hover,
.btn-outline--info:focus .btn-outline--info:focus-visible {
    background-color: hsl(var(--info)) !important;
    color: hsl(var(--white)) !important;
}

/* ================================= Button Css End =========================== */
/* ================================= Card Css Start =========================== */
.custom--card {
    border-radius: 5px;
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    background-color: hsl(var(--white));
    border: transparent;
}

.custom--card .card-header {
    padding: 12px 24px;
    background-color: transparent;
    border-bottom: 1px solid hsl(var(--black)/0.1);
}

.custom--card .card-header .title {
    margin-bottom: 0;
}

.custom--card .card-body {
    background-color: hsl(var(--white));
    padding: 24px;
    border-radius: 5px;
}

.custom--card .card-footer {
    padding: 12px 24px;
    background-color: transparent;
    border-top: 1px solid hsl(var(--black)/0.1);
}

/* ================================= Card Css End =========================== */
/* ================================= Form Css Start =========================== */
/* Form Label */
.form--label {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    color: hsl(var(--heading-color));
    margin-bottom: 1rem;
    text-transform: capitalize;
}

@media screen and (max-width: 1199px) {
    .form--label {
        margin-bottom: 0.625rem;
    }
}

@media screen and (max-width: 991px) {
    .form--label {
        font-size: 0.875rem;
    }
}

.form-group {
    margin-bottom: 1rem;
}

/* Form Select */
.select {
    color: hsl(var(--black)/0.6) !important;
}

.select:focus {
    border-color: hsl(var(--base));
    color: hsl(var(--black)) !important;
}

.select option {
    background-color: hsl(var(--black));
    color: hsl(var(--white));
}

/* Form Select End */
/* Form Control Start */
.form--control {
    width: 100%;
    height: 4.875rem;
    border-radius: 1rem;
    border: 0.0625rem solid hsl(var(--heading-color)/0.1);
    font-size: 1rem;
    font-weight: 400;
    color: hsl(var(--text-color));
    outline: none;
    padding: 1.5rem 1.5rem;
    background-color: transparent;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

@media screen and (max-width: 1199px) {
    .form--control {
        border-radius: 0.625rem;
        height: 4.125rem;
        padding: 1.125rem 1.125rem;
    }
}

@media screen and (max-width: 991px) {
    .form--control {
        border-radius: 0.5rem;
        height: 3.75rem;
        padding: 1.125rem 1.125rem;
        font-size: 0.875rem;
    }
}

.form--control:focus {
    border-color: hsl(var(--heading-color)/0.5);
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: transparent;
}

.form--control:disabled,
.form--control[readonly] {
    background-color: hsl(var(--black)/0.2);
    opacity: 1;
    border: 0;
}

.form--control[type=password] {
    color: hsl(var(--black)/0.5);
}

.form--control[type=password]:focus {
    color: hsl(var(--black));
}

.form--control[type=file] {
    line-height: 50px;
    padding: 0;
    position: relative;
}

.form--control[type=file]::-webkit-file-upload-button {
    border: 1px solid hsl(var(--black)/0.08);
    padding: 4px 6px;
    border-radius: 0.2em;
    background-color: hsl(var(--base)) !important;
    -webkit-transition: 0.2s linear;
    transition: 0.2s linear;
    line-height: 25px;
    position: relative;
    margin-left: 15px;
    color: hsl(var(--body-color)) !important;
}

.form--control[type=file]::file-selector-button {
    border: 1px solid hsl(var(--black)/0.08);
    padding: 4px 6px;
    border-radius: 0.2em;
    background-color: hsl(var(--base)) !important;
    -webkit-transition: 0.2s linear;
    transition: 0.2s linear;
    line-height: 25px;
    position: relative;
    margin-left: 15px;
    color: hsl(var(--body-color)) !important;
}

.form--control[type=file]::-webkit-file-upload-button:hover {
    background-color: hsl(var(--base));
    border: 1px solid hsl(var(--base));
    color: hsl(var(--black));
}

.form--control[type=file]::file-selector-button:hover {
    background-color: hsl(var(--base));
    border: 1px solid hsl(var(--base));
    color: hsl(var(--black));
}

/* Form Control End */
textarea.form--control {
    height: 15.625rem;
    resize: none;
}

@media screen and (max-width: 1199px) {
    textarea.form--control {
        height: 12.5rem;
    }
}

@media screen and (max-width: 991px) {
    textarea.form--control {
        height: 10rem;
    }
}

/* Autofill Css */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: background-color 5000s ease-in-out 0s;
    transition: background-color 5000s ease-in-out 0s;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    -webkit-text-fill-color: hsl(var(--black)) !important;
    caret-color: hsl(var(--black));
}

/* Autofill Css End */
/* input group */
.input--group {
    position: relative;
}

/* Show Hide Password */
input#your-password,
input#confirm-password {
    padding-right: 50px;
}

.password-show-hide {
    position: absolute;
    right: 20px;
    z-index: 5;
    cursor: pointer;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: hsl(var(--black)/0.4);
}

/* --------------- Number Arrow None --------------------- */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type=number] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Custom Checkbox Design */
.form--check a {
    display: inline;
}

.form--check .form-check-input {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: transparent;
    box-shadow: none !important;
    border: 0;
    position: relative;
    border-radius: 0px;
    width: 16px;
    height: 16px;
    border: 1px solid hsl(var(--black)/0.2);
    cursor: pointer;
}

.form--check .form-check-input:checked {
    background-color: hsl(var(--base)) !important;
    border-color: hsl(var(--base)) !important;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form--check .form-check-input:checked[type=checkbox] {
    background-image: none;
}

.form--check .form-check-input:checked::before {
    position: absolute;
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: hsl(var(--white));
    font-size: 0.6875rem;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.form--check .form-check-label {
    font-weight: 600;
    width: calc(100% - 16px);
    padding-left: 12px;
    cursor: pointer;
    font-size: 0.875rem;
}

@media screen and (max-width: 424px) {
    .form--check label {
        font-size: 0.9375rem;
    }
}

@media screen and (max-width: 424px) {
    .form--check a {
        font-size: 0.9375rem;
    }
}

/* Custom Radio Design */
.form--radio .form-check-input {
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid hsl(var(--black)/0.2);
    position: relative;
    background-color: transparent;
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.form--radio .form-check-input:active {
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
}

.form--radio .form-check-input:checked {
    background-color: transparent;
    border-color: hsl(var(--base));
}

.form--radio .form-check-input:checked[type=radio] {
    background-image: none;
}

.form--radio .form-check-input:checked::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    background-color: hsl(var(--base));
    border-radius: 50%;
    z-index: 999;
}

.form--radio .form-check-label {
    font-weight: 600;
    width: calc(100% - 16px);
    padding-left: 12px;
    cursor: pointer;
    font-size: 0.875rem;
}

/*  Custom Switch Design */
.form--switch .form-check-input {
    border-radius: 3px;
    background-image: none;
    position: relative;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0;
    background-color: hsl(var(--black)/0.2) !important;
    padding: 10px !important;
    margin-left: 0;
    margin-bottom: 5px;
    border-radius: 40px;
    width: 70px;
    height: 38px;
    cursor: pointer;
}

.form--switch .form-check-input:focus {
    border-radius: 40px;
    background-image: none;
    position: relative;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0;
}

.form--switch .form-check-input::before {
    position: absolute;
    content: "";
    width: 28px;
    height: 28px;
    background-color: hsl(var(--white));
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 2px;
    left: 5px;
    border-radius: 50%;
    -webkit-transition: 0.2s linear;
    transition: 0.2s linear;
}

.form--switch .form-check-input:checked {
    background-color: hsl(var(--base)) !important;
}

.form--switch .form-check-input:checked::before {
    left: calc(100% - 33px);
    background-color: hsl(var(--white)) !important;
}

.form--switch .form-check-input:checked[type=checkbox] {
    background-image: none;
}

.form--switch .form-check-label {
    width: calc(100% - 14px);
    padding-left: 5px;
    cursor: pointer;
}

/*  Custom Switch End Design */
/* ================================= Form Css End =========================== */
/* --====================== Custom Input group Start ======================*/
.input--group {
    border-radius: 5px;
    border: 1px solid hsl(var(--border-color));
}

.input--group .form--control {
    border-width: 0px !important;
    padding-right: 5px;
    -webkit-box-shadow: unset;
    box-shadow: unset;
}

.input--group .input-group-text+.form--control {
    padding-right: 20px;
    padding-left: 10px;
}

.input--group:focus-within {
    border: 1px solid hsl(var(--base));
}

.input--group .input-group-text {
    border-width: 0px;
    height: calc(100% - 10px);
    margin: 5px;
    border-radius: 5px;
    background-color: hsl(var(--black)/0.1);
    color: hsl(var(--body-color));
}

.input--group-text {
    margin-left: 5px;
}

.input--group .form--control[readonly] {
    background: hsl(var(--black)/0.3) !important;
}

.input--group .form--control[readonly]:focus {
    border-color: hsl(var(--black)/0.3);
}

.input--group:has(.form--control[readonly]) {
    background: hsl(var(--black)/0.3) !important;
}

.input--group:has(.form--control[readonly]):focus-within {
    border-color: hsl(var(--black)/0.4) !important;
}

/* --======================Custom Input group End ======================*/
/* ================================= Modal Css Start =========================== */
.custom--modal .modal-header {
    border-bottom: 1px solid hsl(var(--black)/0.12);
    padding: 15px;
}

.custom--modal .modal-header.close {
    width: 35px;
    height: 35px;
    background-color: hsl(var(--danger));
    font-size: 1.5625rem;
    line-height: 1;
    border-radius: 4px;
    -webkit-transition: 0.2s linear;
    transition: 0.2s linear;
}

.custom--modal .modal-header.close:hover {
    background-color: hsl(var(--danger-l-100));
}

.custom--modal .modal-header.close :focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.custom--modal .modal-content {
    border-radius: 10px !important;
}

.custom--modal .modal-body {
    padding: 15px;
}

.custom--modal .modal-icon i {
    font-size: 2rem;
    color: hsl(var(--base));
    border: 3px solid hsl(var(--base));
    width: 50px;
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 50%;
}

.custom--modal .modal-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 15px;
    border-top: 1px solid hsl(var(--black)/0.12);
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

/* ================================= Modal Css End =========================== */
/* ================================= Table Css Start =========================== */
/* Table Content Css start */
@media screen and (max-width: 374px) {
    .customer {
        display: block;
        text-align: left;
    }
}

.customer__thumb {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
}

@media screen and (max-width: 374px) {
    .customer__thumb {
        margin-left: auto;
    }
}

.customer__content {
    width: calc(100% - 35px);
    padding-left: 15px;
    text-align: left;
}

@media screen and (max-width: 424px) {
    .customer__content {
        padding-left: 8px;
    }
}

@media screen and (max-width: 374px) {
    .customer__content {
        width: 100%;
        padding-left: 0px;
        padding-top: 5px;
    }
}

.customer__name {
    margin-bottom: 0;
    font-size: 0.8125rem;
    color: hsl(var(--black)/0.7);
}

.action-buttons {
    gap: 10px;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.action-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.edit-btn {
    color: hsl(var(--info));
    background-color: hsl(var(--info)/0.08);
}

.delete-btn {
    color: hsl(var(--danger));
    background-color: hsl(var(--danger)/0.08);
}

/* Table Content Css end */
/* Table Css Start */
.table {
    margin: 0;
    border-collapse: collapse;
    border-collapse: separate;
    border-spacing: 0px 0px;
}

.table thead tr th {
    background-color: hsl(var(--white));
    text-align: center;
    padding: 15px 20px;
    color: hsl(var(--black)/0.7);
    font-family: var(--heading-font);
    font-weight: 600;
    border-bottom: 0;
    max-width: 170px;
    font-size: 0.875rem;
    border: 1px solid hsl(var(--black)/0.08);
    background-color: hsl(var(--base)/0.03);
}

.table thead tr th:not(:first-child) {
    border-left: 0;
}

.table thead tr th:first-child {
    text-align: left;
    border-radius: 6px 0 0 0;
}

.table thead tr th:last-child {
    border-radius: 0 6px 0 0;
    text-align: right;
}

.table thead tr th:nth-child(2) {
    text-align: left;
}

.table tbody {
    border: 0 !important;
    background-color: hsl(var(--white));
}

.table tbody tr {
    border-bottom: 1px solid hsl(var(--black)/0.08);
}

.table tbody tr:last-child {
    border-bottom: 0;
}

.table tbody tr:last-child td {
    border-bottom: 1px solid hsl(var(--black)/0.08);
}

.table tbody tr:last-child td:first-child {
    border-radius: 0px 0 0 6px;
}

.table tbody tr:last-child td:last-child {
    border-radius: 0 0px 6px 0;
}

.table tbody tr td {
    text-align: center;
    vertical-align: middle;
    padding: 10px 15px;
    border-width: 1px;
    border: 0;
    font-family: var(--heading-font);
    color: hsl(var(--black)/0.7);
    font-weight: 500;
    max-width: 170px;
    font-size: 0.8125rem;
    border-bottom: 1px solid hsl(var(--black)/0.08);
    border-right: 1px solid hsl(var(--black)/0.08);
}

.table tbody tr td::before {
    content: attr(data-label);
    font-family: var(--heading-font);
    font-size: 0.9375rem;
    color: hsl(var(--black));
    font-weight: 500;
    display: none;
    width: 45% !important;
    text-align: left;
}

.table tbody tr td:first-child {
    text-align: left;
    border-left: 1px solid hsl(var(--black)/0.08);
    font-size: 0.875rem;
}

.table tbody tr td:last-child {
    text-align: right;
    border-right: 1px solid hsl(var(--black)/0.08);
}

@media screen and (max-width: 767px) {
    .table--responsive--md thead {
        display: none;
    }

    .table--responsive--md tbody tr {
        display: block;
    }

    .table--responsive--md tbody tr:last-child td {
        border-bottom: 0;
    }

    .table--responsive--md tbody tr td {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        gap: 15px;
        text-align: right;
        padding: 10px 15px;
        border: none;
        border-bottom: 1px solid hsl(var(--black)/0.8);
        max-width: unset;
    }

    .table--responsive--md tbody tr td:last-child {
        border: none;
    }

    .table--responsive--md tbody tr td:first-child {
        text-align: right;
        border-left: 0;
    }

    .table--responsive--md tbody tr td::before {
        display: block;
        font-size: 0.875rem;
        color: hsl(var(--black)/0.7);
    }
}

@media screen and (max-width: 767px) {
    .table--responsive--md tbody tr td {
        border: 0;
    }
}

@media screen and (max-width: 991px) {
    .table--responsive--lg thead {
        display: none;
    }

    .table--responsive--lg tbody tr {
        display: block;
    }

    .table--responsive--lg tbody tr:nth-child(even) {
        background-color: hsl(var(--black)/0.02);
    }

    .table--responsive--lg tbody tr:last-child td {
        border-bottom: 0;
    }

    .table--responsive--lg tbody tr td {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        gap: 15px;
        text-align: right;
        padding: 10px 15px;
        border: none;
        border-bottom: 1px solid hsl(var(--black)/0.08);
        max-width: unset;
    }

    .table--responsive--lg tbody tr td:last-child {
        border: none;
    }

    .table--responsive--lg tbody tr td:first-child {
        text-align: right;
        border-left: 0;
    }

    .table--responsive--lg tbody tr td::before {
        display: block;
        font-size: 0.875rem;
        color: hsl(var(--black)/0.7);
    }
}

@media screen and (max-width: 991px) {
    .table--responsive--lg tbody tr td {
        border: none;
    }
}

@media screen and (max-width: 1199px) {
    .table--responsive--xl thead {
        display: none;
    }

    .table--responsive--xl tbody tr {
        display: block;
    }

    .table--responsive--xl tbody tr:nth-child(even) {
        background-color: hsl(var(--black)/0.02);
    }

    .table--responsive--xl tbody tr td {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        gap: 15px;
        text-align: right;
        padding: 10px 15px;
        border: none;
        border-bottom: 1px solid hsl(var(--black)/0.08);
        max-width: unset;
    }

    .table--responsive--xl tbody tr td:last-child {
        border: none;
    }

    .table--responsive--xl tbody tr td:first-child {
        text-align: right;
        border-left: 0;
    }

    .table--responsive--xl tbody tr td::before {
        display: block;
        font-size: 0.875rem;
        color: hsl(var(--black)/0.7);
    }
}

@media screen and (max-width: 1199px) {
    .table--responsive--xl tbody tr td {
        border: 0;
    }
}

@media screen and (max-width: 1399px) {
    .table--responsive--xxl thead {
        display: none;
    }

    .table--responsive--xxl tbody tr {
        display: block;
    }

    .table--responsive--xxl tbody tr:last-child td {
        border-bottom: 0;
    }

    .table--responsive--xxl tbody tr td {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        gap: 15px;
        text-align: right;
        padding: 10px 15px;
        border: none;
        border-bottom: 1px solid hsl(var(--black)/0.08);
        max-width: unset;
    }

    .table--responsive--xxl tbody tr td:last-child {
        border: none;
    }

    .table--responsive--xxl tbody tr td:first-child {
        text-align: right;
        border-left: 0;
    }

    .table--responsive--xxl tbody tr td::before {
        display: block;
        font-size: 0.875rem;
        color: hsl(var(--black)/0.7);
    }
}

@media screen and (max-width: 1399px) {
    .table--responsive--xxl tbody tr td {
        border: 0;
    }
}

/* ================================= Table Css End =========================== */
/* ================================= Badge Css Start =========================== */
.custom--badge {
    font-size: 0.75rem;
    border-radius: 5px;
    padding: 8px 10px;
    font-weight: 500;
    position: relative;
    text-align: center;
}

.badge--base {
    background-color: hsl(var(--base)/0.15) !important;
    color: hsl(var(--base)) !important;
}

.badge--primary {
    background-color: hsl(var(--primary)/0.15) !important;
    color: hsl(var(--primary)) !important;
}

.badge--secondary {
    background-color: hsl(var(--secondary)/0.15) !important;
    color: hsl(var(--secondary)) !important;
}

.badge--success {
    background-color: hsl(var(--success)/0.15) !important;
    color: hsl(var(--success)) !important;
}

.badge--danger {
    background-color: hsl(var(--danger)/0.15) !important;
    color: hsl(var(--danger)) !important;
}

.badge--warning {
    background-color: hsl(var(--warning)/0.15) !important;
    color: hsl(var(--warning)) !important;
}

.badge--info {
    background-color: hsl(var(--info)/0.15) !important;
    color: hsl(var(--info)) !important;
}

/* ================================= Badge Css End =========================== */
/* ====================================== Alert Css Start =============================== */
.alert {
    margin-bottom: 0;
    background-color: hsl(var(--white)) !important;
    font-weight: 400;
    padding: 17px 24px;
    border-radius: 5px;
}

@media screen and (max-width: 991px) {
    .alert {
        padding: 16px;
    }
}

@media screen and (max-width: 575px) {
    .alert {
        padding: 12px;
    }
}

.alert__icon {
    font-size: 1.5rem;
    line-height: 1;
}

.alert__content {
    width: calc(100% - 24px);
    padding-left: 32px;
}

@media screen and (max-width: 991px) {
    .alert__content {
        padding-left: 16px;
    }
}

@media screen and (max-width: 575px) {
    .alert__content {
        padding-left: 0;
        width: 100%;
        margin-top: 6px;
    }
}

.alert__title {
    font-size: 1rem;
    color: hsl(var(--base-two)/0.8);
    font-weight: 600;
    font-family: var(--heading-font);
    margin-bottom: 6px;
}

.alert__desc {
    color: hsl(var(--base-two)/0.5);
    display: block;
    line-height: 1.375;
}

@media screen and (max-width: 424px) {
    .alert__desc {
        font-size: 0.8125rem;
    }
}

.alert__link {
    position: relative;
}

.alert__link:hover::before {
    visibility: visible;
    opacity: 1;
    bottom: 0;
}

.alert__link::before {
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 1px;
    background-color: hsl(var(--base));
    visibility: hidden;
    opacity: 0;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}

.alert--base {
    border-color: hsl(var(--base)/0.6);
}

.alert--base .alert__icon {
    color: hsl(var(--base));
}

.alert--primary {
    border-color: hsl(var(--primary)/0.6);
}

.alert--primary .alert__icon {
    color: hsl(var(--primary));
}

.alert--success {
    border-color: hsl(var(--success)/0.6);
}

.alert--success .alert__icon {
    color: hsl(var(--success));
}

.alert--info {
    border-color: hsl(var(--info)/0.6);
}

.alert--info .alert__icon {
    color: hsl(var(--info));
}

.alert--danger {
    border-color: hsl(var(--danger)/0.6);
}

.alert--danger .alert__icon {
    color: hsl(var(--danger));
}

.alert--warning {
    border-color: hsl(var(--warning)/0.6);
}

.alert--warning .alert__icon {
    color: hsl(var(--warning));
}

.alert--secondary {
    border-color: hsl(var(--secondary)/0.6);
}

.alert--secondary .alert__icon {
    color: hsl(var(--secondary));
}

/* ====================================== Alert Css End =============================== */
/* ================================= Preloader Css Start =========================== */
.preloader {
    position: fixed;
    z-index: 999999;
    background-color: hsl(var(--black)/0.8);
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    overflow: hidden;
}

body.loading-s {
    overflow: hidden;
}

.animation-container {
    display: block;
    position: relative;
    width: 800px;
    max-width: 100%;
    margin: 0 auto;
    top: 50%;
    -webkit-transform: translateY(-50%) scale(0.8);
    transform: translateY(-50%) scale(0.8);
}

@media screen and (max-width: 1199px) {
    .animation-container {
        -webkit-transform: translateY(-50%) scale(0.6);
        transform: translateY(-50%) scale(0.6);
    }
}

@media screen and (max-width: 991px) {
    .animation-container {
        -webkit-transform: translateY(-50%) scale(0.4);
        transform: translateY(-50%) scale(0.4);
    }
}

@media screen and (max-width: 767px) {
    .animation-container {
        -webkit-transform: translateY(-50%) scale(0.2);
        transform: translateY(-50%) scale(0.2);
    }
}

@media screen and (max-width: 575px) {
    .animation-container {
        margin-left: -40px;
    }
}

.animation-container .lightning-container {
    position: absolute;
    top: 50%;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.animation-container .lightning-container .lightning {
    position: absolute;
    display: block;
    height: 12px;
    width: 12px;
    border-radius: 12px;
    -webkit-transform-origin: 6px 6px;
    transform-origin: 6px 6px;
    -webkit-animation-name: woosh;
    animation-name: woosh;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

.animation-container .lightning-container .lightning.white {
    background-color: hsl(var(--white));
    -webkit-box-shadow: 0px 50px 50px 0px hsl(var(--white)/0.3);
    box-shadow: 0px 50px 50px 0px hsl(var(--white)/0.3);
}

.animation-container .lightning-container .lightning.red {
    background-color: hsl(var(--base));
    -webkit-box-shadow: 0px 50px 50px 0px hsl(var(--base)/0.3);
    box-shadow: 0px 50px 50px 0px hsl(var(--base)/0.3);
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.animation-container .boom-container {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 80px;
    height: 80px;
    text-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 200px;
    top: -145px;
}

.animation-container .boom-container .shape {
    display: inline-block;
    position: relative;
    opacity: 0;
    -webkit-transform-origin: center center;
    transform-origin: center center;
}

.animation-container .boom-container .shape.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    -webkit-transform-origin: 50% 80%;
    transform-origin: 50% 80%;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    margin-left: -15px;
    border-width: 0 2.5px 5px 2.5px;
    border-color: transparent transparent hsl(var(--base)) transparent;
    -webkit-animation-name: boom-triangle;
    animation-name: boom-triangle;
}

.animation-container .boom-container .shape.triangle.big {
    margin-left: -25px;
    border-width: 0 5px 10px 5px;
    border-color: transparent transparent hsl(var(--base-two)) transparent;
    -webkit-animation-name: boom-triangle-big;
    animation-name: boom-triangle-big;
}

.animation-container .boom-container .shape.disc {
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: #d15df4;
    -webkit-animation-name: boom-disc;
    animation-name: boom-disc;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animation-container .boom-container .shape.circle {
    width: 20px;
    height: 20px;
    -webkit-animation-name: boom-circle;
    animation-name: boom-circle;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    border-radius: 100%;
    margin-left: -30px;
}

.animation-container .boom-container .shape.circle.white {
    border: 1px solid hsl(var(--white));
}

.animation-container .boom-container .shape.circle.big {
    width: 40px;
    height: 40px;
    margin-left: 0px;
}

.animation-container .boom-container .shape.circle.big.white {
    border: 2px solid hsl(var(--white));
}

.animation-container .boom-container .shape:after {
    background-color: rgba(176, 214, 232, 0.2);
}

.animation-container .boom-container .shape.triangle,
.animation-container .boom-container .shape.circle,
.animation-container .boom-container .shape.circle.big,
.animation-container .boom-container .shape.disc {
    -webkit-animation-delay: 0.38s;
    animation-delay: 0.38s;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}

.animation-container .boom-container .shape.circle {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.animation-container .boom-container.second {
    left: 485px;
    top: 155px;
}

.animation-container .boom-container.second .shape.triangle,
.animation-container .boom-container.second .shape.circle,
.animation-container .boom-container.second .shape.circle.big,
.animation-container .boom-container.second .shape.disc {
    -webkit-animation-delay: 1.9s;
    animation-delay: 1.9s;
}

.animation-container .boom-container.second .shape.circle {
    -webkit-animation-delay: 2.15s;
    animation-delay: 2.15s;
}

@-webkit-keyframes woosh {
    0% {
        width: 12px;
        -webkit-transform: translate(0px, 0px) rotate(-35deg);
        transform: translate(0px, 0px) rotate(-35deg);
    }

    15% {
        width: 50px;
    }

    30% {
        width: 12px;
        -webkit-transform: translate(214px, -150px) rotate(-35deg);
        transform: translate(214px, -150px) rotate(-35deg);
    }

    30.1% {
        -webkit-transform: translate(214px, -150px) rotate(46deg);
        transform: translate(214px, -150px) rotate(46deg);
    }

    50% {
        width: 110px;
    }

    70% {
        width: 12px;
        -webkit-transform: translate(500px, 150px) rotate(46deg);
        transform: translate(500px, 150px) rotate(46deg);
    }

    70.1% {
        -webkit-transform: translate(500px, 150px) rotate(-37deg);
        transform: translate(500px, 150px) rotate(-37deg);
    }

    85% {
        width: 50px;
    }

    100% {
        width: 12px;
        -webkit-transform: translate(700px, 0) rotate(-37deg);
        transform: translate(700px, 0) rotate(-37deg);
    }
}

@keyframes woosh {
    0% {
        width: 12px;
        -webkit-transform: translate(0px, 0px) rotate(-35deg);
        transform: translate(0px, 0px) rotate(-35deg);
    }

    15% {
        width: 50px;
    }

    30% {
        width: 12px;
        -webkit-transform: translate(214px, -150px) rotate(-35deg);
        transform: translate(214px, -150px) rotate(-35deg);
    }

    30.1% {
        -webkit-transform: translate(214px, -150px) rotate(46deg);
        transform: translate(214px, -150px) rotate(46deg);
    }

    50% {
        width: 110px;
    }

    70% {
        width: 12px;
        -webkit-transform: translate(500px, 150px) rotate(46deg);
        transform: translate(500px, 150px) rotate(46deg);
    }

    70.1% {
        -webkit-transform: translate(500px, 150px) rotate(-37deg);
        transform: translate(500px, 150px) rotate(-37deg);
    }

    85% {
        width: 50px;
    }

    100% {
        width: 12px;
        -webkit-transform: translate(700px, 0) rotate(-37deg);
        transform: translate(700px, 0) rotate(-37deg);
    }
}

@-webkit-keyframes boom-circle {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    30% {
        opacity: 0;
        -webkit-transform: scale(3);
        transform: scale(3);
    }
}

@keyframes boom-circle {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    30% {
        opacity: 0;
        -webkit-transform: scale(3);
        transform: scale(3);
    }
}

@-webkit-keyframes boom-triangle-big {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    40% {
        opacity: 0;
        -webkit-transform: scale(2.5) translate(50px, -50px) rotate(360deg);
        transform: scale(2.5) translate(50px, -50px) rotate(360deg);
    }
}

@keyframes boom-triangle-big {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    40% {
        opacity: 0;
        -webkit-transform: scale(2.5) translate(50px, -50px) rotate(360deg);
        transform: scale(2.5) translate(50px, -50px) rotate(360deg);
    }
}

@-webkit-keyframes boom-triangle {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    30% {
        opacity: 0;
        -webkit-transform: scale(3) translate(20px, 40px) rotate(360deg);
        transform: scale(3) translate(20px, 40px) rotate(360deg);
    }
}

@keyframes boom-triangle {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    30% {
        opacity: 0;
        -webkit-transform: scale(3) translate(20px, 40px) rotate(360deg);
        transform: scale(3) translate(20px, 40px) rotate(360deg);
    }
}

@-webkit-keyframes boom-disc {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    40% {
        opacity: 0;
        -webkit-transform: scale(2) translate(-70px, -30px);
        transform: scale(2) translate(-70px, -30px);
    }
}

@keyframes boom-disc {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    40% {
        opacity: 0;
        -webkit-transform: scale(2) translate(-70px, -30px);
        transform: scale(2) translate(-70px, -30px);
    }
}

/* ================================= Preloader Css End ===========================  */
/* ============= Header Css Start Here ======================= */
.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-brand.logo img {
    max-width: 10.5rem;
    max-height: 3.75rem;
}

@media screen and (max-width: 991px) {
    .navbar-brand.logo img {
        max-width: 9rem;
    }
}

.header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 99;
}

@media screen and (max-width: 991px) {
    .header {
        top: 0;
        background-color: hsl(var(--white)/0.2);
        padding: 0.3125rem 0;
        position: absolute;
        left: 0;
        right: 0;
        z-index: 999;
        max-height: 101vh;
        overflow-y: auto;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .header::-webkit-scrollbar {
        width: 0.3125rem;
        height: 0.3125rem;
    }

    .header::-webkit-scrollbar-thumb {
        border-radius: 0;
    }
}

.header .header__fm {
    display: none;
}

.header.fixed-header {
    background-color: transparent;
    position: fixed;
    top: 1.25rem;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.header.fixed-header .navbar-brand {
    display: none;
}

.header.fixed-header .navbar__widgets {
    display: none;
    font-size: 1.25rem;
    color: hsl(var(--heading-color));
}

.header.fixed-header .navbar {
    background-color: hsl(var(--white)/0.5);
    border-radius: 0.875rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 0rem 2rem;
    -webkit-backdrop-filter: blur(0.625rem);
    backdrop-filter: blur(0.625rem);
    -webkit-transition: 0.3s;
    transition: 0.3s;
    border: 0.0625rem solid hsl(var(--black)/0.03);
}

.header.fixed-header .nav-link {
    padding: 1.25rem 0 !important;
}

.header.fixed-header .header__fm {
    display: block;
}

.navbar {
    background-color: transparent;
    border-radius: 0.875rem;
}

.navbar .navbar__widgets {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1.25rem;
}

.navbar .navbar__widgets__select {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.375rem;
}

.navbar .navbar__widgets__select>span {
    max-width: 0.875rem;
    margin-top: -0.125rem;
}

.navbar .navbar__widgets__select .nice-select {
    background-color: transparent;
    border-radius: 0;
    border: none;
    font-size: 1rem;
    font-weight: 400;
    padding-left: 0;
    padding-right: 1.5rem;
    color: hsl(var(--heading-color));
    text-transform: capitalize;
    height: auto;
    line-height: normal;
}

.navbar .navbar__widgets__select .nice-select:after {
    border-top: 0.3125rem solid hsl(var(--heading-color));
    border-right: 0.3125rem solid transparent;
    right: 0.625rem;
    margin-top: -0.125rem;
    top: 50%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border-left: 0.3125rem solid transparent;
    border-bottom: none;
}

.navbar .navbar__widgets__select .nice-select.open:after {
    -webkit-transform: rotate(184deg) !important;
    transform: rotate(184deg) !important;
    margin-top: -0.25rem;
    right: 0.75rem;
}

.navbar .navbar__widgets__select .nice-select .list {
    background-color: hsl(var(--black)/0.05);
    border: 0.0625rem solid hsl(var(--black)/0.04);
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-backdrop-filter: blur(0.375rem);
    backdrop-filter: blur(0.375rem);
    margin-top: 0.625rem;
    padding: 0.375rem;
    color: hsl(var(--heading-color));
}

.navbar .navbar__widgets__select .nice-select .list .option {
    cursor: pointer;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: capitalize;
    border-radius: 0.1875rem;
    margin-bottom: 0.3125rem;
    background-color: hsl(var(--white)/0.8) !important;
    -webkit-box-shadow: 0 0.125rem 0.25rem hsl(var(--black)/0.03);
    box-shadow: 0 0.125rem 0.25rem hsl(var(--black)/0.03);
}

.navbar .navbar__widgets__select .nice-select .list .option.selected {
    background-color: hsl(var(--base)) !important;
}

.navbar .navbar__widgets__select .nice-select .list .option:hover,
.navbar .navbar__widgets__select .nice-select .list .option.focus {
    background-color: hsl(var(--base)) !important;
}

.navbar .navbar__widgets__btn {
    min-width: 9.6875rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

/* ========================= Desktop Device Start ========================= */
@media (min-width: 992px) {
    .nav-menu {
        padding-top: 0;
        padding-bottom: 0;
    }

    .nav-menu .nav-item {
        position: relative;
        padding-right: 1.875rem;
    }

    .nav-menu .nav-item:last-child {
        padding-right: 0;
    }

    .nav-menu .nav-item.active .nav-link {
        color: hsl(var(--text-color)/0.6) !important;
    }

    .nav-menu .nav-item:hover .nav-link .nav-item__icon {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        -webkit-transition: 0.2s;
        transition: 0.2s;
    }

    .nav-menu .nav-item .nav-link {
        font-family: var(--heading-font);
        font-weight: 500;
        font-size: 1rem;
        color: hsl(var(--heading-color)) !important;
        padding: 1.75rem 0;
        position: relative;
        cursor: pointer;
        /* ======================== Style two ================ */
    }

    .nav-menu .nav-item .nav-link.flip-animate {
        -webkit-perspective: 62.5rem;
        perspective: 62.5rem;
    }

    .nav-menu .nav-item .nav-link.flip-animate span {
        position: relative;
        display: inline-block;
        padding: 0;
        -webkit-transition: -webkit-transform 0.3s;
        transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
        transition: transform 0.3s, -webkit-transform 0.3s;
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .nav-menu .nav-item .nav-link.flip-animate span:before {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        content: attr(data-hover);
        -webkit-transition: color 0.3s;
        transition: color 0.3s;
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        text-align: center;
    }

    .nav-menu .nav-item .nav-link.flip-animate:hover span,
    .nav-menu .nav-item .nav-link.flip-animate:focus span {
        -webkit-transform: rotateX(90deg) translateY(-1.375rem);
        transform: rotateX(90deg) translateY(-1.375rem);
    }

    .nav-menu .nav-item .nav-link.flip-animate:hover span:before,
    .nav-menu .nav-item .nav-link.flip-animate:focus span:before {
        color: hsl(var(--text-color)/0.6);
    }

    .nav-menu .nav-item .nav-link .nav-item__icon {
        -webkit-transition: 0.3s;
        transition: 0.3s;
        font-size: 0.8125rem;
        margin-left: 0.125rem;
    }
}

@media screen and (min-width: 992px) and (max-width: 991px) {
    .nav-menu .nav-item .nav-link .nav-item__icon {
        margin-right: 0.375rem;
    }
}

@media (min-width: 992px) {
    .dropdown-menu {
        display: block;
        visibility: hidden;
        opacity: 0;
        -webkit-transition: 0.3s;
        transition: 0.3s;
        top: 100%;
        left: -1.25rem;
        padding: 0.75rem !important;
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: top center;
        transform-origin: top center;
        transition: 0.3s;
        overflow: hidden;
        border-radius: 0;
        min-width: 10.625rem;
        border: 0.0625rem solid hsl(var(--white)/0.2);
        border-radius: 0.5rem;
        background-color: hsl(var(--black)/0.06);
        -webkit-backdrop-filter: blur(0.5rem);
        backdrop-filter: blur(0.5rem);
    }

    .dropdown-menu__list {
        border: 0.0625rem solid hsl(var(--white)/0.3);
        background-color: hsl(var(--white)/0.9);
        border-radius: 0.25rem;
        margin-bottom: 0.3125rem;
        overflow: hidden;
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }

    .dropdown-menu__list:hover {
        border-color: #3478C9;
    }

    .dropdown-menu__list:last-child {
        margin-bottom: 0;
    }

    .dropdown-menu__link {
        padding: 0.5rem 1.25rem;
        font-weight: 500;
        font-size: 1rem;
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }

    .dropdown-menu__link:focus,
    .dropdown-menu__link:hover {
        color: #fff;
        background-color: #3478C9;
    }
}

@media (min-width: 992px) {
    .nav-menu .nav-item:hover .dropdown-menu {
        visibility: visible;
        opacity: 1;
        top: 100% !important;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

/* ========================== Desktop Device End ========================= */
/* ========================== Laptop Device Start ========================= */
@media (min-width: 992px) and (max-width: 1200px) {
    .navbar-brand.logo img {
        max-width: 7rem;
    }

    .nav-menu .nav-item {
        padding-right: 1.125rem;
    }

    .common__btn span:first-child {
        width: 5.625rem;
        height: 2.625rem;
        font-size: 0.875rem;
    }

    .common__btn span:last-child {
        width: 2.625rem;
        height: 2.625rem;
        font-size: 1rem;
    }

    .navbar .navbar__widgets__btn {
        min-width: 8.5625rem;
    }

    .nav-menu .nav-item .nav-link {
        font-size: 0.875rem;
        padding: 1.125rem 0;
    }

    .dropdown-menu__link {
        padding: 0.5rem 1rem;
        font-weight: 500;
        font-size: 0.875rem;
    }

    .dropdown-menu {
        padding: 0.5rem !important;
        min-width: 9.0625rem;
    }

    .navbar .navbar__widgets__select .nice-select {
        font-size: 0.875rem;
    }

    .navbar .navbar__widgets {
        gap: 0.625rem;
    }
}

/* ========================== Laptop Device End ========================= */
/* ============================== Small Device ======================= */
@media screen and (max-width: 991px) {
    .body-overlay.show {
        visibility: visible;
        opacity: 1;
    }

    .nav-menu {
        margin-top: 1.25rem;
    }

    .nav-menu .nav-item {
        text-align: left;
        display: block;
        position: relative;
        margin: 0;
    }

    .nav-menu .nav-item:hover .nav-link .nav-item__icon {
        -webkit-transform: rotate(0deg) !important;
        transform: rotate(0deg) !important;
    }

    .nav-item:first-child {
        border-bottom: none;
    }

    .nav-item:last-child>a {
        border-bottom: 0;
    }

    .nav-item .dropdown-menu.show {
        display: inline;
    }

    .nav-item .nav-link {
        margin-bottom: 0.5rem;
        padding: 0.625rem 0.625rem 0.625rem 0 !important;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin: 0 !important;
        border-bottom: 0.0625rem solid hsl(var(--white)/0.2);
        color: hsl(var(--white));
    }

    .nav-item .nav-link::before {
        display: none;
    }

    .nav-item .nav-link.show[aria-expanded=true] {
        color: hsl(var(--base)) !important;
    }

    .nav-item .nav-link.show[aria-expanded=true] i {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .dropdown-menu {
        -webkit-box-shadow: none;
        box-shadow: none;
        border-radius: 0.125rem;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        border: 0;
        background-color: inherit;
        overflow: hidden;
    }

    .dropdown-menu li:nth-last-child(1) {
        border-bottom: none;
    }

    .dropdown-menu li .dropdown-item {
        padding: 0.625rem 0;
        font-weight: 500;
        font-size: 1rem;
        color: hsl(var(--white));
        border-bottom: 0.0625rem solid hsl(var(--white)/0.2);
        margin-left: 1.25rem;
        width: auto;
    }

    .dropdown-menu li .dropdown-item:hover,
    .dropdown-menu li .dropdown-item:focus {
        background-color: transparent;
    }

    .navbar-toggler.header-button {
        border-color: transparent;
        color: hsl(var(--heading-color));
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        -webkit-transition: 0.15s ease-in-out;
        transition: 0.15s ease-in-out;
        width: auto;
        font-size: 2.5rem;
    }

    .navbar-toggler.header-button:focus {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

    .navbar-toggler.header-button[aria-expanded=true] i::before {
        content: "\f00d";
        color: hsl(var(--white));
    }

    .navbar-toggler.header-button[aria-expanded=true] span {
        color: hsl(var(--white));
    }

    .navbar-collapse {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    .navbar-nav.nav-menu {
        margin-left: 0 !important;
        width: 100%;
        margin-top: 2px;
    }

    .navbar .navbar__widgets {
        margin-top: 24px;
        gap: 10px;
    }

    .navbar .navbar__widgets__select .nice-select {
        color: hsl(var(--white));
    }

    .navbar .navbar__widgets__select .nice-select::after {
        border-top: 0.3125rem solid hsl(var(--white));
    }

    .navbar .navbar__widgets__select>span {
        -webkit-filter: brightness(100);
        filter: brightness(100);
    }

    .common__btn span:first-child {
        width: 5.625rem;
        height: 2.625rem;
        font-size: 0.875rem;
    }

    .common__btn span:last-child {
        width: 2.625rem;
        height: 2.625rem;
        font-size: 1rem;
    }

    .navbar .navbar__widgets__btn {
        min-width: 8.5625rem;
    }

    .header.fixed-header {
        margin-left: auto;
        margin-right: 0;
        border-radius: 0;
        right: 15px;
        border: none;
        padding: 0;
        -webkit-backdrop-filter: unset;
        backdrop-filter: unset;
        top: 0;
    }

    .header.fixed-header .container {
        padding: 0;
    }

    .header.fixed-header .navbar {
        border-radius: 0;
        padding: 40px 0px;
        background-color: transparent;
        border: none;
        -webkit-backdrop-filter: unset;
        backdrop-filter: unset;
    }

    .header.fixed-header .navbar .navbar-collapse {
        min-width: 170px;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: hsl(var(--white)/0.1);
        padding: 10px 20px;
        border-radius: 8px;
    }

    .header.fixed-header .nav-link {
        padding: 14px 0 !important;
    }

    .header.fixed-header .navbar-toggler.header-button {
        margin-left: auto;
        font-size: 24px;
        border-color: hsl(var(--black)/0.05);
        background: hsl(var(--white)/0.1) !important;
        padding: 10px 14px !important;
        border-radius: 8px !important;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        margin-bottom: 10px;
    }

    .header.fixed-header .navbar-toggler.header-button #hiddenNav {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 5px;
    }

    .header.fixed-header .navbar-toggler.header-button #hiddenNav .header__fm {
        font-size: 18px;
        text-transform: uppercase;
    }
}

/* ================================= Header Css End =========================== */
/* ============= Footer css Start Here ======================= */
.footer__area {
    padding-top: 6.25rem;
    position: relative;
    z-index: 1;
    margin-top: auto;
    background-image: url(../images/bg-line.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: hsl(var(--white));
}

@media screen and (max-width: 1399px) {
    .footer__area {
        padding-top: 4.5625rem;
    }
}

@media screen and (max-width: 1199px) {
    .footer__area {
        padding-top: 2.875rem;
    }
}

@media screen and (max-width: 767px) {
    .footer__area {
        padding-top: 1.0625rem;
    }
}

.footer__area .footer__sp1 {
    position: absolute;
    right: 8%;
    top: 23%;
    z-index: -1;
    max-width: 7.8125rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    -webkit-animation: footOne 6s linear 0s infinite alternate none;
    animation: footOne 6s linear 0s infinite alternate none;
}

@media screen and (max-width: 1399px) {
    .footer__area .footer__sp1 {
        max-width: 6.25rem;
    }
}

@media screen and (max-width: 1199px) {
    .footer__area .footer__sp1 {
        max-width: 4.375rem;
        right: 4%;
    }
}

@media screen and (max-width: 991px) {
    .footer__area .footer__sp1 {
        right: 0;
        max-width: 3.125rem;
    }
}

@media screen and (max-width: 767px) {
    .footer__area .footer__sp1 {
        right: 2%;
        top: 30%;
        max-width: 2.1875rem;
    }
}

@media screen and (max-width: 575px) {
    .footer__area .footer__sp1 {
        display: none;
    }
}

.footer__area .footer__sp2 {
    position: absolute;
    left: 10%;
    top: 43%;
    z-index: -1;
    max-width: 6.25rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    -webkit-animation: footTwo 6s linear 0s infinite alternate none;
    animation: footTwo 6s linear 0s infinite alternate none;
}

@media screen and (max-width: 1399px) {
    .footer__area .footer__sp2 {
        max-width: 5rem;
    }
}

@media screen and (max-width: 1199px) {
    .footer__area .footer__sp2 {
        max-width: 3.75rem;
        left: 4%;
    }
}

@media screen and (max-width: 991px) {
    .footer__area .footer__sp2 {
        left: 0;
        max-width: 3.125rem;
    }
}

@media screen and (max-width: 767px) {
    .footer__area .footer__sp2 {
        top: 35%;
        max-width: 2.1875rem;
    }
}

@media screen and (max-width: 575px) {
    .footer__area .footer__sp2 {
        display: none;
    }
}

.footer__area .footer__sp3 {
    position: absolute;
    left: 30%;
    top: 10%;
    z-index: -1;
    max-width: 2.5rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    -webkit-animation: footThree 2s linear 0s infinite alternate none;
    animation: footThree 2s linear 0s infinite alternate none;
}

@media screen and (max-width: 1199px) {
    .footer__area .footer__sp3 {
        max-width: 1.875rem;
    }
}

@media screen and (max-width: 991px) {
    .footer__area .footer__sp3 {
        max-width: 1.25rem;
    }
}

@media screen and (max-width: 575px) {
    .footer__area .footer__sp3 {
        display: none;
    }
}

@-webkit-keyframes footOne {
    0% {
        -webkit-transform: scale(1) rotate(0deg) translateY(0px);
        transform: scale(1) rotate(0deg) translateY(0px);
    }

    100% {
        -webkit-transform: scale(0.6) rotate(40deg) translateY(300px);
        transform: scale(0.6) rotate(40deg) translateY(300px);
    }
}

@keyframes footOne {
    0% {
        -webkit-transform: scale(1) rotate(0deg) translateY(0px);
        transform: scale(1) rotate(0deg) translateY(0px);
    }

    100% {
        -webkit-transform: scale(0.6) rotate(40deg) translateY(300px);
        transform: scale(0.6) rotate(40deg) translateY(300px);
    }
}

@-webkit-keyframes footTwo {
    0% {
        -webkit-transform: scale(1) rotate(0deg) translateY(0px);
        transform: scale(1) rotate(0deg) translateY(0px);
    }

    100% {
        -webkit-transform: scale(0.6) rotate(40deg) translateY(-300px);
        transform: scale(0.6) rotate(40deg) translateY(-300px);
    }
}

@keyframes footTwo {
    0% {
        -webkit-transform: scale(1) rotate(0deg) translateY(0px);
        transform: scale(1) rotate(0deg) translateY(0px);
    }

    100% {
        -webkit-transform: scale(0.6) rotate(40deg) translateY(-300px);
        transform: scale(0.6) rotate(40deg) translateY(-300px);
    }
}

@-webkit-keyframes footThree {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0.5;
    }
}

@keyframes footThree {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0.5;
    }
}

.footer__area::after,
.footer__area::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 30%;
    content: "";
    z-index: -2;
    background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(var(--white))), to(transparent));
    background-image: linear-gradient(to bottom, hsl(var(--white)), transparent);
}

.footer__area::after {
    top: auto;
    bottom: 0;
    height: 50%;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.footer__area .footer__subs {
    padding-bottom: 10rem;
}

@media screen and (max-width: 1199px) {
    .footer__area .footer__subs {
        padding-bottom: 8.75rem;
    }
}

@media screen and (max-width: 991px) {
    .footer__area .footer__subs {
        padding-bottom: 6.25rem;
    }
}

@media screen and (max-width: 767px) {
    .footer__area .footer__subs {
        padding-bottom: 4.375rem;
    }
}

.footer__area .footer__subs__title {
    margin-bottom: 4.375rem;
    text-align: center;
}

@media screen and (max-width: 1199px) {
    .footer__area .footer__subs__title {
        margin-bottom: 2.5rem;
    }
}

@media screen and (max-width: 991px) {
    .footer__area .footer__subs__title {
        margin-bottom: 1.875rem;
    }
}

@media screen and (max-width: 767px) {
    .footer__area .footer__subs__title {
        margin-bottom: 1.25rem;
    }
}

.footer__area .footer__subs__title h2 {
    margin-bottom: 0;
    font-size: 6rem;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 7.1875rem;
}

@media screen and (max-width: 1199px) {
    .footer__area .footer__subs__title h2 {
        font-size: 5rem;
        line-height: 6.25rem;
    }
}

@media screen and (max-width: 991px) {
    .footer__area .footer__subs__title h2 {
        font-size: 3.75rem;
        line-height: 4.6875rem;
    }
}

@media screen and (max-width: 767px) {
    .footer__area .footer__subs__title h2 {
        font-size: 2.8125rem;
        line-height: 3.4375rem;
    }
}

@media screen and (max-width: 575px) {
    .footer__area .footer__subs__title h2 {
        font-size: 2.1875rem;
        line-height: 2.8125rem;
    }
}

.footer__area .footer__subs__title h2 span {
    display: block;
    font-weight: 300;
}

.footer__area .footer__subs__form {
    position: relative;
    z-index: 1;
    width: 23.4375rem;
    height: 4.375rem;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 1199px) {
    .footer__area .footer__subs__form {
        height: 3.625rem;
    }
}

@media screen and (max-width: 991px) {
    .footer__area .footer__subs__form {
        width: 16.25rem;
        height: 3.25rem;
    }
}

@media screen and (max-width: 767px) {
    .footer__area .footer__subs__form {
        width: 13.75rem;
        height: 3rem;
    }
}

.footer__area .footer__subs__form input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    font-size: 1.9375rem;
    font-weight: 400;
    color: hsl(var(--heading-color));
    border-bottom: 0.125rem solid hsl(var(--heading-color));
    padding-right: 3.75rem;
    font-family: var(--heading-font);
}

@media screen and (max-width: 1199px) {
    .footer__area .footer__subs__form input {
        font-size: 1.625rem;
    }
}

@media screen and (max-width: 991px) {
    .footer__area .footer__subs__form input {
        font-size: 1.375rem;
        padding-right: 2.5rem;
    }
}

@media screen and (max-width: 767px) {
    .footer__area .footer__subs__form input {
        font-size: 1.125rem;
        padding-right: 1.875rem;
    }
}

.footer__area .footer__subs__form input::-webkit-input-placeholder {
    color: hsl(var(--heading-color)/0.5);
}

.footer__area .footer__subs__form input::-moz-placeholder {
    color: hsl(var(--heading-color)/0.5);
}

.footer__area .footer__subs__form input:-ms-input-placeholder {
    color: hsl(var(--heading-color)/0.5);
}

.footer__area .footer__subs__form input::-ms-input-placeholder {
    color: hsl(var(--heading-color)/0.5);
}

.footer__area .footer__subs__form input::placeholder {
    color: hsl(var(--heading-color)/0.5);
}

.footer__area .footer__subs__form input:focus~button {
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
}

.footer__area .footer__subs__form button {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 2;
    background-color: transparent;
    border: none;
    outline: none;
    color: hsl(var(--heading-color));
    font-size: 2.375rem;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

@media screen and (max-width: 1199px) {
    .footer__area .footer__subs__form button {
        font-size: 2.125rem;
    }
}

@media screen and (max-width: 991px) {
    .footer__area .footer__subs__form button {
        font-size: 1.875rem;
    }
}

@media screen and (max-width: 767px) {
    .footer__area .footer__subs__form button {
        font-size: 1.5rem;
    }
}

.footer__area .footer__subs__form button i {
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.footer__area .footer__subs__form button:hover {
    color: hsl(var(--text-color)/0.6);
}

.footer__area .footer__address {
    max-width: 15rem;
}

@media screen and (max-width: 767px) {
    .footer__area .footer__address {
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 575px) {
    .footer__area .footer__address {
        text-align: center;
    }
}

.footer__area .footer__address h4 {
    font-size: 1.125rem;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 0.875rem;
}

@media screen and (max-width: 1199px) {
    .footer__area .footer__address h4 {
        font-size: 1rem;
    }
}

@media screen and (max-width: 767px) {
    .footer__area .footer__address h4 {
        margin-bottom: 0.375rem;
    }
}

.footer__area .footer__address p {
    font-size: 1.125rem;
}

@media screen and (max-width: 1199px) {
    .footer__area .footer__address p {
        font-size: 1rem;
    }
}

@media screen and (max-width: 767px) {
    .footer__area .footer__address p {
        font-size: 0.875rem;
    }
}

.footer__area .footer__menu {
    border-top: 0.0625rem solid hsl(var(--black)/0.12);
    border-bottom: 0.0625rem solid hsl(var(--black)/0.12);
    padding: 1.25rem 0rem;
    margin-top: 6.25rem;
}

@media screen and (max-width: 1199px) {
    .footer__area .footer__menu {
        margin-top: 3.75rem;
        padding: 0.875rem 0;
    }
}

@media screen and (max-width: 991px) {
    .footer__area .footer__menu {
        margin-top: 2.5rem;
    }
}

.footer__area .footer__menu__wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 0.625rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
    .footer__area .footer__menu__wrap {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

.footer__area .footer__menu__wrap__item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.footer__area .footer__menu__wrap__item ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
}

@media screen and (max-width: 991px) {
    .footer__area .footer__menu__wrap__item ul {
        gap: 0.625rem;
    }
}

.footer__area .footer__menu__wrap__item ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.footer__area .footer__menu__wrap__item ul li span {
    color: hsl(var(--text-color));
    font-size: 0.375rem;
}

.footer__area .footer__menu__wrap__item ul li a {
    color: hsl(var(--text-color));
    font-size: 1rem;
    font-weight: 400;
    text-transform: capitalize;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

@media screen and (max-width: 1199px) {
    .footer__area .footer__menu__wrap__item ul li a {
        font-size: 0.875rem;
    }
}

.footer__area .footer__menu__wrap__item ul li a:hover {
    text-decoration: underline;
}

.footer__area .footer__bottombar {
    padding-top: 1.0625rem;
    padding-bottom: 1.0625rem;
}

@media screen and (max-width: 1199px) {
    .footer__area .footer__bottombar {
        padding-top: 0.875rem;
        padding-bottom: 0.875rem;
    }
}

.footer__area .footer__bottombar__wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 0.625rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
    .footer__area .footer__bottombar__wrap {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

.footer__area .footer__social {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.footer__area .footer__social ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2rem;
}

@media screen and (max-width: 991px) {
    .footer__area .footer__social ul {
        gap: 1.25rem;
    }
}

.footer__area .footer__social ul li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5rem;
    color: hsl(var(--text-color));
    font-size: 1rem;
    font-weight: 400;
    text-transform: capitalize;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 1199px) {
    .footer__area .footer__social ul li a {
        font-size: 0.875rem;
    }
}

.footer__area .footer__social ul li a i {
    margin-top: -0.125rem;
}

.footer__area .footer__social ul li a::after {
    position: absolute;
    right: -1rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: -1;
    content: "";
    width: 0.0625rem;
    height: 0.75rem;
    background-color: hsl(var(--black)/0.15);
}

@media screen and (max-width: 991px) {
    .footer__area .footer__social ul li a::after {
        right: -0.625rem;
    }
}

.footer__area .footer__social ul li:last-child a::after {
    display: none;
}

.footer__area .footer__social ul li:first-child a:hover {
    color: #1876f2;
}

.footer__area .footer__social ul li:nth-child(2) a:hover {
    color: #e2326c;
}

.footer__area .footer__social ul li:last-child a:hover {
    color: #0074b3;
}

.footer__area .footer__copy span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.3125rem;
    color: hsl(var(--text-color));
    font-size: 1rem;
    font-weight: 400;
    text-transform: capitalize;
}

@media screen and (max-width: 1199px) {
    .footer__area .footer__copy span {
        font-size: 0.875rem;
    }
}

@media screen and (max-width: 575px) {
    .footer__area .footer__copy span {
        display: block;
        text-align: center;
    }
}

.footer__area .footer__copy span a {
    font-weight: 500;
    color: hsl(var(--heading-color));
}

.footer__area .footer__copy span a:hover {
    text-decoration: underline;
}

.footer__subs__label {
    width: 11.875rem;
    height: 11.875rem;
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 4.375rem;
    margin-left: auto;
    margin-right: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

@media screen and (max-width: 1199px) {
    .footer__subs__label {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
        margin-bottom: 1.25rem;
    }
}

@media screen and (max-width: 991px) {
    .footer__subs__label {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
        margin-bottom: 0.625rem;
    }
}

@media screen and (max-width: 767px) {
    .footer__subs__label {
        -webkit-transform: scale(0.6);
        transform: scale(0.6);
        margin-bottom: -1rem;
    }
}

@media screen and (max-width: 575px) {
    .footer__subs__label {
        margin-bottom: -1.25rem;
    }
}

.footer__subs__label .footer__subs__shr {
    width: 8.125rem;
    height: 8.125rem;
    background-color: hsl(var(--section-bg));
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 0;
}

.footer__subs__label .footer__subs__shr img {
    width: 4.375rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

.footer__subs__label .footer__subs__shr .footer__circle__text {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: hsl(var(--heading-color));
    font-size: 0.9375rem;
    font-weight: 400;
    -webkit-animation: textRotation 8s linear infinite;
    animation: textRotation 8s linear infinite;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

.footer__subs__label .footer__subs__shr .footer__circle__text span {
    position: absolute;
    left: 50%;
    font-size: 0.9375rem;
    -webkit-transform-origin: 0 5.9375rem;
    transform-origin: 0 5.9375rem;
}

@-webkit-keyframes textRotation {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes textRotation {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* ============= Footer css End Here ======================= */
/* ===================== Scroll to Top Start ================================= */
.scroll-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    color: hsl(var(--white));
    width: 48px;
    height: 48px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 50%;
    z-index: 5;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    cursor: pointer;
    -webkit-transform: scale(0);
    transform: scale(0);
    background-color: hsl(var(--heading-color));
}

.scroll-top:hover {
    color: hsl(var(--heading-color));
    background-color: hsl(var(--base-d-100));
}

.scroll-top.show {
    -webkit-transform: scale(1);
    transform: scale(1);
}

/* ===================== Scroll to Top End ================================= */
/* ================================= Template Selection Css Start =========================== */
::-moz-selection {
    color: hsl(var(--white));
    background: hsl(var(--base-d-100));
}

::selection {
    color: hsl(var(--white));
    background: hsl(var(--base-d-100));
}

/* ================================= Template Selection Css End ===========================  */
/* =========================== Banner Section Start Here ========================= */
.banner__area {
    padding-top: 16.25rem;
    padding-bottom: 3.125rem;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 1399px) {
    .banner__area {
        padding-top: 14.25rem;
    }
}

@media screen and (max-width: 1199px) {
    .banner__area {
        padding-top: 11.25rem;
    }
}

@media screen and (max-width: 991px) {
    .banner__area {
        padding-top: 8.75rem;
    }
}

@media screen and (max-width: 575px) {
    .banner__area {
        padding-top: 7.5rem;
    }
}

.banner__area .banner__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

@media screen and (max-width: 767px) {
    .banner__area .banner__bg {
        height: 30rem;
    }
}

@media screen and (max-width: 575px) {
    .banner__area .banner__bg {
        height: 28.125rem;
    }
}

.banner__area .banner__bg img {
    width: 100%;
}

@media screen and (max-width: 767px) {
    .banner__area .banner__bg img {
        height: 100%;
    }
}

@media screen and (max-width: 575px) {
    .banner__area .banner__bg img {
        height: 100%;
    }
}

.banner__area .banner__topbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 0.625rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 4.125rem;
}

@media screen and (max-width: 1199px) {
    .banner__area .banner__topbar {
        margin-bottom: 2.5rem;
    }
}

@media screen and (max-width: 991px) {
    .banner__area .banner__topbar {
        margin-bottom: 1.875rem;
    }
}

@media screen and (max-width: 767px) {
    .banner__area .banner__topbar {
        margin-bottom: 1.25rem;
    }
}

@media screen and (max-width: 575px) {
    .banner__area .banner__topbar {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-bottom: 1.875rem;
    }
}

.banner__area .banner__topbar .banner__btn {
    margin-top: 1.75rem;
}

@media screen and (max-width: 1399px) {
    .banner__area .banner__topbar .banner__btn {
        margin-top: 1.5625rem;
    }
}

@media screen and (max-width: 1199px) {
    .banner__area .banner__topbar .banner__btn {
        margin-top: 1.25rem;
    }
}

@media screen and (max-width: 991px) {
    .banner__area .banner__topbar .banner__btn {
        margin-top: 0.9375rem;
    }
}

@media screen and (max-width: 767px) {
    .banner__area .banner__topbar .banner__btn {
        margin-top: 0.6875rem;
    }
}

@media screen and (max-width: 575px) {
    .banner__area .banner__topbar .banner__btn {
        margin-top: 0rem;
    }
}

.banner__area .banner__title h2 {
    margin-bottom: 0;
    font-size: 6rem;
    text-transform: uppercase;
    font-weight: 600;
}

@media screen and (max-width: 1399px) {
    .banner__area .banner__title h2 {
        font-size: 5rem;
    }
}

@media screen and (max-width: 1199px) {
    .banner__area .banner__title h2 {
        font-size: 4.0625rem;
    }
}

@media screen and (max-width: 991px) {
    .banner__area .banner__title h2 {
        font-size: 3.125rem;
    }
}

@media screen and (max-width: 767px) {
    .banner__area .banner__title h2 {
        font-size: 2.25rem;
    }
}

.banner__area .banner__title h2 span {
    display: block;
    font-weight: 300;
}

.banner__area .banner__btn .common__btn span:first-child {
    width: 9.375rem;
}

.banner__area .banner__btn .common__btn span:last-child i {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.banner__area .banner__thumb video {
    width: 100%;
    border-radius: 2.5rem;
}

@media screen and (max-width: 1199px) {
    .banner__area .banner__thumb video {
        border-radius: 1.875rem;
    }
}

@media screen and (max-width: 991px) {
    .banner__area .banner__thumb video {
        border-radius: 1.25rem;
    }
}

@media screen and (max-width: 575px) {
    .banner__area .banner__thumb video {
        border-radius: 0.9375rem;
    }
}

.banner__area .banner__thumb iframe {
    width: 100%;
    height: 600px;
    border-radius: 20px;
}

@media screen and (max-width: 1199px) {
    .banner__area .banner__thumb iframe {
        height: 31.25rem;
    }
}

@media screen and (max-width: 991px) {
    .banner__area .banner__thumb iframe {
        height: 21.875rem;
    }
}

@media screen and (max-width: 767px) {
    .banner__area .banner__thumb iframe {
        height: 18.75rem;
    }
}

@media screen and (max-width: 575px) {
    .banner__area .banner__thumb iframe {
        border-radius: 0.625rem;
        height: 14.375rem;
    }
}

.banner__area .banner__thumb img {
    width: 100%;
    height: 600px;
    border-radius: 40px;
    -o-object-fit: cover;
    object-fit: cover;
}

@media screen and (max-width: 1199px) {
    .banner__area .banner__thumb img {
        border-radius: 1.875rem;
        height: 31.25rem;
    }
}

@media screen and (max-width: 991px) {
    .banner__area .banner__thumb img {
        border-radius: 1.25rem;
        height: 21.875rem;
    }
}

@media screen and (max-width: 767px) {
    .banner__area .banner__thumb img {
        border-radius: 1.25rem;
        height: 18.75rem;
    }
}

@media screen and (max-width: 575px) {
    .banner__area .banner__thumb img {
        border-radius: 0.9375rem;
        height: 14.375rem;
    }
}

/* =========================== Banner Section End Here ========================= */
/* =========================== Pagination Section Start Here ========================= */
.pagination__area {
    position: relative;
    z-index: 1;
    padding-bottom: 6.25rem;
}

@media screen and (max-width: 1199px) {
    .pagination__area {
        padding-bottom: 3.75rem;
    }
}

@media screen and (max-width: 991px) {
    .pagination__area {
        padding-top: 1.875rem;
        padding-bottom: 2.5rem;
    }
}

.pagination__area .pagination__main__blk {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0.5rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

@media screen and (max-width: 991px) {
    .pagination__area .pagination__main__blk {
        gap: 0.3125rem;
    }
}

.pagination__area .pagination__main__blk a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    background-color: hsl(var(--black)/0.02);
    border-radius: 50%;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
    font-weight: 400;
    color: hsl(var(--heading-color));
    overflow: hidden;
}

@media screen and (max-width: 1199px) {
    .pagination__area .pagination__main__blk a {
        width: 3.625rem;
        height: 3.625rem;
        font-size: 1.25rem;
    }
}

@media screen and (max-width: 991px) {
    .pagination__area .pagination__main__blk a {
        width: 3rem;
        height: 3rem;
        font-size: 1rem;
    }
}

.pagination__area .pagination__main__blk a::after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background-color: hsl(var(--base));
    content: "";
    z-index: -1;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    border-radius: 50%;
}

.pagination__area .pagination__main__blk a:hover::after {
    height: 100%;
}

/* =========================== Pagination Section End Here ========================= */
/* =========================== Hero Section Start Here ========================= */
.hero__area {
    padding-top: 10.625rem;
    position: relative;
    z-index: 1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    overflow: hidden;
}

@media screen and (max-width: 1199px) {
    .hero__area {
        padding-top: 7.5rem;
    }
}

.hero__area .hero__sp {
    position: absolute;
    left: 8%;
    top: 17%;
    z-index: -1;
    max-width: 6.75rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    -webkit-animation: heroS1 8s linear 0s infinite alternate none;
    animation: heroS1 8s linear 0s infinite alternate none;
}

@media screen and (max-width: 1399px) {
    .hero__area .hero__sp {
        max-width: 5rem;
    }
}

@media screen and (max-width: 1199px) {
    .hero__area .hero__sp {
        max-width: 3.75rem;
    }
}

@media screen and (max-width: 767px) {
    .hero__area .hero__sp {
        max-width: 2.5rem;
        left: 0%;
    }
}

.hero__area .hero__sp.hero__sp__two {
    left: auto;
    right: 8%;
    top: 30%;
    -webkit-animation: heroS2 8s linear 0s infinite alternate none;
    animation: heroS2 8s linear 0s infinite alternate none;
}

@media screen and (max-width: 767px) {
    .hero__area .hero__sp.hero__sp__two {
        right: 6%;
    }
}

@-webkit-keyframes heroS1 {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(50px) translateX(50px) rotate(50deg);
        transform: translateY(50px) translateX(50px) rotate(50deg);
    }
}

@keyframes heroS1 {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(50px) translateX(50px) rotate(50deg);
        transform: translateY(50px) translateX(50px) rotate(50deg);
    }
}

@-webkit-keyframes heroS2 {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-50px) translateX(50px) rotate(50deg);
        transform: translateY(-50px) translateX(50px) rotate(50deg);
    }
}

@keyframes heroS2 {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-50px) translateX(50px) rotate(50deg);
        transform: translateY(-50px) translateX(50px) rotate(50deg);
    }
}

.hero__area .hero__wrap__title {
    margin-bottom: 0.875rem;
}

@media screen and (max-width: 767px) {
    .hero__area .hero__wrap__title {
        margin-bottom: 2.5rem;
        margin-top: 0.625rem;
    }
}

.hero__area .hero__wrap__title h1 {
    font-size: 7.5rem;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 0;
}

@media screen and (max-width: 1399px) {
    .hero__area .hero__wrap__title h1 {
        font-size: 5.3125rem;
    }
}

@media screen and (max-width: 991px) {
    .hero__area .hero__wrap__title h1 {
        font-size: 4.375rem;
    }
}

@media screen and (max-width: 767px) {
    .hero__area .hero__wrap__title h1 {
        font-size: 2.8125rem;
    }
}

@media screen and (max-width: 575px) {
    .hero__area .hero__wrap__title h1 {
        font-size: 2.5rem;
    }
}

@media screen and (max-width: 424px) {
    .hero__area .hero__wrap__title h1 {
        font-size: 2rem;
    }
}

.hero__area .hero__wrap__title h1 span {
    font-weight: 300;
    display: block;
}

.hero__area .hero__wrap .hero__thumb {
    position: relative;
    z-index: 1;
    -webkit-transform: perspective(1200px) rotateX(50deg) scale(0.9);
    transform: perspective(1200px) rotateX(50deg) scale(0.9);
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 1399px) {
    .hero__area .hero__wrap .hero__thumb {
        max-width: 86%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 767px) {
    .hero__area .hero__wrap .hero__thumb {
        -webkit-transform: perspective(1200px) rotateX(0deg) scale(1);
        transform: perspective(1200px) rotateX(0deg) scale(1);
    }
}

.hero__area .hero__wrap .hero__thumb img {
    width: 100%;
    border-radius: 1.25rem 1.25rem 0rem 0rem;
}

@media screen and (max-width: 767px) {
    .hero__area .hero__wrap .hero__thumb img {
        border-radius: 0.625rem 0.625rem 0rem 0rem;
    }
}

.hero__area .hero__wrap .hero__thumb span {
    width: 95%;
    height: 12.5rem;
    background-color: #f0f3ff;
    border-radius: 2.625rem;
    position: absolute;
    left: 50%;
    top: 0;
    z-index: -1;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.hero__area .hero__wrap .hero__thumb span:first-child {
    top: 0.625rem;
}

@media screen and (max-width: 767px) {
    .hero__area .hero__wrap .hero__thumb span:first-child {
        top: -0.5rem;
        border-radius: 0.625rem;
    }
}

.hero__area .hero__wrap .hero__thumb span:nth-child(2) {
    top: 0.625rem;
    background-color: #ebefff;
    z-index: -2;
    width: 88%;
}

@media screen and (max-width: 767px) {
    .hero__area .hero__wrap .hero__thumb span:nth-child(2) {
        top: -1rem;
        border-radius: 0.625rem;
    }
}

.hero__wrap__users {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: hsl(var(--white)/0.4);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    padding: 0.25rem 0.625rem;
    border-radius: 2.5rem;
    gap: 0.375rem;
}

@media screen and (max-width: 575px) {
    .hero__wrap__users {
        gap: 0.125rem;
        padding: 0.125rem;
    }
}

.hero__wrap__users__img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.hero__wrap__users__img span {
    width: 2rem;
    height: 2rem;
    overflow: hidden;
    border: 0.125rem solid hsl(var(--white));
    border-radius: 50%;
    margin-left: -1rem;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

@media screen and (max-width: 1199px) {
    .hero__wrap__users__img span {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
}

@media screen and (max-width: 575px) {
    .hero__wrap__users__img span {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
        margin-left: -1.25rem;
    }
}

.hero__wrap__users__img span:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

.hero__wrap__users__img span:first-child {
    border-color: transparent;
    margin-left: 0;
}

.hero__wrap__users__img span img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.hero__wrap__users__title>span {
    font-size: 1.125rem;
    font-weight: 400;
    display: inline-block;
    font-family: "Permanent Marker", cursive;
    text-transform: capitalize;
}

@media screen and (max-width: 1399px) {
    .hero__wrap__users__title>span {
        font-size: 1rem;
    }
}

@media screen and (max-width: 1199px) {
    .hero__wrap__users__title>span {
        font-size: 0.875rem;
    }
}

@media screen and (max-width: 575px) {
    .hero__wrap__users__title>span {
        font-size: 0.75rem;
        padding-right: 0.625rem;
    }
}

/* =========================== Hero Section End Here ========================= */
/* =========================== Recommendation Section Start Here ========================= */
.recom__area {
    position: relative;
    z-index: 1;
    padding-top: 11.25rem;
    padding-bottom: 5rem;
}

@media screen and (max-width: 1399px) {
    .recom__area {
        padding-top: 8.4375rem;
        padding-bottom: 3.75rem;
    }
}

@media screen and (max-width: 1199px) {
    .recom__area {
        padding-top: 6.6875rem;
        padding-bottom: 3.125rem;
    }
}

@media screen and (max-width: 991px) {
    .recom__area {
        padding-top: 5.6875rem;
        padding-bottom: 2.5rem;
    }
}

@media screen and (max-width: 767px) {
    .recom__area {
        padding-top: 4.4375rem;
        padding-bottom: 1.375rem;
    }
}

.recom__area .recom__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

.recom__area .recom__bg img {
    width: 100%;
}

.recom__area .recom__title {
    margin-bottom: 4.75rem;
}

@media screen and (max-width: 1399px) {
    .recom__area .recom__title {
        margin-bottom: 3.125rem;
    }
}

@media screen and (max-width: 1199px) {
    .recom__area .recom__title {
        margin-bottom: 2.5rem;
    }
}

@media screen and (max-width: 991px) {
    .recom__area .recom__title {
        margin-bottom: 2rem;
    }
}

@media screen and (max-width: 767px) {
    .recom__area .recom__title {
        text-align: center;
        margin-bottom: 1.75rem;
    }
}

.recom__area .recom__title h2 {
    font-size: 4rem;
    font-weight: 600;
    margin-bottom: 0;
    text-transform: uppercase;
}

@media screen and (max-width: 1399px) {
    .recom__area .recom__title h2 {
        font-size: 3.375rem;
    }
}

@media screen and (max-width: 1199px) {
    .recom__area .recom__title h2 {
        font-size: 2.75rem;
    }
}

@media screen and (max-width: 991px) {
    .recom__area .recom__title h2 {
        font-size: 2.125rem;
    }
}

@media screen and (max-width: 424px) {
    .recom__area .recom__title h2 {
        font-size: 1.875rem;
    }
}

.recom__area .recom__title h2 span {
    font-weight: 300;
    display: block;
}

.recom__area .recom__thumb img {
    width: 100%;
    border-radius: 2.5rem;
}

@media screen and (max-width: 1399px) {
    .recom__area .recom__thumb img {
        border-radius: 1.875rem;
    }
}

@media screen and (max-width: 1199px) {
    .recom__area .recom__thumb img {
        border-radius: 1.25rem;
    }
}

.recom__area .recom__content {
    position: relative;
    z-index: 1;
    background-color: #f8f9fc;
    border-radius: 2.5rem;
    min-height: 27.125rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

@media screen and (max-width: 1399px) {
    .recom__area .recom__content {
        border-radius: 1.875rem;
        min-height: 23.3125rem;
    }
}

@media screen and (max-width: 1199px) {
    .recom__area .recom__content {
        border-radius: 1.25rem;
        min-height: 19.5rem;
    }
}

@media screen and (max-width: 991px) {
    .recom__area .recom__content {
        min-height: 14.375rem;
    }
}

@media screen and (max-width: 767px) {
    .recom__area .recom__content {
        min-height: 16.25rem;
    }
}

@media screen and (max-width: 424px) {
    .recom__area .recom__content {
        min-height: 14.375rem;
    }
}

.recom__area .recom__content::after {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    content: "";
    background-color: hsl(var(--base));
    width: 15.625rem;
    height: 15.625rem;
    border-radius: 50%;
    -webkit-filter: blur(3.125rem);
    filter: blur(3.125rem);
    z-index: -1;
    opacity: 0.6;
}

@media screen and (max-width: 991px) {
    .recom__area .recom__content::after {
        width: 11.25rem;
        height: 11.25rem;
    }
}

.recom__area .recom__content .recom__sp {
    position: absolute;
    left: -1.6875rem;
    top: 0;
    z-index: -1;
    max-width: 6.25rem;
    opacity: 0.3;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-animation: rec1 6s linear 0s infinite alternate none;
    animation: rec1 6s linear 0s infinite alternate none;
}

@media screen and (max-width: 1399px) {
    .recom__area .recom__content .recom__sp {
        max-width: 4.375rem;
    }
}

@media screen and (max-width: 1199px) {
    .recom__area .recom__content .recom__sp {
        max-width: 3.75rem;
    }
}

.recom__area .recom__content .recom__sp.recom__sp__two {
    right: 0;
    bottom: -2.25rem;
    left: auto;
    top: auto;
    opacity: 1;
    -webkit-animation: rec2 6s linear 0s infinite alternate none;
    animation: rec2 6s linear 0s infinite alternate none;
}

@media screen and (max-width: 1399px) {
    .recom__area .recom__content .recom__sp.recom__sp__two {
        bottom: -1.25rem;
    }
}

@media screen and (max-width: 1199px) {
    .recom__area .recom__content .recom__sp.recom__sp__two {
        bottom: -1.25rem;
    }
}

@-webkit-keyframes rec1 {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
}

@keyframes rec1 {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
}

@-webkit-keyframes rec2 {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
}

@keyframes rec2 {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
}

.recom__area .recom__content h4 {
    font-size: 4rem;
    font-weight: 600;
    margin-bottom: 0;
}

@media screen and (max-width: 1199px) {
    .recom__area .recom__content h4 {
        font-size: 2.8125rem;
    }
}

@media screen and (max-width: 991px) {
    .recom__area .recom__content h4 {
        font-size: 2.1875rem;
    }
}

.recom__area .recom__content h4 span {
    font-size: 8rem;
}

@media screen and (max-width: 1199px) {
    .recom__area .recom__content h4 span {
        font-size: 6.25rem;
    }
}

@media screen and (max-width: 991px) {
    .recom__area .recom__content h4 span {
        font-size: 4.375rem;
    }
}

.recom__area .recom__content p {
    color: hsl(var(--heading-color));
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: uppercase;
    font-family: var(--heading-font);
}

@media screen and (max-width: 1199px) {
    .recom__area .recom__content p {
        font-size: 1.25rem;
    }
}

@media screen and (max-width: 991px) {
    .recom__area .recom__content p {
        font-size: 1rem;
    }
}

/* =========================== Recommendation Section End Here ========================= */
/* =========================== Service Section Start Here ========================= */
.service__area {
    position: relative;
    z-index: 1;
    padding-top: 6.25rem;
    padding-bottom: 6.25rem;
}

@media screen and (max-width: 1399px) {
    .service__area {
        padding-top: 4.625rem;
        padding-bottom: 5.25rem;
    }
}

@media screen and (max-width: 1199px) {
    .service__area {
        padding-top: 3.5rem;
        padding-bottom: 3.875rem;
    }
}

@media screen and (max-width: 991px) {
    .service__area {
        padding-top: 3.0625rem;
        padding-bottom: 3.5rem;
    }
}

@media screen and (max-width: 767px) {
    .service__area {
        padding-bottom: 2.8125rem;
    }
}

.service__area .service__main {
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 575px) {
    .service__area .service__main {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

.service__area .service__main__single {
    margin-bottom: 1.5625rem;
    max-width: 37.5rem;
}

@media screen and (max-width: 767px) {
    .service__area .service__main__single {
        margin-bottom: 0.9375rem;
    }
}

.service__area .service__main__single:last-child {
    margin-bottom: 0;
}

.service__area .service__main__single__thumb {
    position: absolute;
    right: 0;
    top: 70%;
    -webkit-transform: translateY(-50%) scale(0.95);
    transform: translateY(-50%) scale(0.95);
    z-index: 1;
    max-width: 32.5rem;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.8s;
    transition: 0.8s;
    text-align: end;
}

@media screen and (max-width: 1399px) {
    .service__area .service__main__single__thumb {
        max-width: 28.5rem;
    }
}

@media screen and (max-width: 1199px) {
    .service__area .service__main__single__thumb {
        max-width: 25rem;
    }
}

@media screen and (max-width: 1199px) {
    .service__area .service__main__single__thumb {
        max-width: 25rem;
    }
}

@media screen and (max-width: 991px) {
    .service__area .service__main__single__thumb {
        max-width: 18.75rem;
    }
}

@media screen and (max-width: 767px) {
    .service__area .service__main__single__thumb {
        max-width: 12.5rem;
    }
}

@media screen and (max-width: 575px) {
    .service__area .service__main__single__thumb {
        max-width: 100%;
        position: unset;
        -webkit-transform: unset;
        transform: unset;
        opacity: 1;
        visibility: visible;
    }
}

.service__area .service__main__single__thumb img {
    width: 100%;
    border-radius: 1.875rem;
}

@media screen and (max-width: 991px) {
    .service__area .service__main__single__thumb img {
        border-radius: 1.25rem;
    }
}

@media screen and (max-width: 767px) {
    .service__area .service__main__single__thumb img {
        border-radius: 0.9375rem;
    }
}

@media screen and (max-width: 575px) {
    .service__area .service__main__single__thumb img {
        border-radius: 0.625rem;
    }
}

.service__area .service__main__single__title a {
    font-size: 3rem;
    font-weight: 500;
    text-transform: uppercase;
    color: hsl(var(--text-color)/0.22);
    -webkit-transition: 0.3s;
    transition: 0.3s;
    display: block;
    font-family: var(--heading-font);
}

@media screen and (max-width: 1399px) {
    .service__area .service__main__single__title a {
        font-size: 2.5rem;
    }
}

@media screen and (max-width: 1199px) {
    .service__area .service__main__single__title a {
        font-size: 2.125rem;
    }
}

@media screen and (max-width: 991px) {
    .service__area .service__main__single__title a {
        font-size: 1.75rem;
    }
}

@media screen and (max-width: 767px) {
    .service__area .service__main__single__title a {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 575px) {
    .service__area .service__main__single__title a {
        font-size: 24px;
        color: hsl(var(--text-color));
        font-weight: 600;
        margin-bottom: 0.625rem;
        max-width: 10rem;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 424px) {
    .service__area .service__main__single__title a {
        font-size: 20px;
        max-width: 8.4375rem;
    }
}

.service__area .service__main__single.active .service__main__single__title a {
    color: hsl(var(--heading-color));
    font-weight: 700;
}

@media screen and (max-width: 575px) {
    .service__area .service__main__single.active .service__main__single__title a {
        font-weight: 600;
        color: hsl(var(--text-color));
    }
}

.service__area .service__main__single.active .service__main__single__thumb {
    opacity: 1;
    visibility: visible;
    top: 50%;
    -webkit-transform: translateY(-50%) scale(1);
    transform: translateY(-50%) scale(1);
}

@media screen and (max-width: 575px) {
    .service__area .service__main__single.active .service__main__single__thumb {
        -webkit-transform: unset;
        transform: unset;
    }
}

.service__brand {
    padding-top: 1.25rem;
    padding-bottom: 4.375rem;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 767px) {
    .service__brand {
        padding-top: 0rem;
        padding-bottom: 3.75rem;
    }
}

.service__brand__main__single {
    min-height: 6.25rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0.875rem;
}

.service__details {
    border-top: 0.0625rem solid hsl(var(--black)/0.08);
    border-bottom: 0.0625rem solid hsl(var(--black)/0.08);
    margin-bottom: 6.25rem;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 767px) {
    .service__details {
        margin-bottom: 1.875rem;
    }
}

.service__details .service__dsp {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -2;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    width: 100%;
}

.service__details .service__dsp img {
    width: 100%;
}

.service__details__left {
    padding-top: 12.5rem;
}

@media screen and (max-width: 991px) {
    .service__details__left {
        padding-top: 5.625rem;
    }
}

@media screen and (max-width: 767px) {
    .service__details__left {
        padding-top: 3.125rem;
        padding-bottom: 1.875rem;
        text-align: center;
    }
}

.service__details__left h4 {
    font-size: 4rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 2.5rem;
}

@media screen and (max-width: 1199px) {
    .service__details__left h4 {
        font-size: 3rem;
        margin-bottom: 1.875rem;
    }
}

@media screen and (max-width: 991px) {
    .service__details__left h4 {
        font-size: 2rem;
        margin-bottom: 1.25rem;
    }
}

.service__details__left h4 span {
    display: block;
    font-weight: 300;
}

.service__details__left .about__mission__wrap__curtomers {
    border-left: none;
    border-right: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding: 0;
    text-align: left;
}

@media screen and (max-width: 767px) {
    .service__details__left .about__mission__wrap__curtomers {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

.service__details__content p {
    font-size: 1.125rem;
    color: hsl(var(--text-color)/0.6);
}

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

@media screen and (max-width: 991px) {
    .service__details__content p {
        font-size: 0.875rem;
    }
}

.service__details__content>img {
    width: 100%;
    margin-top: 2.1875rem;
    padding-bottom: 2.1875rem;
}

@media screen and (max-width: 991px) {
    .service__details__content>img {
        margin-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

.service__details__content ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media screen and (max-width: 991px) {
    .service__details__content ul {
        gap: 0.625rem;
    }
}

@media screen and (max-width: 767px) {
    .service__details__content ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 575px) {
    .service__details__content ul {
        grid-template-columns: repeat(1, 1fr);
    }
}

.service__details__content ul li {
    font-size: 1rem;
    font-weight: 400;
    color: hsl(var(--text-color));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-transform: capitalize;
    gap: 0.625rem;
}

@media screen and (max-width: 1199px) {
    .service__details__content ul li {
        font-size: 0.875rem;
    }
}

.service__details__content ul li span {
    max-width: 0.9375rem;
    margin-top: -0.1875rem;
}

.service__details__main {
    border-left: 0.0625rem solid hsl(var(--black)/0.08);
    border-right: 0.0625rem solid hsl(var(--black)/0.08);
}

@media screen and (max-width: 767px) {
    .service__details__main {
        border-top: 0.0625rem solid hsl(var(--black)/0.08);
    }
}

.service__details__main .accordion-button {
    padding: 2.25rem;
    font-size: 2.5rem;
    color: hsl(var(--heading-color));
    font-weight: 700;
    text-transform: uppercase;
    background-color: transparent;
}

@media screen and (max-width: 1199px) {
    .service__details__main .accordion-button {
        padding: 2.25rem;
        font-size: 2.125rem;
    }
}

@media screen and (max-width: 991px) {
    .service__details__main .accordion-button {
        font-size: 1.5rem;
        padding: 1.875rem 1.875rem;
    }
}

.service__details__main .accordion-item:nth-child(even) .accordion-button {
    color: hsl(var(--text-color)/0.3);
}

.service__details__main .accordion-button:not(.collapsed) {
    color: hsl(var(--heading-color));
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.service__details__main .accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.service__details__main .accordion-item:first-of-type {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.service__details__main .accordion-item {
    color: hsl(var(--heading-color));
    background-color: transparent;
    border: none;
    border-bottom: 0.0625rem solid hsl(var(--black)/0.08) !important;
}

.service__details__main .accordion-item:last-child {
    color: hsl(var(--heading-color));
    background-color: transparent;
    border: none;
    border-bottom: none !important;
}

.service__details__main .accordion-button:focus {
    border-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.service__details__main .accordion-button::after {
    display: none;
}

.service__details__main .accordion-body {
    padding: 0rem 2.1875rem 2.8125rem 2.1875rem;
}

@media screen and (max-width: 1199px) {
    .service__details__main .accordion-body {
        padding: 0rem 2.5rem 2.8125rem 2.5rem;
    }
}

@media screen and (max-width: 991px) {
    .service__details__main .accordion-body {
        padding: 0rem 1.875rem 2.8125rem 1.875rem;
    }
}

.service__details__main .accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

/* =========================== Service Section End Here ========================= */
/* =========================== Payment Section Start Here ========================= */
.payment__area {
    position: relative;
    z-index: 1;
}

.payment__area .payment__title {
    text-align: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.payment__area .payment__title video {
    position: absolute;
    left: 0;
    top: -50%;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

.payment__area .payment__title h2 {
    font-size: 14vw;
    margin-bottom: 0;
    font-weight: 700;
    color: hsl(var(--heading-color));
    text-transform: uppercase;
    background-color: hsl(var(--white));
    mix-blend-mode: screen;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

.payment__support {
    position: relative;
    z-index: 1;
    padding-top: 9.375rem;
    padding-bottom: 6.25rem;
}

@media screen and (max-width: 1199px) {
    .payment__support {
        padding-top: 6.25rem;
        padding-bottom: 3.125rem;
    }
}

@media screen and (max-width: 991px) {
    .payment__support {
        padding-top: 3.125rem;
        padding-bottom: 0rem;
    }
}

.payment__support .ps__bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    width: 100%;
}

.payment__support .ps__bg img {
    width: 100%;
}

.payment__support__single {
    text-align: center;
    max-width: 21.875rem;
    margin-left: auto;
    margin-right: auto;
}

.payment__support__single img {
    width: auto;
    height: 3.4375rem;
    margin-bottom: 2.1875rem;
}

@media screen and (max-width: 1199px) {
    .payment__support__single img {
        height: 2.8125rem;
        margin-bottom: 1.5rem;
    }
}

@media screen and (max-width: 767px) {
    .payment__support__single img {
        margin-bottom: 18px;
    }
}

.payment__support__single h4 {
    text-transform: capitalize;
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
}

@media screen and (max-width: 1199px) {
    .payment__support__single h4 {
        font-size: 1.25rem;
        margin-bottom: 0.875rem;
    }
}

@media screen and (max-width: 1199px) {
    .payment__support__single p {
        font-size: 0.875rem;
    }
}

.payment__feature {
    position: relative;
    z-index: 1;
    padding-top: 6.25rem;
    padding-bottom: 6.25rem;
}

@media screen and (max-width: 991px) {
    .payment__feature {
        padding-top: 5.875rem;
        padding-bottom: 2.5rem;
    }
}

.payment__feature .fb__bg {
    position: absolute;
    left: 0;
    top: 60%;
    z-index: -1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    width: 100%;
}

.payment__feature .fb__bg img {
    width: 100%;
}

.payment__feature .g-5,
.payment__feature .gx-5 {
    --bs-gutter-x: 8rem;
}

@media screen and (max-width: 1199px) {

    .payment__feature .g-5,
    .payment__feature .gx-5 {
        --bs-gutter-x: 4rem;
    }
}

@media screen and (max-width: 991px) {

    .payment__feature .g-5,
    .payment__feature .gx-5 {
        --bs-gutter-x: 2rem;
    }
}

@media screen and (max-width: 767px) {

    .payment__feature .g-5,
    .payment__feature .gy-5 {
        --bs-gutter-y: 1.5rem;
    }
}

.payment__feature__single {
    padding-bottom: 6.25rem;
}

@media screen and (max-width: 767px) {
    .payment__feature__single {
        padding-bottom: 3.125rem;
    }
}

.payment__feature__single:last-child {
    padding-bottom: 0;
}

@media screen and (max-width: 767px) {
    .payment__feature__single:nth-child(2) .row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
}

.payment__feature__left {
    background-color: hsl(var(--black)/0.02);
    padding: 2.125rem 1.5rem;
    border-radius: 1.5rem;
}

@media screen and (max-width: 991px) {
    .payment__feature__left {
        padding: 1.625rem 1.25rem;
        border-radius: 1rem;
    }
}

.payment__feature__left .feature__main__thumb {
    margin-bottom: 0;
}

.payment__feature__left .feature__main__thumb.thumb-two {
    min-height: 16.25rem;
}

@media screen and (max-width: 991px) {
    .payment__feature__left .feature__main__thumb.thumb-two {
        min-height: 8.125rem;
    }
}

.payment__feature__right {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.payment__feature__right h4 {
    font-size: 2rem;
    text-transform: capitalize;
}

@media screen and (max-width: 1199px) {
    .payment__feature__right h4 {
        font-size: 1.625rem;
    }
}

@media screen and (max-width: 991px) {
    .payment__feature__right h4 {
        font-size: 1.5rem;
    }
}

.payment__feature__right p {
    font-size: 1.125rem;
    font-weight: 400;
    color: hsl(var(--text-color)/0.66);
    margin-bottom: 1.875rem;
}

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

@media screen and (max-width: 991px) {
    .payment__feature__right p {
        font-size: 0.875rem;
        margin-bottom: 1.25rem;
    }
}

.payment__feature__right ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1rem;
}

@media screen and (max-width: 991px) {
    .payment__feature__right ul {
        gap: 0.75rem;
    }
}

.payment__feature__right ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    color: hsl(var(--text-color));
    text-transform: capitalize;
}

@media screen and (max-width: 991px) {
    .payment__feature__right ul li {
        font-size: 0.875rem;
        gap: 0.5rem;
    }
}

.payment__feature__right ul li img {
    width: 1.25rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

@media screen and (max-width: 991px) {
    .payment__feature__right ul li img {
        width: 1rem;
    }
}

/* =========================== Payment Section End Here ========================= */
/* =========================== Feature Section Start Here ========================= */
.feature__area {
    padding-top: 5.625rem;
    padding-bottom: 6.0625rem;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 1399px) {
    .feature__area {
        padding-top: 4.8125rem;
        padding-bottom: 3.125rem;
    }
}

@media screen and (max-width: 1199px) {
    .feature__area {
        padding-top: 3.6875rem;
    }
}

@media screen and (max-width: 991px) {
    .feature__area {
        padding-top: 3.875rem;
    }
}

@media screen and (max-width: 767px) {
    .feature__area {
        padding-top: 3.3125rem;
    }
}

.feature__area .feature__sp {
    position: absolute;
    left: 15%;
    bottom: 10%;
    max-width: 5rem;
    z-index: -1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    -webkit-animation: fet1 6s linear 0s infinite alternate none;
    animation: fet1 6s linear 0s infinite alternate none;
}

@media screen and (max-width: 991px) {
    .feature__area .feature__sp {
        max-width: 3.125rem;
    }
}

@media screen and (max-width: 767px) {
    .feature__area .feature__sp {
        display: none;
    }
}

.feature__area .feature__sp.sp-two {
    left: auto;
    right: 15%;
    max-width: 6.25rem;
    bottom: 5%;
    -webkit-animation: fet2 6s linear 0s infinite alternate none;
    animation: fet2 6s linear 0s infinite alternate none;
}

@media screen and (max-width: 991px) {
    .feature__area .feature__sp.sp-two {
        max-width: 3.125rem;
    }
}

.feature__area .feature__sp.sp-three {
    left: 5%;
    right: 15%;
    max-width: 6.25rem;
    bottom: 20%;
    -webkit-animation: fet3 6s linear 0s infinite alternate none;
    animation: fet3 6s linear 0s infinite alternate none;
}

@media screen and (max-width: 991px) {
    .feature__area .feature__sp.sp-three {
        max-width: 3.125rem;
    }
}

.feature__area .feature__sp.sp-four {
    left: auto;
    right: 25%;
    max-width: 5rem;
    bottom: 25%;
    -webkit-animation: fet4 6s linear 0s infinite alternate none;
    animation: fet4 6s linear 0s infinite alternate none;
}

@media screen and (max-width: 991px) {
    .feature__area .feature__sp.sp-four {
        max-width: 3.125rem;
    }
}

@-webkit-keyframes fet1 {
    0% {
        -webkit-transform: scale(1) rotate(0deg) translateY(0px);
        transform: scale(1) rotate(0deg) translateY(0px);
    }

    100% {
        -webkit-transform: scale(0.6) rotate(-40deg) translateY(200px);
        transform: scale(0.6) rotate(-40deg) translateY(200px);
    }
}

@keyframes fet1 {
    0% {
        -webkit-transform: scale(1) rotate(0deg) translateY(0px);
        transform: scale(1) rotate(0deg) translateY(0px);
    }

    100% {
        -webkit-transform: scale(0.6) rotate(-40deg) translateY(200px);
        transform: scale(0.6) rotate(-40deg) translateY(200px);
    }
}

@-webkit-keyframes fet2 {
    0% {
        -webkit-transform: scale(1) rotate(0deg) translateY(0px);
        transform: scale(1) rotate(0deg) translateY(0px);
    }

    100% {
        -webkit-transform: scale(0.6) rotate(40deg) translateY(-300px);
        transform: scale(0.6) rotate(40deg) translateY(-300px);
    }
}

@keyframes fet2 {
    0% {
        -webkit-transform: scale(1) rotate(0deg) translateY(0px);
        transform: scale(1) rotate(0deg) translateY(0px);
    }

    100% {
        -webkit-transform: scale(0.6) rotate(40deg) translateY(-300px);
        transform: scale(0.6) rotate(40deg) translateY(-300px);
    }
}

@-webkit-keyframes fet3 {
    0% {
        -webkit-transform: scale(1) rotate(0deg) translateY(0px);
        transform: scale(1) rotate(0deg) translateY(0px);
    }

    100% {
        -webkit-transform: scale(0.8) translateX(200px);
        transform: scale(0.8) translateX(200px);
    }
}

@keyframes fet3 {
    0% {
        -webkit-transform: scale(1) rotate(0deg) translateY(0px);
        transform: scale(1) rotate(0deg) translateY(0px);
    }

    100% {
        -webkit-transform: scale(0.8) translateX(200px);
        transform: scale(0.8) translateX(200px);
    }
}

@-webkit-keyframes fet4 {
    0% {
        -webkit-transform: scale(1) rotate(0deg) translateY(0px);
        transform: scale(1) rotate(0deg) translateY(0px);
    }

    100% {
        -webkit-transform: scale(0.8) translateX(200px);
        transform: scale(0.8) translateX(200px);
    }
}

@keyframes fet4 {
    0% {
        -webkit-transform: scale(1) rotate(0deg) translateY(0px);
        transform: scale(1) rotate(0deg) translateY(0px);
    }

    100% {
        -webkit-transform: scale(0.8) translateX(200px);
        transform: scale(0.8) translateX(200px);
    }
}

.feature__area .feature__snake__sp {
    position: absolute;
    left: 0;
    top: -6.25rem;
    z-index: -1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

.feature__area .feature__img img {
    width: 100%;
    border-radius: 1.5rem;
}

@media screen and (max-width: 1199px) {
    .feature__area .feature__img img {
        border-radius: 1.125rem;
    }
}

@media screen and (max-width: 991px) {
    .feature__area .feature__img img {
        border-radius: 0.625rem;
    }
}

@media screen and (max-width: 1199px) {

    .feature__area .g-5,
    .feature__area .gx-5 {
        --bs-gutter-x: 2rem;
    }

    .feature__area .g-5,
    .feature__area .gy-5 {
        --bs-gutter-y: 2rem;
    }
}

.feature__area .feature__main {
    position: relative;
    z-index: 1;
    background-color: hsl(var(--black)/0.02);
    border-radius: 1.5rem;
    padding: 2rem;
    -webkit-backdrop-filter: blur(0.3125rem);
    backdrop-filter: blur(0.3125rem);
}

@media screen and (max-width: 1199px) {
    .feature__area .feature__main {
        padding: 1.625rem;
        border-radius: 1.125rem;
    }
}

@media screen and (max-width: 991px) {
    .feature__area .feature__main {
        border-radius: 0.625rem;
    }
}

.feature__area .feature__main .feature__box {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    max-width: 6.25rem;
}

.feature__area .feature__main .feature__content h4 {
    font-size: 1.5rem;
    text-transform: capitalize;
    margin-bottom: 1rem;
}

@media screen and (max-width: 1199px) {
    .feature__area .feature__main .feature__content h4 {
        font-size: 1.375rem;
    }
}

.feature__area .feature__main .feature__content p {
    font-size: 1.125rem;
    margin-bottom: 1.25rem;
}

@media screen and (max-width: 1199px) {
    .feature__area .feature__main .feature__content p {
        font-size: 1rem;
    }
}

@media screen and (max-width: 991px) {
    .feature__area .feature__main .feature__content p {
        font-size: 0.875rem;
    }
}

.feature__area .feature__img {
    margin-top: 3rem;
}

@media screen and (max-width: 991px) {
    .feature__area .feature__img {
        margin-top: 2rem;
    }
}

.feature__area .feature__img.two {
    margin-top: 0;
    margin-bottom: 3rem;
}

@media screen and (max-width: 991px) {
    .feature__area .feature__img.two {
        margin-bottom: 2rem;
    }
}

.feature__title {
    margin-bottom: 4.875rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 0.625rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

@media screen and (max-width: 1399px) {
    .feature__title {
        margin-bottom: 3.125rem;
    }
}

@media screen and (max-width: 1199px) {
    .feature__title {
        margin-bottom: 2.5rem;
    }
}

@media screen and (max-width: 991px) {
    .feature__title {
        margin-bottom: 2.0625rem;
    }
}

@media screen and (max-width: 767px) {
    .feature__title {
        margin-bottom: 1.75rem;
    }
}

@media screen and (max-width: 575px) {
    .feature__title {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
    }
}

.feature__title h2 {
    margin-bottom: 0;
    font-size: 4rem;
    font-weight: 600;
    text-transform: uppercase;
}

@media screen and (max-width: 1399px) {
    .feature__title h2 {
        font-size: 3.375rem;
    }
}

@media screen and (max-width: 1199px) {
    .feature__title h2 {
        font-size: 2.75rem;
    }
}

@media screen and (max-width: 991px) {
    .feature__title h2 {
        font-size: 2.125rem;
    }
}

@media screen and (max-width: 424px) {
    .feature__title h2 {
        font-size: 1.875rem;
    }
}

.feature__title h2 span {
    display: block;
    font-weight: 300;
}

.feature__title a span:first-child {
    width: 9.375rem;
}

.feature__img__wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.feature__img__wrap span:nth-child(1) {
    max-width: 21.25rem;
    display: block;
    width: 100%;
}

.feature__img__wrap span:nth-child(1) img {
    border-radius: 0;
}

.feature__img__wrap span:nth-child(2) {
    position: absolute;
    left: 14%;
    bottom: 0;
    z-index: 1;
    max-width: 3.5rem;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

@media screen and (max-width: 991px) {
    .feature__img__wrap span:nth-child(2) {
        max-width: 2.5rem;
    }
}

.feature__img__wrap span:nth-child(3) {
    position: absolute;
    left: 2%;
    top: 0;
    z-index: 1;
    max-width: 3.5rem;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

@media screen and (max-width: 991px) {
    .feature__img__wrap span:nth-child(3) {
        max-width: 2.5rem;
    }
}

.feature__img__wrap span:nth-child(4) {
    position: absolute;
    right: 14%;
    top: 0;
    z-index: 1;
    max-width: 3.5rem;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

@media screen and (max-width: 991px) {
    .feature__img__wrap span:nth-child(4) {
        max-width: 2.5rem;
    }
}

.feature__img__wrap span:nth-child(5) {
    position: absolute;
    right: 2%;
    bottom: 0;
    z-index: 1;
    max-width: 3.5rem;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

@media screen and (max-width: 991px) {
    .feature__img__wrap span:nth-child(5) {
        max-width: 2.5rem;
    }
}

.feature__img__wrap span img {
    width: 100%;
    border-radius: 50%;
}

.feature__main__thumb {
    overflow: hidden;
    padding: 2.3125rem 2rem;
    min-height: 20.625rem;
    border-radius: 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background-image: url(../images/feature-thumb-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: hsl(var(--white));
    margin-bottom: 1.875rem;
}

@media screen and (max-width: 1199px) {
    .feature__main__thumb {
        min-height: 16.25rem;
        padding: 1.875rem 1.625rem;
    }
}

@media screen and (max-width: 991px) {
    .feature__main__thumb {
        border-radius: 0.625rem;
        min-height: 13.125rem;
        padding: 1.25rem 1.25rem;
    }
}

.feature__main__thumb__sp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 3.125rem;
    -webkit-transition: 2s;
    transition: 2s;
}

@media screen and (max-width: 991px) {
    .feature__main__thumb__sp {
        gap: 1rem;
    }
}

.feature__main__thumb__sp span {
    font-size: 1.125rem;
    font-weight: 400;
    text-transform: capitalize;
    background-color: #f312ba;
    color: hsl(var(--white));
    padding: 0.3125rem 1rem;
    border-radius: 1.875rem;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

@media screen and (max-width: 1199px) {
    .feature__main__thumb__sp span {
        font-size: 0.875rem;
    }
}

@media screen and (max-width: 991px) {
    .feature__main__thumb__sp span {
        font-size: 0.75rem;
    }
}

.feature__main__thumb__sp span:nth-child(even) {
    position: relative;
    top: 0.625rem;
}

.feature__main__thumb__sp.two {
    margin-bottom: 0.625rem;
}

.feature__main__thumb__sp.two {
    margin-left: -25rem;
    -webkit-transition: 2s;
    transition: 2s;
}

@media screen and (max-width: 991px) {
    .feature__main__thumb__sp.two {
        margin-left: -15.625rem;
    }
}

.feature__main__thumb__sp.three {
    position: relative;
    z-index: 1;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 1.0625rem;
    -webkit-transition: 0.6s;
    transition: 0.6s;
}

.feature__main__thumb__sp .fp__one {
    width: 4.6875rem;
    height: 4.6875rem;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

@media screen and (max-width: 991px) {
    .feature__main__thumb__sp .fp__one {
        width: 2.8125rem;
        height: 2.8125rem;
    }
}

.feature__main__thumb__sp .fp__two {
    width: 4.6875rem;
    height: 4.6875rem;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

@media screen and (max-width: 991px) {
    .feature__main__thumb__sp .fp__two {
        width: 2.8125rem;
        height: 2.8125rem;
    }
}

.feature__main__thumb__sp .mouse__cursor {
    position: absolute;
    left: 60%;
    top: 0;
    z-index: 1;
    width: 1.75rem;
}

@media screen and (max-width: 991px) {
    .feature__main__thumb__sp .mouse__cursor {
        top: -0.875rem;
        width: 1.25rem;
    }
}

.feature__main__thumb__sp span:nth-child(2) {
    background-color: #ff9900;
}

.feature__main__thumb__sp span:nth-child(3) {
    background-color: #7b00ff;
}

.feature__main__thumb__sp span:nth-child(4) {
    background-color: #f95353;
}

.feature__main__thumb__sp span:nth-child(5) {
    background-color: #2f00ff;
}

.feature__main__thumb__sp span:nth-child(6) {
    background-color: #d500ff;
}

.feature__main__thumb__sp span:nth-child(7) {
    background-color: red;
}

.feature__main__thumb__sp span:nth-child(8) {
    background-color: #00ffaa;
}

.feature__main__thumb__sp span:nth-child(9) {
    background-color: #41865a;
}

.feature__main__thumb__sp span:nth-child(10) {
    background-color: #a35700;
}

.feature__main__thumb__sp.two span:nth-child(1) {
    background-color: #d500ff;
}

.feature__main__thumb__sp.two span:nth-child(2) {
    background-color: red;
}

.feature__main__thumb__sp.two span:nth-child(3) {
    background-color: #00ffaa;
}

.feature__main__thumb__sp.two span:nth-child(4) {
    background-color: #41865a;
}

.feature__main__thumb__sp.two span:nth-child(5) {
    background-color: #a35700;
}

.feature__main__thumb__sp .color__bl {
    background-color: #14d4ff !important;
}

.feature__main__thumb.thumb-two {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    min-height: 21.125rem;
}

@media screen and (max-width: 1199px) {
    .feature__main__thumb.thumb-two {
        min-height: 13.25rem;
    }
}

.feature__main__thumb.thumb-two:hover {
    padding: 0;
}

.feature__main__thumb.thumb-two:hover .feature__main__thumb__inner img {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.feature__main__thumb__inner img {
    width: 100%;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.feature__main__thumb:hover .feature__main__thumb__sp.two {
    margin-left: -3.125rem;
}

.feature__main__thumb:hover .feature__main__thumb__sp {
    margin-left: -18.75rem;
}

.feature__main__thumb:hover .feature__main__thumb__sp.three {
    margin-left: -1.25rem;
}

.feature__main__thumb:hover .feature__img__wrap span:nth-child(5) {
    right: 75%;
}

.feature__main__thumb:hover .feature__img__wrap span:nth-child(4) {
    top: 75%;
    right: 2%;
}

.feature__main__thumb:hover .feature__img__wrap span:nth-child(3) {
    left: 75%;
}

.feature__main__thumb:hover .feature__img__wrap span:nth-child(2) {
    bottom: 80%;
    left: 2%;
}

/* =========================== Feature Section End Here ========================= */
/* =========================== Counter Section Start Here ========================= */
.counter__area {
    position: relative;
    z-index: 1;
    padding-top: 11.25rem;
    padding-bottom: 12.375rem;
}

@media screen and (max-width: 1399px) {
    .counter__area {
        padding-top: 6.1875rem;
        padding-bottom: 9.1875rem;
    }
}

@media screen and (max-width: 1199px) {
    .counter__area {
        padding-top: 4.375rem;
        padding-bottom: 7.0625rem;
    }
}

@media screen and (max-width: 991px) {
    .counter__area {
        padding-top: 3.125rem;
        padding-bottom: 5.875rem;
    }
}

@media screen and (max-width: 767px) {
    .counter__area {
        padding-top: 1.9375rem;
        padding-bottom: 4.625rem;
    }
}

.counter__area .counter__sp {
    position: absolute;
    left: 0;
    top: -18.75rem;
    width: 100%;
    z-index: -1;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.counter__area .counter__main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    padding: 0 3rem;
}

@media screen and (max-width: 1399px) {
    .counter__area .counter__main {
        gap: 2.375rem;
    }
}

@media screen and (max-width: 991px) {
    .counter__area .counter__main {
        padding: 0 1.875rem;
        gap: 1.375rem;
    }
}

@media screen and (max-width: 767px) {
    .counter__area .counter__main {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 575px) {
    .counter__area .counter__main {
        grid-template-columns: repeat(1, 1fr);
    }
}

.counter__area .counter__main__single {
    text-align: center;
    -webkit-box-shadow: 0.875rem -0.25rem 4.6875rem hsl(var(--black)/0.04);
    box-shadow: 0.875rem -0.25rem 4.6875rem hsl(var(--black)/0.04);
    border-radius: 2.5rem;
    padding: 9.375rem 2.5rem;
    position: relative;
    z-index: 1;
    background-color: hsl(var(--white));
    -webkit-transform: rotate(23deg);
    transform: rotate(23deg);
    -webkit-transition: 0.4s;
    transition: 0.4s;
    overflow: hidden;
}

@media screen and (max-width: 1499px) {
    .counter__area .counter__main__single {
        padding: 6.875rem 2.5rem;
    }
}

@media screen and (max-width: 1199px) {
    .counter__area .counter__main__single {
        border-radius: 1.25rem;
        padding: 5.625rem 1.875rem;
    }
}

@media screen and (max-width: 991px) {
    .counter__area .counter__main__single {
        border-radius: 1.25rem;
        padding: 3.75rem 1.25rem;
    }
}

.counter__area .counter__main__single::after {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: -1;
    width: 20rem;
    height: 20rem;
    content: "";
    background-color: hsl(var(--base));
    border-radius: 50%;
    -webkit-filter: blur(4.375rem);
    filter: blur(4.375rem);
    opacity: 0.4;
}

@media screen and (max-width: 1499px) {
    .counter__area .counter__main__single::after {
        width: 13.75rem;
        height: 13.75rem;
    }
}

@media screen and (max-width: 1199px) {
    .counter__area .counter__main__single::after {
        width: 9.375rem;
        height: 9.375rem;
    }
}

@media screen and (max-width: 1199px) {
    .counter__area .counter__main__single::after {
        width: 6.25rem;
        height: 6.25rem;
        -webkit-filter: blur(2.5rem);
        filter: blur(2.5rem);
    }
}

.counter__area .counter__main__single:nth-child(2)::after {
    background-color: hsl(var(--base-two));
}

.counter__area .counter__main__single:nth-child(1) {
    -webkit-transform: rotate(12deg);
    transform: rotate(12deg);
}

.counter__area .counter__main__single:nth-child(3) {
    -webkit-transform: rotate(-12deg);
    transform: rotate(-12deg);
}

.counter__area .counter__main__single h4 {
    font-size: 6.25rem;
    font-weight: 700;
    margin-bottom: 0;
}

@media screen and (max-width: 1499px) {
    .counter__area .counter__main__single h4 {
        font-size: 5.75rem;
    }
}

@media screen and (max-width: 1399px) {
    .counter__area .counter__main__single h4 {
        font-size: 4.5rem;
    }
}

@media screen and (max-width: 1199px) {
    .counter__area .counter__main__single h4 {
        font-size: 3.25rem;
    }
}

@media screen and (max-width: 991px) {
    .counter__area .counter__main__single h4 {
        font-size: 3.375rem;
    }
}

.counter__area .counter__main__single h4 .counter__stroke {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 0.0625rem;
    -webkit-text-stroke-color: hsl(var(--heading-color));
    font-size: 6.875rem;
}

@media screen and (max-width: 1499px) {
    .counter__area .counter__main__single h4 .counter__stroke {
        font-size: 5.625rem;
    }
}

@media screen and (max-width: 1399px) {
    .counter__area .counter__main__single h4 .counter__stroke {
        font-size: 5rem;
    }
}

@media screen and (max-width: 1199px) {
    .counter__area .counter__main__single h4 .counter__stroke {
        font-size: 3.75rem;
    }
}

@media screen and (max-width: 991px) {
    .counter__area .counter__main__single h4 .counter__stroke {
        font-size: 2.5rem;
    }
}

.counter__area .counter__main__single p {
    font-size: 1.5rem;
    font-weight: 300;
    text-transform: uppercase;
}

@media screen and (max-width: 1499px) {
    .counter__area .counter__main__single p {
        font-size: 1.25rem;
    }
}

@media screen and (max-width: 1199px) {
    .counter__area .counter__main__single p {
        font-size: 1.0625rem;
    }
}

@media screen and (max-width: 991px) {
    .counter__area .counter__main__single p {
        font-size: 0.875rem;
    }
}

/* =========================== Counter Section End Here ========================= */
/* ================================ Testimonial Section Css Start ============================= */
.testimonial__area {
    position: relative;
    z-index: 1;
    padding-bottom: 6.25rem;
}

@media screen and (max-width: 1399px) {
    .testimonial__area {
        padding-bottom: 3.25rem;
    }
}

@media screen and (max-width: 1199px) {
    .testimonial__area {
        padding-bottom: 2rem;
    }
}

@media screen and (max-width: 767px) {
    .testimonial__area {
        padding-bottom: 1.375rem;
    }
}

.testimonial__area .testimonial__sp {
    position: absolute;
    left: 0;
    bottom: -25rem;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    z-index: -2;
}

.testimonial__area .testimonial__bg {
    position: absolute;
    left: 0;
    bottom: -31.25rem;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    z-index: -1;
}

.testimonial__area .testimonial__title {
    text-align: center;
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.75rem;
    margin-top: 0.9375rem;
}

@media screen and (max-width: 1399px) {
    .testimonial__area .testimonial__title {
        margin-bottom: 0.25rem;
    }
}

@media screen and (max-width: 1199px) {
    .testimonial__area .testimonial__title {
        max-width: 32.8125rem;
    }
}

@media screen and (max-width: 991px) {
    .testimonial__area .testimonial__title {
        max-width: 28.75rem;
    }
}

@media screen and (max-width: 767px) {
    .testimonial__area .testimonial__title {
        max-width: 27.5rem;
    }
}

@media screen and (max-width: 575px) {
    .testimonial__area .testimonial__title {
        max-width: 90%;
    }
}

.testimonial__area .testimonial__title h2 {
    font-size: 4rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0;
}

@media screen and (max-width: 1399px) {
    .testimonial__area .testimonial__title h2 {
        font-size: 3.375rem;
    }
}

@media screen and (max-width: 1199px) {
    .testimonial__area .testimonial__title h2 {
        font-size: 2.75rem;
    }
}

@media screen and (max-width: 991px) {
    .testimonial__area .testimonial__title h2 {
        font-size: 2.125rem;
    }
}

@media screen and (max-width: 424px) {
    .testimonial__area .testimonial__title h2 {
        font-size: 1.875rem;
    }
}

.testimonial__area .testimonial__title span {
    font-weight: 300;
}

.testimonial__area .testimonial__single {
    -webkit-box-shadow: 0 0 4.375rem hsl(var(--black)/0.04);
    box-shadow: 0 0 4.375rem hsl(var(--black)/0.04);
    border-radius: 1.875rem;
    background-color: hsl(var(--white));
    padding: 2.9375rem 2rem;
    -webkit-transform: rotate(-17deg);
    transform: rotate(-17deg);
    -webkit-transition: 1s;
    transition: 1s;
}

@media screen and (max-width: 991px) {
    .testimonial__area .testimonial__single {
        border-radius: 0.9375rem;
    }
}

@media screen and (max-width: 767px) {
    .testimonial__area .testimonial__single {
        padding: 1.875rem 1.25rem;
    }
}

@media screen and (max-width: 575px) {
    .testimonial__area .testimonial__single {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

.testimonial__area .testimonial__single__title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 5rem;
}

@media screen and (max-width: 991px) {
    .testimonial__area .testimonial__single__title {
        margin-bottom: 3.125rem;
    }
}

.testimonial__area .testimonial__single__title span {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 1rem;
    margin-top: -0.1875rem;
}

.testimonial__area .testimonial__single__title h3 {
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 500;
    text-transform: capitalize;
    font-family: var(--body-font);
}

.testimonial__area .testimonial__single__content {
    margin-bottom: 2.1875rem;
}

.testimonial__area .testimonial__single__content p {
    font-size: 1.125rem;
    font-weight: 400;
    color: hsl(var(--text-color)/0.66);
}

@media screen and (max-width: 1199px) {
    .testimonial__area .testimonial__single__content p {
        font-size: 1rem;
    }
}

@media screen and (max-width: 767px) {
    .testimonial__area .testimonial__single__content p {
        font-size: 0.875rem;
    }
}

.testimonial__area .testimonial__single__user {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
}

.testimonial__area .testimonial__single__user__img {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 2.875rem;
    height: 2.875rem;
    border-radius: 50%;
    overflow: hidden;
}

.testimonial__area .testimonial__single__user__img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.testimonial__area .testimonial__single__user__info h4 {
    font-size: 1rem;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 0.25rem;
    font-family: var(--body-font);
}

@media screen and (max-width: 767px) {
    .testimonial__area .testimonial__single__user__info h4 {
        font-size: 0.875rem;
    }
}

.testimonial__area .testimonial__single__user__info p {
    font-size: 0.875rem;
    font-weight: 300;
}

@media screen and (max-width: 767px) {
    .testimonial__area .testimonial__single__user__info p {
        font-size: 0.75rem;
    }
}

.testimonial__area .owl-dots {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0.3125rem;
    position: absolute;
    left: 50%;
    bottom: 2rem;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1;
}

.testimonial__area .owl-dots button {
    width: 0.625rem;
    height: 0.625rem;
    background-color: hsl(var(--text-color)/0.2) !important;
    border-radius: 50%;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.testimonial__area .owl-dots button.active {
    width: 1.875rem;
    border-radius: 1.25rem;
    background-color: hsl(var(--base)) !important;
}

.testimonial__area .owl-carousel .owl-stage-outer {
    padding-top: 9.375rem;
    padding-bottom: 6.25rem;
}

@media screen and (max-width: 767px) {
    .testimonial__area .owl-carousel .owl-stage-outer {
        padding-top: 6.25rem;
    }
}

@media screen and (max-width: 575px) {
    .testimonial__area .owl-carousel .owl-stage-outer {
        padding-top: 2.375rem;
    }
}

.testimonial__area .testimonial__wrap.owl-carousel .owl-item.active.center .testimonial__single {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    margin-top: -6.25rem;
}

@media screen and (max-width: 767px) {
    .testimonial__area .testimonial__wrap.owl-carousel .owl-item.active.center .testimonial__single {
        margin-top: -3.75rem;
    }
}

@media screen and (max-width: 575px) {
    .testimonial__area .testimonial__wrap.owl-carousel .owl-item.active.center .testimonial__single {
        margin-top: 0rem;
    }
}

.testimonial__area .testimonial__wrap.owl-carousel .owl-item.active+.owl-item.active~.owl-item.active .testimonial__single {
    -webkit-transform: rotate(17deg);
    transform: rotate(17deg);
}

@media screen and (max-width: 575px) {
    .testimonial__area .testimonial__wrap.owl-carousel .owl-item.active+.owl-item.active~.owl-item.active .testimonial__single {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

/* ================================ Testimonial Section Css End ============================= */
/* =========================== FAQ Section Start Here ========================= */
.faq__area {
    position: relative;
    z-index: 1;
    padding-top: 3.125rem;
    padding-bottom: 1.5rem;
}

@media screen and (max-width: 1199px) {
    .faq__area {
        padding-top: 2.6875rem;
    }
}

@media screen and (max-width: 991px) {
    .faq__area {
        padding-top: 1.6875rem;
        padding-bottom: 0.9375rem;
    }
}

@media screen and (max-width: 767px) {
    .faq__area {
        padding-top: 1rem;
    }
}

.faq__area .faq__sp {
    position: absolute;
    left: 10%;
    top: 65%;
    z-index: -1;
    max-width: 6.25rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    -webkit-animation: faqOne 6s linear 0s infinite alternate none;
    animation: faqOne 6s linear 0s infinite alternate none;
}

@media screen and (max-width: 1399px) {
    .faq__area .faq__sp {
        left: 5%;
    }
}

@media screen and (max-width: 991px) {
    .faq__area .faq__sp {
        max-width: 2.5rem;
        left: 0%;
    }
}

@media screen and (max-width: 767px) {
    .faq__area .faq__sp {
        display: none;
    }
}

.faq__area .faq__sp.sp2 {
    left: auto;
    right: 10%;
    top: 35%;
    -webkit-animation: faqTwo 6s linear 0s infinite alternate none;
    animation: faqTwo 6s linear 0s infinite alternate none;
}

.faq__area .faq__sp.sp3 {
    left: 15%;
    top: 25%;
    max-width: 4.375rem;
    -webkit-animation: faqThree 6s linear 0s infinite alternate none;
    animation: faqThree 6s linear 0s infinite alternate none;
}

@media screen and (max-width: 991px) {
    .faq__area .faq__sp.sp3 {
        max-width: 2.5rem;
    }
}

@-webkit-keyframes faqOne {
    0% {
        -webkit-transform: scale(1) rotate(0deg) translateY(0px);
        transform: scale(1) rotate(0deg) translateY(0px);
    }

    100% {
        -webkit-transform: scale(0.6) rotate(-40deg) translateY(300px);
        transform: scale(0.6) rotate(-40deg) translateY(300px);
    }
}

@keyframes faqOne {
    0% {
        -webkit-transform: scale(1) rotate(0deg) translateY(0px);
        transform: scale(1) rotate(0deg) translateY(0px);
    }

    100% {
        -webkit-transform: scale(0.6) rotate(-40deg) translateY(300px);
        transform: scale(0.6) rotate(-40deg) translateY(300px);
    }
}

@-webkit-keyframes faqTwo {
    0% {
        -webkit-transform: scale(1) rotate(0deg) translateY(0px);
        transform: scale(1) rotate(0deg) translateY(0px);
    }

    100% {
        -webkit-transform: scale(0.6) rotate(40deg) translateY(-300px);
        transform: scale(0.6) rotate(40deg) translateY(-300px);
    }
}

@keyframes faqTwo {
    0% {
        -webkit-transform: scale(1) rotate(0deg) translateY(0px);
        transform: scale(1) rotate(0deg) translateY(0px);
    }

    100% {
        -webkit-transform: scale(0.6) rotate(40deg) translateY(-300px);
        transform: scale(0.6) rotate(40deg) translateY(-300px);
    }
}

@-webkit-keyframes faqThree {
    0% {
        -webkit-transform: scale(1) rotate(0deg) translateY(0px);
        transform: scale(1) rotate(0deg) translateY(0px);
    }

    100% {
        -webkit-transform: scale(0.6) translateY(-300px);
        transform: scale(0.6) translateY(-300px);
    }
}

@keyframes faqThree {
    0% {
        -webkit-transform: scale(1) rotate(0deg) translateY(0px);
        transform: scale(1) rotate(0deg) translateY(0px);
    }

    100% {
        -webkit-transform: scale(0.6) translateY(-300px);
        transform: scale(0.6) translateY(-300px);
    }
}

.faq__area .faq__title {
    text-align: center;
    margin-bottom: 6.9375rem;
    max-width: 36.875rem;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 1399px) {
    .faq__area .faq__title {
        margin-bottom: 5.375rem;
    }
}

@media screen and (max-width: 1199px) {
    .faq__area .faq__title {
        margin-bottom: 4rem;
    }
}

@media screen and (max-width: 991px) {
    .faq__area .faq__title {
        margin-bottom: 3.625rem;
        max-width: 22.5rem;
    }
}

@media screen and (max-width: 767px) {
    .faq__area .faq__title {
        margin-bottom: 2.875rem;
    }
}

.faq__area .faq__title h2 {
    font-size: 4rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0;
}

@media screen and (max-width: 1399px) {
    .faq__area .faq__title h2 {
        font-size: 3.375rem;
    }
}

@media screen and (max-width: 1199px) {
    .faq__area .faq__title h2 {
        font-size: 2.75rem;
    }
}

@media screen and (max-width: 991px) {
    .faq__area .faq__title h2 {
        font-size: 2.125rem;
    }
}

@media screen and (max-width: 424px) {
    .faq__area .faq__title h2 {
        font-size: 1.875rem;
    }
}

.faq__area .faq__title h2 span {
    font-weight: 300;
}

.faq__area .faq__main__blk {
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 1199px) {
    .faq__area .faq__main__blk {
        max-width: 43.75rem;
    }
}

@media screen and (max-width: 991px) {
    .faq__area .faq__main__blk {
        max-width: 37.5rem;
    }
}

@media screen and (max-width: 767px) {
    .faq__area .faq__main__blk {
        max-width: 30rem;
    }
}

.faq__area .faq__main__blk .accordion-button {
    padding: 1.875rem 3.125rem 1.875rem 1.875rem;
    font-size: 1.5rem;
    color: hsl(var(--heading-color));
    background-color: transparent;
    font-weight: 500;
}

@media screen and (max-width: 1199px) {
    .faq__area .faq__main__blk .accordion-button {
        font-size: 1.25rem;
        padding: 1.625rem 3.125rem 1.625rem 1.625rem;
    }
}

@media screen and (max-width: 991px) {
    .faq__area .faq__main__blk .accordion-button {
        font-size: 1.125rem;
        padding: 1.25rem 3.125rem 1.25rem 1.25rem;
    }
}

.faq__area .faq__main__blk .accordion-item {
    color: hsl(var(--heading-color));
    background-color: transparent;
    border: 0.0625rem solid hsl(var(--text-color)) !important;
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 2.5rem;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

@media screen and (max-width: 991px) {
    .faq__area .faq__main__blk .accordion-item {
        border-radius: 0.625rem;
        margin-bottom: 1.625rem;
    }
}

@media screen and (max-width: 767px) {
    .faq__area .faq__main__blk .accordion-item {
        margin-bottom: 1.375rem;
    }
}

.faq__area .faq__main__blk .accordion-item:nth-child(odd) {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
}

.faq__area .faq__main__blk .accordion-item:first-of-type {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

@media screen and (max-width: 991px) {
    .faq__area .faq__main__blk .accordion-item:first-of-type {
        border-radius: 0.625rem;
    }
}

.faq__area .faq__main__blk .accordion-item:last-of-type {
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

@media screen and (max-width: 991px) {
    .faq__area .faq__main__blk .accordion-item:last-of-type {
        border-radius: 0.625rem;
    }
}

.faq__area .faq__main__blk .accordion-button:focus {
    border-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.faq__area .faq__main__blk .accordion-body {
    padding: 0rem 1.25rem 1.25rem 1.25rem;
    font-size: 1rem;
    font-weight: 400;
    color: hsl(var(--text-color));
}

@media screen and (max-width: 991px) {
    .faq__area .faq__main__blk .accordion-body {
        font-size: 0.875rem;
    }
}

.faq__area .faq__main__blk .accordion-button:not(.collapsed) {
    color: hsl(var(--heading-color));
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.faq__area .faq__main__blk .accordion-button::after {
    display: none;
}

.faq__area .faq__main__blk .faq__icon {
    position: absolute;
    right: 0.9375rem;
    top: 50%;
    content: "";
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 0;
    width: 1.875rem;
    height: 1.875rem;
    border: 0.125rem solid hsl(var(--text-color));
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 1.125rem;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

@media screen and (max-width: 991px) {
    .faq__area .faq__main__blk .faq__icon {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 1rem;
    }
}

@media screen and (max-width: 767px) {
    .faq__area .faq__main__blk .faq__icon {
        width: 1.25rem;
        height: 1.25rem;
        font-size: 0.75rem;
        border-width: 0.0625rem;
    }
}

.faq__area .faq__main__blk .accordion-button[aria-expanded=true] .faq__minus {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotate(360deg);
    transform: translateY(-50%) rotate(360deg);
}

.faq__area .faq__main__blk .accordion-button[aria-expanded=false] .faq__plus {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotate(360deg);
    transform: translateY(-50%) rotate(360deg);
}

.faq__area .faq__main__blk .accordion-item.active {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

/* =========================== FAQ Section End Here ========================= */
/* =========================== App Section Start Here ========================= */
.app__area {
    position: relative;
    z-index: 1;
    padding-bottom: 5.75rem;
    padding-top: 6.25rem;
}

@media screen and (max-width: 1399px) {
    .app__area {
        padding-top: 3.125rem;
        padding-bottom: 4.5rem;
    }
}

@media screen and (max-width: 1199px) {
    .app__area {
        padding-top: 1.5rem;
        padding-bottom: 2.625rem;
    }
}

@media screen and (max-width: 767px) {
    .app__area {
        padding-top: 1.6875rem;
        padding-bottom: 2rem;
    }
}

@media screen and (max-width: 575px) {
    .app__area {
        padding-top: 1.25rem;
    }
}

.app__area .app__bg {
    position: absolute;
    left: 0;
    top: -18.75rem;
    z-index: -1;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

.app__area .app__bg img {
    width: 100%;
}

.app__area .app__main {
    position: relative;
    z-index: 1;
}

.app__area .app__main__sp {
    position: absolute;
    z-index: -1;
    width: 5.625rem;
    height: 5.625rem;
    background-color: hsl(var(--white));
    border-radius: 50%;
    -webkit-box-shadow: 0 1.25rem 3.125rem rgba(27, 74, 131, 0.06);
    box-shadow: 0 1.25rem 3.125rem rgba(27, 74, 131, 0.06);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

@media screen and (max-width: 1199px) {
    .app__area .app__main__sp {
        width: 4.375rem;
        height: 4.375rem;
    }
}

@media screen and (max-width: 991px) {
    .app__area .app__main__sp {
        width: 3.75rem;
        height: 3.75rem;
    }
}

@media screen and (max-width: 767px) {
    .app__area .app__main__sp {
        width: 3.125rem;
        height: 3.125rem;
    }
}

@media screen and (max-width: 575px) {
    .app__area .app__main__sp {
        display: none;
    }
}

.app__area .app__main__sp img {
    max-width: 2.1875rem;
}

@media screen and (max-width: 1199px) {
    .app__area .app__main__sp img {
        max-width: 1.75rem;
    }
}

@media screen and (max-width: 991px) {
    .app__area .app__main__sp img {
        max-width: 1.5625rem;
    }
}

@media screen and (max-width: 767px) {
    .app__area .app__main__sp img {
        max-width: 1.25rem;
    }
}

.app__area .app__main__sp.sp1 {
    left: 0;
    top: 30%;
}

.app__area .app__main__sp.sp2 {
    right: 0;
    top: 38%;
}

.app__area .app__main__sp.sp3 {
    left: 18%;
    top: 13%;
}

@media screen and (max-width: 991px) {
    .app__area .app__main__sp.sp3 {
        left: 10%;
        top: 8%;
    }
}

.app__area .app__main__sp.sp4 {
    right: 22%;
    top: 18%;
}

@media screen and (max-width: 991px) {
    .app__area .app__main__sp.sp4 {
        right: 10%;
        top: 8%;
    }
}

.app__area .app__main__img {
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

.app__area .app__main__img img {
    max-width: 26.875rem;
}

@media screen and (max-width: 1199px) {
    .app__area .app__main__img img {
        max-width: 23.75rem;
    }
}

@media screen and (max-width: 767px) {
    .app__area .app__main__img img {
        max-width: 17.5rem;
    }
}

.app__area .app__main__title {
    text-align: center;
    max-width: 46.25rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4.875rem;
    margin-top: -16.875rem;
    position: relative;
    z-index: 2;
}

@media screen and (max-width: 1199px) {
    .app__area .app__main__title {
        max-width: 34.375rem;
        margin-top: -14.875rem;
    }
}

@media screen and (max-width: 991px) {
    .app__area .app__main__title {
        margin-bottom: 2.875rem;
    }
}

@media screen and (max-width: 767px) {
    .app__area .app__main__title {
        max-width: 25.375rem;
        margin-top: -10.875rem;
    }
}

@media screen and (max-width: 575px) {
    .app__area .app__main__title {
        max-width: 25.375rem;
        margin-top: -9.875rem;
        margin-bottom: 2.1875rem;
    }
}

.app__area .app__main__title h2 {
    font-size: 4rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0;
}

@media screen and (max-width: 1399px) {
    .app__area .app__main__title h2 {
        font-size: 3.375rem;
    }
}

@media screen and (max-width: 1199px) {
    .app__area .app__main__title h2 {
        font-size: 2.75rem;
    }
}

@media screen and (max-width: 991px) {
    .app__area .app__main__title h2 {
        font-size: 2.125rem;
    }
}

@media screen and (max-width: 424px) {
    .app__area .app__main__title h2 {
        font-size: 1.875rem;
    }
}

.app__area .app__main__title h2 span {
    font-weight: 300;
    display: block;
}

.app__area .app__main__platform {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 575px) {
    .app__area .app__main__platform {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

.app__area .app__main__platform a {
    background-color: hsl(var(--black)/0.04);
    border-radius: 3.125rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0.9375rem 2.25rem;
    color: hsl(var(--heading-color));
    text-decoration: none;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    gap: 0.4375rem;
}

@media screen and (max-width: 991px) {
    .app__area .app__main__platform a {
        padding: 0.625rem 1.875rem;
    }
}

.app__area .app__main__platform a img {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 1.875rem;
}

@media screen and (max-width: 991px) {
    .app__area .app__main__platform a img {
        width: 1.5rem;
    }
}

.app__area .app__main__platform a p {
    color: hsl(var(--heading-color));
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: capitalize;
}

@media screen and (max-width: 991px) {
    .app__area .app__main__platform a p {
        font-size: 0.875rem;
    }
}

.app__area .app__main__platform a p span {
    display: block;
    font-weight: 500;
    font-size: 0.875rem;
}

@media screen and (max-width: 991px) {
    .app__area .app__main__platform a p span {
        font-size: 0.75rem;
    }
}

.app__area .app__main__platform a:hover {
    background-color: hsl(var(--base));
}

/* =========================== App Section End Here ========================= */
/* =========================== Brand Section Start Here ========================= */
.brand__area {
    position: relative;
    z-index: 1;
    padding-top: 6.25rem;
    padding-bottom: 4.9375rem;
}

@media screen and (max-width: 1399px) {
    .brand__area {
        padding-top: 4.375rem;
    }
}

@media screen and (max-width: 1199px) {
    .brand__area {
        padding-bottom: 3.3125rem;
    }
}

@media screen and (max-width: 991px) {
    .brand__area {
        padding-top: 3.25rem;
        padding-bottom: 2.875rem;
    }
}

@media screen and (max-width: 767px) {
    .brand__area {
        padding-top: 2.625rem;
    }
}

.brand__area .brand__title {
    text-align: center;
    position: relative;
    z-index: 1;
    margin-bottom: 5.75rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

@media screen and (max-width: 1399px) {
    .brand__area .brand__title {
        margin-bottom: 3.75rem;
    }
}

@media screen and (max-width: 1199px) {
    .brand__area .brand__title {
        margin-bottom: 2.8125rem;
    }
}

@media screen and (max-width: 991px) {
    .brand__area .brand__title {
        margin-bottom: 2.1875rem;
    }
}

@media screen and (max-width: 767px) {
    .brand__area .brand__title {
        margin-bottom: 2rem;
    }
}

.brand__area .brand__title .brand__line {
    max-width: 15.625rem;
    width: 100%;
    height: 0.0625rem;
    background-color: hsl(var(--text-color)/0.16);
}

.brand__area .brand__title h2 {
    margin-bottom: 0;
    font-size: 1.5rem;
    font-weight: 500;
    text-transform: uppercase;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0.125rem 0.625rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

@media screen and (max-width: 991px) {
    .brand__area .brand__title h2 {
        font-size: 1.25rem;
    }
}

@media screen and (max-width: 767px) {
    .brand__area .brand__title h2 {
        font-size: 1.125rem;
    }
}

.brand__area .brand__main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 3.75rem;
}

@media screen and (max-width: 1199px) {
    .brand__area .brand__main {
        gap: 2.5rem;
    }
}

@media screen and (max-width: 767px) {
    .brand__area .brand__main {
        gap: 1.875rem;
    }
}

.brand__area .brand__main__single {
    width: 10.625rem;
}

@media screen and (max-width: 1199px) {
    .brand__area .brand__main__single {
        width: 8.75rem;
    }
}

@media screen and (max-width: 991px) {
    .brand__area .brand__main__single {
        width: 6.25rem;
    }
}

@media screen and (max-width: 767px) {
    .brand__area .brand__main__single {
        width: 5.625rem;
    }
}

.brand__area .brand__main__single img {
    width: 100%;
    height: auto;
}

/* =========================== Brand Section End Here ========================= */
/* ================================= Blog Section Css Start Here ============================= */
.blog__area {
    position: relative;
    z-index: 1;
    padding-top: 6.25rem;
    padding-bottom: 6rem;
}

@media screen and (max-width: 1399px) {
    .blog__area {
        padding-top: 3.25rem;
        padding-bottom: 4.5rem;
    }
}

@media screen and (max-width: 1199px) {
    .blog__area {
        padding-bottom: 3.25rem;
    }

    .blog__area .g-5,
    .blog__area .gx-5 {
        --bs-gutter-x: 2rem;
    }

    .blog__area .g-5,
    .blog__area .gy-5 {
        --bs-gutter-y: 2rem;
    }
}

@media screen and (max-width: 991px) {
    .blog__area {
        padding-bottom: 1.4375rem;
    }
}

@media screen and (max-width: 767px) {
    .blog__area {
        padding-top: 2.5rem;
    }
}

@media screen and (max-width: 575px) {
    .blog__area {
        padding-top: 1.4375rem;
    }
}

.blog__area .blog__bg {
    position: absolute;
    left: 0;
    top: -18.75rem;
    z-index: -1;
    width: 100%;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.blog__area .blog__sp {
    position: absolute;
    left: 5rem;
    top: 32%;
    z-index: -1;
    width: 100%;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    max-width: 7.5rem;
    -webkit-animation: blogOne 6s linear 0s infinite alternate none;
    animation: blogOne 6s linear 0s infinite alternate none;
}

@media screen and (max-width: 1399px) {
    .blog__area .blog__sp {
        display: none;
    }
}

@media screen and (max-width: 1199px) {
    .blog__area .blog__sp {
        display: none;
    }
}

@-webkit-keyframes blogOne {
    0% {
        -webkit-transform: scale(1) rotate(0deg) translateY(0px);
        transform: scale(1) rotate(0deg) translateY(0px);
    }

    100% {
        -webkit-transform: scale(0.6) rotate(-40deg) translateY(300px);
        transform: scale(0.6) rotate(-40deg) translateY(300px);
    }
}

@keyframes blogOne {
    0% {
        -webkit-transform: scale(1) rotate(0deg) translateY(0px);
        transform: scale(1) rotate(0deg) translateY(0px);
    }

    100% {
        -webkit-transform: scale(0.6) rotate(-40deg) translateY(300px);
        transform: scale(0.6) rotate(-40deg) translateY(300px);
    }
}

.blog__area .blog__topbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 0.625rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 4.9375rem;
}

@media screen and (max-width: 1399px) {
    .blog__area .blog__topbar {
        margin-bottom: 3.1875rem;
    }
}

@media screen and (max-width: 1199px) {
    .blog__area .blog__topbar {
        margin-bottom: 2.5rem;
    }
}

@media screen and (max-width: 991px) {
    .blog__area .blog__topbar {
        margin-bottom: 2.0625rem;
    }
}

@media screen and (max-width: 767px) {
    .blog__area .blog__topbar {
        margin-bottom: 1.625rem;
    }
}

@media screen and (max-width: 575px) {
    .blog__area .blog__topbar {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
    }
}

.blog__area .blog__topbar__title h2 {
    font-size: 4rem;
    font-weight: 600;
    margin-bottom: 0;
    text-transform: uppercase;
}

@media screen and (max-width: 1399px) {
    .blog__area .blog__topbar__title h2 {
        font-size: 3.375rem;
    }
}

@media screen and (max-width: 1199px) {
    .blog__area .blog__topbar__title h2 {
        font-size: 2.75rem;
    }
}

@media screen and (max-width: 991px) {
    .blog__area .blog__topbar__title h2 {
        font-size: 2.125rem;
    }
}

@media screen and (max-width: 424px) {
    .blog__area .blog__topbar__title h2 {
        font-size: 1.875rem;
    }
}

.blog__area .blog__topbar__title h2 span {
    display: block;
    font-weight: 300;
}

.blog__area .blog__topbar__btn a span:first-child {
    width: 9.375rem;
}

.blog__main:hover .blog__main__img img:nth-child(1) {
    -webkit-transform: translateY(0) scaleY(1);
    transform: translateY(0) scaleY(1);
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
}

.blog__main:hover .blog__main__img img:nth-child(2) {
    -webkit-transform: translateY(-50%) scaleY(2);
    transform: translateY(-50%) scaleY(2);
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);
}

.blog__main>a {
    margin-bottom: 2rem;
    width: 100%;
}

.blog__main__img {
    width: 100%;
    height: 33.125rem;
    overflow: hidden;
    border-radius: 2rem;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 1199px) {
    .blog__main__img {
        height: 25rem;
        border-radius: 1.5rem;
    }
}

@media screen and (max-width: 991px) {
    .blog__main__img {
        height: 18.75rem;
        border-radius: 0.9375rem;
    }
}

.blog__main__img img:nth-child(1) {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    -webkit-transition: 0.6s;
    transition: 0.6s;
    -webkit-transform: translateY(50%) scaleY(2);
    transform: translateY(50%) scaleY(2);
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);
}

.blog__main__img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transition: 0.6s;
    transition: 0.6s;
}

.blog__main__content span {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    color: hsl(var(--text-color));
    margin-bottom: 1rem;
    text-transform: uppercase;
}

@media screen and (max-width: 991px) {
    .blog__main__content span {
        font-size: 0.875rem;
    }
}

.blog__main__content h4 {
    font-size: 1.5rem;
    text-transform: capitalize;
    margin-bottom: 0;
    transition: .3s;
}

.blog__main__content h4:hover {
    color: hsl(var(--base));
}

@media screen and (max-width: 991px) {
    .blog__main__content h4 {
        font-size: 1.25rem;
    }
}

.blog__main__content a:nth-child(2) {
    margin-bottom: 1.5625rem;
}

.blog__main__content a:last-child {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    color: hsl(var(--text-color));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 0.0625rem solid hsl(var(--heading-color));
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    gap: 0.3125rem;
    padding: 0.25rem 0rem;
    position: relative;
    z-index: 1;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.blog__main__content a:last-child i {
    font-size: 1rem;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: 0.1s;
    transition: 0.1s;
}

.blog__main__content a:last-child::after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    z-index: -1;
    background-color: hsl(var(--heading-color));
    content: "";
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.blog__main__content a:last-child:hover::after {
    height: 100%;
}

.blog__main__content a:last-child:hover {
    color: hsl(var(--white));
    padding: 0.25rem 0.625rem;
}

.blog__main__content a:last-child:hover i {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

/* ================================= Blog Section Css End Here ================================= */
/* =========================== Blog Details Section Start Here ========================= */
.blog__details {
    padding-top: 3.125rem;
    padding-bottom: 6.25rem;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 991px) {
    .blog__details {
        padding-top: 2.8125rem;
        padding-bottom: 3.125rem;
    }
}

@media screen and (max-width: 767px) {
    .blog__details {
        padding-top: 1.25rem;
        padding-bottom: 3.125rem;
    }
}

.blog__details__sp {
    position: absolute;
    left: 0;
    top: 10%;
    z-index: -1;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

.blog__details__sp img {
    width: 100%;
}

.blog__details__wrap {
    display: grid;
    grid-template-columns: 9.375rem 1fr;
    gap: 3.125rem;
}

@media screen and (max-width: 1199px) {
    .blog__details__wrap {
        grid-template-columns: 6.25rem 1fr;
        gap: 1.875rem;
    }
}

@media screen and (max-width: 767px) {
    .blog__details__wrap {
        grid-template-columns: 3.75rem 1fr;
        gap: 1.25rem;
    }
}

@media screen and (max-width: 575px) {
    .blog__details__wrap {
        grid-template-columns: 2.5rem 1fr;
        gap: 1.25rem;
    }
}

.blog__details__wrap__sidebar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1.875rem;
}

@media screen and (max-width: 1199px) {
    .blog__details__wrap__sidebar {
        gap: 1.25rem;
    }
}

.blog__details__wrap__sidebar h4 {
    font-family: var(--body-font);
    text-transform: capitalize;
    font-size: 1.125rem;
    font-weight: 400;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    margin-bottom: 0;
    letter-spacing: 0.25rem;
}

@media screen and (max-width: 1199px) {
    .blog__details__wrap__sidebar h4 {
        font-size: 0.875rem;
        letter-spacing: 0.1875rem;
    }
}

.blog__details__wrap__sidebar ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
}

.blog__details__wrap__sidebar ul li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: hsl(var(--black)/0.03);
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 50%;
    color: hsl(var(--heading-color));
    font-size: 1.125rem;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

@media screen and (max-width: 1199px) {
    .blog__details__wrap__sidebar ul li a {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }
}

@media screen and (max-width: 575px) {
    .blog__details__wrap__sidebar ul li a {
        width: 2.1875rem;
        height: 2.1875rem;
        font-size: 0.875rem;
    }
}

.blog__details__wrap__sidebar ul li a::after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    border-radius: 50%;
    content: "";
    z-index: -1;
    background-color: hsl(var(--base));
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.blog__details__wrap__sidebar ul li a:hover::after {
    height: 100%;
}

.blog__details .blog__details__wrap__main__content span {
    font-size: 1rem;
    font-weight: 400;
    display: block;
    text-transform: uppercase;
    margin-bottom: 0.625rem;
}

@media screen and (max-width: 767px) {
    .blog__details .blog__details__wrap__main__content span {
        font-size: 0.875rem;
    }
}

.blog__details .blog__details__wrap__main__content h1 {
    font-size: 2.5rem;
    text-transform: capitalize;
    margin-bottom: 1.875rem;
}

@media screen and (max-width: 1199px) {
    .blog__details .blog__details__wrap__main__content h1 {
        font-size: 2.1875rem;
        margin-bottom: 1.5rem;
    }
}

@media screen and (max-width: 991px) {
    .blog__details .blog__details__wrap__main__content h1 {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }
}

@media screen and (max-width: 767px) {
    .blog__details .blog__details__wrap__main__content h1 {
        font-size: 1.375rem;
        margin-bottom: 1rem;
    }
}

@media screen and (max-width: 575px) {
    .blog__details .blog__details__wrap__main__content h1 {
        font-size: 1.25rem;
    }
}

.blog__details .blog__details__wrap__main__content p {
    margin-bottom: 1.875rem;
}

@media screen and (max-width: 991px) {
    .blog__details .blog__details__wrap__main__content p {
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }
}

.blog__details .blog__details__wrap__main__content img {
    width: 100%;
    border-radius: 2rem;
    margin-bottom: 1.875rem;
}

@media screen and (max-width: 991px) {
    .blog__details .blog__details__wrap__main__content img {
        border-radius: 1.25rem;
        margin-bottom: 1rem;
    }
}

@media screen and (max-width: 575px) {
    .blog__details .blog__details__wrap__main__content img {
        border-radius: 0.625rem;
    }
}

.blog__details .blog__details__quote {
    padding: 4.0625rem 6.25rem;
    text-align: center;
    background-color: hsl(var(--heading-color));
    margin-bottom: 1.875rem;
    border-radius: 2rem;
}

@media screen and (max-width: 1199px) {
    .blog__details .blog__details__quote {
        padding: 4.0625rem 3.125rem;
    }
}

@media screen and (max-width: 991px) {
    .blog__details .blog__details__quote {
        padding: 2.5rem 1.875rem;
        margin-bottom: 1rem;
        border-radius: 1.25rem;
    }
}

.blog__details .blog__details__quote p {
    margin-bottom: 0;
    color: hsl(var(--white));
    font-size: 1.25rem;
    font-style: italic;
    text-transform: capitalize;
}

@media screen and (max-width: 1199px) {
    .blog__details .blog__details__quote p {
        font-size: 1.125rem;
    }
}

@media screen and (max-width: 991px) {
    .blog__details .blog__details__quote p {
        font-size: 1rem;
    }
}

@media screen and (max-width: 767px) {
    .blog__details .blog__details__quote p {
        font-size: 0.875rem;
    }
}

.blog__details .blog__details__comment {
    padding-top: 3.125rem;
    padding-bottom: 3.125rem;
}

@media screen and (max-width: 767px) {
    .blog__details .blog__details__comment {
        padding-bottom: 0.625rem;
    }
}

.blog__details .blog__details__comment__title {
    margin-bottom: 2.5rem;
}

@media screen and (max-width: 991px) {
    .blog__details .blog__details__comment__title {
        margin-bottom: 1.5rem;
    }
}

.blog__details .blog__details__comment__title h4 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0;
    text-transform: uppercase;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media screen and (max-width: 1199px) {
    .blog__details .blog__details__comment__title h4 {
        font-size: 1.875rem;
    }
}

@media screen and (max-width: 991px) {
    .blog__details .blog__details__comment__title h4 {
        font-size: 1.5rem;
    }
}

.blog__details .blog__details__comment__single {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
    max-width: 90%;
}

@media screen and (max-width: 991px) {
    .blog__details .blog__details__comment__single {
        gap: 0.875rem;
    }
}

@media screen and (max-width: 575px) {
    .blog__details .blog__details__comment__single {
        gap: 0.5rem;
    }
}

.blog__details .blog__details__comment__single:last-child {
    margin-bottom: 0;
}

.blog__details .blog__details__comment__single__user {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 4.0625rem;
    height: 4.0625rem;
    border-radius: 50%;
    overflow: hidden;
}

@media screen and (max-width: 991px) {
    .blog__details .blog__details__comment__single__user {
        width: 3.125rem;
        height: 3.125rem;
    }
}

@media screen and (max-width: 575px) {
    .blog__details .blog__details__comment__single__user {
        width: 1.875rem;
        height: 1.875rem;
    }
}

.blog__details .blog__details__comment__single__user img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.blog__details .blog__details__comment__single.comment__reply {
    margin-left: auto;
}

@media screen and (max-width: 991px) {
    .blog__details .blog__details__comment__single__info>p {
        font-size: 0.875rem;
    }
}

@media screen and (max-width: 575px) {
    .blog__details .blog__details__comment__single__info>p {
        font-size: 0.875rem;
    }
}

.blog__details .blog__details__comment__user__info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 1.875rem;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

@media screen and (max-width: 575px) {
    .blog__details .blog__details__comment__user__info {
        gap: 0.9375rem;
        margin-bottom: 0.625rem;
    }
}

.blog__details .blog__details__comment__user__info__left h6 {
    font-size: 1.25rem;
    text-transform: capitalize;
    margin-bottom: 0.5rem;
    font-family: var(--body-font);
}

@media screen and (max-width: 991px) {
    .blog__details .blog__details__comment__user__info__left h6 {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }
}

@media screen and (max-width: 575px) {
    .blog__details .blog__details__comment__user__info__left h6 {
        font-size: 0.875rem;
    }
}

.blog__details .blog__details__comment__user__info__left span {
    display: block;
    color: #adadad;
    font-size: 0.9375rem;
    font-weight: 400;
    text-transform: capitalize;
}

@media screen and (max-width: 991px) {
    .blog__details .blog__details__comment__user__info__left span {
        font-size: 0.875rem;
    }
}

@media screen and (max-width: 575px) {
    .blog__details .blog__details__comment__user__info__left span {
        font-size: 0.75rem;
    }
}

.blog__details .blog__details__comment__user__info a {
    width: 4.125rem;
    height: 2.125rem;
    border: 0.0625rem solid hsl(var(--black)/0.08);
    border-radius: 0.3125rem;
    color: hsl(var(--heading-color));
    font-size: 0.875rem;
    font-weight: 400;
    text-transform: capitalize;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

@media screen and (max-width: 575px) {
    .blog__details .blog__details__comment__user__info a {
        width: 3.5rem;
        height: 1.875rem;
        font-size: 0.75rem;
    }
}

.blog__details .blog__details__comment__user__info a:hover {
    color: hsl(var(--white));
    border-color: hsl(var(--heading-color));
}

.blog__details .blog__details__comment__user__info a::after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    z-index: -1;
    content: "";
    background-color: hsl(var(--heading-color));
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.blog__details .blog__details__comment__user__info a:hover::after {
    height: 100%;
}

.blog__details .blog__details__comment__form {
    padding-top: 3.125rem;
    padding-bottom: 6.25rem;
}

@media screen and (max-width: 1199px) {
    .blog__details .blog__details__comment__form {
        padding-bottom: 3.125rem;
    }
}

.blog__details .blog__details__comment__form .blog__details__comment__title {
    margin-bottom: 3.75rem;
}

@media screen and (max-width: 991px) {
    .blog__details .blog__details__comment__form .blog__details__comment__title {
        margin-bottom: 1.5rem;
    }
}

.blog__details .blog__details__comment__form .contact__form__main {
    max-width: 100%;
}

.blog__related {
    position: relative;
    z-index: 1;
    padding-bottom: 6.25rem;
}

@media screen and (max-width: 1199px) {
    .blog__related {
        padding-bottom: 3.75rem;
    }
}

.blog__related__title {
    margin-bottom: 2.5rem;
}

@media screen and (max-width: 991px) {
    .blog__related__title {
        margin-bottom: 1.875rem;
    }
}

@media screen and (max-width: 767px) {
    .blog__related__title {
        margin-bottom: 1.25rem;
    }
}

.blog__related__title h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0;
    text-transform: uppercase;
}

@media screen and (max-width: 1199px) {
    .blog__related__title h2 {
        font-size: 1.875rem;
    }
}

.blog__related .blog__rsp {
    position: absolute;
    left: 0;
    top: -25rem;
    z-index: -1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    width: 100%;
}

.blog__related .blog__rsp img {
    width: 100%;
}

/* =========================== Blog Details Section End Here ========================= */
/* =========================== About Section Start Here ========================= */
.about__details {
    padding-top: 6.25rem;
    padding-bottom: 6.25rem;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 1199px) {
    .about__details {
        padding-top: 3.125rem;
        padding-bottom: 3.625rem;
    }
}

@media screen and (max-width: 991px) {
    .about__details {
        padding-top: 0.75rem;
        padding-bottom: 1.0625rem;
    }
}

@media screen and (max-width: 767px) {
    .about__details {
        padding-top: 0.125rem;
        padding-bottom: 0.625rem;
    }
}

@media screen and (max-width: 575px) {
    .about__details {
        margin-top: -1.875rem;
        padding-top: 0rem;
        padding-bottom: 0.9375rem;
    }
}

.about__details__wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 5.625rem;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

@media screen and (max-width: 991px) {
    .about__details__wrap {
        gap: 2.5rem;
    }
}

@media screen and (max-width: 767px) {
    .about__details__wrap {
        gap: 0rem;
    }
}

@media screen and (max-width: 575px) {
    .about__details__wrap {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center;
    }
}

.about__details__label {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

@media screen and (max-width: 575px) {
    .about__details__label {
        margin-bottom: -1.25rem;
    }
}

.about__details__content h5 {
    font-size: 2rem;
    max-width: 53.125rem;
    margin-bottom: 0;
    font-weight: 400;
    font-family: "Poppins", sans-serif;
    color: hsl(var(--text-color));
}

@media screen and (max-width: 1399px) {
    .about__details__content h5 {
        font-size: 1.625rem;
        max-width: 46.875rem;
    }
}

@media screen and (max-width: 1199px) {
    .about__details__content h5 {
        font-size: 1.375rem;
        max-width: 40.625rem;
    }
}

@media screen and (max-width: 991px) {
    .about__details__content h5 {
        font-size: 1rem;
        max-width: 34.375rem;
    }
}

@media screen and (max-width: 767px) {
    .about__details__content h5 {
        font-size: 0.875rem;
        max-width: 28.125rem;
    }
}

@media screen and (max-width: 575px) {
    .about__details__content h5 {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
}

.footer__subs__label.about-label {
    margin-bottom: 0;
}

.footer__subs__label.about-label>span {
    background-color: hsl(var(--base));
}

.footer__subs__label.about-label>span img {
    max-width: 3.125rem;
}

.about__mission {
    position: relative;
    z-index: 1;
    border-top: 0.0625rem solid hsl(var(--black)/0.08);
    border-bottom: 0.0625rem solid hsl(var(--black)/0.08);
    margin-bottom: 6.25rem;
    margin-top: 3.125rem;
}

@media screen and (max-width: 1199px) {
    .about__mission {
        margin-bottom: 6.0625rem;
    }
}

@media screen and (max-width: 991px) {
    .about__mission {
        margin-bottom: 1.25rem;
    }
}

.about__mission__wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

@media screen and (max-width: 767px) {
    .about__mission__wrap {
        grid-template-columns: repeat(1, 1fr);
    }
}

.about__mission__wrap__curtomers {
    border-left: 0.0625rem solid hsl(var(--black)/0.08);
    border-right: 0.0625rem solid hsl(var(--black)/0.08);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 4.6875rem 2.5rem;
    text-align: center;
}

@media screen and (max-width: 991px) {
    .about__mission__wrap__curtomers {
        padding: 2.5rem 1rem;
    }
}

@media screen and (max-width: 767px) {
    .about__mission__wrap__curtomers {
        border-left: none;
        border-right: none;
        padding: 0.625rem 1rem;
    }
}

.about__mission__wrap__content {
    padding: 4.6875rem 2.5rem;
}

@media screen and (max-width: 991px) {
    .about__mission__wrap__content {
        padding: 2.5rem 1rem;
    }
}

@media screen and (max-width: 767px) {
    .about__mission__wrap__content {
        max-width: 70%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

@media screen and (max-width: 575px) {
    .about__mission__wrap__content {
        max-width: 90%;
    }
}

.about__mission__wrap__content h4 {
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: capitalize;
}

@media screen and (max-width: 991px) {
    .about__mission__wrap__content h4 {
        font-size: 1.25rem;
        margin-bottom: 0.875rem;
    }
}

@media screen and (max-width: 991px) {
    .about__mission__wrap__content p {
        font-size: 0.875rem;
    }
}

.about__mission__wrap__curtomers ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 0.625rem;
}

.about__mission__wrap__curtomers ul li span {
    width: 4.0625rem;
    height: 4.0625rem;
    border-radius: 50%;
    overflow: hidden;
    border: 0.1875rem solid hsl(var(--white));
    -webkit-transition: 0.3s;
    transition: 0.3s;
    margin-left: -1.25rem;
}

@media screen and (max-width: 991px) {
    .about__mission__wrap__curtomers ul li span {
        width: 3.125rem;
        height: 3.125rem;
    }
}

.about__mission__wrap__curtomers ul li span:hover {
    -webkit-transform: translateY(-0.5rem);
    transform: translateY(-0.5rem);
}

.about__mission__wrap__curtomers ul li:first-child span {
    margin-left: 0;
}

.about__mission__wrap__curtomers>span {
    font-size: 2rem;
    font-weight: 600;
    display: block;
    margin-bottom: 0.3125rem;
    font-family: var(--heading-font);
}

@media screen and (max-width: 991px) {
    .about__mission__wrap__curtomers>span {
        font-size: 1.75rem;
    }
}

.about__mission__wrap__curtomers p {
    font-size: 1.125rem;
    text-transform: capitalize;
}

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

.about__feature {
    position: relative;
    z-index: 1;
    padding-top: 5rem;
    padding-bottom: 12.5rem;
}

@media screen and (max-width: 1199px) {
    .about__feature {
        padding-top: 2.5rem;
        padding-bottom: 8.875rem;
    }
}

@media screen and (max-width: 991px) {
    .about__feature {
        padding-bottom: 5.8125rem;
    }
}

@media screen and (max-width: 575px) {
    .about__feature {
        padding-top: 4.4375rem;
    }
}

.about__feature .about__fsp {
    position: absolute;
    left: 0;
    top: 12.5rem;
    z-index: -2;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
}

.about__feature .about__fsp img {
    width: 100%;
}

.about__feature .about__fsp2 {
    position: absolute;
    right: 5%;
    top: 28%;
    z-index: -1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    max-width: 6.25rem;
}

@media screen and (max-width: 1199px) {
    .about__feature .about__fsp2 {
        max-width: 3.75rem;
    }
}

@media screen and (max-width: 991px) {
    .about__feature .about__fsp2 {
        max-width: 2.8125rem;
    }
}

@media screen and (max-width: 575px) {
    .about__feature .about__fsp2 {
        display: none;
    }
}

.about__feature .about__fsp3 {
    position: absolute;
    left: 5%;
    bottom: 34%;
    z-index: -1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    max-width: 6.25rem;
}

@media screen and (max-width: 1199px) {
    .about__feature .about__fsp3 {
        max-width: 3.75rem;
    }
}

@media screen and (max-width: 991px) {
    .about__feature .about__fsp3 {
        max-width: 2.8125rem;
        bottom: 40%;
    }
}

@media screen and (max-width: 575px) {
    .about__feature .about__fsp3 {
        display: none;
    }
}

.about__feature__wrap__single {
    padding: 4.6875rem 0rem;
    border-bottom: 0.0625rem solid hsl(var(--black)/0.04);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 9.375rem;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 1199px) {
    .about__feature__wrap__single {
        gap: 6.25rem;
    }
}

@media screen and (max-width: 991px) {
    .about__feature__wrap__single {
        gap: 3.75rem;
        padding: 3.4375rem 0rem;
    }
}

@media screen and (max-width: 767px) {
    .about__feature__wrap__single {
        gap: 2.5rem;
    }
}

@media screen and (max-width: 575px) {
    .about__feature__wrap__single {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 1.875rem 0rem;
        gap: 0.9375rem;
    }
}

.about__feature__wrap__single:first-child {
    padding-top: 0 !important;
}

@media screen and (max-width: 575px) {
    .about__feature__wrap__single:first-child {
        padding-top: 1.25rem !important;
    }
}

.about__feature__wrap__single__title {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-width: 18.75rem;
}

@media screen and (max-width: 1199px) {
    .about__feature__wrap__single__title {
        min-width: 13.75rem;
    }
}

@media screen and (max-width: 991px) {
    .about__feature__wrap__single__title {
        min-width: 10.625rem;
    }
}

@media screen and (max-width: 767px) {
    .about__feature__wrap__single__title {
        min-width: 8.75rem;
    }
}

.about__feature__wrap__single__title h4 {
    margin-bottom: 0;
    font-size: 2.5rem;
    text-transform: capitalize;
}

@media screen and (max-width: 1199px) {
    .about__feature__wrap__single__title h4 {
        font-size: 1.875rem;
    }
}

@media screen and (max-width: 991px) {
    .about__feature__wrap__single__title h4 {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 767px) {
    .about__feature__wrap__single__title h4 {
        font-size: 1.25rem;
    }
}

@media screen and (max-width: 575px) {
    .about__feature__wrap__single__title h4 {
        display: ruby;
    }
}

.about__feature__wrap__single .about__feature__wrap__single__content p {
    margin-bottom: 1.5rem;
    max-width: 40.625rem;
}

@media screen and (max-width: 991px) {
    .about__feature__wrap__single .about__feature__wrap__single__content p {
        font-size: 0.875rem;
    }
}

.about__feature__wrap__single .about__feature__wrap__single__content ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1rem;
}

.about__feature__wrap__single .about__feature__wrap__single__content ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.625rem;
    font-size: 1rem;
    font-weight: 400;
    color: hsl(var(--text-color));
}

@media screen and (max-width: 991px) {
    .about__feature__wrap__single .about__feature__wrap__single__content ul li {
        font-size: 0.875rem;
        gap: 0.5rem;
    }
}

.about__feature__wrap__single .about__feature__wrap__single__content ul li span {
    max-width: 0.875rem;
    margin-top: -0.25rem;
    display: inline-block;
}

@media screen and (max-width: 991px) {
    .about__feature__wrap__single .about__feature__wrap__single__content ul li span {
        max-width: 0.75rem;
    }
}

/* =========================== About Section End Here ========================= */
/* =========================== Contact Section Start Here ========================= */
.contact__info {
    padding-top: 6.25rem;
    padding-bottom: 6.25rem;
}

@media screen and (max-width: 1199px) {
    .contact__info {
        padding-top: 3.75rem;
        padding-bottom: 3.75rem;
    }
}

@media screen and (max-width: 991px) {
    .contact__info {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}

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

.contact__info__single {
    text-align: center;
    max-width: 20rem;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 1199px) {
    .contact__info__single {
        max-width: 17rem;
    }
}

.contact__info__single span {
    display: block;
    margin-bottom: 0.625rem;
    font-size: 2.5rem;
}

@media screen and (max-width: 1199px) {
    .contact__info__single span {
        font-size: 1.875rem;
    }
}

.contact__info__single h4 {
    font-size: 1.5rem;
    text-transform: capitalize;
}

@media screen and (max-width: 1199px) {
    .contact__info__single h4 {
        font-size: 1.25rem;
        margin-bottom: 16px;
    }
}

.contact__info__single p {
    font-size: 0.9375rem;
}

@media screen and (max-width: 1199px) {
    .contact__info__single p {
        font-size: 0.8125rem;
    }
}

.contact__info__single p a {
    color: hsl(var(--grey));
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.contact__info__single p a:hover {
    color: hsl(var(--base));
}

.contact__form {
    position: relative;
    z-index: 1;
    padding-top: 6.25rem;
    padding-bottom: 6.25rem;
}

@media screen and (max-width: 1199px) {
    .contact__form {
        padding-top: 3.75rem;
        padding-bottom: 3.75rem;
    }
}

@media screen and (max-width: 767px) {
    .contact__form {
        padding-top: 4.9375rem;
        padding-bottom: 2.625rem;
    }
}

.contact__form .hero__wrap__users__title span {
    font-family: var(--body-font);
}

.contact__form .contact__bg {
    position: absolute;
    left: 0;
    top: -18.75rem;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    z-index: -1;
}

.contact__form .contact__bg img {
    width: 100%;
}

.contact__form__title {
    max-width: 46.875rem;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3.125rem;
    margin-top: 1.25rem;
}

@media screen and (max-width: 1399px) {
    .contact__form__title {
        max-width: 39.0625rem;
    }
}

@media screen and (max-width: 1199px) {
    .contact__form__title {
        max-width: 32.8125rem;
        margin-bottom: 2.1875rem;
    }
}

@media screen and (max-width: 991px) {
    .contact__form__title {
        max-width: 24.375rem;
        margin-bottom: 1.5625rem;
    }
}

@media screen and (max-width: 767px) {
    .contact__form__title {
        max-width: 24.375rem;
    }
}

@media screen and (max-width: 575px) {
    .contact__form__title {
        max-width: 95%;
    }
}

.contact__form__title h2 {
    font-size: 4rem;
    margin-bottom: 0;
    text-transform: uppercase;
}

@media screen and (max-width: 1399px) {
    .contact__form__title h2 {
        font-size: 3.375rem;
    }
}

@media screen and (max-width: 1199px) {
    .contact__form__title h2 {
        font-size: 2.75rem;
    }
}

@media screen and (max-width: 991px) {
    .contact__form__title h2 {
        font-size: 2.125rem;
    }
}

@media screen and (max-width: 424px) {
    .contact__form__title h2 {
        font-size: 1.875rem;
    }
}

.contact__form__title h2 span {
    font-weight: 300;
}

.contact__form__main {
    max-width: 75%;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 1199px) {

    .contact__form__main .g-5,
    .contact__form__main .gy-5 {
        --bs-gutter-y: 2rem;
    }

    .contact__form__main .g-5,
    .contact__form__main .gx-5 {
        --bs-gutter-x: 2rem;
    }
}

@media screen and (max-width: 991px) {
    .contact__form__main {
        max-width: 85%;
    }

    .contact__form__main .g-5,
    .contact__form__main .gy-5 {
        --bs-gutter-y: 1.5rem;
    }

    .contact__form__main .g-5,
    .contact__form__main .gx-5 {
        --bs-gutter-x: 1.5rem;
    }
}

@media screen and (max-width: 575px) {
    .contact__form__main {
        max-width: 90%;
    }
}

.contact__form__main__single button {
    margin-left: auto;
    margin-right: auto;
}

.contact__form__main__single button span:first-child {
    width: 9.375rem;
}

/* =========================== Contact Section End Here ========================= */
/* =========================== Sign Page Start Here ========================= */
.sign__area {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 991px) {
    .sign__area {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

@media screen and (max-width: 767px) {
    .sign__area {
        padding-top: 1.875rem;
        padding-bottom: 3.75rem;
    }
}

.sign__area .back__to__home {
    margin-top: 0.9375rem;
}

.sign__area .back__to__home.forgot__back__btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-bottom: 2.5rem;
    margin-top: 0;
}

.sign__area .back__to__home a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: hsl(var(--heading-color));
    font-size: 1rem;
    font-weight: 400;
    text-transform: capitalize;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    gap: 0.3125rem;
}

@media screen and (max-width: 1199px) {
    .sign__area .back__to__home a {
        font-size: 0.875rem;
    }
}

.sign__area .back__to__home a:hover {
    gap: 0.625rem;
    color: hsl(var(--text-color)/0.6);
}

.sign__area .sign__bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    overflow: hidden;
    z-index: -2;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

.sign__area .sign__bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.sign__area .sign__sp1 {
    position: absolute;
    left: 10%;
    top: 20%;
    z-index: -1;
    max-width: 6.25rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    -webkit-animation: signOne 3s linear 0s infinite alternate none;
    animation: signOne 3s linear 0s infinite alternate none;
}

@media screen and (max-width: 1199px) {
    .sign__area .sign__sp1 {
        max-width: 4.375rem;
    }
}

@media screen and (max-width: 767px) {
    .sign__area .sign__sp1 {
        top: 10%;
        left: 4%;
        max-width: 3.125rem;
    }
}

.sign__area .sign__sp1 img {
    width: 100%;
}

.sign__area .sign__sp2 {
    position: absolute;
    right: 5%;
    top: 50%;
    z-index: -1;
    max-width: 6.25rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    -webkit-animation: signOne 3s linear 0s infinite alternate none;
    animation: signOne 3s linear 0s infinite alternate none;
}

@media screen and (max-width: 1199px) {
    .sign__area .sign__sp2 {
        max-width: 4.375rem;
    }
}

@media screen and (max-width: 767px) {
    .sign__area .sign__sp2 {
        display: none;
    }
}

.sign__area .sign__sp2 img {
    width: 100%;
}

@-webkit-keyframes signOne {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes signOne {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.sign__area .sign__left__blk {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.sign__area .sign__left__blk .footer__subs__label {
    margin-bottom: 0;
}

.sign__area .sign__left__blk .footer__subs__label>span {
    background-color: hsl(var(--white)/0.6);
}

.sign__area .sign__left__blk .sign__title {
    text-align: center;
    margin-top: 2.375rem;
    max-width: 36.25rem;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 1199px) {
    .sign__area .sign__left__blk .sign__title {
        margin-top: 0.875rem;
    }
}

@media screen and (max-width: 991px) {
    .sign__area .sign__left__blk .sign__title {
        margin-top: 0rem;
    }
}

@media screen and (max-width: 767px) {
    .sign__area .sign__left__blk .sign__title {
        margin-top: -1.25rem;
    }
}

.sign__area .sign__left__blk .sign__title>span {
    font-size: 1.125rem;
    font-weight: 400;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.625rem;
}

@media screen and (max-width: 1199px) {
    .sign__area .sign__left__blk .sign__title>span {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
}

.sign__area .sign__left__blk .sign__title h1 {
    font-size: 4rem;
    text-transform: uppercase;
    margin-bottom: 0;
}

@media screen and (max-width: 1399px) {
    .sign__area .sign__left__blk .sign__title h1 {
        font-size: 3.375rem;
    }
}

@media screen and (max-width: 1199px) {
    .sign__area .sign__left__blk .sign__title h1 {
        font-size: 2.75rem;
    }
}

@media screen and (max-width: 991px) {
    .sign__area .sign__left__blk .sign__title h1 {
        font-size: 2.125rem;
    }
}

@media screen and (max-width: 424px) {
    .sign__area .sign__left__blk .sign__title h1 {
        font-size: 1.875rem;
    }
}

.sign__area .sign__left__blk .sign__title h1 span {
    font-weight: 300;
    display: block;
}

.sign__area .sign__wrap {
    background-color: hsl(var(--white)/0.7);
    padding: 2.75rem 2rem;
    border-radius: 0.75rem;
    -webkit-backdrop-filter: blur(0.9375rem);
    backdrop-filter: blur(0.9375rem);
}

@media screen and (max-width: 767px) {
    .sign__area .sign__wrap {
        padding: 2.1875rem 1.625rem;
    }
}

.sign__area .sign__wrap .g-4,
.sign__area .sign__wrap .gy-4 {
    --bs-gutter-y: 2rem;
}

@media screen and (max-width: 1199px) {

    .sign__area .sign__wrap .g-4,
    .sign__area .sign__wrap .gy-4 {
        --bs-gutter-y: 1.5rem;
    }
}

.sign__area .sign__wrap .g-4,
.sign__area .sign__wrap .gx-4 {
    --bs-gutter-x: 2rem;
}

@media screen and (max-width: 1199px) {

    .sign__area .sign__wrap .g-4,
    .sign__area .sign__wrap .gx-4 {
        --bs-gutter-x: 1rem;
    }
}

.sign__area .sign__wrap .sign__forgot {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 0.9375rem;
    margin-top: -1rem;
}

.sign__area .sign__wrap .sign__forgot>a {
    font-size: 1rem;
    font-weight: 400;
    color: hsl(var(--text-color));
    text-transform: capitalize;
}

@media screen and (max-width: 1199px) {
    .sign__area .sign__wrap .sign__forgot>a {
        font-size: 0.875rem;
    }
}

.sign__area .sign__wrap .sign__forgot>a:hover {
    text-decoration: underline;
}

.sign__area .sign__wrap .sign__forgot .form-check-label {
    color: hsl(var(--text-color));
}

.sign__area .sign__wrap__single input {
    height: 4.0625rem;
    border-radius: 0.75rem;
}

.sign__area .sign__wrap__single button {
    width: 100%;
}

.sign__area .sign__wrap__single button span:first-child {
    width: calc(100% - 3.25rem);
}

.sign__area .sign__wrap .sign__other__options__bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1rem;
}

.sign__area .sign__wrap .sign__other__options__bar span {
    width: 100%;
    height: 0.0625rem;
    background-color: hsl(var(--black)/0.04);
}

.sign__area .sign__wrap .sign__other__options__bar h5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    font-size: 0.875rem;
    font-weight: 400;
    text-transform: capitalize;
    margin-bottom: 0;
    color: hsl(var(--text-color));
    font-family: var(--body-font);
}

.sign__area .sign__wrap .sign__other__option {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1rem;
}

@media screen and (max-width: 575px) {
    .sign__area .sign__wrap .sign__other__option {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

.sign__area .sign__wrap .sign__other__option a {
    font-size: 1rem;
    font-weight: 400;
    color: hsl(var(--text-color));
    text-transform: capitalize;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0.625rem;
    background-color: hsl(var(--black)/0.04);
    border-radius: 0.25rem;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    width: 13.75rem;
    height: 3.375rem;
}

@media screen and (max-width: 1199px) {
    .sign__area .sign__wrap .sign__other__option a {
        font-size: 0.8125rem;
    }
}

.sign__area .sign__wrap .sign__other__option a img {
    max-width: 1.25rem;
}

@media screen and (max-width: 1199px) {
    .sign__area .sign__wrap .sign__other__option a img {
        max-width: 1rem;
    }
}

.sign__area .sign__wrap .sign__other__option a:hover {
    background-color: hsl(var(--black)/0.1);
}

.sign__area .sign__wrap .sign__already {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.sign__area .sign__wrap .sign__already p {
    font-size: 1rem;
    font-weight: 400;
    color: hsl(var(--text-color)/0.8);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.3125rem;
}

@media screen and (max-width: 1199px) {
    .sign__area .sign__wrap .sign__already p {
        font-size: 0.875rem;
    }
}

.sign__area .sign__wrap .sign__already p a {
    color: hsl(var(--heading-color));
    font-weight: 500;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.sign__area .sign__wrap .sign__already p a:hover {
    text-decoration: underline;
}

.sign__area .sign__wrap .form-check-input {
    width: 1.125rem;
    height: 1.125rem;
    background-color: transparent;
    border: 0.0625rem solid hsl(var(--black)/0.2);
    margin-top: 0.125rem;
    cursor: pointer;
    border-radius: 0.25rem;
}

@media screen and (max-width: 575px) {
    .sign__area .sign__wrap .form-check-input {
        width: 1rem;
        height: 1rem;
        margin-top: 0.1875rem;
    }
}

.sign__area .sign__wrap .form-check-input:checked {
    background-color: hsl(var(--heading-color));
    border-color: hsl(var(--heading-color));
}

.sign__area .sign__wrap .form-check-input:focus {
    border-color: hsl(var(--heading-color));
    -webkit-box-shadow: none;
    box-shadow: none;
}

.sign__area .sign__wrap .form-check label {
    margin-bottom: 0;
    color: hsl(var(--text-color)/0.8);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

.sign__area .sign__wrap .form-check label a {
    color: hsl(var(--heading-color));
    font-weight: 500;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.sign__area .sign__wrap .form-check label a:hover {
    text-decoration: underline;
}

.sign__area .sign__wrap .forgot__password__info {
    margin-top: -0.9375rem;
}

@media screen and (max-width: 1199px) {
    .sign__area .sign__wrap .forgot__password__info p {
        font-size: 0.875rem;
    }
}

/* =========================== Sign Page End Here ========================= */
/* =========================== Privacy Page Start Here ========================= */
.privacy__area {
    position: relative;
    z-index: 1;
    padding-top: 3.125rem;
    padding-bottom: 6.25rem;
}

@media screen and (max-width: 991px) {
    .privacy__area {
        padding-top: 1.875rem;
        padding-bottom: 1.25rem;
    }
}

.privacy__area .privacy__bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -2;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    width: 100%;
}

.privacy__area .privacy__bg img {
    width: 100%;
}

.privacy__area .accordion {
    background-color: hsl(var(--text-color)/0.02);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    padding: 2.5rem 1.875rem;
    border-radius: 1.25rem;
}

@media screen and (max-width: 991px) {
    .privacy__area .accordion {
        padding: 2.1875rem 1.25rem;
        border-radius: 0.875rem;
    }
}

.privacy__area .accordion-item {
    background-color: transparent;
    border: none;
}

.privacy__area .accordion-body ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0.875rem;
}

@media screen and (max-width: 767px) {
    .privacy__area .accordion-body ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 575px) {
    .privacy__area .accordion-body ul {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
}

.privacy__area .accordion-body ul li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 400;
    color: hsl(var(--text-color));
    text-transform: capitalize;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

@media screen and (max-width: 991px) {
    .privacy__area .accordion-body ul li a {
        font-size: 0.8125rem;
    }
}

.privacy__area .accordion-body ul li a img {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 0.625rem;
    margin-top: 0.3125rem;
}

.privacy__area .accordion-body ul li a:hover {
    color: hsl(var(--text-color)/0.5);
}

.privacy__area .accordion-button {
    padding: 0.3125rem 0rem;
    font-size: 1rem;
    color: hsl(var(--heading-color));
    background-color: transparent;
    font-weight: 600;
    text-transform: capitalize;
    gap: 0.625rem;
    font-family: var(--body-font);
}

@media screen and (max-width: 991px) {
    .privacy__area .accordion-button {
        font-size: 0.875rem;
    }
}

.privacy__area .accordion-button span {
    width: 0.625rem;
    height: 0.125rem;
    background-color: hsl(var(--heading-color)/0.2);
    margin-top: -0.125rem;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.privacy__area .accordion-button:focus {
    border-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.privacy__area .accordion-button::after {
    display: none;
}

.privacy__area .accordion-button:not(.collapsed) {
    color: hsl(var(--heading-color));
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.privacy__area .accordion-button:not(.collapsed) span {
    width: 1.25rem;
    background-color: hsl(var(--heading-color)/0.6);
}

.privacy__area .privacy__wrap {
    display: grid;
    grid-template-columns: 18.75rem 1fr;
    gap: 4.375rem;
}

@media screen and (max-width: 991px) {
    .privacy__area .privacy__wrap {
        grid-template-columns: 15.625rem 1fr;
        gap: 2.5rem;
    }
}

@media screen and (max-width: 767px) {
    .privacy__area .privacy__wrap {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

.privacy__area .privacy__wrap__content__single h4 {
    font-size: 1.125rem;
    text-transform: capitalize;
    margin-bottom: 0.375rem;
    font-family: var(--body-font);
}

.privacy__area .privacy__wrap__content__single p {
    margin-bottom: 1.25rem;
}

@media screen and (max-width: 991px) {
    .privacy__area .privacy__wrap__content__single p {
        font-size: 0.875rem;
    }
}

.privacy__area .privacy__wrap__content__single p a {
    color: hsl(var(--heading-color));
    font-weight: 600;
}

.privacy__area .privacy__wrap__content__single p a:hover {
    text-decoration: underline;
    color: hsl(var(--heading-color));
}

.privacy__area .privacy__wrap__content__single ul {
    list-style: decimal;
    padding-left: 1.125rem;
    margin-bottom: 1.875rem;
}

.privacy__area .privacy__wrap__content__single ul li {
    font-size: 1rem;
    color: hsl(var(--text-color));
    font-weight: 400;
}

@media screen and (max-width: 991px) {
    .privacy__area .privacy__wrap__content__single ul li {
        font-size: 0.875rem;
    }
}

/* =========================== Privacy Page End Here ========================= */
/*# sourceMappingURL=main.css.map */



.logoul.list-inline img {
    display: inline-block;
    max-width: 100px; /* Adjust size as needed */
    height: auto;
}

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

@media screen and (max-width: 575px) and (min-width :300px) {
    .pt-top{
        padding-top: 30%;
    }
}

.acard{
    border-radius: 15px;
    padding:15px;
    background: #00000008;
    margin-bottom: 20px;
}
.pone{
    font-size: 16px;
}