/*===========================
Project Name: Servic - On Demand & Service Sale Multipurpose Website Template.
Author: Egens Lab --> (https://www.egenslab.com/)
Support: https://www.account.egenslab.com/
Developer: Rafiur Rahim Ridom --> hello@egenslab.com
Version: 1.0
01. COMMON Css
02. Mixins Css
03. Header Css
04. Topbar Css
05. Home1 Banner Section Css
06. Home1 Service Section Css
07. Home1 Offer Banner Section Css
08. Home1 Trending Service Section Css
09. Home1 Process Section Css
10. Home1 Choose Us Section Css
11. Home1 Counter Section Css
12. Home1 Testimonial Section Css
13. Home1 Contact Section Css
14. Home1 Footer Section Css
15. Home2 Service Section Css
16. Home2 Offer Section Css
17. Home2 Popular Section Css
18. Home2 Trending Section Css
19. Home2 Feature Section Css
20. Home2 Process Section Css
21. Home2 Testimonial Section Css
22. Home2 Blog Section Css
23. Home3 Banner Section Css
24. Home3 About Section Css
25. Home3 Counter Section Css
26. Home3 Service Section Css
27. Home3 Choose Us Section Css
28. Home3 Feature Section Css
29. Home3 Testimonial Section Css
30. Home3 Faq Section Css
31. Home3 Contact Section Css
32. Home3 Blog Section Css
33. Home4 Banner Section Css
34. Home4 About Section Css
35. Home4 Service Section Css
36. Home4 Feature Section Css
37. Home4 Subscribe Section Css
38. Home4 Testimonial Section Css
39. Home4 Blog Section Css
40. Home5 Banner Section Css
41. Home5 Service Section Css
42. Home5 About Section Css
43. Home5 Process Section Css
44. Home5 Feature Section Css
45. Home5 Testimonial Section Css
46. Home5 Blog Section Css
47. Home5 Contact Section Css
48. Inner-page Breadcrumb Section Css
49. Inner-page Blog Sidebar Section Css
50. Inner-page Blog Standard Section Css
51. Inner-page Error Section Css
52. Inner-page Project Section Css
53. Inner-page Service Section Css
54. Inner-page Service Details Section Css
55. Inner-page Blog Details Section Css
56. Home3 Service Process Section Css
57. Inner-page Checkout Section Css
58. Inner-page Terms & Condition Section Css
59. Inner-page Support Policy Section Css
60. Dashboard Section Css
61. login Page Section Css
62. Register Section Css

/*==========================
  01.COMMON CSS 
===========================*/

@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap");
* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

:root {
    --font-Almarai: 'Almarai', sans-serif;
    --font-Hanken-Grotesk: 'Hanken-Grotesk', sans-serif;
    --white-color: #fff;
    --white-color-opc: 255, 255, 255;
    --black-color: #2E2F10;
    --black-color-opc: 17, 15, 15;
    --title-color: #020202;
    --title-color-opc: 17, 15, 15;
    --text-color: #23291FCC;
    --dark-text-color: #2E2F10;
    --primary-color1: #0D6EFD;
    --primary-color1-opc: 255, 206, 10;
    --primary-color3: #00DA96;
    --primary-color3-opc: 0, 218, 150;
    --primary-color4: #FF7C28;
    --primary-color4-opc: 255, 124, 40;
    --primary-color5: #006B5B;
    --primary-color5--opc: 0, 107, 91;
    --secondary-color: #202545;
    --secondary-color-opc: 32, 37, 69;
    --borders-color: #D9D9D9;
}

/*================================================
02. Mixins Css
=================================================*/

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
}

body.home3-datepicker .daterangepicker td.in-range {
    background-color: unset;
}

body.home3-datepicker .daterangepicker .monthselect,
body.home3-datepicker .daterangepicker .btn-primary {
    background-color: var(--primary-color3);
    border-color: var(--primary-color3);
}

body.home3-datepicker .daterangepicker.single td.active,
body.home3-datepicker .daterangepicker.single td.active:hover {
    background-color: var(--primary-color3);
    color: var(--white-color);
}

body.home3-datepicker .daterangepicker.single .monthselect,
body.home3-datepicker .daterangepicker.single .btn-primary {
    background-color: var(--primary-color3);
    border-color: var(--primary-color3);
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
}

body.home3-datepicker .progress-wrap svg.progress-circle {
    stroke: var(--primary-color3);
}

body.home3-datepicker .progress-wrap svg.arrow {
    fill: var(--primary-color3);
}

body.home3-datepicker .progress-wrap:hover {
    background-color: var(--primary-color3);
}

body.home3-datepicker .progress-wrap:hover svg.progress-circle {
    stroke: var(--white-color);
}

body.home3-datepicker .progress-wrap:hover svg.arrow {
    fill: var(--black-color);
}

body.home4-datepicker .daterangepicker td.in-range {
    background-color: rgba(var(--primary-color4-opc), 0.1);
}

body.home4-datepicker .daterangepicker .monthselect,
body.home4-datepicker .daterangepicker .btn-primary {
    background-color: var(--primary-color4);
    border-color: var(--primary-color4);
}

body.home4-datepicker .daterangepicker.single td.active,
body.home4-datepicker .daterangepicker.single td.active:hover {
    background-color: var(--primary-color4);
    color: var(--white-color);
}

body.home4-datepicker .daterangepicker.single .monthselect,
body.home4-datepicker .daterangepicker.single .btn-primary {
    background-color: var(--primary-color4);
    border-color: var(--primary-color4);
    color: var(--white-color);
    font-family: var(--font-Hanken-Grotesk);
}

body.home4-datepicker .progress-wrap svg.progress-circle {
    stroke: var(--primary-color4);
}

body.home4-datepicker .progress-wrap svg.arrow {
    fill: var(--primary-color4);
}

body.home4-datepicker .progress-wrap:hover {
    background-color: var(--primary-color4);
}

body.home4-datepicker .progress-wrap:hover svg.progress-circle {
    stroke: var(--white-color);
}

body.home4-datepicker .progress-wrap:hover svg.arrow {
    fill: var(--white-color);
}

body.mechanic .progress-wrap svg.progress-circle {
    stroke: var(--primary-color5);
}

body.mechanic .progress-wrap svg.arrow {
    fill: var(--primary-color5);
}

body.mechanic .progress-wrap:hover {
    background-color: var(--primary-color5);
}

body.mechanic .progress-wrap:hover svg.progress-circle {
    stroke: var(--white-color);
}

body.mechanic .progress-wrap:hover svg.arrow {
    fill: var(--white-color);
}

body.service-details-datapicker .daterangepicker td.in-range {
    background-color: unset;
}

body.service-details-datapicker .daterangepicker .monthselect,
body.service-details-datapicker .daterangepicker .btn-primary {
    background-color: var(--primary-color3);
    border-color: var(--primary-color3);
}

body.service-details-datapicker .daterangepicker.single td.active,
body.service-details-datapicker .daterangepicker.single td.active:hover {
    background-color: var(--primary-color3);
    color: var(--white-color);
}

body.service-details-datapicker .daterangepicker.single .monthselect,
body.service-details-datapicker .daterangepicker.single .btn-primary {
    background-color: var(--primary-color3);
    border-color: var(--primary-color3);
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-Almarai);
    font-weight: 600;
    line-height: 1.4;
    color: var(--title-color);
}

input {
    border: none;
    outline: none;
}

button {
    outline: none;
    border: none;
}

i.bx {
    vertical-align: middle;
}

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

a {
    text-decoration: none;
}

p {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    margin-bottom: 0;
}

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

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

@media (max-width: 991px) {
    .pb-130 {
        padding-bottom: 90px;
    }
}

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

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

@media (max-width: 991px) {
    .pt-130 {
        padding-top: 90px;
    }
}

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

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

@media (max-width: 991px) {
    .pt-120 {
        padding-top: 90px;
    }
}

@media (max-width: 767px) {
    .pt-120 {
        padding-top: 70px;
    }
}

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

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

@media (max-width: 991px) {
    .pb-120 {
        padding-bottom: 90px;
    }
}

@media (max-width: 767px) {
    .pb-120 {
        padding-bottom: 70px;
    }
}

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

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

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

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

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

@media (max-width: 991px) {
    .pt-90 {
        padding-top: 80px;
    }
}

@media (max-width: 767px) {
    .pt-90 {
        padding-top: 70px;
    }
}

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

@media (max-width: 991px) {
    .pb-90 {
        padding-bottom: 80px;
    }
}

@media (max-width: 767px) {
    .pb-90 {
        padding-bottom: 70px;
    }
}

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

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

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

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

@media (min-width: 992px) and (max-width: 1199px) {
    .mt-110 {
        margin-top: 90px;
    }
}

@media (max-width: 991px) {
    .mt-110 {
        margin-top: 80px;
    }
}

.mb-110 {
    margin-bottom: 110px;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .mb-110 {
        margin-bottom: 90px;
    }
}

@media (max-width: 991px) {
    .mb-110 {
        margin-bottom: 80px;
    }
}

@media (max-width: 767px) {
    .mb-110 {
        margin-bottom: 60px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .mb-110 {
        margin-bottom: 60px;
    }
}

@media (max-width: 576px) {
    .mb-110 {
        margin-bottom: 35px;
    }
}

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

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

@media (max-width: 991px) {
    .mb-120 {
        margin-bottom: 90px;
    }
}

@media (max-width: 767px) {
    .mb-120 {
        margin-bottom: 70px;
    }
}

.mb-130 {
    margin-bottom: 130px;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .mb-130 {
        margin-bottom: 100px;
    }
}

@media (max-width: 991px) {
    .mb-130 {
        margin-bottom: 90px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .mb-130 {
        margin-bottom: 80px;
    }
}

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

.mb-100 {
    margin-bottom: 100px;
}

@media (max-width: 991px) {
    .mb-100 {
        margin-bottom: 80px;
    }
}

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

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

@media (max-width: 991px) {
    .mt-100 {
        margin-top: 80px;
    }
}

.mb-90 {
    margin-bottom: 90px;
}

@media (max-width: 991px) {
    .mb-90 {
        margin-bottom: 70px;
    }
}

@media (max-width: 767px) {
    .mb-90 {
        margin-bottom: 50px;
    }
}

.mb-80 {
    margin-bottom: 80px;
}

@media (max-width: 1399px) {
    .mb-80 {
        margin-bottom: 70px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .mb-80 {
        margin-bottom: 55px;
    }
}

@media (max-width: 991px) {
    .mb-80 {
        margin-bottom: 70px;
    }
}

@media (max-width: 767px) {
    .mb-80 {
        margin-bottom: 50px;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    .mb-80 {
        margin-bottom: 60px;
    }
}

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

.mb-15 {
    margin-bottom: 15px;
}

.mb-10 {
    margin-bottom: 10px;
}

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

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

@media (min-width: 992px) and (max-width: 1199px) {
    .pt-50 {
        padding-top: 40px;
    }
}

@media (max-width: 991px) {
    .pt-50 {
        padding-top: 30px;
    }
}

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

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

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

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

.pe-80 {
    padding-right: 80px;
}

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

.pl-110 {
    padding-left: 110px;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .pl-110 {
        padding-left: 70px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .pl-110 {
        padding-left: 40px;
    }
}

@media (max-width: 1199px) {
    .pl-110 {
        padding-left: unset;
    }
}

.mb-65 {
    margin-bottom: 65px;
}

@media (max-width: 1199px) {
    .mb-65 {
        margin-bottom: 55px;
    }
}

@media (max-width: 767px) {
    .mb-65 {
        margin-bottom: 34px;
    }
}

@media (max-width: 576px) {
    .mb-65 {
        margin-bottom: 25px;
    }
}

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

@media (min-width: 1400px) and (max-width: 1599px) {
    .mb-60 {
        margin-bottom: 55px;
    }
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .mb-60 {
        margin-bottom: 55px;
    }
}

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

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

.mb-70 {
    margin-bottom: 70px;
}

@media (max-width: 991px) {
    .mb-70 {
        margin-bottom: 60px;
    }
}

@media (max-width: 767px) {
    .mb-70 {
        margin-bottom: 40px;
    }
}

.mb-50 {
    margin-bottom: 50px;
}

.mb-45 {
    margin-bottom: 45px;
}

.mb-35 {
    margin-bottom: 35px;
}

.mb-20 {
    margin-bottom: 20px;
}

@media (max-width: 576px) {
    .mb-20 {
        margin-bottom: 10px;
    }
}

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

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

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

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

.mb-40 {
    margin-bottom: 40px;
}

@media (max-width: 1199px) {
    .mb-40 {
        margin-bottom: 30px;
    }
}

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

.mb-25 {
    margin-bottom: 25px;
}

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

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

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

@media (max-width: 576px) {
    .mt-30 {
        margin-top: 20px;
    }
}

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

.mb-50 {
    margin-bottom: 50px;
}

@media (max-width: 991px) {
    .mb-50 {
        margin-bottom: 35px;
    }
}

@media (max-width: 767px) {
    .mb-50 {
        margin-bottom: 20px;
    }
}

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

@media (min-width: 768px) and (max-width: 991px) {
    .mt-60 {
        margin-top: 35px;
    }
}

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

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

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

@media (max-width: 1199px) {
    .mt-65 {
        margin-top: 55px;
    }
}

@media (max-width: 767px) {
    .mt-65 {
        margin-top: 45px;
    }
}

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

@media (max-width: 991px) {
    .mt-70 {
        margin-top: 40px;
    }
}

.progress-wrap {
    position: fixed;
    right: 15px;
    bottom: 25px;
    height: 45px;
    width: 45px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--borders-color);
    background-color: transparent;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 200ms linear;
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.progress-wrap svg {
    fill: none;
    transition: 0.5s;
}

.progress-wrap svg.progress-circle {
    stroke: #0D6EFD;
    stroke-width: 4;
    box-sizing: border-box;
    transition: all 200ms linear;
}

.progress-wrap .arrow {
    fill: #0D6EFD;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
}

.progress-wrap:hover {
    background-color:#0D6EFD;
    cursor: pointer;
}

.progress-wrap:hover .arrow {
    fill: var(--black-color);
}

.primary-btn1 {
    font-family: var(--font-Hanken-Grotesk);
    background-color: var(--black-color);
    color: var(--white-color);
    border-radius: 5px;
    font-weight: 600;
    font-size: 16px;
    text-transform: capitalize;
    line-height: 1;
    padding: 15px 27px;
    position: relative;
    align-items: center;
    display: inline-flex;
    gap: 8px;
    transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    overflow: hidden;
    z-index: 1;
    white-space: nowrap;
}

@media (max-width: 1199px) {
    .primary-btn1 {
        padding: 17px 27px;
    }
}

@media (max-width: 576px) {
    .primary-btn1 {
        padding: 16px 25px;
        font-size: 15px;
    }
}

.primary-btn1>span {
    transition: opacity 0.3s, transform 0.3s;
    transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    background-color: transparent;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.primary-btn1>span:nth-child(2) {
    position: absolute;
    top: 50%;
    left: 0;
    opacity: 0;
    transform: translate(0, 100%);
    transition: opacity 0.3s, transform 0.3s;
    transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    white-space: nowrap;
}

.primary-btn1>span svg {
    fill: var(--white-color);
    transition: 0.5s;
}

.primary-btn1::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(110%);
    background-color:#0D6EFD;
    overflow: hidden;
    transition: opacity 0.5s, transform 0.5s;
    z-index: -1;
}

.primary-btn1:hover {
    color: #ffffff;
}

.primary-btn1:hover .arrow {
    fill: rgba(255, 255, 255, 0.15);
}

.primary-btn1:hover>span {
    transform: translateY(-150%);
    opacity: 0;
}

.primary-btn1:hover>span:nth-child(2) {
    opacity: 1;
    transform: translate(0%, -50%);
}

.primary-btn1:hover::after {
    transform: translate(0);
    border-radius: 0;
}

.primary-btn1.white-bg {
    background-color: var(--white-color);
    color: var(--title-color);
}

.primary-btn1.white-bg::after {
    background-color: var(--primary-color1);
}

.primary-btn1.white-bg:hover {
    color: var(--white-color);
}

.primary-btn1.black-bg {
    background-color: var(--black-color);
    color: var(--white-color);
}

.primary-btn1.black-bg::after {
    background-color: var(--primary-color1);
}

.primary-btn1.black-bg:hover {
    color: var(--white-color);
}

.primary-btn1.transparent {
    background-color: transparent;
    border: 1px solid var(--borders-color);
    color: var(--title-color);
    padding: 16px 17px;
}

.primary-btn1.transparent::after {
    background-color: var(--primary-color1);
}

.primary-btn1.transparent span svg {
    fill: var(--title-color);
}

.primary-btn1.transparent:hover {
    color: var(--white-color);
    border-color: var(--primary-color1);
}

.primary-btn1.transparent:hover span svg {
    fill: var(--white-color);
}

.login-btn {
    font-family: var(--font-Hanken-Grotesk);
    background-color: var(--black-color);
    color: var(--white-color);
    border-radius: 5px;
    font-weight: 600;
    font-size: 16px;
    text-transform: capitalize;
    line-height: 1;
    padding: 15px 27px;
    position: relative;
    align-items: center;
    display: inline-flex;
    gap: 8px;
    transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    overflow: hidden;
    z-index: 1;
    white-space: nowrap;
}

@media (max-width: 1199px) {
    .login-btn {
        padding: 17px 27px;
    }
}

@media (max-width: 576px) {
    .login-btn {
        padding: 16px 25px;
        font-size: 15px;
    }
}

.login-btn>span {
    transition: opacity 0.3s, transform 0.3s;
    transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    background-color: transparent;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.login-btn>span:nth-child(2) {
    position: absolute;
    top: 50%;
    left: 0;
    opacity: 0;
    transform: translate(0, 100%);
    transition: opacity 0.3s, transform 0.3s;
    transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    white-space: nowrap;
}

.login-btn>span svg {
    fill: var(--white-color);
    transition: 0.5s;
}

.login-btn::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(110%);
    background-color: var(--primary-color1);
    overflow: hidden;
    transition: opacity 0.5s, transform 0.5s;
    z-index: -1;
}

.login-btn:hover {
    color: var(--title-color);
}

.login-btn:hover .arrow {
    fill: rgba(255, 255, 255, 0.15);
}

.login-btn:hover>span {
    transform: translateY(-150%);
    opacity: 0;
}

.login-btn:hover>span:nth-child(2) {
    opacity: 1;
    transform: translate(0%, -50%);
}

.login-btn:hover::after {
    transform: translate(0);
    border-radius: 0;
}

.login-btn.white-bg {
    background-color: var(--white-color);
    color: var(--title-color);
}

.login-btn.white-bg::after {
    background-color: var(--primary-color1);
}

.login-btn.white-bg:hover {
    color: var(--white-color);
}

.login-btn.black-bg {
    background-color: var(--black-color);
    color: var(--white-color);
}

.login-btn.black-bg::after {
    background-color: var(--primary-color1);
}

.login-btn.black-bg:hover {
    color: var(--white-color);
}

.login-btn.transparent {
    background-color: transparent;
    border: 1px solid var(--borders-color);
    color: var(--title-color);
    padding: 16px 17px;
}

.login-btn.transparent::after {
    background-color: var(--primary-color1);
}

.login-btn.transparent span svg {
    fill: var(--title-color);
}

.login-btn.transparent:hover {
    color: var(--white-color);
    border-color: var(--primary-color1);
}

.login-btn.transparent:hover span svg {
    fill: var(--white-color);
}

.select {
    margin-bottom: 25px;
}

.nice-select {
    background: var(--white-color);
    border-radius: 5px;
    border: solid 1px rgba(var(--title-color-opc), 0.1);
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    float: left;
    font-family: inherit;
    font-size: 14px;
    font-weight: normal;
    height: 44px;
    line-height: 1;
    outline: none;
    padding: 10px 24px;
    position: relative;
    text-align: left !important;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    white-space: nowrap;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 991px) {
    .nice-select {
        height: 40px;
        padding: 10px 20px;
    }
}

@media (max-width: 576px) {
    .nice-select {
        padding: 10px 21px;
    }
}

.nice-select span {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--title-color-opc), 0.6);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
}

@media (max-width: 767px) {
    .nice-select span {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .nice-select span {
        font-size: 15px;
    }
}

.nice-select svg {
    fill: var(--text-color);
}

.nice-select:active,
.nice-select.open,
.nice-select:focus {
    border-color: var(--title-color);
    background: var(--white-color);
}

.nice-select::after {
    border-bottom: 2px solid #999;
    border-right: 2px solid #999;
    position: absolute;
    content: url(../img/inner-pages/svg/arrow-svg.svg);
    display: block;
    height: 5px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 25px;
    top: 50%;
    transform-origin: 66% 66%;
    transform: rotate(45deg);
    transition: all 0.15s ease-in-out;
    width: 5px;
    display: none;
}

.nice-select.open::before {
    transform: rotate(-180deg);
}

.nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}

.nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none;
}

.nice-select.disabled:after {
    border-color: #cccccc;
}

.nice-select.wide {
    width: 100%;
}

.nice-select.wide .list {
    left: 0 !important;
    right: 0 !important;
}

.nice-select.right {
    float: right;
}

.nice-select.right .list {
    left: auto;
    right: 0;
}

.nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px;
}

.nice-select.small:after {
    height: 4px;
    width: 4px;
}

.nice-select.small .option {
    line-height: 34px;
    min-height: 34px;
}

.nice-select .list {
    width: 100%;
    background: var(--white-color);
    margin-top: 0;
    border-radius: 0 0 5px 5px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    transform-origin: 50% 0;
    transform: scale(0.75) translateY(-21px);
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9;
}

.nice-select .list .option {
    color: var(--text-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 16px;
    font-weight: 500;
    border-bottom: 1px solid var(--borders-color);
    cursor: pointer;
    font-weight: 400;
    line-height: 40px;
    list-style: none;
    min-height: 40px;
    outline: none;
    padding-left: 18px;
    padding-right: 29px;
    text-align: left;
    transition: all 0.2s;
}

@media (max-width: 767px) {
    .nice-select .list .option {
        font-size: 14px;
    }
}

.nice-select .list .option:hover,
.nice-select .list .option.focus,
.nice-select .list .option.selected.focus {
    background-color: #f6f6f6;
}

.nice-select .list .option.disabled {
    background-color: transparent;
    color: #999;
    cursor: default;
}

.nice-select .list:hover .option:not(:hover) {
    background-color: transparent !important;
}

.no-csspointerevents .nice-select .list {
    display: none;
}

.no-csspointerevents .nice-select.open .list {
    display: block;
}

.section-title h2 {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    font-weight: 600;
    font-size: 30px;
    line-height: 1;
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .section-title h2 {
        font-size: 26px;
    }
}

@media (max-width: 767px) {
    .section-title h2 {
        font-size: 28px;
    }
}

.section-title.style-1 .sub-title {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    border: 1px solid rgba(var(--title-color-opc), 0.1);
    background-color: rgba(var(--primary-color1-opc), 0.15);
    padding: 10px 21px;
    font-weight: 500;
    font-size: 13px;
    border-radius: 5px;
    line-height: 1;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 20px;
}

@media (max-width: 1199px) {
    .section-title.style-1 .sub-title {
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {
    .section-title.style-1 .sub-title {
        padding: 9px 17px;
    }
}

.section-title.style-1 h2 {
    font-family: var(--font-Almarai);
    color: var(--title-color);
    font-weight: 700;
    font-size: 45px;
    line-height: 1.1;
    text-transform: capitalize;
    margin-bottom: 0;
}

@media (max-width: 1199px) {
    .section-title.style-1 h2 {
        font-size: 36px;
    }
}

@media (max-width: 767px) {
    .section-title.style-1 h2 {
        font-size: 37px;
    }
}

@media (max-width: 576px) {
    .section-title.style-1 h2 {
        font-size: 30px;
        line-height: 1.2;
    }
}

.section-title.style-2 h2 {
    text-transform: uppercase;
    font-size: 25px;
    letter-spacing: 1px;
}

.section-title.style-3>span {
    font-family: var(--font-Hanken-Grotesk);
    border: 1px solid rgba(var(--primary-color3-opc), 0.5);
    color: var(--primary-color3);
    border-radius: 50px;
    padding: 12px 21px;
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 10px;
}

.section-title.style-3 h2 {
    font-size: 50px;
    font-family: var(--font-Almarai);
    color: var(--black-color);
    font-weight: 700;
    line-height: 1.3;
}

@media (max-width: 1399px) {
    .section-title.style-3 h2 {
        font-size: 42px;
    }
}

@media (max-width: 1199px) {
    .section-title.style-3 h2 {
        font-size: 36px;
    }
}

@media (max-width: 991px) {
    .section-title.style-3 h2 {
        font-size: 34px;
        line-height: 1.4;
    }
}

@media (max-width: 767px) {
    .section-title.style-3 h2 {
        line-height: 1.3;
    }
}

@media (max-width: 576px) {
    .section-title.style-3 h2 {
        font-size: 30px;
        line-height: 1.2;
    }
}

.section-title.style-3 P {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 400;
    font-size: 16px;
    line-height: 32px;
}

.section-title.style-4 .sub-title {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    background-color: rgba(var(--primary-color4-opc), 0.2);
    color: var(--secondary-color);
    border: 1px solid rgba(var(--secondary-color-opc), 0.15);
    padding: 10px 17px;
    display: inline-block;
    text-transform: uppercase;
    margin-bottom: 13px;
    border-radius: 5px;
}

.section-title.style-4 h2 {
    font-family: var(--font-Almarai);
    color: var(--secondary-color);
    font-weight: 700;
    font-size: 45px;
    line-height: 1.3;
}

@media (max-width: 1199px) {
    .section-title.style-4 h2 {
        font-size: 36px;
    }
}

@media (max-width: 991px) {
    .section-title.style-4 h2 {
        font-size: 40px;
    }
}

@media (max-width: 767px) {
    .section-title.style-4 h2 {
        font-size: 35px;
    }
}

@media (max-width: 576px) {
    .section-title.style-4 h2 {
        font-size: 30px;
        line-height: 1.2;
    }

    .section-title.style-5 .sub-title {
        text-align: center;
    }

}

.section-title.style-5 .sub-title {
    color:#0D6EFD;
    text-transform: uppercase;
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 32px;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-title.style-5 .sub-title svg {
    fill:#0D6EFD;
}

.section-title.style-5 h2 {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    text-transform: capitalize;
}

@media (max-width: 1199px) {
    .section-title.style-5 h2 {
        font-size: 26px;
    }
}

@media (max-width: 991px) {
    .section-title.style-5 h2 {
        font-size: 40px;
    }
}

@media (max-width: 767px) {
    .section-title.style-5 h2 {
        font-size: 38px;
    }
}

@media (max-width: 576px) {
    .section-title.style-5 h2 {
        font-size: 22px;
        text-align: center;
    }
}

.slider-btn-grp {
    display: flex;
    align-items: center;
    gap: 50px;
}

@media (max-width: 767px) {
    .slider-btn-grp {
        gap: 40px;
    }
}

@media (max-width: 576px) {
    .slider-btn-grp {
        gap: 30px;
    }
}

.slider-btn-grp .slider-btn {
    min-width: 38px;
    max-width: 38px;
    height: 38px;
    background-color: var(--white-color);
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
}

.slider-btn-grp .slider-btn svg {
    fill: rgba(var(--black-color-opc), 0.3);
    transition: 0.5s;
}

@media (max-width: 576px) {
    .slider-btn-grp .slider-btn {
        min-width: 30px;
        max-width: 30px;
        height: 30px;
    }
}

.slider-btn-grp .slider-btn:hover {
    background-color: var(--title-color);
    border-color: var(--title-color);
    cursor: pointer;
}

.slider-btn-grp .slider-btn:hover svg {
    fill: var(--white-color);
}

.slider-btn-grp .slider-btn.swiper-button-disabled {
    opacity: 0.5;
}

.form-inner {
    line-height: 1;
}

.form-inner label {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 15px;
    display: inline-block;
    line-height: 1;
    margin-bottom: 14px;
    color: #002E33;
}

@media (max-width: 1199px) {
    .form-inner label {
        margin-bottom: 8px;
    }
}

@media (max-width: 576px) {
    .form-inner label {
        font-size: 14px;
        margin-bottom: 8px;
    }
}

.form-inner label span {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 16px;
}

.form-inner input {
    width: 100%;
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--title-color-opc), 0.6);
    font-weight: 500;
    font-size: 16px;
    padding: 10px 20px;
    height: 44px;
    border: 1px solid rgba(var(--title-color-opc), 0.1);
    border-radius: 5px;
    background-color: var(--white-color);
}

@media (max-width: 991px) {
    .form-inner input {
        height: 40px;
    }
}

@media (max-width: 576px) {
    .form-inner input {
        height: 40px;
        font-size: 15px;
    }
}

.form-inner input::-moz-placeholder {
    color: var(--text-color);
}

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

.form-inner input:focus {
    border-color: var(--title-color);
    background-color: var(--white-color);
}

.form-inner textarea {
    width: 100%;
    border-radius: 10px;
    background: #fff;
    color: var(--title-color);
    border: 1px solid var(--borders-color);
    outline: none;
    font-family: var(--font-Hanken-Grotesk);
    font-size: 16px;
    font-weight: 500;
    padding: 20px 25px;
    min-height: 90px;
    resize: none;
}

@media (max-width: 991px) {
    .form-inner textarea {
        min-height: 80px;
    }
}

@media (max-width: 767px) {
    .form-inner textarea {
        min-height: 70px;
    }
}

@media (max-width: 576px) {
    .form-inner textarea {
        padding: 20px 15px;
        min-height: 90px;
    }
}

.form-inner textarea:focus {
    border-color: var(--title-color);
    background-color: var(--white-color);
}

.form-inner textarea::-moz-placeholder {
    color: #A0A0A0;
}

.form-inner textarea::placeholder {
    color: #A0A0A0;
}

.form-inner2 .form-check .form-check-label {
    font-family: var(--font-Hanken-Grotesk);
    color: #002E33;
    font-weight: 400;
    font-size: 14px;
}

@media (max-width: 576px) {
    .form-inner2 .form-check .form-check-label {
        line-height: 1.4;
    }
}

/*=====================================
  03. Header CSS
========================================*/

@keyframes fade-down {
    0% {
        opacity: 0;
        transform: scaleY(0);
        visibility: hidden;
    }
    100% {
        opacity: 1;
        transform: scaleY(1);
        visibility: visible;
    }
}

@keyframes zoom-In-effect {
    0% {
        transform: scale(0.5);
    }
    100% {
        transform: scale(1);
    }
}

/*=====================      
  04. TopBar Start CSS
======================*/

.header-topbar-wrap {
    position: absolute;
    width: 100%;
    z-index: 999;
}

.header-topbar-wrap .topbar .topbar-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 202px 8px 202px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

@media (max-width: 1699px) {
    .header-topbar-wrap .topbar .topbar-wrapper {
        padding: 8px 50px;
    }
}

@media (max-width: 1399px) {
    .header-topbar-wrap .topbar .topbar-wrapper {
        padding: 8px 45px;
    }
}

@media (max-width: 1199px) {
    .header-topbar-wrap .topbar .topbar-wrapper {
        padding: 8px 30px;
    }
}

.header-topbar-wrap .topbar .topbar-wrapper .topbar-contact-list-wrap .contact-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 35px;
}

.header-topbar-wrap .topbar .topbar-wrapper .topbar-contact-list-wrap .contact-list li {
    position: relative;
}

.header-topbar-wrap .topbar .topbar-wrapper .topbar-contact-list-wrap .contact-list li::after {
    content: "";
    width: 1px;
    height: 20px;
    background-color: var(--dark-text-color);
    position: absolute;
    right: -20px;
    top: 52%;
    transform: translateY(-50%);
}

.header-topbar-wrap .topbar .topbar-wrapper .topbar-contact-list-wrap .contact-list li:last-child::after {
    display: none;
}

.header-topbar-wrap .topbar .topbar-wrapper .topbar-contact-list-wrap .contact-list li a {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-topbar-wrap .topbar .topbar-wrapper .topbar-contact-list-wrap .contact-list li a span {
    font-family: var(--font-Hanken-Grotesk);
    font-size: 14px;
    line-height: 1;
    color: rgba(var(--black-color-opc), 0.7);
    letter-spacing: 0.3px;
    transition: 0.35s;
    background: linear-gradient(to bottom, var(--title-color), 0%, var(--title-color), 98%);
    background-size: 0px 1.5px;
    background-repeat: no-repeat;
    background-position: right 95%;
    transition: background-size 0.75s;
    padding-bottom: 2px;
}

.header-topbar-wrap .topbar .topbar-wrapper .topbar-contact-list-wrap .contact-list li a svg {
    fill: rgba(var(--black-color-opc), 0.7);
    transition: 0.35s;
}

.header-topbar-wrap .topbar .topbar-wrapper .topbar-contact-list-wrap .contact-list li:hover a span {
    background-size: 100% 1.5px;
    background-position: 0% 95%;
}

.header-topbar-wrap .topbar .topbar-wrapper .topbar-right-section .button-area .login-btn svg {
    fill: var(--title-color);
}

.header-topbar-wrap .topbar .topbar-wrapper .topbar-right-section .button-area .login-btn:hover svg {
    fill: var(--white-color);
}

.header-topbar-wrap .topbar .topbar-wrapper .topbar-right-section .button-area .login-btn::after {
    background-color: var(--title-color);
}

@media (max-width: 991px) {
    .header-topbar-wrap .topbar {
        display: none;
    }
}

.header-topbar-wrap header.style-1 {
    position: relative;
    width: 100%;
    z-index: 99;
    transition: all 0.8s ease-out 0s;
    background-color: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    padding: 0 10% 0 10%;
}

@media (max-width: 1699px) {
    .header-topbar-wrap header.style-1 {
        padding: 0 30px 0 30px;
    }
}

@media (max-width: 1399px) {
    .header-topbar-wrap header.style-1 {
        padding: 0 32px;
    }
}

@media (max-width: 1199px) {
    .header-topbar-wrap header.style-1 {
        padding: 0 20px;
    }
}

@media (max-width: 767px) {
    .header-topbar-wrap header.style-1 {
        padding: 5px 10px;
    }
}

@media (max-width: 576px) {
    .header-topbar-wrap header.style-1 {
        padding: 0;
    }
}

.header-topbar-wrap header.style-1.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box;
    background-color: var(--white-color);
    box-shadow: 5px 3px 40px rgba(0, 72, 88, 0.1);
    z-index: 9999;
}

@keyframes smooth-header {
    0% {
        transform: translateY(-30px);
    }
    100% {
        transform: translateY(0px);
    }
}

@media (max-width: 991px) {
    .header-topbar-wrap header.style-1 .header-logo {
        padding: 15px 0;
    }
}

.header-topbar-wrap header.style-1 .header-logo a img {
    width: 230px;
}

@media (max-width: 1199px) {
    .header-topbar-wrap header.style-1 .header-logo a img {
        width: 176px;
    }
}

@media (max-width: 767px) {
    .header-topbar-wrap header.style-1 .header-logo a img {
        width: 150px;
    }
}

.header-topbar-wrap header.style-1 .nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

@media (max-width: 1199px) {
    .header-topbar-wrap header.style-1 .nav-right {
        gap: 15px;
    }
}

@media (max-width: 991px) {
    .header-topbar-wrap header.style-1 .nav-right {
        gap: 20px;
    }
}

@media (max-width: 1199px) {
    .header-topbar-wrap header.style-1 .nav-right .primary-btn1 {
        padding: 14px 17px;
        font-size: 15px;
    }
}

.header-topbar-wrap header.style-1 .nav-right .mobile-menu-btn {
    display: none;
    visibility: hidden;
}

@media (max-width: 991px) {
    .header-topbar-wrap header.style-1 .nav-right .mobile-menu-btn {
        display: flex;
        flex-direction: column;
        align-items: end;
        visibility: visible;
        justify-content: center;
        position: relative;
    }
    .header-topbar-wrap header.style-1 .nav-right .mobile-menu-btn svg {
        fill: var(--title-color);
    }
}

.header-topbar-wrap header.style-1 .nav-right .category-list-area {
    position: relative;
    border: unset;
}

.header-topbar-wrap header.style-1 .nav-right .category-list-area .category-menu-list {
    position: fixed;
    top: 0;
    right: 0;
    background-color: var(--white-color);
    min-width: 320px;
    z-index: 9999;
    height: 100%;
    overflow: auto;
    border-left: 1px solid rgba(13, 23, 32, 0.0784313725);
    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.15);
    transition: all 0.6s ease 0s;
    padding: 60px 20px 60px 20px;
    transform-origin: left;
    transform: translateX(100%);
}

.header-topbar-wrap header.style-1 .nav-right .category-list-area .category-menu-list.active {
    transform: translateX(0);
}

.header-topbar-wrap header.style-1 .nav-right .category-list-area .category-menu-list .category-menu-close {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--title-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
}

.header-topbar-wrap header.style-1 .nav-right .category-list-area .category-menu-list .category-menu-close svg {
    fill: var(--title-color);
    transition: 0.5s;
}

.header-topbar-wrap header.style-1 .nav-right .category-list-area .category-menu-list .category-menu-close:hover {
    background-color: #1e1e1e;
}

.header-topbar-wrap header.style-1 .nav-right .category-list-area .category-menu-list .category-menu-close:hover svg {
    fill: var(--white-color);
}

.header-topbar-wrap header.style-1 .nav-right .category-list-area .category-menu-list .category-list .has-sub-category .category-dropdown-icon {
    font-size: 20px;
    text-align: center;
    color: var(--title-color);
    font-style: normal;
    position: absolute;
    right: 30px;
    top: 11px;
    transform: unset;
    z-index: 999;
    cursor: pointer;
    transition: all 0.5s ease-out 0s;
}

.header-topbar-wrap header.style-1 .nav-right .category-list-area .category-menu-list .category-list .has-sub-category .category-dropdown-icon.active::before {
    content: "\f2ea";
}

.header-topbar-wrap header.style-1 .nav-right .category-list-area .category-menu-list .category-list .sub-category {
    position: static;
    background: 0 0;
    border: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    transform: none;
    transition: none;
    display: none;
    margin-top: 0 !important;
    transform: translateY(0px);
    margin-left: 10px;
    padding: 10px 0;
}

@media (max-width: 576px) {
    .header-topbar-wrap header.style-1 .nav-right .category-list-area .category-menu-list .category-list .sub-category {
        margin-left: 0;
    }
}

.header-topbar-wrap header.style-1 .nav-right .category-list-area .category-menu-list .category-list .sub-category li a {
    padding: 8px 0;
}

.header-topbar-wrap header.style-1 .nav-right .category-list-area .category-menu-list .category-list .sub-category li .category-dropdown-icon {
    right: 10px;
    top: 2px;
}

.header-topbar-wrap header.style-1 .main-menu {
    display: inline-block;
    position: relative;
}

.header-topbar-wrap header.style-1 .main-menu>ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-topbar-wrap header.style-1 .main-menu>ul>li {
    display: inline-block;
    position: relative;
    padding: 31px 14px;
}

@media (min-width: 992px){

    .header-topbar-wrap header.style-1 .main-menu{
        margin-left: 150px !important;
    }

}

@media (max-width: 1199px) {
    .header-topbar-wrap header.style-1 .main-menu>ul>li {
        padding: 30px 12px;
    }
}

@media (min-width: 992px) {
    .header-topbar-wrap header.style-1 .main-menu>ul>li:first-child {
        padding-left: 0;
    }
    .header-topbar-wrap header.style-1 .main-menu>ul>li:first-child a {
        padding-left: 0;
    }
    .header-topbar-wrap header.style-1 .main-menu>ul>li:last-child {
        padding-right: 0;
    }
}

.header-topbar-wrap header.style-1 .main-menu>ul>li>a {
    color: var(--black-color);
    display: block;
    letter-spacing: 0.4px;
    position: relative;
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    text-transform: capitalize;
    transition: all 0.5s ease-out 0s;
    position: relative;
}

@media (max-width: 991px) {
    .header-topbar-wrap header.style-1 .main-menu>ul>li>a {
        background: unset;
    }
}

.header-topbar-wrap header.style-1 .main-menu>ul>li>a span {
  background: linear-gradient(to bottom, #0D6EFD 0%, #0D6EFD 98%);
    background-size: 0px 1.5px;
    background-repeat: no-repeat;
    background-position: right 100%;
    transition: background-size 0.75s;
}

.header-topbar-wrap header.style-1 .main-menu>ul>li>a span:hover {
    color:#0D6EFD;
    background-size: 100% 1.5px;
    background-position: 0% 100%;
}

.header-topbar-wrap header.style-1 .main-menu>ul>li>a>svg {
    transition: 0.5s;
    opacity: 0;
}

@media (max-width: 991px) {
    .header-topbar-wrap header.style-1 .main-menu>ul>li>a>svg {
        display: none;
    }
}

.header-topbar-wrap header.style-1 .main-menu>ul>li>a:hover {
    color: var(--primary-color1);
}

.header-topbar-wrap header.style-1 .main-menu>ul>li i {
    font-size: 20px;
    text-align: center;
    color: var(--title-color);
    font-style: normal;
    position: absolute;
    right: -5px;
    top: 35px;
    z-index: 999;
    cursor: pointer;
    display: none;
    transition: all 0.5s ease-out 0s;
    opacity: 0;
}

@media (max-width: 991px) {
    .header-topbar-wrap header.style-1 .main-menu>ul>li i {
        opacity: 1;
    }
}

.header-topbar-wrap header.style-1 .main-menu>ul>li i.active {
    color: var(--primary-color1);
}

.header-topbar-wrap header.style-1 .main-menu>ul>li i.active::before {
    content: "\f2ea";
}

.header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu {
    padding: 0;
    margin: 0;
    list-style: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 79px;
    margin: 0;
    display: none;
    min-width: 200px;
    background: var(--white-color);
    box-shadow: 0px 30px 80px rgba(8, 0, 42, 0.08);
    text-align: left;
    transform-origin: top;
}

@media (max-width: 1199px) {
    .header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu {
        top: 76px;
    }
}

@media (max-width: 1199px) {
    .header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu {
        box-shadow: none;
    }
}

.header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li i {
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    color: var(--black-color);
    font-size: 12px;
    height: 12px;
    opacity: 1;
}

.header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li .dropdown-icon {
    color: var(--title-color);
    opacity: 1;
    top: 18px;
    font-size: 14px;
    right: 10px;
}

@media (max-width: 991px) {
    .header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li .dropdown-icon {
        right: 0;
        top: 8px;
        font-size: 20px;
    }
}

.header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li {
    padding: 0;
    display: block;
    position: relative;
}

.header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li>a {
    display: block;
    padding: 15px 15px;
    color: var(--title-color);
    font-weight: 500;
    font-family: var(--font-Hanken-Grotesk);
    text-transform: capitalize;
    font-size: 14px;
    line-height: 1.3;
    transition: all 0.4s ease-out 0s;
    position: relative;
    border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
}

.header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li>a::before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    background: linear-gradient(90deg, #fff, var(--primary-color1), #fff);
    width: 100%;
    height: 1px;
    transform: scaleX(0);
    transform-origin: left;
    transition: 0.4s ease-in;
    z-index: 1;
}

@media (max-width: 991px) {
    .header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li>a {
        border-color: rgba(233, 228, 228, 0.5);
    }
}

.header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li>a:hover {
    color: var(--primary-color1);
}

.header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li>a:hover::before {
    transform: scale(1);
}

.header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li>a.active {
    color: var(--primary-color1);
}

.header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li>a.active::before {
    transform: scale(1);
}

.header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li:last-child a {
    border-bottom: none;
}

.header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li:last-child a::before {
    display: none;
}

.header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li:last-child .sub-menu li a {
    border-bottom: 1px solid var(--border-color);
}

.header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li:last-child .sub-menu li a::before {
    display: block;
}

.header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li:last-child .sub-menu li:last-child a {
    border-bottom: none;
}

.header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li:last-child .sub-menu li:last-child a::before {
    display: none;
}

.header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li.active>a {
    color: var(--primary-color1);
}

.header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li .sub-menu {
    left: 200px;
    position: absolute;
    max-width: 230px;
    min-width: 215px;
    background: var(--white-color);
    box-shadow: 0px 30px 80px rgba(8, 0, 42, 0.08);
    top: 0;
}

@media (max-width: 1199px) {
    .header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li .sub-menu {
        box-shadow: none;
    }
}

.header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li .sub-menu::before {
    display: none;
    visibility: hidden;
}

@media only screen and (max-width: 991px) {
    .header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li .sub-menu {
        position: unset;
        max-width: 230px;
        min-width: 215px;
        background: transparent;
        top: 0;
    }
}

.header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li .sub-menu>li i {
    display: block;
}

@media (min-width: 992px) {
    .header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li:hover>.sub-menu {
        display: block;
        animation: fade-down 0.45s linear;
    }
}

.header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li:hover>a {
    color: var(--primary-color1);
    transition: 0.3s;
}

.header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li:hover i {
    color: var(--primary-color1);
}

.header-topbar-wrap header.style-1 .main-menu>ul>li.menu-item-has-children {
    transition: all 0.55s ease-in-out;
}

@media (min-width: 992px) {
    .header-topbar-wrap header.style-1 .main-menu>ul>li:hover>ul.sub-menu {
        display: block;
        animation: fade-down 0.45s linear;
    }
}

@keyframes fade-up {
    0% {
        opacity: 0;
        transform: scaleY(0);
        visibility: hidden;
    }
    100% {
        opacity: 1;
        transform: scaleY(1);
        visibility: visible;
    }
}

.header-topbar-wrap header.style-1 .main-menu>ul>li:hover>a {
    color: var(--primary-color1);
}

.header-topbar-wrap header.style-1 .main-menu>ul>li:hover>a svg {
    fill: var(--primary-color1);
    opacity: 1;
}

.header-topbar-wrap header.style-1 .main-menu>ul>li:hover::after {
    color: var(--primary-color1);
}

.header-topbar-wrap header.style-1 .main-menu>ul>li:hover .dropdown-icon2 {
    color: var(--primary-color);
}

.header-topbar-wrap header.style-1 .main-menu>ul>li.active>a {
    color: var(--primary-color1);
}

.header-topbar-wrap header.style-1 .main-menu>ul>li.active>a span::before {
    content: "";
    position: absolute;
    left: 17px;
    bottom: 0;
    width: 70%;
    height: 1px;
    background-color: var(--primary-color1);
}

@media (max-width: 991px) {
    .header-topbar-wrap header.style-1 .main-menu>ul>li.active>a span::before {
        display: none;
    }
}

.header-topbar-wrap header.style-1 .main-menu>ul>li.active>a svg {
    fill: var(--primary-color1);
    opacity: 1;
}

.header-topbar-wrap header.style-1 .main-menu>ul>li.active::after {
    color: var(--primary-color);
}

.header-topbar-wrap header.style-1 .main-menu>ul>li.active .dropdown-icon2 {
    color: var(--primary-color);
}

.header-topbar-wrap header.style-1 .main-menu>ul>li.active.position-inherit>a::after {
    color: var(--primary-color);
}

.header-topbar-wrap header.style-1 .main-menu>ul li.menu-item-has-children>i {
    display: block;
}

@media (max-width: 991px) {
    .header-topbar-wrap header.style-1 .main-menu .topbar-contact-list-wrap {
        margin-bottom: 20px;
    }
}

.header-topbar-wrap header.style-1 .main-menu .topbar-contact-list-wrap .contact-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 35px;
}

.header-topbar-wrap header.style-1 .main-menu .topbar-contact-list-wrap .contact-list li {
    position: relative;
}

.header-topbar-wrap header.style-1 .main-menu .topbar-contact-list-wrap .contact-list li::after {
    content: "";
    width: 1px;
    height: 20px;
    background-color: var(--dark-text-color);
    position: absolute;
    right: -20px;
    top: 52%;
    transform: translateY(-50%);
}

@media (max-width: 991px) {
    .header-topbar-wrap header.style-1 .main-menu .topbar-contact-list-wrap .contact-list li:nth-child(2) {
        margin-top: 15px;
    }
}

.header-topbar-wrap header.style-1 .main-menu .topbar-contact-list-wrap .contact-list li:last-child::after {
    display: none;
}

.header-topbar-wrap header.style-1 .main-menu .topbar-contact-list-wrap .contact-list li a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-Hanken-Grotesk);
    font-size: 14px;
    line-height: 1;
    color: rgba(var(--black-color-opc), 0.7);
    letter-spacing: 0.3px;
    transition: 0.35s;
    background: linear-gradient(to bottom, var(--title-color), 0%, var(--title-color), 98%);
    background-size: 0px 1.5px;
    background-repeat: no-repeat;
    background-position: right 100%;
    transition: background-size 0.75s;
    padding-bottom: 2px;
}

.header-topbar-wrap header.style-1 .main-menu .topbar-contact-list-wrap .contact-list li a svg {
    fill: rgba(var(--black-color-opc), 0.7);
    transition: 0.35s;
}

.header-topbar-wrap header.style-1 .main-menu .topbar-contact-list-wrap .contact-list li a:hover span {
    background-size: 100% 1.5px;
    background-position: 0% 100%;
}

@media only screen and (max-width: 991px) {
    .header-topbar-wrap header.style-1 .mobile-logo-area .menu-close-btn {
        height: 32px;
        width: 32px;
        border-radius: 50%;
        border: 1px solid var(--title-color);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.35s;
    }
    .header-topbar-wrap header.style-1 .mobile-logo-area .menu-close-btn i {
        font-size: 26px;
        line-height: 1;
        margin-top: 2px;
        color: var(--title-color);
        transition: 0.35s;
    }
    .header-topbar-wrap header.style-1 .mobile-logo-area .menu-close-btn:hover {
        background-color: var(--title-color);
    }
    .header-topbar-wrap header.style-1 .mobile-logo-area .menu-close-btn:hover i {
        color: var(--white-color);
    }
    .header-topbar-wrap header.style-1 .dropdown-icon {
        color: var(--white-color);
    }
    .header-topbar-wrap header.style-1 .main-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        padding: 30px 20px !important;
        z-index: 99999;
        height: 100%;
        overflow: auto;
        background: #fff;
        border-right: 1px solid #eee;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in;
        box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.03);
    }
    .header-topbar-wrap header.style-1 .main-menu.show-menu {
        transform: translateX(0);
    }
    .header-topbar-wrap header.style-1 .main-menu .mobile-menu-logo {
        text-align: left;
        padding-top: 20px;
        display: block;
        padding-bottom: 8px;
    }
    .header-topbar-wrap header.style-1 .main-menu .menu-list {
        padding-top: 50px;
        padding-bottom: 30px;
    }
    .header-topbar-wrap header.style-1 .main-menu>ul {
        float: none;
        text-align: left;
        padding: 5px 0px 20px 0;
    }
    .header-topbar-wrap header.style-1 .main-menu>ul>li {
        display: block;
        position: relative;
        padding: 0 5px;
    }
    .header-topbar-wrap header.style-1 .main-menu>ul>li i {
        display: block;
    }
    .header-topbar-wrap header.style-1 .main-menu>ul>li a {
        padding: 10px 0;
        display: block;
    }
    .header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu {
        position: static;
        min-width: 200px;
        background: 0 0;
        border: none;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        transform: none;
        transition: none;
        display: none;
        margin-top: 0 !important;
        transform: translateY(0px);
        padding-left: 10px;
    }
    .header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li {
        border-bottom: 1px solid transparent;
    }
    .header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li a {
        color: var(--title-color);
        padding: 12px 0px;
    }
    .header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li a:hover {
        color: var(--primary-color1);
        margin-left: 10px;
    }
    .header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li a.active {
        color: var(--primary-color);
    }
    .header-topbar-wrap header.style-1 .main-menu>ul>li ul.sub-menu>li i {
        color: var(--primary-color);
        right: -13px;
    }
    .header-topbar-wrap header.style-1 .main-menu>ul>li .bi {
        top: 8px;
        font-size: 20px;
        color: var(--title-color);
    }
    .header-topbar-wrap header.style-1 .main-menu>ul.button-area {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 30px;
    }
    .header-topbar-wrap header.style-1 .main-menu>ul.button-area .primary-btn1 {
        text-decoration: none;
        border-radius: 20px;
        padding: 7px 19px;
        background-color: transparent;
        font-family: var(--font-Hanken-Grotesk);
        color: var(--title-color);
        font-size: 13px;
        font-weight: 600;
    }
    .header-topbar-wrap header.style-1 .main-menu>ul.button-area .primary-btn1 .content>span:nth-child(2) {
        left: 10px;
        text-decoration: none;
    }
    .header-topbar-wrap header.style-1 .main-menu>ul.button-area .primary-btn1 svg {
        fill: var(--title-color);
        transition: 0.5s;
    }
    .header-topbar-wrap header.style-1 .main-menu>ul.button-area .primary-btn1:hover {
        background-color: var(--button-color);
        border: 1px solid var(--primary-color);
        color: var(--white-color);
    }
    .header-topbar-wrap header.style-1 .main-menu>ul.button-area .primary-btn1:hover svg {
        fill: var(--white-color);
    }
    .header-topbar-wrap header.style-1 .main-menu>.contact-area {
        padding: 0;
        margin: 0;
        list-style: none;
        padding-bottom: 20px;
        flex-wrap: wrap;
    }
}

@media only screen and (max-width: 991px) and (max-width: 1199px) {
    .header-topbar-wrap header.style-1 .main-menu>.contact-area {
        background: unset;
        border: unset;
    }
}

@media only screen and (max-width: 991px) {
    .header-topbar-wrap header.style-1 .main-menu>.contact-area li {
        position: relative;
    }
    .header-topbar-wrap header.style-1 .main-menu>.contact-area li:first-child::before {
        display: none;
    }
    .header-topbar-wrap header.style-1 .main-menu>.contact-area li a {
        color: var(--title-color);
        font-family: var(--font-Hanken-Grotesk);
        font-size: 15px;
        font-weight: 500;
        line-height: 20px;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: 0.5s;
    }
    .header-topbar-wrap header.style-1 .main-menu>.contact-area li a>svg {
        fill: var(--title-color);
        transition: 0.5s;
    }
    .header-topbar-wrap header.style-1 .main-menu>.contact-area li a:hover svg {
        fill: var(--primary-color);
    }
    .header-topbar-wrap header.style-1 .main-menu>.contact-area li a:hover {
        color: var(--primary-color);
    }
    .header-topbar-wrap header.style-1 .main-menu .login-btn {
        display: inline-flex;
        width: 100%;
        justify-content: center;
        padding: 13px 19px;
    }
}

@media only screen and (max-width: 991px) and (max-width: 991px) {
    .header-topbar-wrap header.style-1 .main-menu .login-btn {
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .header-topbar-wrap header.style-1 .main-menu .login-btn svg {
        fill: var(--black-color);
    }
    .header-topbar-wrap header.style-1 .main-menu .login-btn:hover svg {
        fill: var(--white-color);
    }
    .header-topbar-wrap header.style-1 .main-menu .login-btn::after {
        background-color: var(--black-color);
    }
}

@media only screen and (max-width: 991px) and (max-width: 991px) {
    .header-topbar-wrap header.style-1 .main-menu .primary-btn1 {
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 991px) {
    .header-topbar-wrap header.style-1 .main-menu .form-inner {
        display: flex;
        border: 1px solid var(--border-color);
        margin-bottom: 20px;
    }
    .header-topbar-wrap header.style-1 .main-menu .form-inner input {
        border: none;
        height: 44px;
        padding: 10px 12px;
    }
    .header-topbar-wrap header.style-1 .main-menu .form-inner input:focus {
        border: none;
    }
    .header-topbar-wrap header.style-1 .main-menu .primary-btn1 {
        margin-bottom: 0;
    }
}

.header-topbar-wrap header.style-1.home2-header-area {
    padding: 0;
}

.header-topbar-wrap header.style-1.home2-header-area .header-logo {
    padding: 19px 0px;
}

@media (max-width: 576px) {
    .header-topbar-wrap header.style-1.home2-header-area .header-logo {
        padding: 15px 0px;
    }
}

.header-topbar-wrap header.style-1.home2-header-area .main-menu .mobile-logo-area .mobile-logo-wrap a img {
    width: 148px;
}

@media (max-width: 576px) {
    .header-topbar-wrap header.style-1.home2-header-area .main-menu .mobile-logo-area .mobile-logo-wrap a img {
        width: 135px;
    }
}

.header-topbar-wrap header.style-1.home2-header-area.sticky {
    position: unset;
    background: unset;
    box-shadow: unset;
}

.header-topbar-wrap header.style-1.home3-header-area {
    border: none;
}

.header-topbar-wrap header.style-1.home3-header-area .main-menu>ul>li ul.sub-menu>li>a:hover {
    color: var(--primary-color3);
}

.header-topbar-wrap header.style-1.home3-header-area .main-menu>ul>li ul.sub-menu>li>a.active {
    color: var(--primary-color3);
}

.header-topbar-wrap header.style-1.home3-header-area .main-menu>ul>li ul.sub-menu>li i {
    color: var(--black-color);
}

.header-topbar-wrap header.style-1.home3-header-area .main-menu>ul>li ul.sub-menu>li.active>a {
    color: var(--primary-color3);
}

.header-topbar-wrap header.style-1.home3-header-area .main-menu>ul>li ul.sub-menu>li:hover>a {
    color: var(--primary-color3);
}

.header-topbar-wrap header.style-1.home3-header-area .main-menu>ul>li ul.sub-menu>li:hover i {
    color: var(--primary-color3);
}

.header-topbar-wrap header.style-1.home3-header-area .main-menu>ul>li:hover>a {
    color: var(--primary-color3);
}

.header-topbar-wrap header.style-1.home3-header-area .main-menu>ul>li:hover>a svg {
    fill: var(--primary-color3);
}

.header-topbar-wrap header.style-1.home3-header-area .main-menu>ul>li.active>a {
    color: var(--primary-color3);
}

.header-topbar-wrap header.style-1.home3-header-area .main-menu>ul>li.active>a::before {
    background-color: var(--primary-color3);
}

.header-topbar-wrap header.style-1.home3-header-area .main-menu>ul>li.active>a svg {
    fill: var(--primary-color3);
    opacity: 1;
}

.header-topbar-wrap header.style-1.home3-header-area .main-menu>ul>li>a span {
    background: linear-gradient(to bottom, var(--primary-color3) 0%, var(--primary-color3) 98%);
    background-size: 0px 1.5px;
    background-repeat: no-repeat;
    background-position: right 100%;
    transition: background-size 0.75s;
}

.header-topbar-wrap header.style-1.home3-header-area .main-menu>ul>li>a span:hover {
    color: var(--primary-color3);
    background-size: 100% 1.5px;
    background-position: 0% 100%;
}

@media (max-width: 991px) {
    .header-topbar-wrap header.style-1.home3-header-area .main-menu .primary-btn1 {
        width: 100%;
    }
}

.header-topbar-wrap header.style-1.home3-header-area .nav-right .primary-btn1:hover {
    color: var(--white-color);
}

.header-topbar-wrap header.style-1.home3-header-area .nav-right .primary-btn1::after {
    background-color: var(--primary-color3);
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu>ul>li ul.sub-menu>li i {
    color: var(--black-color);
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu>ul>li ul.sub-menu>li>a:hover {
    color: var(--primary-color4);
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu>ul>li ul.sub-menu>li>a.active {
    color: var(--primary-color4);
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu>ul>li ul.sub-menu>li.active>a {
    color: var(--primary-color4);
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu>ul>li ul.sub-menu>li.active>a::before {
    background-color: var(--primary-color4);
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu>ul>li ul.sub-menu>li.active>a svg {
    fill: var(--primary-color3);
    opacity: 1;
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu>ul>li ul.sub-menu>li>a span {
    background: linear-gradient(to bottom, var(--primary-color4) 0%, var(--primary-color4) 98%);
    background-size: 0px 1.5px;
    background-repeat: no-repeat;
    background-position: right 100%;
    transition: background-size 0.75s;
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu>ul>li ul.sub-menu>li>a span:hover {
    color: var(--primary-color4);
    background-size: 100% 1.5px;
    background-position: 0% 100%;
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu>ul>li ul.sub-menu>li:hover>a {
    color: var(--primary-color4);
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu>ul>li ul.sub-menu>li:hover>a span {
    color: var(--primary-color4);
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu>ul>li ul.sub-menu>li:hover i {
    color: var(--primary-color4);
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu>ul>li:hover>a {
    color: var(--primary-color4);
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu>ul>li:hover>a svg {
    fill: var(--primary-color4);
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu>ul>li:hover>a span {
    color: var(--primary-color4);
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu>ul>li.active>a {
    color: var(--primary-color4);
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu>ul>li.active>a::before {
    background-color: var(--primary-color4);
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu>ul>li.active>a svg {
    fill: var(--primary-color4);
    opacity: 1;
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu>ul>li>a span {
    background: linear-gradient(to bottom, var(--primary-color4) 0%, var(--primary-color4) 98%);
    background-size: 0px 1.5px;
    background-repeat: no-repeat;
    background-position: right 100%;
    transition: background-size 0.75s;
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu>ul>li>a span:hover {
    color: var(--primary-color4);
    background-size: 100% 1.5px;
    background-position: 0% 100%;
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu .button-area .login-btn {
    background-color: var(--primary-color4);
    color: var(--white-color);
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu .button-area .login-btn svg {
    fill: var(--white-color);
}

@media (max-width: 991px) {
    .header-topbar-wrap header.style-1.home4-header-area .main-menu .button-area .login-btn {
        border-radius: 5px;
    }
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu .button-area .login-btn:hover {
    border: transparent;
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu .button-area .login-btn::after {
    background: var(--secondary-color);
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu .primary-btn1 {
    background-color: var(--secondary-color);
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu .primary-btn1:hover {
    color: var(--white-color);
}

.header-topbar-wrap header.style-1.home4-header-area .main-menu .primary-btn1::after {
    background-color: var(--primary-color4);
}

.header-topbar-wrap header.style-1.home4-header-area .nav-right .primary-btn1 {
    background-color: var(--secondary-color);
}

.header-topbar-wrap header.style-1.home4-header-area .nav-right .primary-btn1:hover {
    color: var(--white-color);
}

.header-topbar-wrap header.style-1.home4-header-area .nav-right .primary-btn1::after {
    background-color: var(--primary-color4);
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .header-topbar-wrap header.style-1.home5-header-area {
        padding: 8px 18px 8px 18px;
    }
}

.header-topbar-wrap header.style-1.home5-header-area .main-menu>ul>li ul.sub-menu>li>a:hover {
    color: var(--primary-color5);
}

.header-topbar-wrap header.style-1.home5-header-area .main-menu>ul>li ul.sub-menu>li>a.active {
    color: var(--primary-color5);
}

.header-topbar-wrap header.style-1.home5-header-area .main-menu>ul>li ul.sub-menu>li.active>a {
    color: var(--primary-color5);
}

.header-topbar-wrap header.style-1.home5-header-area .main-menu>ul>li ul.sub-menu>li:hover>a {
    color: var(--primary-color5);
}

.header-topbar-wrap header.style-1.home5-header-area .main-menu>ul>li ul.sub-menu>li:hover i {
    color: var(--primary-color5);
}

.header-topbar-wrap header.style-1.home5-header-area .main-menu>ul>li:hover>a {
    color: var(--primary-color5);
}

.header-topbar-wrap header.style-1.home5-header-area .main-menu>ul>li:hover>a svg {
    fill: var(--primary-color5);
}

.header-topbar-wrap header.style-1.home5-header-area .main-menu>ul>li:hover>a span {
    color: var(--primary-color5);
}

.header-topbar-wrap header.style-1.home5-header-area .main-menu>ul>li.active>a {
    color: var(--primary-color5);
}

.header-topbar-wrap header.style-1.home5-header-area .main-menu>ul>li.active>a::before {
    background-color: var(--primary-color5);
}

.header-topbar-wrap header.style-1.home5-header-area .main-menu>ul>li.active>a svg {
    fill: var(--primary-color5);
    opacity: 1;
}

.header-topbar-wrap header.style-1.home5-header-area .main-menu>ul>li>a span {
    background: linear-gradient(to bottom, var(--primary-color5) 0%, var(--primary-color5) 98%);
    background-size: 0px 1.5px;
    background-repeat: no-repeat;
    background-position: right 100%;
    transition: background-size 0.75s;
}

.header-topbar-wrap header.style-1.home5-header-area .main-menu>ul>li>a span:hover {
    color: var(--primary-color5);
    background-size: 100% 1.5px;
    background-position: 0% 100%;
}

.header-topbar-wrap header.style-1.home5-header-area .main-menu .primary-btn1 {
    background-color: var(--title-color);
    width: 100%;
    margin-bottom: 20px;
}

.header-topbar-wrap header.style-1.home5-header-area .main-menu .primary-btn1:hover {
    color: var(--white-color);
}

.header-topbar-wrap header.style-1.home5-header-area .main-menu .primary-btn1::after {
    background-color: var(--primary-color5);
}

.header-topbar-wrap header.style-1.home5-header-area .main-menu .button-area {
    padding: 0;
}

.header-topbar-wrap header.style-1.home5-header-area .main-menu .button-area .login-btn {
    width: 100%;
}

.header-topbar-wrap header.style-1.home5-header-area .search-bar {
    position: relative;
    margin-right: 5px;
}

@media (max-width: 576px) {
    .header-topbar-wrap header.style-1.home5-header-area .search-bar {
        position: inherit;
    }
}

.header-topbar-wrap header.style-1.home5-header-area .search-bar .search-btn {
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(var(--white-color-opc), 0.2);
    border: 1px solid var(--borders-color);
    backdrop-filter: blur(15px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.5s;
}

.header-topbar-wrap header.style-1.home5-header-area .search-bar .search-btn svg {
    transition: 0.5s;
}

.header-topbar-wrap header.style-1.home5-header-area .search-bar .search-btn:hover {
    background-color: var(--primary-color5);
    fill: var(--white-color);
}

.header-topbar-wrap header.style-1.home5-header-area .search-bar .search-input {
    position: absolute;
    top: 59px;
    right: 0;
    z-index: 99;
    width: 600px;
    background-color: var(--title-color);
    padding: 50px 30px 30px;
    box-shadow: 0px 30px 80px rgba(8, 0, 42, 0.08);
    display: none;
    transform: scaleY(0);
    transform-origin: top;
}

@media (max-width: 1199px) {
    .header-topbar-wrap header.style-1.home5-header-area .search-bar .search-input {
        top: 52px;
        right: -84px;
    }
}

@media (max-width: 767px) {
    .header-topbar-wrap header.style-1.home5-header-area .search-bar .search-input {
        width: 450px;
        right: -125px;
        padding: 45px 20px 20px;
    }
}

@media (max-width: 576px) {
    .header-topbar-wrap header.style-1.home5-header-area .search-bar .search-input {
        width: 90%;
        left: 15px;
        right: unset;
        top: 70px;
    }
}

.header-topbar-wrap header.style-1.home5-header-area .search-bar .search-input.active {
    display: block;
    transform: scaleY(1);
    animation: fade-up2 0.5s linear;
}

@keyframes fade-up2 {
    0% {
        opacity: 0;
        transform: translateY(10px);
        visibility: hidden;
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
        visibility: visible;
    }
}

.header-topbar-wrap header.style-1.home5-header-area .search-bar .search-input .search-close {
    position: absolute;
    top: 10px;
    right: 15px;
    display: inline-block;
    border-radius: 50%;
    background-color: #000;
    box-shadow: 0 1px 12px 2px rgba(255, 255, 255, 0.1);
    height: 28px;
    width: 28px;
    cursor: pointer;
    z-index: 1;
}

.header-topbar-wrap header.style-1.home5-header-area .search-bar .search-input .search-close::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    left: calc(50% - 7px);
    display: block;
    height: 1px;
    width: 12px;
    background-color: var(--white-color);
    transition: all 0.3s ease-out;
}

.header-topbar-wrap header.style-1.home5-header-area .search-bar .search-input .search-close::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(-135deg);
    left: calc(50% - 7px);
    display: block;
    height: 1px;
    width: 12px;
    background-color: var(--white-color);
    transition: all 0.3s ease-out;
}

.header-topbar-wrap header.style-1.home5-header-area .search-bar .search-input .search-close:hover::after {
    transform: rotate(0);
}

.header-topbar-wrap header.style-1.home5-header-area .search-bar .search-input .search-close:hover::before {
    transform: rotate(0);
}

.header-topbar-wrap header.style-1.home5-header-area .search-bar .search-input .search-group {
    display: flex;
    gap: 50px;
    width: 100%;
    border-bottom: 1px solid #616161;
}

.header-topbar-wrap header.style-1.home5-header-area .search-bar .search-input .search-group .form-inner2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.header-topbar-wrap header.style-1.home5-header-area .search-bar .search-input .search-group .form-inner2 input {
    width: 100%;
    background-color: transparent;
    border: none;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-Hanken-Grotesk);
    line-height: 1;
    color: var(--white-color);
}

.header-topbar-wrap header.style-1.home5-header-area .search-bar .search-input .search-group .form-inner2 input::-moz-placeholder {
    color: #CACACA;
    font-weight: 400;
}

.header-topbar-wrap header.style-1.home5-header-area .search-bar .search-input .search-group .form-inner2 input::placeholder {
    color: #CACACA;
    font-weight: 400;
}

.header-topbar-wrap header.style-1.home5-header-area .search-bar .search-input .search-group .form-inner2 button {
    background-color: transparent;
    font-size: 22px;
    border: none;
    outline: none;
}

.header-topbar-wrap header.style-1.home5-header-area .search-bar .search-input .search-group .form-inner2 button i {
    font-size: 16px;
    color: #fff;
}

.header-topbar-wrap header.style-1.home5-header-area .search-bar .search-input .quick-search {
    display: flex;
    gap: 10px;
    padding-top: 15px;
}

.header-topbar-wrap header.style-1.home5-header-area .search-bar .search-input .quick-search ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.header-topbar-wrap header.style-1.home5-header-area .search-bar .search-input .quick-search ul li {
    padding-right: 5px;
    line-height: 1.5;
}

.header-topbar-wrap header.style-1.home5-header-area .search-bar .search-input .quick-search ul li:first-child {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    letter-spacing: 0.1em;
    font-size: 13px;
    margin-bottom: 0;
    color: var(--white-color);
    white-space: nowrap;
}

.header-topbar-wrap header.style-1.home5-header-area .search-bar .search-input .quick-search ul li a {
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 13px;
    font-weight: 400;
    line-height: 28px;
    transition: 0.5s;
}

.header-topbar-wrap header.style-1.home5-header-area .search-bar .search-input .quick-search ul li a:hover {
    color: var(--white-color);
}

@media (max-width: 991px) {
    .header-topbar-wrap header.style-1.home5-header-area .nav-right {
        gap: 16px;
    }
}

.header-topbar-wrap .category-list-area {
    border-bottom: 1px solid rgba(var(--black-color-opc), 0.1);
    width: 100%;
    border-top: unset;
    padding: 0;
}

.header-topbar-wrap .category-list-area .category-btn {
    padding: 9px 15px;
    background-color: var(--primary-color1);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    cursor: pointer;
}

@media (max-width: 576px) {
    .header-topbar-wrap .category-list-area .category-btn {
        gap: 7px;
        padding: 9px 12px;
    }
}

.header-topbar-wrap .category-list-area .category-btn svg {
    fill: var(--black-color);
}

.header-topbar-wrap .category-list-area .category-btn span {
    color: var(--black-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
}

@media (max-width: 576px) {
    .header-topbar-wrap .category-list-area .category-btn span {
        font-size: 14px;
    }
}

.header-topbar-wrap .category-list-area .category-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 991px) {
    .header-topbar-wrap .category-list-area .category-list {
        display: block;
    }
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .header-topbar-wrap .category-list-area .category-list {
        justify-content: space-between;
    }
}

.header-topbar-wrap .category-list-area .category-list li {
    padding: 0 62px;
    position: relative;
    border-right: 1px solid rgba(var(--black-color-opc), 0.1);
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .header-topbar-wrap .category-list-area .category-list li {
        padding: 0 34px;
    }
}

@media (max-width: 1399px) {
    .header-topbar-wrap .category-list-area .category-list li {
        padding: 0 25px;
    }
}

@media (max-width: 1199px) {
    .header-topbar-wrap .category-list-area .category-list li {
        padding: 0 12px;
    }
}

@media (max-width: 991px) {
    .header-topbar-wrap .category-list-area .category-list li {
        border: unset;
    }
}

.header-topbar-wrap .category-list-area .category-list li:first-child {
    border-left: unset;
}

.header-topbar-wrap .category-list-area .category-list li:last-child {
    border-right: unset;
    padding: 0px 63px;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .header-topbar-wrap .category-list-area .category-list li:last-child {
        padding: 0px 35px;
    }
}

@media (max-width: 1399px) {
    .header-topbar-wrap .category-list-area .category-list li:last-child {
        padding: 0px 25px;
    }
}

@media (max-width: 1199px) {
    .header-topbar-wrap .category-list-area .category-list li:last-child {
        padding: 0px 12px;
    }
}

.header-topbar-wrap .category-list-area .category-list li:last-child .sub-category {
    left: -24px;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .header-topbar-wrap .category-list-area .category-list li:last-child .sub-category {
        left: -86px;
    }
}

@media (max-width: 1399px) {
    .header-topbar-wrap .category-list-area .category-list li:last-child .sub-category {
        left: -59px;
    }
}

@media (max-width: 1199px) {
    .header-topbar-wrap .category-list-area .category-list li:last-child .sub-category {
        left: -86px;
    }
}

.header-topbar-wrap .category-list-area .category-list li a {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    text-align: left;
    color: rgba(var(--black-color-opc), 0.7);
    padding: 19px 0;
    display: block;
    transition: 0.45s;
    letter-spacing: 0.1px;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .header-topbar-wrap .category-list-area .category-list li a {
        font-size: 15px;
    }
}

@media (max-width: 1399px) {
    .header-topbar-wrap .category-list-area .category-list li a {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .header-topbar-wrap .category-list-area .category-list li a {
        font-size: 15px;
    }
}

.header-topbar-wrap .category-list-area .category-list li a span {
    font-size: 12px;
    line-height: 1;
    background-color: #9b3922;
    display: inline-block;
    padding: 3px 6px;
    color: var(--white-color);
}

.header-topbar-wrap .category-list-area .category-list li .sub-category {
    position: absolute;
    left: 248px;
    width: 251px;
    top: 0;
    background-color: var(--white-color);
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
    z-index: 99;
    transform-origin: top;
}

.header-topbar-wrap .category-list-area .category-list li .sub-category li {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    border-bottom: 1px solid rgba(var(--black-color-opc), 0.1);
    transition: 0.5s;
}

@media (max-width: 991px) {
    .header-topbar-wrap .category-list-area .category-list li .sub-category li {
        justify-content: start;
        border: unset;
        flex-wrap: wrap;
    }
}

.header-topbar-wrap .category-list-area .category-list li .sub-category li:last-child {
    border-bottom: unset;
}

@media (max-width: 991px) {
    .header-topbar-wrap .category-list-area .category-list li .sub-category li:hover {
        background-color: unset;
    }
}

@media (max-width: 1399px) {
    .header-topbar-wrap .category-list-area .category-list li .sub-category {
        width: 200px;
    }
}

.header-topbar-wrap .category-list-area .category-list li>.sub-category {
    left: 0;
    top: 53px;
}

@media (max-width: 1399px) {
    .header-topbar-wrap .category-list-area .category-list li>.sub-category {
        left: 259px;
    }
}

@media (max-width: 1199px) {
    .header-topbar-wrap .category-list-area .category-list li>.sub-category {
        left: 214px;
    }
}

.header-topbar-wrap .category-list-area .category-list li>.sub-category .sub-category {
    left: 248px;
}

.header-topbar-wrap .category-list-area .category-list li:hover {
    background-color: rgba(var(--primary-color1-opc), 0.3);
    transition: 0.5s;
}

.header-topbar-wrap .category-list-area .category-list li:hover>a {
    color: var(--black-color);
}

@media (min-width: 992px) {
    .header-topbar-wrap .category-list-area .category-list>li:hover>.sub-category {
        display: block;
        animation: fade-down 0.45s linear;
    }
}

@media (min-width: 992px) {
    .header-topbar-wrap .category-list-area .category-list>li>.sub-category li:hover .sub-category {
        display: block;
        animation: fade-up 0.45s linear;
    }
}

.header-topbar-wrap.style-2 .topbar {
    padding: 16px 0;
    background-color: var(--black-color);
}

@media (max-width: 991px) {
    .header-topbar-wrap.style-2 .topbar {
        padding: 0;
        display: none;
    }
}

.header-topbar-wrap.style-2 .topbar-content p {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--white-color-opc), 0.6);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    text-transform: capitalize;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .header-topbar-wrap.style-2 .topbar-content p {
        line-height: 1.2;
        display: none;
    }
}

.header-topbar-wrap.style-2 .topbar-content p a {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--primary-color1-opc), 0.7);
    text-decoration: underline;
    font-weight: 400;
    font-size: 13px;
    line-height: 1;
    text-transform: capitalize;
}

.header-topbar-wrap.home3-topbar-wrap {
    position: relative;
}

.header-topbar-wrap.home3-topbar-wrap .header-area .main-menu>.menu-list>li {
    padding: 32px 25px;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .header-topbar-wrap.home3-topbar-wrap .header-area .main-menu>.menu-list>li {
        padding: 32px 8px;
    }
}

@media (max-width: 991px) {
    .header-topbar-wrap.home3-topbar-wrap .header-area .main-menu>.menu-list>li {
        padding: 5px 5px;
    }
}

.header-topbar-wrap.home3-topbar-wrap .header-area .main-menu>.menu-list>li ul.sub-menu>li>a::before {
    background: linear-gradient(90deg, #fff, var(--primary-color3), #fff);
}

.header-topbar-wrap.home3-topbar-wrap .header-area .main-menu>.menu-list>li.active>a span::before {
    background-color: var(--primary-color3);
}

.header-topbar-wrap.home3-topbar-wrap .topbar-right-section .button-area .login-btn {
    color: var(--black-color);
    background-color: var(--primary-color3);
    border: 1px solid rgba(0, 218, 150, 0.5);
}

.header-topbar-wrap.home3-topbar-wrap .topbar-right-section .button-area .login-btn:hover {
    background-color: var(--black-color);
    color: var(--white-color);
}

.header-topbar-wrap.home3-topbar-wrap .topbar-right-section .button-area .login-btn:hover svg {
    fill: var(--white-color);
}

.header-topbar-wrap.home4-topbar-wrap {
    position: relative;
}

.header-topbar-wrap.home4-topbar-wrap .topbar .topbar-wrapper .topbar-right-section .button-area .login-btn svg {
    fill: var(--white-color);
}

.header-topbar-wrap.home4-topbar-wrap .header-area .main-menu>ul>li ul.sub-menu>li>a::before {
    background: linear-gradient(90deg, #fff, var(--primary-color4), #fff);
}

.header-topbar-wrap.home4-topbar-wrap .header-area .main-menu>ul>li.active>a span::before {
    background-color: var(--primary-color4);
}

.header-topbar-wrap.home4-topbar-wrap .topbar-right-section .button-area .login-btn {
    background-color: var(--primary-color4);
    border: 1px solid rgba(255, 124, 40, 0.8);
    color: var(--white-color);
}

.header-topbar-wrap.home4-topbar-wrap .topbar-right-section .button-area .login-btn span svg {
    fill: var(--white-color);
}

.header-topbar-wrap.home4-topbar-wrap .topbar-right-section .button-area .login-btn:hover {
    background-color: var(--secondary-color);
    border: 1px solid rgba(var(--secondary-color-opc), 0.1);
}

.header-topbar-wrap.home5-topbar-wrap {
    position: relative;
}

.header-topbar-wrap.home5-topbar-wrap .topbar {
    background-color: #ADE28A;
    padding: 15px 0;
}

.header-topbar-wrap.home5-topbar-wrap .topbar .topbar-content p {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    text-transform: capitalize;
    color: #1A3837;
}

.header-topbar-wrap.home5-topbar-wrap .topbar .topbar-content p a {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--primary-color5);
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    text-transform: capitalize;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .header-topbar-wrap.home5-topbar-wrap .header-area .header-logo a img {
        width: 110px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .header-topbar-wrap.home5-topbar-wrap .header-area .main-menu>ul>li {
        padding: 32px 5px;
    }
}

.header-topbar-wrap.home5-topbar-wrap .header-area .main-menu>ul>li ul.sub-menu>li>a::before {
    background: linear-gradient(90deg, #fff, var(--primary-color5), #fff);
}

.header-topbar-wrap.home5-topbar-wrap .header-area .main-menu>ul>li.active>a span::before {
    background-color: var(--primary-color5);
}

.header-topbar-wrap.home5-topbar-wrap .header-area .main-menu>ul>li>i.active {
    color: var(--primary-color5);
}

.header-topbar-wrap.home5-topbar-wrap .header-area .main-menu .button-area .login-btn {
    background-color: var(--primary-color5);
    color: var(--white-color);
    padding: 15px 16px;
    border-radius: 5px;
}

.header-topbar-wrap.home5-topbar-wrap .header-area .main-menu .button-area .login-btn::after {
    background-color: var(--title-color);
}

.header-topbar-wrap.home5-topbar-wrap .header-area .main-menu .button-area .login-btn svg {
    fill: var(--white-color);
}

@media (max-width: 1199px) {
    .header-topbar-wrap.home5-topbar-wrap .header-area .nav-right {
        gap: 8px;
    }
}

.header-topbar-wrap.home5-topbar-wrap .header-area .nav-right .login-btn {
    background-color: var(--primary-color5);
    color: var(--white-color);
    padding: 14px 16px;
    border-radius: 5px;
}

.header-topbar-wrap.home5-topbar-wrap .header-area .nav-right .login-btn::after {
    background-color: var(--title-color);
}

.header-topbar-wrap.home5-topbar-wrap .header-area .nav-right .login-btn svg {
    fill: var(--white-color);
}

.header-topbar-wrap.home5-topbar-wrap .header-area .nav-right .primary-btn1 {
    background-color: var(--title-color);
    color: var(--white-color);
    padding: 15px 27px;
    border-radius: 5px;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .header-topbar-wrap.home5-topbar-wrap .header-area .nav-right .primary-btn1 {
        padding: 15px 16px;
    }
}

.header-topbar-wrap.home5-topbar-wrap .header-area .nav-right .primary-btn1 svg {
    fill: var(--white-color);
}

.header-topbar-wrap.home5-topbar-wrap .header-area .nav-right .primary-btn1::after {
    background-color: var(--primary-color5);
}

.header-topbar-wrap.inner-pages-topbar .header-area .main-menu>ul>li.active>a svg {
    opacity: 1;
}

.header-topbar-wrap.service-topbar .header-area .main-menu>ul>li.active>a svg {
    opacity: 1;
}

.header-topbar-wrap.service-topbar .header-area .main-menu>ul>li.active>a span::before {
    width: 80%;
}

.header-topbar-wrap.service-details-topbar {
    position: relative;
}

.header-topbar-wrap.service-details-topbar .header-area .main-menu>ul>li.active>a svg {
    opacity: 1;
}

.header-topbar-wrap.service-details-topbar .header-area .main-menu>ul>li.active>a span::before {
    width: 80%;
}

.header-topbar-wrap.about-topbar .header-area .main-menu>ul>li.active a span::before {
    left: 0;
    bottom: 0;
    width: 100%;
}

@media (max-width: 991px) {
    .header-topbar-wrap.contact-topbar .header-area .main-menu .primary-btn1 {
        width: 100%;
    }
}

.header-topbar-wrap.contact-topbar .header-area .main-menu>ul>li.active>a span::before {
    left: 0;
    bottom: 0;
    width: 100%;
}

.header-topbar-wrap.blog-topbar .header-area .main-menu>ul>li.active>a span::before {
    width: 65%;
}

.header-topbar-wrap.blog-topbar .header-area .main-menu>ul>li.active>a svg {
    opacity: 1;
}

.header-topbar-wrap.project-page-topbar .header-area .main-menu>ul>li.active>a span::before {
    width: 73%;
}

.header-topbar-wrap.project-page-topbar .header-area .main-menu>ul>li.active>a svg {
    opacity: 1;
}

.header-topbar-wrap.dashboard-topbar {
    position: relative;
}

.header-topbar-wrap.dashboard-topbar .header-area .main-menu>ul>li.active>a span::before {
    width: 73%;
}

.header-topbar-wrap.dashboard-topbar .header-area .main-menu>ul>li.active>a svg {
    opacity: 1;
}

.header-topbar-wrap.register-topbar {
    position: relative;
}

.header-topbar-wrap.register-topbar .header-area.sticky {
    position: unset;
}

.login-btn {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    text-transform: capitalize;
    background-color: var(--primary-color1);
    color: var(--white-color);
    padding: 8px 19px;
    color: var(--black-color);
    border: 1px solid rgba(0, 0, 0, 0.3019607843);
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: 0.5s;
}

@media (max-width: 991px) {
    .login-btn {
        border-radius: 5px;
    }
}

.login-btn svg {
    fill: var(--title-color2);
    transition: 0.5s;
}

.login-btn:hover {
    background: var(--title-color);
    color: var(--white-color);
    transition: 0.5s;
}

.login-btn:hover svg {
    fill: var(--white-color);
    transition: 0.5s;
}

.login-btn.two {
    padding: 8px 19px;
}

.login-btn.two svg {
    fill: var(--black-color);
}

.login-btn.two::after {
    background-color: var(--black-color);
}

.login-btn.two:hover svg {
    fill: var(--white-color);
}

.right-sidebar-button {
    cursor: pointer;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(250, 141, 60, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767px) {
    .right-sidebar-button {
        min-width: 35px;
        max-width: 35px;
        height: 35px;
    }
}

.right-sidebar-button svg {
    fill: var(--title-color);
}

@keyframes qode-draw {
    0%,
    100% {
        clip-path: inset(-2px -2px);
    }
    42% {
        clip-path: inset(-2px -2px -2px 100%);
    }
    43% {
        clip-path: inset(-2px 100% -3px -2px);
    }
}

.right-sidebar-button:hover svg {
    animation: qode-draw 0.75s cubic-bezier(0.57, 0.39, 0, 0.86) 1 forwards;
}

.right-sidebar-close-btn {
    height: 32px;
    width: 32px;
    border-radius: 50%;
    border: 1px solid #3F444B;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.35s;
}

.right-sidebar-close-btn i {
    font-size: 26px;
    line-height: 1;
    margin-top: 2px;
    color: #3F444B;
    transition: 0.35s;
}

.right-sidebar-close-btn:hover {
    background-color: var(--title-color);
}

.right-sidebar-close-btn:hover i {
    color: var(--white-color);
}

.right-sidebar-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(15px);
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
}

.right-sidebar-menu .right-sidebar-menu-wrap::-webkit-scrollbar {
    width: 0px;
}

.right-sidebar-menu .right-sidebar-menu-wrap {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99999;
    width: 550px;
    height: 100%;
    overflow: auto;
    background-color: var(--white-color);
    transform: translateX(120%);
    transform-origin: right;
    transition: transform 0.5s ease-in;
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (max-width: 576px) {
    .right-sidebar-menu .right-sidebar-menu-wrap {
        width: 320px;
    }
}

.right-sidebar-menu .right-sidebar-menu-wrap .btn-and-contact-area {
    margin: 0 30px;
}

@media (max-width: 576px) {
    .right-sidebar-menu .right-sidebar-menu-wrap .btn-and-contact-area {
        margin: 30px 20px 20px;
    }
}

.right-sidebar-menu .right-sidebar-menu-wrap .btn-and-contact-area .contact-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 35px;
    margin-bottom: 30px;
}

@media (max-width: 576px) {
    .right-sidebar-menu .right-sidebar-menu-wrap .btn-and-contact-area .contact-list {
        gap: 15px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }
}

.right-sidebar-menu .right-sidebar-menu-wrap .btn-and-contact-area .contact-list li {
    position: relative;
}

.right-sidebar-menu .right-sidebar-menu-wrap .btn-and-contact-area .contact-list li::after {
    content: "";
    width: 1px;
    height: 20px;
    background-color: var(--dark-text-color);
    position: absolute;
    right: -20px;
    top: 52%;
    transform: translateY(-50%);
}

.right-sidebar-menu .right-sidebar-menu-wrap .btn-and-contact-area .contact-list li:last-child::after {
    display: none;
}

.right-sidebar-menu .right-sidebar-menu-wrap .btn-and-contact-area .contact-list li a {
    display: flex;
    align-items: center;
    gap: 8px;
}

.right-sidebar-menu .right-sidebar-menu-wrap .btn-and-contact-area .contact-list li a span {
    font-family: var(--font-Hanken-Grotesk);
    font-size: 14px;
    line-height: 1;
    color: rgba(var(--black-color-opc), 0.7);
    letter-spacing: 0.3px;
    transition: 0.35s;
    background: linear-gradient(to bottom, var(--title-color) 0%, var(--title-color) 98%);
    background-size: 0px 1.5px;
    background-repeat: no-repeat;
    background-position: right 100%;
    transition: background-size 0.75s;
    padding-bottom: 2px;
}

.right-sidebar-menu .right-sidebar-menu-wrap .btn-and-contact-area .contact-list li a svg {
    fill: rgba(var(--black-color-opc), 0.7);
    transition: 0.35s;
}

.right-sidebar-menu .right-sidebar-menu-wrap .btn-and-contact-area .contact-list li a:hover span {
    background-size: 100% 1.5px;
    background-position: 0% 100%;
}

.right-sidebar-menu .right-sidebar-menu-wrap .btn-and-contact-area .primary-btn1 {
    margin-bottom: 20px;
}

.right-sidebar-menu .right-sidebar-menu-wrap .btn-and-contact-area .login-btn {
    border-radius: 5px;
    padding: 15px 0;
}

.right-sidebar-menu .right-sidebar-menu-wrap .btn-and-contact-area .login-btn svg {
    fill: var(--black-color);
}

.right-sidebar-menu .right-sidebar-menu-wrap .btn-and-contact-area .login-btn::after {
    background-color: var(--black-color);
}

.right-sidebar-menu .right-sidebar-menu-wrap .btn-and-contact-area .login-btn:hover svg {
    fill: var(--white-color);
}

.right-sidebar-menu.show-right-menu {
    opacity: 1;
    visibility: visible;
    z-index: 99999;
}

.right-sidebar-menu.show-right-menu .right-sidebar-menu-wrap {
    transform: translateX(0);
}

.right-sidebar-menu .sidebar-logo-area {
    text-align: left;
    padding: 30px;
    display: block;
    border-bottom: 1px solid rgba(var(--black-color-opc), 0.1);
}

@media (max-width: 576px) {
    .right-sidebar-menu .sidebar-logo-area {
        padding: 20px;
    }
}

.right-sidebar-menu .sidebar-content-wrap {
    padding: 40px 40px;
}

@media (max-width: 576px) {
    .right-sidebar-menu .sidebar-content-wrap {
        padding: 40px 20px;
    }
}

.right-sidebar-menu .sidebar-content-wrap .title-area span {
    color: rgba(var(--title-color-opc), 0.6);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 10px;
    position: relative;
}

.right-sidebar-menu .sidebar-content-wrap .title-area span::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -41px;
    width: 35px;
    height: 1px;
    background-color: var(--primary-color1);
}

.right-sidebar-menu .sidebar-content-wrap .title-area h2 {
    color: var(--title-color);
    font-family: var(--font-Almarai);
    font-size: 37px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.03em;
    margin-bottom: 15px;
}

@media (max-width: 576px) {
    .right-sidebar-menu .sidebar-content-wrap .title-area h2 {
        font-size: 28px;
    }
}

.right-sidebar-menu .sidebar-content-wrap .title-area p {
    color: var(--text-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    margin-bottom: 0;
}

@media (max-width: 576px) {
    .right-sidebar-menu .sidebar-content-wrap .title-area p {
        font-size: 15px;
    }
}

.right-sidebar-menu .sidebar-content-wrap .contact-area {
    padding: 0;
    margin: 0;
    list-style: none;
    margin: 0 45px;
    padding: 52px 0 58px;
}

@media (max-width: 576px) {
    .right-sidebar-menu .sidebar-content-wrap .contact-area {
        margin: 0 20px;
    }
}

.right-sidebar-menu .sidebar-content-wrap .contact-area li {
    margin-bottom: 20px;
}

.right-sidebar-menu .sidebar-content-wrap .contact-area li:last-child {
    margin-bottom: 0;
}

.right-sidebar-menu .sidebar-content-wrap .contact-area li .single-contact {
    display: flex;
    align-items: center;
    gap: 12px;
}

.right-sidebar-menu .sidebar-content-wrap .contact-area li .single-contact .icon {
    background: none;
    border: none;
}

.right-sidebar-menu .sidebar-content-wrap .contact-area li .single-contact .icon svg {
    fill: var(--title-color);
}

.right-sidebar-menu .sidebar-content-wrap .contact-area li .single-contact .content {
    position: relative;
    line-height: 1;
    text-align: start;
}

.right-sidebar-menu .sidebar-content-wrap .contact-area li .single-contact .content strong {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    color: var(--title-color);
    margin-bottom: 6px;
    display: inline-block;
    text-transform: uppercase;
}

.right-sidebar-menu .sidebar-content-wrap .contact-area li .single-contact .content span {
    margin-bottom: 0;
    line-height: 1;
    display: block;
}

.right-sidebar-menu .sidebar-content-wrap .contact-area li .single-contact .content span a {
    color: rgba(var(--title-color-opc), 0.7);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.5;
    transition: 0.5s;
}

@media (max-width: 576px) {
    .right-sidebar-menu .sidebar-content-wrap .contact-area li .single-contact .content span a {
        font-size: 16px;
    }
}

.right-sidebar-menu .sidebar-content-wrap .contact-area li .single-contact .content span a:hover {
    color: var(--primary-color1);
}

.right-sidebar-menu .sidebar-content-wrap .contact-area li .single-contact.social .icon svg {
    fill: none;
    stroke: var(--title-color);
}

.right-sidebar-menu .sidebar-content-wrap .contact-area li .single-contact.social .content h6 a:hover {
    text-decoration: underline;
}

.right-sidebar-menu .sidebar-content-wrap .contact-area li .arrow {
    margin-top: 20px;
    fill: rgba(var(--primary-color1-opc), 0.4);
    margin-left: 70px;
}

.right-sidebar-menu .sidebar-content-wrap .address-area {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
}

.right-sidebar-menu .sidebar-content-wrap .address-area .single-address {
    max-width: 200px;
    width: 100%;
}

.right-sidebar-menu .sidebar-content-wrap .address-area .single-address span {
    color: var(--title-color);
    font-family: var(--font-Almarai);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.06em;
    text-decoration: underline;
    display: block;
    margin-bottom: 20px;
}

.right-sidebar-menu .sidebar-content-wrap .address-area .single-address a {
    color: var(--text-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 17px;
    font-weight: 400;
    line-height: 28px;
    transition: 0.5s;
}

.right-sidebar-menu .sidebar-content-wrap .address-area .single-address a:hover {
    color: var(--primary-color1);
}

.right-sidebar-menu .sidebar-bottom-area {
    padding: 17px 20px;
    border-top: 1px solid rgba(var(--black-color-opc), 0.1);
    text-align: center;
}

.right-sidebar-menu .sidebar-bottom-area p {
    color: var(--text-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.02em;
    margin-bottom: 0;
}

.right-sidebar-menu .sidebar-bottom-area p a {
    color: var(--primary-color1);
    font-weight: 600;
    transition: 0.5s;
}

.right-sidebar-menu .sidebar-bottom-area p a:hover {
    text-decoration: underline;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap {
    border: 1px solid var(--borders-color);
    margin: 50px 30px;
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .right-sidebar-menu.style-2 .sidebar-menu-wrap {
        margin-right: 30px;
    }
}

@media (max-width: 1199px) {
    .right-sidebar-menu.style-2 .sidebar-menu-wrap {
        margin-right: 0px;
    }
}

@media (max-width: 991px) {
    .right-sidebar-menu.style-2 .sidebar-menu-wrap {
        margin-right: 0;
    }
}

@media (max-width: 576px) {
    .right-sidebar-menu.style-2 .sidebar-menu-wrap {
        margin: 0;
        border: unset;
    }
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    border-top: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu::-webkit-scrollbar {
    width: 0;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu::-webkit-scrollbar-track {
    background: var(--title-color);
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu::-webkit-scrollbar-thumb {
    background: var(--primary-color);
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li {
    position: relative;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a {
    border-bottom: 1px solid var(--borders-color);
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    display: block;
    line-height: 1;
    padding: 30px 30px 30px 50px;
    transform: translateY(var(--y)) translateZ(0);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

@media (max-width: 1399px) {
    .right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a {
        padding: 30px 30px 30px 50px;
    }
}

@media (max-width: 1199px) {
    .right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a {
        padding: 25px 25px 25px 40px;
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a {
        padding: 25px 30px;
        font-size: 26px;
    }
}

@media (max-width: 576px) {
    .right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a {
        padding: 20px 22px;
        font-size: 18px;
    }
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text {
    display: flex;
    overflow: hidden;
    text-shadow: 0 30px 0 var(--title-color);
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span {
    display: block;
    backface-visibility: hidden;
    transition: transform 0.4s ease;
    transform: translateY(var(--m)) translateZ(0);
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(1) {
    transition-delay: 0.05s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(2) {
    transition-delay: 0.1s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(3) {
    transition-delay: 0.15s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(4) {
    transition-delay: 0.2s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(5) {
    transition-delay: 0.25s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(6) {
    transition-delay: 0.3s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(7) {
    transition-delay: 0.35s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(8) {
    transition-delay: 0.4s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(9) {
    transition-delay: 0.45s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(10) {
    transition-delay: 0.5s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(11) {
    transition-delay: 0.55s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(12) {
    transition-delay: 0.6s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(13) {
    transition-delay: 0.65s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(14) {
    transition-delay: 0.7s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(15) {
    transition-delay: 0.75s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(16) {
    transition-delay: 0.8s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(17) {
    transition-delay: 0.85s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(18) {
    transition-delay: 0.9s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(19) {
    transition-delay: 0.95s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(20) {
    transition-delay: 1s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(21) {
    transition-delay: 1.05s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(22) {
    transition-delay: 1.1s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(23) {
    transition-delay: 1.15s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(24) {
    transition-delay: 1.2s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(25) {
    transition-delay: 1.25s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(26) {
    transition-delay: 1.3s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(27) {
    transition-delay: 1.35s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(28) {
    transition-delay: 1.4s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(29) {
    transition-delay: 1.45s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(30) {
    transition-delay: 1.5s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(31) {
    transition-delay: 1.55s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(32) {
    transition-delay: 1.6s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(33) {
    transition-delay: 1.65s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(34) {
    transition-delay: 1.7s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(35) {
    transition-delay: 1.75s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(36) {
    transition-delay: 1.8s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(37) {
    transition-delay: 1.85s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(38) {
    transition-delay: 1.9s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(39) {
    transition-delay: 1.95s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a .menu-text span:nth-child(40) {
    transition-delay: 2s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a:hover {
    --y: -0px;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li>a:hover span {
    --m: calc(30px * -1);
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .dropdown-icon2 {
    position: absolute;
    right: 30px;
    top: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(var(--black-color-opc), 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.5s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .dropdown-icon2 i {
    color: var(--title-color);
    font-size: 28px;
    transition: 0.5s;
    height: 28px;
}

@media (max-width: 767px) {
    .right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .dropdown-icon2 {
        right: 30px;
    }
}

@media (max-width: 576px) {
    .right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .dropdown-icon2 {
        top: 18px;
        right: 20px;
        width: 35px;
        height: 35px;
    }
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .dropdown-icon2.active i::before {
    content: "\f2ea";
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .dropdown-icon2:hover {
    background-color: var(--title-color);
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .dropdown-icon2:hover i {
    color: var(--white-color);
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .dropdown-icon2.two {
    height: unset;
    width: unset;
    background-color: transparent;
    top: -7px;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .dropdown-icon2.two i {
    color: var(--title-color);
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list {
    margin: 0;
    padding: 0;
    list-style: none;
    position: static;
    opacity: 1;
    visibility: visible;
    transition: none;
    display: none;
    padding: 40px 70px;
    border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
}

@media (max-width: 1399px) {
    .right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list {
        padding: 40px 50px;
    }
}

@media (max-width: 1199px) {
    .right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list {
        padding: 35px 40px;
    }
}

@media (max-width: 767px) {
    .right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list {
        padding: 35px 30px;
    }
}

@media (max-width: 576px) {
    .right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list {
        padding: 30px 40px;
    }
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list.active {
    display: block;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list li {
    position: relative;
    margin-bottom: 15px;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list li:last-child {
    margin-bottom: 0;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list li::after {
    content: "";
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    position: absolute;
    left: -20px;
    border: 1px solid var(--text-color);
    top: 10px;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list li a {
    color: var(--black-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 17px;
    font-weight: 400;
    text-transform: uppercase;
    padding-left: 20px;
    position: relative;
    transition: 0.5s;
}

@media (max-width: 576px) {
    .right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list li a {
        font-size: 15px;
        padding-left: 10px;
    }
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list li a svg {
    fill: var(--paragraph-color);
    margin-left: 5px;
    transition: 0.5s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list li a::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid var(--paragraph-color);
    transition: 0.5s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list li a:hover {
    color: var(--primary-color1);
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list li a:hover svg {
    fill: var(--primary-color1);
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list li a:hover::before {
    border-color: var(--primary-color1);
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list li a.active {
    color: var(--primary-color1);
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list li a.active svg {
    fill: var(--primary-color1);
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list li .submenu-list {
    padding-top: 20px;
    padding-bottom: 7px;
    padding-left: 20px;
    border-bottom: none;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list li .submenu-list li {
    margin-bottom: 10px;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list li .submenu-list li::after {
    display: none;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list li .submenu-list li a {
    font-size: 15px;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list li .submenu-list li a svg {
    fill: var(--paragraph-color);
    margin-left: 5px;
    transition: 0.5s;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list li .submenu-list li a:hover {
    color: var(--primary-color1);
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list li .submenu-list li a:hover svg {
    fill: var(--primary-color1);
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list li.active a {
    color: #B48DFF;
}

.right-sidebar-menu.style-2 .sidebar-menu-wrap .main-menu>li .submenu-list li.active a svg {
    fill: #B48DFF;
}

.right-sidebar-menu.style-2 .right-sidebar-menu-wrap {
    display: block;
}

.right-sidebar-menu.home3-right-sidebar-menu .right-sidebar-menu-wrap .sidebar-content-wrap .title-area span::after {
    background-color: var(--primary-color3);
}

.right-sidebar-menu.home3-right-sidebar-menu .right-sidebar-menu-wrap .sidebar-content-wrap .contact-area li .single-contact .content h6 a:hover {
    color: var(--primary-color3);
}

.right-sidebar-menu.home3-right-sidebar-menu .right-sidebar-menu-wrap .sidebar-content-wrap .address-area .single-address a:hover {
    color: var(--primary-color3);
}

.right-sidebar-menu.home3-right-sidebar-menu .sidebar-bottom-area p a {
    color: var(--primary-color3);
}

.right-sidebar-menu.home4-sidebar-menu .right-sidebar-menu-wrap .sidebar-content-wrap .title-area span::after {
    background-color: var(--primary-color4);
}

.right-sidebar-menu.home4-sidebar-menu .right-sidebar-menu-wrap .sidebar-content-wrap .contact-area li .single-contact .content h6 a:hover {
    color: var(--primary-color4);
}

.right-sidebar-menu.home4-sidebar-menu .right-sidebar-menu-wrap .sidebar-content-wrap .address-area .single-address a:hover {
    color: var(--primary-color4);
}

.right-sidebar-menu.home4-sidebar-menu .sidebar-bottom-area p a {
    color: var(--primary-color4);
}

.right-sidebar-menu.home4-sidebar-menu .sidebar-bottom-area p a {
    color: var(--primary-color4);
}

/*=====================
 05. Home1 Banner Start CSS
======================*/

.home1-banner-section {
    background: #FFFAF8;
    padding: 200px 0 90px;
    position: relative;
}

@media (max-width: 767px) {
    .home1-banner-section {
        padding: 150px 0 100px;
    }
}

@media (max-width: 576px) {
    .home1-banner-section {
        padding: 130px 0 80px;
    }
}

.home1-banner-section .banner-content .sub-title {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--black-color);
    padding: 14px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    text-transform: uppercase;
    display: inline-flex;
    align-items: end;
    gap: 6px;
    justify-content: space-between;
    background: linear-gradient(-30deg, rgba(118, 245, 188, 0.5), #ffffff) padding-box, linear-gradient(90deg, #76F5BC, #0400f7, #EBEEF9) border-box;
    border: 1px solid transparent;
    margin-bottom: 17px;
    animation: fadeInDown 1.7s;
}

@media (max-width: 767px) {
    .home1-banner-section .banner-content .sub-title {
        margin-bottom: 13px;
        padding: 10px 16px;
    }
}

.home1-banner-section .banner-content .sub-title svg {
    fill: var(--primary-color1);
}

.home1-banner-section .banner-content h1 {
    font-family: var(--font-Almarai);
    color: var(--black-color);
    font-weight: 800;
    font-size: 80px;
    line-height: 1.2;
    text-transform: capitalize;
    margin-bottom: 0;
    animation: fadeInUp 1.7s;
}

@media (max-width: 1399px) {
    .home1-banner-section .banner-content h1 {
        font-size: 70px;
    }
}

@media (max-width: 1199px) {
    .home1-banner-section .banner-content h1 {
        font-size: 65px;
    }
}

@media (max-width: 991px) {
    .home1-banner-section .banner-content h1 {
        font-size: 50px;
    }
}

@media (max-width: 767px) {
    .home1-banner-section .banner-content h1 {
        font-size: 42px;
    }
}

@media (max-width: 576px) {
    .home1-banner-section .banner-content h1 {
        font-size: 43px;
        line-height: 1.1;
    }
}

.home1-banner-section .banner-content h1 span {
    position: relative;
}

.home1-banner-section .banner-content h1 span::before {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    background: url(../img/home1/vector.png) no-repeat center center;
    height: 30px;
}

.home1-banner-section .category-slider-area .category-card {
    background-color: var(--white-color);
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    text-align: center;
    padding: 30px 18px 23px;
}

@media (max-width: 1399px) {
    .home1-banner-section .category-slider-area .category-card {
        padding: 30px 10px 25px;
    }
}

@media (max-width: 767px) {
    .home1-banner-section .category-slider-area .category-card {
        padding: 24px 4px 20px;
    }
}

.home1-banner-section .category-slider-area .category-card img {
    margin-bottom: 6px;
}

.home1-banner-section .category-slider-area .category-card h3 {
    margin-bottom: 0;
}

.home1-banner-section .category-slider-area .category-card h3 a {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(0, 0, 0, 0.6980392157);
    font-weight: 600;
    font-size: 17px;
    line-height: 1;
    text-transform: capitalize;
    transition: 0.5s;
}

@media (max-width: 1399px) {
    .home1-banner-section .category-slider-area .category-card h3 a {
        font-size: 15px;
    }
}

@media (max-width: 1199px) {
    .home1-banner-section .category-slider-area .category-card h3 a {
        font-size: 14px;
    }
}

.home1-banner-section .category-slider-area .category-card h3 a:hover {
    color: var(--primary-color1);
    transition: 0.5s;
}

.home1-banner-section .category-slider-area .category-card {
    /* Bounce keyframes */
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-18px);
    }
    50% {
        transform: translateY(0);
    }
    70% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
    }
}

.home1-banner-section .category-slider-area .category-card:hover img {
    animation: bounce 1s;
}

.home1-banner-section .category-slider-area .slider-btn-grp {
    position: relative;
    bottom: 76px;
    z-index: 1;
}

@media (max-width: 767px) {
    .home1-banner-section .category-slider-area .slider-btn-grp {
        display: none;
    }
}

.home1-banner-section .category-slider-area .slider-btn-grp .slider-btn {
    position: absolute;
    z-index: 1;
}

.home1-banner-section .category-slider-area .slider-btn-grp .slider-btn.category-slider-next {
    right: -22px;
}

@media (max-width: 576px) {
    .home1-banner-section .category-slider-area .slider-btn-grp .slider-btn.category-slider-next {
        right: -12px;
    }
}

.home1-banner-section .category-slider-area .slider-btn-grp .slider-btn.category-slider-prev {
    left: -22px;
}

@media (max-width: 576px) {
    .home1-banner-section .category-slider-area .slider-btn-grp .slider-btn.category-slider-prev {
        left: -12px;
    }
}

.home1-banner-section .vector-img .vector1 {
    width: 105px;
    position: absolute;
    top: 20%;
    left: 4%;
}

@media (max-width: 991px) {
    .home1-banner-section .vector-img .vector1 {
        width: 80px;
    }
}

@media (max-width: 767px) {
    .home1-banner-section .vector-img .vector1 {
        top: 10%;
        width: 60px;
    }
}

.home1-banner-section .vector-img .vector2 {
    width: 98px;
    position: absolute;
    top: 40%;
    left: 16%;
}

@media (max-width: 1399px) {
    .home1-banner-section .vector-img .vector2 {
        top: 37%;
        left: 15%;
    }
}

@media (max-width: 991px) {
    .home1-banner-section .vector-img .vector2 {
        width: 70px;
    }
}

@media (max-width: 767px) {
    .home1-banner-section .vector-img .vector2 {
        width: 60px;
        top: 35%;
        left: 10%;
    }
}

.home1-banner-section .vector-img .vector3 {
    width: 91px;
    position: absolute;
    top: 20%;
    right: 7%;
}

@media (max-width: 991px) {
    .home1-banner-section .vector-img .vector3 {
        width: 70px;
    }
}

@media (max-width: 767px) {
    .home1-banner-section .vector-img .vector3 {
        width: 60px;
        position: absolute;
        top: 10%;
    }
}

.home1-banner-section .vector-img .vector4 {
    width: 90px;
    position: absolute;
    top: 38%;
    right: 19%;
}

@media (max-width: 1399px) {
    .home1-banner-section .vector-img .vector4 {
        top: 39%;
        right: 13%;
    }
}

@media (max-width: 991px) {
    .home1-banner-section .vector-img .vector4 {
        top: 37%;
        width: 70px;
    }
}

@media (max-width: 767px) {
    .home1-banner-section .vector-img .vector4 {
        top: 36%;
        width: 60px;
    }
}

/* ===== Floating Animation ===== */

.home1-banner-section .vector-img .vector1,
.home1-banner-section .vector-img .vector2,
.home1-banner-section .vector-img .vector3,
.home1-banner-section .vector-img .vector4{
    animation: floatingVector 4s ease-in-out infinite;
}

/* Different delays for natural movement */
.home1-banner-section .vector-img .vector1{
    animation-delay: 0s;
}

.home1-banner-section .vector-img .vector2{
    animation-delay: 1s;
}

.home1-banner-section .vector-img .vector3{
    animation-delay: 2s;
}

.home1-banner-section .vector-img .vector4{
    animation-delay: 3s;
}

/* Animation */
@keyframes floatingVector {

    0%{
        transform: translateY(0px) rotate(0deg);
    }

    50%{
        transform: translateY(-14px) rotate(3deg);
    }

    100%{
        transform: translateY(0px) rotate(0deg);
    }

}

.home1-banner-section .search-filter-area {
    border: 1px solid rgba(var(--black-color-opc), 0.1);
    background-color: #FEF8ED;
    border-radius: 30px;
    padding: 37px 60px;
}

@media (max-width: 1199px) {
    .home1-banner-section .search-filter-area {
        padding: 30px 45px;
    }
}

@media (max-width: 991px) {
    .home1-banner-section .search-filter-area {
        padding: 20px;
        border-radius: 20px;
    }
}

@media (max-width: 576px) {
    .home1-banner-section .search-filter-area {
        background-color: #FEF8ED;
        border-radius: 20px;
    }
}

.home1-banner-section .search-filter-area .search-box {
    border: 1px solid rgba(var(--black-color-opc), 0.1);
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 10px;
    padding: 5px 4px 5px 35px;
}

@media (max-width: 991px) {
    .home1-banner-section .search-filter-area .search-box {
        flex-wrap: wrap;
        padding: 0;
        border: unset;
        background: transparent;
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .home1-banner-section .search-filter-area .search-box {
        gap: 17px;
    }
}

@media (max-width: 576px) {
    .home1-banner-section .search-filter-area .search-box {
        padding: 0;
    }
}

.home1-banner-section .search-filter-area .search-box .single-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

@media (max-width: 991px) {
    .home1-banner-section .search-filter-area .search-box .single-search-box {
        padding: 15px 15px;
        border-radius: 10px;
        background-color: var(--white-color);
        width: 100%;
    }
}

@media (max-width: 576px) {
    .home1-banner-section .search-filter-area .search-box .single-search-box {
        position: relative;
    }
}

.home1-banner-section .search-filter-area .search-box .single-search-box .icon2 svg {
    fill: var(--primary-color1);
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input {
    display: flex;
    align-items: center;
    padding-right: 30px;
    border-right: 1px solid var(--primary-color1);
    line-height: 1;
}

@media (max-width: 991px) {
    .home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input {
        padding-right: 0;
        border-right: unset;
        justify-content: space-between;
        width: 100%;
    }
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input label {
    color: #6A6A6A;
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    display: block;
    margin-bottom: 5px;
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown {
    width: 100%;
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .select-input {
    display: flex;
    align-items: center;
    line-height: 1;
    cursor: pointer;
    position: relative;
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .select-input input {
    color: var(--black-color);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0.3px;
    background-color: transparent;
    width: 100%;
    cursor: pointer;
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .select-input input::-moz-placeholder {
    color: var(--title-color);
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .select-input input::placeholder {
    color: var(--title-color);
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .select-input i {
    color: var(--title-color);
    font-weight: 500;
    position: absolute;
    right: 10px;
    top: -8px;
}

@media (max-width: 991px) {
    .home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .select-input i {
        right: 0;
    }
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap {
    padding: 10px 0;
    background-color: var(--white-color);
    border-radius: 5px;
    max-width: 300px;
    min-width: 300px;
    width: 100%;
    max-height: 250px;
    overflow-y: scroll;
    position: absolute;
    top: 50px;
    left: 0;
    z-index: 9;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08);
    display: none;
    transform: scaleY(0);
    transform-origin: top;
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap::-webkit-scrollbar {
    width: 5px;
    /* width of the entire scrollbar */
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap::-webkit-scrollbar-track {
    background: #f5f4f4;
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap::-webkit-scrollbar-thumb {
    background-color: #ddd;
    /* color of the scroll thumb */
    border-radius: 20px;
    /* creates padding around scroll thumb */
}

@media (max-width: 1199px) {
    .home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap {
        max-width: 100%;
        min-width: 100%;
        top: 75px;
    }
}

@media (max-width: 991px) {
    .home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap {
        top: 65px;
    }
}

@media (max-width: 767px) {
    .home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap {
        top: 65px;
    }
}

@media (max-width: 576px) {
    .home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap {
        left: 50%;
    }
}

@media (max-width: 576px) {
    .home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap {
        top: 55px;
    }
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .custom-select-search-area {
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 10px 5px 10px;
    padding-bottom: 5px;
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .custom-select-search-area i {
    color: var(--primary-color1);
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .custom-select-search-area input {
    background-color: transparent;
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 400;
    color: var(--title-color);
    font-size: 14px;
    font-weight: 400;
    width: 100%;
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list {
    padding: 0;
    margin: 0;
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li {
    transition: 0.5s;
    cursor: pointer;
    line-height: 1;
    margin-bottom: 5px;
    padding: 7px 15px;
    border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
    display: block;
    width: 100%;
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li:last-child {
    margin-bottom: 0;
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li .destination h2 {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    font-weight: 500;
    font-size: 14px;
    text-transform: capitalize;
    line-height: 1.4;
    margin-bottom: 0;
}

@media (max-width: 576px) {
    .home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li .destination h2 {
        font-size: 13px;
    }
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li {
    position: relative;
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li::before {
    content: "";
    height: 100%;
    width: 3px;
    background-color: var(--title-color);
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: 0.5s;
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li:hover {
    background: rgba(211, 211, 211, 0.231372549);
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li:hover::before {
    opacity: 1;
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap.active {
    display: block;
    transform: scaleY(1);
    animation: fade-down 0.3s linear;
}

@keyframes fade-down2 {
    0% {
        opacity: 0;
        transform: scaleY(0) translateX(-50%);
        visibility: hidden;
    }
    100% {
        opacity: 1;
        transform: scaleY(1) translateX(-50%);
        visibility: visible;
    }
}

@media (max-width: 576px) {
    .home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap.active {
        transform: scaleY(1) translateX(-50%);
        animation: fade-down2 0.3s linear;
    }
}

.home1-banner-section .search-filter-area .search-box .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap.no-scroll {
    overflow-y: initial;
    max-width: unset;
}

.home1-banner-section .search-filter-area .search-area-wrap {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    width: 100%;
}

@media (max-width: 1399px) {
    .home1-banner-section .search-filter-area .search-area-wrap {
        gap: 100px;
    }
}

@media (max-width: 991px) {
    .home1-banner-section .search-filter-area .search-area-wrap {
        gap: 0;
        background: white;
        padding: 5px 5px 5px 15px;
        border-radius: 10px 0 0 10px;
    }
}

@media (max-width: 767px) {
    .home1-banner-section .search-filter-area .search-area-wrap {
        padding: 10px 10px 15px 10px;
        flex-wrap: wrap;
        gap: 20px;
    }
}

@media (max-width: 576px) {
    .home1-banner-section .search-filter-area .search-area-wrap {
        gap: 25px;
    }
}

.home1-banner-section .search-filter-area .search-area-wrap .search-area {
    display: flex;
    align-items: center;
    padding-left: 34px;
    gap: 12px;
    width: 100%;
}

@media (max-width: 991px) {
    .home1-banner-section .search-filter-area .search-area-wrap .search-area {
        padding-left: 0;
    }
}

@media (max-width: 767px) {
    .home1-banner-section .search-filter-area .search-area-wrap .search-area {
        gap: 8px;
        width: unset;
    }
}

.home1-banner-section .search-filter-area .search-area-wrap .search-area button {
    background: unset;
    line-height: 1;
}

.home1-banner-section .search-filter-area .search-area-wrap .primary-btn1 {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 16px;
    color: var(--primary-color1);
    padding: 20px 34px;
    line-height: 1;
    text-transform: capitalize;
}

@media (max-width: 576px) {
    .home1-banner-section .search-filter-area .search-area-wrap .primary-btn1 {
        min-width: unset;
        width: 100%;
        padding: 17px 26px;
    }
}

.home1-banner-section .search-filter-area .search-area-wrap .primary-btn1:hover {
    color: var(--title-color);
}

.home1-banner-section .search-filter-area .search-area-wrap input {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 14px;
    text-transform: capitalize;
    width: 100%;
    border: none;
    padding: 0;
    line-height: 1;
    max-width: 302px;
}

@media (max-width: 576px) {
    .home1-banner-section .search-filter-area .search-area-wrap input {
        min-width: 225px;
    }
}

.home1-banner-section.style-2 {
    background-color: #F5F5EC;
    position: relative;
    padding: 0;
}

.home1-banner-section.style-2 .banner-content-wrapper {
    padding: 130px 0 130px;
}

@media (max-width: 1199px) {
    .home1-banner-section.style-2 .banner-content-wrapper {
        padding:130px 0 110px;
    }
}

@media (max-width: 991px) {
    .home1-banner-section.style-2 .banner-content-wrapper {
        padding: 150px 0 110px;
    }
}

@media (max-width: 767px) {
    .home1-banner-section.style-2 .banner-content-wrapper {
        padding: 200px 0 100px;
    }
}

@media (max-width: 576px) {
    .home1-banner-section.style-2 .banner-content-wrapper {
        padding: 130px 0 80px;
    }
}

.home1-banner-section.style-2 .banner-content-wrapper .banner-content h1 {
    font-family: var(--font-Almarai);
    font-weight: 800;
    font-size: 62px;
    line-height: 1.2;
    margin-bottom: 63px;
}

@media (max-width: 1399px) {
    .home1-banner-section.style-2 .banner-content-wrapper .banner-content h1 {
        font-size: 70px;
    }
}

@media (max-width: 1199px) {
    .home1-banner-section.style-2 .banner-content-wrapper .banner-content h1 {
        font-size: 62px;
        margin-bottom: 55px;
    }
}

@media (max-width: 991px) {
    .home1-banner-section.style-2 .banner-content-wrapper .banner-content h1 {
        font-size: 53px;
        margin-bottom: 45px;
    }
}

@media (max-width: 767px) {
    .home1-banner-section.style-2 .banner-content-wrapper .banner-content h1 {
        font-size: 51px;
        margin-bottom: 40px;
    }
}

@media (max-width: 576px) {
    .home1-banner-section.style-2 .banner-content-wrapper .banner-content h1 {
        font-size: 42px;
        margin-bottom: 35px;
    }
}

.home1-banner-section.style-2 .banner-content-wrapper .banner-content span {
    position: relative;
    color: #0D6EFD;
}

.home1-banner-section.style-2 .banner-content-wrapper .banner-content span::before {
    display: none;
}

.home1-banner-section.style-2 .banner-content-wrapper .popular-search-list {
    margin-bottom: 40px;
}

@media (max-width: 1199px) {
    .home1-banner-section.style-2 .banner-content-wrapper .popular-search-list {
        margin-bottom: 36px;
    }
}

.home1-banner-section.style-2 .banner-content-wrapper .popular-search-list ul {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 10px;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

@media (max-width: 991px) {
    .home1-banner-section.style-2 .banner-content-wrapper .popular-search-list ul {
        gap: 8px;
        row-gap: 20px;
    }
}

@media (max-width: 576px) {
    .home1-banner-section.style-2 .banner-content-wrapper .popular-search-list ul {
        row-gap: 25px;
    }
}

.home1-banner-section.style-2 .banner-content-wrapper .popular-search-list ul li {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
}

.home1-banner-section.style-2 .banner-content-wrapper .popular-search-list ul li a {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--dark-text-color);
    background-color: var(--white-color);
    padding: 6px 13px;
    border-radius: 100px;
    border: 1px solid rgba(46, 47, 16, 0.0705882353);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    transition: 0.5s;
}

.home1-banner-section.style-2 .banner-content-wrapper .popular-search-list ul li a:hover {
    background-color: var(--primary-color1);
    color: var(--black-color);
}

.home1-banner-section.style-2 .banner-content-wrapper .counter-area-wrap ul {
    display: flex;
    align-items: center;
    gap: 62px;
    padding: 0;
    margin: 0;
    list-style: none;
    flex-wrap: wrap;
}

@media (max-width: 1199px) {
    .home1-banner-section.style-2 .banner-content-wrapper .counter-area-wrap ul {
        gap: 42px;
    }
}

@media (max-width: 991px) {
    .home1-banner-section.style-2 .banner-content-wrapper .counter-area-wrap ul {
        justify-content: space-between;
    }
}

@media (max-width: 576px) {
    .home1-banner-section.style-2 .banner-content-wrapper .counter-area-wrap ul {
        gap: 30px;
    }
}

.home1-banner-section.style-2 .banner-content-wrapper .counter-area-wrap ul li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.home1-banner-section.style-2 .banner-content-wrapper .counter-area-wrap ul li .icon {
    border: none;
    display: flex;
    align-items: center;
}

.home1-banner-section.style-2 .banner-content-wrapper .counter-area-wrap ul li .content>h3 {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--black-color-opc), 0.3);
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    margin-bottom: 8px;
}

@media (max-width: 1199px) {
    .home1-banner-section.style-2 .banner-content-wrapper .counter-area-wrap ul li .content>h3 {
        font-size: 15px;
    }
}

@media (max-width: 991px) {
    .home1-banner-section.style-2 .banner-content-wrapper .counter-area-wrap ul li .content>h3 {
        font-size: 16px;
    }
}

.home1-banner-section.style-2 .banner-content-wrapper .counter-area-wrap ul li .content .number {
    display: flex;
    align-items: center;
}

.home1-banner-section.style-2 .banner-content-wrapper .counter-area-wrap ul li .content .number h3 {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--black-color);
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    margin-bottom: 0;
}

.home1-banner-section.style-2 .banner-content-wrapper .counter-area-wrap ul li .content .number span {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
}

.home1-banner-section.style-2 .banner-img-wrap img {
    max-width: 408px;
    margin-top: 150px;
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .home1-banner-section.style-2 .banner-img-wrap img {
        max-width: 378px;
    }
}

@media (max-width: 1199px) {
    .home1-banner-section.style-2 .banner-img-wrap img {
        max-width: 324px;
    }
}

@media (max-width: 991px) {
    .home1-banner-section.style-2 .banner-img-wrap img {
        display: none;
    }
}

.home1-banner-section.style-2 .vector-img .vector1 {
    width: 105px;
    position: absolute;
    top: 32%;
    left: 4%;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home1-banner-section.style-2 .vector-img .vector1 {
        top: 20%;
        left: 3%;
    }
}

@media (max-width: 1399px) {
    .home1-banner-section.style-2 .vector-img .vector1 {
        top: 19%;
    }
}

@media (max-width: 1199px) {
    .home1-banner-section.style-2 .vector-img .vector1 {
        top: 17%;
        left: 4%;
    }
}

@media (max-width: 991px) {
    .home1-banner-section.style-2 .vector-img .vector1 {
        width: 80px;
    }
}

@media (max-width: 767px) {
    .home1-banner-section.style-2 .vector-img .vector1 {
        top: 13%;
        width: 60px;
    }
}

@media (max-width: 576px) {
    .home1-banner-section.style-2 .vector-img .vector1 {
        top: 9%;
    }
}

.home1-banner-section.style-2 .vector-img .vector2 {
    width: 98px;
    position: absolute;
    top: 77%;
    left: 3%;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home1-banner-section.style-2 .vector-img .vector2 {
        top: 86%;
    }
}

@media (max-width: 1399px) {
    .home1-banner-section.style-2 .vector-img .vector2 {
        top: 86%;
    }
}

@media (max-width: 1199px) {
    .home1-banner-section.style-2 .vector-img .vector2 {
        top: 86%;
        left: 18%;
    }
}

@media (max-width: 991px) {
    .home1-banner-section.style-2 .vector-img .vector2 {
        width: 70px;
        top: 88%;
        left: 5%;
    }
}

@media (max-width: 767px) {
    .home1-banner-section.style-2 .vector-img .vector2 {
        width: 60px;
        top: 90%;
        left: 15%;
    }
}

.home1-banner-section.style-2 .vector-img .vector3 {
    width: 91px;
    position: absolute;
    top: 31%;
    right: 6%;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home1-banner-section.style-2 .vector-img .vector3 {
        top: 21%;
        right: 4%;
    }
}

@media (max-width: 1399px) {
    .home1-banner-section.style-2 .vector-img .vector3 {
        top: 16%;
        right: 5%;
    }
}

@media (max-width: 1199px) {
    .home1-banner-section.style-2 .vector-img .vector3 {
        top: 20%;
        right: 5%;
    }
}

@media (max-width: 991px) {
    .home1-banner-section.style-2 .vector-img .vector3 {
        width: 70px;
    }
}

@media (max-width: 767px) {
    .home1-banner-section.style-2 .vector-img .vector3 {
        width: 60px;
        top: 15%;
    }
}

.home1-banner-section.style-2 .vector-img .vector4 {
    width: 90px;
    position: absolute;
    top: 78%;
    right: 5%;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home1-banner-section.style-2 .vector-img .vector4 {
        top: 53%;
        right: 3%;
    }
}

@media (max-width: 1399px) {
    .home1-banner-section.style-2 .vector-img .vector4 {
        top: 82%;
        right: 33%;
    }
}

@media (max-width: 1199px) {
    .home1-banner-section.style-2 .vector-img .vector4 {
        top: 80%;
        right: 35%;
    }
}

@media (max-width: 991px) {
    .home1-banner-section.style-2 .vector-img .vector4 {
        top: 86%;
        width: 70px;
        right: 6%;
    }
}

@media (max-width: 767px) {
    .home1-banner-section.style-2 .vector-img .vector4 {
        top: 85%;
        width: 60px;
        right: 8%;
    }
}

.home1-banner-section.style-2 .search-filter-area {
    background-color: #FEF8ED;
    max-width: 760px;
    padding: 27px 30px;
    margin-bottom: 55px;
}

@media (max-width: 1399px) {
    .home1-banner-section.style-2 .search-filter-area {
        max-width: 685px;
    }
}

@media (max-width: 1199px) {
    .home1-banner-section.style-2 .search-filter-area {
        margin-bottom: 50px;
    }
}

@media (max-width: 991px) {
    .home1-banner-section.style-2 .search-filter-area {
        max-width: unset;
        padding: 24px;
    }
}

@media (max-width: 767px) {
    .home1-banner-section.style-2 .search-filter-area {
        margin-bottom: 45px;
    }
}

@media (max-width: 576px) {
    .home1-banner-section.style-2 .search-filter-area {
        padding: 15px;
        border-radius: 15px;
    }
}

@media (max-width: 1399px) {
    .home1-banner-section.style-2 .search-filter-area .search-area-wrap {
        gap: 0;
    }
}

@media (max-width: 576px) {
    .home1-banner-section.style-2 .search-filter-area .search-area-wrap {
        gap: 35px;
    }
}

.home1-banner-section.style-2 .search-filter-area .search-area-wrap .search-area {
    gap: 10px;
    padding-left: 25px;
}

@media (max-width: 1399px) {
    .home1-banner-section.style-2 .search-filter-area .search-area-wrap .search-area {
        padding-left: 15px;
    }
}

@media (max-width: 991px) {
    .home1-banner-section.style-2 .search-filter-area .search-area-wrap .search-area {
        padding-left: 0;
    }
}

@media (max-width: 576px) {
    .home1-banner-section.style-2 .search-filter-area .search-area-wrap .search-area {
        gap: 8px;
    }
}

.home1-banner-section.style-2 .search-filter-area .search-area-wrap input {
    font-size: 13px;
}

@media (max-width: 1199px) {
    .home1-banner-section.style-2 .search-filter-area .search-area-wrap input {
        max-width: 255px;
    }
}

@media (max-width: 991px) {
    .home1-banner-section.style-2 .search-filter-area .search-area-wrap input {
        max-width: unset;
    }
}

.home1-banner-section.style-2 .search-filter-area .search-box {
    padding: 5px 4px 5px 25px;
}

@media (max-width: 1199px) {
    .home1-banner-section.style-2 .search-filter-area .search-box {
        padding: 5px 4px 5px 15px;
    }
}

@media (max-width: 991px) {
    .home1-banner-section.style-2 .search-filter-area .search-box {
        padding: 0;
    }
}

.home1-banner-section.style-2 .search-filter-area .search-box .single-search-box .searchbox-input {
    padding-right: 25px;
}

@media (max-width: 1399px) {
    .home1-banner-section.style-2 .search-filter-area .search-box .single-search-box .searchbox-input {
        padding-right: 15px;
    }
}

@media (max-width: 991px) {
    .home1-banner-section.style-2 .search-filter-area .search-box .single-search-box .searchbox-input {
        padding-right: 0;
    }
}

/*========================
  06. Home1 Servcie Start CSS
==========================*/

.home1-recommended-service-section .slider-btn-grp {
    position: relative;
    bottom: 180px;
}

@media (max-width: 1399px) {
    .home1-recommended-service-section .slider-btn-grp {
        bottom: 160px;
    }
}

@media (max-width: 991px) {
    .home1-recommended-service-section .slider-btn-grp {
        bottom: 185px;
    }
}

@media (max-width: 767px) {
    .home1-recommended-service-section .slider-btn-grp {
        display: none;
    }
}

.home1-recommended-service-section .slider-btn-grp .slider-btn {
    position: absolute;
    z-index: 1;
}

.home1-recommended-service-section .slider-btn-grp .slider-btn.service-slider-prev {
    left: -116px;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home1-recommended-service-section .slider-btn-grp .slider-btn.service-slider-prev {
        left: -40px;
    }
}

@media (max-width: 1399px) {
    .home1-recommended-service-section .slider-btn-grp .slider-btn.service-slider-prev {
        left: -40px;
    }
}

@media (max-width: 1199px) {
    .home1-recommended-service-section .slider-btn-grp .slider-btn.service-slider-prev {
        left: -24px;
    }
}

.home1-recommended-service-section .slider-btn-grp .slider-btn.service-slider-next {
    right: -116px;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home1-recommended-service-section .slider-btn-grp .slider-btn.service-slider-next {
        right: -40px;
    }
}

@media (max-width: 1399px) {
    .home1-recommended-service-section .slider-btn-grp .slider-btn.service-slider-next {
        right: -40px;
    }
}

@media (max-width: 1199px) {
    .home1-recommended-service-section .slider-btn-grp .slider-btn.service-slider-next {
        right: -24px;
    }
}

.home1-home-service-section .slider-btn-grp {
    display: flex;
    align-items: center;
    gap: 30px;
}

@media (max-width: 767px) {
    .home1-home-service-section .slider-btn-grp {
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .home1-home-service-section .slider-btn-grp {
        display: none;
    }
}

.home1-home-service-section .slider-btn-grp .slider-btn {
    z-index: 1;
}

.details-btn {
    display: flex;
    align-items: center;
    gap: 6px;
}

.details-btn span {
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    text-transform: capitalize;
    background: linear-gradient(to bottom, var(--title-color) 0%, var(--title-color) 98%);
    background-size: 0px 1.5px;
    background-repeat: no-repeat;
    background-position: right 100%;
    transition: background-size 0.75s;
    padding-bottom: 2px;
}

.details-btn span:hover {
    background-size: 100% 1.5px;
    background-position: 0% 100%;
}

@media (max-width: 576px) {
    .details-btn {
        font-size: 14px;
        gap: 4px;
    }
}

.details-btn svg {
    fill: var(--title-color);
    transition: 0.5s;
}

.service-card {
    border: 1px solid var(--borders-color);
    border-top: unset;
    border-radius: 10px;
}

.service-card .service-img {
    position: relative;
    overflow: hidden;
    display: flex;
    border-radius: 10px;
    transition: all 0.5s ease-out;
}

.service-card .service-img img {
    border-radius: 10px;
    -o-object-fit: cover;
    object-fit: cover;
    transition: all 0.5s ease-out;
}

.service-card .service-img::after {
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) rotate(-45deg);
    content: "";
    z-index: 1;
}

.service-card .service-content {
    padding: 24px 24px 20px;
}

@media (max-width: 1399px) {
    .service-card .service-content {
        padding: 20px 16px 26px;
    }
}

@media (max-width: 1199px) {
    .service-card .service-content {
        padding: 24px 19px 25px;
    }
}

@media (max-width: 991px) {
    .service-card .service-content {
        padding: 20px;
    }
}

@media (max-width: 767px) {
    .service-card .service-content {
        padding: 23px;
    }
}

@media (max-width: 576px) {
    .service-card .service-content {
        padding: 21px 15px 18px;
    }
}

.service-card .service-content h3 {
    margin-bottom: 12px;
    line-height: 1;
}

@media (max-width: 1199px) {
    .service-card .service-content h3 {
        margin-bottom: 8px;
    }
}

@media (max-width: 991px) {
    .service-card .service-content h3 {
        margin-bottom: 8px;
    }
}

@media (max-width: 576px) {
    .service-card .service-content h3 {
        margin-bottom: 4px;
    }
}

.service-card .service-content h3 a {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    transition: 0.5s;
    display: inline-block;
    background: linear-gradient(to bottom, var(--title-color) 0%, var(--title-color) 98%);
    background-size: 0px 1.5px;
    background-repeat: no-repeat;
    background-position: right 100%;
    transition: background-size 0.75s;
}

@media (max-width: 1399px) {
    .service-card .service-content h3 a {
        font-size: 16px;
    }
}

@media (max-width: 1199px) {
    .service-card .service-content h3 a {
        line-height: 1.2;
        font-size: 18px;
    }
}

@media (max-width: 991px) {
    .service-card .service-content h3 a {
        font-size: 18px;
    }
}

.service-card .service-content h3 a:hover {
    background-size: 100% 1.5px;
    background-position: 0% 100%;
}

.service-card .service-content .review-and-price-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.service-card .service-content .review-and-price-area .review-area {
    display: flex;
    align-items: end;
    gap: 5px;
}

.service-card .service-content .review-and-price-area .review-area svg {
    fill: var(--primary-color1);
}

.service-card .service-content .review-and-price-area .review-area strong {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    text-transform: capitalize;
}

.service-card .service-content .review-and-price-area .review-area span {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--title-color-opc), 0.5);
    font-weight: 400;
    font-size: 13px;
    line-height: 1;
    text-transform: capitalize;
}

.service-card .service-content .review-and-price-area .price-area span {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    text-transform: capitalize;
}

.service-card:hover .service-img img {
    transform: scale(1.1);
}

.service-card:hover .service-img::after {
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

/*================================
  07. Home1 Offer Banner Start CSS
==================================*/

.home1-offer-banner-section .offer-banner-wrapper {
    background: url(../img/home1/offer-banner-img.png), linear-gradient(180deg, var(--primary-color1) 0%, var(--primary-color1) 100%);
    padding: 41px 0;
    border-radius: 10px;
    position: relative;
}

@media (max-width: 767px) {
    .home1-offer-banner-section .offer-banner-wrapper {
        padding: 30px 20px;
    }
}

.home1-offer-banner-section .offer-banner-wrapper .offer-content h4 {
    font-family: var(--font-Almarai);
    font-weight: 700;
    font-size: 27px;
    line-height: 1;
    text-transform: capitalize;
    margin-bottom: 16px;
}

@media (max-width: 991px) {
    .home1-offer-banner-section .offer-banner-wrapper .offer-content h4 {
        font-size: 23px;
        margin-bottom: 14px;
    }
}

@media (max-width: 576px) {
    .home1-offer-banner-section .offer-banner-wrapper .offer-content h4 {
        font-size: 21px;
        line-height: 1.2;
    }
}

.home1-offer-banner-section .offer-banner-wrapper .offer-content p {
    font-family: var(--font-Almarai);
    color: rgb(0, 0, 0);
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    text-transform: capitalize;
    margin-bottom: 34px;
}

@media (max-width: 991px) {
    .home1-offer-banner-section .offer-banner-wrapper .offer-content p {
        font-size: 15px;
        margin-bottom: 25px;
    }
}

@media (max-width: 576px) {
    .home1-offer-banner-section .offer-banner-wrapper .offer-content p {
        margin-bottom: 20px;
    }
}

.home1-offer-banner-section .offer-banner-wrapper .offer-content .primary-btn1 {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
    padding: 14px 20px;
    text-transform: unset;
}

@media (max-width: 576px) {
    .home1-offer-banner-section .offer-banner-wrapper .offer-content .primary-btn1 {
        font-size: 14px;
        padding: 12px 17px;
    }
}

.home1-offer-banner-section .offer-banner-wrapper .offer-content .primary-btn1::after {
    background-color: var(--white-color);
}

.home1-offer-banner-section .offer-banner-wrapper .vector1 {
    width: 228px;
    position: absolute;
    top: 0;
    left: 45px;
}

@media (max-width: 1199px) {
    .home1-offer-banner-section .offer-banner-wrapper .vector1 {
        width: 190px;
        top: 14px;
        left: 25px;
    }
}

@media (max-width: 991px) {
    .home1-offer-banner-section .offer-banner-wrapper .vector1 {
        width: 170px;
        top: 16px;
        left: 10px;
    }
}

@media (max-width: 767px) {
    .home1-offer-banner-section .offer-banner-wrapper .vector1 {
        width: 120px;
        top: 48px;
        left: 10px;
    }
}

@media (max-width: 576px) {
    .home1-offer-banner-section .offer-banner-wrapper .vector1 {
        display: none;
    }
}

.home1-offer-banner-section .offer-banner-wrapper .vector2 {
    width: 153px;
    position: absolute;
    top: 50px;
    right: 112px;
}

@media (max-width: 1199px) {
    .home1-offer-banner-section .offer-banner-wrapper .vector2 {
        width: 130px;
        top: 65px;
        right: 50px;
    }
}

@media (max-width: 991px) {
    .home1-offer-banner-section .offer-banner-wrapper .vector2 {
        width: 110px;
        top: 71px;
        right: 25px;
    }
}

@media (max-width: 767px) {
    .home1-offer-banner-section .offer-banner-wrapper .vector2 {
        width: 80px;
        top: 82px;
        right: 22px;
    }
}

@media (max-width: 576px) {
    .home1-offer-banner-section .offer-banner-wrapper .vector2 {
        display: none;
    }
}

/*================================
 08. Home1 Trending Service Start CSS
==================================*/

@media (max-width: 991px) {
    .home1-trending-service-section .service-list-and-offer-img {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .home1-trending-service-section .service-list-and-offer-img {
        display: unset;
    }
}

.home1-trending-service-section .service-list-and-offer-img .service-list-wrap {
    border: 1px solid var(--borders-color);
    border-left: unset;
    padding: 30px 18px 36px 0;
}

@media (max-width: 1399px) {
    .home1-trending-service-section .service-list-and-offer-img .service-list-wrap {
        padding: 20px 6px 28px 0;
    }
}

@media (max-width: 1199px) {
    .home1-trending-service-section .service-list-and-offer-img .service-list-wrap {
        padding: 30px 6px 30px 0;
    }
}

@media (max-width: 991px) {
    .home1-trending-service-section .service-list-and-offer-img .service-list-wrap {
        border-left: 1px solid var(--borders-color);
        padding: 29px 22px;
    }
}

@media (max-width: 767px) {
    .home1-trending-service-section .service-list-and-offer-img .service-list-wrap {
        padding: 29px 22px;
    }
}

@media (max-width: 576px) {
    .home1-trending-service-section .service-list-and-offer-img .service-list-wrap {
        padding: 19px;
    }
}

.home1-trending-service-section .service-list-and-offer-img .service-list-wrap .category-list {
    margin-bottom: 36px;
}

@media (min-width: 768px) and (max-width: 991px) {
    .home1-trending-service-section .service-list-and-offer-img .service-list-wrap .category-list {
        margin-bottom: 97px;
    }
}

@media (max-width: 576px) {
    .home1-trending-service-section .service-list-and-offer-img .service-list-wrap .category-list {
        margin-bottom: 25px;
    }
}

.home1-trending-service-section .service-list-and-offer-img .service-list-wrap .category-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 18px;
}

@media (max-width: 1399px) {
    .home1-trending-service-section .service-list-and-offer-img .service-list-wrap .category-list ul {
        gap: 5px;
        row-gap: 18px;
    }
}

@media (max-width: 1199px) {
    .home1-trending-service-section .service-list-and-offer-img .service-list-wrap .category-list ul {
        gap: 15px;
        row-gap: 20px;
    }
}

@media (max-width: 991px) {
    .home1-trending-service-section .service-list-and-offer-img .service-list-wrap .category-list ul {
        gap: 10px;
        row-gap: 18px;
    }
}

@media (max-width: 767px) {
    .home1-trending-service-section .service-list-and-offer-img .service-list-wrap .category-list ul {
        gap: 10px;
        row-gap: 18px;
    }
}

.home1-trending-service-section .service-list-and-offer-img .service-list-wrap .category-list ul li a {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    font-weight: 600;
    font-size: 14px;
    line-height: 32px;
    padding: 8px 15px;
    border: 1px solid rgba(var(--black-color-opc), 0.1);
    border-radius: 30px;
    transition: 0.35s;
}

@media (max-width: 1399px) {
    .home1-trending-service-section .service-list-and-offer-img .service-list-wrap .category-list ul li a {
        padding: 6px 9px;
    }
}

@media (max-width: 1199px) {
    .home1-trending-service-section .service-list-and-offer-img .service-list-wrap .category-list ul li a {
        padding: 6px 13px;
    }
}

@media (max-width: 991px) {
    .home1-trending-service-section .service-list-and-offer-img .service-list-wrap .category-list ul li a {
        padding: 8px 15px;
    }
}

@media (max-width: 767px) {
    .home1-trending-service-section .service-list-and-offer-img .service-list-wrap .category-list ul li a {
        padding: 8px 15px;
    }
}

.home1-trending-service-section .service-list-and-offer-img .service-list-wrap .category-list ul li a:hover {
    background-color: var(--primary-color1);
    color: var(--title-color);
}

.home1-trending-service-section .service-list-and-offer-img .special-offer {
    padding: 10px 10px 0 0;
    border-right: 1px solid var(--borders-color);
}

@media (max-width: 991px) {
    .home1-trending-service-section .service-list-and-offer-img .special-offer {
        padding: 0;
        border: none;
    }
}

.home1-trending-service-section .service-list-and-offer-img .special-offer img {
    border-radius: 5px;
}

@media (min-width: 768px) and (max-width: 991px) {
    .home1-trending-service-section .service-list-and-offer-img .special-offer img {
        border-radius: unset;
    }
}

.home1-trending-service-section .section-title h4 {
    margin-bottom: 0;
}

/*================================
 09. Home1 Process Start CSS
==================================*/

.home1-process-section .home1-process-slider-wrap {
    position: relative;
}

.home1-process-section .home1-process-slider-wrap .progress-pagination {
    position: relative;
    background: #CDCDCD;
    position: absolute;
    top: 31%;
    left: 0;
    height: 2px;
}

@media (max-width: 767px) {
    .home1-process-section .home1-process-slider-wrap .progress-pagination {
        top: 35%;
    }
}

@media (max-width: 576px) {
    .home1-process-section .home1-process-slider-wrap .progress-pagination {
        top: 46%;
    }
}

@media (max-width: 576px) {
    .home1-process-section .home1-process-slider-wrap .progress-pagination {
        top: 34%;
    }
}

.home1-process-section .home1-process-slider-wrap .progress-pagination .swiper-pagination-progressbar-fill {
    background: var(--primary-color1);
}

.home1-process-section .home1-process-slider-wrap .single-process.active span {
    color: black;
    background-color: var(--primary-color1);
}

.home1-process-section .service-video-wrap {
    background: linear-gradient(180deg, rgba(11, 12, 12, 0.3) 0%, rgba(11, 12, 12, 0.3) 100%), url(../img/home1/service-video-area.png);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    padding: 182px 0;
}

@media (max-width: 1199px) {
    .home1-process-section .service-video-wrap {
        padding: 160px 0;
    }
}

@media (max-width: 991px) {
    .home1-process-section .service-video-wrap {
        padding: 140px 0;
    }
}

@media (max-width: 576px) {
    .home1-process-section .service-video-wrap {
        padding: 120px 0;
        border-radius: 15px;
    }
}

.home1-process-section .service-video-wrap .video-and-content {
    text-align: center;
}

.home1-process-section .service-video-wrap .video-and-content h4 {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--white-color);
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 16px;
}

@media (max-width: 576px) {
    .home1-process-section .service-video-wrap .video-and-content h4 {
        font-size: 14px;
        margin-bottom: 15px;
    }
}

.single-process .step-number span {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--white-color);
    background-color: var(--title-color);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    padding: 6px 29px;
    border-radius: 5px;
    display: inline-block;
    margin-bottom: 52px;
}

@media (max-width: 991px) {
    .single-process .step-number span {
        margin-bottom: 45px;
        padding: 8px 22px;
    }
}

@media (max-width: 767px) {
    .single-process .step-number span {
        margin-bottom: 50px;
    }
}

@media (max-width: 576px) {
    .single-process .step-number span {
        margin-bottom: 45px;
    }
}

.single-process .step-number span.active {
    color: var(--title-color);
    background-color: var(--primary-color1);
}

.single-process .content h3 {
    font-family: var(--font-Hanken-Grotesk);
    color: #000000;
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    text-transform: capitalize;
    margin-bottom: 14px;
}

@media (max-width: 1199px) {
    .single-process .content h3 {
        font-size: 27px;
        margin-bottom: 15px;
    }
}

@media (max-width: 991px) {
    .single-process .content h3 {
        font-size: 25px;
        margin-bottom: 12px;
    }
}

@media (max-width: 767px) {
    .single-process .content h3 {
        font-size: 26px;
        margin-bottom: 15px;
    }
}

@media (max-width: 576px) {
    .single-process .content h3 {
        font-size: 24px;
        margin-bottom: 12px;
    }
}

.single-process .content p {
    font-family: var(--font-Hanken-Grotesk);
    color: #000000;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 0;
    max-width: 312px;
}

@media (max-width: 991px) {
    .single-process .content p {
        font-size: 14px;
        line-height: 1.5;
    }
}

@media (max-width: 767px) {
    .single-process .content p {
        font-size: 15px;
        line-height: 1.6;
    }
}

.video-area {
    cursor: pointer;
    display: inline-block;
}

.video-area .icon {
    position: relative;
}

.video-area .icon .video-circle {
    stroke: var(--white-color);
    fill: none;
    transition: 0.5s;
}

@media (max-width: 576px) {
    .video-area .icon .video-circle {
        width: 68px;
    }
}

.video-area .icon .video-circle .top-half {
    stroke-dasharray: 430;
    stroke-dashoffset: 320;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}

.video-area .icon .play-icon {
    fill: var(--white-color);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-left: 2px;
}

@media (max-width: 576px) {
    .video-area .icon .play-icon {
        width: 20px;
    }
}

.video-area:hover .icon .video-circle .top-half {
    stroke-dashoffset: 0;
}

/*================================
 10. Home1 Choose us Start CSS
==================================*/

@media (max-width: 767px) {
    .home1-choose-us-section .section-title h2 {
        line-height: 1.2;
    }
}

.home1-choose-us-section .choose-us-img-wrap {
    -webkit-mask-image: url(../img/home1/choose-us-mask.png);
    mask-image: url(../img/home1/choose-us-mask.png);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.home1-choose-us-section .choose-us-img-wrap img {
    -o-object-fit: cover;
    object-fit: cover;
}

.home1-choose-us-section.style-2 {
    position: relative;
}

.home1-choose-us-section.style-2 .section-title .sub-title {
    padding: 10px 15px;
}

.home1-choose-us-section.style-2 .why-choose-section-list .single-list li .icon {
    background-color: var(--primary-color4);
}

.home1-choose-us-section.style-2 .why-choose-section-list .single-list li .icon svg {
    fill: var(--white-color);
}

.home1-choose-us-section.style-2 .home4-choose-us-img-wrap {
    position: relative;
}

.home1-choose-us-section.style-2 .home4-choose-us-img-wrap .top-img {
    margin-bottom: 30px;
}

@media (max-width: 576px) {
    .home1-choose-us-section.style-2 .home4-choose-us-img-wrap .top-img {
        margin-bottom: 20px;
    }
}

.home1-choose-us-section.style-2 .home4-choose-us-img-wrap img {
    border-radius: 10px;
}

.home1-choose-us-section.style-2 .circular-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 576px) {
    .home1-choose-us-section.style-2 .circular-text {
        display: none;
    }
}

.why-choose-section-list .single-list {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

.why-choose-section-list .single-list::after {
    content: "";
    width: 1px;
    height: 81%;
    background-color: var(--borders-color);
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

@media (max-width: 576px) {
    .why-choose-section-list .single-list::after {
        left: 23px;
    }
}

.why-choose-section-list .single-list li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 70px;
}

@media (max-width: 1399px) {
    .why-choose-section-list .single-list li {
        margin-bottom: 45px;
    }
}

@media (max-width: 991px) {
    .why-choose-section-list .single-list li {
        margin-bottom: 50px;
    }
}

@media (max-width: 767px) {
    .why-choose-section-list .single-list li {
        gap: 17px;
        margin-bottom: 40px;
    }
}

@media (max-width: 576px) {
    .why-choose-section-list .single-list li {
        gap: 14px;
        margin-bottom: 35px;
    }
}

.why-choose-section-list .single-list li .icon {
    max-width: 60px;
    min-width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--primary-color1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

@media (max-width: 576px) {
    .why-choose-section-list .single-list li .icon {
        max-width: 50px;
        min-width: 50px;
        height: 50px;
    }
}

.why-choose-section-list .single-list li .icon svg {
    width: 35px;
    height: 35px;
    fill: var(--dark-text-color);
}

@media (max-width: 576px) {
    .why-choose-section-list .single-list li .icon svg {
        width: 30px;
        height: 30px;
    }
}

.why-choose-section-list .single-list li .content h3 {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 700;
    font-size: 28px;
    text-transform: capitalize;
    line-height: 1;
    color: var(--title-color);
    margin-bottom: 15px;
}

@media (max-width: 1199px) {
    .why-choose-section-list .single-list li .content h3 {
        font-size: 24px;
        margin-bottom: 12px;
    }
}

@media (max-width: 991px) {
    .why-choose-section-list .single-list li .content h3 {
        font-size: 26px;
    }
}

@media (max-width: 767px) {
    .why-choose-section-list .single-list li .content h3 {
        font-size: 24px;
    }
}

@media (max-width: 576px) {
    .why-choose-section-list .single-list li .content h3 {
        font-size: 23px;
        margin-bottom: 15px;
    }
}

.why-choose-section-list .single-list li .content p {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(var(--title-color-opc), 0.7);
    margin-bottom: 0;
}

@media (max-width: 576px) {
    .why-choose-section-list .single-list li .content p {
        line-height: 1.4;
        font-size: 14px;
    }
}

.why-choose-section-list .single-list li:last-child {
    margin-bottom: 0;
}

/*================================
 11. Home1 Counter Start CSS
==================================*/

.home1-counter-section {
    position: relative;
    z-index: 1;
}

.home1-counter-section .counter-wrap {
    padding: 52px 80px;
    border: 1px solid rgba(var(--black-color-opc), 0.1);
    background-color: #F4F9FF;
    border-radius: 20px;
}

@media (max-width: 991px) {
    .home1-counter-section .counter-wrap {
        padding: 40px;
    }
}

@media (max-width: 767px) {
    .home1-counter-section .counter-wrap {
        padding: 30px;
    }
}

@media (max-width: 576px) {
    .home1-counter-section .counter-wrap {
        border-radius: 15px;
    }
}

.home1-counter-section .counter-wrap .divider {
    position: relative;
}

.home1-counter-section .counter-wrap .divider::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -48px;
    width: 2px;
    height: 57px;
    background-color: rgba(var(--primary-color1-opc), 0.5);
}

@media (max-width: 1399px) {
    .home1-counter-section .counter-wrap .divider::before {
        right: -42px;
    }
}

@media (max-width: 1199px) {
    .home1-counter-section .counter-wrap .divider::before {
        right: -50px;
    }
}

@media (max-width: 991px) {
    .home1-counter-section .counter-wrap .divider::before {
        display: none;
    }
}

.home1-counter-section .counter-wrap .divider:last-child {
    display: none;
}

.home1-counter-section .counter-wrap .single-countdown .number {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

@media (max-width: 991px) {
    .home1-counter-section .counter-wrap .single-countdown .number {
        margin-bottom: 10px;
    }
}

@media (max-width: 767px) {
    .home1-counter-section .counter-wrap .single-countdown .number {
        margin-bottom: 8px;
    }
}

.home1-counter-section .counter-wrap .single-countdown .number h2,
.home1-counter-section .counter-wrap .single-countdown .number span {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px var(--title-color);
    font-family: var(--font-Almarai);
    font-weight: 800;
    font-size: 55px;
    line-height: 1;
    margin-bottom: 0;
}

@media (max-width: 1199px) {
    .home1-counter-section .counter-wrap .single-countdown .number h2,
    .home1-counter-section .counter-wrap .single-countdown .number span {
        font-size: 50px;
    }
}

@media (max-width: 991px) {
    .home1-counter-section .counter-wrap .single-countdown .number h2,
    .home1-counter-section .counter-wrap .single-countdown .number span {
        font-size: 45px;
    }
}

@media (max-width: 576px) {
    .home1-counter-section .counter-wrap .single-countdown .number h2,
    .home1-counter-section .counter-wrap .single-countdown .number span {
        font-size: 48px;
    }
}

.home1-counter-section .counter-wrap .single-countdown span {
    color: rgba(var(--title-color-opc), 0.6);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .home1-counter-section .counter-wrap .single-countdown span {
        font-size: 13px;
    }
}

@media (max-width: 991px) {
    .home1-counter-section .counter-wrap .single-countdown span {
        font-size: 14px;
    }
}

/*================================
 12. Home1 Testimonial Start CSS
==================================*/

@media (max-width: 767px) {
    .home1-testimonial-section .section-title h2 {
        line-height: 1.2;
    }
}

.home1-testimonial-section .home1-testimonial-slider .swiper-slide-active .testimonial-card>span {
    animation: fadeInDown 1.7s;
}

.home1-testimonial-section .home1-testimonial-slider .swiper-slide-active .testimonial-card p {
    animation: fadeInDown 1.7s;
}

.home1-testimonial-section .home1-testimonial-slider .swiper-slide-active .testimonial-card .author-area {
    animation: fadeInUp 1.7s;
}

.home1-testimonial-section .testimonial-img-and-vedio-area {
    position: relative;
    border: 1px solid var(--borders-color);
    border-radius: 20px;
    padding: 5px;
}

.home1-testimonial-section .testimonial-img-and-vedio-area img {
    border-radius: 20px;
    -o-object-fit: cover;
    object-fit: cover;
    min-height: 413px;
}

@media (max-width: 1399px) {
    .home1-testimonial-section .testimonial-img-and-vedio-area img {
        min-height: 356px;
    }
}

@media (max-width: 991px) {
    .home1-testimonial-section .testimonial-img-and-vedio-area img {
        min-height: unset;
    }
}

.home1-testimonial-section .testimonial-img-and-vedio-area .video-area-wrap {
    background-color: rgba(255, 206, 10, 0.2);
    padding: 5px;
    position: absolute;
    border-radius: 50%;
    top: 169px;
    left: 165px;
}

@media (max-width: 1399px) {
    .home1-testimonial-section .testimonial-img-and-vedio-area .video-area-wrap {
        top: 150px;
        left: 135px;
    }
}

@media (max-width: 1199px) {
    .home1-testimonial-section .testimonial-img-and-vedio-area .video-area-wrap {
        left: 104px;
    }
}

@media (max-width: 991px) {
    .home1-testimonial-section .testimonial-img-and-vedio-area .video-area-wrap {
        left: 300px;
        top: 270px;
    }
}

@media (max-width: 767px) {
    .home1-testimonial-section .testimonial-img-and-vedio-area .video-area-wrap {
        left: 210px;
        top: 190px;
    }
}

@media (max-width: 576px) {
    .home1-testimonial-section .testimonial-img-and-vedio-area .video-area-wrap {
        left: 120px;
        top: 115px;
    }
}

.home1-testimonial-section .testimonial-img-and-vedio-area .video-area-wrap a {
    border-radius: 50%;
    backdrop-filter: blur(3px);
}

.home1-testimonial-section .testimonial-card {
    padding: 45px;
    border: 1px solid var(--borders-color);
    border-radius: 20px;
}

@media (max-width: 1399px) {
    .home1-testimonial-section .testimonial-card {
        padding: 36px;
    }
}

@media (max-width: 991px) {
    .home1-testimonial-section .testimonial-card {
        padding: 30px;
    }
}

@media (max-width: 767px) {
    .home1-testimonial-section .testimonial-card {
        padding: 23px;
    }
}

.home1-testimonial-section .testimonial-card .quote {
    margin-bottom: 37px;
}

@media (max-width: 991px) {
    .home1-testimonial-section .testimonial-card .quote {
        margin-bottom: 30px;
    }
}

.home1-testimonial-section .testimonial-card .quote path {
    stroke: rgba(var(--title-color-opc), 0.3);
}

.home1-testimonial-section .testimonial-card>span {
    color: var(--primary-color1);
    font-family: var(--font-Almarai);
    font-weight: 400;
    font-size: 15px;
    line-height: 100%;
    text-transform: uppercase;
    margin-bottom: 30px;
    display: block;
}

@media (min-width: 768px) and (max-width: 991px) {
    .home1-testimonial-section .testimonial-card>span {
        font-size: 15px;
    }
}

@media (max-width: 991px) {
    .home1-testimonial-section .testimonial-card>span {
        margin-bottom: 15px;
    }
}

@media (max-width: 576px) {
    .home1-testimonial-section .testimonial-card>span {
        font-size: 15px;
        margin-bottom: 15px;
        line-height: 1.4;
    }
}

.home1-testimonial-section .testimonial-card p {
    font-family: var(--font-Hanken-Grotesk);
    color: #000000;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.7;
    text-transform: capitalize;
    padding-bottom: 38px;
    margin-bottom: 33px;
    border-bottom: 1px solid rgba(var(--black-color-opc), 0.1);
}

@media (max-width: 1399px) {
    .home1-testimonial-section .testimonial-card p {
        padding-bottom: 30px;
        margin-bottom: 27px;
        font-size: 17px;
    }
}

@media (max-width: 991px) {
    .home1-testimonial-section .testimonial-card p {
        font-size: 17px;
        line-height: 1.7;
        padding-bottom: 20px;
        margin-bottom: 25px;
    }
}

@media (max-width: 767px) {
    .home1-testimonial-section .testimonial-card p {
        font-size: 16px;
        line-height: 1.6;
        padding-bottom: 16px;
        margin-bottom: 21px;
    }
}

@media (max-width: 576px) {
    .home1-testimonial-section .testimonial-card p {
        font-size: 17px;
        padding-bottom: 25px;
        margin-bottom: 25px;
    }
}

.home1-testimonial-section .testimonial-card .author-area h3 {
    color: var(--title-color);
    font-family: var(--font-Almarai);
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .home1-testimonial-section .testimonial-card .author-area h3 {
        font-size: 17px;
    }
}

@media (max-width: 767px) {
    .home1-testimonial-section .testimonial-card .author-area h3 {
        font-size: 16px;
    }
}

.home1-testimonial-section .testimonial-card .author-area h3 span {
    font-family: var(--font-Almarai);
    color: var(--text-color);
    font-weight: 400;
    font-size: 21px;
    line-height: 1;
}

@media (max-width: 991px) {
    .home1-testimonial-section .testimonial-card .author-area h3 span {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .home1-testimonial-section .testimonial-card .author-area h3 span {
        font-size: 17px;
    }
}

.home1-testimonial-section .slider-btn-grp {
    display: flex;
    align-items: center;
    gap: 30px;
}

@media (max-width: 767px) {
    .home1-testimonial-section .slider-btn-grp {
        gap: 20px;
    }
}

@media (max-width: 576px) {
    .home1-testimonial-section .slider-btn-grp {
        gap: 15px;
    }
}

@media (max-width: 991px) {
    .home1-testimonial-section .slider-btn-grp {
        display: none;
    }
}

.home1-testimonial-section .slider-btn-grp .slider-btn {
    z-index: 1;
}

/*================================
 13. Home1 Contact Start CSS
==================================*/

.home1-contact-section {
    position: relative;
}

@media (max-width: 576px) {
    .home1-contact-section {
        border-radius: 30px 30px 0 0;
    }
}

.home1-contact-section::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
  background-image: url(../img/home1/contact-bg.png), linear-gradient(180deg, #2B52BC 0%, #2B52BC 100%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 376px;
    z-index: -1;
}

@media (max-width: 1399px) {
    .home1-contact-section::before {
        height: 359px;
    }
}

@media (max-width: 1199px) {
    .home1-contact-section::before {
        height: 280px;
        bottom: 0;
    }
}

@media (max-width: 767px) {
    .home1-contact-section::before {
        top: -15%;
    }
}

@media (max-width: 576px) {
    .home1-contact-section::before {
        height: 300px;
        top: -1%;
    }
}

.home1-contact-section .contact-wrapper {
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.home1-contact-section .contact-wrapper .contact-content {
    max-width: 672px;
    width: 100%;
    padding-bottom: 72px;
}

@media (max-width: 1199px) {
    .home1-contact-section .contact-wrapper .contact-content {
        padding-bottom: 30px;
    }
}

@media (max-width: 991px) {
    .home1-contact-section .contact-wrapper .contact-content {
        text-align: center;
        margin: 0 auto;
        padding-bottom: 35px;
    }
}

@media (max-width: 576px) {
    .home1-contact-section .contact-wrapper .contact-content {
        padding: 30px 0 33px;
    }
}

.home1-contact-section .contact-wrapper .contact-content .sub-title {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    background-color: rgba(117, 114, 253, 0.1);
    border: none;
    border-radius: 5px;
    font-weight: 500;
    font-size: 11px;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 14px;
    padding: 10px 19px;
    display: inline-block;
}

.home1-contact-section .contact-wrapper .contact-content h2 {
    font-family: var(--font-Almarai);
    color: var(--title-color);
    font-weight: 700;
    font-size: 35px;
    line-height: 44px;
    text-transform: capitalize;
    line-height: 1.3;
    margin-bottom: 39px;
}

@media (max-width: 1199px) {
    .home1-contact-section .contact-wrapper .contact-content h2 {
        font-size: 30px;
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    .home1-contact-section .contact-wrapper .contact-content h2 {
        font-size: 28px;
        margin-bottom: 25px;
    }
}

@media (max-width: 576px) {
    .home1-contact-section .contact-wrapper .contact-content h2 {
        font-size: 25px;
    }
}

@media (max-width: 991px) {
    .home1-contact-section .contact-wrapper .contact-left-img img {
        display: none;
    }
}

.home1-contact-section .contact-wrapper .btn-grp {
    display: flex;
    align-items: center;
    gap: 35px;
    position: relative;
}

@media (max-width: 991px) {
    .home1-contact-section .contact-wrapper .btn-grp {
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
    }
}

.home1-contact-section .contact-wrapper .btn-grp .primary-btn1 {
    padding: 21px 39px;
    background: var(--primary-color1);
    color: var(--title-color);
}

@media (max-width: 767px) {
    .home1-contact-section .contact-wrapper .btn-grp .primary-btn1 {
        padding: 18px 30px;
    }
}

@media (max-width: 576px) {
    .home1-contact-section .contact-wrapper .btn-grp .primary-btn1 {
        padding: 18px 23px;
    }
}

.home1-contact-section .contact-wrapper .btn-grp .primary-btn1:hover {
    color: var(--white-color);
}

.home1-contact-section .contact-wrapper .btn-grp .primary-btn1::after {
    background-color: var(--black-color);
}

.home1-contact-section .contact-wrapper .btn-grp .primary-btn1.two {
    padding: 20px 45px;
    background-color: transparent;
    border: 1px solid var(--title-color);
    color: var(--title-color);
}

@media (max-width: 767px) {
    .home1-contact-section .contact-wrapper .btn-grp .primary-btn1.two {
        padding: 17px 40px;
    }
}

@media (max-width: 576px) {
    .home1-contact-section .contact-wrapper .btn-grp .primary-btn1.two {
        padding: 15px 25px;
    }
}

.home1-contact-section .contact-wrapper .btn-grp .primary-btn1.two:hover {
    color: var(--white-color);
}

.home1-contact-section .contact-wrapper .btn-grp .primary-btn1.two::after {
    background-color: var(--black-color);
}

/*================================
 14. Home1 Footer Start CSS
==================================*/

.footer-section {
    background-image: url(../img/home1/footer-bg.png), linear-gradient(180deg, #1A1A1A 0%, #1A1A1A 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.footer-section .footer-wrapper .logo-and-rating-area .footer-logo {
    margin-bottom: 40px;
}

@media (max-width: 767px) {
    .footer-section .footer-wrapper .logo-and-rating-area .footer-logo {
        margin-bottom: 30px;
    }
}

.footer-section .footer-wrapper .logo-and-rating-area .footer-logo a img {
    width: 181px;
}

@media (max-width: 1199px) {
    .footer-section .footer-wrapper .logo-and-rating-area .footer-logo a img {
        width: 160px;
    }
}

@media (max-width: 991px) {
    .footer-section .footer-wrapper .logo-and-rating-area .footer-logo a img {
        width: 150px;
    }
}

@media (max-width: 767px) {
    .footer-section .footer-wrapper .logo-and-rating-area .footer-logo a img {
        width: 140px;
    }
}

.footer-section .footer-wrapper .logo-and-rating-area .content p {
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
    max-width: 361px;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .footer-section .footer-wrapper .logo-and-rating-area .content p {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .footer-section .footer-wrapper .logo-and-rating-area .content p {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 30px;
        max-width: unset;
    }
}

.footer-section .footer-wrapper .logo-and-rating-area .rating-area {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 60px;
    margin-bottom: 50px;
}

@media (max-width: 1399px) {
    .footer-section .footer-wrapper .logo-and-rating-area .rating-area {
        gap: 30px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .footer-section .footer-wrapper .logo-and-rating-area .rating-area {
        flex-wrap: wrap;
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .footer-section .footer-wrapper .logo-and-rating-area .rating-area {
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 40px;
    }
}

@media (max-width: 576px) {
    .footer-section .footer-wrapper .logo-and-rating-area .rating-area {
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 35px;
    }
}

.footer-section .footer-wrapper .logo-and-rating-area .rating-area>li .single-rating {
    display: flex;
    gap: 8px;
}

.footer-section .footer-wrapper .logo-and-rating-area .rating-area>li .single-rating .review {
    line-height: 1;
}

.footer-section .footer-wrapper .logo-and-rating-area .rating-area>li .single-rating .review span {
    color: var(--white-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 8px;
    display: block;
    white-space: nowrap;
}

.footer-section .footer-wrapper .logo-and-rating-area .rating-area>li .single-rating .review img {
    width: 64px;
}

.footer-section .footer-wrapper .logo-and-rating-area .rating-area>li .single-rating .rating {
    line-height: 1;
    margin-top: -1px;
}

.footer-section .footer-wrapper .logo-and-rating-area .rating-area>li .single-rating .rating .star {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 9px;
    line-height: 1;
}

.footer-section .footer-wrapper .logo-and-rating-area .rating-area>li .single-rating .rating .star li i {
    color: #E62415;
    font-size: 12px;
}

.footer-section .footer-wrapper .logo-and-rating-area .rating-area>li .single-rating .rating span {
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}

@media (max-width: 1699px) {
    .footer-section .footer-wrapper .logo-and-rating-area .rating-area>li .single-rating .rating span {
        font-size: 13px;
    }
}

.footer-section .footer-wrapper .logo-and-rating-area .rating-area>li .single-rating.google .rating .star li i {
    color: #FFC107;
}

.footer-section .footer-wrapper .logo-and-rating-area .rating-area>li {
    position: relative;
}

.footer-section .footer-wrapper .logo-and-rating-area .rating-area>li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -30px;
    transform: translateY(-50%);
    background-color: rgba(var(--primary-color1-opc), 0.2);
    width: 1px;
    height: 35px;
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .footer-section .footer-wrapper .logo-and-rating-area .rating-area>li::before {
        left: -15px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .footer-section .footer-wrapper .logo-and-rating-area .rating-area>li::before {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .footer-section .footer-wrapper .logo-and-rating-area .rating-area>li::before {
        left: -16px;
    }
}

@media (max-width: 767px) {
    .footer-section .footer-wrapper .logo-and-rating-area .rating-area>li::before {
        display: none;
    }
}

.footer-section .footer-wrapper .logo-and-rating-area .rating-area>li:first-child::before {
    display: none;
}

.footer-section .footer-wrapper .footer-menu-wrap {
    padding: 40px 0;
}

@media (max-width: 1199px) {
    .footer-section .footer-wrapper .footer-menu-wrap {
        padding: 40px 0;
    }
}

@media (max-width: 991px) {
    .footer-section .footer-wrapper .footer-menu-wrap {
        padding: 40px 0;
    }
}

@media (max-width: 767px) {
    .footer-section .footer-wrapper .footer-menu-wrap {
        padding: 20px 0;
    }
}

@media (max-width: 576px) {
    .footer-section .footer-wrapper .footer-menu-wrap {
        padding: 20px 0;
    }
}

.footer-section .footer-wrapper .footer-menu-wrap .footer-widget .widget-title {
    margin-bottom: 21px;
}

.footer-section .footer-wrapper .footer-menu-wrap .footer-widget .widget-title h3 {
    font-family: var(--font-Almarai);
    color: var(--white-color);
    font-weight: 400;
    font-size: 25px;
    letter-spacing: 0.9px;
    margin-bottom: 0;
    position: relative;
    padding-bottom: 10px;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .footer-section .footer-wrapper .footer-menu-wrap .footer-widget .widget-title h3 {
        font-size: 20px;
    }
}

.footer-section .footer-wrapper .footer-menu-wrap .footer-widget .widget-title h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 107px;
    height: 2px;
    border-radius: 10px;
    opacity: 0.4;
    background: linear-gradient(90.01deg, var(--primary-color1) 0.01%, rgba(255, 206, 10, 0) 102.8%);
}

.footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container {
    display: flex;
    gap: 50px;
}

@media (max-width: 1199px) {
    .footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container {
        gap: 15px;
    }
}

.footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .widget-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .widget-list li {
    margin-bottom: 26px;
    line-height: 1;
    transition: 0.5s;
    position: relative;
    transform: translateX(0);
}

@media (max-width: 991px) {
    .footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .widget-list li {
        margin-bottom: 22px;
    }
}

@media (max-width: 767px) {
    .footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .widget-list li {
        margin-bottom: 20px;
    }
}

.footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .widget-list li:last-child {
    margin-bottom: 0;
}

.footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .widget-list li a {
    color: rgba(var(--white-color-opc), 0.5);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.3;
    letter-spacing: 0.34px;
    transition: 0.5s;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .widget-list li a {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .widget-list li a {
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    .footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .widget-list li a {
        font-size: 14px;
    }
}

.footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .widget-list li a:hover {
    color: var(--primary-color1);
}

.footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .widget-list li::after {
    content: "";
    width: 10px;
    height: 1px;
    background-color: var(--primary-color1);
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: 0.35s;
}

.footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .widget-list li:hover {
    transform: translateX(10px);
}

.footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .widget-list li:hover::after {
    opacity: 1;
}

.footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area {
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 110px;
    position: relative;
}

@media (max-width: 1199px) {
    .footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area {
        gap: 50px;
    }
}

@media (max-width: 991px) {
    .footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area {
        gap: 30px;
    }
}

@media (max-width: 767px) {
    .footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area {
        gap: 13px;
    }
}

@media (max-width: 576px) {
    .footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area {
        gap: 15px;
        flex-wrap: wrap;
    }
}

.footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area>li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 56px;
}

@media (max-width: 991px) {
    .footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area>li {
        margin-bottom: 40px;
    }
}

@media (max-width: 767px) {
    .footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area>li {
        margin-bottom: 15px;
        gap: 10px;
        padding-bottom: 15px;
    }
}

@media (max-width: 576px) {
    .footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area>li {
        gap: 8px;
        border: none;
    }
}

.footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area>li .content span {
    font-family: var(--font-Almarai);
    color: var(--white-color);
    font-weight: 400;
    font-size: 13px;
    line-height: 1;
    display: block;
    margin-bottom: 8px;
}

.footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area>li .content h4 {
    margin-bottom: 0;
    line-height: 1;
}

.footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area>li .content h4 a {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    color: rgba(var(--white-color-opc), 0.5);
    margin-bottom: 0;
    text-decoration: none;
    transition: 0.5s;
}

.footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area>li .content h4 a:hover {
    color: var(--primary-color1);
    transition: 0.5s;
}

@media (max-width: 991px) {
    .footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area>li .content h4 a {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area>li .content h4 a {
        font-size: 14px;
    }
}

.footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area>li .icon {
    background: none;
    border: none;
}

.footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area>li .icon svg {
    fill: none;
    stroke: var(--white-color);
    width: 33px;
    height: 33px;
}

@media (max-width: 576px) {
    .footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area>li .icon svg {
        width: 33px;
        height: 32px;
    }
}

.footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area>li::before {
    content: "";
    position: absolute;
    background: rgba(var(--white-color-opc), 0.08);
    width: 120px;
    height: 1px;
    bottom: 29%;
}

.footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area>li:first-child::before {
    bottom: 71%;
}

.footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area>li:last-child {
    margin-bottom: 0;
}

.footer-section .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area>li:last-child::before {
    bottom: -12%;
}

.footer-section .footer-wrapper .footer-menu-wrap .social-area h6,
.footer-section .footer-wrapper .footer-menu-wrap .social-area h2 {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--white-color);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.2;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--white-color);
    display: inline-block;
    margin-bottom: 15px;
}

.footer-section .footer-wrapper .footer-menu-wrap .social-area .social-list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 50px;
}

@media (max-width: 991px) {
    .footer-section .footer-wrapper .footer-menu-wrap .social-area .social-list {
        gap: 45px;
    }
}

@media (max-width: 767px) {
    .footer-section .footer-wrapper .footer-menu-wrap .social-area .social-list {
        justify-content: start;
        gap: 40px;
    }
}

@media (max-width: 576px) {
    .footer-section .footer-wrapper .footer-menu-wrap .social-area .social-list {
        gap: 45px;
    }
}

.footer-section .footer-wrapper .footer-menu-wrap .social-area .social-list li {
    height: 20px;
}

.footer-section .footer-wrapper .footer-menu-wrap .social-area .social-list li a i {
    color: rgba(255, 255, 255, 0.5);
    font-size: 18px;
    transition: 0.5s;
}

.footer-section .footer-wrapper .footer-menu-wrap .social-area .social-list li:hover a i {
    color: var(--primary-color1);
}

.footer-section .footer-wrapper .footer-bottom-wrap {
    padding: 26px 0;
    background-color: #1A1A1A;
    border-top: 1px solid rgba(var(--white-color-opc), 0.1);
}

@media (max-width: 991px) {
    .footer-section .footer-wrapper .footer-bottom-wrap {
        padding: 25px 0;
    }
}

.footer-section .footer-wrapper .footer-bottom-wrap .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 991px) {
    .footer-section .footer-wrapper .footer-bottom-wrap .footer-bottom {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }
}

.footer-section .footer-wrapper .footer-bottom-wrap .footer-bottom .copyright-area p {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--white-color-opc), 0.5);
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    margin-bottom: 0;
}

@media (max-width: 576px) {
    .footer-section .footer-wrapper .footer-bottom-wrap .footer-bottom .copyright-area p {
        text-align: center;
    }
}

.footer-section .footer-wrapper .footer-bottom-wrap .footer-bottom .copyright-area p a {
    color: var(--white-color);
    font-weight: 700;
    transition: 0.5s;
}

.footer-section .footer-wrapper .footer-bottom-wrap .footer-bottom .copyright-area p a:hover {
    color: var(--primary-color1);
}

.footer-section .footer-wrapper .footer-bottom-wrap .footer-bottom .footer-bottom-right ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
    flex-wrap: wrap;
    line-height: 1;
}

@media (max-width: 991px) {
    .footer-section .footer-wrapper .footer-bottom-wrap .footer-bottom .footer-bottom-right ul {
        gap: 30px;
    }
}

@media (max-width: 576px) {
    .footer-section .footer-wrapper .footer-bottom-wrap .footer-bottom .footer-bottom-right ul {
        gap: 15px;
        justify-content: center;
    }
}

.footer-section .footer-wrapper .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li a {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--white-color);
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0.3px;
    transition: 0.5s;
}

.footer-section .footer-wrapper .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li a:hover {
    color: var(--primary-color1);
}

.footer-section.home3-footer {
    margin-top: -68px;
}

.footer-section.home3-footer .footer-wrapper .footer-menu-wrap {
    padding: 200px 0 130px;
}

@media (max-width: 991px) {
    .footer-section.home3-footer .footer-wrapper .footer-menu-wrap {
        padding: 180px 0 100px;
    }
}

.footer-section.home3-footer .footer-wrapper .footer-menu-wrap .social-area>ul li a:hover i {
    color: var(--primary-color3);
}

.footer-section.home3-footer .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .widget-list li a:hover {
    color: var(--primary-color3);
    transition: all 0.3s ease;
}

.footer-section.home3-footer .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .widget-list li::after {
    background-color: var(--primary-color3);
}

.footer-section.home3-footer .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area li .content h4 a:hover {
    color: var(--primary-color3);
}

.footer-section.home3-footer .footer-wrapper .footer-menu-wrap .footer-widget .widget-title {
    position: relative;
}

.footer-section.home3-footer .footer-wrapper .footer-menu-wrap .footer-widget .widget-title h3::after {
    background: linear-gradient(90.01deg, var(--primary-color3) 0.01%, rgba(255, 206, 10, 0) 102.8%);
}

.footer-section.home3-footer .footer-wrapper .footer-bottom-wrap .footer-bottom .copyright-area p a:hover {
    color: var(--primary-color3);
}

.footer-section.home3-footer .footer-wrapper .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li a:hover {
    color: var(--primary-color3);
}

.footer-section.home4-footer .footer-wrapper .footer-menu-wrap .social-area .social-list li a i:hover {
    color: var(--primary-color4);
}

.footer-section.home4-footer .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .widget-list li a:hover {
    color: var(--primary-color4);
    transition: all 0.3s ease;
}

.footer-section.home4-footer .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .widget-list li::after {
    background-color: var(--primary-color4);
}

.footer-section.home4-footer .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area li .content h4 a:hover {
    color: var(--primary-color4);
}

.footer-section.home4-footer .footer-wrapper .footer-menu-wrap .footer-widget .widget-title h3::after {
    background: linear-gradient(90.01deg, var(--primary-color4) 0.01%, rgba(255, 206, 10, 0) 102.8%);
}

.footer-section.home4-footer .footer-wrapper .footer-bottom-wrap .footer-bottom .copyright-area p a:hover {
    color: var(--primary-color4);
}

.footer-section.home4-footer .footer-wrapper .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li a:hover {
    color: var(--primary-color4);
}

.footer-section.home5-footer .footer-wrapper .footer-menu-wrap .social-area .social-list li a i:hover {
    color: var(--primary-color5);
}

.footer-section.home5-footer .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .widget-list li a:hover {
    color: var(--primary-color5);
    transition: all 0.3s ease;
}

.footer-section.home5-footer .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .widget-list li::after {
    background-color: var(--primary-color5);
}

.footer-section.home5-footer .footer-wrapper .footer-menu-wrap .footer-widget .menu-container .contact-area li .content h4 a:hover {
    color: var(--primary-color5);
}

.footer-section.home5-footer .footer-wrapper .footer-menu-wrap .footer-widget .widget-title h3::after {
    background: linear-gradient(90.01deg, var(--primary-color5) 0.01%, rgba(255, 206, 10, 0) 102.8%);
}

.footer-section.home5-footer .footer-wrapper .footer-bottom-wrap .footer-bottom .copyright-area p a:hover {
    color: var(--primary-color5);
}

.footer-section.home5-footer .footer-wrapper .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li a:hover {
    color: var(--primary-color5);
}

/*================================
 15. Home2 Service Start CSS
==================================*/

.home2-service-section .section-title h2 {
    text-transform: uppercase;
}

.home2-service-section .slider-btn-grp {
    position: relative;
    bottom: 155px;
}

@media (max-width: 1399px) {
    .home2-service-section .slider-btn-grp {
        bottom: 110px;
    }
}

@media (max-width: 1199px) {
    .home2-service-section .slider-btn-grp {
        bottom: 125px;
    }
}

@media (max-width: 991px) {
    .home2-service-section .slider-btn-grp {
        bottom: 145px;
    }
}

@media (max-width: 767px) {
    .home2-service-section .slider-btn-grp {
        display: none;
    }
}

.home2-service-section .slider-btn-grp .slider-btn {
    position: absolute;
    z-index: 1;
}

.home2-service-section .slider-btn-grp .slider-btn.service2-slider-next {
    right: -116px;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home2-service-section .slider-btn-grp .slider-btn.service2-slider-next {
        right: -45px;
    }
}

@media (max-width: 1399px) {
    .home2-service-section .slider-btn-grp .slider-btn.service2-slider-next {
        right: -40px;
    }
}

@media (max-width: 1199px) {
    .home2-service-section .slider-btn-grp .slider-btn.service2-slider-next {
        right: -24px;
    }
}

.home2-service-section .slider-btn-grp .slider-btn.service2-slider-prev {
    left: -116px;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home2-service-section .slider-btn-grp .slider-btn.service2-slider-prev {
        left: -45px;
    }
}

@media (max-width: 1399px) {
    .home2-service-section .slider-btn-grp .slider-btn.service2-slider-prev {
        left: -40px;
    }
}

@media (max-width: 1199px) {
    .home2-service-section .slider-btn-grp .slider-btn.service2-slider-prev {
        left: -24px;
    }
}

.home2-service-section .nav {
    border: none;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

@media (max-width: 1199px) {
    .home2-service-section .nav {
        gap: 10px;
        row-gap: 20px;
    }
}

@media (max-width: 767px) {
    .home2-service-section .nav {
        gap: 8px;
        row-gap: 15px;
    }
}

@media (max-width: 576px) {
    .home2-service-section .nav {
        row-gap: 12px;
    }
}

.home2-service-section .nav li button {
    background-color: #F5F0FF;
    color: var(--title-color);
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-family: var(--font-Hanken-Grotesk);
    border-radius: 100px;
    padding: 16px 22px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    margin-bottom: 1px;
}

@media (max-width: 1199px) {
    .home2-service-section .nav li button {
        padding: 13px 19px;
    }
}

@media (max-width: 991px) {
    .home2-service-section .nav li button {
        padding: 13px 19px;
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .home2-service-section .nav li button {
        padding: 13px 15px;
    }
}

@media (max-width: 576px) {
    .home2-service-section .nav li button {
        padding: 13px 16px;
        font-size: 14px;
    }
}

.home2-service-section .nav li button.active {
    background-color: var(--primary-color1);
}

.home2-service-section .nav li button:hover {
    background-color: var(--primary-color1);
    border-color: rgba(0, 0, 0, 0.05);
}

.home2-service-section .nav li:hover {
    border: none;
}

.service-card2 {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: none;
}

.service-card2>img {
    border-radius: 10px;
    min-height: 300px;
    -o-object-fit: cover;
    object-fit: cover;
}

@media (min-width: 576px) and (max-width: 768px) {
    .service-card2>img {
        min-height: 426px;
    }
}

@media (max-width: 576px) {
    .service-card2>img {
        min-height: 300px;
    }
}

.service-card2 .service-card-content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    padding: 15px;
    display: flex;
    align-items: end;
}

@media (max-width: 1399px) {
    .service-card2 .service-card-content-wrapper {
        padding: 12px;
    }
}

@media (max-width: 991px) {
    .service-card2 .service-card-content-wrapper {
        padding: 15px;
    }
}

@media (max-width: 767px) {
    .service-card2 .service-card-content-wrapper {
        padding: 15px;
    }
}

.service-card2 .service-card-content-wrapper .service-card-content {
    background-color: var(--white-color);
    border: 1px solid transparent;
    padding: 6px 25px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    transition: 0.5s;
}

@media (max-width: 1399px) {
    .service-card2 .service-card-content-wrapper .service-card-content {
        padding: 13px 10px;
    }
}

@media (max-width: 1199px) {
    .service-card2 .service-card-content-wrapper .service-card-content {
        gap: 5px;
        padding: 13px 8px;
    }
}

@media (max-width: 991px) {
    .service-card2 .service-card-content-wrapper .service-card-content {
        gap: 12px;
    }
}

.service-card2 .service-card-content-wrapper .service-card-content .icon img {
    border-radius: 0;
}

.service-card2 .service-card-content-wrapper .service-card-content .content h3 {
    line-height: 1;
    margin-bottom: 2px;
}

@media (max-width: 576px) {
    .service-card2 .service-card-content-wrapper .service-card-content .content h3 {
        margin-bottom: 0;
    }
}

.service-card2 .service-card-content-wrapper .service-card-content .content h3 a {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    font-weight: 600;
    font-size: 17px;
    text-transform: capitalize;
    transition: 0.5s;
    line-height: 1;
}

@media (max-width: 1199px) {
    .service-card2 .service-card-content-wrapper .service-card-content .content h3 a {
        font-size: 14px;
        text-transform: capitalize;
        line-height: 1.2;
    }
}

@media (max-width: 991px) {
    .service-card2 .service-card-content-wrapper .service-card-content .content h3 a {
        font-size: 17px;
    }
}

.service-card2 .service-card-content-wrapper .service-card-content .content span {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--text-color);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    text-transform: capitalize;
}

.service-card2:hover .service-card-content {
    background-color: rgba(var(--white-color-opc), 0.4);
    border: 1px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3px);
}

.service-card2.style-2 .service-card-content-wrapper .service-card-content {
    background: unset;
    display: block;
    padding: 0;
    border: none;
}

.service-card2.style-2 .service-card-content-wrapper .service-card-content .icon {
    background-color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    min-width: 69px;
    max-width: 69px;
    height: 69px;
    margin: 0 auto;
    margin-bottom: -13px;
    transition: 0.5s;
}

.service-card2.style-2 .service-card-content-wrapper .service-card-content .icon img {
    width: 45px;
}

.service-card2.style-2 .service-card-content-wrapper .service-card-content .content {
    border-radius: 10px;
    background-color: var(--white-color);
    padding: 15px 55px 19px;
    text-align: center;
    transition: 0.5s;
}

@media (max-width: 1399px) {
    .service-card2.style-2 .service-card-content-wrapper .service-card-content .content {
        padding: 18px 34px 19px;
    }
}

@media (max-width: 576px) {
    .service-card2.style-2 .service-card-content-wrapper .service-card-content .content {
        padding: 18px 40px 19px;
    }
}

.service-card2.style-2 .service-card-content-wrapper .service-card-content .content h3 {
    margin-bottom: 0;
}

.service-card2.style-2 .service-card-content-wrapper .service-card-content .content h3 a {
    color: rgba(var(--black-color-opc), 0.8);
    font-size: 18px;
}

.service-card2.style-2:hover .service-card-content {
    backdrop-filter: unset;
}

.service-card2.style-2:hover .service-card-content .icon {
    background-color: var(--primary-color3);
    transition: 0.5s;
}

.service-card2.style-2:hover .service-card-content .content {
    background-color: var(--primary-color3);
    transition: 0.5s;
}

/*================================
 16. Home2 Offer Start CSS
==================================*/

.home2-offer-section .offer-card {
    padding: 110px 213px;
    background-color: #ECE4DC;
    border-radius: 20px;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home2-offer-section .offer-card {
        padding: 110px 85px;
    }
}

@media (max-width: 1399px) {
    .home2-offer-section .offer-card {
        padding: 110px 30px;
    }
}

@media (max-width: 991px) {
    .home2-offer-section .offer-card {
        padding: 90px 100px;
    }
}

@media (max-width: 767px) {
    .home2-offer-section .offer-card {
        padding: 90px 50px;
    }
}

@media (max-width: 576px) {
    .home2-offer-section .offer-card {
        padding: 70px 14px;
    }
}

.home2-offer-section .offer-card .offer-content {
    text-align: center;
}

.home2-offer-section .offer-card .offer-content>span {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(var(--black-color-opc), 0.3);
    padding: 11px 23px;
    font-weight: 500;
    font-size: 15px;
    border-radius: 100px;
    line-height: 1;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 12px;
}

@media (max-width: 767px) {
    .home2-offer-section .offer-card .offer-content>span {
        padding: 10px 20px;
    }
}

@media (max-width: 576px) {
    .home2-offer-section .offer-card .offer-content>span {
        margin-bottom: 10px;
    }
}

.home2-offer-section .offer-card .offer-content h2 {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 700;
    font-size: 50px;
    line-height: 1;
    text-transform: capitalize;
    margin-bottom: 27px;
}

@media (max-width: 1199px) {
    .home2-offer-section .offer-card .offer-content h2 {
        font-size: 42px;
        margin-bottom: 22px;
    }
}

@media (max-width: 767px) {
    .home2-offer-section .offer-card .offer-content h2 {
        font-size: 38px;
        margin-bottom: 18px;
    }
}

@media (max-width: 576px) {
    .home2-offer-section .offer-card .offer-content h2 {
        font-size: 30px;
        margin-bottom: 10px;
        line-height: 1.2;
    }
}

.home2-offer-section .offer-card .offer-content h2 span {
    color: #FB521E;
    border-bottom: 3px solid #FB521E;
    line-height: 1;
    display: inline-block;
}

.home2-offer-section .offer-card .offer-content p {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--text-color);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
}

@media (max-width: 767px) {
    .home2-offer-section .offer-card .offer-content p {
        line-height: 1.6;
        margin-bottom: 25px;
    }
}

@media (max-width: 576px) {
    .home2-offer-section .offer-card .offer-content p {
        font-size: 15px;
    }
}

.home2-offer-section .offer-card .offer-content .primary-btn1 {
    background-color: var(--primary-color1);
    color: var(--title-color);
    padding: 21px 31px;
    border-radius: 100px;
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 17px;
}

@media (max-width: 767px) {
    .home2-offer-section .offer-card .offer-content .primary-btn1 {
        padding: 18px 28px;
    }
}

.home2-offer-section .offer-card .offer-content .primary-btn1 span {
    border: none;
    padding: 0;
    margin: 0;
}

.home2-offer-section .offer-card .offer-content .primary-btn1:hover {
    color: var(--white-color);
}

.home2-offer-section .offer-card .offer-content .primary-btn1:after {
    background-color: var(--black-color);
}

.home2-offer-section .offer-card.style-2 {
    background: url(../img/home2/offer-card-bg-img.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    -o-object-fit: cover;
    object-fit: cover;
    padding: 110px 213px 110px 60px;
}

@media (max-width: 1399px) {
    .home2-offer-section .offer-card.style-2 {
        padding: 110px 30px 110px 60px;
    }
}

@media (max-width: 1199px) {
    .home2-offer-section .offer-card.style-2 {
        padding: 110px 30px 110px 40px;
    }
}

@media (max-width: 767px) {
    .home2-offer-section .offer-card.style-2 {
        padding: 90px 50px 90px 50px;
    }
}

@media (max-width: 576px) {
    .home2-offer-section .offer-card.style-2 {
        padding: 70px 15px;
    }
}

.home2-offer-section .offer-card.style-2 .offer-content {
    text-align: left;
}

.home2-offer-section .offer-card.style-2 .offer-content .sub-title {
    border: 1px solid rgba(251, 82, 30, 0.2);
    color: #FB521E;
}

.home2-offer-section .offer-card.style-2 .offer-content p {
    max-width: 446px;
}

@media (max-width: 576px) {
    .home2-offer-section .offer-card.style-2 .offer-content p {
        max-width: unset;
    }
}

.home2-offer-section .offer-card.style-2 .offer-content .primary-btn1 {
    background: transparent;
    color: var(--title-color);
    border: 1px solid var(--black-color);
}

.home2-offer-section .offer-card.style-2 .offer-content .primary-btn1:hover {
    color: var(--title-color);
}

.home2-offer-section .offer-card.style-2 .offer-content .primary-btn1:after {
    background-color: var(--primary-color1);
}

/*=====================================
 17. Home2 Popular Start CSS
=======================================*/

.home2-popular-service-section .slider-btn-grp {
    position: relative;
    bottom: 180px;
}

@media (max-width: 1399px) {
    .home2-popular-service-section .slider-btn-grp {
        bottom: 160px;
    }
}

@media (max-width: 991px) {
    .home2-popular-service-section .slider-btn-grp {
        bottom: 185px;
    }
}

@media (max-width: 767px) {
    .home2-popular-service-section .slider-btn-grp {
        display: none;
    }
}

.home2-popular-service-section .slider-btn-grp .slider-btn {
    position: absolute;
    z-index: 1;
}

.home2-popular-service-section .slider-btn-grp .slider-btn.service-slider-prev {
    left: -17px;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home2-popular-service-section .slider-btn-grp .slider-btn.service-slider-prev {
        left: -40px;
    }
}

@media (max-width: 1399px) {
    .home2-popular-service-section .slider-btn-grp .slider-btn.service-slider-prev {
        left: -40px;
    }
}

@media (max-width: 1199px) {
    .home2-popular-service-section .slider-btn-grp .slider-btn.service-slider-prev {
        left: -24px;
    }
}

.home2-popular-service-section .slider-btn-grp .slider-btn.service-slider-next {
    right: -17px;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home2-popular-service-section .slider-btn-grp .slider-btn.service-slider-next {
        right: -40px;
    }
}

@media (max-width: 1399px) {
    .home2-popular-service-section .slider-btn-grp .slider-btn.service-slider-next {
        right: -40px;
    }
}

@media (max-width: 1199px) {
    .home2-popular-service-section .slider-btn-grp .slider-btn.service-slider-next {
        right: -24px;
    }
}

/*=====================================
 18. Home2 Trending Start CSS
=======================================*/

.home2-trending-service-section .slider-btn-grp {
    display: flex;
    align-items: center;
    gap: 30px;
}

@media (max-width: 767px) {
    .home2-trending-service-section .slider-btn-grp {
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .home2-trending-service-section .slider-btn-grp {
        display: none;
    }
}

.home2-trending-service-section .slider-btn-grp .slider-btn {
    z-index: 1;
}

/*=====================================
 19. Home2 Feature Start CSS
=======================================*/

.home2-feature-section {
    background: url(../img/home2/feature-bg.png), linear-gradient(180deg, rgb(241, 246, 246) 0%, rgb(241, 246, 246) 100%);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 110px 0;
}

@media (max-width: 991px) {
    .home2-feature-section {
        padding: 90px 0;
    }
}

@media (max-width: 576px) {
    .home2-feature-section {
        padding: 65px 0;
    }
}

.home2-feature-section .feature-card-wrapper {
    border-top: 1px solid rgba(var(--black-color-opc), 0.1);
    border-bottom: 1px solid rgba(var(--black-color-opc), 0.1);
    padding: 40px 0;
}

@media (max-width: 991px) {
    .home2-feature-section .feature-card-wrapper {
        border: none;
        padding: 0;
    }
}

.home2-feature-section .divider {
    position: relative;
}

.home2-feature-section .divider::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -3px;
    width: 1px;
    height: 280px;
    background-color: rgba(var(--black-color-opc), 0.1);
}

@media (max-width: 1399px) {
    .home2-feature-section .divider::before {
        right: 0;
    }
}

@media (max-width: 1199px) {
    .home2-feature-section .divider::before {
        display: none;
    }
}

.home2-feature-section .divider:last-child {
    display: none;
}

.feature-card .feature-content {
    padding: 32px;
}

@media (max-width: 1399px) {
    .feature-card .feature-content {
        padding: 10px;
    }
}

.feature-card .feature-content svg {
    fill: rgba(var(--black-color-opc), 0.6);
    margin-bottom: 24px;
    width: 60px;
}

@media (max-width: 767px) {
    .feature-card .feature-content svg {
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {
    .feature-card .feature-content svg {
        width: 50px;
    }
}

.feature-card .feature-content h3,
.feature-card .feature-content h4 {
    font-family: var(--font-Almarai);
    color: var(--title-color);
    font-weight: 400;
    font-size: 25px;
    line-height: 1;
    margin-bottom: 21px;
}

@media (max-width: 1199px) {
    .feature-card .feature-content h3,
    .feature-card .feature-content h4 {
        margin-bottom: 25px;
    }
}

@media (max-width: 767px) {
    .feature-card .feature-content h3,
    .feature-card .feature-content h4 {
        margin-bottom: 15px;
    }
}

@media (max-width: 576px) {
    .feature-card .feature-content h3,
    .feature-card .feature-content h4 {
        font-size: 20px;
    }
}

.feature-card .feature-content p {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--text-color);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 0;
}

.feature-card .feature-content.padding {
    padding-left: 0;
}

@media (max-width: 576px) {
    .feature-card .feature-content.padding {
        padding-left: 10px;
    }
}

.feature-card .feature-content.last {
    padding-right: 0;
}

.feature-card:hover svg {
    animation: bounce 1s;
}

.feature-card.style-2 {
    background-color: var(--white-color);
    border-radius: 20px;
}

@media (max-width: 576px) {
    .feature-card.style-2 {
        border-radius: 15px;
    }
}

.feature-card.style-2 .feature-content {
    padding: 32px;
}

@media (max-width: 1399px) {
    .feature-card.style-2 .feature-content {
        padding: 20px;
    }
}

@media (max-width: 1199px) {
    .feature-card.style-2 .feature-content {
        padding: 30px;
    }
}

@media (max-width: 576px) {
    .feature-card.style-2 .feature-content {
        padding: 15px;
    }
}

@media (max-width: 767px) {
    .feature-card.style-2 .feature-content svg {
        margin-bottom: 24px;
    }
}

@media (max-width: 576px) {
    .feature-card.style-2 .feature-content svg {
        margin-bottom: 18px;
    }
}

@media (max-width: 1399px) {
    .feature-card.style-2 .feature-content p {
        font-size: 14px;
    }
}

@media (max-width: 1199px) {
    .feature-card.style-2 .feature-content p {
        font-size: 15px;
    }
}

@media (max-width: 991px) {
    .feature-card.style-2 .feature-content p {
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .feature-card.style-2 .feature-content p {
        font-size: 15px;
        line-height: 1.5;
    }
}

.feature-card.style-3 {
    border-radius: 20px;
    background-color: #0E0E0E;
    padding: 32px;
}

@media (max-width: 1399px) {
    .feature-card.style-3 {
        padding: 25px;
    }
}

@media (max-width: 1199px) {
    .feature-card.style-3 {
        padding: 27px;
    }
}

.feature-card.style-3 .feature-content {
    padding: 0;
}

.feature-card.style-3 .feature-content svg {
    fill: var(--primary-color5);
}

@media (max-width: 576px) {
    .feature-card.style-3 .feature-content svg {
        margin-bottom: 20px;
    }
}

.feature-card.style-3 .feature-content h3 {
    color: var(--white-color);
}

.feature-card.style-3 .feature-content p {
    color: rgba(var(--white-color-opc), 0.7);
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-18px);
    }
    50% {
        transform: translateY(0);
    }
    70% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
    }
}

/*==========================
 20. Home2 Process End CSS
============================*/

.home2-procces-section .process-wrapper .process-img-wrapper {
    -webkit-mask-image: url(../img/home2/process-shape.png);
    mask-image: url(../img/home2/process-shape.png);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

@media (max-width: 991px) {
    .home2-procces-section .process-wrapper .process-img-wrapper {
        -webkit-mask-image: unset;
        mask-image: unset;
    }
}

.home2-procces-section .process-wrapper .process-img-wrapper img {
    -o-object-fit: cover;
    object-fit: cover;
}

@media (max-width: 991px) {
    .home2-procces-section .process-wrapper .process-img-wrapper img {
        max-height: 350px;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .home2-procces-section .process-wrapper .process-img-wrapper img {
        max-height: unset;
    }
}

.home2-procces-section .home2-process-slider-wrap {
    position: relative;
    margin-top: -206px;
    margin-left: 30px;
}

@media (max-width: 1399px) {
    .home2-procces-section .home2-process-slider-wrap {
        margin-top: -193px;
        margin-left: 13px;
    }
}

@media (max-width: 1199px) {
    .home2-procces-section .home2-process-slider-wrap {
        margin-top: -175px;
        margin-left: 0;
    }
}

@media (max-width: 991px) {
    .home2-procces-section .home2-process-slider-wrap {
        margin-top: 50px;
    }
}

@media (max-width: 576px) {
    .home2-procces-section .home2-process-slider-wrap {
        margin: 50px 0 30px;
    }
}

.home2-procces-section .home2-process-slider-wrap .single-process .content h3 {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 700;
    font-size: 25px;
    line-height: 32px;
    text-transform: capitalize;
}

.home2-procces-section .home2-process-slider-wrap .single-process .content p {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--title-color-opc), 0.8);
    font-weight: 400;
    font-size: 15px;
    line-height: 25px;
    max-width: 239px;
}

.home2-procces-section .home2-process-slider-wrap .single-process.active span {
    color: black;
    background-color: var(--primary-color1);
}

.home2-procces-section .home2-process-slider-wrap .progress-pagination {
    position: relative;
    background: #CDCDCD;
    position: absolute;
    top: 32%;
    left: 0;
    height: 2px;
}

@media (max-width: 1199px) {
    .home2-procces-section .home2-process-slider-wrap .progress-pagination {
        top: 32%;
    }
}

@media (max-width: 991px) {
    .home2-procces-section .home2-process-slider-wrap .progress-pagination {
        top: 35%;
    }
}

@media (max-width: 767px) {
    .home2-procces-section .home2-process-slider-wrap .progress-pagination {
        top: 35%;
    }
}

@media (max-width: 576px) {
    .home2-procces-section .home2-process-slider-wrap .progress-pagination {
        top: 46%;
    }
}

@media (max-width: 576px) {
    .home2-procces-section .home2-process-slider-wrap .progress-pagination {
        top: 34%;
    }
}

.home2-procces-section .home2-process-slider-wrap .progress-pagination .swiper-pagination-progressbar-fill {
    background: var(--primary-color1);
}

/*==============================
 21. Home2 Testimonial End CSS
================================*/

.home2-testimonial-section .home2-testimonial-slider-area .testimonial-card {
    display: flex;
    gap: 15px;
}

@media (max-width: 767px) {
    .home2-testimonial-section .home2-testimonial-slider-area .testimonial-card {
        flex-wrap: wrap;
    }
}

.home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-img {
    position: relative;
}

.home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-img img {
    border-radius: 10px;
    -o-object-fit: cover;
    object-fit: cover;
    min-width: 282px;
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-img img {
        min-width: 280px;
    }
}

@media (max-width: 1199px) {
    .home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-img img {
        min-width: 268px;
    }
}

@media (max-width: 991px) {
    .home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-img img {
        min-width: 240px;
    }
}

@media (max-width: 767px) {
    .home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-img img {
        min-width: unset;
    }
}

.home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-img .icon {
    position: absolute;
    top: 10px;
    right: 10px;
    min-width: 32px;
    max-width: 32px;
    height: 32px;
    background-color: var(--white-color);
    border: 1px solid var(--primary-color1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-img .icon svg {
    fill: var(--primary-color1);
}

.home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-content {
    background: #EFF5FF;
    border-radius: 10px;
    padding: 47px 40px 43px;
}

@media (max-width: 1399px) {
    .home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-content {
        padding: 40px 30px 40px 30px;
    }
}

@media (max-width: 576px) {
    .home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-content {
        padding: 30px 20px;
    }
}

.home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-content span {
    font-family: var(--font-Almarai);
    color: var(--title-color);
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    display: block;
    margin-bottom: 8px;
}

@media (max-width: 576px) {
    .home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-content span {
        font-size: 17px;
        margin-bottom: 18px;
    }
}

.home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-content p {
    font-family: var(--font-Hanken-Grotesk);
    color: #545454;
    font-weight: 400;
    font-size: 25px;
    line-height: 1.6;
    margin-bottom: 25px;
}

@media (max-width: 1399px) {
    .home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-content p {
        font-size: 22px;
    }
}

@media (max-width: 1199px) {
    .home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-content p {
        font-size: 19px;
    }
}

@media (max-width: 991px) {
    .home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-content p {
        font-size: 21px;
        line-height: 1.4;
    }
}

@media (max-width: 576px) {
    .home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-content p {
        font-size: 20px;
    }
}

.home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-content .author-area-wrap {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 10px;
}

.home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-content .author-area-wrap .author-content h3 {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    font-weight: 600;
    font-size: 22px;
    line-height: 1;
    margin-bottom: 9px;
}

@media (max-width: 1199px) {
    .home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-content .author-area-wrap .author-content h3 {
        font-size: 20px;
    }
}

@media (max-width: 576px) {
    .home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-content .author-area-wrap .author-content h3 {
        font-size: 19px;
    }
}

.home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-content .author-area-wrap .author-content span {
    font-family: var(--font-Hanken-Grotesk);
    color: #545454;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    margin-bottom: 0;
}

.home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-content .author-area-wrap .quote {
    fill: #F0F0F0;
    width: 110px;
    margin-bottom: -32px;
}

@media (max-width: 1199px) {
    .home2-testimonial-section .home2-testimonial-slider-area .testimonial-card .testimonial-content .author-area-wrap .quote {
        width: 75px;
    }
}

.home2-testimonial-section .home2-testimonial-slider-area .home2-testimonial-slider {
    position: relative;
}

.home2-testimonial-section .home2-testimonial-slider-area .home2-testimonial-slider::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 14%;
    height: 100%;
    background: linear-gradient(-90deg, #FFFFFF 34.59%, rgba(255, 255, 255, 0.2) 93.24%);
    z-index: 1;
}

@media (max-width: 1199px) {
    .home2-testimonial-section .home2-testimonial-slider-area .home2-testimonial-slider::after {
        display: none;
    }
}

.home2-testimonial-section .slider-btn-grp {
    display: flex;
    align-items: center;
    gap: 30px;
}

@media (max-width: 767px) {
    .home2-testimonial-section .slider-btn-grp {
        display: none;
    }
}

.home2-testimonial-section .slider-btn-grp .slider-btn {
    z-index: 1;
}

/*==============================
 22. Home2 Blog Start CSS
================================*/

.home2-blog-section {
    padding: 70px 0;
}

@media (max-width: 991px) {
    .home2-blog-section {
        padding: 90px 0;
    }
}

@media (max-width: 767px) {
    .home2-blog-section {
        padding: 80px 0 70px;
    }
}

@media (max-width: 991px) {
    .home2-blog-section .section-title h2 {
        line-height: 1.3;
    }
}

.home2-blog-section .slider-btn-grp {
    display: flex;
    align-items: center;
    gap: 30px;
}

@media (max-width: 767px) {
    .home2-blog-section .slider-btn-grp {
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .home2-blog-section .slider-btn-grp {
        gap: 15px;
        display: none;
    }
}

.home2-blog-section .slider-btn-grp .slider-btn {
    z-index: 1;
}

.blog-card {
    border: 1px solid rgba(var(--black-color-opc), 0.1);
    border-radius: 10px;
}

.blog-card .blog-img-wrap {
    position: relative;
}

.blog-card .blog-img-wrap .blog-img {
    position: relative;
    overflow: hidden;
    display: block;
    transition: all 0.5s ease-out;
    border-radius: 10px;
}

.blog-card .blog-img-wrap .blog-img img {
    transition: all 0.5s ease-out;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
}

.blog-card .blog-img-wrap .blog-img::after {
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) rotate(-45deg);
    content: "";
    z-index: 1;
}

.blog-card .blog-meta {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 9;
}

.blog-card .blog-meta ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 10px 15px;
    background-color: var(--white-color);
    line-height: 1;
    border-radius: 0 10px 0 0;
}

.blog-card .blog-meta ul li {
    position: relative;
}

.blog-card .blog-meta ul li::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -12px;
    width: 1px;
    height: 12px;
    background-color: rgba(var(--black-color-opc), 0.2);
}

.blog-card .blog-meta ul li:last-child::before {
    display: none;
}

.blog-card .blog-meta ul li a {
    color: rgba(var(--title-color-opc), 0.5);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: 0.5s;
}

.blog-card .blog-meta ul li a:hover {
    color: var(--title-color);
}

@media (max-width: 576px) {
    .blog-card .blog-meta ul li a {
        font-size: 12px;
    }
}

.blog-card .blog-meta ul li a.blog-date {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blog-card .blog-meta ul li a.blog-date:hover {
    color: var(--title-color);
}

.blog-card .blog-content {
    padding: 21px 25px;
}

@media (max-width: 1199px) {
    .blog-card .blog-content {
        padding: 21px 19px;
    }
}

@media (max-width: 991px) {
    .blog-card .blog-content {
        padding: 21px 22px;
    }
}

@media (max-width: 576px) {
    .blog-card .blog-content {
        padding: 21px 17px;
    }
}

.blog-card .blog-content h4,
.blog-card .blog-content h2,
.blog-card .blog-content h3 {
    line-height: 1.2;
    margin-bottom: 15px;
}

@media (max-width: 576px) {
    .blog-card .blog-content h4,
    .blog-card .blog-content h2,
    .blog-card .blog-content h3 {
        margin-bottom: 10px;
    }
}

.blog-card .blog-content h4 a,
.blog-card .blog-content h2 a,
.blog-card .blog-content h3 a {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    font-weight: 600;
    font-size: 23px;
    background: linear-gradient(to bottom, var(--title-color) 0%, var(--title-color) 98%);
    background-size: 0px 1.5px;
    background-repeat: no-repeat;
    background-position: right 95%;
    transition: background-size 0.75s;
}

@media (max-width: 1399px) {
    .blog-card .blog-content h4 a,
    .blog-card .blog-content h2 a,
    .blog-card .blog-content h3 a {
        font-size: 21px;
    }
}

@media (max-width: 1199px) {
    .blog-card .blog-content h4 a,
    .blog-card .blog-content h2 a,
    .blog-card .blog-content h3 a {
        font-size: 18px;
    }
}

@media (max-width: 991px) {
    .blog-card .blog-content h4 a,
    .blog-card .blog-content h2 a,
    .blog-card .blog-content h3 a {
        font-size: 21px;
        line-height: 1.4;
    }
}

@media (max-width: 576px) {
    .blog-card .blog-content h4 a,
    .blog-card .blog-content h2 a,
    .blog-card .blog-content h3 a {
        font-size: 20px;
        line-height: 1.4;
    }
}

.blog-card .blog-content h4 a:hover,
.blog-card .blog-content h2 a:hover,
.blog-card .blog-content h3 a:hover {
    background-size: 100% 1.5px;
    background-position: 0% 95%;
}

.blog-card:hover .blog-img::after {
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

.blog-card:hover .blog-img img {
    transform: scale(1.1);
}

.blog-card.style-2 {
    border: 1px solid rgba(var(--title-color-opc), 0.1);
    display: grid;
    grid-template-columns: 40% 60%;
    border-radius: 10px;
}

@media (max-width: 1399px) {
    .blog-card.style-2 {
        grid-template-columns: 46% 56%;
    }
}

@media (max-width: 1199px) {
    .blog-card.style-2 {
        grid-template-columns: 42% 55%;
    }
}

@media (max-width: 1199px) {
    .blog-card.style-2 {
        grid-template-columns: 34% 66%;
    }
}

@media (max-width: 991px) {
    .blog-card.style-2 {
        grid-template-columns: 38% 62%;
    }
}

@media (max-width: 767px) {
    .blog-card.style-2 {
        grid-template-columns: unset;
        flex-wrap: wrap;
    }
}

.blog-card.style-2 .blog-img {
    position: relative;
    overflow: hidden;
    display: flex;
    transition: all 0.5s ease-out;
    border-radius: 10px 0 0 10px;
}

.blog-card.style-2 .blog-img img {
    border-radius: 10px 0 0 10px;
    transition: all 0.5s ease-out;
    -o-object-fit: cover;
    object-fit: cover;
    min-height: 300px;
}

@media (max-width: 767px) {
    .blog-card.style-2 .blog-img img {
        border-radius: 10px 10px 0 0;
    }
}

.blog-card.style-2 .blog-img::after {
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) rotate(-45deg);
    content: "";
    z-index: 1;
}

.blog-card.style-2 .blog-meta {
    display: inline-block;
    position: relative;
    background-color: var(--white-color);
    padding: 0;
    margin-bottom: 16px;
}

.blog-card.style-2 .blog-meta ul {
    border: 1px solid rgba(var(--black-color-opc), 0.2);
    border-radius: 100px;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    padding: 7px 19px;
    gap: 31px;
}

@media (max-width: 1399px) {
    .blog-card.style-2 .blog-meta ul {
        padding: 7px 16px;
        gap: 21px;
    }
}

@media (max-width: 1199px) {
    .blog-card.style-2 .blog-meta ul {
        padding: 7px 14px;
        gap: 15px;
    }
}

@media (max-width: 767px) {
    .blog-card.style-2 .blog-meta ul {
        padding: 8px 19px;
    }
}

.blog-card.style-2 .blog-meta ul li a {
    color: var(--primary-color3);
}

.blog-card.style-2 .blog-meta ul li .blog-date {
    color: rgba(var(--black-color-opc), 0.5);
}

.blog-card.style-2 .blog-meta ul li::before {
    right: -20px;
    background-color: var(--primary-color3);
}

.blog-card.style-2 .blog-content {
    padding: 32px 31px 21px;
    border-radius: 0 10px 10px 0;
}

@media (max-width: 1399px) {
    .blog-card.style-2 .blog-content {
        padding: 30px 23px 21px;
    }
}

@media (max-width: 1199px) {
    .blog-card.style-2 .blog-content {
        padding: 34px 35px 26px;
    }
}

@media (max-width: 991px) {
    .blog-card.style-2 .blog-content {
        padding: 40px 35px 24px;
    }
}

@media (max-width: 767px) {
    .blog-card.style-2 .blog-content {
        border-radius: 0 0 10px 10px;
        padding: 30px 30px 26px;
    }
}

@media (max-width: 576px) {
    .blog-card.style-2 .blog-content {
        padding: 20px 15px 15px;
    }
}

.blog-card.style-2 .blog-content h4 {
    margin-bottom: 15px;
}

.blog-card.style-2 .blog-content h4 a {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    font-weight: 700;
    font-size: 23px;
    line-height: 1.4;
    text-transform: capitalize;
    background: linear-gradient(to bottom, var(--title-color) 0%, var(--title-color) 98%);
    background-size: 0px 1.5px;
    background-repeat: no-repeat;
    background-position: right 100%;
    transition: background-size 0.75s;
}

@media (max-width: 1399px) {
    .blog-card.style-2 .blog-content h4 a {
        font-size: 20px;
    }
}

@media (max-width: 1199px) {
    .blog-card.style-2 .blog-content h4 a {
        font-size: 23px;
    }
}

@media (max-width: 576px) {
    .blog-card.style-2 .blog-content h4 a {
        font-size: 21px;
    }
}

.blog-card.style-2 .blog-content h4 a:hover {
    background-size: 100% 1.5px;
    background-position: 0% 100%;
}

.blog-card.style-2 .blog-content p {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--text-color);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 30px;
}

@media (max-width: 1399px) {
    .blog-card.style-2 .blog-content p {
        font-size: 15px;
        margin-bottom: 18px;
        line-height: 1.4;
    }
}

@media (max-width: 1199px) {
    .blog-card.style-2 .blog-content p {
        font-size: 16px;
        margin-bottom: 22px;
    }
}

@media (max-width: 991px) {
    .blog-card.style-2 .blog-content p {
        line-height: 1.7;
    }
}

@media (max-width: 767px) {
    .blog-card.style-2 .blog-content p {
        margin-bottom: 25px;
    }
}

@media (max-width: 576px) {
    .blog-card.style-2 .blog-content p {
        font-size: 15px;
    }
}

.blog-card.style-2:hover .blog-img::after {
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

.blog-card.style-2:hover .blog-img img {
    transform: scale(1.1);
}

.blog-card.style-3 {
    grid-template-columns: 47% 53%;
    position: relative;
}

@media (max-width: 1399px) {
    .blog-card.style-3 {
        grid-template-columns: 46% 54%;
    }
}

@media (max-width: 576px) {
    .blog-card.style-3 {
        display: flex;
        flex-wrap: wrap;
    }
}

.blog-card.style-3 .blog-img {
    border-radius: 10px;
}

.blog-card.style-3 .blog-img img {
    border-radius: 10px;
}

@media (max-width: 767px) {
    .blog-card.style-3 .blog-img img {
        border-radius: 10px 10px 0 0;
    }
}

.blog-card.style-3 .blog-meta {
    position: absolute;
    background: unset;
    top: 0;
    left: 0;
}

.blog-card.style-3 .blog-meta ul {
    border-radius: 10px 0 10px 0;
    border: unset;
    padding: 10px 15px;
}

.blog-card.style-3 .blog-meta ul li a {
    color: rgba(var(--black-color-opc), 0.5);
}

.blog-card.style-3 .blog-meta ul li a:hover {
    color: var(--black-color);
}

.blog-card.style-3 .blog-meta ul li::before {
    background-color: rgba(var(--black-color-opc), 0.1);
}

@media (max-width: 1399px) {
    .blog-card.style-3 .blog-meta ul li::before {
        right: -12px;
    }
}

.blog-card.style-3 .blog-content {
    padding: 40px 40px 33px;
}

@media (max-width: 1199px) {
    .blog-card.style-3 .blog-content {
        padding: 32px 25px 30px;
    }
}

@media (max-width: 767px) {
    .blog-card.style-3 .blog-content {
        padding: 25px;
    }
}

@media (max-width: 576px) {
    .blog-card.style-3 .blog-content {
        padding: 20px;
    }
}

.blog-card.style-3 .blog-content h2 {
    margin-bottom: 17px;
}

@media (max-width: 576px) {
    .blog-card.style-3 .blog-content h2 {
        margin-bottom: 12px;
    }
}

.blog-card.style-3 .blog-content h2 a {
    font-size: 28px;
}

@media (max-width: 1199px) {
    .blog-card.style-3 .blog-content h2 a {
        font-size: 25px;
    }
}

@media (max-width: 767px) {
    .blog-card.style-3 .blog-content h2 a {
        font-size: 24px;
    }
}

@media (max-width: 576px) {
    .blog-card.style-3 .blog-content h2 a {
        font-size: 22px;
    }
}

@media (max-width: 767px) {
    .blog-card.style-3 .blog-content p {
        font-size: 15px;
    }
}

.read-btn {
    color: rgba(var(--title-color-opc), 0.6);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.5s;
}

.read-btn span {
    background: linear-gradient(to bottom, var(--secondary-color) 0%, var(--secondary-color) 98%);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: left 100%;
    transition: background-size 0.75s;
}

.read-btn svg {
    fill: rgba(var(--title-color-opc), 0.3);
    transition: 0.5s;
}

.read-btn:hover span {
    background-size: 0 1px;
    background-position: 0% 100%;
}

.read-btn:hover svg {
    transform: translateX(3px);
}

/*==============================
 23. Home3 Banner Start CSS
================================*/

.home3-banner-section {
    border-radius: 70px 70px 0 0;
    padding: 8% 12% 11% 13%;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home3-banner-section {
        padding: 12% 4% 16% 6%;
    }
}

@media (max-width: 1399px) {
    .home3-banner-section {
        padding: 13% 1% 16% 1%;
    }
}

@media (max-width: 1199px) {
    .home3-banner-section {
        padding: 8% 2% 14% 6%;
    }
}

@media (max-width: 991px) {
    .home3-banner-section {
        padding: 13% 7% 21% 7%;
    }
}

@media (max-width: 767px) {
    .home3-banner-section {
        padding: 16% 3% 27% 3%;
        border-radius: 50px 50px 0 0;
    }
}

@media (max-width: 576px) {
    .home3-banner-section {
        padding: 18% 1% 35% 2%;
        border-radius: 30px 30px 0 0;
    }
}

.home3-banner-section .single-search-box label {
    color: rgba(var(--white-color-opc), 0.5);
    margin-bottom: 0;
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    margin-bottom: 8px;
}

.home3-banner-section .single-search-box .custom-select-dropdown {
    display: flex;
    align-items: center;
}

.home3-banner-section .single-search-box .custom-select-dropdown .select-input {
    position: relative;
}

.home3-banner-section .single-search-box .custom-select-dropdown .select-input input {
    color: var(--white-color);
    background: transparent;
    border: unset;
    padding: 0;
    height: unset;
    min-width: 253px;
}

@media (max-width: 576px) {
    .home3-banner-section .single-search-box .custom-select-dropdown .select-input input {
        min-width: unset;
    }
}

.home3-banner-section .single-search-box .custom-select-dropdown .select-input input:hover {
    cursor: pointer;
}

.home3-banner-section .single-search-box .custom-select-dropdown .select-input .calender-icon {
    position: absolute;
    top: -8px;
    right: 0;
    z-index: -1;
    width: 24px;
    height: 18px;
    fill: rgba(var(--white-color-opc), 0.9);
}

.home3-banner-section .banner-content .sub-title {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--white-color);
    background-color: rgba(255, 206, 10, 0.2);
    border: 1px solid rgba(var(--primary-color3-opc), 0.4);
    padding: 10px 21px;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    border-radius: 100px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: end;
    gap: 6px;
    margin-bottom: 17px;
    animation: fadeInDown 1.7s;
}

.home3-banner-section .banner-content .sub-title svg {
    fill: var(--primary-color1);
}

.home3-banner-section .banner-content h1 {
    font-family: var(--font-Almarai);
    color: var(--white-color);
    font-weight: 800;
    font-size: 80px;
    line-height: 1.2;
    text-transform: capitalize;
    margin-bottom: 28px;
    animation: fadeInDown 1.7s;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home3-banner-section .banner-content h1 {
        font-size: 72px;
    }
}

@media (max-width: 1399px) {
    .home3-banner-section .banner-content h1 {
        font-size: 63px;
    }
}

@media (max-width: 1199px) {
    .home3-banner-section .banner-content h1 {
        font-size: 55px;
    }
}

@media (max-width: 767px) {
    .home3-banner-section .banner-content h1 {
        font-size: 51px;
    }
}

@media (max-width: 576px) {
    .home3-banner-section .banner-content h1 {
        font-size: 44px;
        line-height: 1.2;
    }
}

.home3-banner-section .banner-content h1 span {
    color: var(--primary-color3);
}

.home3-banner-section .banner-content .rating-list {
    background: rgba(46, 47, 16, 0.5019607843);
    backdrop-filter: blur(12px);
    border-radius: 100px;
    padding: 17px 28px;
    margin: 0;
    list-style: none;
    display: inline-flex;
    align-items: baseline;
    gap: 30px;
    flex-wrap: wrap;
    animation: fadeInUp 1.7s;
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .home3-banner-section .banner-content .rating-list {
        gap: 8px;
    }
}

@media (max-width: 767px) {
    .home3-banner-section .banner-content .rating-list {
        padding: 16px 25px;
    }
}

@media (max-width: 576px) {
    .home3-banner-section .banner-content .rating-list {
        padding: 16px 40px;
        gap: 15px;
    }
}

.home3-banner-section .banner-content .rating-list li .single-rating {
    border-radius: 10px;
    display: flex;
    gap: 4px;
    align-items: center;
}

.home3-banner-section .banner-content .rating-list li .single-rating .review {
    line-height: 1;
}

.home3-banner-section .banner-content .rating-list li .single-rating .review span {
    color: rgba(var(--white-color-opc), 0.5);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 4px;
    display: block;
    white-space: nowrap;
}

@media (max-width: 1699px) {
    .home3-banner-section .banner-content .rating-list li .single-rating .review span {
        font-size: 13px;
    }
}

.home3-banner-section .banner-content .rating-list li .single-rating .review img {
    width: 55px;
}

.home3-banner-section .banner-content .rating-list li .single-rating .rating {
    line-height: 1;
    margin-top: -1px;
}

.home3-banner-section .banner-content .rating-list li .single-rating .rating .star {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    line-height: 1;
}

.home3-banner-section .banner-content .rating-list li .single-rating .rating .star li i {
    color: #E62415;
    font-size: 9px;
}

.home3-banner-section .banner-content .rating-list li .single-rating .rating span {
    color: rgba(var(--white-color-opc), 0.5);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}

@media (max-width: 1699px) {
    .home3-banner-section .banner-content .rating-list li .single-rating .rating span {
        font-size: 13px;
    }
}

.home3-banner-section .banner-content .rating-list li .single-rating.google .rating .star li i {
    color: #FFC107;
}

.home3-banner-section .banner-content .rating-list::after {
    content: "";
    width: 1px;
    height: 30px;
    background-color: rgba(var(--primary-color1-opc), 0.3);
    position: absolute;
    right: 177px;
    top: 37px;
    transform: translateY(-50%);
}

@media (max-width: 1199px) {
    .home3-banner-section .banner-content .rating-list::after {
        right: 184px;
    }
}

@media (max-width: 991px) {
    .home3-banner-section .banner-content .rating-list::after {
        right: 183px;
        top: 33px;
    }
}

@media (max-width: 767px) {
    .home3-banner-section .banner-content .rating-list::after {
        right: 180px;
    }
}

@media (max-width: 576px) {
    .home3-banner-section .banner-content .rating-list::after {
        display: none;
    }
}

.home3-banner-section .location-and-date-area {
    border: 1px solid rgba(32, 37, 69, 0.08);
    background-color: rgba(var(--white-color-opc), 0.2);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    padding: 25px;
}

@media (max-width: 1399px) {
    .home3-banner-section .location-and-date-area {
        padding: 18px;
    }
}

@media (max-width: 1199px) {
    .home3-banner-section .location-and-date-area {
        padding: 20px;
    }
}

@media (max-width: 991px) {
    .home3-banner-section .location-and-date-area {
        padding: 20px;
    }
}

@media (max-width: 576px) {
    .home3-banner-section .location-and-date-area {
        border-radius: 20px;
    }
}

.home3-banner-section .location-and-date-area form {
    display: flex;
    align-items: center;
    gap: 18px;
    background: rgba(46, 47, 16, 0.5490196078);
    border: 1px solid rgba(32, 37, 69, 0.1);
    border-radius: 10px;
    padding: 40px 35px;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home3-banner-section .location-and-date-area form {
        padding: 35px 25px;
    }
}

@media (max-width: 1399px) {
    .home3-banner-section .location-and-date-area form {
        padding: 30px 16px;
    }
}

@media (max-width: 1199px) {
    .home3-banner-section .location-and-date-area form {
        padding: 20px 16px;
    }
}

@media (max-width: 991px) {
    .home3-banner-section .location-and-date-area form {
        padding: 30px;
    }
}

@media (max-width: 1199px) {
    .home3-banner-section .location-and-date-area form {
        justify-content: space-between;
    }
}

@media (max-width: 576px) {
    .home3-banner-section .location-and-date-area form {
        justify-content: center;
        padding: 15px;
    }
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    padding-bottom: 29px;
    border-bottom: 1px solid rgba(var(--white-color-opc), 0.1);
    width: 100%;
}

@media (max-width: 1399px) {
    .home3-banner-section .location-and-date-area form .filter-area .single-search-box {
        gap: 7px;
    }
}

@media (max-width: 1199px) {
    .home3-banner-section .location-and-date-area form .filter-area .single-search-box {
        padding-bottom: 25px;
    }
}

@media (max-width: 991px) {
    .home3-banner-section .location-and-date-area form .filter-area .single-search-box {
        padding-bottom: unset;
        border-bottom: unset;
    }
}

@media (max-width: 576px) {
    .home3-banner-section .location-and-date-area form .filter-area .single-search-box {
        position: relative;
    }
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .icon {
    color: var(--primary-color3);
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .icon svg {
    fill: var(--primary-color3);
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input {
    line-height: 1;
    width: 100%;
}

@media (max-width: 1199px) {
    .home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input {
        width: 100%;
    }
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input label {
    color: rgba(var(--white-color-opc), 0.5);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    display: block;
    margin-bottom: 5px;
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .select-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1;
    cursor: pointer;
    width: 100%;
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .select-input input {
    color: var(--white-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.3px;
    background-color: transparent;
    cursor: pointer;
    width: 100%;
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .select-input input::-moz-placeholder {
    color: var(--title-color);
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .select-input input::placeholder {
    color: var(--title-color);
}

@media (max-width: 1199px) {
    .home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .select-input input {
        min-width: 128px;
    }
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .select-input .arrow {
    position: absolute;
    right: 0;
    top: -7px;
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .select-input .arrow i {
    color: rgba(var(--white-color-opc), 0.5);
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .select-input .arrow svg {
    fill: rgba(var(--white-color-opc), 0.5);
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap {
    background-color: var(--white-color);
    border-radius: 5px;
    max-width: 328px;
    min-width: 328px;
    width: 100%;
    max-height: 250px;
    overflow-y: scroll;
    position: absolute;
    top: 55px;
    left: 0;
    z-index: 9;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08);
    display: none;
    transform: scaleY(0);
    transform-origin: top;
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap::-webkit-scrollbar {
    width: 5px;
    /* width of the entire scrollbar */
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap::-webkit-scrollbar-track {
    background: #f5f4f4;
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap::-webkit-scrollbar-thumb {
    background-color: #ddd;
    /* color of the scroll thumb */
    border-radius: 20px;
    /* creates padding around scroll thumb */
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap {
        max-width: 292px;
        min-width: 292px;
    }
}

@media (max-width: 1399px) {
    .home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap {
        max-width: 296px;
        min-width: 296px;
    }
}

@media (max-width: 1199px) {
    .home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap {
        max-width: 100%;
        min-width: 100%;
        top: 40px;
    }
}

@media (max-width: 576px) {
    .home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap {
        left: 50%;
    }
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .custom-select-search-area {
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 10px 5px 10px;
    padding-bottom: 5px;
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .custom-select-search-area i {
    color: var(--primary-color1);
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .custom-select-search-area input {
    background-color: transparent;
    color: var(--title-color);
    font-size: 14px;
    font-weight: 400;
    width: 100%;
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list {
    padding: 0;
    margin: 0;
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li {
    transition: 0.5s;
    cursor: pointer;
    line-height: 1;
    margin-bottom: 5px;
    padding: 7px 15px;
    border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
    display: block;
    width: 100%;
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li:last-child {
    margin-bottom: 0;
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li .destination h2 {
    font-size: 14px;
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 0;
}

@media (max-width: 576px) {
    .home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li .destination h2 {
        font-size: 13px;
    }
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li {
    position: relative;
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li::before {
    content: "";
    height: 100%;
    width: 3px;
    background-color: var(--title-color);
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: 0.5s;
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li.single-item {
    padding: 10px 15px;
    border-bottom: 1px solid #f5f4f4;
    margin-bottom: 0;
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li.single-item:last-child {
    border-bottom: none;
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li.single-item h2 {
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-Hanken-Grotesk);
    color: var(--text-color);
    margin-bottom: 0;
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li:hover {
    background: rgba(211, 211, 211, 0.231372549);
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li:hover::before {
    opacity: 1;
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .guest-count .single-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid #f5f4f4;
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .guest-count .single-item .title h6 {
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-Hanken-Grotesk);
    color: var(--text-color);
    margin-bottom: 0;
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .guest-count .single-item .title span {
    font-size: 13px;
    font-weight: 400;
    font-family: var(--font-Hanken-Grotesk);
    color: var(--text-color);
    margin-bottom: 0;
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .guest-count .single-item .quantity-counter {
    display: flex;
    align-items: center;
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .guest-count .single-item .quantity-counter a {
    height: 20px;
    min-width: 20px;
    max-width: 20px;
    border-radius: 50%;
    border: 1px solid var(--primary-color1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.35s;
    font-size: 17px;
    color: var(--primary-color1);
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .guest-count .single-item .quantity-counter a:hover {
    color: var(--white-color);
    background-color: var(--primary-color1);
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .guest-count .single-item .quantity-counter input {
    width: 40px;
    background-color: transparent;
    text-align: center;
    line-height: 1;
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 14px;
    font-weight: 500;
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap.active {
    display: block;
    transform: scaleY(1);
    animation: fade-down 0.3s linear;
}

@keyframes fade-down2 {
    0% {
        opacity: 0;
        transform: scaleY(0) translateX(-50%);
        visibility: hidden;
    }
    100% {
        opacity: 1;
        transform: scaleY(1) translateX(-50%);
        visibility: visible;
    }
}

@media (max-width: 576px) {
    .home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap.active {
        transform: scaleY(1) translateX(-50%);
        animation: fade-down2 0.3s linear;
    }
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap.no-scroll {
    overflow-y: initial;
    max-width: unset;
}

.home3-banner-section .location-and-date-area form .filter-area .single-search-box.two {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: unset;
}

.home3-banner-section .location-and-date-area form .filter-area .primary-btn1 {
    width: 100%;
    padding: 20px 100px;
    justify-content: center;
    background-color: var(--primary-color3);
    color: var(--black-color);
}

@media (max-width: 1199px) {
    .home3-banner-section .location-and-date-area form .filter-area .primary-btn1 {
        padding: 18px 45px;
    }
}

.home3-banner-section .location-and-date-area form .filter-area .primary-btn1:hover {
    color: var(--white-color);
}

.home3-banner-section .location-and-date-area form .filter-area .primary-btn1:after {
    background-color: var(--black-color);
}

/*==============================
 24. Home3 about Start CSS
================================*/

.home3-about-section {
    background: var(--white-color);
    padding: 110px 0;
    margin-top: -60px;
    border-radius: 70px 70px 0 0;
    position: relative;
}

@media (max-width: 1199px) {
    .home3-about-section {
        padding: 90px 0;
    }
}

@media (max-width: 767px) {
    .home3-about-section {
        border-radius: 50px 50px 0 0;
    }
}

@media (max-width: 576px) {
    .home3-about-section {
        border-radius: 30px 30px 0 0;
        padding: 70px 0;
    }
}

.home3-about-section .about-content-wrap .section-title {
    margin-bottom: 48px;
}

@media (max-width: 1199px) {
    .home3-about-section .about-content-wrap .section-title {
        margin-bottom: 40px;
    }
}

@media (max-width: 991px) {
    .home3-about-section .about-content-wrap .section-title {
        margin-bottom: 30px;
    }
}

.home3-about-section .about-content-wrap .section-title p {
    position: relative;
    padding-top: 0;
    margin-left: 70px;
    padding-left: 15px;
    margin-top: 45px;
    line-height: 32px;
}

@media (max-width: 1399px) {
    .home3-about-section .about-content-wrap .section-title p {
        margin-left: 55px;
        margin-top: 35px;
    }
}

@media (max-width: 991px) {
    .home3-about-section .about-content-wrap .section-title p {
        margin-left: 52px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .home3-about-section .about-content-wrap .section-title p {
        margin-left: 25px;
        font-size: 15px;
        margin-top: 25px;
    }
}

@media (max-width: 991px) {
    .home3-about-section .about-content-wrap .section-title p {
        margin-top: 30px;
    }
}

@media (max-width: 576px) {
    .home3-about-section .about-content-wrap .section-title p {
        margin-top: 20px;
        margin-left: 0;
        font-size: 15px;
    }
}

.home3-about-section .about-content-wrap .section-title p::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 2px;
    height: 80px;
    background-color: var(--primary-color3);
}

.home3-about-section .about-content-wrap ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

@media (max-width: 991px) {
    .home3-about-section .about-content-wrap ul {
        display: flex;
        align-items: start;
        gap: 30px;
    }
}

@media (max-width: 767px) {
    .home3-about-section .about-content-wrap ul {
        gap: 20px;
    }
}

@media (max-width: 576px) {
    .home3-about-section .about-content-wrap ul {
        flex-wrap: wrap;
    }
}

.home3-about-section .about-content-wrap ul li {
    display: flex;
    gap: 30px;
    margin-bottom: 35px;
}

@media (max-width: 1199px) {
    .home3-about-section .about-content-wrap ul li {
        gap: 20px;
        margin-bottom: 25px;
    }
}

@media (max-width: 991px) {
    .home3-about-section .about-content-wrap ul li {
        margin-bottom: 0;
    }
}

.home3-about-section .about-content-wrap ul li .single-content h3 {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--secondary-color);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 11px;
    text-transform: capitalize;
}

@media (max-width: 767px) {
    .home3-about-section .about-content-wrap ul li .single-content h3 {
        font-size: 21px;
    }
}

@media (max-width: 576px) {
    .home3-about-section .about-content-wrap ul li .single-content h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }
}

.home3-about-section .about-content-wrap ul li .single-content p {
    color: rgba(var(--black-color-opc), 0.7);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 0;
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .home3-about-section .about-content-wrap ul li .single-content p {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .home3-about-section .about-content-wrap ul li .single-content p {
        font-size: 15px;
    }
}

.home3-about-section .about-content-wrap ul li:last-child {
    margin-bottom: 0;
}

.home3-about-section .about-content-wrap ul li:nth-child(2) {
    margin-left: 40px;
}

@media (max-width: 1399px) {
    .home3-about-section .about-content-wrap ul li:nth-child(2) {
        margin-left: 30px;
    }
}

@media (max-width: 1199px) {
    .home3-about-section .about-content-wrap ul li:nth-child(2) {
        margin-left: 10px;
    }
}

@media (max-width: 991px) {
    .home3-about-section .about-content-wrap ul li:nth-child(2) {
        margin-left: 0;
    }
}

.home3-about-section .about-content-wrap ul li svg {
    fill: rgba(0, 218, 150, 0.2);
    min-width: 100px;
    margin-top: -12px;
}

@media (max-width: 991px) {
    .home3-about-section .about-content-wrap ul li svg {
        display: none;
    }
}

.home3-about-section .about-img-wrap {
    -webkit-mask-image: url(../img/home3/home3-about-shape.png);
    mask-image: url(../img/home3/home3-about-shape.png);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    margin-left: 75px;
    position: relative;
}

@media (max-width: 1399px) {
    .home3-about-section .about-img-wrap {
        margin-left: 55px;
    }
}

@media (max-width: 1199px) {
    .home3-about-section .about-img-wrap {
        margin-left: 0;
    }
}

@media (max-width: 991px) {
    .home3-about-section .about-img-wrap {
        -webkit-mask-image: unset;
        mask-image: unset;
    }
}

.home3-about-section .about-img-wrap img {
    -o-object-fit: cover;
    object-fit: cover;
}

.home3-about-section .circular-text {
    position: absolute;
    top: 50%;
    right: 37%;
    transform: translate(-50%, -50%);
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home3-about-section .circular-text {
        right: 33%;
    }
}

@media (max-width: 1399px) {
    .home3-about-section .circular-text {
        right: 32%;
    }
}

@media (max-width: 1199px) {
    .home3-about-section .circular-text {
        right: 33%;
    }
}

@media (max-width: 991px) {
    .home3-about-section .circular-text {
        right: 0;
        top: 49%;
    }
}

.home3-about-section.style-2 .about-content-wrap ul li svg {
    fill: rgba(var(--primary-color1-opc), 0.2);
}

.circular-text {
    position: relative;
    min-width: 120px;
    height: 120px;
    border-radius: 50%;
    display: inline-block;
    align-items: center;
    background-color: var(--white-color);
}

@media (max-width: 767px) {
    .circular-text {
        display: none;
    }
}

.circular-text .center-icon {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: #6A6B6B;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.circular-text .center-icon svg {
    fill: var(--white-color);
}

.circular-text .text {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: textRotation 8s linear infinite;
}

.circular-text .text span {
    position: absolute;
    left: 50%;
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 13px;
    font-weight: 700;
    transform-origin: 0 60px;
}

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

/*==========================
 25. Home3 Counter Start CSS 
============================*/

.home3-counter-section .counter-wrap .single-countdown-wrap {
    position: relative;
}

.home3-counter-section .counter-wrap .single-countdown-wrap .single-countdown {
    display: flex;
    align-items: center;
    gap: 24px;
}

@media (max-width: 1199px) {
    .home3-counter-section .counter-wrap .single-countdown-wrap .single-countdown {
        gap: 10px;
    }
}

@media (max-width: 991px) {
    .home3-counter-section .counter-wrap .single-countdown-wrap .single-countdown {
        gap: 15px;
    }
}

.home3-counter-section .counter-wrap .single-countdown-wrap .single-countdown .icon {
    background-color: var(--primary-color3);
    min-width: 60px;
    max-width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home3-counter-section .counter-wrap .single-countdown-wrap .single-countdown .number-wrap .number {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.home3-counter-section .counter-wrap .single-countdown-wrap .single-countdown .number-wrap .number h2 {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    font-weight: 700;
    font-size: 35px;
    line-height: 1;
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .home3-counter-section .counter-wrap .single-countdown-wrap .single-countdown .number-wrap .number h2 {
        font-size: 32px;
    }
}

@media (max-width: 576px) {
    .home3-counter-section .counter-wrap .single-countdown-wrap .single-countdown .number-wrap .number h2 {
        font-size: 25px;
    }
}

.home3-counter-section .counter-wrap .single-countdown-wrap .single-countdown .number-wrap .number>span {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    font-weight: 700;
    font-size: 35px;
    line-height: 1;
}

@media (max-width: 991px) {
    .home3-counter-section .counter-wrap .single-countdown-wrap .single-countdown .number-wrap .number>span {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    .home3-counter-section .counter-wrap .single-countdown-wrap .single-countdown .number-wrap .number>span {
        font-size: 25px;
    }
}

.home3-counter-section .counter-wrap .single-countdown-wrap .single-countdown .number-wrap span {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--black-color-opc), 0.7);
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
}

.home3-counter-section .counter-wrap .divider {
    position: absolute;
    height: 65px;
    top: 50%;
    transform: translateY(-50%);
    right: 26px;
    fill: rgba(var(--black-color-opc), 0.3);
}

@media (max-width: 1399px) {
    .home3-counter-section .counter-wrap .divider {
        right: 6px;
    }
}

@media (max-width: 1199px) {
    .home3-counter-section .counter-wrap .divider {
        right: -7px;
    }
}

@media (max-width: 991px) {
    .home3-counter-section .counter-wrap .divider {
        display: none;
    }
}

.home3-counter-section.style-2 .counter-wrap .single-countdown-wrap .single-countdown .icon {
    background-color: var(--primary-color1);
}

/*===========================
 26. Home3 Service Start CSS
=============================*/

.home3-service-section {
    background: url(../img/home3/home3-service-bg.png), linear-gradient(180deg, rgb(238, 245, 248) 0%, rgb(238, 245, 248) 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 90px 0;
}

@media (max-width: 767px) {
    .home3-service-section {
        padding: 80px 0;
    }
}

.home3-service-section .section-title h2 {
    line-height: 1;
}

@media (max-width: 576px) {
    .home3-service-section .section-title h2 {
        line-height: 1.2;
    }
}

.home3-service-section .service-card2 .service-card-content .content h6 a {
    background: linear-gradient(to bottom, var(--black-color) 0%, var(--black-color) 98%);
    background-size: 0px 1.5px;
    background-repeat: no-repeat;
    background-position: right 100%;
    transition: background-size 0.75s;
}

.home3-service-section .service-card2 .service-card-content .content h6 a:hover {
    background-size: 100% 1.5px;
    background-position: 0% 100%;
}

.home3-service-section .swiper-pagination1 {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: unset;
    z-index: 9;
    bottom: unset;
    gap: 12px;
}

@media (max-width: 767px) {
    .home3-service-section .swiper-pagination1 {
        gap: 8px;
    }
}

@media (max-width: 576px) {
    .home3-service-section .swiper-pagination1 {
        gap: 6px;
    }
}

.home3-service-section .swiper-pagination1 .swiper-pagination-bullet {
    height: 12px;
    width: 12px;
    background-color: transparent;
    border: 1px solid rgba(63, 68, 75, 0.6);
    opacity: 1;
    position: relative;
}

.home3-service-section .swiper-pagination1 .swiper-pagination-bullet::after {
    content: "";
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background-color: rgba(63, 68, 75, 0.4);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.home3-service-section .swiper-pagination1 .swiper-pagination-bullet.swiper-pagination-bullet-active {
    border-color: var(--primary-color);
    height: 20px;
    width: 20px;
}

.home3-service-section .swiper-pagination1 .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
    width: 10px;
    height: 10px;
    background-color: var(--black-color);
}

/*============================
 27. Home3 Choose Us Start CSS
==============================*/

.home3-choose-us-section .section-title h2 {
    margin-bottom: 25px;
}

@media (max-width: 767px) {
    .home3-choose-us-section .section-title h2 {
        margin-bottom: 18px;
    }
}

.home3-choose-us-section .section-title p {
    margin-bottom: 100px;
}

@media (max-width: 1199px) {
    .home3-choose-us-section .section-title p {
        margin-bottom: 85px;
    }
}

@media (max-width: 991px) {
    .home3-choose-us-section .section-title p {
        margin-bottom: 75px;
    }
}

@media (max-width: 767px) {
    .home3-choose-us-section .section-title p {
        margin-bottom: 65px;
    }
}

.home3-choose-us-section .choose-us-img-wrap {
    -webkit-mask-image: url(../img/home3/home3-choose-us-shape.png);
    mask-image: url(../img/home3/home3-choose-us-shape.png);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

@media (max-width: 991px) {
    .home3-choose-us-section .choose-us-img-wrap {
        -webkit-mask-image: unset;
        mask-image: unset;
    }
}

.choose-us-single-list {
    display: flex;
    align-items: center;
    gap: 20px;
}

@media (max-width: 1199px) {
    .choose-us-single-list {
        gap: 11px;
    }
}

.choose-us-single-list .icon {
    background-color: var(--primary-color3);
    min-width: 60px;
    max-width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.choose-us-single-list .icon svg {
    fill: rgba(var(--black-color-opc), 0.6);
}

.choose-us-single-list .content h3 {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--black-color-opc), 0.9);
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    text-transform: capitalize;
    margin-bottom: 11px;
}

@media (max-width: 1399px) {
    .choose-us-single-list .content h3 {
        font-size: 26px;
    }
}

@media (max-width: 1199px) {
    .choose-us-single-list .content h3 {
        font-size: 22px;
    }
}

@media (max-width: 991px) {
    .choose-us-single-list .content h3 {
        font-size: 25px;
        margin-bottom: 9px;
    }
}

@media (max-width: 576px) {
    .choose-us-single-list .content h3 {
        font-size: 22px;
    }
}

.choose-us-single-list .content p {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    max-width: 270px;
}

@media (max-width: 1199px) {
    .choose-us-single-list .content p {
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    .choose-us-single-list .content p {
        line-height: 1.4;
    }
}

/*============================
 28. Home3 Feature Start CSS
==============================*/

.home3-feature-section {
    background: url(../img/home3/home3-feature-bg.png), linear-gradient(180deg, #F5F6FA 0%, #F5F6FA 100%);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 90px 0;
}

@media (max-width: 576px) {
    .home3-feature-section {
        padding: 70px 0;
    }
}

.home3-feature-section .feature-card-wrapper .feature-btn {
    text-align: center;
    padding: 18px 46px;
    background-color: transparent;
    border: 1px solid rgba(var(--black-color-opc), 0.1);
    border-radius: 100px;
}

@media (max-width: 991px) {
    .home3-feature-section .feature-card-wrapper .feature-btn {
        padding: 15px 40px;
    }
}

@media (max-width: 576px) {
    .home3-feature-section .feature-card-wrapper .feature-btn {
        padding: 13px 30px;
    }
}

.home3-feature-section .feature-card-wrapper .feature-btn h4 {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--black-color-opc), 0.9);
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .home3-feature-section .feature-card-wrapper .feature-btn h4 {
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .home3-feature-section .feature-card-wrapper .feature-btn h4 {
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
}

@media (max-width: 576px) {
    .home3-feature-section .feature-card-wrapper .feature-btn h4 {
        line-height: 1.5;
        font-size: 15px;
    }
}

.home3-feature-section .feature-card-wrapper .feature-btn h4 a {
    color: var(--primary-color3);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    text-decoration: underline;
    transition: all 0.5s;
}

.home3-feature-section .feature-card-wrapper .feature-btn h4 a svg {
    stroke: #B48DFF;
    fill: none;
    transition: all 0.5s;
}

.home3-feature-section .feature-card-wrapper .feature-btn h4 a:hover {
    color: var(--title-color);
}

/*============================
 29. Home3 Testimonial Start CSS
==============================*/

.home3-testimonial-section {
    background: url(../img/home3/home3-testimonial-bg.png), linear-gradient(180deg, #ECFAFB 0%, #ECFAFB 100%);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 90px 0;
}

@media (max-width: 576px) {
    .home3-testimonial-section {
        padding: 70px 0;
    }
}

.home3-testimonial-section .home3-testimonial-slider-area .testimonial-card {
    background-color: var(--white-color);
    padding: 30px 45px 25px 45px;
    border-radius: 30px;
}

@media (max-width: 1199px) {
    .home3-testimonial-section .home3-testimonial-slider-area .testimonial-card {
        padding: 25px 32px 25px 32px;
    }
}

@media (max-width: 991px) {
    .home3-testimonial-section .home3-testimonial-slider-area .testimonial-card {
        padding: 30px 37px 25px 37px;
    }
}

@media (max-width: 767px) {
    .home3-testimonial-section .home3-testimonial-slider-area .testimonial-card {
        padding: 25px 30px;
    }
}

@media (max-width: 576px) {
    .home3-testimonial-section .home3-testimonial-slider-area .testimonial-card {
        padding: 22px 20px;
    }
}

.home3-testimonial-section .home3-testimonial-slider-area .testimonial-card .icon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

@media (max-width: 767px) {
    .home3-testimonial-section .home3-testimonial-slider-area .testimonial-card .icon {
        margin-bottom: 10px;
    }
}

.home3-testimonial-section .home3-testimonial-slider-area .testimonial-card .icon .star {
    display: flex;
    align-items: center;
    gap: 7px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.home3-testimonial-section .home3-testimonial-slider-area .testimonial-card .icon .star li i {
    font-size: 15px;
    color: var(--primary-color1);
}

.home3-testimonial-section .home3-testimonial-slider-area .testimonial-card .icon .quote {
    fill: none;
    stroke: rgba(var(--title-color-opc), 0.3);
}

.home3-testimonial-section .home3-testimonial-slider-area .testimonial-card .testimonial-content span {
    font-family: var(--font-Hanken-Grotesk);
    color: #FB521E;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    text-transform: uppercase;
    display: block;
    margin-bottom: 35px;
}

@media (max-width: 1199px) {
    .home3-testimonial-section .home3-testimonial-slider-area .testimonial-card .testimonial-content span {
        margin-bottom: 28px;
    }
}

@media (max-width: 576px) {
    .home3-testimonial-section .home3-testimonial-slider-area .testimonial-card .testimonial-content span {
        line-height: 1.4;
        margin-bottom: 20px;
    }
}

.home3-testimonial-section .home3-testimonial-slider-area .testimonial-card .testimonial-content p {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.9;
    text-transform: capitalize;
    padding-bottom: 35px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(var(--black-color-opc), 0.1);
}

@media (max-width: 1199px) {
    .home3-testimonial-section .home3-testimonial-slider-area .testimonial-card .testimonial-content p {
        font-size: 18px;
    }
}

@media (max-width: 991px) {
    .home3-testimonial-section .home3-testimonial-slider-area .testimonial-card .testimonial-content p {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .home3-testimonial-section .home3-testimonial-slider-area .testimonial-card .testimonial-content p {
        font-size: 18px;
        line-height: 1.8;
        padding-bottom: 28px;
    }
}

@media (max-width: 576px) {
    .home3-testimonial-section .home3-testimonial-slider-area .testimonial-card .testimonial-content p {
        font-size: 17px;
        padding-bottom: 25px;
    }
}

.home3-testimonial-section .home3-testimonial-slider-area .testimonial-card .author-area-and-logo-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 14px;
}

.home3-testimonial-section .home3-testimonial-slider-area .testimonial-card .author-area-and-logo-wrap .author-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.home3-testimonial-section .home3-testimonial-slider-area .testimonial-card .author-area-and-logo-wrap .author-area .author-img img {
    border-radius: 50%;
}

.home3-testimonial-section .home3-testimonial-slider-area .testimonial-card .author-area-and-logo-wrap .author-area .content h3 {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 19px;
    line-height: 1;
    margin-bottom: 4px;
}

@media (max-width: 767px) {
    .home3-testimonial-section .home3-testimonial-slider-area .testimonial-card .author-area-and-logo-wrap .author-area .content h3 {
        font-size: 18px;
        line-height: 1;
        margin-bottom: 2px;
    }
}

.home3-testimonial-section .home3-testimonial-slider-area .testimonial-card .author-area-and-logo-wrap .author-area .content span {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--text-color);
    font-weight: 400;
    font-size: 15px;
    line-height: 1;
}

.home3-testimonial-section .home3-testimonial-slider-area .testimonial-card .author-area-and-logo-wrap .bottom-logo {
    padding-left: 90px;
    border-left: 1px solid var(--borders-color);
}

@media (max-width: 1399px) {
    .home3-testimonial-section .home3-testimonial-slider-area .testimonial-card .author-area-and-logo-wrap .bottom-logo {
        padding-left: 50px;
    }
}

@media (max-width: 991px) {
    .home3-testimonial-section .home3-testimonial-slider-area .testimonial-card .author-area-and-logo-wrap .bottom-logo {
        padding-left: 90px;
    }
}

@media (max-width: 767px) {
    .home3-testimonial-section .home3-testimonial-slider-area .testimonial-card .author-area-and-logo-wrap .bottom-logo {
        padding-left: 42px;
    }
}

@media (max-width: 576px) {
    .home3-testimonial-section .home3-testimonial-slider-area .testimonial-card .author-area-and-logo-wrap .bottom-logo {
        border-left: unset;
        padding-left: 8px;
    }
}

.home3-testimonial-section .slider-btn-grp {
    display: flex;
    align-items: center;
    gap: 30px;
}

@media (max-width: 767px) {
    .home3-testimonial-section .slider-btn-grp {
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .home3-testimonial-section .slider-btn-grp {
        display: none;
    }
}

.home3-testimonial-section .slider-btn-grp .slider-btn {
    background: transparent;
    z-index: 1;
}

.home3-testimonial-section .slider-btn-grp .slider-btn:hover {
    background-color: var(--title-color);
}

/*======================
 30 Home3 Faq Start CSS
========================*/

.home3-faq-section .section-title>span {
    color: var(--primary-color3);
}

.home3-faq-section .section-title h2 {
    margin-bottom: 19px;
}

.home3-faq-section .section-title p {
    margin-bottom: 48px;
}

@media (max-width: 991px) {
    .home3-faq-section .section-title p {
        margin-bottom: 40px;
    }
}

@media (max-width: 767px) {
    .home3-faq-section .section-title p {
        margin-bottom: 35px;
    }
}

.home3-faq-section .section-title .primary-btn1 {
    background-color: var(--primary-color3);
    color: var(--title-color);
    padding: 20px 36px;
    text-decoration: underline;
}

.home3-faq-section .section-title .primary-btn1 span {
    text-decoration: underline;
    transition: 0.5s;
}

.home3-faq-section .section-title .primary-btn1:hover {
    color: var(--white-color);
}

.home3-faq-section .section-title .primary-btn1:after {
    background-color: var(--black-color);
    text-decoration: underline;
}

.home3-faq-section.style-2 .section-title h2 {
    margin-bottom: 0;
}

.home3-faq-section.style-2 .faq-content-wrap {
    background-color: #E7EFFB;
    padding: 45px 60px;
}

@media (max-width: 991px) {
    .home3-faq-section.style-2 .faq-content-wrap {
        padding: 30px;
    }
}

@media (max-width: 767px) {
    .home3-faq-section.style-2 .faq-content-wrap {
        padding: 35px 40px;
    }
}

@media (max-width: 576px) {
    .home3-faq-section.style-2 .faq-content-wrap {
        padding: 25px;
    }
}

.home3-faq-section.style-2 .faq-content-wrap .faq-wrap .accordion .accordion-item {
    background-color: var(--white-color);
    border-radius: 10px;
    margin-bottom: 25px;
}

.home3-faq-section.style-2 .faq-content-wrap .faq-wrap .accordion .accordion-item .accordion-header {
    padding: 16px 40px 0 40px;
}

@media (max-width: 991px) {
    .home3-faq-section.style-2 .faq-content-wrap .faq-wrap .accordion .accordion-item .accordion-header {
        padding: 16px 35px 0 35px;
    }
}

@media (max-width: 767px) {
    .home3-faq-section.style-2 .faq-content-wrap .faq-wrap .accordion .accordion-item .accordion-header {
        padding: 16px 30px 0 30px;
    }
}

@media (max-width: 576px) {
    .home3-faq-section.style-2 .faq-content-wrap .faq-wrap .accordion .accordion-item .accordion-header {
        padding: 16px 17px 0 17px;
    }
}

.home3-faq-section.style-2 .faq-content-wrap .faq-wrap .accordion .accordion-item .accordion-header .icon {
    margin-bottom: 16px;
    fill: var(--primary-color4);
}

.home3-faq-section.style-2 .faq-content-wrap .faq-wrap .accordion .accordion-item .accordion-header .accordion-button {
    color: var(--secondary-color);
    padding-bottom: 15px;
    padding-top: 0;
    margin-bottom: 13px;
    font-weight: 600;
    font-size: 16px;
}

.home3-faq-section.style-2 .faq-content-wrap .faq-wrap .accordion .accordion-item .accordion-header .accordion-button.collapsed {
    padding-top: 0;
    margin-bottom: 0;
    border-bottom: unset;
}

.home3-faq-section.style-2 .faq-content-wrap .faq-wrap .accordion .accordion-item .accordion-body {
    padding: 0 40px 15px 40px;
    color: rgba(var(--secondary-color-opc), 0.6);
}

@media (max-width: 767px) {
    .home3-faq-section.style-2 .faq-content-wrap .faq-wrap .accordion .accordion-item .accordion-body {
        line-height: 1.7;
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .home3-faq-section.style-2 .faq-content-wrap .faq-wrap .accordion .accordion-item .accordion-body {
        padding: 0 37px 15px 37px;
    }
}

@media (max-width: 576px) {
    .home3-faq-section.style-2 .faq-content-wrap .faq-wrap .accordion .accordion-item .accordion-body {
        padding: 0 17px 15px 17px;
    }
}

.home3-faq-section.style-2 .faq-content-wrap .faq-wrap .accordion .accordion-item:last-child {
    margin-bottom: 0;
}

.home3-faq-section.style-3 .faq-img-wrap img {
    border-radius: 300px;
}

.home3-faq-section.style-3 .faq-content-wrap {
    padding: 45px;
}

@media (max-width: 1199px) {
    .home3-faq-section.style-3 .faq-content-wrap {
        padding: 28px;
    }
}

@media (max-width: 991px) {
    .home3-faq-section.style-3 .faq-content-wrap {
        padding: 40px;
    }
}

@media (max-width: 767px) {
    .home3-faq-section.style-3 .faq-content-wrap {
        padding: 33px;
    }
}

@media (max-width: 576px) {
    .home3-faq-section.style-3 .faq-content-wrap {
        padding: 15px;
        border-radius: 20px;
    }
}

.faq-content-wrap {
    background: #F1F6EF;
    padding: 69px 50px;
    border-radius: 30px;
}

@media (max-width: 991px) {
    .faq-content-wrap {
        padding: 60px 45px;
    }
}

@media (max-width: 767px) {
    .faq-content-wrap {
        padding: 50px 35px;
    }
}

@media (max-width: 576px) {
    .faq-content-wrap {
        padding: 35px 25px;
    }
}

.faq-content-wrap .faq-wrap .accordion .accordion-item {
    border: none;
    background-color: transparent;
}

.faq-content-wrap .faq-wrap .accordion .accordion-item:first-child .accordion-header .accordion-button {
    padding-top: 0;
}

.faq-content-wrap .faq-wrap .accordion .accordion-item .accordion-header .accordion-button {
    box-shadow: none;
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 700;
    font-size: 18px;
    text-transform: capitalize;
    background: transparent;
    padding: 0;
    padding: 15px 0 15px;
    border-bottom: 1px solid rgba(var(--title-color-opc), 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    .faq-content-wrap .faq-wrap .accordion .accordion-item .accordion-header .accordion-button {
        margin-bottom: 15px;
    }
}

@media (max-width: 576px) {
    .faq-content-wrap .faq-wrap .accordion .accordion-item .accordion-header .accordion-button {
        padding-top: 12px;
        font-size: 17px;
    }
}

.faq-content-wrap .faq-wrap .accordion .accordion-item .accordion-header .accordion-button svg {
    min-width: 14px;
    transition: transform 0.2s ease-in-out;
}

.faq-content-wrap .faq-wrap .accordion .accordion-item .accordion-header .accordion-button::after {
    background-image: unset;
    transform: rotate(180deg);
    content: url(../img/home1/svg/arrow.svg);
    color: var(--black-color);
    position: absolute;
    right: 0;
    transition: 0.5s;
    width: unset;
}

.faq-content-wrap .faq-wrap .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
    background-color: unset;
}

.faq-content-wrap .faq-wrap .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
    content: url(../img/home1/svg/arrow.svg);
    transform: unset;
    width: unset;
}

.faq-content-wrap .faq-wrap .accordion .accordion-item .accordion-header .accordion-button.last {
    margin-bottom: 0;
}

.faq-content-wrap .faq-wrap .accordion .accordion-item .accordion-body {
    padding: 0 20px 20px 20px;
    padding-bottom: 15px;
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--black-color-opc), 0.5);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.9;
}

@media (max-width: 576px) {
    .faq-content-wrap .faq-wrap .accordion .accordion-item .accordion-body {
        font-size: 14px;
        padding: 0 10px;
    }
}

.faq-content-wrap.style-2 {
    background: unset;
    padding: 0;
    border-radius: unset;
}

.faq-content-wrap.style-2 .faq-wrap .accordion .accordion-item .accordion-header .accordion-button {
    padding: 15px 0 15px 15px;
}

@media (max-width: 576px) {
    .faq-content-wrap.style-2 .faq-wrap .accordion .accordion-item .accordion-header .accordion-button {
        padding: 13px 0 13px 0;
        line-height: 1.4;
    }
}

.faq-content-wrap.style-2 .faq-wrap .accordion .accordion-item .accordion-body {
    padding: 0 20px 20px 20px;
}

@media (max-width: 576px) {
    .faq-content-wrap.style-2 .faq-wrap .accordion .accordion-item .accordion-body {
        padding: 0 10px 15px 10px;
    }
}

/*============================
 31. Home3 Contact Start CSS
==============================*/

.home3-contact-section {
    background: url(../img/home3/home3-contact-bg.png), linear-gradient(180deg, #FBF3EC 0%, #FBF3EC 100%);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 90px 0;
}

@media (max-width: 767px) {
    .home3-contact-section {
        padding: 80px 0;
    }
}

.home3-contact-section .section-title>span {
    color: var(--primary-color3);
}

.home3-contact-section .section-title h2 {
    margin-bottom: 25px;
}

@media (max-width: 991px) {
    .home3-contact-section .section-title h2 {
        margin-bottom: 15px;
    }
}

@media (max-width: 576px) {
    .home3-contact-section .section-title h2 {
        margin-bottom: 10px;
    }
}

.home3-contact-section .shape {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}

@media (max-width: 991px) {
    .home3-contact-section .shape {
        margin-bottom: 15px;
    }
}

@media (max-width: 576px) {
    .home3-contact-section .shape {
        margin-bottom: 15px;
    }
}

.home3-contact-section .shape svg {
    width: 236px;
    height: 181px;
    fill: rgba(0, 218, 150, 0.2);
}

@media (max-width: 1199px) {
    .home3-contact-section .shape svg {
        width: 230px;
        height: 150px;
    }
}

@media (max-width: 767px) {
    .home3-contact-section .shape svg {
        width: 200px;
        height: 120px;
    }
}

.home3-contact-section .mail-and-contact {
    max-width: 498px;
    padding: 0;
    margin: 0;
    list-style: none;
}

@media (max-width: 1399px) {
    .home3-contact-section .mail-and-contact {
        gap: 33px;
    }
}

@media (max-width: 1199px) {
    .home3-contact-section .mail-and-contact {
        gap: 30px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .home3-contact-section .mail-and-contact {
        gap: 25px;
    }
}

.home3-contact-section .mail-and-contact .contact-and-mail {
    padding: 0;
    margin: 0;
}

.home3-contact-section .mail-and-contact .contact-and-mail .single-contact {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    list-style: none;
    margin-bottom: 48px;
}

@media (max-width: 991px) {
    .home3-contact-section .mail-and-contact .contact-and-mail .single-contact {
        gap: 22px;
        margin-bottom: 40px;
    }
}

@media (max-width: 576px) {
    .home3-contact-section .mail-and-contact .contact-and-mail .single-contact {
        gap: 16px;
        margin-bottom: 35px;
    }
}

.home3-contact-section .mail-and-contact .contact-and-mail .single-contact .content a {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    transition: 0.5s;
    background: linear-gradient(to bottom, var(--title-color) 0%, var(--title-color) 98%);
    background-size: 0px 1.5px;
    background-repeat: no-repeat;
    background-position: right 100%;
    transition: background-size 0.75s;
}

.home3-contact-section .mail-and-contact .contact-and-mail .single-contact .content a:hover {
    background-size: 100% 1.5px;
    background-position: 0% 100%;
}

.home3-contact-section .mail-and-contact .contact-and-mail .single-contact .content p {
    font-family: var(--font-Almarai);
    color: rgba(var(--black-color-opc), 0.6);
    font-weight: 400;
    font-size: 11px;
    line-height: 1;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.home3-contact-section .mail-and-contact .contact-and-mail .single-contact .icon {
    position: relative;
}

.home3-contact-section .mail-and-contact .contact-and-mail .single-contact .icon svg {
    width: 28px;
    height: 28px;
    fill: var(--primary-color3);
}

.home3-contact-section .mail-and-contact .contact-and-mail .single-contact .icon::after {
    content: "";
    height: 35px;
    width: 1px;
    position: absolute;
    top: 56%;
    transform: translateY(-50%);
    right: -10px;
    background-color: rgba(var(--black-color-opc), 0.15);
}

@media (max-width: 991px) {
    .home3-contact-section .mail-and-contact .contact-and-mail .single-contact .icon::after {
        right: -13px;
    }
}

@media (max-width: 576px) {
    .home3-contact-section .mail-and-contact .contact-and-mail .single-contact .icon::after {
        display: none;
    }
}

.home3-contact-section .mail-and-contact .contact-and-mail .single-contact:last-child {
    margin-bottom: 0;
}

.home3-contact-section.style-2 {
    padding: 0;
    background: unset;
}

.home3-contact-section.style-2 .contact-form-area .contact-form-wrapper .primary-btn1 {
    background-color: var(--primary-color1);
}

.home3-contact-section.style-2 .contact-form-area .contact-form-wrapper .primary-btn1::after {
    background-color: var(--black-color);
}

.home3-contact-section.style-2 .contact-form-area .contact-form-wrapper form .form-inner2 .form-check input[type=checkbox]:checked {
    background-color: var(--primary-color1);
}

.home3-contact-section.style-3 {
    padding: 0;
    background: unset;
}

.home3-contact-section.style-3 .contact-form-area .contact-form-wrapper .primary-btn1 {
    background-color: var(--primary-color3);
}

.home3-contact-section.style-3 .contact-form-area .contact-form-wrapper .primary-btn1::after {
    background-color: var(--black-color);
}

.contact-form-area {
    padding: 15px;
    background-color: #F1F6EF;
    border: 1px solid rgba(241, 246, 239, 0.8);
    border-radius: 20px;
}

@media (max-width: 576px) {
    .contact-form-area {
        padding: 10px;
        border-radius: 15px;
    }
}

.contact-form-area .contact-form-wrapper {
    background-color: var(--white-color);
    padding: 52px 47px 36px;
    border-radius: 15px;
}

@media (max-width: 1199px) {
    .contact-form-area .contact-form-wrapper {
        padding: 30px 25px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .contact-form-area .contact-form-wrapper {
        padding: 35px 30px;
    }
}

@media (max-width: 576px) {
    .contact-form-area .contact-form-wrapper {
        padding: 35px 30px;
        border-radius: 10px;
    }
}

.contact-form-area .contact-form-wrapper .primary-btn1 {
    padding: 17px 38px;
    font-family: var(--font-Hanken-Grotesk);
    line-height: 1;
    text-decoration: underline;
    text-transform: uppercase;
    background-color: var(--primary-color3);
    color: var(--black-color);
}

@media (max-width: 576px) {
    .contact-form-area .contact-form-wrapper .primary-btn1 {
        padding: 14px 30px;
    }
}

.contact-form-area .contact-form-wrapper .primary-btn1:hover {
    color: var(--white-color);
}

.contact-form-area .contact-form-wrapper .primary-btn1::after {
    background-color: var(--black-color);
}

.contact-form-area .contact-form-wrapper .primary-btn1>span {
    text-decoration: underline;
}

.contact-form-area .contact-form-wrapper .nice-select {
    background-color: transparent;
    border: 1px solid rgba(3, 31, 66, 0.1490196078);
    height: 44px;
    padding: 0px 20px;
    position: relative;
}

.contact-form-area .contact-form-wrapper .nice-select::before {
    width: unset;
    height: unset;
    content: url(../img/inner-pages/svg/arrow-svg.svg);
    position: absolute;
    font-family: bootstrap-icons;
    background-image: none;
    font-weight: 800;
    font-size: 17px;
    transform: rotate(0deg);
    border-bottom: unset;
    border-right: unset;
    right: 20px;
    top: 12px;
    transition: 0.5s;
}

.contact-form-area .contact-form-wrapper .nice-select .current {
    color: rgba(var(--title-color-opc), 0.6);
    font-size: 15px;
}

.contact-form-area .contact-form-wrapper .nice-select.open::before {
    content: url(../img/inner-pages/svg/arrow-svg.svg);
    transform: rotate(180deg);
}

.contact-form-area .contact-form-wrapper input[type=checkbox]:checked {
    background-color: var(--primary-color3);
}

.contact-form-area .contact-form-wrapper input[type=checkbox]:checked::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 6px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/*=============================
 32. Home3 Blog Start CSS
==============================*/

.home3-blog-section {
    background: var(--white-color);
    border-radius: 0 0 70px 70px;
    padding: 120px 0;
    position: relative;
}

@media (max-width: 1199px) {
    .home3-blog-section {
        padding: 90px;
    }
}

@media (max-width: 991px) {
    .home3-blog-section {
        padding: 90px 0;
    }
}

@media (max-width: 767px) {
    .home3-blog-section {
        padding: 80px 0;
        border-radius: 0 0 50px 50px;
    }
}

@media (max-width: 576px) {
    .home3-blog-section {
        border-radius: 0 0 30px 30px;
    }
}

.home3-blog-section .swiper-pagination2 {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: unset;
    z-index: 9;
    bottom: unset;
    gap: 12px;
}

@media (max-width: 767px) {
    .home3-blog-section .swiper-pagination2 {
        gap: 8px;
    }
}

@media (max-width: 576px) {
    .home3-blog-section .swiper-pagination2 {
        gap: 6px;
    }
}

.home3-blog-section .swiper-pagination2 .swiper-pagination-bullet {
    height: 12px;
    width: 12px;
    background-color: transparent;
    border: 1px solid rgba(var(--black-color-opc), 0.6);
    opacity: 1;
    position: relative;
}

.home3-blog-section .swiper-pagination2 .swiper-pagination-bullet::after {
    content: "";
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background-color: rgba(63, 68, 75, 0.4);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.home3-blog-section .swiper-pagination2 .swiper-pagination-bullet.swiper-pagination-bullet-active {
    border-color: var(--primary-color);
    height: 20px;
    width: 20px;
}

.home3-blog-section .swiper-pagination2 .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
    width: 10px;
    height: 10px;
    background-color: var(--black-color);
}

/*=============================
 33. Home4 Banner Start CSS
==============================*/

.home4-banner-section {
    display: grid;
    grid-template-columns: 48% 52%;
}

@media (max-width: 1699px) {
    .home4-banner-section {
        grid-template-columns: 49% 51%;
    }
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home4-banner-section {
        grid-template-columns: 50% 50%;
    }
}

@media (max-width: 1399px) {
    .home4-banner-section {
        grid-template-columns: 49% 51%;
    }
}

@media (max-width: 1199px) {
    .home4-banner-section {
        display: block;
    }
}

.home4-banner-section .banner-img {
    position: relative;
}

@media (max-width: 1199px) {
    .home4-banner-section .banner-img {
        display: none;
    }
}

.home4-banner-section .banner-img img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.home4-banner-section .banner-content-wrapper {
    background: url(../img/home4/home4-banner-right-bg.png), linear-gradient(180deg, #F2F1E1 0%, #F2F1E1 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}

.home4-banner-section .banner-content-wrapper .banner-content {
    padding: 112px 60px 116px 64px;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home4-banner-section .banner-content-wrapper .banner-content {
        padding: 112px 10px 100px 50px;
    }
}

@media (max-width: 1399px) {
    .home4-banner-section .banner-content-wrapper .banner-content {
        padding: 90px 30px 100px 30px;
    }
}

@media (max-width: 1199px) {
    .home4-banner-section .banner-content-wrapper .banner-content {
        padding: 100px 65px 110px 65px;
    }
}

@media (max-width: 991px) {
    .home4-banner-section .banner-content-wrapper .banner-content {
        padding: 100px 35px 100px 35px;
    }
}

@media (max-width: 767px) {
    .home4-banner-section .banner-content-wrapper .banner-content {
        padding: 100px 25px 80px 25px;
    }
}

@media (max-width: 576px) {
    .home4-banner-section .banner-content-wrapper .banner-content {
        padding: 90px 10px 70px 10px;
    }
}

.home4-banner-section .banner-content-wrapper .banner-content h1 {
    color: var(--secondary-color);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 800;
    font-size: 68px;
    line-height: 1.2;
    margin-bottom: 28px;
    letter-spacing: -2px;
}

.home4-banner-section .banner-content-wrapper .banner-content h1 span {
    color: rgba(var(--title-color-opc), 0.5);
    font-weight: 600;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home4-banner-section .banner-content-wrapper .banner-content h1 {
        font-size: 60px;
        margin-bottom: 35px;
    }
}

@media (max-width: 1399px) {
    .home4-banner-section .banner-content-wrapper .banner-content h1 {
        font-size: 55px;
        margin-bottom: 30px;
    }
}

@media (max-width: 991px) {
    .home4-banner-section .banner-content-wrapper .banner-content h1 {
        font-size: 52px;
        margin-bottom: 35px;
    }
}

@media (max-width: 767px) {
    .home4-banner-section .banner-content-wrapper .banner-content h1 {
        font-size: 52px;
        line-height: 1.2;
        margin-bottom: 28px;
    }
}

@media (max-width: 576px) {
    .home4-banner-section .banner-content-wrapper .banner-content h1 {
        font-size: 41px;
        margin-bottom: 20px;
    }
}

.home4-banner-section .banner-content-wrapper .banner-content .content {
    max-width: 631px;
    width: 100%;
    margin-bottom: 40px;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home4-banner-section .banner-content-wrapper .banner-content .content {
        margin-bottom: 50px;
    }
}

@media (max-width: 1399px) {
    .home4-banner-section .banner-content-wrapper .banner-content .content {
        margin-bottom: 45px;
    }
}

@media (max-width: 767px) {
    .home4-banner-section .banner-content-wrapper .banner-content .content {
        margin-bottom: 35px;
    }
}

@media (max-width: 576px) {
    .home4-banner-section .banner-content-wrapper .banner-content .content {
        margin-bottom: 25px;
    }
}

.home4-banner-section .banner-content-wrapper .banner-content .content p {
    color: rgba(var(--secondary-color-opc), 0.6);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.9;
    margin-bottom: 0;
    padding-left: 15px;
    position: relative;
}

@media (max-width: 767px) {
    .home4-banner-section .banner-content-wrapper .banner-content .content p {
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    .home4-banner-section .banner-content-wrapper .banner-content .content p {
        padding-left: 0;
    }
}

.home4-banner-section .banner-content-wrapper .banner-content .content p::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 2px;
    height: 43px;
    background-color: rgba(var(--black-color-opc), 0.3);
}

@media (max-width: 576px) {
    .home4-banner-section .banner-content-wrapper .banner-content .content p::before {
        display: none;
    }
}

.home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 80px;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area {
        gap: 6px;
    }
}

@media (max-width: 1399px) {
    .home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area {
        gap: 10px;
    }
}

@media (max-width: 1199px) {
    .home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area {
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area {
        gap: 18px;
    }
}

@media (max-width: 576px) {
    .home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area {
        flex-wrap: wrap;
        margin-bottom: 60px;
    }
}

.home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area>svg {
    fill: rgba(var(--primary-color4-opc), 0.3);
}

@media (max-width: 767px) {
    .home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area>svg {
        display: none;
    }
}

.home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area .primary-btn1 {
    background-color: var(--secondary-color);
    text-decoration: underline;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    padding: 22px 40px;
}

@media (max-width: 767px) {
    .home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area .primary-btn1 {
        padding: 20px 30px;
    }
}

.home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area .primary-btn1>span {
    text-decoration: underline;
}

.home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area .primary-btn1:hover {
    color: var(--white-color);
}

.home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area .primary-btn1:after {
    background-color: var(--primary-color4);
}

.home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area .people-area {
    display: flex;
    align-items: center;
    gap: 15px;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area .people-area {
        gap: 8px;
    }
}

@media (max-width: 1399px) {
    .home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area .people-area {
        gap: 10px;
    }
}

@media (max-width: 1199px) {
    .home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area .people-area {
        gap: 15px;
    }
}

@media (max-width: 767px) {
    .home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area .people-area {
        gap: 10px;
    }
}

.home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area .people-area .img-grp {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
}

.home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area .people-area .img-grp li img {
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #F0F2F4;
    margin-left: -15px;
}

@media (max-width: 576px) {
    .home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area .people-area .img-grp li img {
        min-width: 37px;
        max-width: 37px;
        height: 37px;
    }
}

.home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area .people-area .img-grp li:first-child img {
    margin-left: 0;
}

.home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area .people-area a {
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    text-transform: uppercase;
    position: relative;
    background: linear-gradient(to bottom, var(--title-color) 0%, var(--title-color) 98%);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: left 100%;
    transition: background-size 0.75s;
}

@media (max-width: 1399px) {
    .home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area .people-area a {
        line-height: 1.4;
    }
}

.home4-banner-section .banner-content-wrapper .banner-content .btn-and-people-area .people-area a:hover {
    background-size: 0 1px;
    background-position: 0% 100%;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area {
    border: 1px solid rgba(32, 37, 69, 0.08);
    background-color: var(--white-color);
    border-radius: 30px;
    padding: 25px;
    margin-right: 50px;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area {
        border-radius: 20px;
        padding: 17px;
    }
}

@media (max-width: 1399px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area {
        padding: 20px;
        margin-right: 0;
    }
}

@media (max-width: 1199px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area {
        padding: 25px;
    }
}

@media (max-width: 991px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area {
        padding: 20px;
    }
}

@media (max-width: 767px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area {
        border-radius: 20px;
    }
}

@media (max-width: 576px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area {
        padding: 12px 15px;
    }
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: var(--white-color);
    border: 1px solid rgba(32, 37, 69, 0.1);
    border-radius: 10px;
    padding: 4px 4px 4px 25px;
}

@media (max-width: 1399px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form {
        padding: 4px 4px 4px 10px;
    }
}

@media (max-width: 1199px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form {
        justify-content: space-between;
        padding: 10px;
    }
}

@media (max-width: 991px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form {
        justify-content: center;
        padding: 18px 18px 18px 32px;
    }
}

@media (max-width: 767px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form {
        padding: 15px;
        flex-wrap: wrap;
        gap: 25px;
        justify-content: center;
    }
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box {
        gap: 5px;
    }
}

@media (max-width: 1399px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box {
        gap: 5px;
        padding-right: 0;
    }
}

@media (max-width: 1199px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box {
        gap: 10px;
    }
}

@media (max-width: 767px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box {
        gap: 10px;
        width: 100%;
        padding-right: unset;
    }
}

@media (max-width: 576px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box {
        position: relative;
    }
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .icon svg {
    fill: var(--primary-color4);
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input {
    line-height: 1;
}

@media (max-width: 1199px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input {
        width: 100%;
    }
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input label {
    color: #6A6A6A;
    font-family: var(--font-Hanken-Grotesk);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    display: block;
    margin-bottom: 5px;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .select-input {
    display: flex;
    align-items: center;
    line-height: 1;
    cursor: pointer;
    position: relative;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .select-input input {
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.3px;
    background-color: transparent;
    min-width: 130px;
    width: 100%;
    cursor: pointer;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .select-input input::-moz-placeholder {
    color: var(--title-color);
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .select-input input::placeholder {
    color: var(--title-color);
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .select-input input {
        min-width: 85px;
    }
}

@media (max-width: 1399px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .select-input input {
        min-width: 75px;
    }
}

@media (max-width: 1199px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .select-input input {
        min-width: 106px;
    }
}

@media (max-width: 767px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .select-input input {
        min-width: unset;
    }
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .select-input i {
    color: var(--title-color);
    font-weight: 500;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .select-input.time-date {
    position: relative;
    width: 100%;
    z-index: 1;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .select-input.time-date .arrow {
    position: absolute;
    right: 0;
    z-index: -1;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .select-input.time-date .arrow {
        right: -15px;
    }
}

@media (max-width: 1399px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .select-input.time-date .arrow {
        right: -16px;
    }
}

@media (max-width: 1199px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .select-input.time-date .arrow {
        right: 0;
    }
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap {
    padding: 10px 0;
    background-color: var(--white-color);
    border-radius: 5px;
    max-width: 300px;
    min-width: 300px;
    width: 100%;
    max-height: 250px;
    overflow-y: scroll;
    position: absolute;
    top: 50px;
    left: 0;
    z-index: 9;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08);
    display: none;
    transform: scaleY(0);
    transform-origin: top;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap::-webkit-scrollbar {
    width: 5px;
    /* width of the entire scrollbar */
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap::-webkit-scrollbar-track {
    background: #f5f4f4;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap::-webkit-scrollbar-thumb {
    background-color: #ddd;
    /* color of the scroll thumb */
    border-radius: 20px;
    /* creates padding around scroll thumb */
}

@media (max-width: 1199px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap {
        max-width: 100%;
        min-width: 100%;
        top: 75px;
    }
}

@media (max-width: 767px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap {
        top: 35px;
    }
}

@media (max-width: 576px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap {
        left: 50%;
        top: 50px;
    }
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .custom-select-search-area {
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 10px 5px 10px;
    padding-bottom: 5px;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .custom-select-search-area i {
    color: var(--primary-color1);
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .custom-select-search-area input {
    background-color: transparent;
    color: var(--title-color);
    font-size: 14px;
    font-weight: 400;
    width: 100%;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list {
    padding: 0;
    margin: 0;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li {
    transition: 0.5s;
    cursor: pointer;
    line-height: 1;
    margin-bottom: 5px;
    padding: 7px 15px;
    border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
    display: block;
    width: 100%;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li:last-child {
    margin-bottom: 0;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li .destination h2 {
    font-size: 14px;
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 0;
}

@media (max-width: 576px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li .destination h2 {
        font-size: 13px;
    }
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li .destination p {
    font-size: 12px;
    font-family: var(--font-Hanken-Grotesk);
    color: var(--text-color);
    font-weight: 400;
    margin-bottom: 0;
    line-height: 1.4;
}

@media (max-width: 576px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li .destination p {
        font-size: 11px;
    }
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li .tour span {
    color: var(--white-color);
    font-weight: 400;
    font-family: var(--font-Hanken-Grotesk);
    font-size: 12px;
    line-height: 1;
    text-align: center;
    background-color: var(--primary-color1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 576px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li .tour span {
        font-size: 13px;
    }
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li {
    position: relative;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li::before {
    content: "";
    height: 100%;
    width: 3px;
    background-color: var(--title-color);
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: 0.5s;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li.single-item {
    padding: 10px 15px;
    border-bottom: 1px solid #f5f4f4;
    margin-bottom: 0;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li.single-item:last-child {
    border-bottom: none;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li.single-item h2 {
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-Hanken-Grotesk);
    color: var(--text-color);
    margin-bottom: 0;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li:hover {
    background: rgba(211, 211, 211, 0.231372549);
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .option-list li:hover::before {
    opacity: 1;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .guest-count .single-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid #f5f4f4;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .guest-count .single-item .title h6 {
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-Hanken-Grotesk);
    color: var(--text-color);
    margin-bottom: 0;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .guest-count .single-item .title span {
    font-size: 13px;
    font-weight: 400;
    font-family: var(--font-Hanken-Grotesk);
    color: var(--text-color);
    margin-bottom: 0;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .guest-count .single-item .quantity-counter {
    display: flex;
    align-items: center;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .guest-count .single-item .quantity-counter a {
    height: 20px;
    min-width: 20px;
    max-width: 20px;
    border-radius: 50%;
    border: 1px solid var(--primary-color1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.35s;
    font-size: 17px;
    color: var(--primary-color1);
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .guest-count .single-item .quantity-counter a:hover {
    color: var(--white-color);
    background-color: var(--primary-color1);
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap .guest-count .single-item .quantity-counter input {
    width: 40px;
    background-color: transparent;
    text-align: center;
    line-height: 1;
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 14px;
    font-weight: 500;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap.active {
    display: block;
    transform: scaleY(1);
    animation: fade-down 0.3s linear;
}

@keyframes fade-down2 {
    0% {
        opacity: 0;
        transform: scaleY(0) translateX(-50%);
        visibility: hidden;
    }
    100% {
        opacity: 1;
        transform: scaleY(1) translateX(-50%);
        visibility: visible;
    }
}

@media (max-width: 576px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap.active {
        transform: scaleY(1) translateX(-50%);
        animation: fade-down2 0.3s linear;
    }
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .single-search-box .searchbox-input .custom-select-dropdown .custom-select-wrap.no-scroll {
    overflow-y: initial;
    max-width: unset;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .divider {
    position: relative;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .divider::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -1px;
    background-color: rgba(var(--primary-color4-opc), 0.5);
    width: 1px;
    height: 35px;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .divider::after {
        right: -1px;
    }
}

@media (max-width: 1399px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .divider::after {
        right: -1px;
    }
}

@media (max-width: 1199px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .divider::after {
        display: none;
    }
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area form .filter-area .divider::after:last-child {
    display: none;
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area .primary-btn1 {
    padding: 20px 32px;
    background-color: var(--primary-color4);
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area .primary-btn1 {
        padding: 20px;
    }
}

@media (max-width: 767px) {
    .home4-banner-section .banner-content-wrapper .banner-content .search-filter-area .primary-btn1 {
        padding: 15px 32px;
        background-color: var(--primary-color4);
        width: 100%;
    }
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area .primary-btn1:hover {
    color: var(--white-color);
}

.home4-banner-section .banner-content-wrapper .banner-content .search-filter-area .primary-btn1::after {
    background-color: var(--secondary-color);
}

.home4-banner-section .circular-text {
    position: absolute;
    bottom: -7%;
    right: -7%;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home4-banner-section .circular-text {
        right: -9%;
    }
}

@media (max-width: 1399px) {
    .home4-banner-section .circular-text {
        right: -10%;
    }
}

/*=============================
 34. Home4 About Start CSS
==============================*/

.home4-about-section .about-content-wrap .section-title {
    margin-bottom: 48px;
}

@media (max-width: 1199px) {
    .home4-about-section .about-content-wrap .section-title {
        margin-bottom: 40px;
    }
}

@media (max-width: 991px) {
    .home4-about-section .about-content-wrap .section-title {
        margin-bottom: 30px;
    }
}

.home4-about-section .about-content-wrap .section-title .sub-title {
    padding: 10px 17px;
}

.home4-about-section .about-content-wrap .section-title p {
    position: relative;
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--secondary-color-opc), 0.7);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.9;
    padding-top: 0;
    margin-left: 0px;
    padding-left: 15px;
    margin-top: 45px;
}

@media (max-width: 1399px) {
    .home4-about-section .about-content-wrap .section-title p {
        margin-left: 30px;
        margin-top: 35px;
    }
}

@media (max-width: 991px) {
    .home4-about-section .about-content-wrap .section-title p {
        margin-left: 52px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .home4-about-section .about-content-wrap .section-title p {
        margin-left: 25px;
        font-size: 15px;
        margin-top: 25px;
    }
}

@media (max-width: 991px) {
    .home4-about-section .about-content-wrap .section-title p {
        margin-top: 30px;
    }
}

@media (max-width: 767px) {
    .home4-about-section .about-content-wrap .section-title p {
        margin-left: 45px;
    }
}

@media (max-width: 576px) {
    .home4-about-section .about-content-wrap .section-title p {
        margin-top: 20px;
        margin-left: 0;
        font-size: 15px;
    }
}

.home4-about-section .about-content-wrap .section-title p::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 2px;
    height: 80px;
    background-color: #727CF5;
}

.home4-about-section .about-content-wrap ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

@media (max-width: 991px) {
    .home4-about-section .about-content-wrap ul {
        display: flex;
        align-items: start;
        gap: 30px;
    }
}

@media (max-width: 767px) {
    .home4-about-section .about-content-wrap ul {
        gap: 20px;
    }
}

@media (max-width: 576px) {
    .home4-about-section .about-content-wrap ul {
        flex-wrap: wrap;
    }
}

.home4-about-section .about-content-wrap ul li {
    display: flex;
    gap: 30px;
}

.home4-about-section .about-content-wrap ul li .single-content h3 {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--secondary-color);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 11px;
    text-transform: capitalize;
}

@media (max-width: 767px) {
    .home4-about-section .about-content-wrap ul li .single-content h3 {
        font-size: 21px;
    }
}

@media (max-width: 576px) {
    .home4-about-section .about-content-wrap ul li .single-content h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }
}

.home4-about-section .about-content-wrap ul li .single-content p {
    color: rgba(var(--secondary-color-opc), 0.7);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 0;
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .home4-about-section .about-content-wrap ul li .single-content p {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .home4-about-section .about-content-wrap ul li .single-content p {
        font-size: 15px;
    }
}

.home4-about-section .about-img-and-counter-wrap .about-img-and-counter {
    display: flex;
    align-items: center;
    gap: 31px;
    margin-bottom: 20px;
}

@media (max-width: 1199px) {
    .home4-about-section .about-img-and-counter-wrap .about-img-and-counter {
        gap: 15px;
    }
}

@media (max-width: 991px) {
    .home4-about-section .about-img-and-counter-wrap .about-img-and-counter {
        justify-content: center;
        gap: 31px;
    }
}

@media (max-width: 576px) {
    .home4-about-section .about-img-and-counter-wrap .about-img-and-counter {
        flex-wrap: wrap;
        gap: 25px;
    }
}

.home4-about-section .about-img-and-counter-wrap .about-img-and-counter img {
    min-width: 300px;
    min-height: 300px;
    -o-object-fit: cover;
    object-fit: fill;
    border-radius: 10px;
}

@media (max-width: 1199px) {
    .home4-about-section .about-img-and-counter-wrap .about-img-and-counter img {
        min-width: 260px;
        min-height: 260px;
    }
}

@media (max-width: 576px) {
    .home4-about-section .about-img-and-counter-wrap .about-img-and-counter img {
        min-width: unset;
        min-height: unset;
    }
}

.home4-about-section .about-img-and-counter-wrap .about-img-and-counter .counter-card {
    text-align: center;
    background-color: #EBF7FF;
    padding: 70px 50px;
    min-width: 298px;
    border-radius: 10px;
}

@media (max-width: 1399px) {
    .home4-about-section .about-img-and-counter-wrap .about-img-and-counter .counter-card {
        padding: 70px 30px;
        min-width: 216px;
    }
}

@media (max-width: 1199px) {
    .home4-about-section .about-img-and-counter-wrap .about-img-and-counter .counter-card {
        padding: 60px 16px;
        min-width: 125px;
    }
}

@media (max-width: 991px) {
    .home4-about-section .about-img-and-counter-wrap .about-img-and-counter .counter-card {
        padding: 70px 50px;
        min-width: unset;
    }
}

@media (max-width: 767px) {
    .home4-about-section .about-img-and-counter-wrap .about-img-and-counter .counter-card {
        padding: 70px 39px;
    }
}

@media (max-width: 576px) {
    .home4-about-section .about-img-and-counter-wrap .about-img-and-counter .counter-card {
        padding: 70px 50px;
    }
}

.home4-about-section .about-img-and-counter-wrap .about-img-and-counter .counter-card .number {
    display: flex;
    align-items: center;
    margin-bottom: 17px;
    justify-content: center;
}

@media (max-width: 1399px) {
    .home4-about-section .about-img-and-counter-wrap .about-img-and-counter .counter-card .number {
        margin-bottom: 14px;
    }
}

.home4-about-section .about-img-and-counter-wrap .about-img-and-counter .counter-card .number>span {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--secondary-color);
    font-weight: 800;
    font-size: 60px;
    line-height: 1;
}

@media (max-width: 1399px) {
    .home4-about-section .about-img-and-counter-wrap .about-img-and-counter .counter-card .number>span {
        font-size: 50px;
    }
}

@media (max-width: 1199px) {
    .home4-about-section .about-img-and-counter-wrap .about-img-and-counter .counter-card .number>span {
        font-size: 40px;
    }
}

@media (max-width: 991px) {
    .home4-about-section .about-img-and-counter-wrap .about-img-and-counter .counter-card .number>span {
        font-size: 55px;
    }
}

@media (max-width: 767px) {
    .home4-about-section .about-img-and-counter-wrap .about-img-and-counter .counter-card .number>span {
        font-size: 42px;
    }
}

.home4-about-section .about-img-and-counter-wrap .about-img-and-counter .counter-card .number h2 {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--secondary-color);
    font-weight: 800;
    font-size: 60px;
    line-height: 1;
    margin-bottom: 0;
}

@media (max-width: 1399px) {
    .home4-about-section .about-img-and-counter-wrap .about-img-and-counter .counter-card .number h2 {
        font-size: 50px;
    }
}

@media (max-width: 1199px) {
    .home4-about-section .about-img-and-counter-wrap .about-img-and-counter .counter-card .number h2 {
        font-size: 40px;
    }
}

@media (max-width: 991px) {
    .home4-about-section .about-img-and-counter-wrap .about-img-and-counter .counter-card .number h2 {
        font-size: 55px;
    }
}

@media (max-width: 767px) {
    .home4-about-section .about-img-and-counter-wrap .about-img-and-counter .counter-card .number h2 {
        font-size: 42px;
    }
}

.home4-about-section .about-img-and-counter-wrap .about-img-and-counter .counter-card h3 {
    font-family: var(--font-Almarai);
    color: rgba(var(--secondary-color-opc), 0.5);
    font-weight: 400;
    font-size: 15px;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 0;
}

@media (max-width: 1199px) {
    .home4-about-section .about-img-and-counter-wrap .about-img-and-counter .counter-card h3 {
        line-height: 1.3;
    }
}

.home4-about-section .about-img-and-counter-wrap .about-img-and-counter .counter-card.style-2 {
    text-align: center;
    background-color: #FFEBE8;
}

/*=============================
 35. Home4 Service Start CSS
==============================*/

.home4-service-section .home4-service-slider-area .service-card3 {
    background-color: #F2F5FF;
    border: 1px solid rgba(var(--secondary-color-opc), 0.1);
    border-radius: 10px;
    padding: 15px;
    transition: 0.5s;
}

@media (max-width: 576px) {
    .home4-service-section .home4-service-slider-area .service-card3 {
        padding: 10px;
    }
}

.home4-service-section .home4-service-slider-area .service-card3 .service-img img {
    border-radius: 10px;
    -o-object-fit: cover;
    object-fit: cover;
}

.home4-service-section .home4-service-slider-area .service-card3 .content {
    padding: 30px 25px 16px;
    text-align: center;
}

@media (max-width: 1399px) {
    .home4-service-section .home4-service-slider-area .service-card3 .content {
        padding: 30px 11px 16px;
    }
}

@media (max-width: 991px) {
    .home4-service-section .home4-service-slider-area .service-card3 .content {
        padding: 27px 20px 14px;
    }
}

@media (max-width: 576px) {
    .home4-service-section .home4-service-slider-area .service-card3 .content {
        padding: 22px 17px 11px;
    }
}

.home4-service-section .home4-service-slider-area .service-card3 .content h3 {
    margin-bottom: 0;
    line-height: 1;
}

.home4-service-section .home4-service-slider-area .service-card3 .content h3 a {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 20px;
    text-transform: capitalize;
    background: linear-gradient(to bottom, var(--white-color) 0%, var(--white-color) 98%);
    background-size: 0px 1.5px;
    background-repeat: no-repeat;
    background-position: right 100%;
    transition: background-size 0.75s;
}

.home4-service-section .home4-service-slider-area .service-card3 .content h3 a:hover {
    background-size: 100% 1.5px;
    background-position: 0% 100%;
}

@media (max-width: 991px) {
    .home4-service-section .home4-service-slider-area .service-card3 .content h3 a {
        font-size: 19px;
    }
}

@media (max-width: 576px) {
    .home4-service-section .home4-service-slider-area .service-card3 .content h3 a {
        font-size: 18px;
    }
}

.home4-service-section .home4-service-slider-area .service-card3:hover {
    background-color: var(--primary-color4);
}

.home4-service-section .home4-service-slider-area .service-card3:hover .content h3 a {
    color: var(--white-color);
}

.home4-service-section .slider-btn-grp {
    display: flex;
    align-items: center;
    gap: 30px;
}

@media (max-width: 767px) {
    .home4-service-section .slider-btn-grp {
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .home4-service-section .slider-btn-grp {
        display: none;
    }
}

.home4-service-section .slider-btn-grp .slider-btn {
    background: transparent;
    z-index: 1;
}

.home4-service-section .slider-btn-grp .slider-btn:hover {
    background-color: var(--title-color);
}

/*=============================
 36. Home4 Feature Start CSS
==============================*/

.home4-project-section {
    background: url(../img/home4/home4-project-bg.png), linear-gradient(180deg, #F7F0EA 0%, #F7F0EA 100%);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 90px 0;
}

@media (max-width: 576px) {
    .home4-project-section {
        padding: 70px 0;
    }
}

.project-card .project-img-wrap {
    position: relative;
}

.project-card .project-img-wrap .project-img {
    position: relative;
    overflow: hidden;
    display: flex;
    transition: all 0.5s ease-out;
    border-radius: 10px;
}

.project-card .project-img-wrap .project-img img {
    border-radius: 10px;
    transition: all 0.5s ease-out;
}

.project-card .project-img-wrap .project-img::after {
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) rotate(-45deg);
    content: "";
    z-index: 1;
}

.project-card .project-img-wrap .project-img a img {
    border-radius: 10px;
}

.project-card .project-img-wrap .project-btn {
    padding: 8px 14px;
    border-radius: 5px 0 10px 0;
    transition: 0.5s;
    background-color: var(--secondary-color);
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
}

.project-card .project-img-wrap .project-btn svg {
    width: 27px;
    fill: var(--white-color);
}

@media (max-width: 576px) {
    .project-card .project-img-wrap .project-btn svg {
        width: 24px;
    }
}

.project-card .project-content {
    padding: 22px 20px 0 0;
}

@media (max-width: 991px) {
    .project-card .project-content {
        padding: 24px 16px 0 0;
    }
}

@media (max-width: 576px) {
    .project-card .project-content {
        padding: 22px 20px 0 0;
    }
}

.project-card .project-content h3,
.project-card .project-content h2 {
    margin-bottom: 11px;
    line-height: 1;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .project-card .project-content h3,
    .project-card .project-content h2 {
        margin-bottom: 13px;
    }
}

@media (max-width: 767px) {
    .project-card .project-content h3,
    .project-card .project-content h2 {
        margin-bottom: 13px;
    }
}

.project-card .project-content h3 a,
.project-card .project-content h2 a {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 25px;
    line-height: 1;
    text-transform: capitalize;
    background: linear-gradient(to bottom, var(--title-color) 0%, var(--title-color) 98%);
    background-size: 0px 1.5px;
    background-repeat: no-repeat;
    background-position: right 100%;
    transition: background-size 0.75s;
}

@media (max-width: 1199px) {
    .project-card .project-content h3 a,
    .project-card .project-content h2 a {
        font-size: 21px;
    }
}

@media (max-width: 991px) {
    .project-card .project-content h3 a,
    .project-card .project-content h2 a {
        font-size: 24px;
    }
}

@media (max-width: 767px) {
    .project-card .project-content h3 a,
    .project-card .project-content h2 a {
        font-size: 25px;
    }
}

@media (max-width: 576px) {
    .project-card .project-content h3 a,
    .project-card .project-content h2 a {
        font-size: 21px;
    }
}

.project-card .project-content h3 a:hover,
.project-card .project-content h2 a:hover {
    background-size: 100% 1.5px;
    background-position: 0% 100%;
}

.project-card .project-content ul {
    display: flex;
    align-items: center;
    gap: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.project-card .project-content ul li {
    font-family: var(--font-Almarai);
    color: var(--primary-color4);
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    text-transform: uppercase;
    transition: 0.5s;
}

.project-card:hover .project-img img {
    transform: scale(1.1);
}

.project-card:hover .project-img::after {
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

.project-card:hover .project-btn {
    background-color: var(--primary-color4);
}

/*=============================
 37. Home4 Subscribe Start CSS
==============================*/

.home4-subscribe-section .subscribe-wrapper {
    padding: 10px 90px 10px 10px;
    border-radius: 15px;
    background-color: #4755AA;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 90px;
    z-index: 1;
}

@media (max-width: 1399px) {
    .home4-subscribe-section .subscribe-wrapper {
        padding: 10px 70px 10px 10px;
        gap: 80px;
    }
}

@media (max-width: 1399px) {
    .home4-subscribe-section .subscribe-wrapper {
        padding: 10px 30px 10px 10px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .home4-subscribe-section .subscribe-wrapper {
        gap: 30px;
    }
}

@media (max-width: 991px) {
    .home4-subscribe-section .subscribe-wrapper {
        flex-wrap: wrap;
        padding: 20px 20px 40px;
        gap: 25px;
    }
}

@media (max-width: 576px) {
    .home4-subscribe-section .subscribe-wrapper {
        padding: 10px 10px 20px;
        gap: 20px;
        border-radius: 10px;
    }
}

.home4-subscribe-section .subscribe-wrapper .subscribe-img {
    max-width: 590px;
    min-width: 590px;
    width: 100%;
}

@media (max-width: 1399px) {
    .home4-subscribe-section .subscribe-wrapper .subscribe-img {
        min-width: 530px;
    }
}

@media (max-width: 1199px) {
    .home4-subscribe-section .subscribe-wrapper .subscribe-img {
        min-width: 450px;
    }
}

@media (max-width: 991px) {
    .home4-subscribe-section .subscribe-wrapper .subscribe-img {
        max-width: unset;
        min-width: unset;
    }
}

.home4-subscribe-section .subscribe-wrapper .subscribe-img img {
    border-radius: 15px;
    min-height: 280px;
    -o-object-fit: cover;
    object-fit: cover;
}

@media (max-width: 576px) {
    .home4-subscribe-section .subscribe-wrapper .subscribe-img img {
        border-radius: 10px;
    }
}

.home4-subscribe-section .subscribe-wrapper .subscribe-content {
    max-width: 540px;
    width: 100%;
}

@media (max-width: 991px) {
    .home4-subscribe-section .subscribe-wrapper .subscribe-content {
        max-width: unset;
    }
}

.home4-subscribe-section .subscribe-wrapper .subscribe-content h4,
.home4-subscribe-section .subscribe-wrapper .subscribe-content h2 {
    color: var(--white-color);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 27px;
    line-height: 1.3;
    margin-bottom: 40px;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .home4-subscribe-section .subscribe-wrapper .subscribe-content h4,
    .home4-subscribe-section .subscribe-wrapper .subscribe-content h2 {
        font-size: 25px;
    }
}

@media (max-width: 991px) {
    .home4-subscribe-section .subscribe-wrapper .subscribe-content h4,
    .home4-subscribe-section .subscribe-wrapper .subscribe-content h2 {
        margin-bottom: 30px;
    }
}

@media (max-width: 576px) {
    .home4-subscribe-section .subscribe-wrapper .subscribe-content h4,
    .home4-subscribe-section .subscribe-wrapper .subscribe-content h2 {
        font-size: 22px;
        margin-bottom: 20px;
    }
}

.home4-subscribe-section .subscribe-wrapper .subscribe-content .form-inner {
    display: flex;
    align-items: center;
    gap: 15px;
}

@media (max-width: 576px) {
    .home4-subscribe-section .subscribe-wrapper .subscribe-content .form-inner {
        flex-wrap: wrap;
    }
}

.home4-subscribe-section .subscribe-wrapper .subscribe-content .form-inner input {
    border-color: rgba(255, 255, 255, 0.6);
    height: 48px;
    color: var(--white-color);
    background: transparent;
}

.home4-subscribe-section .subscribe-wrapper .subscribe-content .form-inner input::-moz-placeholder {
    color: rgba(255, 255, 255, 0.75);
}

.home4-subscribe-section .subscribe-wrapper .subscribe-content .form-inner input::placeholder {
    color: rgba(255, 255, 255, 0.75);
}

.home4-subscribe-section .subscribe-wrapper .subscribe-content .form-inner .btn-grp {
    display: flex;
    align-items: center;
    gap: 5px;
}

.home4-subscribe-section .subscribe-wrapper .subscribe-content .form-inner .btn-grp button {
    color: var(--white-color);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    padding: 18px 25px;
    background-color: var(--primary-color4);
    border-radius: 5px;
    transition: 0.5s;
}

.home4-subscribe-section .subscribe-wrapper .subscribe-content .form-inner .btn-grp button:hover {
    background-color: var(--white-color);
    color: var(--title-color);
}

.home4-subscribe-section .subscribe-wrapper .subscribe-content .form-inner .btn-grp button.send-btn {
    padding: 0;
    min-width: 48px;
    max-width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home4-subscribe-section .subscribe-wrapper .subscribe-content .form-inner .btn-grp button.send-btn svg {
    fill: var(--white-color);
    transition: 0.5s;
}

.home4-subscribe-section .subscribe-wrapper .subscribe-content .form-inner .btn-grp button.send-btn:hover svg {
    fill: var(--title-color);
}

.home4-subscribe-section .subscribe-wrapper .vector {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
}

.home4-subscribe-section.style-2 {
    background-color: rgba(var(--primary-color1-opc), 0.7);
}

.home4-subscribe-section.style-2 .subscribe-wrapper {
    padding: 10px 294px 10px 0;
    background: unset;
    border-radius: 0;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home4-subscribe-section.style-2 .subscribe-wrapper {
        padding: 10px 38px 10px 0;
    }
}

@media (max-width: 1399px) {
    .home4-subscribe-section.style-2 .subscribe-wrapper {
        padding: 10px 38px 10px 0;
    }
}

@media (max-width: 1199px) {
    .home4-subscribe-section.style-2 .subscribe-wrapper {
        padding: 10px 17px 10px 0;
    }
}

@media (max-width: 991px) {
    .home4-subscribe-section.style-2 .subscribe-wrapper {
        padding: 10px 0 20px 0;
    }
}

.home4-subscribe-section.style-2 .subscribe-wrapper .subscribe-img {
    max-width: unset;
    min-width: unset;
    width: unset;
}

.home4-subscribe-section.style-2 .subscribe-wrapper .subscribe-content h4 {
    color: var(--title-color);
}

.home4-subscribe-section.style-2 .subscribe-wrapper .subscribe-content .form-inner input {
    border-color: rgba(var(--title-color-opc), 0.6);
    color: rgba(var(--title-color-opc), 0.7);
}

.home4-subscribe-section.style-2 .subscribe-wrapper .subscribe-content .form-inner input::-moz-placeholder {
    color: rgba(var(--title-color-opc), 0.3);
}

.home4-subscribe-section.style-2 .subscribe-wrapper .subscribe-content .form-inner input::placeholder {
    color: rgba(var(--title-color-opc), 0.3);
}

.home4-subscribe-section.style-2 .subscribe-wrapper .subscribe-content .form-inner .btn-grp button {
    background-color: var(--primary-color5);
}

.home4-subscribe-section.style-2 .subscribe-wrapper .subscribe-content .form-inner .btn-grp button:hover {
    background-color: var(--white-color);
}

.home4-subscribe-section.style-2 .subscribe-wrapper .vector {
    right: -12px;
}

/*=============================
 38. Home4 Testimonial Start CSS
==============================*/

.home4-testimonial-section {
    background: url(../img/home4/home4-testimonial-bg.png), linear-gradient(180deg, #EEEFFF 0%, #EEEFFF 100%);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 120px 0;
}

@media (max-width: 991px) {
    .home4-testimonial-section {
        padding: 90px 0;
    }
}

@media (max-width: 576px) {
    .home4-testimonial-section {
        padding: 70px 0;
    }
}

.home4-testimonial-section .slider-btn-grp {
    display: flex;
    align-items: center;
    gap: 30px;
}

@media (max-width: 767px) {
    .home4-testimonial-section .slider-btn-grp {
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .home4-testimonial-section .slider-btn-grp {
        display: none;
    }
}

.home4-testimonial-section .slider-btn-grp .slider-btn {
    background: transparent;
    z-index: 1;
}

.home4-testimonial-section .slider-btn-grp .slider-btn:hover {
    background-color: var(--title-color);
}

.home4-testimonial-section .home4-testimonial-slider-area .testimonial-slide {
    background-color: rgba(var(--white-color-opc), 0.4);
    border: 1px solid rgba(var(--secondary-color-opc), 0.1);
    padding: 40px 45px 34px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

@media (max-width: 767px) {
    .home4-testimonial-section .home4-testimonial-slider-area .testimonial-slide {
        padding: 35px 30px;
    }
}

@media (max-width: 576px) {
    .home4-testimonial-section .home4-testimonial-slider-area .testimonial-slide {
        padding: 28px 19px;
    }
}

.home4-testimonial-section .home4-testimonial-slider-area .testimonial-slide .testimonial-content>svg {
    width: 46px;
    height: 46px;
    fill: none;
    stroke: rgba(var(--secondary-color-opc), 0.2);
    margin-bottom: 37px;
}

@media (max-width: 767px) {
    .home4-testimonial-section .home4-testimonial-slider-area .testimonial-slide .testimonial-content>svg {
        margin-bottom: 30px;
    }
}

@media (max-width: 576px) {
    .home4-testimonial-section .home4-testimonial-slider-area .testimonial-slide .testimonial-content>svg {
        margin-bottom: 25px;
        width: 42px;
        height: 42px;
    }
}

.home4-testimonial-section .home4-testimonial-slider-area .testimonial-slide .testimonial-content .content>span {
    font-family: var(--font-Almarai);
    color: var(--primary-color4);
    font-weight: 400;
    font-size: 15px;
    line-height: 1;
    text-transform: uppercase;
    display: block;
    margin-bottom: 23px;
}

@media (max-width: 991px) {
    .home4-testimonial-section .home4-testimonial-slider-area .testimonial-slide .testimonial-content .content>span {
        margin-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .home4-testimonial-section .home4-testimonial-slider-area .testimonial-slide .testimonial-content .content>span {
        margin-bottom: 15px;
    }
}

.home4-testimonial-section .home4-testimonial-slider-area .testimonial-slide .testimonial-content .content p {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--secondary-color-opc), 0.7);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.9;
    text-transform: capitalize;
    padding-bottom: 35px;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(var(--secondary-color-opc), 0.1);
}

@media (max-width: 991px) {
    .home4-testimonial-section .home4-testimonial-slider-area .testimonial-slide .testimonial-content .content p {
        padding-bottom: 25px;
        margin-bottom: 25px;
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .home4-testimonial-section .home4-testimonial-slider-area .testimonial-slide .testimonial-content .content p {
        font-size: 18px;
    }
}

@media (max-width: 576px) {
    .home4-testimonial-section .home4-testimonial-slider-area .testimonial-slide .testimonial-content .content p {
        font-size: 15px;
        line-height: 1.8;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
}

.home4-testimonial-section .home4-testimonial-slider-area .testimonial-slide .testimonial-content .content .author-area h3 {
    font-family: var(--font-Almarai);
    color: var(--secondary-color);
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .home4-testimonial-section .home4-testimonial-slider-area .testimonial-slide .testimonial-content .content .author-area h3 {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .home4-testimonial-section .home4-testimonial-slider-area .testimonial-slide .testimonial-content .content .author-area h3 {
        font-size: 17px;
    }
}

@media (max-width: 576px) {
    .home4-testimonial-section .home4-testimonial-slider-area .testimonial-slide .testimonial-content .content .author-area h3 {
        font-size: 15px;
    }
}

.home4-testimonial-section .home4-testimonial-slider-area .testimonial-slide .testimonial-content .content .author-area h3 span {
    color: rgba(var(--secondary-color-opc), 0.5);
    font-size: 21px;
}

@media (max-width: 991px) {
    .home4-testimonial-section .home4-testimonial-slider-area .testimonial-slide .testimonial-content .content .author-area h3 span {
        font-size: 19px;
    }
}

@media (max-width: 767px) {
    .home4-testimonial-section .home4-testimonial-slider-area .testimonial-slide .testimonial-content .content .author-area h3 span {
        font-size: 18px;
    }
}

@media (max-width: 576px) {
    .home4-testimonial-section .home4-testimonial-slider-area .testimonial-slide .testimonial-content .content .author-area h3 span {
        font-size: 17px;
    }
}

.home4-testimonial-section .home4-testimonial-slider-area .video-area-wrap {
    background-color: rgba(var(--primary-color4-opc), 0.2);
    padding: 5px;
    position: absolute;
    border-radius: 50%;
    top: 42%;
    right: 31%;
}

@media (max-width: 1399px) {
    .home4-testimonial-section .home4-testimonial-slider-area .video-area-wrap {
        right: 30%;
    }
}

@media (max-width: 1199px) {
    .home4-testimonial-section .home4-testimonial-slider-area .video-area-wrap {
        right: 29%;
    }
}

@media (max-width: 991px) {
    .home4-testimonial-section .home4-testimonial-slider-area .video-area-wrap {
        top: 1%;
        right: 1%;
    }
}

.home4-testimonial-section .home4-testimonial-slider-area .video-area-wrap a {
    border-radius: 50%;
}

.home4-testimonial-section .home4-testimonial-slider-area .video-area-wrap .video-area .icon .video-circle {
    width: 77px;
    height: 77px;
}

@media (max-width: 767px) {
    .home4-testimonial-section .home4-testimonial-slider-area .video-area-wrap .video-area .icon .video-circle {
        width: 60px;
        height: 60px;
    }
}

.home4-testimonial-section .home4-testimonial-slider-area .video-area-wrap .video-area .icon .play-icon {
    width: 32px;
    height: 32px;
}

@media (max-width: 767px) {
    .home4-testimonial-section .home4-testimonial-slider-area .video-area-wrap .video-area .icon .play-icon {
        width: 26px;
        height: 26px;
    }
}

@media (max-width: 991px) {
    .home4-testimonial-section .home4-testimonial-slider-area .testimonial-images {
        display: none;
    }
}

.home4-testimonial-section .home4-testimonial-slider-area .testimonial-images img {
    width: 213px;
    height: 213px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    margin-left: 40px;
    transition: 0.5s;
}

@media (max-width: 1199px) {
    .home4-testimonial-section .home4-testimonial-slider-area .testimonial-images img.active {
        width: 200px;
        height: 200px;
    }
}

.home4-testimonial-section .home4-testimonial-slider-area .testimonial-images img.testimonial-prev {
    position: absolute;
    top: 0;
    right: 0;
    width: 111px;
    height: 111px;
}

.home4-testimonial-section .home4-testimonial-slider-area .testimonial-images img.testimonial-next {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 111px;
    height: 111px;
}

.home4-testimonial-section .home4-testimonial-slider-area .swiper-slide-active .testimonial-slide span {
    animation: fadeInDown 1.7s;
}

.home4-testimonial-section .home4-testimonial-slider-area .swiper-slide-active .testimonial-slide p {
    animation: fadeInDown 1.7s;
}

.home4-testimonial-section .home4-testimonial-slider-area .swiper-slide-active .testimonial-slide .author-area {
    animation: fadeInUp 1.7s;
}

/*=============================
 39. Home4 Blog Start CSS
==============================*/

.home4-blog-section {
    background-color: rgb(246, 246, 246);
    padding: 90px 0;
    overflow: hidden;
}

@media (max-width: 1199px) {
    .home4-blog-section {
        padding: 90px 0;
    }
}

@media (max-width: 576px) {
    .home4-blog-section {
        padding: 70px 0;
    }
}

.home4-blog-section .blog-card3 {
    border-radius: 10px;
}

.home4-blog-section .blog-card3 .blog-img-and-top-date-area {
    position: relative;
}

.home4-blog-section .blog-card3 .blog-img-and-top-date-area .blog-img {
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: 10px;
    transition: all 0.5s ease-out;
}

.home4-blog-section .blog-card3 .blog-img-and-top-date-area .blog-img img {
    border-radius: 10px;
    -o-object-fit: cover;
    object-fit: cover;
    transition: all 0.5s ease-out;
}

.home4-blog-section .blog-card3 .blog-img-and-top-date-area .blog-img::after {
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) rotate(-45deg);
    content: "";
    z-index: 1;
}

.home4-blog-section .blog-card3 .blog-img-and-top-date-area .top-date-content {
    background-color: var(--secondary-color);
    padding: 10px;
    width: 75px;
    height: 79px;
    border-radius: 8px;
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 1;
}

@media (max-width: 991px) {
    .home4-blog-section .blog-card3 .blog-img-and-top-date-area .top-date-content {
        padding: 8px;
        width: 70px;
        height: 70px;
        top: 10px;
        left: 10px;
    }
}

@media (max-width: 767px) {
    .home4-blog-section .blog-card3 .blog-img-and-top-date-area .top-date-content {
        padding: 11px;
        width: 70px;
        height: 70px;
        top: 15px;
        left: 15px;
    }
}

@media (max-width: 576px) {
    .home4-blog-section .blog-card3 .blog-img-and-top-date-area .top-date-content {
        top: 10px;
        left: 10px;
    }
}

.home4-blog-section .blog-card3 .blog-img-and-top-date-area .top-date-content h4,
.home4-blog-section .blog-card3 .blog-img-and-top-date-area .top-date-content h3 {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--white-color);
    font-weight: 700;
    font-size: 25px;
    text-transform: uppercase;
    line-height: 18px;
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .home4-blog-section .blog-card3 .blog-img-and-top-date-area .top-date-content h4,
    .home4-blog-section .blog-card3 .blog-img-and-top-date-area .top-date-content h3 {
        font-size: 18px;
        line-height: 18px;
    }
}

@media (max-width: 767px) {
    .home4-blog-section .blog-card3 .blog-img-and-top-date-area .top-date-content h4,
    .home4-blog-section .blog-card3 .blog-img-and-top-date-area .top-date-content h3 {
        font-size: 15px;
        line-height: 16px;
    }
}

.home4-blog-section .blog-card3 .blog-img-and-top-date-area .top-date-content h4 a,
.home4-blog-section .blog-card3 .blog-img-and-top-date-area .top-date-content h3 a {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--white-color);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    line-height: 1.6;
    display: block;
}

.home4-blog-section .blog-card3 .blog-content {
    padding: 25px 30px;
}

@media (max-width: 1199px) {
    .home4-blog-section .blog-card3 .blog-content {
        padding: 25px;
    }
}

@media (max-width: 991px) {
    .home4-blog-section .blog-card3 .blog-content {
        padding: 15px;
    }
}

@media (max-width: 576px) {
    .home4-blog-section .blog-card3 .blog-content {
        padding: 20px 18px;
    }
}

.home4-blog-section .blog-card3 .blog-content .blog-meta {
    margin-bottom: 16px;
}

@media (max-width: 991px) {
    .home4-blog-section .blog-card3 .blog-content .blog-meta {
        margin-bottom: 15px;
    }
}

.home4-blog-section .blog-card3 .blog-content .blog-meta ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 25px;
}

.home4-blog-section .blog-card3 .blog-content .blog-meta ul li {
    position: relative;
}

.home4-blog-section .blog-card3 .blog-content .blog-meta ul li::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -12px;
    width: 1px;
    height: 12px;
    background-color: rgba(var(--secondary-color-opc), 0.2);
}

@media (max-width: 767px) {
    .home4-blog-section .blog-card3 .blog-content .blog-meta ul li::before {
        right: -14px;
    }
}

.home4-blog-section .blog-card3 .blog-content .blog-meta ul li:last-child::before {
    display: none;
}

.home4-blog-section .blog-card3 .blog-content .blog-meta ul li .blog-date {
    text-decoration: underline;
    text-transform: uppercase;
    background-color: rgba(var(--primary-color4-opc), 0.2);
    color: rgba(var(--primary-color4-opc), 0.7);
    text-underline-offset: 2px;
    padding: 8px 12px;
    border-radius: 100px;
    font-size: 13px;
    line-height: 1;
    transition: 0.5s;
}

.home4-blog-section .blog-card3 .blog-content .blog-meta ul li .blog-date:hover {
    color: var(--primary-color4);
}

.home4-blog-section .blog-card3 .blog-content .blog-meta ul li span {
    color: rgba(var(--secondary-color-opc), 0.5);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: 0.5s;
    padding: 8px 14px;
    border-radius: 15px;
    background-color: rgba(var(--secondary-color-opc), 0.1);
    line-height: 1;
}

.home4-blog-section .blog-card3 .blog-content h4 {
    margin-bottom: 21px;
}

@media (max-width: 991px) {
    .home4-blog-section .blog-card3 .blog-content h4 {
        margin-bottom: 15px;
    }
}

@media (max-width: 767px) {
    .home4-blog-section .blog-card3 .blog-content h4 {
        margin-bottom: 18px;
        line-height: 1;
    }
}

.home4-blog-section .blog-card3 .blog-content h4 a {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 28px;
    line-height: 1.3;
    background: linear-gradient(to bottom, var(--title-color) 0%, var(--title-color) 98%);
    background-size: 0px 1.5px;
    background-repeat: no-repeat;
    background-position: right 95%;
    transition: background-size 0.75s;
    text-transform: capitalize;
}

@media (max-width: 1399px) {
    .home4-blog-section .blog-card3 .blog-content h4 a {
        font-size: 25px;
    }
}

@media (max-width: 1199px) {
    .home4-blog-section .blog-card3 .blog-content h4 a {
        font-size: 21px;
    }
}

@media (max-width: 991px) {
    .home4-blog-section .blog-card3 .blog-content h4 a {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .home4-blog-section .blog-card3 .blog-content h4 a {
        font-size: 23px;
    }
}

@media (max-width: 576px) {
    .home4-blog-section .blog-card3 .blog-content h4 a {
        font-size: 22px;
    }
}

.home4-blog-section .blog-card3 .blog-content h4 a:hover {
    background-size: 100% 1.5px;
    background-position: 0% 95%;
}

.home4-blog-section .blog-card3 .blog-content .date-and-time {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 17px;
}

@media (max-width: 767px) {
    .home4-blog-section .blog-card3 .blog-content .date-and-time {
        gap: 3px;
        margin-bottom: 8px;
    }
}

.home4-blog-section .blog-card3 .blog-content .date-and-time li {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    position: relative;
    list-style: none;
}

@media (max-width: 767px) {
    .home4-blog-section .blog-card3 .blog-content .date-and-time li {
        font-size: 14px;
    }
}

.home4-blog-section .blog-card3 .blog-content .date-and-time li a {
    color: var(--text-color);
    transition: 0.5s;
}

.home4-blog-section .blog-card3 .blog-content .date-and-time li a:hover {
    color: var(--primary-color3);
}

.home4-blog-section .blog-card3:hover .blog-img img {
    transform: scale(1.1);
}

.home4-blog-section .blog-card3:hover .blog-img::after {
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

.home4-blog-section .blog-card3.style-4 .blog-img-and-top-date-area .blog-content .blog-meta ul li a.blog-date {
    background-color: rgba(251, 82, 30, 0.2);
    color: #F94834;
}

.home4-blog-section .blog-card3 .read-btn {
    color: rgba(var(--secondary-color-opc), 0.5);
}

.home4-blog-section .slider-btn-grp {
    display: flex;
    align-items: center;
    gap: 30px;
}

@media (max-width: 767px) {
    .home4-blog-section .slider-btn-grp {
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .home4-blog-section .slider-btn-grp {
        display: none;
    }
}

.home4-blog-section .slider-btn-grp .slider-btn {
    background: transparent;
    z-index: 1;
}

.home4-blog-section .slider-btn-grp .slider-btn:hover {
    background-color: var(--title-color);
}

/*=============================
 40. Home5 Banner Start CSS
==============================*/

.home5-banner-section {
    position: relative;
}

.home5-banner-section .banner-wrapper {
    background: url(../img/home5/home5-banner-bg.png), linear-gradient(180deg, #E8EEF0 0%, #E8EEF0 100%);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0 0 50px 50px;
    margin: 0 200px;
    position: relative;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home5-banner-section .banner-wrapper {
        margin: 0 30px;
    }
}

@media (max-width: 1399px) {
    .home5-banner-section .banner-wrapper {
        margin: 0 30px;
    }
}

@media (max-width: 767px) {
    .home5-banner-section .banner-wrapper {
        margin: 0 15px;
    }
}

@media (max-width: 576px) {
    .home5-banner-section .banner-wrapper {
        margin: 0 10px;
    }
}

.home5-banner-section .banner-wrapper .banner-content {
    padding: 143px 0 148px;
    z-index: 2;
    position: relative;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home5-banner-section .banner-wrapper .banner-content {
        padding: 130px 35px 145px;
    }
}

@media (max-width: 1399px) {
    .home5-banner-section .banner-wrapper .banner-content {
        padding: 100px 0 111px 35px;
    }
}

@media (max-width: 1199px) {
    .home5-banner-section .banner-wrapper .banner-content {
        padding: 100px 0 111px 20px;
    }
}

@media (max-width: 991px) {
    .home5-banner-section .banner-wrapper .banner-content {
        padding: 100px 20px 111px 20px;
    }
}

@media (max-width: 767px) {
    .home5-banner-section .banner-wrapper .banner-content {
        padding: 100px 10px 111px 10px;
    }
}

@media (max-width: 576px) {
    .home5-banner-section .banner-wrapper .banner-content {
        padding: 80px 0;
    }
}

.home5-banner-section .banner-wrapper .banner-content h1 {
    font-family: var(--font-Almarai);
    font-size: 65px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home5-banner-section .banner-wrapper .banner-content h1 {
        font-size: 58px;
    }
}

@media (max-width: 1399px) {
    .home5-banner-section .banner-wrapper .banner-content h1 {
        font-size: 53px;
    }
}

@media (max-width: 767px) {
    .home5-banner-section .banner-wrapper .banner-content h1 {
        font-size: 51px;
        line-height: 1.2;
    }
}

@media (max-width: 576px) {
    .home5-banner-section .banner-wrapper .banner-content h1 {
        font-size: 43px;
        line-height: 1.1;
    }
}

.home5-banner-section .banner-wrapper .banner-content h1 span {
    color: var(--primary-color4);
}

.home5-banner-section .banner-wrapper .banner-content .content {
    max-width: 631px;
    width: 100%;
    margin-bottom: 40px;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home5-banner-section .banner-wrapper .banner-content .content {
        margin-bottom: 50px;
    }
}

@media (max-width: 1399px) {
    .home5-banner-section .banner-wrapper .banner-content .content {
        margin-bottom: 45px;
    }
}

@media (max-width: 767px) {
    .home5-banner-section .banner-wrapper .banner-content .content {
        margin-bottom: 35px;
    }
}

@media (max-width: 576px) {
    .home5-banner-section .banner-wrapper .banner-content .content {
        margin-bottom: 25px;
    }
}

.home5-banner-section .banner-wrapper .banner-content .content p {
    color: rgba(var(--secondary-color-opc), 0.6);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.9;
    margin-bottom: 0;
    padding-left: 15px;
    position: relative;
}

@media (max-width: 1199px) {
    .home5-banner-section .banner-wrapper .banner-content .content p {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .home5-banner-section .banner-wrapper .banner-content .content p {
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    .home5-banner-section .banner-wrapper .banner-content .content p {
        line-height: 1.6;
        padding-left: 0;
    }
}

.home5-banner-section .banner-wrapper .banner-content .content p::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 2px;
    height: 43px;
    background-color: rgba(var(--black-color-opc), 0.3);
}

@media (max-width: 576px) {
    .home5-banner-section .banner-wrapper .banner-content .content p::before {
        display: none;
    }
}

.home5-banner-section .banner-wrapper .banner-content .btn-and-people-area {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home5-banner-section .banner-wrapper .banner-content .btn-and-people-area {
        gap: 6px;
    }
}

@media (max-width: 1399px) {
    .home5-banner-section .banner-wrapper .banner-content .btn-and-people-area {
        gap: 10px;
    }
}

@media (max-width: 1199px) {
    .home5-banner-section .banner-wrapper .banner-content .btn-and-people-area {
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .home5-banner-section .banner-wrapper .banner-content .btn-and-people-area {
        gap: 18px;
    }
}

@media (max-width: 576px) {
    .home5-banner-section .banner-wrapper .banner-content .btn-and-people-area {
        flex-wrap: wrap;
    }
}

.home5-banner-section .banner-wrapper .banner-content .btn-and-people-area>svg {
    fill: rgba(var(--primary-color5--opc), 0.3);
}

@media (max-width: 767px) {
    .home5-banner-section .banner-wrapper .banner-content .btn-and-people-area>svg {
        display: none;
    }
}

.home5-banner-section .banner-wrapper .banner-content .btn-and-people-area .primary-btn1 {
    background-color: var(--primary-color5);
    text-decoration: underline;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    padding: 22px 40px;
}

@media (max-width: 767px) {
    .home5-banner-section .banner-wrapper .banner-content .btn-and-people-area .primary-btn1 {
        padding: 20px 30px;
    }
}

.home5-banner-section .banner-wrapper .banner-content .btn-and-people-area .primary-btn1>span {
    text-decoration: underline;
}

.home5-banner-section .banner-wrapper .banner-content .btn-and-people-area .primary-btn1:hover {
    color: var(--white-color);
}

.home5-banner-section .banner-wrapper .banner-content .btn-and-people-area .primary-btn1:after {
    background-color: var(--title-color);
}

.home5-banner-section .banner-wrapper .banner-content .btn-and-people-area .people-area {
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 1;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home5-banner-section .banner-wrapper .banner-content .btn-and-people-area .people-area {
        gap: 8px;
    }
}

@media (max-width: 1399px) {
    .home5-banner-section .banner-wrapper .banner-content .btn-and-people-area .people-area {
        gap: 10px;
    }
}

@media (max-width: 1199px) {
    .home5-banner-section .banner-wrapper .banner-content .btn-and-people-area .people-area {
        gap: 15px;
    }
}

@media (max-width: 767px) {
    .home5-banner-section .banner-wrapper .banner-content .btn-and-people-area .people-area {
        gap: 10px;
    }
}

.home5-banner-section .banner-wrapper .banner-content .btn-and-people-area .people-area .img-grp {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
}

.home5-banner-section .banner-wrapper .banner-content .btn-and-people-area .people-area .img-grp li img {
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #F0F2F4;
    margin-left: -15px;
}

@media (max-width: 576px) {
    .home5-banner-section .banner-wrapper .banner-content .btn-and-people-area .people-area .img-grp li img {
        min-width: 37px;
        max-width: 37px;
        height: 37px;
    }
}

.home5-banner-section .banner-wrapper .banner-content .btn-and-people-area .people-area .img-grp li:first-child img {
    margin-left: 0;
}

.home5-banner-section .banner-wrapper .banner-content .btn-and-people-area .people-area a {
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    text-transform: uppercase;
    position: relative;
    background: linear-gradient(to bottom, var(--title-color) 0%, var(--title-color) 98%);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: left 100%;
    transition: background-size 0.75s;
}

.home5-banner-section .banner-wrapper .banner-content .btn-and-people-area .people-area a:hover {
    background-size: 0 1px;
    background-position: 0% 100%;
}

.home5-banner-section .banner-wrapper .banner-right-img {
    position: absolute;
    top: -1px;
    right: 0;
    border-radius: 0 0 50px 0;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home5-banner-section .banner-wrapper .banner-right-img {
        max-width: 1015px;
    }
}

@media (max-width: 1399px) {
    .home5-banner-section .banner-wrapper .banner-right-img {
        top: 95px;
        max-width: 717px;
    }
}

@media (max-width: 1199px) {
    .home5-banner-section .banner-wrapper .banner-right-img {
        top: 225px;
    }
}

@media (max-width: 991px) {
    .home5-banner-section .banner-wrapper .banner-right-img {
        display: none;
    }
}

/*=========================
 41. Home5 Service Start CSS
===========================*/

.home5-service-section .service-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.home5-service-section .service-list li {
    padding: 33px 0;
    border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
    cursor: pointer;
    transition: 0.5s;
    line-height: 1;
}

.home5-service-section .service-list li:first-child {
    border-top: 1px solid rgba(var(--primary-color4-opc), 0.1);
}

@media (max-width: 1399px) {
    .home5-service-section .service-list li {
        font-size: 22px;
        padding: 28px 22px 28px 0;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .home5-service-section .service-list li {
        padding: 26px 18px 26px 0;
        font-size: 20px;
    }
}

@media (max-width: 576px) {
    .home5-service-section .service-list li {
        padding: 22px 18px 22px 0;
        font-size: 19px;
    }
}

.home5-service-section .service-list li a {
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 23px;
    transition: 0.5s;
    display: block;
}

@media (max-width: 1199px) {
    .home5-service-section .service-list li a {
        font-size: 20px;
    }
}

@media (max-width: 576px) {
    .home5-service-section .service-list li a {
        font-size: 19px;
    }
}

.home5-service-section .service-list li svg {
    fill: var(--primary-color3);
    opacity: 0;
    transition: 0.5s;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .home5-service-section .service-list li svg {
        width: 90px;
    }
}

@media (max-width: 576px) {
    .home5-service-section .service-list li svg {
        display: none;
    }
}

.home5-service-section .service-list li:hover {
    background-color: var(--primary-color5);
    padding-left: 29px;
    border-color: transparent;
    border-radius: 10px 10px 10px 10px;
}

@media (max-width: 1399px) {
    .home5-service-section .service-list li:hover {
        padding-left: 22px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .home5-service-section .service-list li:hover {
        padding-left: 18px;
    }
}

@media (max-width: 576px) {
    .home5-service-section .service-list li:hover {
        padding-left: 18px;
    }
}

.home5-service-section .service-list li:hover a {
    color: var(--white-color);
}

.home5-service-section .service-list li:hover svg {
    opacity: 1;
}

.home5-service-section .service-card-wrap {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    margin-left: 65px;
    height: 100%;
}

@media (max-width: 1199px) {
    .home5-service-section .service-card-wrap {
        margin-left: 0;
    }
}

.home5-service-section .service-card-wrap li {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: 0.5s;
}

@media (max-width: 991px) {
    .home5-service-section .service-card-wrap li {
        position: relative;
        display: none;
    }
}

.home5-service-section .service-card-wrap li .service-img-wrap {
    position: relative;
}

@media (max-width: 1399px) {
    .home5-service-section .service-card-wrap li .service-img-wrap {
        height: 100%;
    }
}

@media (max-width: 576px) {
    .home5-service-section .service-card-wrap li .service-img-wrap {
        height: unset;
    }
}

.home5-service-section .service-card-wrap li .service-img-wrap img {
    border-radius: 20px;
    min-height: 527px;
    -o-object-fit: cover;
    object-fit: cover;
}

@media (max-width: 1399px) {
    .home5-service-section .service-card-wrap li .service-img-wrap img {
        min-height: 482px;
    }
}

@media (max-width: 1199px) {
    .home5-service-section .service-card-wrap li .service-img-wrap img {
        min-height: 438px;
    }
}

@media (max-width: 991px) {
    .home5-service-section .service-card-wrap li .service-img-wrap img {
        min-height: unset;
    }
}

@media (max-width: 576px) {
    .home5-service-section .service-card-wrap li .service-img-wrap img {
        height: unset;
        min-height: 400px;
        border-radius: 10px;
    }
}

.home5-service-section .service-card-wrap li .service-img-wrap .service-content {
    max-width: 392px;
    width: 100%;
    background-color: var(--white-color);
    clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%, 0 17%);
    padding: 35px 30px;
    position: absolute;
    bottom: 0;
    right: -1px;
    border-radius: 0 0 20px 0;
    z-index: 1;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home5-service-section .service-card-wrap li .service-img-wrap .service-content {
        bottom: -1px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .home5-service-section .service-card-wrap li .service-img-wrap .service-content {
        bottom: -1px;
    }
}

@media (max-width: 991px) {
    .home5-service-section .service-card-wrap li .service-img-wrap .service-content {
        bottom: -1px;
        right: 0px;
    }
}

@media (max-width: 576px) {
    .home5-service-section .service-card-wrap li .service-img-wrap .service-content {
        max-width: 300px;
        padding: 25px 20px;
        border-radius: 0 0 10px 0;
    }
}

.home5-service-section .service-card-wrap li .service-img-wrap .service-content p {
    color: rgba(var(--title-color2-opc), 0.7);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 25px;
}

@media (max-width: 576px) {
    .home5-service-section .service-card-wrap li .service-img-wrap .service-content p {
        font-size: 14px;
        margin-bottom: 20px;
    }
}

.home5-service-section .service-card-wrap li .service-img-wrap .service-content .primary-btn5 {
    text-transform: capitalize;
    border-radius: 6px 0 6px 6px;
    text-decoration: none;
    padding: 12px 32px 12px 20px;
}

.home5-service-section .service-card-wrap li.active {
    opacity: 1;
}

@media (max-width: 991px) {
    .home5-service-section .service-card-wrap li.active {
        display: block;
    }
}

.home5-service-section .service-card-wrap li.show {
    opacity: 1;
    z-index: 9;
}

/*=========================
 42. Home5 About Start CSS
===========================*/

.home5-about-section {
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0px 0;
}

@media (max-width: 991px) {
    .home5-about-section {
        padding: 90px 0;
    }
}

@media (max-width: 767px) {
    .home5-about-section {
        padding: 50px 0 60px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .home5-about-section .section-title h2 {
        font-size: 45px;
    }
}

.home5-about-section .about-img-wrap {
    -webkit-mask-image: url(../img/home5/home5-about-img-bg-shape.png);
    mask-image: url(../img/home5/home5-about-img-bg-shape.png);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}



.home5-about-section .about-content-wrap {
    margin-left: 30px;
}

@media (max-width: 1399px) {
    .home5-about-section .about-content-wrap {
        margin-left: 28px;
    }
}

@media (max-width: 1199px) {
    .home5-about-section .about-content-wrap {
        margin-left: 20px;
    }
}

@media (max-width: 991px) {
    .home5-about-section .about-content-wrap {
        margin-left: 0;
    }
}

.home5-about-section .about-content-wrap>p {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 400;
    font-size: 16px;
    position: relative;
    padding-top: 0;
    padding-left: 15px;
    line-height: 1.9;
    margin-bottom: 25px;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .home5-about-section .about-content-wrap>p {
        font-size: 15px;
    }
}

@media (max-width: 991px) {
    .home5-about-section .about-content-wrap>p {
        margin-bottom: 40px;
    }
}

@media (max-width: 576px) {
    .home5-about-section .about-content-wrap>p {
        font-size: 15px;
    }
}

.home5-about-section .about-content-wrap>p::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 2px;
    height: 80px;
    background-color: rgba(var(--primary-color5--opc), 0.7);
}

.home5-about-section .about-content-wrap ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

@media (max-width: 991px) {
    .home5-about-section .about-content-wrap ul {
        display: flex;
        align-items: start;
        gap: 30px;
        flex-wrap: wrap;
    }
}

@media (max-width: 767px) {
    .home5-about-section .about-content-wrap ul {
        gap: 20px;
    }
}

@media (max-width: 576px) {
    .home5-about-section .about-content-wrap ul {
        flex-wrap: wrap;
    }
}

.home5-about-section .about-content-wrap ul li {
    display: flex;
    gap: 30px;
    margin-bottom: 35px;
    justify-content: space-between;
}

@media (max-width: 1199px) {
    .home5-about-section .about-content-wrap ul li {
        gap: 20px;
        margin-bottom: 25px;
    }
}

@media (max-width: 991px) {
    .home5-about-section .about-content-wrap ul li {
        gap: 70px;
        margin-bottom: 0;
    }
}

@media (max-width: 767px) {
    .home5-about-section .about-content-wrap ul li {
        gap: 45px;
    }
}

@media (max-width: 576px) {
    .home5-about-section .about-content-wrap ul li {
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }
}

.home5-about-section .about-content-wrap ul li .single-content h3 {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 11px;
    text-transform: capitalize;
}

@media (max-width: 767px) {
    .home5-about-section .about-content-wrap ul li .single-content h3 {
        font-size: 21px;
    }
}

@media (max-width: 576px) {
    .home5-about-section .about-content-wrap ul li .single-content h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }
}

.home5-about-section .about-content-wrap ul li .single-content p {
    color: rgba(var(--black-color-opc), 0.7);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 0;
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .home5-about-section .about-content-wrap ul li .single-content p {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .home5-about-section .about-content-wrap ul li .single-content p {
        font-size: 15px;
    }
}

.home5-about-section .about-content-wrap ul li:last-child {
    margin-bottom: 0;
    gap: 70px;
    align-items: center;
}

@media (max-width: 1399px) {
    .home5-about-section .about-content-wrap ul li:last-child {
        gap: 15px;
    }
}

@media (max-width: 991px) {
    .home5-about-section .about-content-wrap ul li:last-child {
        gap: 70px;
    }
}

@media (max-width: 767px) {
    .home5-about-section .about-content-wrap ul li:last-child {
        gap: 45px;
    }
}

@media (max-width: 576px) {
    .home5-about-section .about-content-wrap ul li:last-child {
        gap: 40px;
    }
}

.home5-about-section .about-content-wrap ul li svg {
    fill: rgba(0, 218, 150, 0.2);
    min-width: 100px;
    margin-top: -12px;
}

@media (max-width: 991px) {
    .home5-about-section .about-content-wrap ul li svg {
        display: none;
    }
}

.home5-about-section .about-content-wrap ul li .single-content h6 {
    font-family: var(--font-Hanken-Grotesk);
}

.home5-about-section .about-content-wrap ul li .single-counter {
    text-align: center;
    min-width: 200px;
}

@media (max-width: 576px) {
    .home5-about-section .about-content-wrap ul li .single-counter {
        min-width: unset;
    }
}

.home5-about-section .about-content-wrap ul li .single-counter .number h2 {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--title-color-opc), 0.2);
    font-weight: 800;
    font-size: 100px;
    line-height: 1;
    margin-bottom: 0;
    display: inline-block;
}

@media (max-width: 1399px) {
    .home5-about-section .about-content-wrap ul li .single-counter .number h2 {
        font-size: 80px;
    }
}

@media (max-width: 576px) {
    .home5-about-section .about-content-wrap ul li .single-counter .number h2 {
        font-size: 90px;
    }
}

.home5-about-section .about-content-wrap ul li .single-counter .content {
    padding-top: 15px;
    background-color: #F6F2EE;
    margin-top: -16px;
    position: relative;
    z-index: 1;
}

@media (max-width: 1399px) {
    .home5-about-section .about-content-wrap ul li .single-counter .content {
        margin-top: -15px;
    }
}

@media (max-width: 576px) {
    .home5-about-section .about-content-wrap ul li .single-counter .content {
        margin-top: -12px;
    }
}

.home5-about-section .about-content-wrap ul li .single-counter .content p {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 0;
}

/*=========================
  43. Home5 Process Start CSS
===========================*/

@media (min-width: 992px) and (max-width: 1199px) {
    .home5-process-section .section-title h2 {
        font-size: 26px;
    }
}

.home5-process-section .home5-process-slider-wrap {
    position: relative;
}

.home5-process-section .home5-process-slider-wrap .progress-pagination2 {
    top: 11%;
    left: 0;
    height: 2px;
}

@media (max-width: 1199px) {
    .home5-process-section .home5-process-slider-wrap .progress-pagination2 {
        top: 12%;
    }
}

@media (max-width: 767px) {
    .home5-process-section .home5-process-slider-wrap .progress-pagination2 {
        top: 10%;
    }
}

@media (max-width: 576px) {
    .home5-process-section .home5-process-slider-wrap .progress-pagination2 {
        top: 12%;
    }
}

.home5-process-section .home5-process-slider-wrap .progress-pagination2 .swiper-pagination-progressbar-fill {
    background: var(--primary-color5);
}

@media (max-width: 1199px) {
    .home5-process-section .home5-process-slider-wrap .single-process .content h4 {
        font-size: 25px;
    }
}

.home5-process-section .home5-process-slider-wrap .single-process .content p {
    margin-bottom: 40px;
    font-size: 15px;
}

.home5-process-section .home5-process-slider-wrap .single-process .process-img img {
    border-radius: 10px;
    -o-object-fit: cover;
    object-fit: cover;
    min-height: 321px;
}

.home5-process-section .home5-process-slider-wrap .single-process.active .step-number span {
    background-color: #0D6EFA;
    color: var(--white-color);
}

/*=========================
  44. Home5 Feature Start CSS
===========================*/

.home5-feature-section {
    background: url("../img//home5/home5-feature-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    padding: 120px 0;
}

@media (max-width: 991px) {
    .home5-feature-section {
        padding: 90px 0;
    }
}

@media (max-width: 767px) {
    .home5-feature-section {
        padding: 70px 0;
    }
}

.home5-feature-section .section-title .sub-title {
    color: var(--primary-color4);
}

.home5-feature-section .section-title .sub-title svg {
    fill: var(--primary-color4);
}

.home5-feature-section .section-title h2 {
    color: var(--white-color);
}

@media (min-width: 992px) and (max-width: 1199px) {
    .home5-feature-section .section-title h2 {
        font-size: 45px;
    }
}

@media (max-width: 576px) {
    .home5-feature-section .section-title h2 {
        line-height: 1.3;
    }
}

/*=============================
  45. Home5 Testimonial Start CSS
===============================*/

.home5-testimonial-section {
    background: url(../img/home5/home5-about.png), linear-gradient(180deg, #ccd9ec 0%, #93b5e7 100%);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 90px 0;
}

@media (max-width: 991px) {
    .home5-testimonial-section {
        padding: 90px 0;
    }
}

@media (max-width: 767px) {
    .home5-testimonial-section {
        padding: 70px 0;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .home5-testimonial-section .section-title h2 {
        font-size: 48px;
    }
}

.home5-testimonial-section .testimonial-card {
    padding: 40px 30px 25px;
    background-color: var(--white-color);
    border-radius: 20px;
    text-align: center;
    min-height: 550px;
}

@media (max-width: 1399px) {
    .home5-testimonial-section .testimonial-card {
        padding: 40px 20px 25px;
    }
}

@media (max-width: 991px) {
    .home5-testimonial-section .testimonial-card {
        padding: 40px 24px 25px;
    }
}

@media (max-width: 767px) {
    .home5-testimonial-section .testimonial-card {
        padding: 30px 30px 25px;
    }
}

@media (max-width: 576px) {
    .home5-testimonial-section .testimonial-card {
        padding: 30px 15px;
        border-radius: 15px;
    }
}

.home5-testimonial-section .testimonial-card .quote {
    fill: none;
    stroke: rgba(var(--title-color-opc), 0.2);
    margin-bottom: 30px;
}

@media (max-width: 991px) {
    .home5-testimonial-section .testimonial-card .quote {
        margin-bottom: 22px;
    }
}

.home5-testimonial-section .testimonial-card .content-and-author-area>span {
    font-family: var(--font-Almarai);
    color: #0D6EFA;
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: block;
}

@media (max-width: 991px) {
    .home5-testimonial-section .testimonial-card .content-and-author-area>span {
        margin-bottom: 16px;
    }
}

.home5-testimonial-section .testimonial-card .content-and-author-area p {
    color: rgba(var(--title-color-opc), 0.6);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 18px;
    line-height: 40px;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
}

@media (max-width: 991px) {
    .home5-testimonial-section .testimonial-card .content-and-author-area p {
        line-height: 1.8;
    }
}

@media (max-width: 576px) {
    .home5-testimonial-section .testimonial-card .content-and-author-area p {
        margin-bottom: 22px;
        padding-bottom: 20px;
    }
}

.home5-testimonial-section .testimonial-card .author-area {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
}

.home5-testimonial-section .testimonial-card .author-area .author-img img {
    min-width: 49px;
    max-width: 49px;
    height: 49px;
    border-radius: 50%;
}

.home5-testimonial-section .testimonial-card .author-area .author-info {
    text-align: left;
}

.home5-testimonial-section .testimonial-card .author-area .author-info h3 {
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 19px;
    line-height: 1;
    margin-bottom: 3px;
}

@media (max-width: 576px) {
    .home5-testimonial-section .testimonial-card .author-area .author-info h3 {
        font-size: 17px;
    }
}

.home5-testimonial-section .testimonial-card .author-area .author-info span {
    color: rgba(var(--title-color-opc), 0.6);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 400;
    font-size: 15px;
    line-height: 1;
}

.home5-testimonial-section .swiper-pagination3 {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: unset;
    z-index: 9;
    bottom: unset;
    gap: 12px;
}

@media (max-width: 767px) {
    .home5-testimonial-section .swiper-pagination3 {
        gap: 8px;
    }
}

@media (max-width: 576px) {
    .home5-testimonial-section .swiper-pagination3 {
        gap: 6px;
    }
}

.home5-testimonial-section .swiper-pagination3 .swiper-pagination-bullet {
    height: 12px;
    width: 12px;
    background-color: transparent;
    border: 1px solid rgba(var(--primary-color5--opc), 0.6);
    opacity: 1;
    position: relative;
}

.home5-testimonial-section .swiper-pagination3 .swiper-pagination-bullet::after {
    content: "";
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background-color: #0D6EFA;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.home5-testimonial-section .swiper-pagination3 .swiper-pagination-bullet.swiper-pagination-bullet-active {
    border-color: #0D6EFA;
    height: 20px;
    width: 20px;
}

.home5-testimonial-section .swiper-pagination3 .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
    width: 10px;
    height: 10px;
    background-color: #0D6EFA;;
}

/*=======================
  46. Home5 Blog Start CSS
=========================*/

.home5-blog-section {
    padding: 120px 0 95px;
}

@media (max-width: 991px) {
    .home5-blog-section {
        padding: 90px 0 80px;
    }
}

@media (max-width: 767px) {
    .home5-blog-section {
        padding: 70px 0;
    }
}

.home5-blog-section .blog-card .blog-content {
    border-radius: 0 0 10px 10px;
}

@media (max-width: 991px) {
    .home5-blog-section .blog-card .blog-content {
        padding: 21px 15px;
    }
}

@media (max-width: 991px) {
    .home5-blog-section .blog-card .blog-content h5 {
        font-size: 22px;
    }
}

.home5-blog-section .details-btn span {
    font-size: 17px;
}

.home5-blog-section .slider-btn-grp {
    display: flex;
    align-items: center;
    gap: 30px;
}

@media (max-width: 767px) {
    .home5-blog-section .slider-btn-grp {
        display: none;
    }
}

/*==========================
  47. Home5 Contact Start CSS
============================*/

.home5-contact-section .section-title {
    border-top: 1px solid rgba(var(--title-color-opc), 0.1);
    padding-top: 100px;
}

@media (max-width: 991px) {
    .home5-contact-section .section-title {
        padding-top: 85px;
    }
}

.home5-contact-section .contact-form-area {
    position: relative;
    z-index: 1;
}

.home5-contact-section .contact-form-area .contact-form-wrapper {
    padding: 45px;
}

@media (max-width: 767px) {
    .home5-contact-section .contact-form-area .contact-form-wrapper {
        padding: 35px;
    }
}

@media (max-width: 576px) {
    .home5-contact-section .contact-form-area .contact-form-wrapper {
        padding: 20px;
    }
}

.home5-contact-section .contact-form-area .contact-form-wrapper .primary-btn1 {
    background-color: var(--primary-color5);
    color: var(--white-color);
}

.home5-contact-section .contact-form-area .contact-form-wrapper .primary-btn1::after {
    background-color: var(--title-color);
}

.home5-contact-section .contact-img-wrap {
    height: 100%;
}

.home5-contact-section .contact-img-wrap img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    min-width: 672px;
    margin-left: -133px;
    border-radius: 10px;
}

@media (max-width: 1399px) {
    .home5-contact-section .contact-img-wrap img {
        min-width: 596px;
    }
}

@media (max-width: 1199px) {
    .home5-contact-section .contact-img-wrap img {
        min-width: 522px;
    }
}

@media (max-width: 991px) {
    .home5-contact-section .contact-img-wrap img {
        min-width: unset;
        margin-left: unset;
    }
}

/*========================================
  48. inner-page Home Breadcrumb Start CSS
==========================================*/

.breadcrumb-section {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 270px 0 140px;
    position: relative;
}

@media (max-width: 1199px) {
    .breadcrumb-section {
        padding: 240px 0 100px;
    }
}

@media (max-width: 991px) {
    .breadcrumb-section {
        padding: 180px 0 100px;
    }
}

@media (max-width: 767px) {
    .breadcrumb-section {
        padding: 180px 0 105px;
    }
}

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

.breadcrumb-section .banner-content h1 {
    color: var(--black-color);
    text-align: center;
    font-family: var(--font-Almarai);
    font-size: 50px;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 7px;
    line-height: 1.2;
    animation: fadeInDown 1.7s;
}

@media (max-width: 1199px) {
    .breadcrumb-section .banner-content h1 {
        font-size: 45px;
    }
}

@media (max-width: 991px) {
    .breadcrumb-section .banner-content h1 {
        font-size: 43px;
    }
}

@media (max-width: 767px) {
    .breadcrumb-section .banner-content h1 {
        font-size: 40px;
    }
}

@media (max-width: 576px) {
    .breadcrumb-section .banner-content h1 {
        font-size: 35px;
        margin-bottom: 3px;
    }
}

.breadcrumb-section .banner-content .breadcrumb-list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    animation: fadeInUp 1.7s;
}

.breadcrumb-section .banner-content .breadcrumb-list li {
    color: rgba(var(--title-color-opc), 0.5);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    position: relative;
    padding-left: 20px;
    gap: 6px;
    display: flex;
    align-items: end;
}

.breadcrumb-section .banner-content .breadcrumb-list li svg {
    fill: var(--black-color);
}

.breadcrumb-section .banner-content .breadcrumb-list li a {
    color: rgba(var(--black-color-opc), 0.6);
    line-height: 1;
}

.breadcrumb-section .banner-content .breadcrumb-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    background-color: rgba(var(--black-color-opc), 0.6);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translateY(-50%);
}

.breadcrumb-section .banner-content .breadcrumb-list li:first-child {
    padding-left: 0;
}

.breadcrumb-section .banner-content .breadcrumb-list li:first-child::before {
    content: "";
    display: none;
}

.breadcrumb-section .banner-content .breadcrumb-list li:last-child {
    color: var(--primary-color1);
}

.breadcrumb-section.style-2 .banner-content h1 {
    text-transform: uppercase;
}

.breadcrumb-section.style-3 {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url(../img/inner-pages/service-details-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 130px 0 200px;
}

@media (max-width: 1199px) {
    .breadcrumb-section.style-3 {
        padding: 110px 0 160px;
    }
}

@media (max-width: 767px) {
    .breadcrumb-section.style-3 {
        padding: 110px 0 140px;
    }
}

@media (max-width: 576px) {
    .breadcrumb-section.style-3 {
        padding: 115px 0 120px;
    }
}

.breadcrumb-section.style-3 .banner-content {
    position: relative;
}

.breadcrumb-section.style-3 .banner-content h1 {
    font-size: 55px;
    margin-bottom: 20px;
    color: var(--white-color);
}

@media (max-width: 1399px) {
    .breadcrumb-section.style-3 .banner-content h1 {
        font-size: 52px;
    }
}

@media (max-width: 1199px) {
    .breadcrumb-section.style-3 .banner-content h1 {
        font-size: 45px;
        margin-bottom: 15px;
    }
}

@media (max-width: 576px) {
    .breadcrumb-section.style-3 .banner-content h1 {
        font-size: 38px;
        margin-bottom: 10px;
    }
}

.breadcrumb-section.style-3 .banner-content .rating-area {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-flex;
    align-items: end;
    gap: 5px;
    background-color: rgba(0, 107, 91, 0.6980392157);
    padding: 12px 21px 14px;
    backdrop-filter: blur(4px);
    border-radius: 10px;
    margin-bottom: 19px;
    animation: fadeInUp 1.7s;
}

@media (max-width: 576px) {
    .breadcrumb-section.style-3 .banner-content .rating-area {
        padding: 7px 20px 11px;
        margin-bottom: 15px;
    }
}

.breadcrumb-section.style-3 .banner-content .rating-area li {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--white-color);
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
}

@media (max-width: 991px) {
    .breadcrumb-section.style-3 .banner-content .rating-area li {
        font-size: 18px;
    }
}

@media (max-width: 576px) {
    .breadcrumb-section.style-3 .banner-content .rating-area li {
        font-size: 17px;
    }
}

.breadcrumb-section.style-3 .banner-content .rating-area li svg {
    fill: var(--primary-color1);
}

.breadcrumb-section.style-3 .banner-content .rating-area li span {
    font-size: 15px;
}

.breadcrumb-section.style-3 .banner-content p {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--white-color);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    margin-bottom: 0;
    animation: fadeInUp 1.7s;
}

.breadcrumb-section.style-3 .banner-content .breadcrumb-list {
    background-color: var(--white-color);
    padding: 12px 38px;
    border-radius: 20px 20px 0 0;
    position: absolute;
    left: 0;
    bottom: -201px;
    animation: none;
}

@media (max-width: 1199px) {
    .breadcrumb-section.style-3 .banner-content .breadcrumb-list {
        bottom: -161px;
    }
}

@media (max-width: 991px) {
    .breadcrumb-section.style-3 .banner-content .breadcrumb-list {
        padding: 10px 24px;
        border-radius: 15px 15px 0 0;
    }
}

@media (max-width: 767px) {
    .breadcrumb-section.style-3 .banner-content .breadcrumb-list {
        bottom: -141px;
    }
}

@media (max-width: 576px) {
    .breadcrumb-section.style-3 .banner-content .breadcrumb-list {
        left: 30px;
        padding: 7px 17px;
        bottom: -121px;
    }
}

.breadcrumb-section.style-3 .banner-content .breadcrumb-list li:last-child {
    color: var(--primary-color3);
}

.innerpage-pagination-area .paginations {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}

@media (max-width: 576px) {
    .innerpage-pagination-area .paginations {
        gap: 18px;
    }
}

.innerpage-pagination-area .paginations li {
    border: 1px solid rgba(var(--title-color-opc), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    border-radius: 50%;
    transition: 0.5s;
}

.innerpage-pagination-area .paginations li a {
    color: rgba(var(--black-color-opc), 0.5);
    font-family: var(--font-Hanken-Grotesk);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    transition: 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.innerpage-pagination-area .paginations li a:hover {
    background-color: var(--primary-color1);
    border-color: var(--primary-color1);
    color: var(--black-color);
}

.innerpage-pagination-area .paginations li a svg {
    fill: rgba(var(--black-color-opc), 0.5);
    transition: 0.5s;
}

.innerpage-pagination-area .paginations li.active a {
    background-color: var(--primary-color1);
    border-color: var(--primary-color1);
    color: var(--black-color);
}

.innerpage-pagination-area .paginations li:hover {
    background-color: var(--primary-color1);
}

.innerpage-pagination-area .paginations li:hover svg {
    fill: var(--black-color);
}

.innerpage-pagination-area .paginations li.paginations-button a {
    width: unset;
    height: unset;
    border: unset;
    background-color: unset;
}

.innerpage-pagination-area .paginations li.paginations-button a:hover svg {
    fill: var(--title-color);
}

/*==========================================
  49. inner-page Home Blog Sidebar Start CSS
============================================*/

@media (min-width: 1200px) and (max-width: 1399px) {
    .blog-sidebar-page .blog-card .blog-content h4 a {
        font-size: 19px;
    }
}

.sidebar-area .widget-title {
    color: var(--black-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    border-bottom: 1px solid var(--title-color);
    display: inline-block;
    margin-bottom: 30px;
}

@media (max-width: 576px) {
    .sidebar-area .widget-title {
        font-size: 16px;
        margin-bottom: 25px;
    }
}

.sidebar-area .single-widget {
    padding: 28px 35px 34px;
    border-radius: 10px;
    border: 1px solid rgba(var(--black-color-opc), 0.1);
    background-color: #F3FFF6;
}

@media (max-width: 1199px) {
    .sidebar-area .single-widget {
        padding: 22px 24px 28px;
    }
}

@media (max-width: 767px) {
    .sidebar-area .single-widget {
        padding: 24px 30px 30px;
    }
}

@media (max-width: 576px) {
    .sidebar-area .single-widget {
        padding: 15px 15px 20px;
    }
}

.sidebar-area .single-widget:last-child {
    margin-bottom: 0;
}

.sidebar-area .single-widget .category-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.sidebar-area .single-widget .category-list li {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    transition: 0.5s;
}

@media (max-width: 767px) {
    .sidebar-area .single-widget .category-list li {
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {
    .sidebar-area .single-widget .category-list li {
        margin-bottom: 15px;
    }
}

.sidebar-area .single-widget .category-list li:last-child {
    margin-bottom: 0;
}

.sidebar-area .single-widget .category-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
    gap: 5px;
    color: rgba(var(--black-color-opc), 0.7);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    transition: 0.5s;
}

@media (max-width: 576px) {
    .sidebar-area .single-widget .category-list li a {
        font-size: 15px;
    }
}

.sidebar-area .single-widget .category-list li:hover a {
    color: var(--primary-color1);
}

.sidebar-area .single-widget .recent-post-widget {
    display: flex;
    align-items: center;
    gap: 15px;
}

@media (max-width: 576px) {
    .sidebar-area .single-widget .recent-post-widget {
        gap: 11px;
    }
}

.sidebar-area .single-widget .recent-post-widget .recent-post-img img {
    min-width: 92px;
    max-width: 92px;
    height: 71px;
    border-radius: 15px;
}

.sidebar-area .single-widget .recent-post-widget .recent-post-content {
    line-height: 1;
}

.sidebar-area .single-widget .recent-post-widget .recent-post-content>a {
    color: rgba(var(--title-color-opc), 0.5);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    display: block;
    margin-bottom: 8px;
    transition: 0.5s;
}

@media (max-width: 576px) {
    .sidebar-area .single-widget .recent-post-widget .recent-post-content>a {
        margin-bottom: 5px;
    }
}

.sidebar-area .single-widget .recent-post-widget .recent-post-content>a:hover {
    color: var(--black-color);
}

.sidebar-area .single-widget .recent-post-widget .recent-post-content h5,
.sidebar-area .single-widget .recent-post-widget .recent-post-content h4 {
    margin-bottom: 0;
}

.sidebar-area .single-widget .recent-post-widget .recent-post-content h5 a,
.sidebar-area .single-widget .recent-post-widget .recent-post-content h4 a {
    color: var(--black-color);
    font-family: var(--font-Hanken-Grotesk);
    text-transform: capitalize;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    display: block;
    letter-spacing: 0.32px;
    transition: 0.5s;
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .sidebar-area .single-widget .recent-post-widget .recent-post-content h5 a,
    .sidebar-area .single-widget .recent-post-widget .recent-post-content h4 a {
        font-size: 15px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .sidebar-area .single-widget .recent-post-widget .recent-post-content h5 a,
    .sidebar-area .single-widget .recent-post-widget .recent-post-content h4 a {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .sidebar-area .single-widget .recent-post-widget .recent-post-content h5 a,
    .sidebar-area .single-widget .recent-post-widget .recent-post-content h4 a {
        font-size: 16px;
    }
}

.sidebar-area .single-widget .recent-post-widget .recent-post-content h5 a:hover,
.sidebar-area .single-widget .recent-post-widget .recent-post-content h4 a:hover {
    color: var(--primary-color1);
}

.sidebar-area .single-widget .tag-list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .sidebar-area .single-widget .tag-list {
        gap: 14px;
    }
}

.sidebar-area .single-widget .tag-list li a {
    color: rgba(var(--black-color-opc), 0.5);
    font-family: var(--font-Hanken-Grotesk);
    background: #EEF3FF;
    font-size: 11px;
    font-weight: 600;
    display: block;
    line-height: 1;
    padding: 11px 12px;
    border-radius: 100px;
    transition: 0.5s;
    text-transform: uppercase;
}

@media (max-width: 991px) {
    .sidebar-area .single-widget .tag-list li a {
        padding: 10px 16px;
    }
}

.sidebar-area .single-widget .tag-list li:hover a {
    color: var(--black-color);
    background-color: var(--primary-color1);
}

.sidebar-area .single-widget .search-box {
    display: flex;
    align-items: center;
}

.sidebar-area .single-widget .search-box input {
    width: 100%;
    padding: 8px 20px;
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 400;
    font-size: 12px;
    height: 45px;
    border: 1px solid rgba(var(--black-color-opc), 0.3);
    background-color: rgba(var(--white-color-opc), 0.5);
    border-radius: 10px 0 0 10px;
    border-right: unset;
}

.sidebar-area .single-widget .search-box button {
    background-color: var(--primary-color1);
    min-width: 90px;
    height: 45px;
    border: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    border-radius: 0 10px 10px 0;
    z-index: 1;
}

.sidebar-area .single-widget .search-box button::after {
    background-color: var(--black-color);
}

.sidebar-area .single-widget .search-box button i {
    color: var(--black-color);
    font-size: 22px;
    transition: 0.5s;
}

@media (max-width: 576px) {
    .sidebar-area .single-widget .search-box button {
        min-width: 70px;
    }
}

.sidebar-area .single-widget .search-box button:hover {
    color: var(--white-color);
}

.sidebar-area .single-widget .search-box button:hover i {
    color: var(--white-color);
}

/*==========================================
  50. inner-page Home Blog Standard Start CSS
============================================*/

.blog-standard-page .blog-card {
    position: relative;
}

.blog-standard-page .blog-card .blog-img img {
    max-height: 316px;
    min-width: 401px;
}

@media (max-width: 1399px) {
    .blog-standard-page .blog-card .blog-img img {
        max-height: 314px;
        min-width: 359px;
    }
}

@media (max-width: 1199px) {
    .blog-standard-page .blog-card .blog-img img {
        max-height: 328px;
        min-width: 276px;
    }
}

@media (max-width: 767px) {
    .blog-standard-page .blog-card .blog-img img {
        max-height: unset;
        min-width: unset;
    }
}

.blog-standard-page .blog-card .blog-meta {
    position: absolute;
    bottom: 0;
    left: 0;
}

/*===================================
  51. inner-page Home Error Start CSS
=====================================*/

.error-section {
    padding: 120px 0;
}

@media (max-width: 1199px) {
    .error-section {
        padding: 100px 0;
    }
}

@media (max-width: 991px) {
    .error-section {
        padding: 100px 0 140px;
    }
}

@media (max-width: 767px) {
    .error-section {
        padding: 70px 0 105px;
    }
}

@media (max-width: 576px) {
    .error-section {
        padding: 70px 0 72px;
    }
}

.error-section .error-content-wrapper .error-img {
    margin-bottom: 62px;
}

.error-section .error-content-wrapper .error-img img {
    width: 633px;
}

@media (max-width: 991px) {
    .error-section .error-content-wrapper .error-img img {
        width: 530px;
    }
}

@media (max-width: 767px) {
    .error-section .error-content-wrapper .error-img img {
        width: 400px;
    }
}

@media (max-width: 576px) {
    .error-section .error-content-wrapper .error-img img {
        width: unset;
    }
}

.error-section .error-content-wrapper .error-content h2 {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--black-color);
    font-weight: 600;
    font-size: 60px;
    line-height: 1.2;
    text-transform: capitalize;
    margin-bottom: 12px;
}

@media (max-width: 1199px) {
    .error-section .error-content-wrapper .error-content h2 {
        font-size: 50px;
    }
}

@media (max-width: 991px) {
    .error-section .error-content-wrapper .error-content h2 {
        font-size: 42px;
    }
}

@media (max-width: 767px) {
    .error-section .error-content-wrapper .error-content h2 {
        font-size: 39px;
    }
}

@media (max-width: 576px) {
    .error-section .error-content-wrapper .error-content h2 {
        font-size: 28px;
    }
}

.error-section .error-content-wrapper .error-content p {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--title-color-opc), 0.6);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.9;
    margin-bottom: 35px;
}

@media (max-width: 991px) {
    .error-section .error-content-wrapper .error-content p {
        font-size: 17px;
    }
}

@media (max-width: 767px) {
    .error-section .error-content-wrapper .error-content p {
        margin-bottom: 25px;
    }
}

@media (max-width: 576px) {
    .error-section .error-content-wrapper .error-content p {
        font-size: 16px;
        line-height: 1.6;
    }
}

.error-section .error-content-wrapper .error-content .primary-btn1 {
    text-decoration: underline;
    text-transform: uppercase;
    font-size: 13px;
    padding: 22px 44px;
}

.error-section .error-content-wrapper .error-content .primary-btn1 span {
    text-decoration: underline;
}

/*================================
  52. inner-page Project Start CSS
==================================*/

.project-page .divider {
    padding-top: 70px;
    border-top: 1px solid rgba(var(--title-color-opc), 0.1);
}

@media (max-width: 991px) {
    .project-page .divider {
        padding-top: 50px;
    }
}

@media (max-width: 576px) {
    .project-page .divider {
        padding-top: 40px;
    }
}

.project-page .primary-btn1 {
    text-decoration: underline;
    background-color: var(--title-color);
    text-transform: uppercase;
    font-size: 13px;
    padding: 22px 39px;
}

.project-page .primary-btn1 span {
    text-decoration: underline;
}

.project-details-page .project-details-img-wrap img {
    -o-object-fit: cover;
    object-fit: cover;
}

.project-details-page p {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--title-color-opc), 0.6);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.9;
    margin-bottom: 40px;
}

@media (max-width: 1199px) {
    .project-details-page p {
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .project-details-page p {
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    .project-details-page p {
        line-height: 1.7;
        margin-bottom: 30px;
    }
}

.project-details-page .manufacturing-content {
    margin-bottom: 50px;
}

@media (max-width: 767px) {
    .project-details-page .manufacturing-content {
        margin-bottom: 40px;
    }
}

.project-details-page .manufacturing-content h2 {
    font-size: 30px;
    margin-bottom: 25px;
}

@media (max-width: 1199px) {
    .project-details-page .manufacturing-content h2 {
        margin-bottom: 20px;
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .project-details-page .manufacturing-content h2 {
        margin-bottom: 12px;
        font-size: 26px;
    }
}

@media (max-width: 576px) {
    .project-details-page .manufacturing-content h2 {
        font-size: 25px;
        margin-bottom: 10px;
    }
}

.project-details-page .manufacturing-content P {
    margin-bottom: 32px;
}

@media (max-width: 576px) {
    .project-details-page .manufacturing-content P {
        margin-bottom: 26px;
    }
}

.project-details-page .manufacturing-content .manufacturing-img-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
}

@media (max-width: 767px) {
    .project-details-page .manufacturing-content .manufacturing-img-wrap {
        flex-wrap: wrap;
    }
}

.project-details-page .manufacturing-content .manufacturing-img-wrap img {
    border-radius: 10px;
    -o-object-fit: cover;
    object-fit: cover;
    min-width: 408px;
}

@media (max-width: 1399px) {
    .project-details-page .manufacturing-content .manufacturing-img-wrap img {
        min-width: 355px;
    }
}

@media (max-width: 1199px) {
    .project-details-page .manufacturing-content .manufacturing-img-wrap img {
        min-width: 295px;
    }
}

@media (max-width: 991px) {
    .project-details-page .manufacturing-content .manufacturing-img-wrap img {
        min-width: 336px;
    }
}

@media (max-width: 767px) {
    .project-details-page .manufacturing-content .manufacturing-img-wrap img {
        min-width: unset;
    }
}

.project-details-page ul {
    padding: 0;
    margin: 0;
    list-style: none;
    margin-bottom: 55px;
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    row-gap: 25px;
    justify-content: space-between;
}

@media (max-width: 1399px) {
    .project-details-page ul {
        gap: 30px;
    }
}

@media (max-width: 1199px) {
    .project-details-page ul {
        gap: 25px;
        margin-bottom: 50px;
    }
}

@media (max-width: 767px) {
    .project-details-page ul {
        -moz-columns: unset;
        columns: unset;
    }
}

@media (max-width: 576px) {
    .project-details-page ul {
        gap: 20px;
        margin-bottom: 40px;
    }
}

.project-details-page ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--title-color-opc), 0.8);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.1;
}

@media (max-width: 1399px) {
    .project-details-page ul li {
        font-size: 15px;
    }
}

@media (max-width: 1199px) {
    .project-details-page ul li {
        font-size: 16px;
    }
}

@media (max-width: 991px) {
    .project-details-page ul li {
        line-height: 1.2;
    }
}

@media (max-width: 767px) {
    .project-details-page ul li {
        gap: 8px;
    }
}

@media (max-width: 576px) {
    .project-details-page ul li {
        line-height: 1.4;
    }
}

.project-details-page ul li svg {
    fill: var(--primary-color3);
}

.project-details-page .work-content h2 {
    font-size: 30px;
    margin-bottom: 25px;
}

@media (max-width: 1199px) {
    .project-details-page .work-content h2 {
        font-size: 28px;
        margin-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .project-details-page .work-content h2 {
        margin-bottom: 12px;
        font-size: 26px;
    }
}

@media (max-width: 576px) {
    .project-details-page .work-content h2 {
        margin-bottom: 10px;
        font-size: 25px;
    }
}

.project-details-page .work-content p {
    margin-bottom: 30px;
}

@media (max-width: 576px) {
    .project-details-page .work-content p {
        margin-bottom: 26px;
    }
}

.project-details-page .work-content ul {
    padding: 0;
    margin-bottom: 50px;
}

@media (max-width: 576px) {
    .project-details-page .work-content ul {
        margin-bottom: 36px;
    }
}

.project-details-page .result-content p {
    margin-bottom: 0;
}

.project-details-page .address-area {
    background: url(../img/inner-pages/address-area-bg.png), linear-gradient(180deg, #F3FFF6 0%, #F3FFF6 100%);
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid rgba(var(--title-color-opc), 0.1);
    border-radius: 10px;
    padding: 25px 30px 30px;
}

@media (max-width: 1199px) {
    .project-details-page .address-area {
        padding: 20px 25px 25px;
    }
}

.project-details-page .address-area>ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: block;
    -moz-columns: unset;
    columns: unset;
}

@media (max-width: 767px) {
    .project-details-page .address-area>ul {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        justify-content: center;
        row-gap: 25px;
    }
}

@media (max-width: 576px) {
    .project-details-page .address-area>ul {
        gap: 33px;
        justify-content: flex-start;
    }
}

.project-details-page .address-area>ul>li {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 24px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
}

@media (max-width: 1199px) {
    .project-details-page .address-area>ul>li {
        gap: 14px;
    }
}

@media (max-width: 767px) {
    .project-details-page .address-area>ul>li {
        gap: 10px;
        padding: unset;
        margin: unset;
        border-bottom: unset;
    }
}

.project-details-page .address-area>ul>li .icon svg {
    fill: rgba(var(--title-color-opc), 0.3);
}

.project-details-page .address-area>ul>li .content span {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--title-color-opc), 0.5);
    font-weight: 400;
    font-size: 15px;
    line-height: 1;
    margin-bottom: 10px;
    display: block;
}

.project-details-page .address-area>ul>li .content h3 {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.1;
    margin-bottom: 0;
}

@media (max-width: 1199px) {
    .project-details-page .address-area>ul>li .content h3 {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .project-details-page .address-area>ul>li .content h3 {
        font-size: 17px;
    }
}

@media (max-width: 576px) {
    .project-details-page .address-area>ul>li .content h3 {
        font-size: 17px;
    }
}

.project-details-page .address-area>ul>li:last-child {
    margin-bottom: unset;
    padding-bottom: unset;
    border-bottom: unset;
}

/*================================
  53. inner-page Service Start CSS
==================================*/

.service-page {
    margin: 0 12%;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .service-page {
        margin: 0 4%;
    }
}

@media (max-width: 1399px) {
    .service-page {
        margin: 0 3%;
    }
}

.service-page .service-category-list {
    background: url(../img/inner-pages/service-category-list-bg.png), linear-gradient(180deg, #F3FFF6 0%, #F3FFF6 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(var(--title-color-opc), 0.1);
    border-radius: 10px;
    position: sticky;
    top: 79px;
}

.service-page .service-category-list ul {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    border-radius: 10px;
}

.service-page .service-category-list ul li .list-group-item {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--title-color-opc), 0.7);
    background: unset;
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    text-transform: capitalize;
    padding: 22px 0;
    border: unset;
    border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
}

@media (max-width: 1399px) {
    .service-page .service-category-list ul li .list-group-item {
        font-size: 17px;
    }
}

@media (max-width: 1199px) {
    .service-page .service-category-list ul li .list-group-item {
        font-size: 16px;
        line-height: 1.3;
        padding: 22px 10px;
    }
}

.service-page .service-category-list ul li .list-group-item.active {
    background-color: var(--primary-color1);
    border: unset;
    color: var(--title-color);
}

.service-page .service-category-list ul li:first-child {
    border-radius: 10px 10px 0 0;
}

.service-page .service-category-list ul li:last-child {
    border-radius: 0 0 10px 10px;
}

.service-page .service-content h2 {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    font-weight: 600;
    font-size: 30px;
    line-height: 1;
    text-transform: capitalize;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .service-page .service-content h2 {
        font-size: 28px;
    }
}

@media (max-width: 576px) {
    .service-page .service-content h2 {
        font-size: 25px;
    }
}

.service-page .service-card2 .service-card-content {
    padding: 13px 25px 7px;
}

@media (max-width: 1399px) {
    .service-page .service-card2 .service-card-content {
        padding: 13px 10px 7px;
        gap: 12px;
    }
}

@media (max-width: 991px) {
    .service-page .service-card2 .service-card-content {
        padding: 13px 25px;
    }
}

@media (max-width: 767px) {
    .service-page .service-card2 .service-card-content {
        padding: 13px 23px 6px;
    }
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .service-page .service-card2 .service-card-content .content h6 a {
        font-size: 16px;
    }
}

@media (max-width: 1399px) {
    .service-page .service-card2 .service-card-content .content h6 a {
        font-size: 16px;
    }
}

@media (max-width: 1199px) {
    .service-page .service-card2 .service-card-content .content h6 a {
        font-size: 17px;
    }
}

@media (max-width: 576px) {
    .service-page .service-card2 .service-card-content .content h6 a {
        font-size: 15px;
    }
}

/*========================================
  54. inner-page Service Details Start CSS
==========================================*/

.service-details-page {
    position: relative;
}

.service-details-page .service-details-list-wrapper {
    position: sticky;
    top: 79px;
    z-index: 3;
    background-color: var(--white-color);
}

@media (max-width: 1399px) {
    .service-details-page .service-details-list-wrapper {
        top: 78px;
    }
}

@media (max-width: 767px) {
    .service-details-page .service-details-list-wrapper {
        top: 66px;
    }
}

@media (max-width: 576px) {
    .service-details-page .service-details-list-wrapper {
        position: unset;
    }
}

.service-details-page .service-details-list-wrapper .service-details-list {
    margin: 0;
    padding: 0;
    border-radius: unset;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--title-color-opc), 0.1);
    margin-bottom: 40px;
    flex-direction: unset;
    max-width: 735px;
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .service-details-page .service-details-list-wrapper .service-details-list {
        justify-content: space-between;
    }
}

@media (max-width: 1199px) {
    .service-details-page .service-details-list-wrapper .service-details-list {
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    .service-details-page .service-details-list-wrapper .service-details-list {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .service-details-page .service-details-list-wrapper .service-details-list {
        flex-wrap: wrap;
        justify-content: center;
        border: unset;
        gap: 10px;
    }
}

.service-details-page .service-details-list-wrapper .service-details-list li {
    border-right: 1px solid rgba(var(--title-color-opc), 0.1);
    transition: 0.5s;
    margin-bottom: 0;
}

.service-details-page .service-details-list-wrapper .service-details-list li a {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--title-color-opc), 0.7);
    border: unset;
    border-bottom: 3px solid transparent;
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    padding: 0;
    padding: 16px 35px 16px;
}

@media (max-width: 1399px) {
    .service-details-page .service-details-list-wrapper .service-details-list li a {
        padding: 15px 25px 13px;
    }
}

@media (max-width: 1199px) {
    .service-details-page .service-details-list-wrapper .service-details-list li a {
        padding: 15px 17px 13px;
    }
}

@media (max-width: 991px) {
    .service-details-page .service-details-list-wrapper .service-details-list li a {
        padding: 15px 33px 13px;
    }
}

@media (max-width: 767px) {
    .service-details-page .service-details-list-wrapper .service-details-list li a {
        padding: 15px 17px 13px;
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    .service-details-page .service-details-list-wrapper .service-details-list li a {
        padding: 15px 12px 13px;
        font-size: 14px;
    }
}

.service-details-page .service-details-list-wrapper .service-details-list li a.active {
    color: var(--primary-color3);
    border-color: var(--primary-color3);
    background: unset;
}

.service-details-page .service-details-list-wrapper .service-details-list li a:hover {
    background-color: unset;
}

.service-details-page .service-details-list-wrapper .service-details-list li:last-child {
    border-right: unset;
}

@media (max-width: 576px) {
    .service-details-page .service-details-list-wrapper .service-details-list li:last-child {
        border-right: 1px solid rgba(var(--title-color-opc), 0.1);
    }
}

.service-details-page .service-details-list-wrapper .service-details-list li.active {
    border-bottom: 3px solid var(--primary-color3);
}

.service-details-page .cleaning-solution-wrapper {
    margin-bottom: 68px;
}

@media (max-width: 767px) {
    .service-details-page .cleaning-solution-wrapper {
        margin-bottom: 60px;
    }
}

.service-details-page .cleaning-solution-wrapper .cleaning-content>p {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--title-color-opc), 0.6);
    font-weight: 400;
    font-size: 17px;
    line-height: 2;
    margin-bottom: 58px;
}

@media (max-width: 1199px) {
    .service-details-page .cleaning-solution-wrapper .cleaning-content>p {
        font-size: 15px;
        line-height: 2;
        margin-bottom: 45px;
    }
}

@media (max-width: 767px) {
    .service-details-page .cleaning-solution-wrapper .cleaning-content>p {
        margin-bottom: 35px;
    }
}

.service-details-page .cleaning-solution-wrapper .why-choose-section-list .single-list li .icon {
    background-color: var(--primary-color4);
}

.service-details-page .cleaning-solution-wrapper .why-choose-section-list .single-list li .icon svg {
    fill: var(--white-color);
}

.service-details-page .cleaning-solution-wrapper .why-choose-section-list .single-list li .content p {
    max-width: 446px;
}

.service-details-page h2 {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--black-color);
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    margin-bottom: 25px;
}

@media (max-width: 1199px) {
    .service-details-page h2 {
        font-size: 29px;
        line-height: 1;
        margin-bottom: 15px;
    }
}

@media (max-width: 991px) {
    .service-details-page h2 {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    .service-details-page h2 {
        font-size: 28px;
    }
}

@media (max-width: 576px) {
    .service-details-page h2 {
        font-size: 25px;
    }
}

.service-details-page .faq-wrapper {
    margin-bottom: 80px;
}

@media (max-width: 767px) {
    .service-details-page .faq-wrapper {
        margin-bottom: 60px;
    }
}

.service-details-page .faq-wrapper h2 {
    text-transform: uppercase;
    margin-bottom: 29px;
}

@media (max-width: 991px) {
    .service-details-page .faq-wrapper h2 {
        margin-bottom: 25px;
    }
}

@media (max-width: 576px) {
    .service-details-page .faq-wrapper h2 {
        margin-bottom: 20px;
    }
}

.service-details-page .faq-wrapper .faq-content-wrap .faq-wrap .accordion .accordion-item .accordion-header .accordion-button {
    color: var(--black-color);
}

.service-details-page .faq-wrapper .faq-content-wrap .faq-wrap .accordion .accordion-item .accordion-body {
    color: rgba(var(--black-color-opc), 0.6);
}

.service-details-page .how-to-order-wrapper {
    margin-bottom: 65px;
}

@media (max-width: 767px) {
    .service-details-page .how-to-order-wrapper {
        margin-bottom: 55px;
    }
}

.service-details-page .how-to-order-wrapper h2 {
    margin-bottom: 50px;
}

@media (max-width: 1199px) {
    .service-details-page .how-to-order-wrapper h2 {
        margin-bottom: 43px;
    }
}

@media (max-width: 767px) {
    .service-details-page .how-to-order-wrapper h2 {
        margin-bottom: 40px;
    }
}

@media (max-width: 576px) {
    .service-details-page .how-to-order-wrapper h2 {
        margin-bottom: 36px;
    }
}

.service-details-page .how-to-order-wrapper .process-wrapper {
    position: relative;
}

.service-details-page .how-to-order-wrapper .process-wrapper .single-process .content h3 {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
}

@media (max-width: 1399px) {
    .service-details-page .how-to-order-wrapper .process-wrapper .single-process .content h3 {
        font-size: 19px;
    }
}

@media (max-width: 767px) {
    .service-details-page .how-to-order-wrapper .process-wrapper .single-process .content h3 {
        font-size: 25px;
    }
}

@media (max-width: 576px) {
    .service-details-page .how-to-order-wrapper .process-wrapper .single-process .content h3 {
        font-size: 20px;
    }
}

.service-details-page .how-to-order-wrapper .process-wrapper .single-process .content p {
    font-size: 14px;
}

@media (max-width: 767px) {
    .service-details-page .how-to-order-wrapper .process-wrapper .single-process .content p {
        font-size: 15px;
    }
}

.service-details-page .how-to-order-wrapper .process-wrapper .single-process.active span {
    color: var(--black-color);
    background-color: var(--primary-color1);
}

.service-details-page .how-to-order-wrapper .process-wrapper .progress-pagination {
    position: absolute;
    background: #CDCDCD;
    position: absolute;
    top: 32%;
    left: 0;
    height: 2px;
}

@media (max-width: 767px) {
    .service-details-page .how-to-order-wrapper .process-wrapper .progress-pagination {
        top: 35%;
    }
}

@media (max-width: 576px) {
    .service-details-page .how-to-order-wrapper .process-wrapper .progress-pagination {
        top: 46%;
    }
}

@media (max-width: 576px) {
    .service-details-page .how-to-order-wrapper .process-wrapper .progress-pagination {
        top: 34%;
    }
}

.service-details-page .how-to-order-wrapper .process-wrapper .progress-pagination .swiper-pagination-progressbar-fill {
    background: var(--primary-color1);
}

.service-details-page .review-wrapper h2 {
    margin-bottom: 36px;
}

.service-details-page .review-wrapper .rating-wrapper {
    max-width: 680px;
    padding: 45px;
    border: 1px solid rgba(var(--title-color-opc), 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 58px;
}

@media (max-width: 1399px) {
    .service-details-page .review-wrapper .rating-wrapper {
        padding: 35px 40px;
    }
}

@media (max-width: 1199px) {
    .service-details-page .review-wrapper .rating-wrapper {
        padding: 35px;
    }
}

@media (max-width: 991px) {
    .service-details-page .review-wrapper .rating-wrapper {
        padding: 35px 40px;
        max-width: unset;
    }
}

@media (max-width: 767px) {
    .service-details-page .review-wrapper .rating-wrapper {
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
        padding: 30px 20px;
        margin-bottom: 45px;
    }
}

@media (max-width: 576px) {
    .service-details-page .review-wrapper .rating-wrapper {
        padding: 20px;
    }
}

@media (max-width: 991px) {
    .service-details-page .review-wrapper .rating-wrapper .rating-area {
        max-width: 180px;
        width: 100%;
    }
}

@media (max-width: 576px) {
    .service-details-page .review-wrapper .rating-wrapper .rating-area {
        max-width: unset;
        text-align: center;
    }
}

.service-details-page .review-wrapper .rating-wrapper .rating-area>span {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--title-color-opc), 0.6);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    text-transform: capitalize;
    display: block;
    margin-bottom: 25px;
}

.service-details-page .review-wrapper .rating-wrapper .rating-area h3 {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    font-weight: 600;
    font-size: 44px;
    line-height: 1.1;
    text-transform: capitalize;
    margin-bottom: 20px;
}

@media (max-width: 1199px) {
    .service-details-page .review-wrapper .rating-wrapper .rating-area h3 {
        font-size: 40px;
    }
}

@media (max-width: 991px) {
    .service-details-page .review-wrapper .rating-wrapper .rating-area h3 {
        font-size: 42px;
        margin-bottom: 15px;
    }
}

@media (max-width: 767px) {
    .service-details-page .review-wrapper .rating-wrapper .rating-area h3 {
        font-size: 38px;
    }
}

.service-details-page .review-wrapper .rating-wrapper .rating-area h3>span {
    font-size: 30px;
    color: rgba(var(--title-color-opc), 0.5);
}

@media (max-width: 1199px) {
    .service-details-page .review-wrapper .rating-wrapper .rating-area h3>span {
        font-size: 25px;
    }
}

.service-details-page .review-wrapper .rating-wrapper .rating-area ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 9px;
    line-height: 1;
    margin-bottom: 9px;
}

@media (max-width: 576px) {
    .service-details-page .review-wrapper .rating-wrapper .rating-area ul {
        justify-content: center;
    }
}

.service-details-page .review-wrapper .rating-wrapper .rating-area ul li i {
    color: var(--primary-color1);
    font-size: 23px;
}

@media (max-width: 1199px) {
    .service-details-page .review-wrapper .rating-wrapper .rating-area ul li i {
        font-size: 20px;
    }
}

.service-details-page .review-wrapper .rating-wrapper .progress-list {
    padding: 0;
    margin: 0;
    list-style: none;
    padding-left: 60px;
    border-left: 1px solid rgba(var(--title-color-opc), 0.1);
}

@media (max-width: 1199px) {
    .service-details-page .review-wrapper .rating-wrapper .progress-list {
        padding-left: 50px;
    }
}

@media (max-width: 991px) {
    .service-details-page .review-wrapper .rating-wrapper .progress-list {
        padding-left: 110px;
    }
}

@media (max-width: 767px) {
    .service-details-page .review-wrapper .rating-wrapper .progress-list {
        padding-left: unset;
        border: unset;
    }
}

.service-details-page .review-wrapper .rating-wrapper .progress-list .single-progress2 {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 3px;
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .service-details-page .review-wrapper .rating-wrapper .progress-list .single-progress2 {
        gap: 10px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .service-details-page .review-wrapper .rating-wrapper .progress-list .single-progress2 {
        gap: 15px;
    }
}

@media (max-width: 576px) {
    .service-details-page .review-wrapper .rating-wrapper .progress-list .single-progress2 {
        flex-direction: column;
        align-items: start;
        gap: 10px;
    }
}

.service-details-page .review-wrapper .rating-wrapper .progress-list .single-progress2:last-child {
    margin-bottom: 0;
}

.service-details-page .review-wrapper .rating-wrapper .progress-list .single-progress2 .rating-progress-bar-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .service-details-page .review-wrapper .rating-wrapper .progress-list .single-progress2 .rating-progress-bar-wrap {
        gap: 15px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .service-details-page .review-wrapper .rating-wrapper .progress-list .single-progress2 .rating-progress-bar-wrap {
        gap: 15px;
    }
}

.service-details-page .review-wrapper .rating-wrapper .progress-list .single-progress2 .rating-progress-bar-wrap ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

.service-details-page .review-wrapper .rating-wrapper .progress-list .single-progress2 .rating-progress-bar-wrap ul li i {
    color: var(--primary-color1);
    font-size: 11px;
}

.service-details-page .review-wrapper .rating-wrapper .progress-list .single-progress2 .rating-progress-bar-wrap ul li .bi-star {
    color: #EFF0F5;
}

.service-details-page .review-wrapper .rating-wrapper .progress-list .single-progress2 .rating-progress-bar-wrap .rating-progress-bar {
    height: 12px;
    min-width: 120px;
    background-color: #EFF0F5;
}

@media (max-width: 1199px) {
    .service-details-page .review-wrapper .rating-wrapper .progress-list .single-progress2 .rating-progress-bar-wrap .rating-progress-bar {
        min-width: 100px;
    }
}

@media (max-width: 991px) {
    .service-details-page .review-wrapper .rating-wrapper .progress-list .single-progress2 .rating-progress-bar-wrap .rating-progress-bar {
        min-width: 120px;
    }
}

.service-details-page .review-wrapper .rating-wrapper .progress-list .single-progress2 .rating-progress-bar-wrap .rating-progress-bar .rating-progress-bar-per {
    height: 12px;
    background-color: var(--primary-color1);
    width: 0;
    position: relative;
}

.service-details-page .review-wrapper .rating-wrapper .progress-list .single-progress2 .rating-progress-bar-wrap .data-per {
    color: var(--text-color);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .service-details-page .review-wrapper .rating-wrapper .progress-list .single-progress2 .rating-progress-bar-wrap .data-per {
        font-size: 15px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .service-details-page .review-wrapper .rating-wrapper .progress-list .single-progress2 .rating-progress-bar-wrap .data-per {
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    .service-details-page .review-wrapper .rating-wrapper .progress-list .single-progress2 .rating-progress-bar-wrap .data-per {
        font-size: 15px;
    }
}

.service-details-page .review-wrapper .comment-area {
    margin-left: 20px;
    margin-bottom: 80px;
}

@media (max-width: 767px) {
    .service-details-page .review-wrapper .comment-area {
        margin-left: unset;
        margin-bottom: 60px;
    }
}

.service-details-page .review-wrapper .comment-area .icon-and-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

@media (max-width: 767px) {
    .service-details-page .review-wrapper .comment-area .icon-and-date {
        gap: 15px;
        margin-bottom: 30px;
    }
}

.service-details-page .review-wrapper .comment-area .icon-and-date>li {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--title-color-opc), 0.5);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.9;
}

@media (max-width: 767px) {
    .service-details-page .review-wrapper .comment-area .icon-and-date>li {
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    .service-details-page .review-wrapper .comment-area .icon-and-date>li {
        gap: 10px;
    }
}

.service-details-page .review-wrapper .comment-area .icon-and-date>li .icon {
    padding: 6px;
    height: 44px;
    border-radius: 5px;
    background-color: #FFDEDE;
    display: flex;
    justify-content: center;
}

.service-details-page .review-wrapper .comment-area .icon-and-date>li .icon img {
    width: 32px;
    height: 39px;
}

.service-details-page .review-wrapper .comment-area .icon-and-date>li span {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--title-color-opc), 0.5);
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    text-transform: capitalize;
}

@media (max-width: 767px) {
    .service-details-page .review-wrapper .comment-area .icon-and-date>li span {
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    .service-details-page .review-wrapper .comment-area .icon-and-date>li span {
        font-size: 14px;
    }
}

.service-details-page .review-wrapper .comment-area .icon-and-date>li:last-child {
    margin-left: 59px;
}

@media (max-width: 576px) {
    .service-details-page .review-wrapper .comment-area .icon-and-date>li:last-child {
        margin-left: 0;
    }
}

.service-details-page .review-wrapper .comment-area .icon-and-date:last-child {
    margin-bottom: 0;
}

.service-details-page .review-wrapper .comment-area .content h3 {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    text-transform: capitalize;
    margin-bottom: 10px;
}

@media (max-width: 767px) {
    .service-details-page .review-wrapper .comment-area .content h3 {
        font-size: 17px;
        margin-bottom: 8px;
    }
}

@media (max-width: 576px) {
    .service-details-page .review-wrapper .comment-area .content h3 {
        font-size: 15px;
    }
}

.service-details-page .review-wrapper .comment-area .content ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 6px;
    line-height: 1;
}

.service-details-page .review-wrapper .comment-area .content ul li i {
    color: var(--primary-color1);
    font-size: 15px;
}

.service-details-page .review-wrapper .comment-area .read-btn {
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 500;
    color: rgba(var(--title-color-opc), 0.7);
}

@media (max-width: 767px) {
    .service-details-page .review-wrapper .comment-area .read-btn {
        justify-content: center;
    }
}

.service-details-page .review-wrapper .comment-area .read-btn span {
    color: rgba(var(--title-color-opc), 0.7);
}

.service-details-page .details-wrapper p {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--title-color-opc), 0.6);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.9;
    margin-bottom: 33px;
}

@media (max-width: 1199px) {
    .service-details-page .details-wrapper p {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .service-details-page .details-wrapper p {
        margin-bottom: 25px;
    }
}

.service-details-page .details-wrapper ul {
    padding: 0;
    margin: 0;
    list-style: none;
    -moz-columns: 2;
    columns: 2;
    margin-bottom: 40px;
}

@media (max-width: 1399px) {
    .service-details-page .details-wrapper ul {
        gap: 30px;
    }
}

@media (max-width: 1199px) {
    .service-details-page .details-wrapper ul {
        gap: 25px;
        margin-bottom: 50px;
    }
}

@media (max-width: 767px) {
    .service-details-page .details-wrapper ul {
        gap: 20px;
        margin-bottom: 40px;
    }
}

@media (max-width: 576px) {
    .service-details-page .details-wrapper ul {
        gap: 15px;
        margin-bottom: 40px;
        -moz-columns: unset;
        columns: unset;
    }
}

.service-details-page .details-wrapper ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--title-color-opc), 0.8);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.1;
    margin-bottom: 29px;
}

@media (max-width: 1399px) {
    .service-details-page .details-wrapper ul li {
        font-size: 15px;
    }
}

@media (max-width: 1199px) {
    .service-details-page .details-wrapper ul li {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .service-details-page .details-wrapper ul li {
        gap: 8px;
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    .service-details-page .details-wrapper ul li {
        line-height: 1.4;
    }
}

.service-details-page .details-wrapper ul li svg {
    min-width: 15px;
    fill: var(--primary-color3);
}

.service-details-page .details-wrapper ul li:last-child {
    margin-bottom: 0;
}

.service-details-page .details-wrapper .pricing-wrapper h2 {
    font-size: 28px;
}

@media (max-width: 576px) {
    .service-details-page .details-wrapper .pricing-wrapper h2 {
        font-size: 25px;
    }
}

.service-details-page .details-wrapper .pricing-wrapper ul {
    -moz-columns: unset;
    columns: unset;
    margin-left: 65px;
}

@media (max-width: 576px) {
    .service-details-page .details-wrapper .pricing-wrapper ul {
        margin-left: 0;
    }
}

.service-details-page .details-wrapper .pricing-wrapper ul li {
    align-items: baseline;
    line-height: 1.9;
}

@media (max-width: 767px) {
    .service-details-page .details-wrapper .pricing-wrapper ul li {
        font-size: 15px;
    }
}

.service-details-page .contact-form-area {
    padding: 10px;
    background-color: #F1F6EF;
    border: 1px solid rgba(241, 246, 239, 0.8);
    border-radius: 20px;
    margin-bottom: 85px;
}

@media (max-width: 991px) {
    .service-details-page .contact-form-area {
        margin-bottom: 70px;
    }
}

@media (max-width: 767px) {
    .service-details-page .contact-form-area {
        margin-bottom: 60px;
    }
}

@media (max-width: 576px) {
    .service-details-page .contact-form-area {
        padding: 10px;
        margin-bottom: 50px;
        border-radius: 15px;
    }
}

.service-details-page .contact-form-area .pricing-content span {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--title-color-opc), 0.7);
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    text-transform: capitalize;
    margin-bottom: 10px;
    display: block;
}

@media (max-width: 576px) {
    .service-details-page .contact-form-area .pricing-content span {
        font-size: 15px;
        margin-bottom: 8px;
    }
}

.service-details-page .contact-form-area .pricing-content h3 {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    padding-bottom: 36px;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
}

@media (max-width: 1399px) {
    .service-details-page .contact-form-area .pricing-content h3 {
        font-size: 36px;
        padding-bottom: 28px;
        margin-bottom: 26px;
    }
}

@media (max-width: 991px) {
    .service-details-page .contact-form-area .pricing-content h3 {
        font-size: 34px;
    }
}

@media (max-width: 767px) {
    .service-details-page .contact-form-area .pricing-content h3 {
        font-size: 33px;
        padding-bottom: 22px;
        margin-bottom: 22px;
    }
}

@media (max-width: 576px) {
    .service-details-page .contact-form-area .pricing-content h3 {
        font-size: 27px;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
}

.service-details-page .contact-form-area .pricing-content h3 del {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--title-color-opc), 0.5);
    font-weight: 600;
    font-size: 25px;
    line-height: 1;
}

@media (max-width: 1399px) {
    .service-details-page .contact-form-area .pricing-content h3 del {
        font-size: 22px;
    }
}

@media (max-width: 991px) {
    .service-details-page .contact-form-area .pricing-content h3 del {
        font-size: 21px;
    }
}

@media (max-width: 767px) {
    .service-details-page .contact-form-area .pricing-content h3 del {
        font-size: 20px;
    }
}

@media (max-width: 576px) {
    .service-details-page .contact-form-area .pricing-content h3 del {
        font-size: 18px;
    }
}

.service-details-page .contact-form-area .pricing-content p {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--black-color);
    font-weight: 700;
    font-size: 23px;
    line-height: 1;
    text-transform: capitalize;
    margin-bottom: 34px;
}

@media (max-width: 1199px) {
    .service-details-page .contact-form-area .pricing-content p {
        margin-bottom: 30px;
    }
}

@media (max-width: 991px) {
    .service-details-page .contact-form-area .pricing-content p {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .service-details-page .contact-form-area .pricing-content p {
        font-size: 19px;
        margin-bottom: 25px;
    }
}

@media (max-width: 576px) {
    .service-details-page .contact-form-area .pricing-content p {
        font-size: 17px;
        margin-bottom: 18px;
    }
}

.service-details-page .contact-form-area .form-inner input {
    font-size: 14px;
    padding: 10px 20px;
}

@media (max-width: 1199px) {
    .service-details-page .contact-form-area .form-inner input {
        padding: 10px;
    }
}

.service-details-page .contact-form-area .form-inner input:focus {
    border-color: var(--primary-color3);
    background-color: var(--white-color);
}

.service-details-page .contact-form-area .form-inner label {
    color: var(--black-color);
}

.service-details-page .contact-form-area .form-inner2 {
    display: flex;
    flex-wrap: wrap;
    gap: 45px;
    row-gap: 15px;
}

@media (max-width: 1399px) {
    .service-details-page .contact-form-area .form-inner2 {
        gap: 16px;
    }
}

@media (max-width: 1199px) {
    .service-details-page .contact-form-area .form-inner2 {
        gap: 14px;
    }
}

@media (max-width: 991px) {
    .service-details-page .contact-form-area .form-inner2 {
        gap: 19px;
    }
}

@media (max-width: 767px) {
    .service-details-page .contact-form-area .form-inner2 {
        gap: 64px;
        row-gap: 20px;
    }
}

@media (max-width: 576px) {
    .service-details-page .contact-form-area .form-inner2 {
        row-gap: 6px;
    }
}

.service-details-page .contact-form-area .form-inner2 .form-check {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

@media (max-width: 991px) {
    .service-details-page .contact-form-area .form-inner2 .form-check {
        gap: 5px;
    }
}

@media (max-width: 767px) {
    .service-details-page .contact-form-area .form-inner2 .form-check {
        gap: 8px;
    }
}

.service-details-page .contact-form-area .form-inner2 .form-check .form-check-label {
    line-height: 1;
}

.service-details-page .contact-form-area .form-inner2 .form-check .form-check-label {
    font-family: var(--font-Hanken-Grotesk);
    color: #1D1D1D;
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
}

@media (max-width: 1399px) {
    .service-details-page .contact-form-area .form-inner2 .form-check .form-check-label {
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    .service-details-page .contact-form-area .form-inner2 .form-check .form-check-label {
        font-size: 15px;
    }
}

.service-details-page .contact-form-area .form-inner2 .form-check .form-check-input {
    border-radius: 50%;
    border: 1px solid rgba(var(--primary-color3-opc), 0.5);
}

.service-details-page .contact-form-area .form-inner2 .form-check .form-check-input:checked {
    background-color: var(--primary-color3);
    border: none;
}

.service-details-page .contact-form-area .form-inner2 .form-check:hover {
    cursor: pointer;
}

.service-details-page .contact-form-area .form-inner2 .form-check:hover .form-check-label {
    cursor: pointer;
}

.service-details-page .contact-form-area .check-area {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--black-color);
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    margin-bottom: 25px;
}

@media (max-width: 576px) {
    .service-details-page .contact-form-area .check-area {
        font-size: 17px;
        line-height: 1;
        margin-bottom: 15px;
    }
}

.service-details-page .contact-form-area .contact-form-wrapper {
    background-color: var(--white-color);
    border-radius: 15px;
    padding: 35px 30px;
}

@media (max-width: 1199px) {
    .service-details-page .contact-form-area .contact-form-wrapper {
        padding: 30px 25px;
    }
}

@media (max-width: 991px) {
    .service-details-page .contact-form-area .contact-form-wrapper {
        padding: 35px 25px;
    }
}

@media (max-width: 767px) {
    .service-details-page .contact-form-area .contact-form-wrapper {
        padding: 28px;
    }
}

@media (max-width: 576px) {
    .service-details-page .contact-form-area .contact-form-wrapper {
        padding: 15px;
        border-radius: 10px;
    }
}

.service-details-page .contact-form-area .contact-form-wrapper .primary-btn1 {
    padding: 18px 38px;
    width: 100%;
    font-family: var(--font-Hanken-Grotesk);
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    background-color: var(--primary-color1);
    color: var(--black-color);
}

@media (max-width: 576px) {
    .service-details-page .contact-form-area .contact-form-wrapper .primary-btn1 {
        padding: 14px 30px;
    }
}

.service-details-page .contact-form-area .contact-form-wrapper .primary-btn1:hover {
    color: var(--white-color);
}

.service-details-page .contact-form-area .contact-form-wrapper .primary-btn1::after {
    background-color: var(--black-color);
}

.service-details-page .contact-form-area .contact-form-wrapper .primary-btn1>span {
    text-decoration: none;
}

.service-details-page .contact-form-area .contact-form-wrapper .custom-select-dropdown {
    border-radius: 12px;
    position: relative;
}

.service-details-page .contact-form-area .contact-form-wrapper .custom-select-dropdown .calender-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 24px;
    fill: #2f2f2f;
}

.service-details-page .contact-form-area .contact-form-wrapper .custom-select-dropdown input {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 400;
    font-size: 14px;
    padding: 10px 20px;
    line-height: 1;
    color: rgba(var(--title-color-opc), 0.5);
    vertical-align: middle;
    display: flex;
    align-items: center;
}

@media (max-width: 1199px) {
    .service-details-page .contact-form-area .contact-form-wrapper .custom-select-dropdown input {
        padding: 10px;
    }
}

.service-details-page .contact-form-area .contact-form-wrapper .custom-select-dropdown input:hover {
    cursor: pointer;
}

.service-details-page .contact-form-area .contact-form-wrapper .time-select span {
    color: rgba(var(--title-color-opc), 0.5);
}

.service-details-page .contact-form-area .contact-form-wrapper .time-select::before {
    position: absolute;
    content: url(../img/inner-pages/svg/Time-svg.svg);
    right: 20px;
    transition: 0.3s;
    transform: unset;
}

.service-details-page .contact-form-area.style-2 {
    margin-bottom: 0;
}

.service-details-page .contact-form-area.style-2 .contact-form-wrapper .service-select-wrapper ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.service-details-page .contact-form-area.style-2 .contact-form-wrapper .service-select-wrapper ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    border: 1px solid rgba(var(--title-color-opc), 0.1);
    border-radius: 10px;
    margin-bottom: 20px;
}

@media (max-width: 1199px) {
    .service-details-page .contact-form-area.style-2 .contact-form-wrapper .service-select-wrapper ul li {
        padding: 10px;
    }
}

@media (max-width: 991px) {
    .service-details-page .contact-form-area.style-2 .contact-form-wrapper .service-select-wrapper ul li {
        padding: 15px;
    }
}

@media (max-width: 576px) {
    .service-details-page .contact-form-area.style-2 .contact-form-wrapper .service-select-wrapper ul li {
        padding: 10px;
    }
}

.service-details-page .contact-form-area.style-2 .contact-form-wrapper .service-select-wrapper ul li img {
    border-radius: 10px;
}

.service-details-page .contact-form-area.style-2 .contact-form-wrapper .service-select-wrapper ul li:last-child {
    margin-bottom: 50px;
}

@media (max-width: 576px) {
    .service-details-page .contact-form-area.style-2 .contact-form-wrapper .service-select-wrapper ul li:last-child {
        margin-bottom: 40px;
    }
}

.service-details-page .contact-form-area.style-2 .contact-form-wrapper .service-select-wrapper ul li .service-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    width: 100%;
}

@media (max-width: 1399px) {
    .service-details-page .contact-form-area.style-2 .contact-form-wrapper .service-select-wrapper ul li .service-item {
        gap: 7px;
    }
}

.service-details-page .contact-form-area.style-2 .contact-form-wrapper .service-select-wrapper ul li .service-item .img-and-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

@media (max-width: 1399px) {
    .service-details-page .contact-form-area.style-2 .contact-form-wrapper .service-select-wrapper ul li .service-item .img-and-content {
        gap: 10px;
    }
}

@media (max-width: 991px) {
    .service-details-page .contact-form-area.style-2 .contact-form-wrapper .service-select-wrapper ul li .service-item .img-and-content {
        gap: 15px;
    }
}

@media (max-width: 576px) {
    .service-details-page .contact-form-area.style-2 .contact-form-wrapper .service-select-wrapper ul li .service-item .img-and-content {
        gap: 10px;
    }
}

.service-details-page .contact-form-area.style-2 .contact-form-wrapper .service-select-wrapper ul li .service-item .content strong {
    font-family: var(--font-Hanken-Grotesk);
    color: #1D1D1D;
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    margin-bottom: 2px;
    display: block;
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .service-details-page .contact-form-area.style-2 .contact-form-wrapper .service-select-wrapper ul li .service-item .content strong {
        font-size: 18px;
    }
}

@media (max-width: 1199px) {
    .service-details-page .contact-form-area.style-2 .contact-form-wrapper .service-select-wrapper ul li .service-item .content strong {
        font-size: 17px;
        line-height: 1.2;
    }
}

@media (max-width: 991px) {
    .service-details-page .contact-form-area.style-2 .contact-form-wrapper .service-select-wrapper ul li .service-item .content strong {
        font-size: 20px;
        line-height: 1;
    }
}

@media (max-width: 767px) {
    .service-details-page .contact-form-area.style-2 .contact-form-wrapper .service-select-wrapper ul li .service-item .content strong {
        font-size: 18px;
    }
}

@media (max-width: 576px) {
    .service-details-page .contact-form-area.style-2 .contact-form-wrapper .service-select-wrapper ul li .service-item .content strong {
        font-size: 16px;
        line-height: 1.3;
        margin-bottom: 6px;
    }
}

.service-details-page .contact-form-area.style-2 .contact-form-wrapper .service-select-wrapper ul li .service-item .content span {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--title-color-opc), 0.7);
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    text-transform: capitalize;
}

.service-details-page .contact-form-area.style-2 .contact-form-wrapper .service-select-wrapper ul li .service-item .content span span {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--primary-color4);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
}

.service-details-page .contact-form-area.style-2 .contact-form-wrapper input {
    border-radius: 50%;
    border: 1px solid rgba(var(--title-color-opc), 0.2);
}

.service-details-page .contact-form-area.style-2 .contact-form-wrapper input[type=checkbox]:checked {
    background-color: var(--primary-color3);
    border-radius: 50%;
    border: unset;
}

.service-details-page .contact-form-area input[type=checkbox]:checked {
    background-color: var(--primary-color4);
}

.rating-modal .modal-dialog {
    max-width: 872px;
}

.rating-modal .modal-dialog .modal-content {
    padding: 55px 60px;
    position: relative;
}

@media (max-width: 991px) {
    .rating-modal .modal-dialog .modal-content {
        padding: 55px 40px;
    }
}

@media (max-width: 767px) {
    .rating-modal .modal-dialog .modal-content {
        padding: 45px 35px;
    }
}

@media (max-width: 576px) {
    .rating-modal .modal-dialog .modal-content {
        padding: 45px 20px;
    }
}

.rating-modal .modal-dialog .modal-content .close-btn {
    width: 36px;
    height: 36px;
    background-color: var(--title-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 20px;
    right: 20px;
    transition: 0.5s;
}

@media (max-width: 576px) {
    .rating-modal .modal-dialog .modal-content .close-btn {
        top: 15px;
        right: 15px;
    }
}

.rating-modal .modal-dialog .modal-content .close-btn svg {
    fill: var(--white-color);
    transition: 0.5s;
}

.rating-modal .modal-dialog .modal-content .close-btn:hover {
    background-color: var(--primary-color1);
}

.rating-modal .modal-dialog .modal-content .close-btn:hover svg {
    fill: var(--title-color);
}

.rating-modal .modal-dialog .modal-content .modal-body {
    padding: 0;
}

.rating-modal .modal-dialog .modal-content .modal-body h2 {
    margin-bottom: 25px;
    font-size: 30px;
}

.rating-modal .modal-dialog .modal-content .modal-body .star-rating-list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 50px;
    row-gap: 25px;
    flex-wrap: wrap;
    max-width: 590px;
    width: 100%;
    margin-bottom: 50px;
}

@media (max-width: 576px) {
    .rating-modal .modal-dialog .modal-content .modal-body .star-rating-list {
        margin-bottom: 40px;
    }
}

.rating-modal .modal-dialog .modal-content .modal-body .star-rating-list li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rating-modal .modal-dialog .modal-content .modal-body .star-rating-list li .rating-container {
    line-height: 1;
}

.rating-modal .modal-dialog .modal-content .modal-body .star-rating-list li .rating-container .star-icon {
    color: var(--text-color);
    font-size: 13px;
    cursor: pointer;
}

.rating-modal .modal-dialog .modal-content .modal-body .star-rating-list li .rating-container .star-icon.hovered,
.rating-modal .modal-dialog .modal-content .modal-body .star-rating-list li .rating-container .star-icon.selected {
    color: var(--primary-color1);
}

.rating-modal .modal-dialog .modal-content .modal-body .star-rating-list li .rating-container .star-icon.hovered::before,
.rating-modal .modal-dialog .modal-content .modal-body .star-rating-list li .rating-container .star-icon.selected::before {
    content: "\f586";
}

.rating-modal .modal-dialog .modal-content .modal-body .star-rating-list li span {
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
}

@media (max-width: 576px) {
    .rating-modal .modal-dialog .modal-content .modal-body .star-rating-list li span {
        font-size: 15px;
    }
}

.rating-modal .modal-dialog .modal-content .modal-body .review-form-wrapper {
    padding: 35px 30px;
    border: 1px solid var(--borders-color);
}

@media (max-width: 576px) {
    .rating-modal .modal-dialog .modal-content .modal-body .review-form-wrapper {
        padding: 30px 15px;
    }
}

.rating-modal .modal-dialog .modal-content .modal-body .review-form-wrapper .form-inner label {
    font-size: 16px;
}

.rating-modal .modal-dialog .modal-content .modal-body .review-form-wrapper .form-inner textarea {
    min-height: 110px;
}

.rating-modal .modal-dialog .modal-content .modal-body .review-form-wrapper .form-inner input {
    background-color: transparent;
    border: 1px solid rgba(var(--title-color-opc), 0.1);
    padding: 10px 20px;
    height: 55px;
}

@media (max-width: 576px) {
    .rating-modal .modal-dialog .modal-content .modal-body .review-form-wrapper .form-inner input {
        font-size: 15px;
    }
}

.rating-modal .modal-dialog .modal-content .modal-body .review-form-wrapper .form-inner input:focus {
    background-color: var(--white-color);
    border-color: var(--primary-color1);
}

.rating-modal .modal-dialog .modal-content .modal-body .review-form-wrapper .form-inner input::-moz-placeholder {
    font-family: var(--font-Hanken-Grotesk);
    font-size: 16px;
    color: var(--text-color);
    font-weight: 400;
}

.rating-modal .modal-dialog .modal-content .modal-body .review-form-wrapper .form-inner input::placeholder {
    font-family: var(--font-Hanken-Grotesk);
    font-size: 16px;
    color: var(--text-color);
    font-weight: 400;
}

.rating-modal .modal-dialog .modal-content .modal-body .review-form-wrapper .form-inner textarea {
    padding: 20px 0 10px 20px;
    border-radius: unset;
}

.rating-modal .modal-dialog .modal-content .modal-body .review-form-wrapper .form-inner textarea::-moz-placeholder {
    font-family: var(--font-Hanken-Grotesk);
    font-size: 16px;
    color: var(--text-color);
    font-weight: 400;
}

.rating-modal .modal-dialog .modal-content .modal-body .review-form-wrapper .form-inner textarea::placeholder {
    font-family: var(--font-Hanken-Grotesk);
    font-size: 16px;
    color: var(--text-color);
    font-weight: 400;
}

.rating-modal .modal-dialog .modal-content .modal-body .review-form-wrapper .form-inner textarea:focus {
    background-color: var(--white-color);
    border-color: var(--primary-color1);
}

.rating-modal .modal-dialog .modal-content .modal-body .review-form-wrapper .form-inner2 {
    display: flex;
    align-items: end;
    gap: 10px;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .dashboard-title h5 {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    margin-bottom: 30px;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .order-info {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid rgba(var(--title-color-opc), 0.1);
    border-radius: 5px;
    margin-bottom: 40px;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .order-info li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-Hanken-Grotesk);
    line-height: 1;
    padding: 15px;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .order-info li:last-child {
    border-bottom: unset;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .order-info li .status {
    color: var(--primary-color3);
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .order-summary {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid rgba(var(--title-color-opc), 0.1);
    border-radius: 5px;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .order-summary li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-Hanken-Grotesk);
    line-height: 1;
    border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .order-summary li:last-child {
    border-bottom: unset;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .order-summary li>span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .order-summary .list-head {
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid rgba(var(--title-color-opc), 0.3);
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .order-summary .grand-total {
    font-size: 16px;
    font-weight: 600;
    border-top: 1px solid rgba(var(--title-color-opc), 0.3);
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap {
    background-color: var(--white-color);
    border-radius: 10px;
    height: 100%;
    position: relative;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-top {
    padding: 20px 30px;
    background-color: #F6EFF7;
    margin-bottom: 100px;
    position: sticky;
    left: 0;
    top: 0;
    width: 100%;
    border-radius: 10px;
}

@media (max-width: 1199px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-top {
        padding: 20px;
    }
}

@media (max-width: 991px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-top {
        padding: 30px;
    }
}

@media (max-width: 576px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-top {
        padding: 20px 15px;
    }
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-top .conversation-author-area {
    display: flex;
    align-items: center;
    gap: 20px;
}

@media (max-width: 576px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-top .conversation-author-area {
        gap: 10px;
    }
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-top .conversation-author-area .author-img {
    position: relative;
    width: 71px;
    height: 71px;
    border-radius: 50%;
}

@media (max-width: 576px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-top .conversation-author-area .author-img {
        width: 47px;
        height: 47px;
    }
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-top .conversation-author-area .author-img img {
    width: 71px;
    height: 71px;
    border-radius: 50%;
}

@media (max-width: 576px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-top .conversation-author-area .author-img img {
        width: 47px;
        height: 47px;
    }
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-top .conversation-author-area .author-img .active-status {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid var(--white-color);
    background-color: #24BC61;
    display: inline-block;
    position: absolute;
    bottom: 3px;
    right: 3px;
}

@media (max-width: 576px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-top .conversation-author-area .author-img .active-status {
        bottom: 0;
        right: -3px;
    }
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-top .conversation-author-area .author-content h6 {
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 10px;
}

@media (max-width: 576px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-top .conversation-author-area .author-content h6 {
        font-size: 14px;
        margin-bottom: 5px;
    }
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-top .conversation-author-area .author-content p {
    color: var(--text-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 0;
}

@media (max-width: 576px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-top .conversation-author-area .author-content p {
        font-size: 13px;
    }
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area {
    padding: 30px 40px;
}

@media (max-width: 1199px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area {
        padding: 30px 20px;
    }
}

@media (max-width: 576px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area {
        padding: 20px 15px;
    }
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .conversation-date {
    text-align: center;
    position: relative;
    margin-bottom: 90px;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .conversation-date span {
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    padding: 8px 31px;
    background-color: var(--white-color);
    border-radius: 14.5px;
    border: 1px solid #EEE;
    display: inline-block;
    z-index: 1;
    position: relative;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .conversation-date::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #eee;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .single-conversation {
    display: flex;
    gap: 15px;
}

@media (max-width: 576px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .single-conversation {
        gap: 10px;
    }
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .single-conversation .author-img img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    max-width: unset;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .single-conversation .author-content .author-name-and-date {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

@media (max-width: 576px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .single-conversation .author-content .author-name-and-date {
        flex-wrap: wrap;
        gap: 10px;
    }
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .single-conversation .author-content .author-name-and-date h6 {
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 0;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .single-conversation .author-content .author-name-and-date span {
    color: var(--text-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .single-conversation .author-content .conversation-list {
    padding: 0;
    margin: 0;
    list-style: none;
    max-width: 310px;
    width: 100%;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .single-conversation .author-content .conversation-list li {
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    padding: 10px 15px;
    border: 1px solid #eee;
    border-radius: 0 10px 10px;
    margin-bottom: 10px;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .single-conversation .author-content .conversation-list li:last-child {
    margin-bottom: 0;
}

@media (max-width: 576px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .single-conversation .author-content .conversation-list li {
        font-size: 13px;
    }
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .single-conversation.two {
    justify-content: flex-end;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .single-conversation.two .author-name-and-date {
    justify-content: flex-end;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .single-conversation.two .conversation-list li {
    border-radius: 10px 0 10px 10px;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .from-wrapper {
    background-color: #FAF8FB;
    border-radius: 50px;
    padding: 10px 20px;
    position: sticky;
    left: 0;
    bottom: 0;
    width: 100%;
}

@media (max-width: 1199px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .from-wrapper {
        padding: 5px;
    }
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .from-wrapper .from-inner {
    background-color: var(--white-color);
    padding: 20px 40px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

@media (max-width: 1399px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .from-wrapper .from-inner {
        padding: 10px 25px;
    }
}

@media (max-width: 991px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .from-wrapper .from-inner {
        padding: 5px 15px;
    }
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .from-wrapper .from-inner .input-area {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

@media (max-width: 991px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .from-wrapper .from-inner .input-area {
        gap: 10px;
    }
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .from-wrapper .from-inner .input-area .add-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #FAF8FB;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 991px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .from-wrapper .from-inner .input-area .add-icon {
        background-color: transparent;
        width: unset;
        height: unset;
    }
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .from-wrapper .from-inner .input-area .add-icon i {
    font-size: 14px;
}

@media (max-width: 576px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .from-wrapper .from-inner .input-area .add-icon i {
        font-size: 12px;
    }
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .from-wrapper .from-inner .input-area input {
    color: var(--text-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    width: 100%;
}

@media (max-width: 991px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .from-wrapper .from-inner .input-area input {
        font-size: 12px;
    }
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .from-wrapper .from-inner .icon-list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 25px;
}

@media (max-width: 1199px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .from-wrapper .from-inner .icon-list {
        gap: 15px;
    }
}

@media (max-width: 576px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .from-wrapper .from-inner .icon-list {
        gap: 10px;
    }
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .from-wrapper .from-inner .icon-list li button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #FAF8FB;
    transition: 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .from-wrapper .from-inner .icon-list li button:hover {
    background-color: var(--primary-color1);
}

@media (max-width: 991px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .from-wrapper .from-inner .icon-list li button:hover {
        background-color: unset;
    }
}

@media (max-width: 991px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .conversation-wrap .conversation-area .from-wrapper .from-inner .icon-list li button {
        background-color: transparent;
        width: unset;
        height: unset;
    }
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .profile-container {
    margin-bottom: 0;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .profile-container .profile-photo {
    position: relative;
    bottom: 0;
    left: 0;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .profile-container .profile-photo img {
    width: 100%;
    height: 200px;
    border-radius: unset;
    -o-object-fit: cover;
    object-fit: cover;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .profile-container .profile-photo .profile-img-wrap {
    width: 200px;
    height: 200px;
    border-radius: unset;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .profile-container .profile-photo .delete-btn {
    top: -4px;
    left: -4px;
    background-color: var(--black-color);
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .profile-container .profile-photo .delete-btn svg {
    fill: var(--white-color);
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .profile-upload-wrap {
    margin-top: -30px;
    z-index: 1;
    position: relative;
    background-color: rgba(var(--black-color-opc), 0.3);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .profile-upload-wrap .profile-upload-btn {
    color: var(--white-color);
    cursor: pointer;
    transition: 0.35s;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .profile-upload-wrap .profile-upload-btn .icon {
    position: relative;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .profile-upload-wrap .profile-upload-btn .icon svg {
    fill: var(--white-color);
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .delete-btn {
    position: absolute;
    top: 1px;
    right: 16px;
    background-color: var(--white-color);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    padding: 0;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.35s;
}

@media (max-width: 576px) {
    .rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .delete-btn {
        top: -2px;
        right: 14px;
    }
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .delete-btn svg {
    fill: var(--primary-color1);
    transition: 0.35s;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .delete-btn:hover {
    background-color: var(--primary-color1);
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .delete-btn:hover svg {
    fill: var(--black-color);
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .nice-select::before {
    width: unset;
    height: unset;
    content: url(../img/inner-pages/svg/arrow-svg.svg);
    position: absolute;
    font-family: bootstrap-icons;
    background-image: none;
    font-weight: 800;
    font-size: 17px;
    transform: rotate(0deg);
    border-bottom: unset;
    border-right: unset;
    right: 20px;
    top: 12px;
    transition: 0.3s;
}

.rating-modal .modal-dialog .modal-content .modal-body .order-history-wrap .nice-select.open::before {
    transform: rotate(180deg);
}

.daterangepicker td.start-date.end-date {
    border-radius: 50%;
}

.daterangepicker .drp-calendar {
    min-width: 270px;
}

.daterangepicker .calendar-table th {
    padding: 4px;
    color: #aaa;
}

.daterangepicker .calendar-table th.month {
    color: var(--title-color);
    font-size: 14px;
}

.daterangepicker .calendar-table td {
    border-radius: 50%;
    padding: 5px;
    font-size: 13px;
    font-family: var(--font-Hanken-Grotesk);
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--primary-color1);
}

.daterangepicker .monthselect {
    outline: none;
}

.daterangepicker td.active {
    background-color: #B48DFF;
}

.daterangepicker button {
    outline: none;
}

.daterangepicker .btn-primary {
    background-color: #B48DFF;
    border-color: #B48DFF;
}

.daterangepicker.single td.active,
.daterangepicker.single td.active:hover {
    background-color: var(--primary-color1);
    color: var(--title-color);
}

.daterangepicker.single .monthselect {
    outline: none;
}

.daterangepicker.single button {
    outline: none;
}

.daterangepicker.single .btn-primary {
    background-color: var(--primary-color1);
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    border-color: var(--primary-color1);
}

/*========================================
  55. inner-page Blog Details Start CSS
==========================================*/

.blog-details-page .blog-details-top-area .blog-details-top-img-grp {
    margin-bottom: 42px;
}

@media (max-width: 1199px) {
    .blog-details-page .blog-details-top-area .blog-details-top-img-grp {
        margin-bottom: 40px;
    }
}

@media (max-width: 767px) {
    .blog-details-page .blog-details-top-area .blog-details-top-img-grp {
        margin-bottom: 30px;
    }
}

@media (max-width: 576px) {
    .blog-details-page .blog-details-top-area .blog-details-top-img-grp {
        margin-bottom: 25px;
    }
}

.blog-details-page .blog-details-top-area .blog-details-top-img-grp img {
    border-radius: 15px;
    -o-object-fit: cover;
    object-fit: cover;
}

.blog-details-page .blog-details-top-area .blog-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 23px;
}

@media (max-width: 767px) {
    .blog-details-page .blog-details-top-area .blog-meta {
        margin-bottom: 20px;
    }
}

.blog-details-page .blog-details-top-area .blog-meta li {
    color: rgba(var(--title-color-opc), 0.5);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.3px;
    margin-right: 50px;
    display: flex;
    align-items: center;
    position: relative;
    transition: 0.25s ease;
}

@media (max-width: 991px) {
    .blog-details-page .blog-details-top-area .blog-meta li {
        margin-right: 35px;
    }
}

@media (max-width: 767px) {
    .blog-details-page .blog-details-top-area .blog-meta li {
        margin-right: 25px;
    }
}

@media (max-width: 576px) {
    .blog-details-page .blog-details-top-area .blog-meta li {
        margin-right: 20px;
        font-size: 12px;
        line-height: 1.2;
    }
}

.blog-details-page .blog-details-top-area .blog-meta li svg {
    margin-right: 8px;
    fill: rgba(var(--title-color-opc), 0.5);
    transition: 0.5s;
}

@media (max-width: 767px) {
    .blog-details-page .blog-details-top-area .blog-meta li svg {
        width: 14px;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    .blog-details-page .blog-details-top-area .blog-meta li svg {
        margin-right: 5px;
    }
}

@media (max-width: 576px) {
    .blog-details-page .blog-details-top-area .blog-meta li svg {
        margin-right: 5px;
    }
}

.blog-details-page .blog-details-top-area .blog-meta li a {
    color: rgba(var(--title-color-opc), 0.5);
    transition: 0.5s;
}

.blog-details-page .blog-details-top-area .blog-meta li:hover a {
    color: var(--primary-color3);
}

.blog-details-page .blog-details-top-area .blog-meta li:hover a svg {
    fill: var(--primary-color3);
}

.blog-details-page .blog-details-top-area .blog-meta li::before {
    content: "";
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 10px;
    line-height: 5px;
    background-color: var(--primary-color4);
    border-radius: 4px;
}

@media (max-width: 991px) {
    .blog-details-page .blog-details-top-area .blog-meta li::before {
        right: -18px;
    }
}

@media (max-width: 767px) {
    .blog-details-page .blog-details-top-area .blog-meta li::before {
        right: -14px;
    }
}

@media (max-width: 576px) {
    .blog-details-page .blog-details-top-area .blog-meta li::before {
        right: -11px;
    }
}

.blog-details-page .blog-details-top-area .blog-meta li:last-child {
    margin-right: 0;
}

.blog-details-page .blog-details-top-area .blog-meta li:last-child::before {
    display: none;
    visibility: hidden;
}

.blog-details-page .blog-details-top-area h2 {
    color: var(--title-color);
    font-family: var(--font-Almarai);
    font-size: 45px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 30px;
}

@media (max-width: 1399px) {
    .blog-details-page .blog-details-top-area h2 {
        margin-bottom: 30px;
    }
}

@media (max-width: 1199px) {
    .blog-details-page .blog-details-top-area h2 {
        font-size: 37px;
        margin-bottom: 25px;
    }
}

@media (max-width: 991px) {
    .blog-details-page .blog-details-top-area h2 {
        font-size: 38px;
        margin-bottom: 25px;
    }
}

@media (max-width: 767px) {
    .blog-details-page .blog-details-top-area h2 {
        font-size: 30px;
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {
    .blog-details-page .blog-details-top-area h2 {
        font-size: 29px;
        margin-bottom: 20px;
    }
}

.blog-details-page .blog-details-top-area .author-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.blog-details-page .blog-details-top-area .author-area .author-img img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.blog-details-page .blog-details-top-area .author-area .author-content h3 {
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 0;
}

.blog-details-page .blog-details-top-area .author-area .author-content h3 a {
    font-family: var(--font-Hanken-Grotesk);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    color: var(--primary-color3);
    text-decoration: underline;
    transition: 0.5s;
}

.blog-details-page .blog-details-top-area .author-area .author-content h3 a:hover {
    color: var(--title-color);
}

.blog-details-page .details-content-wrapper .second-para {
    margin-bottom: 30px;
}

@media (max-width: 1199px) {
    .blog-details-page .details-content-wrapper .second-para {
        margin-bottom: 25px;
    }
}

@media (max-width: 991px) {
    .blog-details-page .details-content-wrapper .second-para {
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {
    .blog-details-page .details-content-wrapper .second-para {
        margin-bottom: 15px;
    }
}

.blog-details-page .details-content-wrapper .third-para {
    margin-bottom: 45px;
}

@media (max-width: 1199px) {
    .blog-details-page .details-content-wrapper .third-para {
        margin-bottom: 40px;
    }
}

@media (max-width: 576px) {
    .blog-details-page .details-content-wrapper .third-para {
        margin-bottom: 30px;
    }
}

.blog-details-page .details-content-wrapper .fourth-para {
    margin-bottom: 30px;
}

@media (max-width: 576px) {
    .blog-details-page .details-content-wrapper .fourth-para {
        margin-bottom: 20px;
    }
}

.blog-details-page .details-content-wrapper ul {
    padding: 0;
    margin: 0;
    list-style: none;
    -moz-columns: 2;
    columns: 2;
    margin-bottom: 50px;
}

@media (max-width: 767px) {
    .blog-details-page .details-content-wrapper ul {
        margin-bottom: 35px;
    }
}

@media (max-width: 576px) {
    .blog-details-page .details-content-wrapper ul {
        -moz-columns: unset;
        columns: unset;
        margin-bottom: 30px;
    }
}

.blog-details-page .details-content-wrapper ul li {
    color: rgba(var(--title-color-opc), 0.7);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.34px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

@media (max-width: 1199px) {
    .blog-details-page .details-content-wrapper ul li {
        font-size: 14px;
    }
}

@media (max-width: 991px) {
    .blog-details-page .details-content-wrapper ul li {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .blog-details-page .details-content-wrapper ul li {
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    .blog-details-page .details-content-wrapper ul li {
        font-size: 15px;
        margin-bottom: 15px;
    }
}

.blog-details-page .details-content-wrapper ul li:last-child {
    margin-bottom: 0;
}

.blog-details-page .details-content-wrapper ul li svg {
    fill: var(--primary-color3);
}

.blog-details-page .details-content-wrapper ul.style-2 {
    -moz-columns: unset;
    columns: unset;
    padding-left: 18px;
    list-style: disc;
}

.blog-details-page .details-content-wrapper ul.style-2 li {
    color: var(--text-color);
    line-height: 30px;
    display: list-item;
    font-size: 17px;
}

@media (max-width: 576px) {
    .blog-details-page .details-content-wrapper ul.style-2 li {
        font-size: 15px;
    }
}

.blog-details-page .details-content-wrapper .blog-details-img-grp {
    margin-bottom: 51px;
}

@media (max-width: 1199px) {
    .blog-details-page .details-content-wrapper .blog-details-img-grp {
        margin-bottom: 40px;
    }
}

@media (max-width: 991px) {
    .blog-details-page .details-content-wrapper .blog-details-img-grp {
        margin-bottom: 35px;
    }
}

@media (max-width: 767px) {
    .blog-details-page .details-content-wrapper .blog-details-img-grp {
        margin-bottom: 30px;
    }
}

@media (max-width: 576px) {
    .blog-details-page .details-content-wrapper .blog-details-img-grp {
        margin-bottom: 25px;
    }
}

.blog-details-page .details-content-wrapper .blog-details-img-grp img {
    border-radius: 15px;
}

.blog-details-page .tag-and-social-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
}

@media (max-width: 1199px) {
    .blog-details-page .tag-and-social-area {
        padding-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .blog-details-page .tag-and-social-area {
        padding-bottom: 15px;
    }
}

@media (max-width: 576px) {
    .blog-details-page .tag-and-social-area {
        padding-bottom: 20px;
    }
}

.blog-details-page .tag-and-social-area .tag-list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .blog-details-page .tag-and-social-area .tag-list {
        gap: 5px;
    }
}

@media (max-width: 576px) {
    .blog-details-page .tag-and-social-area .tag-list {
        gap: 8px;
    }
}

.blog-details-page .tag-and-social-area .tag-list li a {
    color: rgba(var(--title-color-opc), 0.5);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    transition: 0.5s;
}

.blog-details-page .tag-and-social-area .tag-list li a:hover {
    color: var(--primary-color1);
}

.blog-details-page .tag-and-social-area .social-area {
    display: flex;
    align-items: center;
    gap: 15px;
}

@media (max-width: 767px) {
    .blog-details-page .tag-and-social-area .social-area {
        gap: 10px;
    }
}

@media (max-width: 576px) {
    .blog-details-page .tag-and-social-area .social-area {
        gap: 15px;
    }
}

.blog-details-page .tag-and-social-area .social-area h3 {
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 0;
}

.blog-details-page .tag-and-social-area .social-area .social-link {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 28px;
    line-height: 1;
}

@media (min-width: 576px) and (max-width: 768px) {
    .blog-details-page .tag-and-social-area .social-area .social-link {
        gap: 14px;
    }
}

.blog-details-page .tag-and-social-area .social-area .social-link li a i {
    font-size: 18px;
    color: rgba(var(--title-color-opc), 0.4);
    transition: 0.5s;
}

.blog-details-page .tag-and-social-area .social-area .social-link li a i.bi-twitter-x {
    font-size: 15px;
}

.blog-details-page .tag-and-social-area .social-area .social-link li a:hover i {
    color: var(--primary-color1);
}

.blog-details-page .comment-area .title {
    margin-bottom: 55px;
}

@media (max-width: 991px) {
    .blog-details-page .comment-area .title {
        margin-bottom: 45px;
    }
}

.blog-details-page .comment-area .title h3 {
    color: var(--title-color);
    font-family: var(--font-Almarai);
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1;
    text-decoration: underline;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

@media (max-width: 576px) {
    .blog-details-page .comment-area .title h3 {
        font-size: 25px;
    }
}

.blog-details-page .comment-area .comment {
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-details-page .comment-area .comment>li {
    padding-bottom: 35px;
    margin-bottom: 35px;
    border-bottom: 1px solid rgba(var(--black-color-opc), 0.1);
}

.blog-details-page .comment-area .comment>li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: unset;
}

.blog-details-page .comment-area .comment .single-comment-area {
    display: flex;
    align-items: flex-start;
    gap: 26px;
}

@media (max-width: 576px) {
    .blog-details-page .comment-area .comment .single-comment-area {
        flex-direction: column;
    }
}

.blog-details-page .comment-area .comment .single-comment-area .author-img img {
    max-width: 100px;
    min-width: 100px;
    height: 100px;
    border-radius: 20px;
}

@media (max-width: 576px) {
    .blog-details-page .comment-area .comment .single-comment-area .author-img img {
        max-width: 70px;
        min-width: 70px;
        height: 70px;
        border-radius: 10px;
    }
}

.blog-details-page .comment-area .comment .single-comment-area .comment-content .author-name-date {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .blog-details-page .comment-area .comment .single-comment-area .comment-content .author-name-date {
        margin-bottom: 15px;
    }
}

@media (max-width: 576px) {
    .blog-details-page .comment-area .comment .single-comment-area .comment-content .author-name-date {
        margin-bottom: 10px;
    }
}

.blog-details-page .comment-area .comment .single-comment-area .comment-content .author-name-date h4 {
    line-height: 1;
    margin-bottom: 0;
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 24px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .blog-details-page .comment-area .comment .single-comment-area .comment-content .author-name-date h4 {
        font-size: 22px;
    }
}

@media (max-width: 576px) {
    .blog-details-page .comment-area .comment .single-comment-area .comment-content .author-name-date h4 {
        font-size: 20px;
    }
}

.blog-details-page .comment-area .comment .single-comment-area .comment-content .author-name-date span {
    color: rgba(var(--title-color-opc), 0.5);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
}

.blog-details-page .comment-area .comment .single-comment-area .comment-content p {
    color: rgba(var(--title-color-opc), 0.5);
    line-height: 1.8;
    margin-bottom: 38px;
}

@media (max-width: 576px) {
    .blog-details-page .comment-area .comment .single-comment-area .comment-content p {
        font-size: 15px;
        margin-bottom: 20px;
    }
}

.blog-details-page .comment-area .comment .single-comment-area .comment-content .replay-btn {
    display: inline-block;
    padding: 10px 26px;
    border: 1px solid var(--primary-color4);
    border-radius: 100px;
    line-height: 1;
    cursor: pointer;
    transition: 0.35s;
}

.blog-details-page .comment-area .comment .single-comment-area .comment-content .replay-btn svg {
    transition: 0.35s;
    fill: var(--primary-color4);
}

.blog-details-page .comment-area .comment .single-comment-area .comment-content .replay-btn .details-button {
    transition: 0.5s;
    position: relative;
    display: inline-block;
    vertical-align: top;
    line-height: 1;
    text-decoration: none;
    outline: none;
    padding: 0 1.375em 0.0625em 0;
    cursor: pointer;
    background-color: transparent;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: var(--background-size, 100%) 0.0625em;
    transition: background-size 0.2s linear var(--background-delay, 0.15s);
    border: none;
    background-image: linear-gradient(0deg, var(--primary-color4) 0%, var(--primary-color4) 100%);
    color: var(--primary-color4);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

.blog-details-page .comment-area .comment .single-comment-area .comment-content .replay-btn .details-button::after {
    content: "\f123";
    font-family: "bootstrap-icons";
    display: block;
    position: absolute;
    right: 0;
    left: initial;
    top: 0;
    opacity: 1;
    transition: opacity 0.3s 0.15s;
    color: var(--primary-color4);
}

.blog-details-page .comment-area .comment .single-comment-area .comment-content .replay-btn .details-button svg {
    position: absolute;
    display: block;
    line-height: 1.8125em;
    width: 1.375em;
    height: 1.8125em;
    right: 0;
    left: initial;
    top: 50%;
    margin: -0.92em 0 0;
    fill: none;
    stroke: var(--primary-color4);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1px;
    stroke-dasharray: 7.95 30;
    stroke-dashoffset: var(--stroke-dashoffset, 46);
    transition: stroke-dashoffset var(--stroke-duration, 0.15s) var(--stroke-easing, linear) var(--stroke-delay, 0s);
}

.blog-details-page .comment-area .comment .single-comment-area .comment-content .replay-btn:hover {
    background-color: var(--primary-color4);
}

.blog-details-page .comment-area .comment .single-comment-area .comment-content .replay-btn:hover .details-button {
    --background-size: 0%;
    --stroke-dashoffset: 26;
    --stroke-duration: .3s;
    --stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
    --stroke-delay: .195s;
    background-image: linear-gradient(0deg, #fff 0%, #fff 100%);
}

.blog-details-page .comment-area .comment .single-comment-area .comment-content .replay-btn:hover .details-button svg {
    stroke: var(--white-color);
}

.blog-details-page .comment-area .comment .single-comment-area .comment-content .replay-btn:hover .details-button {
    color: var(--white-color);
}

.blog-details-page .comment-area .comment .single-comment-area .comment-content .replay-btn:hover .details-button::after {
    opacity: 0;
    transition-delay: 0s;
    color: var(--white-color);
}

.blog-details-page .comment-area .contact-form-area {
    background: unset;
    border: unset;
    padding: unset;
    padding-top: 120px;
}

@media (max-width: 1199px) {
    .blog-details-page .comment-area .contact-form-area {
        padding-top: 90px;
    }
}

@media (max-width: 991px) {
    .blog-details-page .comment-area .contact-form-area {
        padding-top: 70px;
    }
}

.blog-details-page .comment-area .contact-form-area .contact-form {
    background: #FAF8FB;
    padding: 45px;
    border-radius: 30px;
}

@media (max-width: 1199px) {
    .blog-details-page .comment-area .contact-form-area .contact-form {
        padding: 45px 40px;
    }
}

@media (max-width: 767px) {
    .blog-details-page .comment-area .contact-form-area .contact-form {
        padding: 45px 30px;
    }
}

@media (max-width: 576px) {
    .blog-details-page .comment-area .contact-form-area .contact-form {
        padding: 40px 15px;
        border-radius: 10px;
    }
}

.blog-details-page .comment-area .contact-form-area .contact-form .form-inner input,
.blog-details-page .comment-area .contact-form-area .contact-form .form-inner textarea {
    border-color: rgba(var(--black-color-opc), 0.2);
    background-color: transparent;
}

.blog-details-page .comment-area .contact-form-area .contact-form .form-inner input:focus,
.blog-details-page .comment-area .contact-form-area .contact-form .form-inner textarea:focus {
    border-color: var(--black-color);
}

.blog-details-page .comment-area .contact-form-area .contact-form .form-inner textarea {
    min-height: 90px;
}

.blog-details-page .comment-area .contact-form-area .contact-form .form-inner2 input[type=checkbox]:checked {
    background-color: var(--primary-color1);
    border: unset;
}

.blog-details-page .comment-area .contact-form-area .contact-form .primary-btn1 {
    border: unset;
    font-size: 14px;
    padding: 19px 37px;
}

.blog-details-page .comment-area .contact-form-area .contact-form .primary-btn1:hover {
    color: var(--title-color);
}

.blog-details-page .comment-area .contact-form-area .contact-form .primary-btn1::after {
    background-color: var(--primary-color1);
}

h2 {
    font-family: var(--font-Almarai);
    color: var(--title-color);
    font-weight: 700;
    font-size: 35px;
    line-height: 1.2;
    text-transform: capitalize;
    margin-bottom: 11px;
}

@media (max-width: 1399px) {
    h2 {
        font-size: 33px;
    }
}

@media (max-width: 1199px) {
    h2 {
        font-size: 30px;
        margin-bottom: 10px;
    }
}

@media (max-width: 767px) {
    h2 {
        font-size: 27px;
    }
}

@media (max-width: 576px) {
    h2 {
        font-size: 24px;
        margin-bottom: 8px;
    }
}

p {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--title-color-opc), 0.6);
    font-weight: 400;
    font-size: 17px;
    line-height: 38px;
}

@media (max-width: 991px) {
    p {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    p {
        line-height: 2;
    }
}

@media (max-width: 576px) {
    p {
        font-size: 15px;
    }
}

/*========================================
  56. Home3 Service Process Start CSS
==========================================*/

.home3-service-process-section {
    padding: 120px 0;
}

@media (max-width: 1199px) {
    .home3-service-process-section {
        padding: 100px 0;
    }
}

@media (max-width: 991px) {
    .home3-service-process-section {
        padding: 90px 0;
    }
}

.home3-service-process-section .section-title {
    margin-bottom: 50px;
    margin-left: 10px;
}

@media (max-width: 1199px) {
    .home3-service-process-section .section-title {
        margin-left: 0;
    }
}

@media (max-width: 991px) {
    .home3-service-process-section .section-title {
        margin-bottom: 35px;
    }
}

.home3-service-process-section .service-process-video-wrap {
    background: linear-gradient(180deg, rgba(11, 12, 12, 0.4) 0%, rgba(11, 12, 12, 0.4) 100%), url(../img/home3/service-process-left-area-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    padding: 295px 0;
}

@media (max-width: 1199px) {
    .home3-service-process-section .service-process-video-wrap {
        padding: 250px 0;
    }
}

@media (max-width: 991px) {
    .home3-service-process-section .service-process-video-wrap {
        padding: 210px 0;
    }
}

@media (max-width: 576px) {
    .home3-service-process-section .service-process-video-wrap {
        padding: 150px 0;
        border-radius: 15px;
    }
}

.home3-service-process-section .service-process-video-wrap .video-and-content {
    text-align: center;
}

.home3-service-process-section .service-process-video-wrap .video-and-content h2 {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--white-color);
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 18px;
}

@media (max-width: 576px) {
    .home3-service-process-section .service-process-video-wrap .video-and-content h2 {
        font-size: 14px;
        margin-bottom: 15px;
    }
}

.home3-service-process-section .home3-process-wrap {
    position: relative;
    height: 600px;
    overflow-y: scroll;
    margin-left: 25px;
}

@media (max-width: 1199px) {
    .home3-service-process-section .home3-process-wrap {
        margin-left: 0;
    }
}

@media (max-width: 576px) {
    .home3-service-process-section .home3-process-wrap {
        height: 505px;
    }
}

.home3-service-process-section .home3-process-wrap .single-process {
    position: relative;
    margin-bottom: 40px;
}

@media (max-width: 1199px) {
    .home3-service-process-section .home3-process-wrap .single-process {
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {
    .home3-service-process-section .home3-process-wrap .single-process {
        margin-bottom: 15px;
    }
}

.home3-service-process-section .home3-process-wrap .single-process .step-number>span {
    padding: 6px 29px;
    background-color: var(--black-color);
    margin: 0;
}

@media (max-width: 576px) {
    .home3-service-process-section .home3-process-wrap .single-process .step-number>span {
        padding: 6px 10px;
    }
}

.home3-service-process-section .home3-process-wrap .single-process .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--primary-color3);
    display: block;
    margin-top: 20px;
    margin-left: 48px;
    position: relative;
    z-index: 2;
}

@media (max-width: 576px) {
    .home3-service-process-section .home3-process-wrap .single-process .dot {
        margin-top: 10px;
        margin-left: 25px;
    }
}

.home3-service-process-section .home3-process-wrap .single-process .dot::before {
    content: "";
    background: rgba(var(--title-color-opc), 0.1);
    width: 100%;
    height: 1px;
    position: absolute;
    border-radius: 50%;
    left: 13px;
    top: 8px;
    z-index: -1;
    transform: translateY(-50%);
    min-width: 588px;
}

@media (max-width: 576px) {
    .home3-service-process-section .home3-process-wrap .single-process .dot::before {
        top: 8px;
    }
}

.home3-service-process-section .home3-process-wrap .single-process .process-content-wrapper {
    margin: 13px 0 0 108px;
}

@media (max-width: 1199px) {
    .home3-service-process-section .home3-process-wrap .single-process .process-content-wrapper {
        margin: 20px 0 0 98px;
    }
}

@media (max-width: 576px) {
    .home3-service-process-section .home3-process-wrap .single-process .process-content-wrapper {
        margin: 20px 0 0 60px;
    }
}

.home3-service-process-section .home3-process-wrap .single-process .process-content-wrapper .process-content h3 {
    font-family: var(--font-Hanken-Grotesk);
    color: var(--black-color);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.1;
    text-transform: capitalize;
    margin-bottom: 12px;
}

@media (max-width: 1399px) {
    .home3-service-process-section .home3-process-wrap .single-process .process-content-wrapper .process-content h3 {
        font-size: 28px;
    }
}

@media (max-width: 1199px) {
    .home3-service-process-section .home3-process-wrap .single-process .process-content-wrapper .process-content h3 {
        font-size: 26px;
        margin-bottom: 8px;
    }
}

@media (max-width: 576px) {
    .home3-service-process-section .home3-process-wrap .single-process .process-content-wrapper .process-content h3 {
        font-size: 20px;
        margin-bottom: 5px;
    }
}

.home3-service-process-section .home3-process-wrap .single-process .process-content-wrapper .process-content p {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--black-color-opc), 0.8);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    max-width: 312px;
}

@media (max-width: 576px) {
    .home3-service-process-section .home3-process-wrap .single-process .process-content-wrapper .process-content p {
        margin-bottom: 15px;
    }
}

.home3-service-process-section .home3-process-wrap .line {
    fill: none;
    stroke: rgba(var(--title-color-opc), 0.15);
    position: absolute;
    top: 69px;
    z-index: 1;
    left: 54px;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .home3-service-process-section .home3-process-wrap .line {
        left: 55px;
    }
}

@media (max-width: 576px) {
    .home3-service-process-section .home3-process-wrap .line {
        top: 50px;
        left: 32px;
    }
}

.home3-service-process-section .home3-process-wrap::-webkit-scrollbar {
    width: 0;
}

/*========================================
  57. inner-page Checkout Start CSS
==========================================*/

.checkout-page .checkout-form-wrapper .checkout-form-title {
    margin-bottom: 30px;
}

.checkout-page .checkout-form-wrapper .checkout-form-title h2 {
    margin-bottom: 0;
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 30px;
    font-weight: 600;
}

@media (max-width: 1199px) {
    .checkout-page .checkout-form-wrapper .checkout-form-title h2 {
        font-size: 28px;
    }
}

@media (max-width: 576px) {
    .checkout-page .checkout-form-wrapper .checkout-form-title h2 {
        font-size: 26px;
    }
}

.checkout-page .checkout-form-wrapper .checkout-form {
    border-radius: 10px;
    border: 1px solid rgba(var(--title-color-opc), 0.1);
    padding: 45px 35px 50px;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .checkout-page .checkout-form-wrapper .checkout-form {
        padding: 40px 25px 45px;
    }
}

@media (max-width: 991px) {
    .checkout-page .checkout-form-wrapper .checkout-form {
        padding: 45px 35px 44px;
    }
}

@media (max-width: 767px) {
    .checkout-page .checkout-form-wrapper .checkout-form {
        padding: 30px 20px;
    }
}

@media (max-width: 576px) {
    .checkout-page .checkout-form-wrapper .checkout-form {
        padding: 30px 15px;
    }
}

.checkout-page .checkout-form-wrapper .checkout-form .form-inner2 .form-check-input:checked {
    background-color: var(--primary-color1);
    border-color: var(--primary-color1);
}

.checkout-page .cart-menu {
    min-height: 10rem;
    z-index: 99;
    transform-origin: top;
}

.checkout-page .cart-body ul {
    padding: 0;
    list-style: none;
    margin-bottom: 50px;
}

.checkout-page .cart-body ul .single-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.checkout-page .cart-body ul .single-item:last-child {
    margin-bottom: 0;
}

.checkout-page .cart-body ul .single-item .item-area {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    width: 100%;
}

.checkout-page .cart-body ul .single-item .item-area .close-btn {
    transition: 0.35s;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--black-color);
}

.checkout-page .cart-body ul .single-item .item-area .close-btn i {
    color: var(--white-color);
    line-height: 1;
    font-size: 20px;
    height: 18px;
    width: 19px;
    transition: 0.35s;
}

.checkout-page .cart-body ul .single-item .item-area .close-btn:hover {
    background-color: var(--primary-color1);
}

.checkout-page .cart-body ul .single-item .item-area .close-btn:hover i {
    color: var(--title-color);
}

.checkout-page .cart-body ul .single-item .item-area .main-item {
    display: flex;
    gap: 15px;
    width: 100%;
}

@media (max-width: 767px) {
    .checkout-page .cart-body ul .single-item .item-area .main-item {
        gap: 12px;
    }
}

.checkout-page .cart-body ul .single-item .item-area .main-item .item-img {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.checkout-page .cart-body ul .single-item .item-area .main-item .item-img img {
    height: 90px;
    max-width: 90px;
    min-width: 90px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 5px;
}

@media (max-width: 767px) {
    .checkout-page .cart-body ul .single-item .item-area .main-item .item-img img {
        -o-object-fit: cover;
        object-fit: cover;
    }
}

.checkout-page .cart-body ul .single-item .item-area .main-item .content-and-quantity {
    width: 100%;
}

.checkout-page .cart-body ul .single-item .item-area .main-item .content {
    line-height: 1;
    margin-bottom: 10px;
}

.checkout-page .cart-body ul .single-item .item-area .main-item .content span {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-color);
    display: inline-block;
}

.checkout-page .cart-body ul .single-item .item-area .main-item .content h3 {
    margin-bottom: 0;
    line-height: 1;
}

.checkout-page .cart-body ul .single-item .item-area .main-item .content h3 a {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    color: var(--title-color);
    transition: 0.5s;
}

@media (max-width: 767px) {
    .checkout-page .cart-body ul .single-item .item-area .main-item .content h3 a {
        font-size: 14px;
    }
}

.checkout-page .cart-body ul .single-item .item-area .main-item .content h3 a:hover {
    color: var(--primary-color1);
}

.checkout-page .cart-body ul .single-item .quantity-area .quantity {
    display: flex;
    gap: 5px;
}

.checkout-page .cart-body ul .single-item .quantity-area .quantity a {
    height: 24px;
    width: 34px;
    border-radius: 4px;
    background: rgba(var(--black-color-opc), 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--title-color);
    font-weight: 600;
    cursor: pointer;
    transition: 0.35s;
}

.checkout-page .cart-body ul .single-item .quantity-area .quantity a i {
    color: var(--title-color);
    transition: 0.35s;
}

.checkout-page .cart-body ul .single-item .quantity-area .quantity a:hover {
    background: var(--primary-color1);
    border-color: var(--primary-color1);
    color: var(--white-color);
}

.checkout-page .cart-body ul .single-item .quantity-area .quantity a:hover i {
    color: var(--title-color);
}

.checkout-page .cart-body ul .single-item .quantity-area .quantity input {
    height: 24px;
    width: 34px;
    border-radius: 4px;
    border: 1px solid rgba(var(--black-color-opc), 0.3);
    background-color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-Hanken-Grotesk);
    font-size: 14px;
    color: var(--title-color);
    font-weight: 600;
    text-align: center;
}

.checkout-page .cart-footer {
    justify-content: flex-start;
    padding: 0;
    border-top: 1px solid var(--borders-color);
}

.checkout-page .cart-footer .pricing-area {
    width: 100%;
}

.checkout-page .cart-footer .pricing-area ul {
    margin: 0;
    list-style: none;
    border-bottom: 1px solid var(--borders-color);
    width: 100%;
    padding: 10px 0px 10px;
}

.checkout-page .cart-footer .pricing-area ul:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 30px;
}

.checkout-page .cart-footer .pricing-area ul li {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 16px;
    color: var(--title-color);
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.checkout-page .cart-footer .pricing-area ul.total li {
    font-size: 18px;
    font-weight: 700;
}

.checkout-page .cart-footer .primary-btn2 {
    width: 100%;
    justify-content: center;
}

.checkout-page .choose-payment-method {
    margin-bottom: 40px;
    line-height: 1;
}

.checkout-page .choose-payment-method h4 {
    margin-bottom: 10px;
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 17px;
    font-weight: 600;
}

.checkout-page .choose-payment-method .payment-option {
    line-height: 1;
}

.checkout-page .choose-payment-method .payment-option ul {
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

@media (max-width: 1199px) {
    .checkout-page .choose-payment-method .payment-option ul {
        gap: 15px;
    }
}

@media (max-width: 991px) {
    .checkout-page .choose-payment-method .payment-option ul {
        gap: 20px;
    }
}

.checkout-page .choose-payment-method .payment-option ul li {
    width: 110px;
    height: 68px;
    background-color: var(--white-color);
    border: 1px solid rgba(var(--title-color-opc), 0.1);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

@media (max-width: 1199px) {
    .checkout-page .choose-payment-method .payment-option ul li {
        width: 97px;
    }
}

@media (max-width: 991px) {
    .checkout-page .choose-payment-method .payment-option ul li {
        width: 110px;
    }
}

.checkout-page .choose-payment-method .payment-option ul li .checked {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    background: rgba(var(--primary-color1-opc), 0.15);
    clip-path: polygon(0 0, 0% 100%, 100% 0);
    border-top-left-radius: 5px;
}

.checkout-page .choose-payment-method .payment-option ul li .checked i {
    opacity: 0;
    color: var(--white-color);
    margin-left: 2px;
}

.checkout-page .choose-payment-method .payment-option ul li.active .checked {
    background: var(--primary-color1);
}

.checkout-page .choose-payment-method .payment-option ul li.active .checked i {
    opacity: 1;
}

.checkout-page .primary-btn1 {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 22px 26px;
}

.checkout-page .primary-btn1 span {
    text-align: center;
}

.checkout-page .primary-btn1 span:nth-child(2) {
    padding-left: 0;
}

/*========================================
  58. inner-page Terms & Condition Start CSS
==========================================*/

.terms-and-conditions-page .terms-and-conditions-top-area .tag {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border: 1px solid rgba(var(--title-color-opc), 0.1);
    border-radius: 10px;
    max-width: 309px;
    margin: 0 auto 35px;
}

.terms-and-conditions-page .terms-and-conditions-top-area .tag h2 {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    margin-bottom: 0;
    color: var(--title-color);
}

.terms-and-conditions-page .terms-and-conditions-top-area .tag svg {
    fill: rgba(var(--title-color-opc), 0.2);
}

.terms-and-conditions-page .terms-and-conditions-top-area .tag span {
    color: rgba(var(--title-color-opc), 0.6);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
}

.terms-and-conditions-page .terms-and-conditions-top-area p {
    color: rgba(var(--title-color-opc), 0.6);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    .terms-and-conditions-page .terms-and-conditions-top-area p {
        font-size: 17px;
    }
}

@media (max-width: 576px) {
    .terms-and-conditions-page .terms-and-conditions-top-area p {
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .terms-and-conditions-page .line {
        display: none;
    }
}

.terms-and-conditions-page .line svg {
    fill: rgba(var(--title-color-opc), 0.1);
    width: 100%;
}

.terms-and-conditions-page .terms-conditions-content-wrap {
    padding-top: 70px;
}

@media (max-width: 1199px) {
    .terms-and-conditions-page .terms-conditions-content-wrap {
        padding-top: 50px;
    }
}

@media (max-width: 767px) {
    .terms-and-conditions-page .terms-conditions-content-wrap {
        padding-top: 40px;
    }
}

@media (max-width: 576px) {
    .terms-and-conditions-page .terms-conditions-content-wrap {
        padding-top: 15px;
    }
}

.terms-and-conditions-page .terms-conditions-content-wrap .single-conditions h3 {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 28px;
    line-height: 1;
    margin-bottom: 20px;
}

@media (max-width: 991px) {
    .terms-and-conditions-page .terms-conditions-content-wrap .single-conditions h3 {
        font-size: 26px;
        margin-bottom: 15px;
    }
}

@media (max-width: 576px) {
    .terms-and-conditions-page .terms-conditions-content-wrap .single-conditions h3 {
        font-size: 25px;
    }
}

.terms-and-conditions-page .terms-conditions-content-wrap .single-conditions p {
    color: rgba(var(--title-color-opc), 0.6);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .terms-and-conditions-page .terms-conditions-content-wrap .single-conditions p {
        font-size: 17px;
    }
}

@media (max-width: 576px) {
    .terms-and-conditions-page .terms-conditions-content-wrap .single-conditions p {
        font-size: 16px;
    }
}

.terms-and-conditions-page .terms-conditions-content-wrap .single-conditions ul {
    padding-left: 18px;
    margin: 0;
}

.terms-and-conditions-page .terms-conditions-content-wrap .single-conditions ul li {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    color: rgba(var(--title-color-opc), 0.6);
    margin-bottom: 20px;
}

@media (max-width: 576px) {
    .terms-and-conditions-page .terms-conditions-content-wrap .single-conditions ul li {
        font-size: 16px;
    }
}

.terms-and-conditions-page .terms-conditions-content-wrap .single-conditions ul li span {
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
}

@media (max-width: 576px) {
    .terms-and-conditions-page .terms-conditions-content-wrap .single-conditions ul li span {
        font-size: 16px;
    }
}

.terms-and-conditions-page .terms-conditions-content-wrap .single-conditions ul li:last-child {
    margin-bottom: 0;
}

.terms-and-conditions-page .terms-conditions-content-wrap .single-conditions span {
    color: rgba(var(--title-color-opc), 0.6);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
}

.terms-and-conditions-page .terms-conditions-content-wrap .single-conditions span a {
    color: var(--primary-color1);
    transition: all 0.5s;
}

.terms-and-conditions-page .terms-conditions-content-wrap .single-conditions span a:hover {
    color: var(--title-color);
}

.terms-and-conditions-page .terms-conditions-content-wrap .single-conditions .contact {
    padding-top: 30px;
}

.terms-and-conditions-page .terms-conditions-content-wrap .single-conditions .contact a {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 18px;
    color: var(--primary-color1);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.5s;
    line-height: 1;
    margin-bottom: 15px;
}

.terms-and-conditions-page .terms-conditions-content-wrap .single-conditions .contact a:hover {
    color: var(--title-color);
}

.terms-and-conditions-page .terms-conditions-content-wrap .single-conditions .contact a:hover svg {
    fill: var(--title-color);
}

.terms-and-conditions-page .terms-conditions-content-wrap .single-conditions .contact a svg {
    fill: rgba(var(--title-color-opc), 0.6);
    transition: all 0.5s;
}

.terms-and-conditions-page .terms-conditions-content-wrap .notes-area {
    padding: 40px 58px;
    border-radius: 20px;
    background-color: #C6EDD4;
}

@media (max-width: 991px) {
    .terms-and-conditions-page .terms-conditions-content-wrap .notes-area {
        padding: 40px 30px;
        border-radius: 15px;
    }
}

@media (max-width: 576px) {
    .terms-and-conditions-page .terms-conditions-content-wrap .notes-area {
        padding: 30px 10px;
        border-radius: 10px;
    }
}

.terms-and-conditions-page .terms-conditions-content-wrap .notes-area .tag-and-icon {
    display: flex;
    align-items: center;
    gap: 15px;
}

.terms-and-conditions-page .terms-conditions-content-wrap .notes-area .tag-and-icon h3 {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 28px;
    line-height: 1;
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .terms-and-conditions-page .terms-conditions-content-wrap .notes-area .tag-and-icon h3 {
        font-size: 26px;
    }
}

@media (max-width: 576px) {
    .terms-and-conditions-page .terms-conditions-content-wrap .notes-area .tag-and-icon h3 {
        font-size: 25px;
    }
}

.terms-and-conditions-page .terms-conditions-content-wrap .notes-area svg {
    fill: #8FDAAA;
    width: 100%;
    margin-bottom: 10px;
}

.terms-and-conditions-page .terms-conditions-content-wrap .notes-area ul {
    padding-left: 19px;
    margin: 0;
}

.terms-and-conditions-page .terms-conditions-content-wrap .notes-area ul li {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 15px;
    color: var(--title-color);
}

@media (max-width: 576px) {
    .terms-and-conditions-page .terms-conditions-content-wrap .notes-area ul li {
        font-size: 15px;
    }
}

.terms-and-conditions-page .terms-conditions-content-wrap .notes-area ul li:last-child {
    margin-bottom: 0;
}

.terms-and-conditions-page .terms-and-conditions h2 {
    font-family: var(--font-Hanken-Grotesk);
    line-height: 1.3;
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    .terms-and-conditions-page .terms-and-conditions h2 {
        font-size: 28px;
        margin-bottom: 15px;
    }
}

.terms-and-conditions-page .terms-and-conditions h3 {
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    .terms-and-conditions-page .terms-and-conditions h3 {
        font-size: 28px;
        margin-bottom: 15px;
    }
}

@media (max-width: 576px) {
    .terms-and-conditions-page .terms-and-conditions h3 {
        font-size: 25px;
    }
}

.terms-and-conditions-page .terms-and-conditions p {
    color: var(--paragraph-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 17px;
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 15px;
}

@media (max-width: 576px) {
    .terms-and-conditions-page .terms-and-conditions p {
        font-size: 15px;
    }
}

.terms-and-conditions-page .terms-and-conditions p:last-child {
    margin-bottom: 0;
}

.terms-and-conditions-page .terms-and-conditions ul {
    margin: 0;
    padding: 0;
    list-style: none;
    padding-left: 50px;
    margin-bottom: 20px;
    padding-top: 5px;
}

@media (max-width: 991px) {
    .terms-and-conditions-page .terms-and-conditions ul {
        padding-left: 30px;
    }
}

@media (max-width: 767px) {
    .terms-and-conditions-page .terms-and-conditions ul {
        padding-left: 20px;
    }
}

.terms-and-conditions-page .terms-and-conditions ul li {
    color: rgba(var(--title-color-opc), 0.6);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 17px;
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 15px;
}

@media (max-width: 576px) {
    .terms-and-conditions-page .terms-and-conditions ul li {
        font-size: 15px;
    }
}

.terms-and-conditions-page .terms-and-conditions ul li strong {
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 17px;
    font-weight: 600;
    line-height: 30px;
}

@media (max-width: 576px) {
    .terms-and-conditions-page .terms-and-conditions ul li strong {
        font-size: 15px;
    }
}

.terms-and-conditions-page .terms-and-conditions .btn-area {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 50px;
}

@media (max-width: 991px) {
    .terms-and-conditions-page .terms-and-conditions .btn-area {
        padding-top: 40px;
    }
}

@media (max-width: 767px) {
    .terms-and-conditions-page .terms-and-conditions .btn-area {
        padding-top: 30px;
    }
}

.terms-and-conditions-page .terms-and-conditions .btn-area button {
    border: unset;
}

.terms-and-conditions-page .terms-and-conditions .btn-area .primary-btn1 {
    background-color: var(--primary-color1);
    color: var(--title-color);
    font-size: 17px;
    padding: 12px 25px;
}

.terms-and-conditions-page .terms-and-conditions .btn-area .primary-btn1:hover {
    color: var(--white-color);
}

.terms-and-conditions-page .terms-and-conditions .btn-area .primary-btn1::after {
    background-color: var(--black-color);
}

.terms-and-conditions-page .terms-and-conditions .btn-area .primary-btn1.two {
    background-color: var(--black-color);
    color: var(--white-color);
}

.terms-and-conditions-page .terms-and-conditions .btn-area .primary-btn1.two:hover {
    color: var(--title-color);
}

.terms-and-conditions-page .terms-and-conditions .btn-area .primary-btn1.two::after {
    background-color: var(--primary-color1);
}

.terms-and-conditions-page .terms-and-conditions.two ul {
    margin-bottom: 0;
}

/*========================================
  59. inner-page Support Policy Start CSS
==========================================*/

.support-center-section .support-border-bottom {
    position: relative;
}

.support-center-section .support-border-bottom::after {
    content: "";
    position: absolute;
    top: 49%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(var(--title-color-opc), 0.2);
}

@media (max-width: 1399px) {
    .support-center-section .support-border-bottom::after {
        top: 50%;
    }
}

@media (max-width: 991px) {
    .support-center-section .support-border-bottom::after {
        display: none;
    }
}

.support-center-section .divider {
    position: relative;
}

.support-center-section .divider::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 1px;
    background-color: rgba(var(--title-color-opc), 0.2);
    right: 0;
    top: 0;
}

@media (max-width: 991px) {
    .support-center-section .divider::after {
        display: none;
    }
}

.support-center-section .single-support {
    padding: 35px;
}

@media (max-width: 1399px) {
    .support-center-section .single-support {
        padding: 22px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .support-center-section .single-support {
        gap: 12px;
    }
}

@media (max-width: 991px) {
    .support-center-section .single-support {
        padding: 20px;
        border: 1px solid rgba(var(--title-color-opc), 0.2);
        flex-wrap: wrap;
    }
}

@media (max-width: 767px) {
    .support-center-section .single-support {
        padding: 20px;
    }
}

@media (max-width: 576px) {
    .support-center-section .single-support {
        padding: 20px;
        gap: 15px;
    }
}

.support-center-section .single-support .icon {
    margin-bottom: 25px;
}

@media (max-width: 576px) {
    .support-center-section .single-support .icon {
        margin-bottom: 18px;
    }
}

.support-center-section .single-support .icon svg {
    fill: rgba(var(--title-color-opc), 0.5);
    width: 50px;
}

@media (max-width: 576px) {
    .support-center-section .single-support .icon svg {
        width: 40px;
    }
}

.support-center-section .single-support .content h3 {
    margin-bottom: 5px;
    line-height: 1.2;
}

.support-center-section .single-support .content h3 a {
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

@media (max-width: 1199px) {
    .support-center-section .single-support .content h3 a {
        font-size: 26px;
    }
}

@media (max-width: 576px) {
    .support-center-section .single-support .content h3 a {
        font-size: 21px;
    }
}

.support-center-section .single-support .content span {
    color: rgba(var(--title-color-opc), 0.6);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    display: block;
    position: relative;
    padding-left: 40px;
}

.support-center-section .single-support .content span::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 30px;
    height: 2px;
    background-color: rgba(var(--title-color-opc), 0.6);
}

.support-center-section .single-support .content p {
    color: rgba(var(--title-color-opc), 0.6);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0.02em;
    padding: 25px 0;
}

@media (max-width: 576px) {
    .support-center-section .single-support .content p {
        padding: 20px 0;
    }
}

.support-center-section .single-support .content ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

@media (max-width: 576px) {
    .support-center-section .single-support .content ul {
        justify-content: space-between;
        gap: 10px;
        row-gap: 10px;
    }
}

.support-center-section .single-support .content ul li {
    display: flex;
    align-items: center;
    gap: 5px;
}

.support-center-section .single-support .content ul li i {
    color: var(--primary-color1);
    font-size: 16px;
    font-weight: 500 !important;
    line-height: 1;
}

.support-center-section .single-support .content ul li {
    color: rgba(var(--title-color-opc), 0.6);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.support-center-section .single-support:hover svg {
    animation: bounce 1s;
}

/*=======================
  60. Dashboard Start CSS
=========================*/

.dashboard-section .instructor-profile-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 45px;
}

@media (max-width: 576px) {
    .dashboard-section .instructor-profile-info {
        display: inline-flex;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
}

.dashboard-section .instructor-profile-info .button-area .primary-btn1 {
    background: transparent;
    color: var(--primary-color4);
    border: 1px solid var(--primary-color4);
    padding: 19px 21px;
}

@media (max-width: 991px) {
    .dashboard-section .instructor-profile-info .button-area .primary-btn1 {
        padding: 16px 18px;
    }
}

@media (max-width: 576px) {
    .dashboard-section .instructor-profile-info .button-area .primary-btn1 {
        font-size: 14px;
    }
}

.dashboard-section .instructor-profile-info .button-area .primary-btn1 span {
    text-decoration: underline;
}

.dashboard-section .instructor-profile-info .button-area .primary-btn1 span svg {
    fill: var(--primary-color4);
}

.dashboard-section .instructor-profile-info .button-area .primary-btn1::after {
    background: transparent;
}

.dashboard-section .instructor-profile-info .profile-info-wrap {
    margin-bottom: 0;
}

.dashboard-section .profile-info-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 45px;
    position: relative;
}

@media (max-width: 991px) {
    .dashboard-section .profile-info-wrap {
        align-items: end;
    }
}

@media (max-width: 767px) {
    .dashboard-section .profile-info-wrap {
        gap: 12px;
    }
}

@media (max-width: 576px) {
    .dashboard-section .profile-info-wrap {
        margin-bottom: 25px;
    }
}

.dashboard-section .profile-info-wrap .profile-img img {
    min-width: 85px;
    max-width: 85px;
    height: 85px;
    border-radius: 50%;
}

@media (max-width: 991px) {
    .dashboard-section .profile-info-wrap .profile-img img {
        min-width: 65px;
        max-width: 65px;
        height: 65px;
    }
}

@media (max-width: 767px) {
    .dashboard-section .profile-info-wrap .profile-img img {
        min-width: 60px;
        max-width: 60px;
        height: 60px;
    }
}

.dashboard-section .profile-info-wrap .profile-content span {
    font-family: var(--font-young-serif);
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    color: rgba(var(--title-color-opc), 0.7);
    display: inline-flex;
    margin-bottom: 12px;
}

.dashboard-section .profile-info-wrap .profile-content h4,
.dashboard-section .profile-info-wrap .profile-content h3 {
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 27px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 6px;
}

@media (max-width: 991px) {
    .dashboard-section .profile-info-wrap .profile-content h4,
    .dashboard-section .profile-info-wrap .profile-content h3 {
        font-size: 20px;
        margin-bottom: 4px;
    }
}

@media (max-width: 767px) {
    .dashboard-section .profile-info-wrap .profile-content h4,
    .dashboard-section .profile-info-wrap .profile-content h3 {
        font-size: 19px;
        margin-bottom: 2px;
    }
}

@media (max-width: 576px) {
    .dashboard-section .profile-info-wrap .profile-content h4,
    .dashboard-section .profile-info-wrap .profile-content h3 {
        font-size: 18px;
    }
}

.dashboard-section .profile-info-wrap .profile-content .rating .star {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dashboard-section .profile-info-wrap .profile-content .rating .star i {
    font-size: 18px;
    color: #ffc107;
}

@media (max-width: 991px) {
    .dashboard-section .profile-info-wrap .profile-content .rating .star i {
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .dashboard-section .profile-info-wrap .profile-content .rating .star i {
        font-size: 14px;
    }
}

.dashboard-section .profile-info-wrap .profile-content .rating p a {
    color: #595959;
    font-family: var(--font-Hanken-Grotesk);
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
    transition: 0.5s;
}

.dashboard-section .profile-info-wrap .profile-content .rating p a:hover {
    color: var(--title-color);
}

.dashboard-section .profile-info-wrap .profile-content .rating p {
    margin-bottom: 0;
}

.dashboard-section .dashboard-wrapper {
    display: grid;
    grid-template-columns: 25% 75%;
    align-items: start;
    position: relative;
    background-color: #f1f5ff;
    border-radius: 20px;
}

@media (max-width: 1199px) {
    .dashboard-section .dashboard-wrapper {
        grid-template-columns: 24% 76%;
    }
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper {
        grid-template-columns: 33% 67%;
    }
}

@media (max-width: 767px) {
    .dashboard-section .dashboard-wrapper {
        grid-template-columns: 36% 64%;
        display: block;
        border-radius: 10px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap {
    background-color: var(--black-color);
    padding: 36px;
    border-radius: 20px;
    position: sticky;
    top: 79px;
}

@media (max-width: 1399px) {
    .dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap {
        padding: 25px;
        border-radius: 12px;
    }
}

@media (max-width: 1199px) {
    .dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap {
        padding: 16px;
        border-radius: 10px;
        top: 76px;
    }
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap {
        padding: 16px 12px;
        top: 69px;
    }
}

@media (max-width: 767px) {
    .dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap {
        border-radius: 6px;
        padding: 15px 15px 70px;
        width: 280px;
        height: 100%;
        overflow-y: scroll;
        transform: translateX(-100%);
        position: fixed;
        top: 74px;
        left: 0;
        z-index: 1000;
        border-radius: 0;
        transition: all 0.5s ease;
    }
    .dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap.slide {
        transform: translateX(0);
    }
}

@media (max-width: 576px) {
    .dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap {
        width: 240px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu {
    padding: 20px 0 20px 0;
    border-top: 1px solid rgba(var(--white-color-opc), 0.1);
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu {
        padding-bottom: 15px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu:first-child {
    padding-top: 0;
    border-top: unset;
}

.dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu:last-child {
    padding-bottom: 0;
}

@media (max-width: 767px) {
    .dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu:last-child {
        padding-bottom: 50px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu span {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 400;
    font-size: 15px;
    line-height: 1;
    text-decoration: underline;
    text-decoration-style: solid;
    color: rgba(var(--white-color-opc), 0.7);
    padding-left: 25px;
    display: inline-flex;
    margin-bottom: 10px;
}

@media (max-width: 1399px) {
    .dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu span {
        padding-left: 20px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu span {
        padding-left: 12px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu ul li a {
    background-color: transparent;
    border-radius: 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: 0.5s;
    padding: 16px 24px;
}

@media (max-width: 1399px) {
    .dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu ul li a {
        padding: 13px 20px;
        border-radius: 10px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu ul li a {
        padding: 13px 18px;
        border-radius: 10px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu ul li a {
        padding: 14px 12px;
        gap: 7px;
    }
}

@media (max-width: 767px) {
    .dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu ul li a {
        flex-direction: unset;
        justify-content: start;
        padding-left: 20px;
        border-radius: 7px;
    }
}

@media (max-width: 576px) {
    .dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu ul li a {
        padding: 14px 15px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu ul li a svg {
    fill: var(--primary-color1);
    transition: 0.5s;
}

.dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu ul li a h4 {
    color: var(--white-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 0;
    transition: 0.5s;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu ul li a h4 {
        font-size: 14px;
    }
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu ul li a h4 {
        text-align: center;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu ul li a h4 {
        font-size: 13px;
    }
}

@media (max-width: 767px) {
    .dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu ul li a h4 {
        font-size: 14px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu ul li:hover a {
    background-color: var(--primary-color1);
    color: var(--black-color);
}

.dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu ul li:hover a svg {
    fill: var(--title-color1);
}

.dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu ul li:hover h4 {
    color: var(--black-color);
}

.dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu ul li.active {
    margin-bottom: 10px;
    margin-top: 10px;
}

.dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu ul li.active:last-child {
    margin-bottom: 0;
}

.dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu ul li.active:first-child {
    margin-top: 0;
}

.dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu ul li.active h4 {
    color: var(--black-color);
}

.dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu ul li.active a {
    background-color: var(--primary-color1);
}

.dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu ul li.active a svg {
    fill: var(--black-color);
}

.dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu ul li:first-child a .first-title {
    color: var(--black-color);
}

.dashboard-section .dashboard-wrapper .dashboard-sidebar-menu-wrap .dashboard-sidebar-menu ul li:first-child a:hover {
    margin-top: 0;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap {
    padding: 45px;
}

@media (max-width: 1399px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap {
        padding: 40px 25px;
    }
}

@media (max-width: 1199px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap {
        padding: 35px 20px;
    }
}

@media (max-width: 767px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap {
        padding: 30px 25px;
    }
}

@media (max-width: 576px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap {
        padding: 25px 15px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .single-counter-card {
    background-color: #e4f4d3;
    border-radius: 5px;
    padding: 15px;
    position: relative;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .single-counter-card>span {
    color: #1a3837;
    font-family: var(--font-Hanken-Grotesk);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    display: block;
    margin-bottom: 5px;
}

@media (max-width: 767px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .single-counter-card>span {
        font-size: 14px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .single-counter-card h2 {
    color: #1a3837;
    font-family: var(--font-Hanken-Grotesk);
    font-size: 35px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .single-counter-card h2 {
        font-size: 30px;
    }
}

@media (max-width: 767px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .single-counter-card h2 {
        font-size: 28px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .single-counter-card .number {
    display: flex;
    align-items: baseline;
    justify-content: center;
    padding: 40px 10px 32px;
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .single-counter-card .number {
        padding: 35px 10px 28px;
    }
}

@media (max-width: 767px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .single-counter-card .number {
        padding: 30px 10px 25px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .single-counter-card .number>span {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 700;
    font-size: 35px;
    line-height: 17px;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .single-counter-card::before {
    content: url(../img/inner-pages/svg/dashboard-counter-card-vector.svg);
    position: absolute;
    top: 0;
    right: 0;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .single-counter-card.two {
    background-color: #faeae0;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .single-counter-card.three {
    background-color: #f2f1cf;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .single-counter-card.four {
    background-color: #dfe5f9;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .single-counter-card.five {
    background-color: #ebdbff;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .single-counter-card.six {
    background-color: #daedff;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .dashboard-title h5 {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 22px;
    line-height: 17px;
    color: var(--title-color);
    margin-bottom: 43px;
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .dashboard-title h5 {
        margin-bottom: 35px;
    }
}

@media (max-width: 576px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .dashboard-title h5 {
        margin-bottom: 35px;
        font-size: 20px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .seller-profile-area ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .seller-profile-area ul li {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 40px;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .seller-profile-area ul li:last-child {
    margin-bottom: 0;
}

@media (max-width: 1199px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .seller-profile-area ul li {
        gap: 30px;
    }
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .seller-profile-area ul li {
        margin-bottom: 30px;
    }
}

@media (max-width: 576px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .seller-profile-area ul li {
        gap: 12px;
        margin-bottom: 25px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .seller-profile-area ul li span {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 16px;
    line-height: 17px;
    color: rgba(var(--title-color-opc), 0.7);
    min-width: 208px;
    max-width: 208px;
}

@media (max-width: 1199px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .seller-profile-area ul li span {
        min-width: 150px;
        max-width: 150px;
    }
}

@media (max-width: 576px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .seller-profile-area ul li span {
        min-width: 140px;
        max-width: 140px;
        font-size: 14px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .seller-profile-area ul li strong {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 16px;
    line-height: 17px;
    color: var(--title-color);
}

@media (max-width: 576px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .seller-profile-area ul li strong {
        font-size: 14px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .service-wrap .nav-pills {
    border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
    gap: 0;
    margin-bottom: 40px;
    display: inline-flex;
    justify-content: start;
    width: 100%;
}

@media (max-width: 1199px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .service-wrap .nav-pills {
        gap: 12px;
    }
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .service-wrap .nav-pills {
        gap: 2px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .service-wrap .nav-pills .nav-item {
    margin-bottom: 0;
    padding-bottom: 0;
    line-height: 1;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .service-wrap .nav-pills .nav-item .nav-link {
    background-color: transparent;
    color: rgba(var(--title-color-opc), 0.7);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    padding: 17px 30px;
    border-radius: unset;
    display: flex;
    justify-content: center;
}

@media (max-width: 1199px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .service-wrap .nav-pills .nav-item .nav-link {
        font-size: 15px;
        padding: 12px 15px;
    }
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .service-wrap .nav-pills .nav-item .nav-link {
        font-size: 14px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .service-wrap .nav-pills .nav-item .nav-link.active {
    background-color: var(--primary-color1) !important;
    color: var(--black-color) !important;
    margin-bottom: 0;
    margin-top: 0;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .service-wrap .nav-pills .nav-item .nav-link.active svg {
    fill: var(--white-color);
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .tab-area {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .tab-area {
        flex-wrap: wrap;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .tab-area .nav-pills {
    gap: 20px;
    display: flex;
    justify-content: start;
}

@media (max-width: 1199px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .tab-area .nav-pills {
        gap: 12px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .tab-area .nav-pills .nav-item {
    margin-bottom: 0;
    padding-bottom: 0;
    line-height: 1;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .tab-area .nav-pills .nav-item .nav-link {
    background-color: transparent;
    border: 1px solid var(--black-color);
    color: rgba(var(--title-color-opc), 0.7);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    padding: 14px 20px;
    max-width: 114px;
    display: flex;
    justify-content: center;
    border-radius: 5px;
}

@media (max-width: 1199px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .tab-area .nav-pills .nav-item .nav-link {
        font-size: 15px;
        padding: 12px 15px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .tab-area .nav-pills .nav-item .nav-link.active {
    background-color: var(--primary-color1) !important;
    border-color: var(--primary-color1);
    color: var(--black-color) !important;
    margin-bottom: 0;
    margin-top: 0;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .tab-area .nav-pills .nav-item .nav-link.active svg {
    fill: var(--white-color);
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .tab-area .form-inner {
    min-width: 310px;
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .tab-area .form-inner {
        min-width: unset;
        width: 100%;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .form-inner input {
    background: transparent;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .form-inner textarea {
    background: transparent;
    min-height: 120px;
}

@media (max-width: 767px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .form-inner textarea {
        min-height: 90px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .form-inner .nice-select {
    background: transparent;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .form-inner .nice-select::before {
    position: absolute;
    content: url(../img/inner-pages/svg/arrow-svg.svg);
    right: 20px;
    transition: 0.3s;
}

@media (min-width: 768px) and (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .form-inner .nice-select::before {
        right: 5px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .form-inner .image-upload label {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .primary-btn1 {
    padding: 20px 49px;
    text-transform: uppercase;
    font-size: 13px;
}

@media (max-width: 576px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .primary-btn1 {
        padding: 17px 35px;
        width: 100%;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .profile-container {
    margin-bottom: 0;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .profile-container .profile-photo {
    position: relative;
    bottom: 0;
    left: 0;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .profile-container .profile-photo img {
    width: 100%;
    height: 200px;
    border-radius: unset;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .profile-container .profile-photo .profile-img-wrap {
    width: 200px;
    height: 200px;
    border-radius: unset;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .profile-container .profile-photo .delete-btn {
    top: -4px;
    left: -4px;
    background-color: var(--black-color);
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .order-history-wrap .profile-container .profile-photo .delete-btn svg {
    fill: var(--white-color);
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .wallet-balacne-area {
    background-color: var(--white-color);
    border: 1px solid rgba(var(--secondary-color-opc), 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 35px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

@media (max-width: 1199px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .wallet-balacne-area {
        padding: 25px;
    }
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .wallet-balacne-area {
        padding: 18px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .wallet-balacne-area .icon-and-counter-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .wallet-balacne-area .icon-and-counter-content .icon {
    min-width: 48px;
    max-width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color4);
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .wallet-balacne-area .icon-and-counter-content .icon {
        min-width: 44px;
        max-width: 44px;
        height: 44px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .wallet-balacne-area .icon-and-counter-content .icon svg {
    width: 28px;
    height: 28px;
    fill: var(--white-color);
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .wallet-balacne-area .icon-and-counter-content .icon svg {
        width: 25px;
        height: 25px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .wallet-balacne-area .icon-and-counter-content .counter-content h6 {
    font-family: var(--font-Hanken-Grotesk);
    color: rgba(var(--secondary-color-opc), 0.7);
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    margin-bottom: 12px;
}

@media (max-width: 1199px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .wallet-balacne-area .icon-and-counter-content .counter-content h6 {
        font-size: 16px;
    }
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .wallet-balacne-area .icon-and-counter-content .counter-content h6 {
        font-size: 15px;
        margin-bottom: 9px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .wallet-balacne-area .icon-and-counter-content .counter-content .number {
    display: flex;
    align-items: center;
    gap: 0;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .wallet-balacne-area .icon-and-counter-content .counter-content .number span {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 700;
    font-size: 22px;
    line-height: 17px;
}

@media (max-width: 1199px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .wallet-balacne-area .icon-and-counter-content .counter-content .number span {
        font-size: 20px;
    }
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .wallet-balacne-area .icon-and-counter-content .counter-content .number span {
        font-size: 18px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .wallet-balacne-area .icon-and-counter-content .counter-content .number h5 {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 700;
    font-size: 22px;
    line-height: 17px;
    margin-bottom: 0;
}

@media (max-width: 1199px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .wallet-balacne-area .icon-and-counter-content .counter-content .number h5 {
        font-size: 20px;
    }
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .wallet-balacne-area .icon-and-counter-content .counter-content .number h5 {
        font-size: 18px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .wallet-balacne-area .primary-btn1 {
    font-size: 15px;
    font-weight: 600;
    background-color: var(--primary-color1);
    color: var(--black-color);
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .wallet-balacne-area .primary-btn1 {
        font-size: 14px;
        padding: 16px 20px;
    }
}

@media (max-width: 576px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .wallet-balacne-area .primary-btn1 {
        width: 100%;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .wallet-balacne-area .primary-btn1:hover {
    color: var(--white-color);
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .wallet-balacne-area .primary-btn1::after {
    background-color: var(--black-color);
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 9px 9px 0 0;
    border-color: rgba(17, 26, 34, 0.1);
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table thead {
    background: #111a22;
    border-radius: 9px !important;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table thead tr {
    background-color: var(--black-color);
    border-width: 1px;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table thead tr th {
    color: var(--white-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 500;
    padding: 15px 20px 15px;
    vertical-align: top;
    text-align: center;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table thead tr th {
        padding: 16px 20px;
    }
}

@media (max-width: 1399px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table thead tr th {
        padding: 16px 20px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table thead tr th {
        padding: 16px 12px;
    }
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table thead tr th {
        display: none;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table tbody {
    background-color: var(--white-color);
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table tbody tr {
    border: 1px solid rgba(17, 26, 34, 0.1);
    border-radius: 5px;
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table tbody tr {
        flex-wrap: wrap;
        display: flex;
        justify-content: space-between;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table tbody tr td {
    color: rgba(35, 41, 31, 0.7333333333);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 13px;
    line-height: 16px;
    vertical-align: middle;
    padding: 18px 20px;
    text-align: center;
    gap: 5px;
    justify-content: end;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table tbody tr td {
        padding: 16px 20px;
    }
}

@media (max-width: 1399px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table tbody tr td {
        padding: 16px 20px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table tbody tr td {
        padding: 16px 12px;
    }
}

@media (max-width: 576px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table tbody tr td {
        padding: 16px 23px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table tbody tr td span {
    color: #10B981;
    font-size: 12px;
    line-height: 1;
    padding: 10px 24px;
    background-color: rgba(16, 185, 129, 0.15);
    border-radius: 5px;
    min-width: 95px;
    display: inline-flex;
    justify-content: center;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table tbody tr td span.cancel {
    color: #dd344a;
    background-color: rgba(221, 52, 74, 0.15);
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table tbody tr td span.status-pending {
    color: #DD344A;
    background-color: rgba(221, 52, 74, 0.15);
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table tbody tr td.icon-wrap {
    padding: 12px;
    display: flex;
    justify-content: center;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table tbody tr td.icon-wrap .icon {
    background: rgba(16, 185, 129, 0.15);
    border-radius: 5px;
    width: 39px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table tbody tr td.icon-wrap .icon svg {
    width: 18px;
    height: 12px;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table tbody tr td.icon-wrap .icon:hover {
    background-color: var(--primary-color1);
    cursor: pointer;
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table tbody tr td.table-data {
        padding: unset;
    }
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table tbody {
        display: block;
        width: 100%;
    }
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table {
        display: block;
        width: 100%;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section h5 {
    margin-bottom: 15px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    font-family: var(--font-Hanken-Grotesk);
    color: var(--title-color);
    margin-bottom: 35px;
}

@media (max-width: 576px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section h5 {
        font-size: 20px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section .qa-table-wrap {
    border: 1px solid rgba(var(--title-color-opc), 0.15);
    border-radius: 7px;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section .qa-table-wrap .qa-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 7px;
    overflow: hidden;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section .qa-table-wrap .qa-table thead {
    background: #1a3837;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section .qa-table-wrap .qa-table thead th {
    text-align: left;
    padding: 20px 35px;
    font-weight: 500;
    font-size: 13px;
    font-family: var(--font-Hanken-Grotesk);
    color: var(--white-color);
    font-weight: 500;
    line-height: 1;
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section .qa-table-wrap .qa-table thead th {
        display: none;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section .qa-table-wrap .qa-table tbody tr {
    border-bottom: 1px solid #e5e7eb;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section .qa-table-wrap .qa-table tbody tr:last-child {
    border-bottom: none;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section .qa-table-wrap .qa-table tbody tr td {
    padding: 22px 35px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: var(--title-color);
    vertical-align: middle;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section .qa-table-wrap .qa-table tbody tr td.reply-col {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

@media (max-width: 767px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section .qa-table-wrap .qa-table tbody tr td.reply-col {
        justify-content: center;
    }
}

@media (max-width: 1199px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section .qa-table-wrap .qa-table tbody tr td {
        padding: 20px;
    }
}

@media (max-width: 767px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section .qa-table-wrap .qa-table tbody tr td {
        display: block;
        width: 100%;
        text-align: center;
        padding-left: 60%;
        position: relative;
    }
}

@media (max-width: 767px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section .qa-table-wrap .qa-table tbody tr td {
        padding: 15px 20px;
    }
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section .qa-table-wrap .qa-table td:before {
        content: "";
        position: absolute;
        left: 0;
        width: 50%;
        text-align: left;
        padding-left: 20px;
        font-weight: 600;
        color: var(--title-color);
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section .qa-table-wrap .qa-table .user-info {
    display: flex;
    gap: 18px;
}

@media (max-width: 767px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section .qa-table-wrap .qa-table .user-info {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        text-align: center;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section .qa-table-wrap .qa-table .user-info .dot {
    width: 13px;
    height: 13px;
    max-width: 13px;
    min-width: 13px;
    background: var(--primary-color4);
    border-radius: 50%;
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section .qa-table-wrap .qa-table .user-info .dot {
        display: none;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section .qa-table-wrap .qa-table .user-info h6 {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    color: var(--title-color);
    margin-bottom: 5px;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section .qa-table-wrap .qa-table .user-info span {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.3;
    color: rgba(var(--title-color-opc), 0.7);
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section .qa-table-wrap .qa-table .menu {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section .qa-table-wrap .qa-table .menu i {
    color: rgba(var(--title-color-opc), 0.6);
    font-size: 18px;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section .reply-btn {
    padding: 7px 15px;
    font-family: var(--font-Hanken-Grotesk);
    color: var(--black-color);
    font-weight: 500;
    font-size: 13px;
    border: 1px solid var(--black-color);
    line-height: 1;
    border-radius: 5px;
    background: transparent;
    transition: 0.5s;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .qa-section .reply-btn:hover {
    background-color: var(--primary-color1);
    border-color: transparent;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .settings-wrap .nav-pills {
    border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
    gap: 0;
    margin-bottom: 40px;
    display: inline-flex;
    justify-content: start;
    width: 100%;
}

@media (max-width: 1199px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .settings-wrap .nav-pills {
        gap: 12px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .settings-wrap .nav-pills .nav-item {
    margin-bottom: 0;
    padding-bottom: 0;
    line-height: 1;
    max-width: unset !important;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .settings-wrap .nav-pills .nav-item .nav-link {
    background-color: transparent;
    color: rgba(var(--title-color-opc), 0.7);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    padding: 17px 50px;
    border-radius: unset;
    max-width: unset;
    display: flex;
    justify-content: center;
}

@media (max-width: 1199px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .settings-wrap .nav-pills .nav-item .nav-link {
        font-size: 15px;
        padding: 12px 15px;
    }
}

@media (max-width: 576px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .settings-wrap .nav-pills .nav-item .nav-link {
        padding: 12px 20px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .settings-wrap .nav-pills .nav-item .nav-link.active {
    background-color: var(--primary-color1) !important;
    color: var(--black-color) !important;
    margin-bottom: 0;
    margin-top: 0;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .settings-wrap .nav-pills .nav-item .nav-link.active svg {
    fill: var(--white-color);
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container {
    position: relative;
    border-radius: 10px;
    margin-bottom: 95px;
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container {
        margin-bottom: 70px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .cover-photo {
    position: relative;
    width: 100%;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .cover-photo::after {
    content: "";
    position: absolute;
    background-color: rgba(var(--title-color-opc), 0.3);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    z-index: 1;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .cover-photo img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 10px;
    min-height: 240px;
    max-height: 240px;
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .cover-photo img {
        max-height: 200px;
        min-height: 200px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .cover-photo #uploadCoverBtn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: var(--primary-color1);
    color: var(--black-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 12px;
    font-weight: 500;
    border: none;
    padding: 2px 23px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: 0.5s;
    z-index: 99;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .cover-photo #uploadCoverBtn svg {
    fill: var(--black-color);
    transition: 0.5s;
}

@media (max-width: 576px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .cover-photo #uploadCoverBtn svg {
        width: 15px;
    }
}

@media (max-width: 576px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .cover-photo #uploadCoverBtn {
        padding: 6px 9px;
        gap: 4px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .cover-photo #uploadCoverBtn:hover {
    background: var(--black-color);
    color: var(--white-color);
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .cover-photo #uploadCoverBtn:hover svg {
    fill: var(--white-color);
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .cover-photo .delete-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(var(--title-color-opc), 0.2);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    padding: 0;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .cover-photo .delete-btn svg {
    fill: var(--white-color);
    transition: 0.5s;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .cover-photo .delete-btn:hover {
    background-color: var(--primary-color1);
    transition: 0.5s;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .cover-photo .delete-btn:hover svg {
    fill: var(--black-color);
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .profile-photo {
    position: absolute;
    bottom: -40px;
    left: 40px;
    z-index: 1;
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .profile-photo {
        left: 25px;
    }
}

@media (max-width: 576px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .profile-photo {
        left: 10px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .profile-photo img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

@media (max-width: 576px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .profile-photo img {
        width: 100px;
        height: 100px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .profile-photo .profile-upload-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 4px 0 8px;
    background-color: rgba(var(--black-color-opc), 0.3);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .profile-photo .profile-upload-wrap .profile-upload-btn {
    color: var(--white-color);
    cursor: pointer;
    transition: 0.35s;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .profile-photo .profile-upload-wrap .profile-upload-btn .icon {
    position: relative;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .profile-photo .profile-upload-wrap .profile-upload-btn .icon svg {
    fill: var(--white-color);
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .profile-photo .profile-img-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid var(--white-color);
    overflow: hidden;
}

@media (max-width: 576px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .profile-photo .profile-img-wrap {
        width: 100px;
        height: 100px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .profile-photo .delete-btn {
    position: absolute;
    top: 1px;
    right: 16px;
    background-color: var(--white-color);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    padding: 0;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.35s;
}

@media (max-width: 576px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .profile-photo .delete-btn {
        top: -2px;
        right: 14px;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .profile-photo .delete-btn svg {
    fill: var(--primary-color4);
    transition: 0.35s;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .profile-photo .delete-btn:hover {
    background-color: var(--primary-color1);
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .profile-container .profile-photo .delete-btn:hover svg {
    fill: var(--black-color);
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .title-area h6 {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    color: rgba(var(--title-color-opc), 0.6);
    margin-bottom: 45px;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .primary-btn1 {
    padding: 18px 31px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .form-inner {
    position: relative;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .form-inner label {
    font-family: var(--font-young-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    color: var(--title-color);
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .form-inner input {
    background: transparent;
    color: rgba(var(--title-color-opc), 0.6);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 15px;
    font-weight: 400;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .form-inner input::-moz-placeholder {
    color: rgba(var(--black-color-opc), 0.6);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 15px;
    font-weight: 400;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .form-inner input::placeholder {
    color: rgba(var(--black-color-opc), 0.6);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 15px;
    font-weight: 400;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .form-inner input:focus {
    border-color: var(--primary-color1);
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .form-inner textarea {
    background: transparent;
    min-height: 166px;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .form-inner textarea:focus {
    border-color: var(--primary-color1);
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .form-inner>i {
    position: absolute;
    right: 20px;
    bottom: 15px;
    color: var(--black-color);
    cursor: pointer;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .form-inner .nice-select {
    background-color: transparent;
    border: 1px solid rgba(3, 31, 66, 0.1490196078);
    height: 44px;
    padding: 0px 20px;
    position: relative;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .form-inner .nice-select::before {
    width: unset;
    height: unset;
    content: url(../img/inner-pages/svg/arrow-svg.svg);
    position: absolute;
    font-family: bootstrap-icons;
    background-image: none;
    font-weight: 800;
    font-size: 17px;
    transform: rotate(0deg);
    border-bottom: unset;
    border-right: unset;
    right: 20px;
    top: 12px;
    transition: 0.5s;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .form-inner .nice-select .current {
    color: rgba(var(--title-color-opc), 0.6);
    font-size: 15px;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .form-inner .nice-select.open::before {
    content: url(../img/inner-pages/svg/arrow-svg.svg);
    transform: rotate(180deg);
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .form-inner2 .form-check .form-check-input {
    margin-top: 5px;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .form-inner2 .form-check .form-check-input:checked {
    background-color: var(--primary-color1);
    border: unset;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .form-inner2 .form-check .form-check-label {
    color: rgba(var(--title-color-opc), 0.5);
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .social-links {
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 670px;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .social-links .single-item {
    display: flex;
    align-items: center;
    margin-bottom: 45px;
    gap: 55px;
}

@media (max-width: 1199px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .social-links .single-item {
        gap: 35px;
        display: inline-flex;
    }
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .social-links .single-item {
        gap: 15px;
        margin-bottom: 40px;
    }
}

@media (max-width: 576px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .social-links .single-item {
        gap: 15px;
        flex-wrap: wrap;
    }
}

@media (max-width: 576px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .social-links .single-item .link-item {
        width: 100%;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .social-links .single-item .link-item .form-inner input {
    max-width: 380px;
    min-width: 380px;
}

@media (max-width: 1199px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .social-links .single-item .link-item .form-inner input {
        max-width: 300px;
        min-width: 300px;
    }
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .social-links .single-item .link-item .form-inner input {
        max-width: 250px;
        min-width: 250px;
    }
}

@media (max-width: 576px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .social-links .single-item .link-item .form-inner input {
        max-width: 100%;
        min-width: 100%;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .social-links .single-item .divider svg {
    fill: rgba(var(--title-color2-opc), 0.15);
}

@media (max-width: 991px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .social-links .single-item .divider svg {
        width: 60px;
    }
}

@media (max-width: 576px) {
    .dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .social-links .single-item .divider {
        display: none;
    }
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .social-links .single-item .social-area a {
    display: flex;
    align-items: center;
    gap: 7px;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .social-links .single-item .social-area a i {
    color: rgba(var(--title-color-opc), 0.7);
    font-size: 20px;
}

.dashboard-section .dashboard-wrapper .dashboard-content-wrap .contact-area .social-links .single-item .social-area a span {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    color: rgba(var(--title-color-opc), 0.7);
}

.dashboard-section .dashboard-wrapper.style-2 .dashboard-sidebar-menu ul li a {
    padding: 15px 24px;
}

.dashboard-section .dashboard-wrapper.style-2 .dashboard-sidebar-menu ul li:first-child a:hover {
    margin: 0;
}

.dashboard-section .dashboard-wrapper.style-2 .dashboard-sidebar-menu ul li:last-child a:hover {
    margin: 0;
}

.dashboard-section .dashboard-wrapper.style-3 .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table thead tr th {
    text-align: center;
}

@media (max-width: 576px) {
    .dashboard-section .dashboard-wrapper.style-4 .dashboard-content-wrap .bidding-summary-wrap .bidding-summary-table tbody tr td {
        padding: 16px 11px;
    }
}

.dashboard-section .eye-icon {
    cursor: pointer;
    margin-left: 8px;
}

/*=====================================
  61.login Page Section CSS
========================================*/

.login-page {
    height: 100vh;
    background: linear-gradient(180deg, #C6EDD4 0%, #C6EDD4 100%);
    background-size: cover;
    background-repeat: no-repeat;
}

.login-page .login-wrapper {
    padding: 200px 0 150px;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .login-page .login-wrapper {
        padding: 160px 0 90px;
    }
}

@media (max-width: 1399px) {
    .login-page .login-wrapper {
        padding: 150px 0 90px;
    }
}

@media (max-width: 991px) {
    .login-page .login-wrapper {
        padding: 160px 0 100px;
    }
}

@media (max-width: 767px) {
    .login-page .login-wrapper {
        padding: 170px 0 140px;
    }
}

.login-page .login-wrapper .form-title {
    margin-bottom: 40px;
}

.login-page .login-wrapper .form-title h2 {
    font-family: var(--font-bricolageGrotesque);
    font-weight: 600;
    font-size: 35px;
    margin-bottom: 10px;
    line-height: 1;
}

.login-page .login-wrapper .form-title span {
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 16px;
    color: var(--text-color);
    line-height: 1;
    display: block;
}

.login-page .login-wrapper .form-title span a {
    font-weight: 600;
    display: inline-block;
    color: var(--primary-color5);
    background: linear-gradient(to bottom, var(--primary-color5) 0%, var(--primary-color5) 98%);
    background-size: 0px 1.5px;
    background-repeat: no-repeat;
    background-position: left 90%;
    transition: background-size 0.75s;
}

.login-page .login-wrapper .form-title span a:hover {
    background-size: 100% 1.5px;
    background-position: 0% 90%;
}

.login-page .login-wrapper .login-registration-form {
    padding: 50px 40px;
    background-color: var(--white-color);
    border-radius: 20px;
}

@media (max-width: 991px) {
    .login-page .login-wrapper .login-registration-form {
        padding: 40px 30px;
        border-radius: 15px;
    }
}

@media (max-width: 576px) {
    .login-page .login-wrapper .login-registration-form {
        padding: 40px 20px;
        border-radius: 10px;
    }
}

.login-page .login-wrapper .login-registration-form .form-inner {
    position: relative;
}

.login-page .login-wrapper .login-registration-form .form-inner input {
    background-color: #F0F0F0;
}

.login-page .login-wrapper .login-registration-form .form-inner input:focus {
    border: 1px solid var(--primary-color2);
}

.login-page .login-wrapper .login-registration-form .form-inner input::-moz-placeholder {
    color: var(--dark-text-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 16px;
    font-weight: 500;
}

.login-page .login-wrapper .login-registration-form .form-inner input::placeholder {
    color: var(--dark-text-color);
    font-family: var(--font-Hanken-Grotesk);
    font-size: 16px;
    font-weight: 500;
}

.login-page .login-wrapper .login-registration-form .form-inner i {
    position: absolute;
    right: 20px;
    bottom: 15px;
    color: var(--text-color);
    cursor: pointer;
}

.login-page .login-wrapper .login-registration-form .form-remember-forget {
    margin-bottom: 40px;
}

@media (max-width: 576px) {
    .login-page .login-wrapper .login-registration-form .form-remember-forget {
        margin-bottom: 30px;
    }
}

.login-page .login-wrapper .login-registration-form .form-remember-forget a {
    color: var(--primary-color5);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
}

.login-page .login-wrapper .login-registration-form .primary-btn1 {
    padding: 20px 39px;
}

@media (max-width: 767px) {
    .login-page .login-wrapper .login-registration-form .primary-btn1 {
        padding: 18px 32px;
    }
}

@media (max-width: 576px) {
    .login-page .login-wrapper .login-registration-form .primary-btn1 {
        padding: 16px 32px;
    }
}

.login-page .login-wrapper .login-registration-form .primary-btn1::after {
    background-color: var(--primary-color5);
}

.login-page .login-wrapper .login-registration-form .primary-btn1:hover {
    color: var(--white-color);
}

.login-page .login-wrapper .login-registration-form .primary-btn1:hover svg {
    fill: var(--white-color);
}

.login-page .login-bottom {
    padding: 15px 0;
    border-top: 1px solid #DFDFDF;
    position: fixed;
    width: 100%;
    bottom: 0;
}

.login-page .login-bottom .login-bottom-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 767px) {
    .login-page .login-bottom .login-bottom-wrap {
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
    }
}

.login-page .login-bottom .login-bottom-wrap p {
    color: var(--text-color);
    font-family: var(--font-suse);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    margin-bottom: 0;
}

.login-page .login-bottom .login-bottom-wrap p a {
    color: var(--primary-color2);
}

/*====================================
  62. Register Account Section Start CSS
======================================*/

.register-account {
    height: calc(100vh - 86px);
    padding: 10px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .register-account {
        height: calc(100vh - 90px);
    }
}

.register-account .register-slider-area {
    position: relative;
}

.register-account .register-slider-area .paginations {
    position: absolute;
    bottom: 70px;
}

.register-account .register-slider-area .paginations .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--primary-color1);
}

.register-account .register-slider-area img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

.register-account .register-slider-area .register-slider-wrapper {
    position: relative;
    height: 100%;
}

.register-account .register-slider-area .register-slider-wrapper .register-content {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    background-color: rgba(var(--title-color-opc), 0.3);
    padding: 40% 26%;
    border-radius: 20px;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .register-account .register-slider-area .register-slider-wrapper .register-content {
        bottom: 140px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .register-account .register-slider-area .register-slider-wrapper .register-content {
        bottom: 120px;
    }
}

.register-account .register-slider-area .register-slider-wrapper .register-content h2 {
    color: var(--white-color);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 35px;
    line-height: 45px;
    margin-bottom: 0;
}

.register-account .register-slider {
    height: 100%;
}

.register-account .register-slider .swiper-wrapper {
    height: 100%;
}

.register-account .register-slider .swiper-wrapper .swiper-slide {
    height: 100%;
}

.register-account .container-fluid,
.register-account .register-slider-row,
.register-account .register-slider-area {
    height: 100%;
}

.register-account .register-column {
    height: 100%;
}

@media (max-width: 1199px) {
    .register-account .register-column {
        display: none;
    }
}

.register-account .register-area {
    background-color: #F0F0F0;
    border-radius: 10px;
    padding: 110px 0 30px;
}

@media (max-width: 1899px) {
    .register-account .register-area {
        padding: 100px 0 25px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .register-account .register-area {
        padding: 100px 0 37px;
    }
}

@media (max-width: 1199px) {
    .register-account .register-area {
        padding: 100px 0 38px;
    }
}

@media (max-width: 767px) {
    .register-account .register-area {
        padding: unset;
    }
}

.register-account .register-area .register-wrapper {
    max-width: 648px;
    width: 100%;
    margin: 0 auto 135px;
}

@media (max-width: 1899px) {
    .register-account .register-area .register-wrapper {
        margin: 0 auto 35px;
    }
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .register-account .register-area .register-wrapper {
        max-width: 600px;
        margin: 0 auto 80px;
    }
}

@media (max-width: 1399px) {
    .register-account .register-area .register-wrapper {
        margin: 0 auto 65px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .register-account .register-area .register-wrapper {
        max-width: 480px;
    }
}

@media (max-width: 1199px) {
    .register-account .register-area .register-wrapper {
        margin: 0 auto 95px;
    }
}

@media (max-width: 991px) {
    .register-account .register-area .register-wrapper {
        margin: 0 auto 115px;
    }
}

@media (max-width: 767px) {
    .register-account .register-area .register-wrapper {
        max-width: unset;
        margin: unset;
        padding: 38px;
    }
}

@media (max-width: 576px) {
    .register-account .register-area .register-wrapper {
        padding: 40px 15px;
    }
}

.register-account .register-area .register-wrapper .register-content {
    margin-bottom: 40px;
}

@media (max-width: 1899px) {
    .register-account .register-area .register-wrapper .register-content {
        margin-bottom: 30px;
    }
}

.register-account .register-area .register-wrapper .register-content h2 {
    color: var(--title-color);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 35px;
    line-height: 1;
    margin-bottom: 10px;
}

@media (max-width: 576px) {
    .register-account .register-area .register-wrapper .register-content h2 {
        margin-bottom: 5px;
        font-size: 30px;
    }
}

.register-account .register-area .register-wrapper .register-content span {
    color: var(--text-color);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    margin-bottom: 0;
    display: inline-block;
}

.register-account .register-area .register-wrapper .register-content span a {
    display: inline-block;
    color: var(--primary-color5);
    font-weight: 600;
    background: linear-gradient(to bottom, var(--primary-color5) 0%, var(--primary-color5) 98%);
    background-size: 0px 1.5px;
    background-repeat: no-repeat;
    background-position: left 90%;
    transition: background-size 0.75s;
}

.register-account .register-area .register-wrapper .register-content span a:hover {
    background-size: 100% 1.5px;
    background-position: 0% 90%;
}

.register-account .register-area .register-wrapper .contact-form-wrapper .form-inner input {
    background-color: var(--white-color);
}

.register-account .register-area .register-wrapper .contact-form-wrapper .form-inner input:focus {
    border-color: var(--primary-color1);
}

.register-account .register-area .register-wrapper .contact-form-wrapper .form-inner .nice-select {
    background-color: var(--white-color);
}

.register-account .register-area .register-wrapper .contact-form-wrapper .form-inner .nice-select:focus {
    border-color: var(--primary-color1);
}

.register-account .register-area .register-wrapper .contact-form-wrapper form .form-inner2 {
    margin-bottom: 60px;
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .register-account .register-area .register-wrapper .contact-form-wrapper form .form-inner2 {
        margin-bottom: 30px;
    }
}

@media (max-width: 1399px) {
    .register-account .register-area .register-wrapper .contact-form-wrapper form .form-inner2 {
        margin-bottom: 30px;
    }
}

.register-account .register-area .register-wrapper .contact-form-wrapper .primary-btn1 {
    padding: 20px 41px;
}

@media (max-width: 1199px) {
    .register-account .register-area .register-wrapper .contact-form-wrapper .primary-btn1 {
        padding: 18px 37px;
    }
}

.register-account .register-area .register-wrapper .contact-form-wrapper .primary-btn1 svg {
    fill: var(--white-color);
}

.register-account .register-area .register-wrapper .contact-form-wrapper .primary-btn1:hover svg {
    fill: var(--black-color);
}

.register-account .register-area .register-bottom-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 50px;
}

@media (max-width: 576px) {
    .register-account .register-area .register-bottom-wrap {
        text-align: center;
    }
}

@media (max-width: 767px) {
    .register-account .register-area .register-bottom-wrap {
        padding: 0 50px 20px;
    }
}

.register-account .register-area .register-bottom-wrap p {
    color: var(--text-color);
    font-family: var(--font-Hanken-Grotesk);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    margin-bottom: 0;
}

@media (max-width: 576px) {
    .register-account .register-area .register-bottom-wrap p {
        line-height: 1.2;
    }
}

.register-account .register-area .register-bottom-wrap p a {
    color: var(--primary-color5);
}

.register-account input[type=checkbox]:checked {
    background-color: var(--primary-color5);
    border: unset;
}

/*# sourceMappingURL=style.css.map */












/* ================= PLACEMENT LOGOS ================= */

.partner-section {
    padding: 50px 20px;
}

.partners-section {
    padding: 70px 20px;
    text-align: center;
}

.partners-section .tag {
    display: inline-block;
    padding: 6px 18px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 10px;
    color: #555;
}

.partners-section h2 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 45px;
}

/* ===== MARQUEE WRAPPER ===== */
.partners-marquee {
    overflow: hidden;
    width: 100%;
    position: relative;
}

/* ===== TRACK BASE ===== */
.partners-track {
    display: flex;
    gap: 60px;
    width: max-content;
    margin-bottom: 40px;
}

/* ===== LOGOS ===== */
.partners-track img {
    height: 45px;
    width: auto;
    flex-shrink: 0;

    /* REMOVE ANY GLOBAL GRAYSCALE */
    filter: none !important;
    opacity: 1 !important;

    transition: 0.3s;
}

/* HOVER EFFECT */
.partners-track img:hover {
    transform: scale(1.05);
}

/* ===== ANIMATIONS ===== */

/* Row 1 → LEFT */
.track-left {
    animation: scroll-left 25s linear infinite;
}

/* Row 2 → RIGHT */
.track-right img {
    height: 33px;     /* reduce size */
    width: auto;
    object-fit: contain;
}

.track-right {
    animation: scroll-right 25s linear infinite;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

/* PAUSE ON HOVER */
.partners-marquee:hover .partners-track {
    animation-play-state: paused;
}

/* ===== OPTIONAL FADE EDGES (premium look) ===== */
.partners-marquee::before,
.partners-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    z-index: 2;
}

.partners-marquee::before {
    left: 0;
    background: linear-gradient(to right, #f5f7fb, transparent);
}

.partners-marquee::after {
    right: 0;
    background: linear-gradient(to left, #f5f7fb, transparent);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
    .partners-section h2 {
        font-size: 28px;
    }

    .partners-track {
        gap: 30px;
    }

    .partners-track img {
        height: 35px;
    }
}

@media (max-width: 767px) {

    .partner-section {
        padding: 30px 15px;
    }

    .partners-section {
        padding: 70px 15px;
        text-align: center;
    }

}





/* HERO SECTION */
.hero-with-form {
  margin-top: 0;
  position: relative;
  background: url('../img/hero.png') center/cover no-repeat;
  min-height: 600px;
  display: flex;
  align-items: center;
}

/* overlay */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

/* container */
.hero-container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 300px;
  padding: 100px 20px 60px;
}

/* LEFT CONTENT */
.hero-content {
  max-width: 520px;
  color: #fff;
}

.hero-content h1 {
  font-size: 44px;
  line-height: 1.2;
  margin-bottom: 15px;
  text-align: left;
  text-shadow: 0 3px 15px rgba(0,0,0,0.4);
  color: #ffffff;
}

.hero-content p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 12px;
  text-align: left;
  opacity: 0.95;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
  color: #ffffff;
}

/* RIGHT FORM */
.hero-form {
  margin-top: 40px;
  background: #fff;
  padding: 22px;
  border-radius: 12px;
  width: 300px; /* slightly smaller */
  box-shadow: 0 15px 40px rgba(0,0,0,0.15);

  /* clean positioning */
  margin-left: auto;
}

/* form title */
.hero-form h3 {
  margin-bottom: 10px;
  color: #000;
  font-size: 20px;
}

/* subtext */
.form-subtext {
  font-size: 13px;
  margin-bottom: 12px;
  color: #666;
}

/* inputs */
.hero-form input,
.hero-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
}

/* textarea */
.hero-form textarea {
  height: 70px;
  resize: none;
}

/* button */
.hero-form button {
  width: 100%;
  padding: 11px;
  background: #1e73e8;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* animation */
.hero-form {
  animation: fadeUp 0.6s ease;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* MOBILE */
@media (max-width: 768px) {
  .hero-container {
    flex-direction: column;
    text-align: center;
    gap: 30px;
    padding: 80px 20px;
  }

  .hero-content h1,
  .hero-content p {
    text-align: center;
  }

  .hero-form {
    width: 100%;
  }

  .hero-with-form {
    margin-top: 70px;
  }
}






.home .header-topbar-wrap .category-list-area .category-list li a {
    color: #000000;
}






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

/* SECTION BG */
.contact-section {
  padding: 50px 0;
}

/* HEADER ROW */
.section-header-row {
  margin-bottom: 40px;
}

/* SMALL TITLE */
.sub-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #0d6efd;
  text-transform: uppercase;
}

.sub-title svg{
    fill: #0d6efd;
}

/* BIG HEADING */
.main-heading {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

/* SPACING */
.mt-60 {
  margin-top: 60px;
}

/* ================= FORM ================= */

.order-form {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* INPUTS */
.order-form input,
.order-form textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

/* BUTTON */
.order-form button {
  width: 100%;
  padding: 12px;
  background: #2d6cdf;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  transition: 0.3s;
}

.order-form button:hover {
  background: #0d6efd;
}

/* ================= CONTACT INFO ================= */

.contact-info {
  padding-top: 10px;
}

/* TEXT */
.contact-info p {
  margin-bottom: 10px;
  font-size: 16px;
  color: #444;
}

.contact-info p strong {
  color: #0d6efd;
  font-weight: 600;
}

/* EMAIL LINK */
.contact-info p a {
  color: #333;
  text-decoration: none;
  transition: 0.3s;
}

.contact-info p a:hover {
  color: #0d6efd;
}

/* ================= SOCIAL ICONS ================= */

.social-icons {
  display: flex;
  gap: 15px; /* improved spacing */
  margin-top: 20px;
}

.social-icons a {
  width: 42px;
  height: 42px;
  background: #2d6cdf;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  transition: 0.3s ease;
}

.social-icons a:hover {
  transform: translateY(-3px);
  background: #0d6efd;
}

/* ================= MAP ================= */

.map-box {
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.map-box iframe {
  display: block;
  width: 100%;
  height: 210px;
  border: 0;
}

/* ================= MOBILE ================= */
@media (max-width: 767px) {

  /* SECTION */
  .contact-section {
    padding: 35px 0;
  }

  /* HEADER */
  .section-header-row {
    margin-bottom: 25px;
    text-align: center;
  }

  /* SMALL TITLE */
  .sub-title {
    justify-content: center;
    font-size: 28px;
    gap: 6px;
    margin-bottom: 10px;
  }

  /* BIG HEADING */
  .main-heading {
    font-size: 22px;
    line-height: 1.35;
    text-align: center;
  }

  /* SPACING */
  .mt-60 {
    margin-top: 35px;
  }

  /* FORM */
  .order-form {
    padding: 18px;
    border-radius: 10px;
  }

  .order-form input,
  .order-form textarea {
    padding: 11px;
    font-size: 14px;
  }

  .order-form button {
    padding: 11px;
    font-size: 14px;
  }

  /* CONTACT INFO */
  .contact-info {
    text-align: center;
    padding-top: 0;
    margin-top: 30px;
  }

  .contact-info p {
    font-size: 15px;
  }

  /* SOCIAL ICONS */
  .social-icons {
    justify-content: center;
    gap: 12px;
  }

  .social-icons a {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }

  /* MAP */
  .map-box iframe {
    height: 180px;
  }

}








/* FOOTER CSS */
/* =========================
   FOOTER BASE
========================= */
.resume-footer {
  position: relative;
  background: linear-gradient(135deg, #0f2027 0%, #203a43 40%, #2c5364 100%);
  padding: 60px 20px 25px;
  overflow: hidden;
  color: #fff;
}

/* 🔥 subtle glow overlay */
.resume-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(30,115,232,0.25), transparent 40%),
              radial-gradient(circle at 80% 30%, rgba(0,200,255,0.2), transparent 50%);
  pointer-events: none;
}

/* CONTAINER */
.resume-footer-container {
  max-width: 1200px;
  margin: auto;
  position: relative;
  z-index: 2;
}

/* =========================
   GRID
========================= */
.resume-footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
}

/* =========================
   BRAND
========================= */
.rf-logo {
  margin-bottom: 25px;
  width: 100%;
  height: auto;
    filter: brightness(0) invert(1);
}

.rf-desc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
  margin-bottom: 15px;
  margin-top: 15px;
}

/* =========================
   TITLES
========================= */
.rf-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #ffffff;
}

/* =========================
   LINKS
========================= */
.rf-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rf-links li {
  margin-bottom: 10px;
}

.rf-links a {
  text-decoration: none;
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  transition: 0.3s ease;
}

.rf-links a:hover {
  color: #ffffff;
  transform: translateX(4px);
}

/* =========================
   CONTACT
========================= */
.rf-contact {
  font-size: 14px;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.8);
}

/* =========================
   SOCIAL ICONS
========================= */
.rf-socials {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.rf-socials a {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #1e73e8, #00c6ff);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 14px;
  transition: 0.3s ease;
}

.rf-socials a:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0,198,255,0.4);
}






/* =========================
   BOTTOM
========================= */
.resume-footer-bottom {
  margin-top: 40px;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.resume-footer-bottom p {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}

/* =========================
   BOTTOM LINKS
========================= */
.rf-bottom-links {
  display: flex;
  gap: 15px;
}

.rf-bottom-links a {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: 0.3s;
}

.rf-bottom-links a:hover {
  color: #ffffff;
}

/* Designed By */
.designed-by{
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin: 0;
}

.designed-by a{
  color: #0D6EFD;
  text-decoration: none;
  transition: 0.3s;
}

.designed-by a:hover{
  color: #ffffff;
}
/* =========================
   RESPONSIVE
========================= */

@media (max-width: 991px){

  .resume-footer{
    padding: 50px 15px 20px;
  }

  .resume-footer-top{
    grid-template-columns: 1fr 1fr;
    gap: 35px 25px;
  }

  .rf-logo{
    max-width: 180px;
  }

  .rf-desc{
    font-size: 16px;
    line-height: 1.7;
  }

  .rf-title{
    font-size: 24px;
    margin-bottom: 12px;
  }

  .rf-links a,
  .rf-contact{
    font-size: 16px;
  }

  .rf-socials a{
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .resume-footer-bottom{
    margin-top: 30px;
    gap: 12px;
  }

}

/* =========================
   MOBILE
========================= */

@media (max-width: 576px){

  .resume-footer{
    padding: 45px 15px 20px;
    text-align: center;
  }

  .resume-footer-top{
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .rf-logo{
    margin: 0 auto 20px;
    max-width: 170px;
  }

  .rf-desc{
    margin-top: 12px;
    margin-bottom: 15px;
  }

  .rf-links li{
    margin-bottom: 8px;
  }

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

  .resume-footer-bottom{
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .rf-bottom-links{
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  .resume-footer-bottom p,
  .rf-bottom-links a,
  .designed-by{
    font-size: 14px;
  }

}







/* Floating Whastapp css */
.whatsapp-float {
    position: fixed;
    left: 20px;
    bottom: 20px;
    width: 55px;
    height: 55px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
    transition: 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

.whatsapp-float {
    animation: pulse 1.8s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}


@media (max-width: 767px) {

    .whatsapp-float {
        width: 50px;
        height: 50px;
        left: 15px;
        bottom: 25px;
    }

    .whatsapp-float img,
    .whatsapp-float i {
        font-size: 24px;
        width: 24px;
        height: 24px;
    }

}




.border1 {
    border: 1px solid #e5e7eb; /* light grey */
    padding: 25px;
    border-radius: 10px;
    background: #ffffff;
    height: 670px;
}






/* SAMPLE RESUME CSS */

.device-showcase {
  gap: 40px;
  justify-content: center;
  padding: 60px 20px;
}

/* Tablet frame */
.device {
  width: 270px;
  height: 380px;
  border-radius: 30px;
 padding: 5px 6px 10px 6px; /* top right bottom left */
  background: #111;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  overflow: hidden;
  position: relative;
}

/* Screen area */
.screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  position: relative;
}

/* Website image */
.screen img {
  width: 100%;
  display: block;
  transition: transform 6s linear;
}

/* 🔥 Hover scroll effect */
/* .device:hover .screen img {
  transform: translateY(-70%);
} */

.img-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.img-lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
}

.img-lightbox.active {
  display: flex;
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}


@media (max-width: 767px) {     

    .resume-showcase-section{
        margin-bottom: 80px;
    }

    .device-showcase {
        gap: 20px;
        padding: 30px 10px;
        flex-direction: column;
        align-items: center;
    }

    .device {
        width: 220px;
        height: 320px;
        border-radius: 24px;
        padding: 4px 5px 8px 5px;
    }

    .screen {
        border-radius: 16px;
    }

    .img-lightbox img {
        max-width: 95%;
        max-height: 85%;
    }

    .close-btn {
        top: 15px;
        right: 20px;
        font-size: 32px;
    }

}

.resume-content ul{
    height:350px
}


@media (min-width: 982px) {
.home1-contact-section{
    margin-top: -85px ;
}
}

/* MEDIA QUERY */

@media (max-width: 767px) {
    .step-number span[style]{
        margin-left: 15px !important;
    }
}

@media (max-width: 767px){

    .myResumeSwiper{
        padding-left: 15px;
        padding-right: 15px;
    }

    .myResumeSwiper .swiper-slide{
        display: flex;
        justify-content: center;
    }

}






/* BREADCRUMB */

.breadcrumb-section{
    position: relative;
    padding: 140px 20px;
    background: #f4f7fc;
    overflow: hidden;
    text-align: center;
}

.breadcrumb-content{
    position: relative;
    z-index: 2;
}


.breadcrumb-content h1{
    font-size: 60px;
    font-weight: 700;
    color: #1f2b52;
    margin-bottom: 20px;
}

.breadcrumb-list{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.breadcrumb-list li{
    font-size: 18px;
    color: #0D6EFD;
    position: relative;
}

.breadcrumb-list li a{
    text-decoration: none;
    color: #4a5568;
}

.breadcrumb-list li:not(:last-child)::after{
    content: "/";
    margin-left: 14px;
    color: #999;
}

/* Floating Icons */
.breadcrumb-icon{
    position: absolute;
    opacity: 0.8;
    z-index: 1;
    animation: floatIcon 4s ease-in-out infinite;
}

.breadcrumb-icon img{
    width: 140px;
    height: auto;
}

/* Cleaning */
.cleaning-icon{
    top: 50px;
    left: 80px;
    animation-delay: 0s;
}

/* Delivery */
.delivery-icon{
    bottom: 30px;
    left: 180px;
    animation-delay: 1s;
}

/* Equipment */
.equipment-icon{
    top: 60px;
    right: 100px;
    animation-delay: 2s;
}

/* Floating Animation */
@keyframes floatIcon {
    0%{
        transform: translateY(0px) rotate(0deg);
    }

    50%{
        transform: translateY(-12px) rotate(2deg);
    }

    100%{
        transform: translateY(0px) rotate(0deg);
    }
}

.section-title-arrow{
    font-size: 48px;
    font-weight: 800;
    color: #0D6EFD;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-transform: uppercase;
    line-height: 1;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 20px;
}

.arrow-icon{
    font-size: 28px;
    transform: translateY(-6px);
}

@media (max-width: 767px){

    .section-title-arrow{
        font-size: 34px;
    }

    .arrow-icon{
        font-size: 22px;
    }

}

@media (max-width: 767px){

    .breadcrumb-section{
        padding: 90px 15px;
    }

    .breadcrumb-content h1{
        font-size: 38px;
    }

    .breadcrumb-list li{
        font-size: 15px;
    }

    .breadcrumb-icon img{
        width: 70px;
    }

    .cleaning-icon{
        top: 20px;
        left: 20px;
    }

    .delivery-icon{
        bottom: 20px;
        left: 20px;
    }

    .equipment-icon{
        top: 20px;
        right: 20px;
    }

}