/* ============================================================
    [Master Stylesheets]

    Theme Name:     Digiline
    Theme URL:      https://photoclerks.com/digiline/
    Description:    Digiline - Digital Marketing Agency html template
    Author:         photoclerks
    Version:        1.0.0

============================================================== */
/*
========================================
*********** TABLE OF CONTENTS **********
    01. Css Variables
    02. Font Size css
    03. Common Typography Css
    04. reset css
    05. Button CSS
    06. margin Css
    07. padding Css
    08. Border Color Css
    09. Banner css
    10. Promo CSS
    11. Every-need CSS
    12. Find scale CSS
    13. Content creation CSS
    14. Use-cases CSS
    15. Customer CSS
    16. Not-human CSS
    17. Pricing CSS
    18. Faq CSS
    19. Testimonial CSS
    20. CallToAction CSS
    21. Team CSS
    22. Blog CSS
    23. Contact CSS
    24. Cursor-effect CSS
    25. Preloader Css
    26. Scroll back to top Css
    27. Navbar css
    28. Footer css
    29. Breadcrumb css

========================================*/
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

@import url("../css/all.min.css");
/* ============================
    00.00 Css Variables
=============================== */
:root {
  /* Font Family */
    --body-font: "Nunito", serif;
    --title-font: "Inter", serif;
  /* ==================
    Theme Color
   =================== */
  /* Base Color */
    --base-h: 220;
    --base-s: 93%;
    --base-l: 51%;
    --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: 217;
    --base-two-s: 39%;
    --base-two-l: 9%;
    --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-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);
    --white: 0 0% 100%;
    --black: 0 0% 0%;
    --body-color: 40 5% 53%;
    --title-color: 39 85% 5%;
    --border-color: 0 0% 96%;
    --section-bg: 217 39% 9%;
  /* Primary Color */
    --primary-h: 220;
    --primary-s: 93%;
    --primary-l: 51%;
    --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);
  /* 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);
}

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

/* ============================
    00.01 Font Size css
=============================== */
.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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.fs-19 {
    font-size: 1.1875rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.fs-21 {
    font-size: 1.3125rem;
}

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

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

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

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

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

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

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

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

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

.fs-22 {
    font-size: 1.375rem;
}

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

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

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

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

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

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

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

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

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

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

.fs-23 {
    font-size: 1.4375rem;
}

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

@media screen and (max-width: 991px) {
    .fs-23 {
        font-size: 1.25rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-23 {
        font-size: 1.1875rem;
    }
}

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

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

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

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

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

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

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

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

.fs-24 {
    font-size: 1.5rem;
}

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

@media screen and (max-width: 991px) {
    .fs-24 {
        font-size: 1.3125rem;
    }
}

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

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

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

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

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

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

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

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

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

.fs-25 {
    font-size: 1.5625rem;
}

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

@media screen and (max-width: 991px) {
    .fs-25 {
        font-size: 1.3125rem;
    }
}

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

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

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

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

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

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

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

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

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

.fs-26 {
    font-size: 1.5rem;
}

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

@media screen and (max-width: 991px) {
    .fs-26 {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-26 {
        font-size: 1.438rem;
    }
}

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

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

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

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

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

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

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

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

.fs-27 {
    font-size: 1.563rem;
}

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

@media screen and (max-width: 991px) {
    .fs-27 {
        font-size: 1.563rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-27 {
        font-size: 1.5rem;
    }
}

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

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

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

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

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

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

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

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

.fs-28 {
    font-size: 1.625rem;
}

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

@media screen and (max-width: 991px) {
    .fs-28 {
        font-size: 1.625rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-28 {
        font-size: 1.563rem;
    }
}

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

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

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

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

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

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

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

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

.fs-29 {
    font-size: 1.688rem;
}

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

@media screen and (max-width: 991px) {
    .fs-29 {
        font-size: 1.688rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-29 {
        font-size: 1.625rem;
    }
}

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

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

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

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

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

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

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

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

.fs-30 {
    font-size: 1.75rem;
}

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

@media screen and (max-width: 991px) {
    .fs-30 {
        font-size: 1.75rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-30 {
        font-size: 1.688rem;
    }
}

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

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

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

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

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

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

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

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

.fs-31 {
    font-size: 1.813rem;
}

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

@media screen and (max-width: 991px) {
    .fs-31 {
        font-size: 1.813rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-31 {
        font-size: 1.75rem;
    }
}

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

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

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

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

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

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

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

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

.fs-32 {
    font-size: 1.875rem;
}

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

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

@media screen and (max-width: 575px) {
    .fs-32 {
        font-size: 1.813rem;
    }
}

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

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

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

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

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

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

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

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

.fs-33 {
    font-size: 1.938rem;
}

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

@media screen and (max-width: 991px) {
    .fs-33 {
        font-size: 1.938rem;
    }
}

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

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

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

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

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

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

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

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

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

.fs-34 {
    font-size: 2rem;
}

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

@media screen and (max-width: 991px) {
    .fs-34 {
        font-size: 2rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-34 {
        font-size: 1.938rem;
    }
}

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

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

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

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

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

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

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

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

.fs-35 {
    font-size: 2.063rem;
}

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

@media screen and (max-width: 991px) {
    .fs-35 {
        font-size: 2.063rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-35 {
        font-size: 2rem;
    }
}

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

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

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

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

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

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

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

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

.fs-36 {
    font-size: 2.125rem;
}

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

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

@media screen and (max-width: 575px) {
    .fs-36 {
        font-size: 2.063rem;
    }
}

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

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

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

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

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

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

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

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

.fs-37 {
    font-size: 2.188rem;
}

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

@media screen and (max-width: 991px) {
    .fs-37 {
        font-size: 2.188rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-37 {
        font-size: 2.125rem;
    }
}

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

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

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

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

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

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

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

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

.fs-38 {
    font-size: 2.25rem;
}

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

@media screen and (max-width: 991px) {
    .fs-38 {
        font-size: 2.25rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-38 {
        font-size: 2.188rem;
    }
}

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

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

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

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

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

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

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

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

.fs-39 {
    font-size: 2.313rem;
}

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

@media screen and (max-width: 991px) {
    .fs-39 {
        font-size: 2.313rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-39 {
        font-size: 2.25rem;
    }
}

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

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

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

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

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

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

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

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

.fs-40 {
    font-size: 2.375rem;
}

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

@media screen and (max-width: 991px) {
    .fs-40 {
        font-size: 2.375rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-40 {
        font-size: 2.313rem;
    }
}

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

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

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

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

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

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

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

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

.fs-41 {
    font-size: 2.438rem;
}

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

@media screen and (max-width: 991px) {
    .fs-41 {
        font-size: 2.438rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-41 {
        font-size: 2.375rem;
    }
}

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

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

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

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

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

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

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

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

.fs-42 {
    font-size: 2.5rem;
}

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

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

@media screen and (max-width: 575px) {
    .fs-42 {
        font-size: 2.438rem;
    }
}

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

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

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

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

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

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

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

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

.fs-43 {
    font-size: 2.563rem;
}

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

@media screen and (max-width: 991px) {
    .fs-43 {
        font-size: 2.563rem;
    }
}

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

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

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

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

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

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

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

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

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

.fs-44 {
    font-size: 2.625rem;
}

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

@media screen and (max-width: 991px) {
    .fs-44 {
        font-size: 2.625rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-44 {
        font-size: 2.563rem;
    }
}

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

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

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

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

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

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

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

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

.fs-45 {
    font-size: 2.688rem;
}

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

@media screen and (max-width: 991px) {
    .fs-45 {
        font-size: 2.688rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-45 {
        font-size: 2.625rem;
    }
}

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

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

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

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

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

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

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

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

.fs-46 {
    font-size: 2.75rem;
}

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

@media screen and (max-width: 991px) {
    .fs-46 {
        font-size: 2.75rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-46 {
        font-size: 2.688rem;
    }
}

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

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

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

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

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

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

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

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

.fs-47 {
    font-size: 2.813rem;
}

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

@media screen and (max-width: 991px) {
    .fs-47 {
        font-size: 2.813rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-47 {
        font-size: 2.75rem;
    }
}

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

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

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

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

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

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

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

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

.fs-48 {
    font-size: 2.875rem;
}

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

@media screen and (max-width: 991px) {
    .fs-48 {
        font-size: 2.875rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-48 {
        font-size: 2.813rem;
    }
}

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

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

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

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

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

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

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

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

.fs-49 {
    font-size: 2.938rem;
}

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

@media screen and (max-width: 991px) {
    .fs-49 {
        font-size: 2.938rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-49 {
        font-size: 2.875rem;
    }
}

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

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

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

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

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

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

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

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

.fs-50 {
    font-size: 3rem;
}

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

@media screen and (max-width: 991px) {
    .fs-50 {
        font-size: 3rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-50 {
        font-size: 2.938rem;
    }
}

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

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

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

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

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

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

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

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

.fs-51 {
    font-size: 3.063rem;
}

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

@media screen and (max-width: 991px) {
    .fs-51 {
        font-size: 3.063rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-51 {
        font-size: 3rem;
    }
}

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

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

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

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

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

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

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

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

.fs-52 {
    font-size: 3.125rem;
}

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

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

@media screen and (max-width: 575px) {
    .fs-52 {
        font-size: 3.063rem;
    }
}

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

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

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

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

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

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

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

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

.fs-53 {
    font-size: 3.188rem;
}

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

@media screen and (max-width: 991px) {
    .fs-53 {
        font-size: 3.188rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-53 {
        font-size: 3.125rem;
    }
}

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

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

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

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

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

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

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

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

.fs-54 {
    font-size: 3.25rem;
}

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

@media screen and (max-width: 991px) {
    .fs-54 {
        font-size: 3.25rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-54 {
        font-size: 3.188rem;
    }
}

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

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

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

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

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

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

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

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

.fs-55 {
    font-size: 3.313rem;
}

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

@media screen and (max-width: 991px) {
    .fs-55 {
        font-size: 3.313rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-55 {
        font-size: 3.25rem;
    }
}

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

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

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

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

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

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

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

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

.fs-56 {
    font-size: 3.375rem;
}

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

@media screen and (max-width: 991px) {
    .fs-56 {
        font-size: 3.375rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-56 {
        font-size: 3.313rem;
    }
}

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

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

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

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

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

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

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

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

.fs-57 {
    font-size: 3.438rem;
}

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

@media screen and (max-width: 991px) {
    .fs-57 {
        font-size: 3.438rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-57 {
        font-size: 3.375rem;
    }
}

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

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

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

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

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

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

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

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

.fs-58 {
    font-size: 3.5rem;
}

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

@media screen and (max-width: 991px) {
    .fs-58 {
        font-size: 3.5rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-58 {
        font-size: 3.438rem;
    }
}

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

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

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

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

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

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

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

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

.fs-59 {
    font-size: 3.563rem;
}

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

@media screen and (max-width: 991px) {
    .fs-59 {
        font-size: 3.563rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-59 {
        font-size: 3.5rem;
    }
}

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

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

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

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

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

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

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

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

.fs-60 {
    font-size: 3.625rem;
}

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

@media screen and (max-width: 991px) {
    .fs-60 {
        font-size: 3.625rem;
    }
}

@media screen and (max-width: 575px) {
    .fs-60 {
        font-size: 3.563rem;
    }
}

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

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

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

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

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

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

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

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

.section-title {
    position: relative;
}

.section-title .webName {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px;
    color: hsl(var(--black)/0.1);
    font-size: 119px;
    font-weight: 900;
    line-height: 0.7;
    text-transform: capitalize;
    opacity: 0.5;
}

@media screen and (max-width: 1199px) {
    .section-title .webName {
        font-size: 90px;
    }
}

@media screen and (max-width: 767px) {
    .section-title .webName {
        font-size: 60px;
    }
}

.section-title h2 {
    margin-top: -50px;
}

@media screen and (max-width: 1199px) {
    .section-title h2 {
        margin-top: -30px;
    }
}

@media screen and (max-width: 767px) {
    .section-title h2 {
        margin-top: -20px;
    }
}

.section-title h2 span {
    color: hsl(var(--base));
}

.section-title-two .sub-title {
    color: hsl(var(--base));
    font-size: 1.25rem;
    font-weight: 700;
}

@media screen and (max-width: 1199px) {
    .section-title-two .sub-title {
        font-size: 1.125rem;
    }
}

@media screen and (max-width: 991px) {
    .section-title-two .sub-title {
        font-size: 1rem;
    }
}

.section-title-two h2 span {
    color: hsl(var(--base));
}

.custom_anime_top {
    -webkit-animation: anime-top 1.5s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
    animation: anime-top 1.5s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
    opacity: 0;
}

@-webkit-keyframes anime-top {
    0% {
        -webkit-transform: translateY(-5%);
        transform: translateY(-5%);
        -webkit-clip-path: inset(0 0 100% 0);
        clip-path: inset(0 0 100% 0);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

@keyframes anime-top {
    0% {
        -webkit-transform: translateY(-5%);
        transform: translateY(-5%);
        -webkit-clip-path: inset(0 0 100% 0);
        clip-path: inset(0 0 100% 0);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

.reveal-img {
    position: relative;
    display: inline-block;
}

.reveal-img img {
    opacity: 0;
}

.reveal-img::after {
    content: "";
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: hsl(var(--white));
    opacity: 0.3;
    position: absolute;
}

.reveal-img.reveal-img-active img {
    -webkit-animation: imgAppear 1s linear forwards;
    animation: imgAppear 1s linear forwards;
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

.reveal-img.reveal-img-active::after {
    -webkit-animation: revealImg 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    animation: revealImg 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@-webkit-keyframes imgAppear {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes imgAppear {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes revealImg {
    0% {
        left: 0%;
        width: 0%;
    }

    50% {
        left: 0%;
        width: 100%;
    }

    100% {
        left: 100%;
        width: 0%;
    }
}

@keyframes revealImg {
    0% {
        left: 0%;
        width: 0%;
    }

    50% {
        left: 0%;
        width: 100%;
    }

    100% {
        left: 100%;
        width: 0%;
    }
}

.progress {
    --bs-progress-height: 10px;
    border-radius: 0;
    background-color: #D9D9D9;
    overflow: unset;
}

.progress .progress-bar {
    -webkit-transition: width 2s ease-in-out;
    transition: width 2s ease-in-out;
    width: 25%;
}

.skill-progress .percentage {
    margin-top: -30px;
    margin-left: -40px;
}

.image-effect {
    position: relative;
    overflow: hidden;
}

.image-effect::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: hsl(var(--base)/0.3);
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
    transform: translate(-50%, -50%) rotate(90deg);
    z-index: 1;
}

.image-effect:hover::after {
    height: 250%;
    -webkit-transition: all 600ms linear;
    transition: all 600ms linear;
    background-color: transparent;
}

.image-effect:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.image-effect img {
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}

.svg-container .spinner {
    -webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;
    -webkit-transform-origin: center;
    transform-origin: center;
}

.svg-container .main-circle {
    -webkit-transition: -webkit-transform 0.3s ease, -webkit-filter 0.3s ease;
    transition: -webkit-transform 0.3s ease, -webkit-filter 0.3s ease;
    transition: transform 0.3s ease, filter 0.3s ease;
    transition: transform 0.3s ease, filter 0.3s ease, -webkit-transform 0.3s ease, -webkit-filter 0.3s ease;
}

.svg-container .play-arrow {
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.svg-container:hover .main-circle {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-filter: drop-shadow(0 0 8px rgba(16, 93, 246, 0.2));
    filter: drop-shadow(0 0 8px rgba(16, 93, 246, 0.2));
}

.svg-container:hover .play-arrow {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

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

@keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

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

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

body {
    font-family: var(--body-font);
    color: hsl(var(--body-color));
    word-break: break-word;
    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;
    font-size: 1.125rem;
    position: relative;
}

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

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

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

span {
    display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: hsl(var(--base-two));
    line-height: 1.3;
    font-weight: 700;
    font-family: var(--title-font);
}

h1 {
    font-size: 4.6875rem;
}

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

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

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

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

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

h2 {
    font-size: 3.5rem;
    line-height: 1.2;
}

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

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

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

h3 {
    font-size: 2rem;
}

@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: 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.25rem;
    }
}

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

h5 {
    font-size: 1.25rem;
}

@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: 1.0625rem;
    }
}

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

h6 {
    font-size: 1.125rem;
}

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

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

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

p {
    font-size: 1.125rem;
}

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

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

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

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

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;
}

/* ============================
    01.02 reset css
=============================== */
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
}

ul[role=list],
ol[role=list] {
    list-style: none;
}

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

html:focus-within {
    scroll-behavior: smooth;
}

a:not([class]) {
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto;
}

button,
a {
    text-decoration: none;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0;
}

button:focus,
a:focus {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 0;
}

img,
picture,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
}

input,
button,
textarea,
select {
    font: inherit;
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
*::before,
*::after {
        -webkit-animation-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        -webkit-transition-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        -webkit-transition: none;
        transition: none;
    }
}

.offcanvas-backdrop {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    background: hsl(var(--black)/0.5) !important;
    opacity: 1 !important;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    width: 0;
    right: 0;
    left: auto;
}

.offcanvas-backdrop.show {
    width: 100%;
    border-radius: 0;
}

.offcanvas {
    background: hsl(var(--black));
    height: 100vh;
}

button.btn-close {
    -webkit-filter: invert(99%) sepia(0%) saturate(819%) hue-rotate(70deg) brightness(105%) contrast(100%);
    filter: invert(99%) sepia(0%) saturate(819%) hue-rotate(70deg) brightness(105%) contrast(100%);
    opacity: 1;
}

.navbar-brand {
    margin-right: 0;
}

body,
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

.slide-transition {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
}

.inner-slide-element {
    width: auto;
    display: inline-block;
    padding: 0 15px;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
    background: hsl(var(--secondary)/0.1);
    color: hsl(var(--secondary));
}

.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today:hover.disabled,
.datepicker table tr td.today.disabled.disabled,
.datepicker table tr td.today.disabled:hover.disabled,
.datepicker table tr td.today[disabled],
.datepicker table tr td.today:hover[disabled],
.datepicker table tr td.today.disabled[disabled],
.datepicker table tr td.today.disabled:hover[disabled] {
    background: hsl(var(--base));
    color: hsl(var(--white));
}

.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active[disabled],
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active.disabled:hover[disabled],
.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active[disabled],
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active.disabled:hover[disabled] {
    background: hsl(var(--base));
}

.datepicker.dropdown-menu {
    font-family: var(--body-font);
    padding: 15px;
    border: none;
    margin: 25px 0;
}

.datepicker table thead:first-child tr:first-child th {
    font-size: 1.125rem;
}

@media screen and (max-width: 1199px) {
    .datepicker table thead:first-child tr:first-child th {
        font-size: 1.0625rem;
    }
}

@media screen and (max-width: 991px) {
    .datepicker table thead:first-child tr:first-child th {
        font-size: 1rem;
    }
}

@media screen and (max-width: 575px) {
    .datepicker table thead:first-child tr:first-child th {
        font-size: 0.9375rem;
    }
}

.datepicker table thead:first-child tr:nth-child(2) {
    color: hsl(var(--base));
}

.datepicker table thead .prev,
.datepicker table thead .next {
    background: hsl(var(--base));
    color: hsl(var(--white));
    padding: 10px 15px;
}

.datepicker table thead .prev:hover,
.datepicker table thead .next:hover {
    background: hsl(var(--secondary)) !important;
}

.datepicker table thead .dow {
    padding-top: 20px;
}

.datepicker table td {
    width: 38px;
    height: 38px;
    border-radius: 50px;
    padding: 7px 5px !important;
}

.text-reveal {
    position: relative;
    z-index: 1;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.text-reveal[data-scroll=in] {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

.text-reveal::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-color: #fcfcfc;
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.text-reveal[data-scroll=in]::after {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.video-play-btn {
    z-index: 10;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    display: block;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    position: relative;
}

.video-play-btn::before, .video-play-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 60px;
    height: 60px;
    background: hsl(var(--primary));
    border-radius: 50%;
}

.video-play-btn::before {
    z-index: 0;
    -webkit-animation: pulse-border 1500ms ease-out infinite;
    animation: pulse-border 1500ms ease-out infinite;
}

.video-play-btn:after {
    z-index: 1;
    -webkit-transition: all 200ms;
    transition: all 200ms;
}

.video-play-btn i {
    display: block;
    position: relative;
    z-index: 3;
    color: hsl(var(--white));
    font-size: 20px;
    text-align: center;
}

.swiper-pagination {
    position: relative;
    margin-top: 40px;
}

.swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
}

.swiper-pagination .swiper-pagination-bullet-active {
    background-color: hsl(var(--base));
    width: 30px;
    border-radius: 30px;
}

.popup-youtube {
    z-index: 1;
}

.pagination {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 5px;
}

.pagination .page-item {
    font-size: 1.25rem;
}

@media screen and (max-width: 1199px) {
    .pagination .page-item {
        font-size: 1.125rem;
    }
}

@media screen and (max-width: 991px) {
    .pagination .page-item {
        font-size: 1rem;
    }
}

.pagination .page-link {
    border: 1px solid hsl(var(--secondary));
    color: hsl(var(--secondary));
    font-weight: 600;
    outline: none;
    border-radius: 0px;
    width: 40px;
    height: 40px;
    padding: 0;
    display: grid;
    -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;
    font-size: 1.125rem;
}

@media screen and (max-width: 1199px) {
    .pagination .page-link {
        font-size: 1.0625rem;
    }
}

@media screen and (max-width: 991px) {
    .pagination .page-link {
        font-size: 1rem;
    }
}

@media screen and (max-width: 575px) {
    .pagination .page-link {
        font-size: 0.9375rem;
    }
}

@media screen and (max-width: 424px) {
    .pagination .page-link {
        font-size: 1rem;
        width: 30px;
        height: 30px;
    }
}

@media screen and (max-width: 424px) and (max-width: 1199px) {
    .pagination .page-link {
        font-size: 0.9375rem;
    }
}

@media screen and (max-width: 424px) and (max-width: 991px) {
    .pagination .page-link {
        font-size: 0.875rem;
    }
}

.pagination .page-link.active, .pagination .page-link:focus, .pagination .page-link:hover {
    background: hsl(var(--base));
    border-color: hsl(var(--base));
    color: hsl(var(--white));
}

.pagination .page-link .material-icons {
    font-size: 1.25rem;
    width: 15px;
}

@media screen and (max-width: 1199px) {
    .pagination .page-link .material-icons {
        font-size: 1.125rem;
    }
}

@media screen and (max-width: 991px) {
    .pagination .page-link .material-icons {
        font-size: 1rem;
    }
}

.accordion-button:not(.collapsed) {
    color: var(--bs-accordion-active-color);
    background-color: hsl(var(--base)/0.1);
    -webkit-box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

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

.form-check-label a {
    color: hsl(var(--secondary));
}

.form-check-label a:hover {
    color: hsl(var(--base));
}

.form-control:focus {
    -webkit-box-shadow: 0 0 0 0.15rem hsl(var(--base)/0.03);
    box-shadow: 0 0 0 0.15rem hsl(var(--base)/0.03);
    border-color: hsl(var(--base));
}

input:-internal-autofill-selected {
    background: hsl(var(--base));
}

.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after {
    background: none;
}

.form-floating > .form-control:not(:-ms-input-placeholder) ~ label::after {
    background: none;
}

.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select ~ label::after {
    background: none;
}

.form-floating > .form-control:-webkit-autofill ~ label {
    color: rgba(var(--bs-body-color-rgb), 0.65);
    -webkit-transform: scale(0.7) translateY(-0.3rem) translateX(0.5rem);
    transform: scale(0.7) translateY(-0.3rem) translateX(0.5rem);
}

/* ================================= 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 =========================== */
/* ===========================
   Button CSS
============================= */
.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));
    font-weight: 500;
    padding: 16px 30px;
    border-radius: 0px;
    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: 1199px) {
    .btn {
        font-size: 0.9375rem;
    }
}

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

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

@media screen and (max-width: 767px) and (max-width: 1199px) {
    .btn {
        font-size: 0.8125rem;
    }
}

@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;
    background: hsl(var(--base));
}

.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;
}

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

.btn--border {
    border-color: hsl(var(--base));
}

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

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

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

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

.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;
}

/* ================================= 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-100 {
    padding-top: 60px;
    padding-bottom: 60px;
}

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

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

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

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

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

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

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

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

.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 =========================== */
/* ============================
    Banner css
=============================== */
.banner-section {
    position: relative;
    z-index: 1;
    padding: 150px 0 0;
    overflow: hidden;
    background-image: url("../images/banner/banner-bg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #222429;
}

.banner-section::before {
    content: "";
    position: absolute;
    right: -9%;
    bottom: -45%;
    background: hsl(var(--base));
    width: 768px;
    height: 1080px;
    -webkit-transform: rotate(-129.348deg);
    transform: rotate(-129.348deg);
    border-radius: 384px;
    z-index: -1;
}

@media screen and (max-width: 1599px) {
    .banner-section::before {
        width: 650px;
        height: 900px;
    }
}

@media screen and (max-width: 1499px) {
    .banner-section::before {
        width: 550px;
        height: 800px;
    }
}

@media screen and (max-width: 1199px) {
    .banner-section::before {
        width: 450px;
    }
}

.banner-section__content {
    position: relative;
}

@media screen and (max-width: 991px) {
    .banner-section__content {
        text-align: center;
    }
}

.banner-section__content .webName {
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: rgba(209, 209, 208, 0.082);
    text-transform: capitalize;
    font-size: 119px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    top: -50px;
    display: block;
    color: #24262B;
    position: absolute;
    z-index: -1;
}

@media screen and (max-width: 1199px) {
    .banner-section__content .webName {
        font-size: 90px;
    }
}

@media screen and (max-width: 991px) {
    .banner-section__content .webName {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        font-size: 70px;
        top: -30px;
    }
}

@media screen and (max-width: 767px) {
    .banner-section__content .webName {
        font-size: 60px;
        width: 100%;
    }
}

.banner-section__content h1 {
    text-transform: capitalize;
    position: relative;
    color: hsl(var(--white));
}

@media screen and (max-width: 1499px) {
    .banner-section__content h1 {
        font-size: 3.625rem;
    }
}

@media screen and (max-width: 1499px) and (max-width: 1199px) {
    .banner-section__content h1 {
        font-size: 3.75rem;
    }
}

@media screen and (max-width: 1499px) and (max-width: 991px) {
    .banner-section__content h1 {
        font-size: 3.625rem;
    }
}

@media screen and (max-width: 1499px) and (max-width: 575px) {
    .banner-section__content h1 {
        font-size: 3.563rem;
    }
}

@media screen and (max-width: 1199px) {
    .banner-section__content h1 {
        font-size: 3rem;
    }
}

@media screen and (max-width: 1199px) and (max-width: 1199px) {
    .banner-section__content h1 {
        font-size: 3.063rem;
    }
}

@media screen and (max-width: 1199px) and (max-width: 991px) {
    .banner-section__content h1 {
        font-size: 3rem;
    }
}

@media screen and (max-width: 1199px) and (max-width: 575px) {
    .banner-section__content h1 {
        font-size: 2.938rem;
    }
}

@media screen and (max-width: 991px) {
    .banner-section__content h1 {
        max-width: 500px;
        margin: 0 auto;
    }
}

.banner-section__content h1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 45px;
    height: 2px;
    background-color: hsl(var(--base));
}

@media screen and (max-width: 991px) {
    .banner-section__content h1::before {
        display: none;
    }
}

.banner-section__content p {
    color: hsl(var(--white));
    font-size: 1.25rem;
    padding: 30px 0 30px;
}

@media screen and (max-width: 1199px) {
    .banner-section__content p {
        font-size: 1.125rem;
    }
}

@media screen and (max-width: 991px) {
    .banner-section__content p {
        font-size: 1rem;
    }
}

@media screen and (max-width: 991px) {
    .banner-section__content p {
        max-width: 500px;
        margin: 0 auto;
    }
}

.banner-section__img {
    position: relative;
}

@media screen and (max-width: 991px) {
    .banner-section__img {
        max-width: 500px;
    }
}

.banner-section__img .audit-score {
    position: absolute;
    top: 30%;
    right: 0;
}

@media screen and (max-width: 1199px) {
    .banner-section__img .audit-score {
        right: -10%;
    }
}

.banner-section__img .client-happy {
    position: absolute;
    left: 60px;
    bottom: 35%;
}

@media screen and (max-width: 1199px) {
    .banner-section__img .client-happy {
        bottom: 30%;
    }
}

@media screen and (max-width: 991px) {
    .banner-section__img .client-happy {
        left: 0;
    }
}

.banner-section__img .graph-card {
    position: absolute;
    right: -50px;
    bottom: 13%;
}

@media screen and (max-width: 1199px) {
    .banner-section__img .graph-card {
        bottom: 3%;
    }
}

.banner-section .audit-score,
.banner-section .client-happy,
.banner-section .graph-card {
    will-change: transform;
}

.audit-score {
    background-color: hsl(var(--white));
    display: inline-block;
    padding: 20px;
    -webkit-box-shadow: -11px 9px 18px 0px rgba(0, 0, 0, 0.08);
    box-shadow: -11px 9px 18px 0px rgba(0, 0, 0, 0.08);
    -webkit-animation: alltuchtopdown 1.5s ease-in-out 0s infinite alternate;
    animation: alltuchtopdown 1.5s ease-in-out 0s infinite alternate;
}

.audit-score h6 {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: hsl(var(--base-two));
    padding-bottom: 10px;
}

.audit-score .progress-container {
    position: relative;
    z-index: 1;
    width: 80px;
    margin: 0 auto;
}

.audit-score .progress-container::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 95%;
    height: 95%;
    background-color: #ededed;
    z-index: -1;
    border-radius: 100%;
}

.client-happy {
    background-color: hsl(var(--white));
    padding: 25px;
    display: inline-block;
    -webkit-animation: alltuchtopdown 1.9s ease-in-out 0s infinite alternate;
    animation: alltuchtopdown 1.9s ease-in-out 0s infinite alternate;
}

.client-happy h6 {
    color: #B5B5B5;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 10px;
}

@media screen and (max-width: 1199px) {
    .client-happy h6 {
        font-size: 0.8125rem;
    }
}

.client-happy .img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.client-happy .img img {
    margin: 0 -8px;
}

.graph-card {
    background-color: hsl(var(--white));
    display: inline-grid;
    -webkit-animation: alltuchtopdown 2s ease-in-out 0s infinite alternate;
    animation: alltuchtopdown 2s ease-in-out 0s infinite alternate;
}

.graph-card h6 {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: hsl(var(--base-two));
    padding: 15px 15px 5px;
}

.graph-card span {
    font-size: 0.75rem;
    color: hsl(var(--success));
    padding: 0 15px 10px;
}

/* ========= Banner-two ========= */
.banner-two-section {
    position: relative;
    padding: 300px 0 260px;
    z-index: 1;
    overflow: hidden;
}

@media screen and (max-width: 991px) {
    .banner-two-section {
        padding: 180px 0 200px;
    }
}

.banner-two-section .banner-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.banner-two-section .banner-content span {
    color: hsl(var(--white));
    text-transform: capitalize;
}

.banner-two-section .banner-content h1 {
    max-width: 820px;
    margin: 0 auto;
    color: hsl(var(--white));
    line-height: 1.2;
    padding: 15px 0 30px;
}

.banner-two-section .banner-content p {
    max-width: 560px;
    margin: 0 auto;
    color: hsl(var(--white)/0.8);
    padding-bottom: 50px;
}

.banner-two-section .bg-slider-list {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.banner-two-section .bg-slider-list::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: url("../images/banner/banner-two-bg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.4;
}

.banner-two-section .bg-slider-list::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: hsl(var(--base-two));
    opacity: 0.7;
}

.banner-two-section .bg-slider-list li {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
    -webkit-animation: imageAnimation 50s linear infinite;
    animation: imageAnimation 50s linear infinite;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.banner-two-section .bg-slider-list li:nth-child(1) {
    background-image: url("../images/banner/banner2.jpg");
}

.banner-two-section .bg-slider-list li:nth-child(2) {
    background-image: url("../images/banner/banner2.jpg");
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
}

.banner-two-section .bg-slider-list li:nth-child(3) {
    background-image: url("../images/banner/banner2.jpg");
    -webkit-animation-delay: 16s;
    animation-delay: 16s;
}

@-webkit-keyframes imageAnimation {
    0% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    20% {
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: 1;
    }

    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 1;
    }

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

@keyframes imageAnimation {
    0% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    20% {
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: 1;
    }

    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 1;
    }

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

.projects-slide {
    position: relative;
}

/* ===========================
   About CSS
============================= */
.about-section {
    background-image: url("../images/about/about-bg.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.about-section__img {
    position: relative;
}

.about-section__img .img {
    border-radius: 310px 0px 0px 0px;
    overflow: hidden;
    margin-right: 60px;
}

@media screen and (max-width: 1199px) {
    .about-section__img .img {
        border-radius: 200px 0px 0px 0px;
    }
}

.about-section__img .img img {
    width: 100%;
}

.about-section__img .experience-text {
    margin-top: -194px;
    margin-left: auto;
    position: relative;
}

.about-section__content h6 {
    padding: 30px 0 40px;
}

.about-section__content ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    padding: 40px 0;
}

.about-section__content ul li {
    font-weight: 700;
    color: hsl(var(--base-two));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
}

.about-section__content ul li::before {
    content: "\f058";
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    color: hsl(var(--base));
}

.experience-text {
    border-radius: 310px 0px 0px 0px;
    border: 17px solid hsl(var(--white));
    background: hsl(var(--base));
    width: 260px;
    height: 244px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: end;
    color: hsl(var(--white));
    padding: 20px;
    z-index: 1;
}

@media screen and (max-width: 767px) {
    .experience-text {
        border-radius: 174px 0px 0px 0px;
        width: 210px;
        height: 212px;
    }
}

.experience-text .number {
    font-size: 3.625rem;
    font-weight: 700;
    line-height: 0.8;
}

@media screen and (max-width: 1199px) {
    .experience-text .number {
        font-size: 3.75rem;
    }
}

@media screen and (max-width: 991px) {
    .experience-text .number {
        font-size: 3.625rem;
    }
}

@media screen and (max-width: 575px) {
    .experience-text .number {
        font-size: 3.563rem;
    }
}

@media screen and (max-width: 767px) {
    .experience-text .number {
        font-size: 3rem;
    }
}

@media screen and (max-width: 767px) and (max-width: 1199px) {
    .experience-text .number {
        font-size: 3.063rem;
    }
}

@media screen and (max-width: 767px) and (max-width: 991px) {
    .experience-text .number {
        font-size: 3rem;
    }
}

@media screen and (max-width: 767px) and (max-width: 575px) {
    .experience-text .number {
        font-size: 2.938rem;
    }
}

.experience-text p {
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: capitalize;
    line-height: 1.2;
    padding-top: 10px;
}

@media screen and (max-width: 1199px) {
    .experience-text p {
        font-size: 1.0625rem;
    }
}

@media screen and (max-width: 991px) {
    .experience-text p {
        font-size: 1rem;
    }
}

@media screen and (max-width: 575px) {
    .experience-text p {
        font-size: 0.9375rem;
    }
}

/* ========= About-two ========= */
.about-two-section__img {
    position: relative;
}

.about-two-section__img .img-two {
    float: right;
    margin-top: -320px;
    position: relative;
    z-index: 1;
}

.about-two-section__img .image-effect {
    display: inline-block;
}

.about-two-section__content ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    padding: 30px 0 40px;
}

.about-two-section__content ul li {
    font-weight: 700;
    color: hsl(var(--base-two));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
}

.about-two-section__content ul li::before {
    content: "\f058";
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    color: hsl(var(--base));
}

.about-two-section .experience-about {
    border-radius: 0;
    border: 0;
    position: absolute;
    top: 76px;
    right: 34px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    width: 200px;
    height: 244px;
}

/* ===========================
   Counter CSS
============================= */
.counter-section {
    padding: 80px 0;
    position: relative;
    z-index: 1;
}

.counter-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: url("../images/counter/counter-bg.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: hsl(var(--base)/0.05);
}

.counter-section__content {
    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: 30px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.counter-section__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.counter-section__item .number {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1.5px;
    -webkit-text-stroke-color: hsl(var(--base));
    font-size: 75px;
    font-weight: 800;
    line-height: 60px;
    text-transform: capitalize;
    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) {
    .counter-section__item .number {
        font-size: 3.625rem;
    }
}

@media screen and (max-width: 1199px) and (max-width: 1199px) {
    .counter-section__item .number {
        font-size: 3.75rem;
    }
}

@media screen and (max-width: 1199px) and (max-width: 991px) {
    .counter-section__item .number {
        font-size: 3.625rem;
    }
}

@media screen and (max-width: 1199px) and (max-width: 575px) {
    .counter-section__item .number {
        font-size: 3.563rem;
    }
}

@media screen and (max-width: 767px) {
    .counter-section__item .number {
        font-size: 3rem;
    }
}

@media screen and (max-width: 767px) and (max-width: 1199px) {
    .counter-section__item .number {
        font-size: 3.063rem;
    }
}

@media screen and (max-width: 767px) and (max-width: 991px) {
    .counter-section__item .number {
        font-size: 3rem;
    }
}

@media screen and (max-width: 767px) and (max-width: 575px) {
    .counter-section__item .number {
        font-size: 2.938rem;
    }
}

@media screen and (max-width: 575px) {
    .counter-section__item .number {
        font-size: 2.375rem;
    }
}

@media screen and (max-width: 575px) and (max-width: 1199px) {
    .counter-section__item .number {
        font-size: 2.438rem;
    }
}

@media screen and (max-width: 575px) and (max-width: 991px) {
    .counter-section__item .number {
        font-size: 2.375rem;
    }
}

@media screen and (max-width: 575px) and (max-width: 575px) {
    .counter-section__item .number {
        font-size: 2.313rem;
    }
}

.counter-section__item p {
    font-size: 1.25rem;
    font-weight: 700;
    color: hsl(var(--base-two));
    max-width: 110px;
    line-height: 1.3;
    max-width: 104px;
}

@media screen and (max-width: 1199px) {
    .counter-section__item p {
        font-size: 1.125rem;
    }
}

@media screen and (max-width: 991px) {
    .counter-section__item p {
        font-size: 1rem;
    }
}

/* ===========================
   Services CSS
============================= */
.services-section {
    position: relative;
}

.services-section::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background-color: hsl(var(--section-bg));
}

@media screen and (max-width: 991px) {
    .services-section::before {
        height: 30%;
    }
}

@media screen and (max-width: 575px) {
    .services-section::before {
        height: 20%;
    }
}

.services-section .section-title .webName {
    color: hsl(var(--white));
    opacity: 0.1;
}

.services-section .section-title h2 {
    color: hsl(var(--white));
}

.services-section .section-title p {
    color: hsl(var(--white));
}

.services-section__item .text {
    text-align: center;
    margin-top: -42px;
    position: relative;
    z-index: 1;
}

.services-section__item .text .number {
    font-size: 2.375rem;
    font-style: normal;
    font-weight: 700;
    line-height: 60px;
    text-transform: capitalize;
    background: hsl(var(--base-two));
    color: hsl(var(--white));
    display: inline-block;
    padding: 10px 20px;
}

@media screen and (max-width: 1199px) {
    .services-section__item .text .number {
        font-size: 2.438rem;
    }
}

@media screen and (max-width: 991px) {
    .services-section__item .text .number {
        font-size: 2.375rem;
    }
}

@media screen and (max-width: 575px) {
    .services-section__item .text .number {
        font-size: 2.313rem;
    }
}

@media screen and (max-width: 1199px) {
    .services-section__item .text .number {
        padding: 5px 15px;
    }
}

.services-section__item .text h4 {
    font-weight: 600;
    padding: 20px 0 15px;
}

/* ========= Services-two ========= */
.services-two-section .services-item {
    border: 0.5px solid hsl(var(--border-color));
    background: hsl(var(--white));
    padding: 40px 30px;
    text-align: center;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}

.services-two-section .services-item:hover {
    background: hsl(var(--base));
    -webkit-box-shadow: 0px 25px 100px 0px #D1D1D0;
    box-shadow: 0px 25px 100px 0px #D1D1D0;
}

.services-two-section .services-item:hover svg {
    fill: hsl(var(--white));
}

.services-two-section .services-item:hover .number,
.services-two-section .services-item:hover h4,
.services-two-section .services-item:hover p,
.services-two-section .services-item:hover .read-more {
    color: hsl(var(--white));
}

.services-two-section .services-item:hover .number a,
.services-two-section .services-item:hover h4 a,
.services-two-section .services-item:hover p a,
.services-two-section .services-item:hover .read-more a {
    color: hsl(var(--white));
}

.services-two-section .services-item .number {
    color: hsl(var(--base-two));
    font-size: 1.125rem;
    font-weight: 700;
    padding-bottom: 20px;
}

@media screen and (max-width: 1199px) {
    .services-two-section .services-item .number {
        font-size: 1.0625rem;
    }
}

@media screen and (max-width: 991px) {
    .services-two-section .services-item .number {
        font-size: 1rem;
    }
}

@media screen and (max-width: 575px) {
    .services-two-section .services-item .number {
        font-size: 0.9375rem;
    }
}

.services-two-section .services-item h4 {
    color: hsl(var(--base-two));
    font-weight: 600;
}

.services-two-section .services-item svg {
    fill: hsl(var(--base));
    height: 65px;
    margin: 30px 0;
}

.services-two-section .services-item .read-more {
    color: hsl(var(--base));
    font-size: 1.125rem;
    font-weight: 700;
    margin-top: 30px;
}

@media screen and (max-width: 1199px) {
    .services-two-section .services-item .read-more {
        font-size: 1.0625rem;
    }
}

@media screen and (max-width: 991px) {
    .services-two-section .services-item .read-more {
        font-size: 1rem;
    }
}

@media screen and (max-width: 575px) {
    .services-two-section .services-item .read-more {
        font-size: 0.9375rem;
    }
}

/* ===========================
   Feature CSS
============================= */
.feature-section__content .section-title p {
    padding-top: 30px;
}

.feature-section__content ul {
    display: grid;
    gap: 30px;
    margin: 50px 0;
}

.feature-section__content ul li {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    gap: 15px;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
}

.feature-section__content ul li h6 {
    padding-bottom: 10px;
}

.feature-section__content ul li p {
    max-width: 448px;
}

.feature-section__content ul li::before {
    content: "\f058";
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    color: hsl(var(--base));
    background-color: hsl(var(--base)/0.2);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 57px;
    height: 57px;
    margin-top: 4px;
}

.feature-section__img {
    position: relative;
}

.feature-section__img .img {
    border-radius: 310px 0px 0px 0px;
    overflow: hidden;
}

@media screen and (max-width: 575px) {
    .feature-section__img .img {
        border-radius: 200px 0px 0px 0px;
    }
}

.feature-section__img .audit-score {
    position: absolute;
    bottom: -15px;
    right: -35px;
}

.feature-section__img .experience-text {
    position: absolute;
    top: -20px;
    left: -20px;
}

/* ========= Feature-two ========= */
.feature-two-section__content ul {
    display: grid;
    gap: 30px;
    margin: 50px 0;
}

.feature-two-section__content ul li {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    gap: 15px;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
}

.feature-two-section__content ul li h6 {
    padding-bottom: 10px;
}

.feature-two-section__content ul li p {
    max-width: 448px;
}

.feature-two-section__content ul li::before {
    content: "\f058";
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    color: hsl(var(--base));
    background-color: hsl(var(--base)/0.2);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 57px;
    height: 57px;
    margin-top: 4px;
}

.feature-two-section__img {
    position: relative;
}

@media screen and (max-width: 1199px) {
    .feature-two-section__img {
        margin-left: 45px;
    }
}

.feature-two-section__img .experience-feature {
    border-radius: 0;
    border: 0;
    width: auto;
    height: auto;
    display: inline-block;
    padding: 20px 40px;
    text-align: center;
    position: absolute;
    top: 10%;
    left: -59px;
    -webkit-animation: alltuchtopdown 1.5s ease-in-out 0s infinite alternate;
    animation: alltuchtopdown 1.5s ease-in-out 0s infinite alternate;
}

.feature-two-section__img .feature-video {
    position: relative;
    display: inline-block;
    border-radius: 100%;
    overflow: hidden;
    border: 10px solid hsl(var(--white));
    width: 280px;
    height: 280px;
    margin-top: -190px;
    margin-left: -50px;
}

@media screen and (max-width: 767px) {
    .feature-two-section__img .feature-video {
        width: 200px;
        height: 200px;
    }
}

.feature-two-section__img .feature-video a {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* ===========================
   Achieve CSS
============================= */
.achieve-section {
    background-color: hsl(var(--section-bg));
}

.achieve-section .section-title .webName {
    color: hsl(var(--white));
    opacity: 0.1;
}

.achieve-section .section-title h2 {
    color: hsl(var(--white));
}

.achieve-section .section-title p {
    color: hsl(var(--white)/0.8);
    padding-top: 30px;
}

.achieve-section__img {
    position: relative;
}

@media screen and (max-width: 1199px) {
    .achieve-section__img {
        max-width: 600px;
    }
}

.achieve-section__img .img-two,
.achieve-section__img .img {
    border: 5px solid hsl(var(--white));
}

.achieve-section__img .img {
    position: relative;
    display: inline-block;
}

.achieve-section__img .img .video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.achieve-section__img .img-two {
    position: absolute;
    right: 0;
    top: 45px;
    border-top-left-radius: 140px;
    overflow: hidden;
}

.achieve-section__img .winning-text {
    background-color: hsl(var(--base));
    max-width: 280px;
    padding: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 24px;
    position: absolute;
    right: 70px;
    bottom: 50px;
}

.achieve-section__img .winning-text span {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px;
    color: hsl(var(--white));
    font-size: 75px;
    font-weight: 900;
    text-transform: capitalize;
    line-height: 0.8;
}

.achieve-section__img .winning-text p {
    font-size: 1.125rem;
    font-weight: 700;
    color: hsl(var(--white));
}

@media screen and (max-width: 1199px) {
    .achieve-section__img .winning-text p {
        font-size: 1.0625rem;
    }
}

@media screen and (max-width: 991px) {
    .achieve-section__img .winning-text p {
        font-size: 1rem;
    }
}

@media screen and (max-width: 575px) {
    .achieve-section__img .winning-text p {
        font-size: 0.9375rem;
    }
}

.achieve-section__content .skill-list {
    display: grid;
    gap: 24px;
    margin: 40px 0 50px;
}

.achieve-section__content .skill-progress span {
    color: hsl(var(--white)/0.8);
    font-size: 1.125rem;
    margin-bottom: 7px;
}

@media screen and (max-width: 1199px) {
    .achieve-section__content .skill-progress span {
        font-size: 1.0625rem;
    }
}

@media screen and (max-width: 991px) {
    .achieve-section__content .skill-progress span {
        font-size: 1rem;
    }
}

@media screen and (max-width: 575px) {
    .achieve-section__content .skill-progress span {
        font-size: 0.9375rem;
    }
}

.achieve-section__content .skill-progress .percentage {
    color: hsl(var(--white)/0.8);
    font-size: 1.125rem;
}

@media screen and (max-width: 1199px) {
    .achieve-section__content .skill-progress .percentage {
        font-size: 1.0625rem;
    }
}

@media screen and (max-width: 991px) {
    .achieve-section__content .skill-progress .percentage {
        font-size: 1rem;
    }
}

@media screen and (max-width: 575px) {
    .achieve-section__content .skill-progress .percentage {
        font-size: 0.9375rem;
    }
}

.achieve-section__content .clients-images img {
    margin-right: -20px;
}

.achieve-section__content .clients-images span {
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: capitalize;
    color: hsl(var(--white));
    margin-left: 35px;
}

@media screen and (max-width: 1199px) {
    .achieve-section__content .clients-images span {
        font-size: 1.0625rem;
    }
}

@media screen and (max-width: 991px) {
    .achieve-section__content .clients-images span {
        font-size: 1rem;
    }
}

@media screen and (max-width: 575px) {
    .achieve-section__content .clients-images span {
        font-size: 0.9375rem;
    }
}

/* ===========================
   Projects CSS
============================= */
.projects-two-section .project-item {
    position: relative;
}

.projects-two-section .project-item .img img {
    width: 100%;
}

.projects-two-section .project-item .text {
    background-color: hsl(var(--white));
    position: absolute;
    bottom: 0;
    padding: 20px;
    margin: 20px;
}

.projects-two-section .project-item .text h5 a {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projects-two-section .project-item .text p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
    padding-top: 10px;
}

@media screen and (max-width: 1199px) {
    .projects-two-section .project-item .text p {
        font-size: 0.9375rem;
    }
}

@media screen and (max-width: 991px) {
    .projects-two-section .project-item .text p {
        font-size: 0.875rem;
    }
}

.featured-nav {
    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: 5px;
    position: relative;
}

@media screen and (max-width: 424px) {
    .featured-nav {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

.featured-nav button {
    cursor: pointer;
    font-size: 1.125rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    padding: 5px 15px;
}

@media screen and (max-width: 1199px) {
    .featured-nav button {
        font-size: 1.0625rem;
    }
}

@media screen and (max-width: 991px) {
    .featured-nav button {
        font-size: 1rem;
    }
}

@media screen and (max-width: 575px) {
    .featured-nav button {
        font-size: 0.9375rem;
    }
}

.featured-nav button.active {
    color: hsl(var(--white));
}

@media screen and (max-width: 575px) {
    .featured-nav button {
        font-size: 0.875rem;
        padding: 5px 10px;
    }
}

@media screen and (max-width: 575px) and (max-width: 1199px) {
    .featured-nav button {
        font-size: 0.8125rem;
    }
}

.featured-nav .nav-indicator {
    position: absolute;
    height: 100%;
    background: hsl(var(--base));
    bottom: 0;
    -webkit-transition: width 0.5s ease, left 0.5s ease;
    transition: width 0.5s ease, left 0.5s ease;
    z-index: 0;
}

.portfolio-item {
    margin: 12px 0;
    position: relative;
    overflow: hidden;
}

.portfolio-item:hover::before {
    bottom: 0;
}

.portfolio-item:hover .portfolio-text {
    bottom: 0;
}

.portfolio-item::before {
    content: "";
    position: absolute;
    bottom: -100%;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left bottom, left top, from(hsl(var(--base))), color-stop(57.53%, hsl(var(--base-two)/0.05)));
    background: linear-gradient(0deg, hsl(var(--base)) 0%, hsl(var(--base-two)/0.05) 57.53%);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.portfolio-item .portfolio-img img {
    width: 100%;
}

.portfolio-item .portfolio-text {
    position: absolute;
    bottom: -100%;
    padding: 30px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.portfolio-item .portfolio-text h5 {
    color: hsl(var(--white));
    font-size: 1.25rem;
}

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

@media screen and (max-width: 991px) {
    .portfolio-item .portfolio-text h5 {
        font-size: 1rem;
    }
}

/* ===========================
   Pricing CSS
============================= */
.nav-pills {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: 2px solid hsl(var(--black)/0.03);
    border-radius: 0px;
    margin-bottom: 40px;
    position: relative;
}

.nav-pills .nav-link {
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--black));
    border-radius: 0px;
    padding: 10px 45px;
    position: relative;
    z-index: 1;
    background: none;
}

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

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

.nav-pills .nav-link.active {
    color: hsl(var(--white));
    background: none;
    border-radius: 0;
}

.nav-pills .nav-indicator {
    position: absolute;
    height: 100%;
    background: hsl(var(--base));
    bottom: 0;
    -webkit-transition: width 0.3s ease, left 0.3s ease;
    transition: width 0.3s ease, left 0.3s ease;
    z-index: 0;
}

.pricing-section__card {
    background-color: hsl(var(--base)/0.05);
    padding: 55px 40px 60px;
    position: relative;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}

.pricing-section__card h5 {
    font-size: 1rem;
    font-weight: 600;
}

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

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

.pricing-section__card p {
    max-width: 252px;
    margin: 15px auto;
    font-size: 0.875rem;
}

@media screen and (max-width: 1199px) {
    .pricing-section__card p {
        font-size: 0.8125rem;
    }
}

.pricing-section__card h3 {
    font-weight: 800;
    font-size: 2rem;
    padding-top: 10px;
}

@media screen and (max-width: 1199px) {
    .pricing-section__card h3 {
        font-size: 2rem;
    }
}

@media screen and (max-width: 991px) {
    .pricing-section__card h3 {
        font-size: 2rem;
    }
}

@media screen and (max-width: 575px) {
    .pricing-section__card h3 {
        font-size: 2rem;
    }
}

.pricing-section__card h3 sub {
    font-size: 1rem;
    font-weight: 600;
}

@media screen and (max-width: 1199px) {
    .pricing-section__card h3 sub {
        font-size: 0.9375rem;
    }
}

@media screen and (max-width: 991px) {
    .pricing-section__card h3 sub {
        font-size: 0.875rem;
    }
}

.pricing-section__card hr {
    margin: 2.5rem 0;
    border-width: 2px;
    border-color: hsl(var(--black)/0.15);
}

.pricing-section__card ul {
    max-width: 260px;
    display: grid;
    gap: 12px;
    margin: 0 auto;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.pricing-section__card ul li {
    text-align: left;
    font-size: 1.125rem;
    letter-spacing: 0.5px;
    color: hsl(var(--black));
    font-size: 1rem;
    font-weight: 400;
}

@media screen and (max-width: 1199px) {
    .pricing-section__card ul li {
        font-size: 0.9375rem;
    }
}

@media screen and (max-width: 991px) {
    .pricing-section__card ul li {
        font-size: 0.875rem;
    }
}

.pricing-section__card ul li::before {
    content: "\f00c";
    font-weight: 900;
    font-family: "Font Awesome 6 free";
    margin-right: 10px;
}

.pricing-section__card ul li.check {
    color: hsl(var(--black));
}

.pricing-section__card ul li.unCheck {
    color: hsl(var(--black)/0.4);
    text-decoration: line-through;
}

.pricing-section__card.active {
    background-color: hsl(var(--base));
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}

.pricing-section__card.active h5, .pricing-section__card.active h3, .pricing-section__card.active p {
    color: hsl(var(--white));
}

.pricing-section__card.active ul li {
    color: hsl(var(--white));
}

.pricing-section__card.active ul li.unCheck {
    color: hsl(var(--white)/0.4);
}

.pricing-section__card.active .btn--base {
    background-color: hsl(var(--white)) !important;
    color: hsl(var(--base)) !important;
    border-color: hsl(var(--white));
}

.pricing-section__card.active hr {
    border-color: hsl(var(--white)/0.4);
}

.pricing-section__card .btn-round-two {
    min-width: 260px;
    margin: 0 auto;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* ===========================
   Team CSS
============================= */
.team-section {
    background-color: hsl(var(--section-bg));
}

.team-section .section-title .webName {
    color: hsl(var(--white));
    opacity: 0.1;
}

.team-section .section-title h2 {
    color: hsl(var(--white));
}

.team-section .section-title p {
    color: hsl(var(--white)/0.8);
}

.team-section .team-item {
    background-color: hsl(var(--white));
    overflow: hidden;
    border-top-left-radius: 76px;
}

.team-section .team-item .img {
    border-top-left-radius: 76px;
    overflow: hidden;
    border: 4px solid hsl(var(--base));
    border-bottom: 0;
}

.team-section .team-item .img img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.team-section .team-item .text {
    text-align: center;
    padding: 40px 0 24px;
    position: relative;
}

.team-section .team-item .text .social {
    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: 10px;
    position: absolute;
    top: -20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.team-section .team-item .text .social li {
    background: hsl(var(--white));
}

.team-section .team-item .text .social a {
    color: hsl(var(--white));
    font-size: 1.125rem;
    background: hsl(var(--base));
    width: 40px;
    height: 35px;
    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: 1199px) {
    .team-section .team-item .text .social a {
        font-size: 1.0625rem;
    }
}

@media screen and (max-width: 991px) {
    .team-section .team-item .text .social a {
        font-size: 1rem;
    }
}

@media screen and (max-width: 575px) {
    .team-section .team-item .text .social a {
        font-size: 0.9375rem;
    }
}

.team-section .team-item .text .social a:hover {
    color: hsl(var(--base));
    background: hsl(var(--white));
}

.team-section .team-item .text p {
    padding: 8px 0 0;
}

/* ========= Team-two ========= */
.team-two-section .team-item {
    background-color: hsl(var(--base)/0.05);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.team-two-section .team-item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -100%;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: hsl(var(--base));
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
}

.team-two-section .team-item:hover::after {
    bottom: 0;
}

.team-two-section .team-item:hover h5 {
    color: hsl(var(--white));
}

.team-two-section .team-item:hover p {
    color: hsl(var(--white)/0.8);
}

.team-two-section .team-item:hover .social {
    opacity: 1;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}

.team-two-section .team-item:hover .social li {
    margin: 0;
}

.team-two-section .team-item .img {
    position: relative;
}

.team-two-section .team-item .img img {
    width: 100%;
}

.team-two-section .team-item .social {
    position: absolute;
    top: 20px;
    left: 20px;
    display: grid;
    gap: 10px;
    opacity: 0;
    -webkit-transform: all 0.4s;
    transform: all 0.4s;
}

.team-two-section .team-item .social li {
    margin-bottom: -20px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.team-two-section .team-item .social a {
    background-color: hsl(var(--white));
    color: hsl(var(--base));
    min-width: 40px;
    height: 40px;
    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: all 0.3s;
    transition: all 0.3s;
}

.team-two-section .team-item .social a:hover {
    background-color: hsl(var(--base));
    color: hsl(var(--white));
}

.team-two-section .team-item .text {
    padding: 20px 30px;
}

.team-two-section .team-item .text h5 {
    padding-bottom: 4px;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
}

.team-two-section .team-item .text h5 a:hover {
    color: hsl(var(--white));
}

/* ========= Team-details ========= */
.team-details-section .team-user-add p {
    padding: 10px 0 0px;
}

.team-details-section .team-user-content .skill-list {
    display: grid;
    gap: 20px;
}

.team-details-section .team-user-content .skill-progress span {
    color: hsl(var(--base-two)/0.8);
    font-size: 1.125rem;
    margin-bottom: 7px;
}

@media screen and (max-width: 1199px) {
    .team-details-section .team-user-content .skill-progress span {
        font-size: 1.0625rem;
    }
}

@media screen and (max-width: 991px) {
    .team-details-section .team-user-content .skill-progress span {
        font-size: 1rem;
    }
}

@media screen and (max-width: 575px) {
    .team-details-section .team-user-content .skill-progress span {
        font-size: 0.9375rem;
    }
}

.team-details-section .team-user-content .skill-progress .percentage {
    color: hsl(var(--base-two)/0.8);
    font-size: 1.125rem;
}

@media screen and (max-width: 1199px) {
    .team-details-section .team-user-content .skill-progress .percentage {
        font-size: 1.0625rem;
    }
}

@media screen and (max-width: 991px) {
    .team-details-section .team-user-content .skill-progress .percentage {
        font-size: 1rem;
    }
}

@media screen and (max-width: 575px) {
    .team-details-section .team-user-content .skill-progress .percentage {
        font-size: 0.9375rem;
    }
}

.team-details-section .team-user-content .social {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
}

.team-details-section .team-user-content .social a {
    font-size: 1.25rem;
    width: 45px;
    height: 45px;
    background: hsl(var(--base));
    color: hsl(var(--white));
    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: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

@media screen and (max-width: 1199px) {
    .team-details-section .team-user-content .social a {
        font-size: 1.125rem;
    }
}

@media screen and (max-width: 991px) {
    .team-details-section .team-user-content .social a {
        font-size: 1rem;
    }
}

.team-details-section .team-user-content .social a:hover {
    background: hsl(var(--base));
    color: hsl(var(--white));
}

/* ===========================
   Feedback CSS
============================= */
.feedback-section .feedback-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 15px;
    padding: 30px;
    background: hsl(var(--white));
    border: 2px solid hsl(var(--base)/0.05);
    position: relative;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.feedback-section .feedback-item:hover {
    border-color: hsl(var(--base));
}

.feedback-section .feedback-item:hover .feedback-text .user__name .img {
    border-color: hsl(var(--base));
}

.feedback-section .question-svg {
    min-width: 40px;
    position: absolute;
    z-index: 1;
    right: 50px;
    top: 70px;
    opacity: 0.4;
}

.feedback-section .feedback-text .user__name {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 25px;
    margin-bottom: 20px;
}

.feedback-section .feedback-text .user__name .img {
    border-top-left-radius: 50px;
    border: 5px solid hsl(var(--base)/0.05);
    overflow: hidden;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.feedback-section .feedback-text .user__name .img img {
    max-width: 100px;
    height: 100px;
    -o-object-fit: cover;
    object-fit: cover;
}

.feedback-section .feedback-text .user__name .star-list {
    color: hsl(var(--warning));
    font-size: 0.875rem;
}

@media screen and (max-width: 1199px) {
    .feedback-section .feedback-text .user__name .star-list {
        font-size: 0.8125rem;
    }
}

.feedback-section .feedback-text .user__name .star-list i {
    margin: 0 -2px;
}

/* ========= Feedback-two ========= */
.feedback-two-section .feedback-two-slide .swiper-slide-next .feedback-item::before {
    background-color: hsl(var(--base));
}

.feedback-two-section .feedback-two-slide .swiper-slide-next .feedback-item p {
    color: hsl(var(--white)/0.8);
}

.feedback-two-section .feedback-two-slide .swiper-slide-next .feedback-item .text::before {
    background-color: hsl(var(--white));
}

.feedback-two-section .feedback-two-slide .swiper-slide-next .feedback-item .text h5 {
    color: hsl(var(--white));
}

.feedback-two-section .feedback-two-slide .swiper-slide-next .feedback-item .text span {
    color: hsl(var(--white)/0.8);
}

.feedback-two-section .feedback-two-slide .feedback-item {
    position: relative;
    text-align: center;
    padding-bottom: 40px;
}

.feedback-two-section .feedback-two-slide .feedback-item::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 86%;
    border: 1px solid hsl(var(--border-color));
    z-index: -1;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.feedback-two-section .feedback-two-slide .feedback-item .img {
    width: 115px;
    height: 115px;
    margin: 0 auto;
    border-radius: 100%;
    overflow: hidden;
}

.feedback-two-section .feedback-two-slide .feedback-item .img img {
    width: 100%;
    height: 100%;
}

.feedback-two-section .feedback-two-slide .feedback-item p {
    padding: 30px 35px 23px;
}

.feedback-two-section .feedback-two-slide .feedback-item .text {
    position: relative;
    padding-top: 20px;
}

.feedback-two-section .feedback-two-slide .feedback-item .text::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 48px;
    height: 2px;
    background-color: hsl(var(--base));
}

.feedback-two-section .feedback-two-slide .feedback-item .text h5 {
    padding-bottom: 4px;
}

/* ===========================
   Partners CSS
============================= */
.partners-section {
    position: relative;
    z-index: 1;
}

.partners-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: hsl(var(--base));
    z-index: -1;
}

.partners-section .partners-title h3 {
    color: hsl(var(--white));
}

.partner-massage {
    background-color: #f7faff;
    padding: 60px;
}

@media screen and (max-width: 767px) {
    .partner-massage {
        padding: 30px;
    }
}

.partner-massage__content .consultations-btn {
    font-weight: 500;
    color: hsl(var(--base-two));
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}

.partner-massage__content .consultations-btn:hover {
    letter-spacing: 0.3px;
    color: hsl(var(--base));
}

.partner-massage__content h2 {
    padding: 15px 0 20px;
}

.partner-massage__content h2 span {
    color: hsl(var(--base));
}

.partner-massage__content p {
    max-width: 380px;
}

.partner-massage__content .read-more {
    color: hsl(var(--base-two));
    text-decoration: underline;
    margin-top: 20px;
    font-weight: 600;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.partner-massage__content .read-more:hover {
    letter-spacing: 0.4px;
    color: hsl(var(--base));
}

/* ========= Client-logo ========= */
.client-logo-content {
    background-color: hsl(var(--base));
    padding: 50px 40px;
    margin-top: -80px;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 991px) {
    .client-logo-content {
        padding: 24px;
        margin-top: -55px;
    }
}

/* ===========================
   Faq CSS
============================= */
.accordion {
    border: 0;
    padding: 0;
    display: grid;
    gap: 24px;
}

.accordion .accordion-button {
    background-color: hsl(var(--base)/0.015);
    border-radius: 0;
    color: hsl(var(--base-two));
    padding: 24px;
    font-size: 1.125rem;
}

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

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

@media screen and (max-width: 575px) {
    .accordion .accordion-button {
        font-size: 0.9375rem;
    }
}

.accordion .accordion-item {
    border: 0;
    background-color: hsl(var(--base)/0.025);
    border-radius: 0;
}

.accordion .accordion-body {
    padding: 24px;
}

.accordion p {
    color: hsl(var(--body-color));
    font-size: 1rem;
}

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

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

/* ===========================
   Blog CSS
============================= */
.blog-post-card {
    background: hsl(var(--white));
    -webkit-box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.05);
}

.blog-post-card:hover .img img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.blog-post-card:hover h5 a {
    color: hsl(var(--base));
}

.blog-post-card .img {
    overflow: hidden;
}

.blog-post-card .img img {
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    width: 100%;
}

.blog-post-card .text {
    padding: 0 30px 30px;
    margin-top: -20px;
    position: relative;
    z-index: 1;
}

.blog-post-card .text .tag {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 15px;
}

.blog-post-card .text .tag a {
    background-color: hsl(var(--base));
    padding: 5px 12px;
    -webkit-box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
    color: hsl(var(--white));
    font-size: 1rem;
    font-weight: 500;
}

@media screen and (max-width: 1199px) {
    .blog-post-card .text .tag a {
        font-size: 0.9375rem;
    }
}

@media screen and (max-width: 991px) {
    .blog-post-card .text .tag a {
        font-size: 0.875rem;
    }
}

.blog-post-card .text .post-user {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 20px 0 15px;
}

.blog-post-card .text .post-user .dot {
    font-size: 0.625rem;
    margin: 0 15px;
}

.blog-post-card .text .post-user .dot::after {
    content: "\f111";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    opacity: 0.5;
}

.blog-post-card .text .post-user span {
    font-size: 1rem;
    font-weight: 500;
}

@media screen and (max-width: 1199px) {
    .blog-post-card .text .post-user span {
        font-size: 0.9375rem;
    }
}

@media screen and (max-width: 991px) {
    .blog-post-card .text .post-user span {
        font-size: 0.875rem;
    }
}

.blog-post-card .text h5 {
    padding-bottom: 20px;
}

.blog-post-card .text h5 a {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    position: relative;
    display: inline !important;
    width: 100%;
    background-repeat: no-repeat;
    background-position-y: -2px;
    background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);
    -webkit-transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    background-size: 0 100%;
    text-transform: capitalize;
}

.blog-post-card .text h5 a:hover {
    background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);
    background-size: 100% 100%;
    color: hsl(var(--base));
}

.blog-post-card .text .read-more {
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--base-two));
    text-decoration: underline;
}

@media screen and (max-width: 1199px) {
    .blog-post-card .text .read-more {
        font-size: 1.0625rem;
    }
}

@media screen and (max-width: 991px) {
    .blog-post-card .text .read-more {
        font-size: 1rem;
    }
}

@media screen and (max-width: 575px) {
    .blog-post-card .text .read-more {
        font-size: 0.9375rem;
    }
}

.blog-post-card .text .read-more:hover {
    color: hsl(var(--base));
}

.sidebar-content {
    position: sticky;
    top: 0;
}

.blog-sidebar-box {
    border-radius: 0px;
    border: 1px solid hsl(var(--base)/0.06);
    background: hsl(var(--base)/0.05);
    padding: 30px;
}

.blog-sidebar-box.search--box {
    background: hsl(var(--base));
}

.blog-sidebar-box form {
    border: 1px solid hsl(var(--black)/0.05);
    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;
    border-radius: 0px;
    overflow: hidden;
}

.blog-sidebar-box form input {
    border: 0;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
    height: 48px;
    padding: 15px 20px;
    font-size: 1rem;
    font-weight: 500;
}

@media screen and (max-width: 1199px) {
    .blog-sidebar-box form input {
        font-size: 0.9375rem;
    }
}

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

.blog-sidebar-box form button {
    border-left: 1px solid hsl(var(--black)/0.05);
    height: 48px;
    width: 48px;
    background: hsl(var(--white));
}

.blog-sidebar-box h4 {
    color: hsl(var(--black));
    margin-bottom: 24px;
}

.blog-sidebar-box .categories-list {
    display: grid;
    gap: 15px;
}

.blog-sidebar-box .categories-list a {
    background: hsl(var(--white));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    color: hsl(var(--black));
    padding: 13px 15px;
    border-radius: 0px;
    font-size: 1rem;
    font-weight: 500;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

@media screen and (max-width: 1199px) {
    .blog-sidebar-box .categories-list a {
        font-size: 0.9375rem;
    }
}

@media screen and (max-width: 991px) {
    .blog-sidebar-box .categories-list a {
        font-size: 0.875rem;
    }
}

.blog-sidebar-box .categories-list a.active, .blog-sidebar-box .categories-list a:hover {
    background: hsl(var(--base));
    color: hsl(var(--white));
}

.blog-sidebar-box .categories-list a.active .material-symbols-outlined, .blog-sidebar-box .categories-list a:hover .material-symbols-outlined {
    background: hsl(var(--white));
    color: hsl(var(--base));
}

.blog-sidebar-box .categories-list a::after {
    content: "\f101";
    font-family: "Font Awesome 6 free";
    font-weight: 900;
}

.blog-sidebar-box .categories-list a img {
    background: #FAFAFA;
    border-radius: 4px;
    padding: 10px;
    -webkit-box-shadow: 0px 3px 10px -7px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 3px 10px -7px rgba(0, 0, 0, 0.75);
}

.blog-sidebar-box .categories-list a .material-symbols-outlined {
    margin-left: auto;
    background: hsl(var(--base));
    border-radius: 4px;
    color: hsl(var(--white));
    width: 30px;
    height: 30px;
    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: all 0.3s;
    transition: all 0.3s;
}

@media screen and (max-width: 1199px) {
    .blog-sidebar-box .categories-list a .material-symbols-outlined {
        font-size: 1.0625rem;
    }
}

@media screen and (max-width: 991px) {
    .blog-sidebar-box .categories-list a .material-symbols-outlined {
        font-size: 1rem;
    }
}

@media screen and (max-width: 575px) {
    .blog-sidebar-box .categories-list a .material-symbols-outlined {
        font-size: 0.9375rem;
    }
}

.blog-sidebar-box .sidebar-blog-list {
    display: grid;
    gap: 24px;
}

.blog-sidebar-box .sidebar-blog-list__card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
}

.blog-sidebar-box .sidebar-blog-list__card:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.blog-sidebar-box .sidebar-blog-list__card a {
    display: block;
}

.blog-sidebar-box .sidebar-blog-list__card img {
    max-width: 72px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.blog-sidebar-box .sidebar-blog-list__card span {
    font-size: 0.875rem;
    font-weight: 500;
}

@media screen and (max-width: 1199px) {
    .blog-sidebar-box .sidebar-blog-list__card span {
        font-size: 0.8125rem;
    }
}

.blog-sidebar-box .sidebar-blog-list__card p a {
    color: hsl(var(--black));
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 10px;
}

.blog-sidebar-box .sidebar-blog-list__card p a:hover {
    color: hsl(var(--base));
}

.blog-sidebar-box .sidebar-blog-list__card .fa-comments {
    color: hsl(var(--base));
    margin-right: 10px;
}

.blog-sidebar-box .blog-tags {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
}

.blog-sidebar-box .blog-tags li a {
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid hsl(var(--black)/0.06);
    padding: 6px 15px;
    color: hsl(var(--black));
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

@media screen and (max-width: 1199px) {
    .blog-sidebar-box .blog-tags li a {
        font-size: 0.8125rem;
    }
}

.blog-sidebar-box .blog-tags li a:hover {
    color: hsl(var(--white));
    background: hsl(var(--base));
    border-color: hsl(var(--base));
}

.help-box {
    border-radius: 0px;
    border: 1px solid hsl(var(--base)/0.06);
    background: hsl(var(--base));
    padding: 40px;
    display: grid;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    gap: 20px;
}

.help-box h3 {
    color: hsl(var(--white));
}

.help-box p {
    color: hsl(var(--white)/0.8);
}

.help-box .box-number,
.help-box .box-mail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    color: hsl(var(--white));
    font-size: 1.125rem;
    font-weight: 600;
}

@media screen and (max-width: 1199px) {
    .help-box .box-number,
.help-box .box-mail {
        font-size: 1.0625rem;
    }
}

@media screen and (max-width: 991px) {
    .help-box .box-number,
.help-box .box-mail {
        font-size: 1rem;
    }
}

@media screen and (max-width: 575px) {
    .help-box .box-number,
.help-box .box-mail {
        font-size: 0.9375rem;
    }
}

.help-box .box-number i,
.help-box .box-mail i {
    font-size: 1.75rem;
}

@media screen and (max-width: 1199px) {
    .help-box .box-number i,
.help-box .box-mail i {
        font-size: 1.813rem;
    }
}

@media screen and (max-width: 991px) {
    .help-box .box-number i,
.help-box .box-mail i {
        font-size: 1.75rem;
    }
}

@media screen and (max-width: 575px) {
    .help-box .box-number i,
.help-box .box-mail i {
        font-size: 1.688rem;
    }
}

.help-box .btn {
    display: inline-block;
    background-color: hsl(var(--white));
    color: hsl(var(--base)) !important;
    margin-top: 10px;
    font-weight: 700;
}

.blog-list__item .blog-img {
    position: relative;
}

.blog-list__item .blog-img .video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.blog-list__item .blog-content {
    margin-top: -15px;
}

.blog-list__item .blog-content .date-time {
    background: hsl(var(--base));
    display: inline-block;
    color: hsl(var(--white));
    padding: 5px 16px;
    position: relative;
    z-index: 1;
    margin-top: -25px;
    font-size: 1rem;
    font-weight: 500;
}

@media screen and (max-width: 1199px) {
    .blog-list__item .blog-content .date-time {
        font-size: 0.9375rem;
    }
}

@media screen and (max-width: 991px) {
    .blog-list__item .blog-content .date-time {
        font-size: 0.875rem;
    }
}

.blog-list__item .blog-content ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1px;
    margin: 24px 0 8px;
}

.blog-list__item .blog-content ul li {
    font-size: 1rem;
    font-weight: 600;
}

@media screen and (max-width: 1199px) {
    .blog-list__item .blog-content ul li {
        font-size: 0.9375rem;
    }
}

@media screen and (max-width: 991px) {
    .blog-list__item .blog-content ul li {
        font-size: 0.875rem;
    }
}

.blog-list__item .blog-content ul li:last-child::after {
    display: none;
}

.blog-list__item .blog-content ul li::after {
    content: "|";
    padding: 0 15px;
    color: hsl(var(--black)/0.1);
}

.blog-list__item .blog-content ul li i {
    color: hsl(var(--base));
}

.blog-list__item .blog-content h3 a {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    position: relative;
    display: inline !important;
    width: 100%;
    background-repeat: no-repeat;
    background-position-y: -2px;
    background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);
    -webkit-transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    background-size: 0 100%;
    text-transform: capitalize;
}

.blog-list__item .blog-content h3 a:hover {
    background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);
    background-size: 100% 100%;
    color: hsl(var(--base));
}

.blog-list__item .blog-content p {
    padding: 10px 0 30px;
}

.blog-list__item .btn {
    color: hsl(var(--base));
}

.tags-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 24px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-top: 1px solid hsl(var(--base)/0.06);
    border-bottom: 1px solid hsl(var(--base)/0.06);
    padding: 20px 0;
}

.tags-content .tag-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.tags-content .social {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
}

.tags-content .social a {
    font-size: 1.25rem;
    width: 40px;
    height: 40px;
    background: hsl(var(--base)/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-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    color: hsl(var(--base));
}

@media screen and (max-width: 1199px) {
    .tags-content .social a {
        font-size: 1.125rem;
    }
}

@media screen and (max-width: 991px) {
    .tags-content .social a {
        font-size: 1rem;
    }
}

.tags-content .social a:hover {
    background: hsl(var(--base));
    color: hsl(var(--white));
}

.tags-content .tags-post {
    margin-left: 10px;
}

.tags-content .tags-post a {
    color: hsl(var(--base));
    font-size: 1.125rem;
    font-weight: 500;
    padding: 0 5px;
    display: inline-block;
}

@media screen and (max-width: 1199px) {
    .tags-content .tags-post a {
        font-size: 1.0625rem;
    }
}

@media screen and (max-width: 991px) {
    .tags-content .tags-post a {
        font-size: 1rem;
    }
}

@media screen and (max-width: 575px) {
    .tags-content .tags-post a {
        font-size: 0.9375rem;
    }
}

.comments-details .comments-formate {
    margin-top: 30px;
}

.comments-details hr {
    border-color: hsl(var(--base)/0.3);
    margin: 30px 0;
}

.comments-details__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    gap: 20px;
}

.comments-details__item.reply-text {
    margin-left: 90px;
}

@media screen and (max-width: 991px) {
    .comments-details__item.reply-text {
        margin-left: 30px;
    }
}

.comments-details__item img {
    width: 70px;
    height: 70px;
    border-radius: 100px;
    -o-object-fit: cover;
    object-fit: cover;
}

.comments-details__item .date {
    font-size: 0.875rem;
    font-weight: 400;
    color: hsl(var(--secondary)/0.6);
    margin-left: 10px;
}

@media screen and (max-width: 1199px) {
    .comments-details__item .date {
        font-size: 0.8125rem;
    }
}

.comments-details__item__text p {
    padding: 10px 0;
}

.comments-details__item__text button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: hsl(var(--secondary));
    font-weight: 500;
    font-size: 1rem;
    gap: 5px;
}

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

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

.comments-details__item__text button:hover {
    color: hsl(var(--base));
}

.comments-details__item__text button i {
    font-size: 1.25rem;
}

@media screen and (max-width: 1199px) {
    .comments-details__item__text button i {
        font-size: 1.125rem;
    }
}

@media screen and (max-width: 991px) {
    .comments-details__item__text button i {
        font-size: 1rem;
    }
}

.comment-from {
    border-top: 1px solid hsl(var(--base)/0.06);
    padding-top: 30px;
}

.comment-from h4 {
    padding-bottom: 10px;
}

.comment-from .form-control {
    height: 50px;
    padding: 10px 15px;
}

.comment-from textarea.form-control {
    height: 130px;
    padding: 15px;
}

.services-details-content {
    display: grid;
    gap: 15px;
}

.services-details-content h4,
.services-details-content h3 {
    padding-top: 20px;
}

.services-details-content .skill-list {
    display: grid;
    gap: 15px;
}

.services-details-content .skill-list .percentage,
.services-details-content .skill-list .fs-18 {
    font-size: 1rem;
    color: hsl(var(--base-two));
    font-weight: 600;
}

@media screen and (max-width: 1199px) {
    .services-details-content .skill-list .percentage,
.services-details-content .skill-list .fs-18 {
        font-size: 0.9375rem;
    }
}

@media screen and (max-width: 991px) {
    .services-details-content .skill-list .percentage,
.services-details-content .skill-list .fs-18 {
        font-size: 0.875rem;
    }
}

.services-details-content .skill-list .fs-18 {
    padding-bottom: 7px;
}

/* ===========================
   Get-consultations CSS
============================= */
.get-consultations-section {
    background-color: hsl(var(--base)/0.05);
}

.colum-grid {
    -webkit-columns: 3 300px;
    -moz-columns: 3 300px;
    columns: 3 300px;
}

.colum-grid__item {
    border: 1px solid hsl(var(--base));
    margin: 20px 0;
    padding: 10px;
}

/* ===========================
   Contact CSS
============================= */
.contact-section .contact-form {
    background-color: hsl(var(--base)/0.03);
}

.contact-form {
    background: hsl(var(--white));
    padding: 40px;
}

.contact-form .input-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.contact-form .input-group i {
    position: absolute;
    right: 0;
}

.contact-form .form-select {
    background-position: right 0rem center;
}

.contact-form .form-select,
.contact-form .form-control {
    border: 0;
    border-bottom: 1px solid #D1D1D0;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 600;
    padding: 10px 0;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: unset;
}

@media screen and (max-width: 1199px) {
    .contact-form .form-select,
.contact-form .form-control {
        font-size: 0.9375rem;
    }
}

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

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

.contact-form .btn {
    margin-top: 20px;
}

.address-content {
    display: grid;
    gap: 30px;
}

.address-content .address-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 24px;
}

.address-content .address-item:hover .address-icon {
    background-color: hsl(var(--base));
    color: hsl(var(--white));
}

.address-content .address-item .address-icon {
    width: 50px;
    height: 50px;
    background-color: hsl(var(--base)/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;
    color: hsl(var(--base));
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    font-size: 1.25rem;
}

@media screen and (max-width: 1199px) {
    .address-content .address-item .address-icon {
        font-size: 1.125rem;
    }
}

@media screen and (max-width: 991px) {
    .address-content .address-item .address-icon {
        font-size: 1rem;
    }
}

.address-content .address-item .address-text {
    display: grid;
}

.address-content .address-item .address-text span {
    font-size: 1.125rem;
    font-weight: 700;
    color: hsl(var(--base));
}

@media screen and (max-width: 1199px) {
    .address-content .address-item .address-text span {
        font-size: 1.0625rem;
    }
}

@media screen and (max-width: 991px) {
    .address-content .address-item .address-text span {
        font-size: 1rem;
    }
}

@media screen and (max-width: 575px) {
    .address-content .address-item .address-text span {
        font-size: 0.9375rem;
    }
}

.address-content .address-item .address-text a {
    color: hsl(var(--base-two)/0.7);
    font-size: 1rem;
    font-weight: 500;
    -webkit-transition: all 0.4;
    transition: all 0.4;
}

@media screen and (max-width: 1199px) {
    .address-content .address-item .address-text a {
        font-size: 0.9375rem;
    }
}

@media screen and (max-width: 991px) {
    .address-content .address-item .address-text a {
        font-size: 0.875rem;
    }
}

.address-content .address-item .address-text a:hover {
    color: hsl(var(--base));
}

.google-map-content iframe {
    width: 100%;
    height: 450px;
}

/* ===========================
   Cursor-effect CSS
============================= */
.cursor,
.cursor-trail {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1000;
}

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

.cursor {
    width: 5px;
    height: 5px;
    background-color: hsl(var(--white));
}

.cursor-trail {
    width: 30px;
    height: 30px;
    background-color: hsl(var(--white)/0.3);
}

/* =================================
    Preloader Css
=================================== */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: hsl(var(--section-bg));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: grid;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    -webkit-transition: height 0.5s, opacity 0.5s, border-radius 0.5s;
    transition: height 0.5s, opacity 0.5s, border-radius 0.5s;
}

#preloader #text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 12px;
}

@media screen and (max-width: 767px) {
    #preloader #text {
        gap: 7px;
    }
}

#preloader #text p {
    color: hsl(var(--white));
    font-size: 3.625rem;
    font-weight: 800;
    margin: 0;
    opacity: 0;
    -webkit-animation: fadeIn 1.5s ease-in-out infinite;
    animation: fadeIn 1.5s ease-in-out infinite;
    font-family: var(--title-font);
}

@media screen and (max-width: 1199px) {
    #preloader #text p {
        font-size: 3.75rem;
    }
}

@media screen and (max-width: 991px) {
    #preloader #text p {
        font-size: 3.625rem;
    }
}

@media screen and (max-width: 575px) {
    #preloader #text p {
        font-size: 3.563rem;
    }
}

@media screen and (max-width: 767px) {
    #preloader #text p {
        font-size: 2.375rem;
    }
}

@media screen and (max-width: 767px) and (max-width: 1199px) {
    #preloader #text p {
        font-size: 2.438rem;
    }
}

@media screen and (max-width: 767px) and (max-width: 991px) {
    #preloader #text p {
        font-size: 2.375rem;
    }
}

@media screen and (max-width: 767px) and (max-width: 575px) {
    #preloader #text p {
        font-size: 2.313rem;
    }
}

#preloader #text p.active {
    color: hsl(var(--base));
}

#preloader #text p:nth-child(1) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

#preloader #text p:nth-child(2) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

#preloader #text p:nth-child(3) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

#preloader #text p:nth-child(4) {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

#preloader #text p:nth-child(5) {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

#preloader #text p:nth-child(6) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

#preloader #text p:nth-child(7) {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

#preloader #text p:nth-child(8) {
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
}

#preloader #text p:nth-child(9) {
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
}

#preloader #text p:nth-child(10) {
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
/* =================================
    Scroll back to top Css
=================================== */
.progress-wrap {
    position: fixed;
    right: 50px;
    bottom: 50px;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    border-radius: 100px;
    -webkit-box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
    background: none;
}

@media screen and (max-width: 991px) {
    .progress-wrap {
        right: 10px;
        bottom: 20px;
        height: 35px;
        width: 35px;
    }
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.progress-wrap:hover::after {
    opacity: 0;
}

.progress-wrap:hover::before {
    opacity: 1;
}

.progress-wrap::before, .progress-wrap::after {
    position: absolute;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f062";
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    color: hsl(var(--base));
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: block;
    z-index: 2;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
    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;
}

.progress-wrap svg path {
    fill: none;
}

.progress-wrap svg.progress-circle path {
    stroke: hsl(var(--base));
    stroke-width: 5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.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));
    font-weight: 600;
    padding: 16px 30px;
    border-radius: 0px;
    position: relative;
    z-index: 1;
    border: 1px solid transparent;
    font-family: var(--body-font);
    display: inline-block !important;
    font-size: 1rem;
    line-height: 1;
    position: relative;
    overflow: hidden;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

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

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

.btn::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: hsl(var(--secondary));
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    z-index: -1;
}

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

@media screen and (max-width: 767px) and (max-width: 1199px) {
    .btn {
        font-size: 0.8125rem;
    }
}

@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:hover::before, .btn:focus::before, .btn:focus-visible::before {
    width: 100%;
    left: 0;
    right: auto;
}

.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;
}

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

.btn--border {
    border: 1px solid hsl(var(--base));
}

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

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

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

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

.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;
}

/* ============================
    navbar css
=============================== */
.navbar-one {
    width: 100%;
    height: auto;
    z-index: 111;
    padding: 20px 0;
    position: fixed;
    top: 0;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.navbar-one.navbar-shrink {
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    background: hsl(var(--section-bg));
    padding: 8px 0;
}

@media screen and (max-width: 991px) {
    .navbar-one .logo-img {
        height: 40px;
    }
}

.navbar-one .right-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 20px;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

@media screen and (max-width: 1199px) {
    .navbar-one .right-nav {
        gap: 10px;
    }
}

@media screen and (max-width: 991px) {
    .navbar-one .right-nav {
        padding: 0 10px 15px;
        gap: 20px;
    }
}

.navbar-one .right-nav .btn--border {
    padding: 15px 20px;
}

@media screen and (max-width: 424px) {
    .navbar-one .right-nav .btn--border {
        display: none !important;
    }
}

.navbar-two {
    width: 100%;
    height: auto;
    z-index: 111;
    padding: 0 0;
    position: fixed;
    top: 0;
    border-bottom: 1px solid hsl(var(--white)/0.2);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

@media screen and (max-width: 575px) {
    .navbar-two {
        padding: 10px 0;
    }
}

.navbar-two.navbar-shrink {
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    background: hsl(var(--section-bg));
}

.navbar-two .container {
    max-width: 1650px;
}

.navbar-two .navbar-brand {
    position: relative;
}

.navbar-two .navbar-brand::after {
    content: "";
    position: absolute;
    right: -17px;
    top: -15px;
    width: 1px;
    height: 170%;
    background-color: hsl(var(--white)/0.2);
}

@media screen and (max-width: 991px) {
    .navbar-two .navbar-brand::after {
        height: 150%;
    }
}

@media screen and (max-width: 991px) {
    .navbar-two .logo-img {
        height: 40px;
    }
}

.navbar-two .right-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 20px;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

@media screen and (max-width: 1199px) {
    .navbar-two .right-nav {
        gap: 10px;
    }
}

@media screen and (max-width: 991px) {
    .navbar-two .right-nav {
        gap: 20px;
    }
}

.navbar-two .right-nav .search-nav {
    position: relative;
    padding: 23px 30px;
    border-right: 1px solid hsl(var(--white)/0.2);
    border-left: 1px solid hsl(var(--white)/0.2);
}

.navbar-two .right-nav .search-nav i {
    color: hsl(var(--white));
}

@media screen and (max-width: 575px) {
    .navbar-two .right-nav .search-nav {
        display: none;
    }
}

.navbar-two .right-nav .btn--border {
    padding: 15px 20px;
}

@media screen and (max-width: 424px) {
    .navbar-two .right-nav .btn--border {
        display: none !important;
    }
}

.navbar-toggler {
    background: hsl(var(--base));
    color: hsl(var(--white));
    opacity: 1;
    padding: 5px 10px;
    border-radius: 0;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar-toggler svg {
    width: 35px;
    height: 35px;
}

.navbar-nav {
    gap: 1.5rem;
    position: relative;
}

@media screen and (max-width: 1199px) {
    .navbar-nav {
        gap: 0.9375rem;
    }
}

@media screen and (max-width: 991px) {
    .navbar-nav {
        gap: 0rem;
    }
}

.navbar-nav .nav-item .nav-link {
    color: hsl(var(--white)/0.85);
    font-size: 1rem;
    font-weight: 500;
    padding: 1.5625rem 0.3125rem;
    text-transform: capitalize;
    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) {
    .navbar-nav .nav-item .nav-link {
        font-size: 0.9375rem;
    }
}

@media screen and (max-width: 991px) {
    .navbar-nav .nav-item .nav-link {
        font-size: 0.875rem;
    }
}

@media screen and (max-width: 1199px) {
    .navbar-nav .nav-item .nav-link {
        font-size: 0.9375rem;
        padding-left: 0.3125rem;
        padding-right: 0.3125rem;
    }
}

@media screen and (max-width: 1199px) and (max-width: 1199px) {
    .navbar-nav .nav-item .nav-link {
        font-size: 0.875rem;
    }
}

@media screen and (max-width: 991px) {
    .navbar-nav .nav-item .nav-link {
        padding: 0.625rem;
        color: hsl(var(--white));
        font-size: 0.9375rem;
    }
}

@media screen and (max-width: 991px) and (max-width: 1199px) {
    .navbar-nav .nav-item .nav-link {
        font-size: 0.875rem;
    }
}

.navbar-nav .nav-item .nav-link.active, .navbar-nav .nav-item .nav-link:hover {
    color: hsl(var(--white));
    font-weight: 700;
}

.navbar-nav .nav-item .nav-link.active span::before, .navbar-nav .nav-item .nav-link:hover span::before {
    width: 100%;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.navbar-nav .nav-item .dropdown-toggle::after {
    content: "\f107";
    font-weight: 900;
    font-family: "Font Awesome 6 free";
    border: 0;
}

@media screen and (max-width: 991px) {
    .navbar-nav .nav-item .dropdown-toggle::after {
        margin-left: auto;
    }
}

@media (max-width: 991.98px) {
    .navbar-nav .nav-item.dropdown .nav-link {
        position: relative;
        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;
    }

    .navbar-nav .nav-item.dropdown .nav-link::after {
        content: "\f107";
        font-weight: 900;
        font-family: "Font Awesome 6 free";
        margin-left: auto;
    }
}

.navbar-nav .nav-item .dropdown-menu {
    -webkit-transition: 0.5s;
    transition: 0.5s;
    margin-top: 0;
    padding: 5px 10px;
    min-width: 220px;
    border: 1px solid hsl(var(--border-color));
    border-radius: 0;
    gap: 5px;
}

@media all and (min-width: 991.98px) {
    .navbar-nav .nav-item .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
    }

    .navbar-nav .nav-item .dropdown-menu.fade-down {
        top: 80%;
        -webkit-transform: rotateX(-75deg);
        transform: rotateX(-75deg);
        -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
    }

    .navbar-nav .nav-item .dropdown-menu.fade-up {
        top: 100%;
    }
}

.navbar-nav .nav-item .dropdown-menu a {
    margin: 5px 0;
    background: none;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    position: relative;
    font-weight: 500;
    font-size: 0.875rem;
    border: 0;
    color: hsl(var(--gray3));
    padding: 8px 15px;
    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;
    font-weight: 600;
}

.navbar-nav .nav-item .dropdown-menu a::after {
    content: "\f061";
    font-weight: 900;
    font-family: "Font Awesome 6 free";
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 0;
}

.navbar-nav .nav-item .dropdown-menu a.active, .navbar-nav .nav-item .dropdown-menu a:hover {
    color: hsl(var(--white));
    background: hsl(var(--base));
}

.navbar-nav .nav-item .dropdown-menu a.active::before, .navbar-nav .nav-item .dropdown-menu a:hover::before {
    opacity: 1;
    width: 10px;
}

.navbar-nav .nav-item .dropdown-menu a.active::after, .navbar-nav .nav-item .dropdown-menu a:hover::after {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
}

.navbar-nav .nav-item:hover .nav-link {
    color: hsl(var(--primary));
}

.navbar-nav .nav-item:hover .dropdown-menu {
    -webkit-transition: 0.5s;
    transition: 0.5s;
    opacity: 1;
}

@media all and (min-width: 991.98px) {
    .navbar-nav .nav-item:hover .dropdown-menu {
        visibility: visible;
        top: 100%;
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }
}

/* ============================
    footer css
=============================== */
.footer-action {
    border-bottom: 1.5px solid hsl(var(--border-color)/0.1);
    padding: 50px 0;
}

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

.footer-action__item .call-email {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 15px;
    border-left: 1.5px solid hsl(var(--border-color)/0.1);
    padding-left: 30px;
    margin-left: 30px;
}

@media screen and (max-width: 424px) {
    .footer-action__item .call-email {
        display: none;
    }
}

.footer-action__item .call-email .icon i {
    font-size: 2.375rem;
}

@media screen and (max-width: 1199px) {
    .footer-action__item .call-email .icon i {
        font-size: 2.438rem;
    }
}

@media screen and (max-width: 991px) {
    .footer-action__item .call-email .icon i {
        font-size: 2.375rem;
    }
}

@media screen and (max-width: 575px) {
    .footer-action__item .call-email .icon i {
        font-size: 2.313rem;
    }
}

.footer-action__item .call-email .text {
    display: grid;
}

.footer-action__item .call-email .text a {
    color: hsl(var(--white));
    font-size: 1rem;
    font-weight: 500;
}

@media screen and (max-width: 1199px) {
    .footer-action__item .call-email .text a {
        font-size: 0.9375rem;
    }
}

@media screen and (max-width: 991px) {
    .footer-action__item .call-email .text a {
        font-size: 0.875rem;
    }
}

.footer-action__item .call-email .text a:hover {
    color: hsl(var(--base));
}

.footer-action__form form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid hsl(var(--border-color));
}

.footer-action__form form input {
    width: 100%;
    height: 55px;
    background: hsl(var(--white));
    border: 0;
    border-radius: 0;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 0 20px;
}

.footer-action__form form button {
    background: hsl(var(--base));
    min-width: 55px;
    height: 55px;
    color: hsl(var(--white));
}

.footer-widget {
    padding: 80px 0;
}

.footer-widget hr {
    border-color: hsl(var(--border-color)/0.4);
}

.footer-widget__item h4 {
    padding-bottom: 30px;
    color: hsl(var(--white));
}

.footer-widget__item h6 {
    padding-bottom: 8px;
    color: hsl(var(--white)/0.9);
}

.footer-widget__item p {
    color: hsl(var(--white)/0.8);
    line-height: 1.7;
}

.footer-widget__item p a {
    color: hsl(var(--white)/0.8);
}

.footer-widget__item p a:hover {
    color: hsl(var(--base));
}

.footer-widget__item .social {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
}

.footer-widget__item .social a {
    font-size: 1.25rem;
    width: 45px;
    height: 45px;
    background: hsl(var(--base)/0.3);
    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: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

@media screen and (max-width: 1199px) {
    .footer-widget__item .social a {
        font-size: 1.125rem;
    }
}

@media screen and (max-width: 991px) {
    .footer-widget__item .social a {
        font-size: 1rem;
    }
}

.footer-widget__item .social a:hover {
    background: hsl(var(--base));
    color: hsl(var(--white));
}

.footer-widget__item .useful-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.footer-widget__item .useful-list a {
    font-size: 1rem;
    font-weight: 500;
    color: hsl(var(--white)/0.8);
    width: 100%;
}

@media screen and (max-width: 1199px) {
    .footer-widget__item .useful-list a {
        font-size: 0.9375rem;
    }
}

@media screen and (max-width: 991px) {
    .footer-widget__item .useful-list a {
        font-size: 0.875rem;
    }
}

.footer-widget__item .useful-list a:hover {
    color: hsl(var(--base));
}

.footer-widget__item .widget-post__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px;
}

.footer-widget__item .widget-post__item:hover .img img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.footer-widget__item .widget-post__item .img {
    min-width: 85px;
    overflow: hidden;
}

.footer-widget__item .widget-post__item .img img {
    width: 100%;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}

.footer-widget__item .widget-post__item .text h6 {
    color: hsl(var(--white)/0.8);
    font-weight: 500;
    font-size: 1rem;
    padding-bottom: 0;
    line-height: 1.6;
}

@media screen and (max-width: 1199px) {
    .footer-widget__item .widget-post__item .text h6 {
        font-size: 0.9375rem;
    }
}

@media screen and (max-width: 991px) {
    .footer-widget__item .widget-post__item .text h6 {
        font-size: 0.875rem;
    }
}

.footer-widget__item .widget-post__item .text p {
    padding-bottom: 5px;
    font-size: 0.875rem;
    color: hsl(var(--white)/0.6);
}

@media screen and (max-width: 1199px) {
    .footer-widget__item .widget-post__item .text p {
        font-size: 0.8125rem;
    }
}

.copy-right {
    border-top: 1.5px solid hsl(var(--border-color)/0.1);
    padding: 20px 0;
}

.copy-right__content {
    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;
}

@media screen and (max-width: 767px) {
    .copy-right__content {
        display: grid;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        gap: 10px;
    }
}

.copy-right__text {
    color: hsl(var(--white)/0.8);
    font-size: 1rem;
}

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

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

@media screen and (max-width: 767px) {
    .copy-right__text {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        text-align: center;
    }
}

.copy-right__text a {
    color: hsl(var(--white));
    font-weight: 600;
}

.copy-right__url {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 24px;
}

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

.copy-right__url a {
    color: hsl(var(--white)/0.8);
    font-size: 1rem;
}

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

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

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

/* ============================
    breadcrumb css
=============================== */
.breadcrumb {
    padding: 215px 0 130px;
    background: hsl(var(--white)/0.02);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    background-image: url("../images/banner/breadcrumb-bg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.breadcrumb::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: hsl(var(--base-two)/0.5);
}

@media screen and (max-width: 991px) {
    .breadcrumb {
        padding: 100px 0 60px;
    }
}

.breadcrumb .banner-shape {
    position: absolute;
    top: 58%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: -1;
    opacity: 0.3;
}

.breadcrumb__wrapper {
    text-align: center;
    position: relative;
}

.breadcrumb__web {
    text-align: center;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #D1D1D0;
    -webkit-text-fill-color: transparent;
    font-size: 5.4375rem;
    font-style: normal;
    font-weight: 900;
    line-height: 36px;
    text-transform: capitalize;
    opacity: 0.2;
}

@media screen and (max-width: 991px) {
    .breadcrumb__web {
        font-size: 3.75rem;
    }
}

.breadcrumb__title {
    color: hsl(var(--white));
    margin-top: -30px;
    position: relative;
}

@media screen and (max-width: 991px) {
    .breadcrumb__title {
        font-size: 40px;
    }
}

.breadcrumb__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    -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;
}

.breadcrumb__item {
    font-size: 1.25rem;
    text-transform: capitalize;
    color: hsl(var(--white));
}

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

@media screen and (max-width: 991px) {
    .breadcrumb__item {
        font-size: 1rem;
    }
}

.breadcrumb__item a {
    color: hsl(var(--white));
}

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

/* ============================
    contact css
=============================== */
/*# sourceMappingURL=main.css.map */