/*
  Theme Name: HTML Template
  Author: mohasagorit.solutions
  Support: info@mohasagorit.solutions
  Description: Creative  HTML5 template.
  Version: 1.0
*/

/* CSS Index
-----------------------------------
1. Google Fonts
2. Theme Default
3. Section Heading
4. Header
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
*/

/*
==========================================
    Google Fonts
==========================================
*/
/* font-family: 'Rubik', sans-serif;  */
/* @import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800&display=swap"); */

@import url("https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

/*
==========================================
    Theme Default Css
==========================================
*/

.clients_card_area a {
    width: 100%;
    aspect-ratio: 1/ 0.6;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    padding: 10px;
}
.clients_card_area a img {
    max-height: 100%;
    width: auto !important;
}

* {
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-family-primary);
    font-weight: normal;
    font-style: normal;
    font-size: 16px;
    line-height: 26px;
    color: var(--black);
}

:root {
    --themeColor: #ef5322;
    --white: #ffffff;
    --black: #212c4f;
    --text: #6c757d;
    --shadow: -1px 5px 20px 0px rgb(82 90 101 / 10%);
    --border: #e7e9f0;
    --font-family-primary: "Albert Sans", sans-serif;
    --font-family-secondary: "Montserrat", sans-serif;

    --theme-soft: #fde7e2;
    --mint: #1b8f6b;
    --mint-soft: #e3f3ec;
    --paper: #f7f5f0;
    --radius6: 6px;
    --radius12: 12px;
}

img {
    max-width: 100%;
}

p {
    color: var(--black);
}

a,
.button {
    -webkit-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

a:focus,
.button:focus {
    text-decoration: none;
    outline: none;
}

button:focus,
input:focus,
input:focus,
textarea,
textarea:focus {
    outline: 0;
}

.form-control:focus {
    border-color: inherit !important;
    -webkit-box-shadow: none;
    box-shadow: none !important;
}

a {
    text-decoration: none;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--allHeadingColor);
}

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

*::-moz-placeholder {
    color: #555555;
    opacity: 1;
    font-size: 14px;
}

*::-webkit-input-placeholder {
    color: #555555;
    opacity: 1;
    font-size: 14px;
}

*:-ms-input-placeholder {
    color: #555555;
    opacity: 1;
    font-size: 14px;
}

*::-ms-input-placeholder {
    color: #555555;
    opacity: 1;
    font-size: 14px;
}

*::placeholder {
    color: #555555;
    opacity: 1;
    font-size: 14px;
}

*::-moz-selection {
    background: #ffffff;
    color: #fff;
    text-shadow: none;
}

::-moz-selection {
    background: #ffffff;
    color: #fff;
    text-shadow: none;
}

.section_padding {
    padding: 100px 0px;
}

.section_padding_top {
    padding-top: 100px;
}

.section_padding_bottom {
    padding-bottom: 100px;
}

.section_margin_top {
    margin-top: 100px;
}

.section_top_space {
    padding-top: 50px;
}

.theme_color {
    color: var(--themeColor);
}

/*
==============================================================
    Common Button Css
==============================================================
*/

/* button one */
.common_btn {
    text-align: center;
    line-height: 0px;
}

.common_btn .common_btn_link {
    position: relative;
    display: inline-block;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: 0.05em;
    background: var(--themeColor);
    color: var(--white);
    border-radius: 5px;
    overflow: hidden;
    border: none;
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

.common_btn .common_btn_link:hover {
    background: var(--themeColor);
    color: var(--themeColor);
}

.common_btn .common_btn_link i {
    position: relative;
    display: inline-block;
    font-size: 14px;
    margin-left: 3px;
}

.common_btn .common_btn_link .common_btn_icon {
    position: absolute;
    right: -15px;
    top: 0;
    width: 26px;
    height: 100%;
    background: var(--black);
    opacity: 0.2;
    z-index: 0;
    transform: skewX(-22deg);
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.common_btn .common_btn_link:hover .common_btn_icon {
    opacity: 1;
    right: 0;
    width: 100%;
    transform: skewX(0);
}

.common_btn .common_btn_link .common_btn_title {
    position: relative;
    display: block;
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
    letter-spacing: 0;
    padding: 8px 25px;
    z-index: 1;
}

/* button two */
.common_btn_two {
    text-align: center;
    line-height: 0px;
}

.common_btn_two .common_btn_two_link {
    position: relative;
    display: inline-block;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: 0.05em;
    background: var(--white);
    color: var(--themeColor);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--black);
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

.common_btn_two .common_btn_two_link:hover {
    background: var(--themeColor);
    color: var(--themeColor);
}

.common_btn_two .common_btn_two_link i {
    position: relative;
    display: inline-block;
    font-size: 14px;
    margin-left: 3px;
}

.common_btn_two .common_btn_two_link .common_btn_two_icon {
    position: absolute;
    right: -15px;
    top: 0;
    width: 26px;
    height: 100%;
    background: var(--black);
    opacity: 0.2;
    z-index: 0;
    transform: skewX(-22deg);
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.common_btn_two .common_btn_two_link:hover .common_btn_two_icon {
    opacity: 1;
    right: 0;
    width: 100%;
    transform: skewX(0);
}

.common_btn_two .common_btn_two_link .common_btn_two_title {
    position: relative;
    display: block;
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
    letter-spacing: 0;
    padding: 8px 25px;
    z-index: 1;
}

.mobile_menu .minus_ {
    display: none;
}

.mobile_menu li.active .plus_ {
    display: none;
}

.mobile_menu li.active .minus_ {
    display: inline-block;
}

/*
==============================================================
    Whatsapp Icon Css
==============================================================
*/
.fixed_footer_whatsapp_icon {
    position: relative;
    background-color: #0dc043;
    color: var(--white);
    width: 40px;
    height: 40px;
    line-height: 44px;
    text-align: center;
    border-radius: 100%;
    position: fixed;
    bottom: 80px;
    right: 15px;
    z-index: 99;
}

.fixed_footer_whatsapp_icon .whatsapp_icon {
    color: var(--white);
    font-size: 25px;
}

.whatsapp_close i {
    position: absolute;
    top: -14px;
    right: -1px;
    color: var(--black);
    font-size: 18px;
    cursor: pointer;
}

.whatsapp_toggle {
    display: none;
}

/*
==============================================================
    Section Heading Css
==============================================================
*/
.section_title {
    position: relative;
}

.section_title h2 {
    position: relative;
    font-size: 36px;
    display: block;
    color: var(--black);
    font-weight: 600;
    margin-bottom: 0;
}

.section_title h1 {
    position: relative;
    font-size: 45px;
    display: block;
    color: var(--black);
    font-weight: 600;
    margin-bottom: 0;
}

.section_subtitle {
    margin-top: 20px;
}

.section_subtitle p {
    font-size: 18px;
    line-height: 26px;
    color: var(--text);
}

.title_animation {
    background-image: linear-gradient(
        -225deg,
        #f15029 0%,
        #f15029 29%,
        #103c54 67%,
        #fff800 100%
    );
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: banner_title 2s linear infinite;
    display: inline-block;
}

@keyframes banner_title {
    to {
        background-position: 200% center;
    }
}

/*
==============================================================
    Header Area Css
==============================================================
*/
header {
    margin-bottom: 40px;
}

.header_bottom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    transition: 0.6s;
    z-index: 11;
    height: 70px;
    /* background: #fff; */
    /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
}

.sticky_header.fixed {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    /* height: 80px; */
    z-index: 999;
    -webkit-animation-name: fixedHeader;
    animation-name: fixedHeader;
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
    background-color: var(--white);
    -webkit-box-shadow: var(--shadow);
    box-shadow: var(--shadow);
}

@-webkit-keyframes fixedHeader {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px);
    }

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

@keyframes fixedHeader {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px);
    }

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

.header_mobile_device {
    display: none;
}

.header_table_cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header_logo {
    width: 200px;
    float: left;
}

.header_logo img {
    max-width: 100%;
    max-height: 100%;
}

.main_menu ul {
    margin: 0;
    padding: 0;
}

.main_menu ul li {
    display: inline-block;
    line-height: 50px;
    margin-left: 25px;
}

.main_menu ul li .main_menu_link {
    font-size: 17px;
    font-weight: 500;
    color: var(--black);
    position: relative;
    text-transform: capitalize;
    transition: color 0.3s ease;
}

.main_menu ul li:hover > .main_menu_link {
    color: #ff4d03;
}

.main_menu > ul > li .sub_menu {
    position: absolute;
    z-index: 500;
    background-color: #ffffff;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 20px 30px;
    transition: all 0.5s ease;
    opacity: 0;
    visibility: hidden;
    text-align: left;
    max-width: 1270px;
    width: 100%;
    padding: 20px 15px;
    display: flex;
    flex-wrap: wrap;
    left: 50%;
    top: 120%;
    transform: translateX(-50%);
    border-radius: 10px;
    z-index: 99;
}

.main_menu > ul > li:hover .sub_menu {
    visibility: visible;
    opacity: 1;
    top: 100%;
}

/* mega menu */
.sub_menu_item {
    flex: 0 0 33.33%;
    padding: 0 15px;
    transition: 0.4s;
}

.sub_menu_item ul {
    margin: 0;
    padding: 0;
}

.sub_menu_item > ul > li {
    line-height: 1px;
    display: block;
    margin-left: 0px;
}

.sub_menu_link {
    padding: 10px 0;
    display: inline-block;
    font-size: 14px;
    color: var(--black);
    transition: color 0.3s ease;
}

.sub_menu_link:hover {
    color: var(--themeColor);
}

.menu_product {
    display: flex;
    align-items: center;
    gap: 10px;
}
.menu_product_icon {
    width: 25px;
}

.menu_product_icon img {
    max-width: 25px;
    height: auto;
}

.menu_product_title h5 {
    font-size: 15px;
    font-weight: 400;
    color: #000000;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.sub_menu_item:hover .menu_product_title h5 {
    color: var(--themeColor);
}

.menu_product_subtitle {
    margin-top: 5px;
}

.menu_product_subtitle p {
    line-height: 20px;
    font-size: 14px;
    color: var(--text);
}

.header_sticky {
    background: #ffffff;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    height: 70px;
}

/*
==============================================================
    Banner Area Css
==============================================================
*/
.banner_area {
    position: relative;
    overflow: hidden;
    padding-top: 120px;
    /* padding-bottom: 40px; */
}

.banner_area::before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 533px;
    height: 684px;
    max-width: 100%;
    z-index: -1;
    pointer-events: none;
    /* background-image: radial-gradient(
        at center center,
        #fff7c087 32%,
        #e6eff600 82%); */
}

.banner_area::after {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background-color: transparent;
    /* background-image: url("/images/hero-bg-pattern.svg"); */
    background-image: url("https://i.ibb.co.com/wNhdKWBZ/post-grid-hero-shape.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;
    top: 32px;
}

.banner_content_table_cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.banner_content {
    z-index: 1;
    text-align: center;
}

.banner_title h1 {
    font-size: 42px;
    line-height: 1.2em;
    font-weight: 700;
    text-align: center;
    color: #101517;
}

.banner_title .highlight {
    color: var(--themeColor);
}

.banner_description {
    margin-top: 20px;
    margin-bottom: 20px;
}

.banner_description p {
    color: var(--black);
    font-size: 18px;
    line-height: 24px;
    max-width: 100%;
    margin: 0 auto;
    font-weight: 400;
}

.banner_cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.btn_banner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    padding: 10px 26px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn_banner svg,
.btn_banner .arrow {
    transition: transform 0.3s ease;
}

.btn_banner:hover svg,
.btn_banner:hover .arrow {
    transform: translateX(4px);
}

.btn_banner--primary {
    background: var(--themeColor);
    color: var(--white);
    border: 1px solid var(--themeColor);
    box-shadow: var(--shadow);
}

.btn_banner--primary:hover {
    background: transparent;
    color: var(--themeColor);
}

.btn_banner--outline {
    background: transparent;
    color: var(--themeColor);
    border: 1px solid var(--themeColor);
}

.btn_banner--outline:hover {
    background: var(--themeColor);
    color: var(--white);
}

.introduction_video_content {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0px auto;
    margin-top: 40px;
    padding: 10px;
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: var(--shadow);
    aspect-ratio: 16 / 7;
    transition: max-width 0.4s ease, padding 0.4s ease;
}

.introduction_video_content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.introduction_video_content.is_playing {
    max-width: 100%;
    width: 100%;
    padding: 0;
}

.youtube_video {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}

.introduction_video_content.is_playing .youtube_video {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px;
}

.youtube_video iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.youtube_video_close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: var(--white);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s ease;
}

.youtube_video_close:hover {
    background: var(--themeColor);
}

/* Light overlay on image */
/* .introduction_video_content::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0.35) 100%
    );
    border-radius: 10px;
    z-index: 1;
    pointer-events: none;
} */

.introduction_video_icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.introduction_video_icon_link {
    background: var(--white);
    height: 70px;
    width: 70px;
    text-align: center;
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--themeColor);
    position: relative;
    transition: 0.3s ease;
    border: none;
    animation: water-move 2.5s ease-out infinite;
}

/* Subtle water ripple effect */
.introduction_video_icon_link::before,
.introduction_video_icon_link::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);

    z-index: -1;
}

.introduction_video_icon_link::after {
    animation-delay: 1.2s;
}

/* Ripple animation keyframes */
@keyframes water-move {
    0% {
        box-shadow: 0 0 0 0 hsla(0, 0%, 100%, 0.1),
            0 0 0 10px hsla(0, 0%, 100%, 0.1), 0 0 0 20px hsla(0, 0%, 100%, 0.1);
    }

    100% {
        box-shadow: 0 0 0 10px hsla(0, 0%, 100%, 0.1),
            0 0 0 20px hsla(0, 0%, 100%, 0.1), 0 0 0 30px hsla(0, 0%, 100%, 0);
    }
}

.introduction_video_icon_link:hover {
    color: var(--white);
    background: var(--themeColor);
}

.trusted_by {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    margin-bottom: 20px;
}

.trusted_by_avatars {
    display: flex;
    align-items: center;
}

.trusted_by_avatars img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--white);
    margin-left: -14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.trusted_by_avatars img:first-child {
    margin-left: 0;
}

.trusted_by_avatars .trusted_by_plus {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--themeColor);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    border: 3px solid var(--white);
    margin-left: -14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.trusted_by_text {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 2px;
}

.trusted_by_text span {
    font-family: var(--font-family-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text);
    text-transform: uppercase;
}

.trusted_by_text h5 {
    font-family: var(--font-family-primary);
    font-size: 18px;
    font-weight: 700;
    color: var(--black);
    margin: 0;
}

.trusted_by_text h5 strong {
    color: var(--themeColor);
    font-weight: 700;
}
.review_badge {
    display: inline-flex;
    align-items: center;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 8px 20px;
    box-shadow: var(--shadow);
    gap: 16px;
    font-family: var(--font-family-secondary);
    flex-wrap: wrap;
}

.review_badge_item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.review_badge_clients_icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--themeColor);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.review_badge_rating {
    font-size: 14px;
    font-weight: 700;
    color: var(--black);
    white-space: nowrap;
}

.review_badge_rating strong {
    font-weight: 800;
}

.review_badge_stars {
    display: flex;
    align-items: center;
    gap: 2px;
}

.review_badge_stars i {
    color: #ffb400;
    font-size: 13px;
}

.review_badge_count {
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
}

.review_badge_platform {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--black);
    white-space: nowrap;
}

.review_badge_platform .google_icon {
    width: 20px;
    height: 20px;
}

.review_badge_divider {
    width: 1px;
    height: 28px;
    background: var(--border);
}

@media (max-width: 576px) {
    .review_badge {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 20px;
        border-radius: var(--radius12);
    }

    .review_badge_divider {
        width: 100%;
        height: 1px;
    }
    .trusted_by {
        display: none;
    }
    .banner_area {
        padding-top: 100px;
    }

    .introduction_video_content {
        aspect-ratio: 16 / 10;
    }
}

/*
==============================================================
    Business Platform Area Css
==============================================================
*/
.business_platform_content {
    padding: 30px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    border-radius: 3px;
}

.business_platform_title {
    padding-bottom: 20px;
}

.business_platform_title p {
    font-size: 24px;
    font-weight: 500;
}

/*
==============================================================
    Our Product Area Css
==============================================================
*/
.our_product_nav {
    justify-content: center;
    margin-bottom: 50px;
}

.our_product_nav_pills .our_product_nav_link.active,
.our_product_nav_pills .show > .our_product_nav_link {
    color: #fff;
    background-color: var(--themeColor);
}

.our_product_nav_item {
    margin-right: 10px;
}

.our_product_nav_item:last-child {
    margin-right: 0px;
}

.our_product_nav_pills .our_product_nav_link {
    background-color: #ebe3e1;
    border: 0;
    border-radius: 0.25rem;
    font-weight: 300;
    font-size: 16px;
    color: var(--themeColor);
}

.single_product_tab_content {
    padding: 20px;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    background-color: var(--white);
    height: 100%;
    display: block;
    overflow: hidden;
    margin-bottom: 10px;
}
.product_tab_link {
    display: block;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.product_tab_title h5 {
    transition: 0.3s;
}

.single_product_tab_content:hover
    .product_tab_link
    .product_tab_details
    .product_tab_title
    h5 {
    color: var(--themeColor);
}

.product_tab_icon {
    width: 30px;
    height: 30px;
    display: block;
    overflow: hidden;
    float: left;
}

.product_tab_icon img {
    width: 100%;
    height: 100%;
}

.product_tab_details {
    display: block;
    overflow: hidden;
    padding-left: 10px;
}

.product_tab_title h5 {
    text-transform: capitalize;
    font-size: 18px;
    color: var(--black);
}

.product_tab_description {
    margin-top: 5px;
}

.product_tab_description P {
    font-size: 15px;
    line-height: 20px;
}

/*
==============================================================
    Client Say Area Css
==============================================================
*/
.clients_say_content {
    position: relative;
    padding-top: 80px;
    height: 100%;
}

.clients_say_details {
    background: #ffffff;
    box-shadow: 2px 1px 15px rgba(0, 0, 0, 0.1);
    padding: 50px 40px 50px 40px;
    border-radius: 10px;
    height: 100%;
}

.clients_say_title_star {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.clients_say_title h2 {
    font-size: 22px;
    font-weight: 400;
}

.clients_say_star span i {
    color: var(--themeColor);
    font-size: 14px;
    background: var(--linear_gradient);
    box-shadow: 5px 5px 15px #d1d9e6, -5px -5px 15px #ffffff;
    padding: 8px;
}

.clients_say_description {
    margin-top: 25px;
}

.clients_say_description p {
    color: var(--text);
    font-size: 16px;
    line-height: 30px;
}

.clients_say_image img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.single_client_say {
    padding: 20px;
}

.clients_say_image_content {
    background: #ffffff;
    box-shadow: 2px 1px 15px rgba(0, 0, 0, 0.1);
    padding: 40px;
    border-radius: 10px;
    height: 100%;
}

.clients_say_client_name h3 {
    font-size: 22px;
    text-align: center;
}

.clients_say_client_name {
    text-align: center;
    margin-top: 15px;
}

.clients_say_client_designation h6 {
    font-size: 14px;
    text-align: center;
    color: var(--text);
}

.clients_say_client_designation {
    margin-top: 5px;
}

.client_say_active .owl-nav {
    position: absolute;
    top: 20px;
    right: 20px;
}

.client_say_active .owl-nav .owl-prev {
    position: absolute;
    top: 0;
    right: 65px;
    background: #ffffff;
    box-shadow: 2px 1px 15px rgba(0, 0, 0, 0.1);
    padding: 10px 18px;
    font-size: 18px;
    border-radius: 3px;
    transition: 0.3s;
}

.client_say_active .owl-nav .owl-prev:hover {
    color: var(--themeColor);
}

.client_say_active .owl-nav .owl-next {
    position: absolute;
    top: 0;
    right: 0;
    background: #ffffff;
    box-shadow: 2px 1px 15px rgba(0, 0, 0, 0.1);
    padding: 10px 18px;
    font-size: 18px;
    border-radius: 3px;
    transition: 0.3s;
}

.client_say_active .owl-nav .owl-next:hover {
    color: var(--themeColor);
}

.client_say_active .clients_say_icon img {
    width: 65px;
    position: absolute;
    top: 0;
    left: 0;
}

/* new client say area css */

.client_say_content {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 15px;
}
.client_say_text p {
    line-height: 1.5;
    font-size: 16px;
    margin: 20px 0px;
    height: 190px;
    overflow: hidden;
}
.client_img_name_designation {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 85px);
}
.client_name_with_designation {
    width: calc(100% - 70px);
}
.client_image {
    width: 50px !important;
    height: 50px;
}

.client_image img {
    width: 50px !important;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.client_name_with_designation h4 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
    margin-bottom: 5px;
}
.client_name_with_designation h5 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    color: #555;
}
.client_company_logo {
    width: 70px !important;
    height: 80px !important;
    align-content: center;
}
.client_company_logo img {
    max-height: 100%;
    max-width: 100%;
}
.client_info {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: space-between;
    width: 100%;
}

/*
==============================================================
    Glance Area Css
==============================================================
*/
.single_glance {
    text-align: center;
}

.glance_icon img {
    width: 50px;
    height: 50px;
}

.glance_counter {
    margin-top: 20px;
    margin-bottom: 20px;
}

.glance_counter h2 {
    font-size: 40px;
    font-weight: 600;
}

.glance_title h5 {
    font-size: 20px;
    color: var(--text);
}

/*
==============================================================
    Blog Area Css
==============================================================
*/
.see_more_btn {
    position: absolute;
    top: 0;
    right: 12px;
}

.see_more_btn .common_btn .common_btn_link .common_btn_title {
    position: relative;
    display: block;
    font-size: 16px;
    line-height: 27px;
    font-weight: 600;
    letter-spacing: 0;
    padding: 6px 20px;
    z-index: 1;
    text-transform: uppercase;
}

.blog_contents {
    padding: 20px;
    display: flex;
    align-items: start;
    flex-direction: column;
}

.blog_description {
    flex: 1 1 auto;
    color: #4b5563 !important;
    font-size: 17px !important;
    font-weight: 300 !important;
}

.blog_description p {
    color: #4b5563 !important;
    font-size: 17px !important;
    font-weight: 300 !important;
}

.blog_description p span {
    color: #4b5563 !important;
    font-size: 17px !important;
    font-weight: 300 !important;
}

.single_blog {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 10px;
    background-color: var(--white);
    height: 100%;
}

.blog_image img {
    border-radius: 10px 10px 0px 0px;
    width: 100%;
    max-height: 180px;
}

.blog_title h3 {
    font-size: 22px;
    color: var(--black);
}

.blog_description p {
    line-height: 21px;
}

.blog_description {
    margin-top: 10px;
    margin-bottom: 10px;
}

.blog_btn {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.blog_service_name p {
    font-size: 14px !important;
    color: #000 !important;
    background-color: #f9fafb !important;
    padding: 4px 12px;
    border-radius: 25px;
    margin-bottom: 10px;
    font-weight: 400;
}

.blog_btn_link {
    color: var(--themeColor);
    transition: 0.3s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    padding-right: 15px;
}

.blog_btn_link:hover {
    color: var(--black);
}

.blog_btn_link i {
    padding-left: 3px;
}

.section_view_more_btn {
    padding: 10px 5px;
    float: right;
}

.blog_title {
    flex: 1 1 auto;
    padding-top: 10px;
}

/*
==============================================================
    Blog Page Area Css
==============================================================
*/
.single_blog_page {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 10px;
    background-color: var(--white);
}

.blog_page_image img {
    border-radius: 10px 10px 0px 0px;
}

.blog_page_content {
    padding: 30px;
}

.blog_page_title h3 {
    line-height: 27px;
}

.blog_page_title_link {
    color: var(--black);
    font-size: 22px;
}

.blog_page_title_link:hover {
    color: var(--themeColor);
}

.blog_page_table_cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
}

.blog_page_category_link {
    color: var(--themeColor);
    font-weight: 500;
    font-size: 15px;
}

.blog_page_category_link:hover {
    color: var(--themeColor);
}

.blog_page_post_date i {
    font-size: 14px;
    color: var(--themeColor);
}

.blog_page_post_date span {
    font-size: 15px;
    color: var(--black);
}

/*
==============================================================
    Blog Details Area Css
==============================================================
*/
.blog_details_image {
    text-align: center;
}

.blog_details_title {
    margin-top: 40px;
}

.blog_details_title h2 {
    text-align: center;
    font-size: 35px;
    line-height: 50px;
}

.blog_details_table_cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.blog_details_post_user img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #ddd;
}

.blog_details_post_user span {
    font-weight: 500;
    font-size: 16px;
    margin-left: 10px;
}

.blog_details_post_date {
    display: flex;
    align-items: center;
    gap: 10px;
}

.blog_details_post_date i {
    color: var(--themeColor);
    font-size: 15px;
}

.blog_details_post_date span {
    color: var(--text);
    font-size: 15px;
}

.blog_details_comments {
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog_details_comments i {
    color: var(--themeColor);
}

.blog_details_comments span {
    color: var(--text);
    font-size: 15px;
}

.product_details_description p {
    text-align: justify;
    line-height: 30px;
    color: var(--text);
}

/*
==============================================================
    Share Package css
==============================================================
*/

.blog_social_media_title {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
}

.blog_social_media_list {
    text-align: center;
}

#social-links ul {
    margin: 0;
    padding: 0;
    text-align: center;
}

#social-links ul li {
    display: inline-block;
    list-style: none;
    margin-right: 5px;
    margin-bottom: 5px;
}

#social-links ul li:last-child {
    margin-right: 0px;
}

#social-links ul li .social-button span {
    color: var(--white);
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: block;
    font-size: 18px;
    transform: 0.3s;
}

#social-links ul li .social-button span:hover {
    color: var(--black);
}

#social-links ul li a span.fa-facebook-square {
    background-color: #3a589b;
}

#social-links ul li a span.fa-twitter {
    background-color: #1da1f2;
}

#social-links ul li a span.fa-linkedin {
    background-color: #0077b5;
}

#social-links ul li a.instagram {
    background-color: #f56305;
}

#social-links ul li a span.fa-pinterest {
    background-color: #b7081b;
}

#social-links ul li a.envelope {
    background-color: #dc4f43;
}

#social-links ul li a span.fa-whatsapp {
    background-color: #10c044;
}

#social-links ul li a span.fa-telegram {
    background-color: #3596f5;
}

#social-links ul li a.skype {
    background-color: #00a6e8;
}

#social-links ul li a span.fa-reddit {
    background-color: #00a6e8;
}

/* social media */
.blog_social_media_title {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
}

.blog_social_media_list {
    text-align: center;
}

.blog_social_media_list ul {
    margin: 0;
    padding: 0;
}

.blog_social_media_list ul li {
    display: inline-block;
    list-style: none;
}

.blog_social_media_list ul li .blog_social_media_list_link {
    color: var(--white);
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: block;
    font-size: 18px;
    transform: 0.3s;
}

.blog_social_media_list ul li .blog_social_media_list_link:hover {
    color: var(--black);
}

.blog_social_media_list ul li .blog_social_media_list_link.facebook {
    background-color: #3a589b;
}

.blog_social_media_list ul li .blog_social_media_list_link.twitter {
    background-color: #1da1f2;
}

.blog_social_media_list ul li .blog_social_media_list_link.linkedin {
    background-color: #0077b5;
}

.blog_social_media_list ul li .blog_social_media_list_link.instagram {
    background-color: #f56305;
}

.blog_social_media_list ul li .blog_social_media_list_link.pinterest {
    background-color: #b7081b;
}

.blog_social_media_list ul li .blog_social_media_list_link.envelope {
    background-color: #dc4f43;
}

.blog_social_media_list ul li .blog_social_media_list_link.whatsapp {
    background-color: #10c044;
}

.blog_social_media_list ul li .blog_social_media_list_link.telegram {
    background-color: #3596f5;
}

.blog_social_media_list ul li .blog_social_media_list_link.skype {
    background-color: #00a6e8;
}

/* blog comments */
.blog_comment_count {
    margin-bottom: 50px;
}

.single_user_comments {
    padding: 30px 0px;
    border-top: 1px solid #dddddd;
}

.blog_comment_user_image {
    width: 90px;
    float: left;
}

.blog_comment_user_image img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    float: left;
    display: block;
    overflow: hidden;
}

.blog_comment_user_description {
    display: block;
    overflow: hidden;
}

.blog_comment_user_name h3 {
    font-size: 20px;
    font-weight: 500;
    color: var(--text);
}

.blog_comment_user_comment_time p {
    color: var(--themeColor);
    font-size: 14px;
}

.blog_comments_user_say {
    margin-top: 5px;
}

.blog_comments_user_say p {
    color: var(--text);
    text-align: justify;
}

.blog_comments_form {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    background-color: var(--white);
    padding: 50px;
    border-radius: 5px;
    margin-top: 30px;
}

.blog_comments_head {
    text-align: center;
    margin-bottom: 80px;
}

.blog_comments_title {
    margin-bottom: 10px;
}

.blog_comments_title h3 {
    font-size: 34px;
}

.blog_comments_form_group {
    margin-bottom: 10px;
}

.blog_comments_form_item span {
    width: 100%;
    display: block;
    color: var(--black);
    margin-bottom: 2px;
}

.blog_comments_form_item input,
.blog_comments_form_item textarea {
    width: 100%;
    padding: 10px 20px;
    border: 1px solid var(--themeColor);
    border-radius: 3px;
    outline: none;
}

.blog_comments_post_btn_link {
    border: none;
    background-color: var(--themeColor);
    color: var(--white);
    padding: 10px 20px;
    border-radius: 3px;
    display: inline-block;
}

/*
==============================================================
    Footer Area Css
==============================================================
*/
.footer_area {
    background-color: #1a1a1a;
}

.footer_top {
    padding-top: 80px;
    padding-bottom: 50px;
}

.footer_logo img {
    width: 200px;
}

.footer_description {
    margin-top: 20px;
    margin-bottom: 30px;
}

.footer_description p {
    color: var(--text);
    font-size: 16px;
}

.footer_social_media ul {
    margin: 0;
    padding: 0;
}

.footer_social_media ul li {
    display: inline-block;
    list-style: none;
}

.footer_social_media ul li .footer_social_media_link {
    display: block;
    background-color: #252525;
    color: #ffffff;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    border-radius: 3px;
    transition: 0.3s;
}

.footer_social_media ul li .footer_social_media_link:hover {
    color: var(--themeColor);
}

.footer_title h3 {
    color: var(--white);
    font-size: 20px;
    font-weight: 400;
}

.footer_title {
    margin-bottom: 20px;
}

.footer_menu ul {
    margin: 0;
    padding: 0;
}

.footer_menu ul li {
    list-style: none;
    margin-bottom: 10px;
}

.footer_menu ul li:last-child {
    margin-bottom: 0px;
}

.footer_menu ul li .footer_menu_link {
    display: inline-block;
    color: var(--text);
    position: relative;
    font-size: 15px;
}

.footer_menu ul li .footer_menu_link::after {
    content: "//";
    position: absolute;
    top: 0;
    left: 0;
    letter-spacing: 0px;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    opacity: 0;
    visibility: hidden;
    font-size: 12px;
}

.footer_menu ul li .footer_menu_link:hover::after {
    opacity: 1;
    visibility: visible;
    color: var(--themeColor);
}

.footer_menu ul li .footer_menu_link:hover {
    color: var(--themeColor);
    padding-left: 15px;
}

.footer_address_content,
.footer_email_content,
.footer_service_content {
    margin-bottom: 20px;
}

.footer_contact_title h4 {
    color: var(--themeColor);
    font-size: 15px;
}

.footer_address p {
    color: var(--text);
    font-size: 15px;
    line-height: 22px;
}

.footer_contact_link {
    color: var(--text);
    font-size: 15px;
    transition: 0.3s;
}

.footer_contact_link:hover {
    color: var(--themeColor);
}

.footer_copyright p {
    color: var(--text);
}

.footer_bottom {
    border-top: 1px solid #6c757d;
}

.footer_copyright {
    display: flex;
    align-items: center;
    height: 100%;
}

.payment_method {
    float: right;
    padding: 15px 45px;
}

.payment_method img {
    border-radius: 5px;
    height: 35px;
    width: 65px;
    background: var(--white);
    object-fit: contain;
}

.payment_method span {
    margin-right: 10px;
    font-size: 16px;
    color: var(--white);
    font-weight: 500;
}

/*
==============================================================
    FAQ Area Css
==============================================================
*/
.faq_accordion_button::after {
    background-image: none;
    position: absolute;
    top: 0;
    right: 0;
    content: "\2b";
    font-family: fontawesome;
    margin-top: 25px;
    margin-right: 10px;
}
.faq_accordion_button:not(.collapsed)::after {
    background-image: none;
    position: absolute;
    top: 0;
    right: 0;
    content: "\f068";
    font-family: fontawesome;
    transform: rotate(0deg);
}
.faq_accordion_button {
    color: var(--black);
    background-color: var(--white);
}
.faq_accordion_button:not(.collapsed) {
    color: var(--white);
    background-color: var(--black);
    box-shadow: inherit;
    padding: 25px 20px;
}
.faq_accordion_button:focus {
    box-shadow: none;
}
.faq_accordion_button {
    padding: 25px 20px;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
}
.faq_accordion_item {
    margin-bottom: 15px;
    border-top: 1px solid #dddddd !important;
}

/*
==============================================================
    Contact Us Area Css
==============================================================
*/

.auth_form_title {
    font-size: 28px;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 500;
}

.quick_contact {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    padding: 20px;
    border-radius: 5px;
}

.quick_contact a {
    display: flex;
}

.quick_contact_icon {
    width: 65px;
    float: left;
    display: block;
    overflow: hidden;
}

.quick_contact_icon i {
    background-color: var(--themeColor);
    color: var(--white);
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 25px;
    border-radius: 5px;
}

.quick_contact_details {
    float: left;
    display: block;
    overflow: hidden;
    max-width: calc(100% - 65px);
}

.quick_contact_title h5 {
    color: var(--black);
    font-size: 22px;
}

.quick_contact_address span {
    color: var(--themeColor);
    font-size: 16px;
    font-weight: 400;
}

.auth_item {
    margin-bottom: 15px;
}

.auth_item label {
    display: block;
    width: 100%;
    font-size: 16px;
    margin-bottom: 2px;
    color: #000;
}

.auth_item input,
.auth_item textarea {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 10px 20px;
    outline: none;
}

.auth_btn {
    text-align: center;
}

.auth_btn_link {
    border: none;
    background-color: var(--themeColor);
    color: var(--white);
    padding: 10px 25px;
    display: inline-block;
    border-radius: 3px;
}

/*
==============================================================
    Support Area Css
==============================================================
*/
.product_support_description p {
    text-align: justify;
    color: var(--text);
}

.support_form_group {
    margin-bottom: 10px;
}

.support_form_item label {
    color: var(--black);
    margin-bottom: 3px;
}

.support_form_item input,
.support_form_item textarea,
.support_form_item select {
    width: 100%;
    border: 1px solid var(--themeColor);
    padding: 10px 20px;
    border-radius: 3px;
    outline: none;
    display: block;
}

/*
==============================================================
    Single Product Area Css
==============================================================
*/
.single_product_banner_title {
    text-align: center;
}

.single_product_banner_title h1 {
    position: relative;
    font-size: 35px;
    line-height: 45px;
    z-index: 1;
}

.single_product_banner_description {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 30px;
}

.single_product_banner_description p {
    color: var(--text);
    font-size: 14px;
    position: relative;
    z-index: 1;
}

.single_product_banner_btn_group {
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 20px;
}

.product_responsive_layout_image img {
    width: 100%;
}

.single_product_content_table_cell {
    display: flex;
    align-items: center;
    height: 100%;
}

.single_product_image img {
    width: 100%;
}

.single_product_description {
    margin-top: 20px;
    margin-bottom: 15px;
}

.single_product_title h3 {
    font-size: 30px;
    color: var(--black);
}

.single_product_description p {
    text-align: justify;
    color: var(--text);
}

.single_product_featured_list ul li {
    color: var(--text);
}

.single_product_featured_list ul {
    margin: 0;
    padding: 0;
    padding-left: 15px;
}

.faq_table_cell {
    display: flex;
    align-items: center;
    height: 100%;
}

.frequently_asked_questions_description {
    margin-top: 10px;
    margin-bottom: 30px;
}

.frequently_asked_questions_description p {
    color: var(--text);
    line-height: 22px;
}

.frequently_asked_questions_btn .common_btn {
    text-align: left;
}
/*
==================================================================================
thank-you-model css located at frontend/ContactUsWithOtp/modal-thank-you.blade.php
==================================================================================
*/

.modal_thank_you {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.thank_you_backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(33, 44, 79, 0.55);
    backdrop-filter: blur(3px);
}

.modal_thank_you .thank_you_content {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.97);
    background: var(--white);
    padding: 32px 28px 28px;
    border-radius: var(--radius12);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    text-align: center;
    width: 320px;
    max-width: calc(100% - 24px);
    animation: thank_you_pop_in 0.22s ease-out forwards;
}

@keyframes thank_you_pop_in {
    from {
        opacity: 0;
        transform: translate(-50%, -48%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.modal_thank_you .thank_you_close_icon {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.modal_thank_you .thank_you_close_icon:hover {
    background-color: var(--theme-soft);
    transform: rotate(90deg);
}

.modal_thank_you .thank_you_close_icon i {
    font-size: 14px;
    color: var(--black);
}

.modal_thank_you .thank_you_icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background-color: var(--mint-soft);
    color: var(--mint);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal_thank_you .thank_you_title h3 {
    margin: 0;
    font-family: var(--font-family-secondary);
    font-size: 21px;
    font-weight: 700;
    color: var(--black);
}

.modal_thank_you .thank_you_message p {
    font-family: var(--font-family-primary);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    margin: 8px 0 0;
}

.modal_thank_you .thank_you_action {
    margin-top: 22px;
}

.modal_thank_you .thank_you_button {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: var(--themeColor);
    color: var(--white);
    padding: 11px 15px;
    border-radius: var(--radius6);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-family-primary);
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease,
        box-shadow 0.15s ease;
}

.modal_thank_you .thank_you_button:hover {
    background-color: var(--black);
    box-shadow: var(--shadow);
}

.modal_thank_you .thank_you_button:active {
    transform: translateY(1px);
}

.modal_thank_you .thank_you_button:focus-visible {
    outline: 2px solid var(--themeColor);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .modal_thank_you .thank_you_content {
        padding: 28px 20px 22px;
    }

    .modal_thank_you .thank_you_title h3 {
        font-size: 19px;
    }
}

/*
==========================================
    Pricing Area css
==========================================
*/
.pricing_description p {
    text-align: center;
    color: var(--text);
    margin-top: 15px;
}

.pricing_body {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    background-color: var(--white);
    border-radius: 5px;
    padding: 50px;
}

.pricing_content {
    position: relative;
    height: 100%;
}

.pricing_price span {
    color: var(--black);
    font-size: 35px;
    font-weight: 500;
}

.pricing_title {
    margin-top: 20px;
    margin-bottom: 30px;
}

.pricing_title h3 {
    color: var(--black);
    font-size: 22px;
}

.pricing_list {
    margin-bottom: 30px;
}

.pricing_list ul {
    margin: 0;
    padding: 0;
}

.pricing_list ul li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--black);
}

.pricing_list ul li i {
    background-color: var(--black);
    color: var(--white);
    width: 17px;
    height: 18px;
    line-height: 19px;
    text-align: center;
    font-size: 9px;
    border-radius: 100%;
}

.pricing_btn_link {
    background-color: var(--themeColor);
    color: var(--white);
    padding: 10px 40px;
    border-radius: 5px;
    text-align: center;
    width: 100%;
    display: block;
}

.pricing_btn_link:hover {
    color: var(--white);
}

.pro_pricing_content {
    margin-top: -78px;
}

.pro_pricing {
    padding: 20px;
    border-radius: 5px;
    background-color: var(--themeColor);
    position: relative;
}

.most_popular {
    margin-bottom: 30px;
    display: block;
    width: 100%;
    text-align: right;
}

.most_popular span {
    background-color: var(--black);
    color: var(--white);
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 15px;
}

.pro_pricing .pricing_list ul li {
    color: var(--white);
}

.pro_pricing .pricing_list ul li i {
    background-color: var(--white);
    color: var(--black);
}

.pro_pricing .pricing_price span {
    color: var(--white);
}

.pro_pricing .pricing_title h3 {
    color: var(--white);
}

.pro_pricing .pricing_list {
    margin-bottom: 70px;
}

.pricing_btn {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
}

.pro_pricing_btn .common_btn_link {
    background: var(--black);
    color: var(--white);
    width: 83% !important;
}

.pro_pricing_btn .common_btn_link .common_btn_icon {
    background: var(--white);
}

.contact_page_redirect {
    position: relative;
}

.contact_page_redirect::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--black);
    z-index: -1;
}

.contact_page_redirect::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 65%;
    height: 100%;
    background: var(--themeColor);
    z-index: -1;
    -webkit-clip-path: polygon(0 0%, 65% 0, 90% 100%, 0% 100%);
    clip-path: polygon(0 0%, 65% 0, 90% 100%, 0% 100%);
}

.contact_page_redirect_content {
    display: flex;
    align-items: center;
    height: 100%;
}

.contact_page_redirect_content p {
    color: var(--white);
    font-size: 20px;
}

.pricing_btn .common_btn .common_btn_link {
    width: 100%;
}

.contact_page_redirect_link_btn .common_btn .common_btn_link .common_btn_icon {
    background: var(--white);
}

.contact_page_redirect_link_btn .common_btn .common_btn_link {
    padding: 8px 25px;
}

/*
==============================================================
    Service Area Css
==============================================================
*/
.service_details_page_title {
    margin-bottom: 15px;
}

.our_single_service {
    /*background: radial-gradient(at center center, #fff7c087 32%, #e6eff600 82%);*/
    padding: 30px;
    border-radius: 1rem;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    height: 100%;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.our_service_image {
    background: #48cda0;
    box-shadow: 5px 5px 15px #d1d9e6, -5px -5px 15px #ffffff;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
}

.our_service_image_two {
    background: #045fa0;
}

.our_service_image_three {
    background: #ed5f38;
}

.our_service_image img {
    width: 40px;
    height: 40px;
}

.our_service_list {
    margin-top: 40px;
}

.our_service_list ul {
    margin: 0;
    padding: 0;
}

.our_service_list ul li {
    list-style: none;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: 0.5s;
}

.our_service_list ul li:hover i,
.our_service_list ul li:hover span {
    color: var(--themeColor);
}

.our_service_list ul li:last-child {
    margin-bottom: 0px;
}

.our_service_list ul li i {
    font-size: 20px;
    width: 40px;
    height: 40px;
    display: block;
    overflow: hidden;
    text-align: center;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.our_service_list ul li span {
    display: block;
    overflow: hidden;
    font-size: 17px;
    line-height: 24px;
    color: var(--black);
}

/* Service Page Area Css */
.service_area {
    position: relative;
    color: var(--white);
}

.service_heading_content .section_title h2 {
    color: var(--black);
}

.service_description {
    padding-top: 30px;
}

.service_description p {
    line-height: 34px;
    color: var(--text);
    display: block;
    font-weight: 400;
}

.service_area .row .service_count {
    counter-increment: slides-num;
}

.service_count {
    position: relative;
}

.single_service {
    position: relative;
    display: block;
    padding: 50px 45px;
    background: #1c1e22;
    min-height: 100%;
    border-radius: 7px;
    overflow: hidden;
    transition: all 0.5s ease;
}

.single_service:before {
    content: counter(slides-num) "";
    position: absolute;
    left: 45px;
    top: 50px;
    font-size: 50px;
    line-height: 1em;
    color: var(--white);
    opacity: 0.5;
    font-weight: 300;
}

.service_curve {
    position: absolute;
    right: -70px;
    bottom: 0;
    width: 100px;
    height: 80%;
    background: var(--black);
    opacity: 0.2;
    z-index: 0;
    transform: skewX(0) scaleX(0);
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.service_icon i {
    position: absolute;
    right: 45px;
    top: 50px;
    color: var(--themeColor);
    font-size: 64px;
    line-height: 1em;
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.single_service:hover .service_icon i {
    color: var(--black);
}

.service_title {
    position: relative;
    margin: 0;
    margin-top: 90px;
    font-size: 20px;
    text-transform: uppercase;
    color: var(--white);
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.1em;
}

.service_title {
    font-size: 16px;
}

.service_title_link {
    color: var(--white);
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.single_service:hover {
    background: var(--themeColor);
}

.single_service:hover .service_title .service_title_link {
    color: var(--black);
}

.service_curve {
    position: absolute;
    right: -70px;
    bottom: 0;
    width: 100px;
    height: 80%;
    background: var(--black);
    opacity: 0.2;
    z-index: 0;
    transform: skewX(0) scaleX(0);
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.single_service:hover .service_curve {
    transform: skewX(-35deg) scaleX(1);
}

.single_service:hover .service_icon {
    color: var(--black);
}

.service_title a:hover {
    text-decoration: underline;
}
/*
==============================================================
    Single Service Area Css
==============================================================
*/
.single_service_title {
    margin-bottom: 20px;
}

.single_service_growth_item {
    padding-left: 75px;
    margin-bottom: 40px;
}
.single_service_growth {
    position: relative;
}

.list-icon-holder {
    border: 2px solid rgba(255, 255, 255, 0.3);
}
.list-icon-holder {
    transform: scale(1);
    opacity: 1;
    transition: 0.3s;
}

.list-icon-holder span {
    border-radius: 100px;
    background-color: #f7f7f7;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    color: rgba(0, 0, 0, 0.5);
    z-index: 10;
    line-height: 60px;
    font-size: 26px;
    width: 60px;
    height: 60px;
    margin-left: -77px;
    z-index: 999999;
}

.single_service_growth:after {
    height: 85% !important;
    display: block;
    position: absolute;
    content: " ";
    z-index: -1;
    width: 1px;
    background-color: rgba(0, 0, 0, 0.1);
    height: 100%;
    top: 28px;
    left: 31px;
}
.single_service_short_title h5 {
    font-size: 25px;
    margin-bottom: 13px;
    position: relative;
    padding-bottom: 8px;
    display: inline-block;
}
.single_service_short_title h5::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--themeColor);
    height: 1px;
    width: 50%;
    display: inline-block;
}

.service_details_list {
    padding: 25px 20px;
    -webkit-box-shadow: var(--shadow);
    box-shadow: var(--shadow);
    position: sticky;
    top: 100px;
}
.service_details_list ul {
    padding: 0;
}
.service_details_list ul li {
    list-style: none;
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
}
.service_details_list ul li:last-child {
    border-bottom: 1px solid var(--border);
}
.service_details_list ul li .service_details_link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.service_details_icon i {
    border-right: var(--border);
    height: 100%;
    padding: 20px 20px;
    background: var(--themeColor);
    color: var(--white);
}
.service_details_link {
    border: var(--border);
    width: 100%;
    display: inline-block;
    position: relative;
    z-index: 1;
    color: var(--black);
    text-transform: capitalize;
    -webkit-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.service_details_list ul li .service_details_link::after {
    content: "";
    clear: both;
    display: block;
    position: absolute;
    width: 0%;
    height: 100%;
    background: var(--themeColor);
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.service_details_link_text {
    padding-left: 10px;
}
.service_details_list ul li .service_details_link:hover:after {
    width: 100%;
}
.service_details_list ul li .service_details_link:hover {
    color: #fff;
}
.service_details_address_image {
    padding: 25px 20px;
    -webkit-box-shadow: var(--shadow);
    box-shadow: var(--shadow);
    margin: 0 auto;
    text-align: center;
}
.service_details_address_list {
    padding: 25px 20px;
    -webkit-box-shadow: var(--shadow);
    box-shadow: var(--shadow);
}
.service_details_address_list_link {
    display: block;
    color: var(--black);
    font-size: 16px;
}
.service_details_address_list li {
    display: block;
    padding-bottom: 10px;
}
.service_details_address_list li:last-child {
    padding-bottom: 0px;
}
.service_details_address_list_link i {
    padding-right: 5px;
}
.service_details_list_title {
    margin-bottom: 20px;
}
.service_details_list_title h3 {
    font-size: 22px;
}
.single_service_image {
    text-align: center;
    margin: 0 auto;
}

/*
==============================================================
    Use Technologie Area Css
==============================================================
*/
.technology_image {
    text-align: center;
    max-width: 150px;
    margin: 0 auto;
    background-color: var(--white);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 20px;
    border-radius: 50%;
}

.technology_image img {
    border-radius: 50%;
}

.tech-icons {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
}

.sponsor_actives {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    background-color: #f7f8fa;
    padding: 60px 20px 20px 20px;
    border-radius: 16px;
    background-image: linear-gradient(180deg, #ffffff 30%, #fffbfc00 44%);
}

.single_sponsor {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 7px 30px 0
        rgba(3.0000000000000124, 102.00000000000017, 116, 0.08);
}

.tech-icons .tech {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.tech-item {
    width: 112px;
    height: 112px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
        0 4px 6px -4px rgb(0 0 0 / 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tech-item img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tech .tech-label p {
    color: #374151;
    font-weight: 500;
    text-align: center;
    margin-top: 16px;
}

.single_business_platform {
    display: flex;
    gap: 14px;
}

.web_site_logo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.web_site_logo {
    width: 30px;
    height: 30px;
    background-color: var(--black);
    border-radius: 50%;
    flex-shrink: 0;
}

.web_site_title h4 {
    color: #000;
    font-size: 22px;
    font-weight: 500;
}

.single_business_platform_container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.single_business_platform_image {
    background-color: rgb(249 250 251);
    background: #f9f9f9;
    padding: 15px 20px;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.single_business_platform_image:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.single_business_platform_image img {
    width: 160px;
    height: 60px;
}

/*
==============================================================
    Sponsor Area Css
==============================================================
*/

.single_sponsor a {
    width: 100%;
    aspect-ratio: 1/ 0.6;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    padding: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.single_sponsor a:hover {
    /* transform: translateY(-3px); */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.single_sponsor a img {
    max-height: 100%;
    width: auto !important;
}

.single_sponsor p {
    color: #000000;
    position: absolute;
    bottom: -35px;
    left: 0;
    right: 0;
}

.single_sponsor.see_more_sponsor a {
    background-color: var(--themeColor);
    color: #fff;
    text-decoration: none;
}

.single_sponsor.see_more_sponsor a:hover {
    opacity: 0.9;
}

.single_sponsor.see_more_sponsor svg {
    margin-left: 5px;
    vertical-align: middle;
}

/*
==============================================================
    Team Area Css
==============================================================
*/
.single_team_content {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    transition: all 0.5s ease;
}

.single_team_content:hover {
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.04);
}

.team_image img {
    width: 100%;
    filter: grayscale(100%);
    width: 100%;
    filter: grayscale(0%);
    transition: 0.5s;
}

.team_image img:hover {
    transform: scale(1.1);
}

.team_content {
    border: 1px solid #e9ebee;
    text-align: center;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding-top: 25px;
    padding-bottom: 25px;
    background-color: var(--white);
    transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease;
    opacity: 1;
    visibility: visible;
    transform: scale(1, 1);
    transform-origin: bottom center;
}

.single_team_content:hover .team_content {
    opacity: 0;
    visibility: hidden;
    transform: scale(1, 0);
}

.team_member_name {
    margin: 0;
    text-transform: uppercase;
    font-size: 18px;
    color: var(--black);
    letter-spacing: 0.1em;
    line-height: 1;
}

.team_member_designation {
    text-transform: uppercase;
    color: #686a6f;
    font-size: 14px;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.1em;
    margin-top: 10px;
}

.team_content_hover {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--white);
    opacity: 0;
    visibility: hidden;
    transform: scale(1, 0);
    transform-origin: bottom center;
    border: 1px solid #e9ebee;
    text-align: center;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding-top: 25px;
    padding-bottom: 25px;
    background-color: var(--white);
    transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease;
}

.single_team_content:hover .team_content_hover {
    opacity: 1;
    visibility: visible;
    transform: scale(1, 1);
}

.team_social_media {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0px;
    padding: 0px;
}

.team_social_media li {
    margin-left: 10px;
    display: inline-block;
}

.team_social_media li .team_social_media_link {
    display: flex;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #f4f5f8;
    font-size: 16px;
    color: var(--black);
    transition: all 0.5s ease;
    margin-top: 15px;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.team_social_media li .team_social_media_link:hover {
    background-color: var(--themeColor);
    color: var(--black);
}

.team_other_member_btn {
    margin-top: 30px;
}

/*
==============================================================
    About Area Css
==============================================================
*/
.about_nav_pills .about_nav_link.active,
.about_nav_pills .show > .about_nav_link {
    color: var(--white);
    background-color: var(--themeColor);
}

.about_nav_link {
    color: var(--black);
    padding: 12px 30px;
    display: inline-block;
}

.about_nav_link:focus,
.about_nav_link:hover {
    color: var(--black);
}

.about_nav_pills {
    margin-top: 40px;
    margin-bottom: 40px;
}

.about_value_list_title {
    margin-bottom: 5px;
}

.about_value_list_title p {
    color: vaR(--text);
}

.about_value_list ul {
    margin: 0;
    padding: 0;
}

.about_value_list ul li {
    color: var(--text);
    margin-bottom: 1px;
    list-style: none;
}

.about_tab {
    padding-right: 50px;
}

.about_tab_body p {
    color: var(--text);
}

.about_description p {
    color: var(--text);
    line-height: 35px;
}

.about_main_description {
    margin-top: 40px;
    margin-bottom: 40px;
}

.about_main_description p {
    color: var(--text);
    line-height: 34px;
}

.about_team_title,
.about_report_title {
    margin-bottom: 15px;
}

.about_report_title h3,
.about_team_title h3 {
    font-weight: 400;
    font-size: 25px;
}

.about_team ul li,
.about_report ul li {
    color: var(--text);
    margin-bottom: 2px;
}

.client_say_details {
    display: flex;
    align-items: center;
    height: 100%;
}

.client_say_details p {
    color: var(--text);
}

.client_say_active .owl-dots div {
    width: 15px;
    height: 15px;
    display: inline-block;
    margin: 0px 5px;
    border-radius: 100%;
    border: 1px solid var(--themeColor);
}

.client_say_active .owl-dots {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 30px;
}

.client_say_active .owl-dots div.active {
    background: var(--themeColor);
}

/*
==============================================================
    Privacy Policy Area Css
==============================================================
*/
.privacy_policy_content p {
    color: var(--text);
}

/*
==============================================================
    Support Policy Area Css
==============================================================
*/
.support_policy_content p {
    color: var(--text);
}

/*
==============================================================
    Document Area Css
==============================================================
*/
.document_image_container {
    position: relative;
}

.document_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(
        0 0 0 / 76%
    ); /* Adjust the overlay background color and opacity */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.document_image_container:hover .document_overlay {
    opacity: 1;
}

.document_btn_link {
    color: var(--white);
    background-color: var(
        --themeColor
    ); /* Adjust the button background color */
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
    border-radius: 3px;
}

.document_btn_link:hover {
    background-color: var(--black);
    color: var(--white);
}

.quote {
    font-style: italic;
    color: #555;
    padding: 5px;
}

/*
==============================================================
    Offer Area Css
==============================================================
*/
.offer_image_container {
    position: relative;
    height: 350px;
}

.offer_image_container img {
    height: 100%;
    width: 100%;
}

.offer_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(
        0 0 0 / 76%
    ); /* Adjust the overlay background color and opacity */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.offer_image_container:hover .offer_overlay {
    opacity: 1;
}

.offer_btn_link {
    color: var(--white);
    background-color: var(
        --themeColor
    ); /* Adjust the button background color */
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
    border-radius: 3px;
}

.offer_btn_link:hover {
    background-color: var(--black);
    color: var(--white);
}

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

/*
==============================================================
    Service Policy Area Css
==============================================================
*/
.service_policy_content p {
    color: var(--text);
}

/*
==============================================================
    Mobile Device Area Css
==============================================================
*/
.mobile_device_table_cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile_logo {
    width: 120px;
}

.mobile_logo img {
    width: 100%;
    height: 100%;
}

.mobile_toggle_icon {
    border: none;
    background: transparent;
    font-size: 25px;
    line-height: 0;
}

.mobile_device_menu {
    line-height: 0;
}

.offcanvas_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 25px;
}

.mobile_menu {
    border-top: 1px solid #dddddd;
    margin-bottom: 30px;
    overflow-y: auto;
    height: 100%;
}

.mobile_menu ul {
    margin: 0;
    padding: 10px 25px;
}

.mobile_menu ul li {
    list-style: none;
    display: block;
    position: relative;
}

.mobile_menu ul li:last-child {
    margin-bottom: 0px;
}

.mobile_menu ul li .mobile_menu_link {
    color: var(--black);
    text-transform: uppercase;
    line-height: 22px;
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    display: block;
}

.mobile_menu ul li:hover > .mobile_menu_link {
    color: var(--themeColor);
}

.mobile_menu ul li .mobile_menu_link i {
    float: right;
    line-height: 21px;
}

.mobile_menu ul li .mobile_submenu {
    margin: 0;
    padding: 0;
    padding-left: 15px;
}

.mobile_menu ul li .mobile_submenu li {
    margin-bottom: 0px;
    margin-top: 10px;
}

.mobile_menu ul li .mobile_submenu li .mobile_submenu_link {
    color: var(--black);
    font-size: 16px;
    text-transform: capitalize;
    line-height: 22px;
}

.mobile_menu ul li .mobile_submenu li:hover > .mobile_submenu_link {
    color: var(--themeColor);
}

.mobile_submenu_table_cell {
    display: flex;
    align-items: center;
    gap: 15px;
}

.mobile_submenu_icon {
    width: 30px;
    height: 30px;
}

.mobile_submenu_icon img {
    width: 100%;
    height: 100%;
}

.mobile_menu::-webkit-scrollbar {
    width: 5px;
}

.mobile_menu::-webkit-scrollbar-track {
    background: var(--themeColor);
}

.mobile_menu::-webkit-scrollbar-thumb {
    background: var(--black);
}

.mobile_submenu {
    display: none;
}

.mobile_submenu_toggle {
    display: block;
    transition: 0.3s;
}

.require_star {
    color: red;
}

/* ===========================
   Mobile Menu  Design
=========================== */
.mobile_menu {
    border-top: 1px solid #eee;
    margin-bottom: 30px;
    overflow-y: auto;
    height: 100%;
    background: linear-gradient(180deg, #ffffff, #f9f9f9);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
    padding-top: 15px;
}

.mobile_menu ul {
    margin: 0;
    padding: 0 20px 20px;
}

.mobile_menu ul li {
    list-style: none;
    border-bottom: 1px dashed #e5e5e5;
    padding: 10px;
    transition: all 0.3s ease;
}

.mobile_menu ul li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.mobile_menu ul li .mobile_menu_link {
    color: #222;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.mobile_menu ul li:hover {
    background: rgba(0, 123, 255, 0.05);
    border-radius: 6px;
    padding-left: 8px;
}

.mobile_menu ul li:hover > .mobile_menu_link {
    color: var(--themeColor);
}

.mobile_menu ul li .mobile_menu_link i {
    font-size: 13px;
    color: #999;
    transition: transform 0.3s ease, color 0.3s ease;
}

.mobile_menu ul li:hover .mobile_menu_link i {
    transform: rotate(90deg);
    color: var(--themeColor);
}

/* Submenu */
.mobile_menu ul li .mobile_submenu {
    margin-top: 8px;
    padding-left: 15px;
    border-left: 2px solid var(--themeColor);
}

.mobile_menu ul li .mobile_submenu li {
    margin: 6px 0;
}

.mobile_menu ul li .mobile_submenu li .mobile_submenu_link {
    font-size: 14px;
    color: #444;
    font-weight: 500;
    transition: all 0.3s ease;
    display: block;
}

.mobile_menu ul li .mobile_submenu li:hover > .mobile_submenu_link {
    color: var(--themeColor);
    transform: translateX(5px);
}

/*
==========================================
    Breadcrumbs Area Css
==========================================
*/
.breadcrumbs-table-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 140px;
}

.breadcrumbs-title {
    margin-bottom: 20px;
}

.breadcrumbs-title h2 {
    color: var(--black);
    font-weight: 600;
    font-size: 30px;
    line-height: 40px;
}

.page p {
    margin-bottom: 15px;
}

.breadcrumbs-list ul li {
    display: inline-block;
}

.breadcrumbs-list ul li .breadcrumbs-list-link {
    color: var(--black);
    font-size: 14px;
    display: block;
}

.breadcrumbs-list ul li .breadcrumbs-list-link:hover {
    color: var(--themeColor);
}

.breadcrumbs-list ul li .breadcrumbs-list-link i {
    font-size: 12px;
}

/*
==============================================================
    Single product Booking page modal form Area Css
==============================================================
*/

.confirm_order {
    text-align: center;
    padding: 50px 0px;
}
.confirm_order_icon i {
    font-size: 100px;
    color: #34aa54;
    padding: 10px;
}
.confirm_order_tittle h3 {
    font-size: 35px;
    padding: 10px 0px;
    font-weight: 600;
}
.confirm_order_subtitle h4 {
    font-size: 27px;
    padding: 5px;
    text-transform: capitalize;
}
.confirm_order_details p {
    padding: 3px;
    font-size: 20px;
}
.follow_us_tittle h3 {
    font-size: 25px;
    margin-top: 25px;
    text-transform: uppercase;
}
.follow_us {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 15px;
}
.follow_us_facebook img,
.follow_us_whatsapp img {
    width: 300px;
    height: 100px;
}

/*
==============================================================
    product Booking Success page modal form Area Css
==============================================================
*/

.single_product_contact_form_title {
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.single_product_contact_form_title h1 {
    color: #333;
    font-size: 2em;
    margin-bottom: 10px;
}

.single_product_contact_form_title p {
    color: #666;
    font-size: 1.2em;
    margin-top: 0;
}

.book_now_form_section_top_space {
    padding-top: 20px;
}

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

.single_product_contact_form {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    padding: 40px;
    max-width: 700px;
    width: 100%;
}

.booking_form_title {
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    padding: 0px 0px 20px 0px;
}

.single_product_form_group {
    margin-bottom: 20px;
}

.single_product_form_group label {
    font-weight: 500;
    display: block;
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
}

.single_product_form_group input,
.single_product_form_group textarea {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 5px;
}

.single_product_form_group textarea {
    resize: vertical;
}

.single_product_submit_btn {
    text-align: center;
}

.single_product_form_submit_btn {
    background-color: #007bff;
    border: none;
    color: #fff;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.single_product_form_submit_btn:hover {
    background-color: #0056b3;
}

/*
==============================================================
    Responsive Area Css
==============================================================
*/

@media screen and (max-width: 1430px) {
    .main_menu > ul > li .sub_menu {
        max-width: 1265px;
    }
}

@media screen and (max-width: 1400px) {
    .main_menu > ul > li .sub_menu {
        max-width: 1120px;
    }
}

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

    .banner_title h1 {
        font-size: 28px;
        line-height: 38px;
    }

    .banner_description p {
        font-size: 16px;
    }

    .main_menu > ul > li .sub_menu {
        max-width: 940px;
    }

    .about_tab {
        padding-right: 0px;
    }

    .blog_page_title_link {
        font-size: 18px;
    }

    .blog_page_table_cell {
        padding-top: 20px;
    }

    .tech-icons {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .sponsor_actives {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
    }
}

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

    .header_mobile_device {
        display: block;
    }

    .business_platform_title p {
        font-size: 20px;
        font-weight: 500;
    }

    .single_business_platform_container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .business_platform_content {
        padding: 16px;
    }

    .single_business_platform_image {
        padding: 2px 4px;
    }

    .banner_area::before {
        /* width: 50%; */
    }

    .banner_area::after {
        width: 100%;
    }

    .header_bottom {
        display: inherit;
        height: 55px;
        padding: 4px 0px;
        align-content: center;
    }

    .header_sticky {
        height: 50px;
        padding: 4px 0px;
    }

    .banner_description {
        margin-top: 10px;
    }

    .clients_say_image_content {
        padding: 10px;
    }

    .clients_say_details {
        padding: 20px;
    }

    .client_say_active .clients_say_icon img {
        width: 40px;
    }

    .client_say_active .owl-nav .owl-prev {
        right: 40px;
        padding: 2px 10px;
        font-size: 16px;
    }

    .client_say_active .owl-nav .owl-next {
        padding: 2px 10px;
        font-size: 16px;
    }

    .clients_say_title_star {
        display: block;
    }

    .clients_say_title {
        margin-bottom: 2px;
    }

    .clients_say_title h2 {
        font-size: 20px;
    }

    .clients_say_star span i {
        font-size: 11px;
        padding: 3px;
    }

    .clients_say_description {
        margin-top: 10px;
    }

    .clients_say_description p {
        line-height: 26px;
        font-weight: 300;
    }

    .clients_say_content {
        padding-top: 45px;
    }

    .footer_description {
        margin-bottom: 15px;
    }

    .footer_copyright {
        justify-content: center;
        padding-top: 15px;
    }

    .contact_page_redirect_link_btn .common_btn {
        text-align: right;
    }
    .tech-icons {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sponsor_actives {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        padding: 20px;
    }

    .our_product_nav_item {
        margin-right: 5px;
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 768px) {
    .offer_image_container {
        height: 300px;
    }
    .footer_top {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .section_title h2 {
        font-size: 26px;
    }

    .section_title h1 {
        font-size: 26px;
    }

    .section_subtitle {
        margin-top: 10px;
    }

    .section_subtitle p {
        font-size: 16px;
    }

    .display_none_768_device {
        display: none;
    }

    .banner_title h1 {
        font-size: 22px;
        line-height: 32px;
    }

    .section_top_space {
        padding-top: 30px;
    }

    .section_padding {
        padding: 40px 0px;
    }

    .section_padding_bottom {
        padding-bottom: 40px;
    }

    .section_padding_top {
        padding-top: 40px;
    }

    .service_details_page_title {
        margin-bottom: 10px;
    }

    .single_client_say {
        padding: 0px;
        margin-top: 40px;
    }

    .clients_say_image {
        width: 70px;
        height: 70px;
        float: left;
    }

    .clients_say_client_name {
        margin-top: 0px;
        display: flex;
        align-items: center;
        padding-left: 10px;
    }

    .clients_say_client_designation {
        margin-top: 5px;
        display: flex;
        align-items: center;
        padding-left: 10px;
    }

    .clients_say_client_name h3 {
        font-size: 16px;
    }

    .clients_say_client_designation h6 {
        font-size: 12px;
    }

    .client_say_active .clients_say_icon img {
        top: -108px;
    }

    .client_say_active .owl-nav {
        top: 0px;
        right: 0px;
    }

    .client_say_active .clients_say_icon img {
        width: 30px;
    }

    .clients_say_content {
        padding-top: 0px;
    }

    .clients_say_title h2 {
        font-size: 18px;
    }

    .clients_say_details {
        padding: 0px;
        box-shadow: none;
        padding-top: 15px;
    }

    .clients_say_image_content {
        box-shadow: none;
        padding: 0px;
    }

    .clients_say_description p {
        text-align: justify;
    }

    .about_nav_pills {
        margin-bottom: 20px;
    }

    .about_nav_link {
        padding: 8px 9px;
    }

    .about_main_description {
        margin-top: 10px;
    }

    .service_description {
        padding-top: 10px;
    }

    .contact_page_redirect_content {
        justify-content: center;
        padding-bottom: 30px;
        text-align: center;
    }

    .contact_page_redirect_link_btn .common_btn {
        text-align: center;
    }

    .contact_page_redirect_link_btn .common_btn .common_btn_link {
        background: var(--white);
        color: var(--black);
    }

    .contact_page_redirect_link_btn
        .common_btn
        .common_btn_link
        .common_btn_icon {
        background: var(--black);
    }

    .blog_details_title h2 {
        font-size: 20px;
        line-height: 30px;
        font-weight: 600;
    }

    .blog_details_table_cell {
        gap: 7px;
        margin-top: 30px;
        margin-bottom: 20px;
    }

    .blog_details_post_user span {
        margin-left: 3px;
    }

    .blog_social_media_list ul li {
        margin-bottom: 5px;
    }

    .blog_social_media_list ul li .blog_social_media_list_link {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 18px;
    }

    .quick_contact_details {
        width: 74%;
    }

    .our_single_service {
        padding: 25px;
    }

    .our_service_list ul li span {
        font-size: 16px;
    }

    .our_service_list ul li i {
        font-size: 20px;
        width: 40px;
    }

    .our_service_image {
        width: 65px;
        height: 65px;
    }

    .our_service_image img {
        width: 35px;
        height: 35px;
    }

    .our_service_list {
        margin-top: 30px;
    }

    .our_service_list ul li {
        margin-bottom: 20px;
    }

    .technology_image {
        max-width: 90px;
        padding: 10px;
    }

    .payment_method {
        float: inherit;
        text-align: center;
        padding: 5px;
    }

    .fixed_footer_whatsapp_icon {
        position: relative;
        background-color: #0dc043;
        color: var(--white);
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 100%;
        position: fixed;
        bottom: 50px;
        right: 15px;
        z-index: 99;
    }

    .single_service_title h1 {
        font-size: 18px;
        line-height: 26px;
    }

    .single_service_title h2 {
        font-size: 18px;
        line-height: 26px;
    }
    .single_service_title {
        margin-bottom: 8px;
    }
    .single_service_growth_content h4 {
        font-size: 18px;
        margin-bottom: 5px;
    }
    .list-icon-holder span {
        line-height: 50px;
        font-size: 20px;
        width: 50px;
        height: 50px;
        margin-left: -68px;
    }
    .single_service_growth:after {
        left: 26px;
    }
    .single_service_growth_item {
        padding-left: 65px;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 600px) {
    .our_product_nav_pills .our_product_nav_link {
        font-size: 14px;
        padding: 5px 8px;
    }

    .our_product_nav {
        margin-bottom: 20px;
    }

    .product_tab_description P {
        font-size: 14px;
    }

    .single_product_form_group input,
    .single_product_form_group textarea {
        padding: 5px 10px;
    }

    .single_product_contact_form {
        padding: 20px;
    }

    .single_product_form_group {
        margin-bottom: 10px;
    }

    .single_product_form_submit_btn {
        padding: 8px 10px;
    }

    .confirm_order_details p {
        font-size: 16px;
    }

    .follow_us_facebook img,
    .follow_us_whatsapp img {
        width: 100%;
        height: 50px;
    }
    .client_name_with_designation h4 {
        font-size: 14px;
    }
    .client_name_with_designation h5 {
        font-size: 14px;
    }
    .tech-item {
        width: 80px;
        height: 80px;
    }
}

/*
========================================
Showing Videos
========================================
*/

.client-all-review-videos-container {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-gap: 12px;
}

.client-all-review-videos_box {
    flex: 1 1 calc(25% - 16px); /* 4 per row, accounting for gap */
    box-sizing: border-box;
}

@media (max-width: 1200px) {
    .client-all-review-videos-container {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 992px) {
    .client-all-review-videos_box {
        flex: 1 1 calc(33.33% - 16px); /* 3 per row */
    }
    .client-all-review-videos-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .client-all-review-videos_box {
        flex: 1 1 calc(50% - 16px); /* 2 per row */
    }
    .client-all-review-videos-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .client-all-review-videos_box {
        flex: 1 1 100%;
    }
    .product_tab_title h5 {
        font-size: 17px;
    }
    .single_product_tab_content {
        padding: 18px;
    }
    .see_more_btn .common_btn .common_btn_link .common_btn_title {
        font-size: 14px;
        line-height: 23px;
        font-weight: 500;
        padding: 4px 15px;
    }
    .client-all-review-videos-container {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/*=================== Service Area Start =================*/

.service_banner_content {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.service_banner_content h1 {
    font-size: 36px;
    line-height: 1.2em;
    font-weight: 500;
    margin-bottom: 20px;
    text-transform: none;
}
.service_banner_content .highlight_text {
    color: var(--themeColor);
}

.service_banner_content P {
    font-family: var(--font-family-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0.1px;
    color: #141313;
}

/* ==========================================================================
   Service Item Area
   ========================================================================== */

.services-page-wrapper {
    position: relative;
}

.service_banner_area {
    padding-top: 80px;
    padding-bottom: 0px;
}

.background-overlay {
    background-image: url("https://i.ibb.co.com/fdpPMqP0/servie-page-hero-bg.webp");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 1;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    position: fixed;
    inset: 0;
    z-index: -1;
}

.service_item_area {
    position: relative;
    overflow: hidden;
}

.service_item_area:nth-of-type(n + 3) {
    background-color: var(--white);
}
.facebook_bg {
    background-color: transparent;
    background-image: linear-gradient(
        180deg,
        #f4f9fd 0,
        #d3e6f5 100%
    ) !important;
}
.social_media_bg {
    background-color: transparent;
    background-image: linear-gradient(180deg, #f5f4fa 0, #d9d4ed 100%);
}
.mobile_app_bg {
    background-color: transparent;
    background-image: linear-gradient(180deg, #f3f9fc 0, #cde3ee 100%);
}
.seo_service_bg {
    background-color: transparent;
    background-image: linear-gradient(180deg, #f5f3fa 0, #dbd8ef 100%);
}
.domain_hosting_bg {
    background-color: transparent;
    background-image: linear-gradient(180deg, #f3f9fc 0, #cde3ee 100%);
}

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

.stats_area {
    padding: 0 0 60px;
    position: relative;
}

.stats_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 0;
}

.stat-card {
    background: var(--white);
    border-radius: var(--radius12);
    box-shadow: var(--shadow);
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--theme-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.stat-text {
    display: flex;
    flex-direction: column;
}

.stat-text dt {
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
    color: var(--black);
    margin: 0;
}

.stat-text dd {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text);
    margin: 4px 0 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.service_item_wrapper {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: center;
    border-radius: var(--radius12);
    padding: 40px;
    margin-bottom: 30px;
}

.border_round {
    border: 1px solid var(--themeColor);
}

.service_item_content .badge-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.service_item_content .flagmark {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.service_item_content .flagmark img {
    width: 100%;
    height: 100%;
}

.service_item_content .brand-name {
    font-weight: 600;
    font-size: 26px;
    color: var(--black);
}

.service_item_content .locale-pill {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    background: var(--white);
    border: 1px solid var(--border);
    padding: 4px 10px;
    border-radius: 999px;
}

.service_item_content h2 {
    font-weight: 600;
    font-size: 24px;
    line-height: 30px;
    color: var(--black);
    margin: 0 0 20px;
}

.service_item_content h1 span,
.service_item_content h2 span {
    color: var(--themeColor);
}

.service_item_content .lede {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #212c4fb2;
    max-width: 600px;
    margin: 0 0 34px;
}

/* ---------- Service list ---------- */
.service_item_content .services {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin: 0 0 34px;
    padding: 0;
}

.service_item_content .service-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius12);
    padding: 14px 8px;
    text-align: center;
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.service_item_content .service-card:hover {
    transform: translateY(-3px);
    border-color: var(--themeColor);
}

.service_item_content .service-card .icon-wrap {
    width: 36px;
    height: 36px;
    margin: 0 auto 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service_item_content .service-card .icon-wrap img {
    width: 100%;
    height: 100%;
}

.service_item_content .service-card span {
    font-family: var(--font-family-secondary);
    font-size: 13px;
    line-height: 16px;
    font-weight: 500;
    color: var(--black);
    display: block;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
}

.service_item_content .icon-wrap svg {
    width: 20px;
    height: 20px;
}

.service_item_content .bg-landing {
    background: #efe7fb;
}
.service_item_content .bg-business {
    background: var(--theme-soft);
}
.service_item_content .bg-ecom {
    background: var(--mint-soft);
}
.service_item_content .bg-elearn {
    background: #e6eefb;
}
.service_item_content .bg-maintain {
    background: #fbf0dc;
}

/* ---------- CTA link ---------- */
.service_item_content .explore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family-secondary);
    font-weight: 600;
    font-size: 15px;
    color: var(--themeColor);
    text-decoration: none;
}

.service_item_content .explore svg {
    transition: transform 0.18s ease;
}

.service_item_content .explore:hover svg {
    transform: translateX(4px);
}

/* ---------- Right visual ---------- */
.service_item_visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.service_item_visual .visual-img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 5px;
    display: block;
}

.divider {
    width: 100%;
    background-color: #e7e2e2;
    height: 1.5px;
    /* margin: 17px 0px; */
    overflow: hidden;
}

@media (max-width: 1028px) {
    .service_item_wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 24px 16px;
    }

    .service_item_content .services {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .service_item_content h2 {
        font-size: 20px;
        line-height: 1.3;
        margin-bottom: 10px;
        text-align: center;
    }

    .service_item_visual .float-tag {
        display: none;
    }

    .service_item_content {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .service_item_content .badge-row {
        gap: 8px;
        margin-bottom: 16px;
        justify-content: center;
        flex-direction: row;
    }

    .service_item_content .flagmark {
        width: 26px;
        height: 26px;
    }

    .service_item_content .brand-name {
        font-size: 18px;
    }

    .service_item_content .lede {
        max-width: 100%;
        font-size: 14.5px;
        line-height: 22px;
        margin: 0 0 22px;
    }

    .service_item_content .explore {
        justify-content: center;
        margin-top: 4px;
    }

    .service_item_content .service-card {
        padding: 16px 8px;
        border-radius: 12px;
    }

    .service_item_content .service-card .icon-wrap {
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
    }

    .service_item_content .service-card span {
        font-size: 13px;
        line-height: 17px;
        white-space: normal;
        -webkit-line-clamp: 2;
    }

    .service_banner_content h1 {
        font-size: 26px;
        line-height: 1.2em;
    }

    .stats_list {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .stat-card {
        padding: 16px;
    }

    .stat-icon {
        width: 48px;
        height: 48px;
    }

    .stat-icon img {
        width: 32px;
        height: 32px;
    }

    .stat-text dt {
        font-size: 21px;
    }

    .stat-text dd {
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .service_item_wrapper {
        padding: 20px 14px;
        gap: 16px;
    }

    .service_item_content h2 {
        font-size: 19px;
    }

    .service_item_content .lede {
        font-size: 14px;
        line-height: 21px;
        margin-bottom: 18px;
    }

    .service_item_content .services {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .service_item_content .service-card {
        padding: 14px 6px;
    }

    .service_item_content .service-card .icon-wrap {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        margin-bottom: 8px;
    }

    .service_item_content .service-card span {
        font-size: 12px;
        line-height: 15px;
    }

    .service_item_content .explore {
        font-size: 14px;
    }

    .stats_list {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .stat-card {
        padding: 12px 10px;
        gap: 10px;
    }
}

/*=================== Service Area End =================*/
.achievements_area {
}

.achievements_heading img {
    width: 190px;
}

.achievements__card {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 24px;
    border-radius: var(--radius12);
    border: 1px solid #e0e0dc;
    /* background: var(--theme-soft); */
    box-shadow: var(--shadow);
}

.achievements_heading {
    font-family: var(--font-family-secondary);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--black);
    margin: 0;
    padding-right: 24px;
    white-space: nowrap;
}

.achievements_stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.achievements_stat {
    position: relative;
    padding: 20px 26px 20px;
    /* border-radius: var(--radius6); */
    /* background: #eaebe6; */
    /* border: 1px solid #e0e0dc; */
}

.achievements_stat:not(:last-child)::before {
    content: "";
    width: 5px;
    height: 8px;
    background-color: var(--themeColor);
    border-radius: 20px;
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    transform: translate(50%, -50%);
    z-index: 1;
    animation: running-2 4s linear infinite;
}

.achievements_stat:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-end: 0px;
    width: 1px;
    height: 100%;
    border-right: 1px solid #e0e0dc;
}

@keyframes running-2 {
    0% {
        top: 0%;
    }
    50% {
        top: 100%;
    }
    100% {
        top: 0%;
    }
}

.achievements_stat-icon {
    width: 42px;
    height: 42px;
    color: var(--black);
    margin: 0 0 14px;
}

.achievements_stat-number {
    font-size: 26px;
    font-weight: 600;
    color: var(--black);
    margin: 0 0 4px;
}

.achievements_stat-label {
    font-family: var(--font-family-primary);
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    color: var(--text);
    margin: 0;
    /* white-space: nowrap; */
}

.achievements_stat-label span {
    font-size: 14px;
}

@media (max-width: 991px) {
    .achievements__card {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .achievements_heading {
        white-space: normal;
        padding-right: 0;
    }
    .achievements_stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }

    .achievements_stat {
        padding: 16px 14px;
    }

    .achievements_stat::before,
    .achievements_stat::after {
        display: none;
    }

    .achievements_stat:nth-child(odd)::before {
        content: "";
        display: block;
        width: 5px;
        height: 8px;
        background-color: var(--themeColor);
        border-radius: 20px;
        position: absolute;
        inset-inline-end: 0;
        top: 50%;
        transform: translate(50%, -50%);
        z-index: 1;
        animation: running-2 4s linear infinite;
    }

    .achievements_stat:nth-child(odd)::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        inset-inline-end: 0px;
        width: 1px;
        height: 100%;
        border-right: 1px solid #e0e0dc;
    }

    .achievements_stat:nth-child(1),
    .achievements_stat:nth-child(2) {
        border-bottom: 1px solid #e0e0dc;
    }

    .achievements_stat-icon {
        width: 30px;
        height: 30px;
        margin: 0 auto 6px;
    }

    .achievements_stat-number {
        font-size: 20px;
        margin: 0 0 2px;
    }

    .achievements_stat-label {
        font-size: 12px;
        line-height: 16px;
        white-space: normal;
    }
}

.product_showcase_section {
    max-width: 100%;
    margin: 0 auto;
}

/* ----============ Row 1: header + 2 cards =========---- */
.product_showcase_grid_primary {
    display: grid;
    grid-template-columns: 1.75fr 1fr 1fr;
    /* grid-template-columns: 2.1fr 1fr 1fr 1fr; */
    gap: 22px;
    margin-bottom: 22px;
    align-items: stretch;
}

.product_showcase_header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 6px;
}
.product_showcase_eyebrow {
    font-family: var(--font-family-primary);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--themeColor);
    margin-bottom: 14px;
}
.product_showcase_title {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
}
.product_showcase_title_accent {
    display: block;
    font-weight: 800;
    color: var(--themeColor);
}
.product_showcase_title_base {
    font-weight: 700;
    color: var(--black);
}

.product_showcase_description {
    font-size: 16px;
    line-height: 22px;
    color: var(--text);
    max-width: 100%;
    margin: 0;
}

/* ---- cards ---- */
.product_showcase_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: contents;
}

/* li: actual grid item (parent ul is display:contents) */
.product_showcase_item {
    position: relative;
    height: 100%;
}

/* arrow / number badge (top-right corner) */
.product_showcase_item .item-arrow-link {
    position: absolute;
    top: 0;
    right: 0;
    width: 58px;
    height: 52px;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    color: #494a46;
    background-color: #f6f7f7;
    border-bottom-left-radius: 12px;
    border-top-right-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background-color 0.28s ease, color 0.28s ease;
}

.product_showcase_item .item-arrow-link::before,
.product_showcase_item .item-arrow-link::after {
    content: "";
    position: absolute;
    background-color: transparent;
    width: 25px;
    height: 12px;
    z-index: -1;
    transition: box-shadow 0.28s ease;
}
.product_showcase_item .item-arrow-link::before {
    top: 0;
    left: -25px;
    box-shadow: 12px 0 0 0 #f6f7f7;
    border-top-right-radius: 12px;
}
.product_showcase_item .item-arrow-link::after {
    bottom: -12px;
    right: 0;
    left: auto;
    box-shadow: 0 -12px 0 0 #f6f7f7;
    border-bottom-right-radius: 12px;
}

/* card hover: badge lights up */
.product_showcase_item:hover .item-arrow-link,
.product_showcase_item:focus-within .item-arrow-link {
    background-color: var(--themeColor);
    color: var(--white);
}
.product_showcase_item:hover .item-arrow-link::before,
.product_showcase_item:hover .item-arrow-link::after,
.product_showcase_item:focus-within .item-arrow-link::before,
.product_showcase_item:focus-within .item-arrow-link::after {
    box-shadow: 12px 0 0 0 var(--themeColor);
}
.product_showcase_item:hover .item-arrow-link::after,
.product_showcase_item:focus-within .item-arrow-link::after {
    box-shadow: 0 -12px 0 0 var(--themeColor);
}

/* ---- the card itself ---- */
.product_showcase_card {
    position: relative;
    height: 100%;
    box-sizing: border-box;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius12);
    padding: 20px 16px;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.28s ease, border-color 0.28s ease;
}
.product_showcase_card:hover,
.product_showcase_card:focus-visible {
    box-shadow: -1px 12px 34px 0px rgb(82 90 101 / 18%);
    border-color: transparent;
}
.product_showcase_card:focus-visible {
    outline: 2px solid var(--themeColor);
    outline-offset: 3px;
}

.product_showcase_icon {
    position: relative;
    overflow: hidden;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    flex-shrink: 0;
    background: #eaebe6;
    border: 1px solid #e0e0dc;
}

.product_showcase_icon img {
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* hover growth layer — uses per-variant color via CSS variable */
.product_showcase_icon::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: var(--radius12);
    background-color: var(--icon-color, var(--themeColor));
    z-index: 0;
    transform: scale(0);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.product_showcase_card:hover .product_showcase_icon::before,
.product_showcase_card:focus-visible .product_showcase_icon::before {
    transform: scale(1);
}

/* ---- per-product hover colors (only set the variable, no background here) ---- */
.product_showcase_icon--ecommerce {
    --icon-color: #4f46e5;
}
.product_showcase_icon--pos {
    --icon-color: #f0a93a;
}
.product_showcase_icon--portfolio {
    --icon-color: #e8536f;
}
.product_showcase_icon--landing {
    --icon-color: #0ea5a0;
}
.product_showcase_icon--news {
    --icon-color: #2e6fef;
}
.product_showcase_icon--course {
    --icon-color: #7c5cfc;
}
.product_showcase_icon--host {
    --icon-color: #16a34a;
}

.product_showcase_icon--education {
    --icon-color: #0f766e; /* Teal */
}

.product_showcase_icon--quickcommerce {
    --icon-color: #0284c7;
}

.product_showcase_icon--quickchat {
    --icon-color: #e8536f;
}

@media (prefers-reduced-motion: reduce) {
    .product_showcase_icon::before {
        transition: none;
    }
}

.product_showcase_card_name {
    font-family: var(--font-family-primary);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--black);
    margin: 0 0 8px;
}
.product_showcase_card_desc {
    font-size: 15.5px;
    line-height: 22px;
    color: var(--text);
    margin: 0;
}

/* ---- Row 2: 5 cards ---- */
.product_showcase_grid_secondary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    align-items: stretch;
}

/* ---- CTA ---- */
.product_showcase_cta_wrap {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}
.product_showcase_cta {
    font-family: var(--font-family-primary);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--themeColor);
    background: transparent;
    border: 1.5px solid var(--themeColor);
    border-radius: var(--radius6);
    padding: 14px 32px;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease;
}
.product_showcase_cta:hover,
.product_showcase_cta:focus-visible {
    background: var(--themeColor);
    color: var(--white);
}
.product_showcase_cta:focus-visible {
    outline: 2px solid var(--themeColor);
    outline-offset: 3px;
}

@media (max-width: 980px) {
    .product_showcase_grid_primary {
        grid-template-columns: 1fr;
    }
    .product_showcase_header {
        padding-right: 0;
        margin-bottom: 6px;
    }
    .product_showcase_grid_secondary {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 560px) {
    .product_showcase_grid_secondary {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .product_showcase_card {
        transition: none;
    }
}

/*================ How it Work Process  =============*/

.how-it-works {
    max-width: 100%;
    margin: 0 auto;
}

.how-it-works__header {
    max-width: 780px;
    margin: 0 auto 60px;
    text-align: center;
}

.how-it-works__eyebrow {
    display: inline-block;
    font-family: var(--font-family-secondary);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--themeColor);
    background: var(--theme-soft);
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.how-it-works__heading {
    font-weight: 600;
    font-size: 36px;
    line-height: 1.25;
    color: var(--black);
    margin-bottom: 14px;
}

.how-it-works__heading span {
    color: var(--themeColor);
}

.how-it-works__intro {
    font-family: var(--font-family-primary);
    font-size: 16px;
    line-height: 1.7;
    color: var(--text);
}

.how-it-works__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    gap: 20px;
}

.how-it-works__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 10px;
    border-radius: 16px;
    transition: transform 0.25s ease;
}

.how-it-works__step:hover {
    transform: translateY(-4px);
}

/* Icon holder: dashed outer ring + soft inner circle */
.how-it-works__icon-wrap {
    position: relative;
    width: 132px;
    height: 132px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.how-it-works__icon-ring {
    position: absolute;
    inset: 0;
    border: 2px dashed var(--border);
    border-radius: 50%;
    transition: border-color 0.3s ease;
}

.how-it-works__step:hover .how-it-works__icon-ring {
    border-color: var(--themeColor);
}

.how-it-works__icon {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.how-it-works__icon img {
    width: 50px;
    height: 50px;
}

.how-it-works__step:hover .how-it-works__icon {
    background: var(--theme-soft);
}

.how-it-works__icon svg {
    width: 46px;
    height: 46px;
}

.how-it-works__badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--themeColor);
    color: var(--white);
    font-family: var(--font-family-secondary);
    font-weight: 700;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.how-it-works__step:hover .how-it-works__badge {
    opacity: 1;
    transform: scale(1);
}

.how-it-works__title {
    font-weight: 600;
    font-size: 18px;
    color: var(--black);
    margin-bottom: 6px;
}

.how-it-works__tagline {
    font-family: var(--font-family-primary);
    font-weight: 600;
    font-size: 13px;
    color: var(--themeColor);
    letter-spacing: 0.3px;
    margin-bottom: 14px;
}

.how-it-works__desc {
    font-family: var(--font-family-primary);
    font-size: 16px;
    line-height: 22px;
    color: var(--text);
    max-width: 260px;
}

/* Arrow connector between steps (desktop only) */
.how-it-works__arrow {
    position: absolute;
    top: 60px;
    left: 100%;
    width: 120px;
    transform: translateX(-50px);
    pointer-events: none;
    z-index: 1;
}

.how-it-works__arrow svg {
    width: 100%;
    height: auto;
    display: block;
}

.how-it-works__step:nth-child(4) .how-it-works__arrow,
.how-it-works__step:last-child .how-it-works__arrow {
    display: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .how-it-works__steps {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 20px;
    }

    .how-it-works__arrow {
        display: none;
    }
}

@media (max-width: 560px) {
    .how-it-works__header {
        margin-bottom: 20px;
    }

    .how-it-works__heading {
        font-size: 24px;
    }

    .how-it-works__intro {
        font-size: 14.5px;
    }

    .how-it-works__steps {
        grid-template-columns: 1fr;
    }

    .how-it-works__icon-wrap {
        width: 100px;
        height: 100px;
    }

    .how-it-works__icon {
        width: 76px;
        height: 76px;
    }

    .how-it-works__title {
        font-size: 18px;
    }

    .how-it-works__desc {
        font-size: 14px;
        max-width: 300px;
    }
}

/* ==============================================================
    # Tools Integration
=================================================================== */
.tools-area {
    position: relative;
    padding: 80px 0px;
    background-color: var(--paper);
}

/* .use_techologies_shape {
    background-image: url(/images/servie-page-hero-bg.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 1;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
} */

.tools-area > .container {
    position: relative;
    z-index: 1;
}

ul.integration-tools-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
}

@media (min-width: 992px) {
    ul.integration-tools-list {
        height: 100%;
    }
}

ul.integration-tools-list li {
    display: block;
    position: relative;
    z-index: 2;
}

ul.integration-tools-list li .icon {
    display: inline-flex;
    height: 110px;
    width: 110px;
    background: var(--white);
    border-radius: var(--radius12);
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    box-shadow: var(--shadow);
}

ul.integration-tools-list li .icon img {
    max-width: max-content;
}

ul.integration-tools-list li:nth-child(2n) {
    margin-left: 80px;
}

.text-end ul.integration-tools-list li:nth-child(2n) {
    margin-left: 0;
    margin-right: 80px;
}

.tools-heading {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background: var(--white);
    padding: 50px;
    z-index: 1;
    border-radius: 30px;
    border: 1px solid var(--border);
}

.tools-heading img {
    position: absolute;
    height: 80%;
    object-fit: contain;
    object-position: center;
    right: 100%;
    z-index: -1;
}

.tools-heading img:last-child {
    left: 100%;
    right: auto;
}

.tools-heading h2 {
    font-size: 32px;
    font-weight: 600;
}

.tools-heading p {
    font-size: 16px;
    line-height: 24px;
    color: var(--text);
    margin-top: 10px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    ul.integration-tools-list li .icon {
        height: 100px;
        width: 100px;
        padding: 25px;
    }

    ul.integration-tools-list {
        gap: 70px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .tools-heading img {
        display: none;
    }

    ul.integration-tools-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    ul.integration-tools-list li:nth-child(2n) {
        margin: 0;
    }

    ul.integration-tools-list li .icon {
        width: 100%;
    }

    ul.integration-tools-list li .icon img {
        height: 60px;
        margin: auto;
    }

    .tools-heading {
        height: auto;
        margin: 50px 0;
    }

    .text-end ul.integration-tools-list li:nth-child(2n) {
        margin: 0;
    }
}

@media only screen and (max-width: 767px) {
    .tools-heading img {
        display: none;
    }

    ul.integration-tools-list {
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    ul.integration-tools-list li:nth-child(2n) {
        margin: 0;
    }

    ul.integration-tools-list li .icon {
        height: 100px;
        width: 100px;
        padding: 25px;
    }

    .text-end ul.integration-tools-list li:nth-child(2n) {
        margin: 0;
    }

    .tools-heading {
        height: auto;
        margin: 20px 0;
        padding: 28px 20px;
        border-radius: 14px;
    }

    .tools-heading h2 {
        font-size: 26px;
    }
    .tools-area {
        padding: 40px 0px;
    }
}

.advantages_banner_area {
    /* padding: 80px 0; */
}

.advantages_banner_container {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 16px;
    padding: 60px 50px;
    overflow: hidden;
}

.advantages_icon {
    width: 60px;
    height: 60px;
    margin-bottom: 24px;
}

.advantages_banner_content h2 {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 16px;
}

.advantages_banner_content p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 20px;
    max-width: 560px;
}

.advantages_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.advantages_list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 16px;
    margin-bottom: 10px;
}

.advantages_list li i {
    color: #7ed321;
    font-size: 14px;
}

.advantages_banner_thumb {
    text-align: center;
}

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

/* Responsive */
@media (max-width: 991px) {
    .advantages_banner_container {
        padding: 40px 24px;
        text-align: center;
    }

    .advantages_banner_content p {
        max-width: 100%;
    }

    .advantages_list li {
        justify-content: center;
    }

    .advantages_banner_thumb {
        margin-top: 30px;
    }

    .advantages_icon {
        margin-left: auto;
        margin-right: auto;
    }

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

@media (max-width: 767px) {
    .advantages_banner_content h2 {
        font-size: 24px;
    }

    .advantages_banner_content p {
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    .advantages_banner_container {
        padding: 30px 16px;
    }

    .advantages_banner_content h2 {
        font-size: 20px;
    }

    .advantages_list li {
        font-size: 14px;
        text-align: left;
        justify-content: flex-start;
    }
}

.creds-inner {
    max-width: 100%;
    margin: 0 auto;
}

/* ---------- Header ---------- */

.creds-title-header {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 30px;
}

.creds-label {
    margin: 0 0 24px;
    font-size: 32px;
    font-weight: 600;
    color: var(--themeColor);
}

.creds-title {
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
    margin: 0 0 12px;
    max-width: 100%;
    color: #191919;
}

.creds-sub {
    font-size: 16px;
    line-height: 1.7;
    max-width: 100%;
    margin: 0 0 20px;
    font-weight: 500;
    color: var(--text);
}

/* ---------- Grid ---------- */
.creds-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #e4e2dd;
    border: 1px solid #e4e2dd;
    border-radius: 10px;
    overflow: hidden;
}

.cred-card {
    background: #ffffff;
    padding: 0;
    cursor: pointer;
    text-align: left;
    border: none;
    font-family: inherit;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: background-color 0.25s ease;
}
.cred-card:hover,
.cred-card:focus-visible {
    background: #fbfaf8;
}
.cred-card:focus-visible {
    outline: 2px solid #3a3a3a;
    outline-offset: -2px;
}

.cred-frame {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #f3f2ef;
}
.cred-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(0.08);
    transition: transform 0.4s ease;
    aspect-ratio: 4 / 3;
}
.cred-card:hover .cred-frame img {
    transform: scale(1.02);
}

.cred-body {
    padding: 16px;
    border-top: 1px solid #e4e2dd;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cred-org {
    font-size: 14px;
    color: var(--text);
    font-weight: 600;
    margin: 0 0 8px;
    font-family: var(--font-family-secondary);
}

.cred-name {
    font-size: 16.5px;
    font-weight: 600;
    margin: 0 0 12px;
    line-height: 1.35;
    color: #191919;
}

.cred-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    color: var(--themeColor);
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #e4e2dd;
    font-family: var(--font-family-secondary);
}
.cred-meta span strong {
    color: #191919;
    font-weight: 600;
}

.cred-view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 500;
    color: #191919;
    margin-top: 10px;
}
.cred-view svg {
    width: 12px;
    height: 12px;
    transition: transform 0.25s;
}
.cred-card:hover .cred-view svg {
    transform: translateX(3px);
}

/* ---------- Lightbox ---------- */
.cred-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 20, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    padding: 32px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.cred-lightbox.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.cred-lightbox-inner {
    position: relative;
    max-width: min(820px, 92vw);
    max-height: 88vh;
    background: #ffffff;
    border-radius: 8px;
    padding: 12px;
    transform: scale(0.97);
    transition: transform 0.25s ease;
}
.cred-lightbox.open .cred-lightbox-inner {
    transform: scale(1);
}

.cred-lightbox-inner img {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    margin: 0 auto;
    border-radius: 3px;
}

.cred-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #191919;
    color: #ffffff;
    border: 2px solid #faf9f7;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
}
.cred-close:hover {
    background: #3a3a3a;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .creds-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 600px) {
    .creds-title-header {
        margin-bottom: 20px;
    }

    .creds-grid {
        grid-template-columns: 1fr;
    }
    .creds-sub {
        margin-bottom: 34px;
    }
    .cred-lightbox {
        padding: 16px;
    }
    .cred-close {
        top: -12px;
        right: -4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cred-card,
    .cred-frame img,
    .cred-view svg,
    .cred-lightbox,
    .cred-lightbox-inner {
        transition: none !important;
    }
}

/*================ Faq Section Area Start ============== */
.faq-section {
    background-color: #fff;
}
.section_heading .section_sub_title {
    background: var(--themeColor);
    border-radius: 50px;
    font-size: 16px;
    font-weight: 500;
    padding: 6px 16px;
    color: var(--white);
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.section_heading .section_sub_title::before {
    content: "";
    position: absolute;
    top: 0;
    left: -2px;
    width: 13px;
    height: 12px;
    background: #b33d16;
    border-radius: 0 0 7px 0;
}

.section_heading .section_sub_title::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: -2px;
    width: 13px;
    height: 12px;
    background: #b33d16;
    border-radius: 7px 0 0 0;
}

.faq-section__title {
    font-size: 32px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
    margin-top: 10px;
}

.faq-section__header-row {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
}

.faq-section__heading {
    max-width: 510px;
}

.faq-section__description {
    color: #4b5563;
    font-size: 17px;
    line-height: 24px;
    max-width: 540px;
    margin: 0 auto;
    font-weight: 500;
}

.faq-section__body {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
}

.faq-section__accordion-col {
    flex: 1 1 65%;
    min-width: 280px;
}

.faq-section__card-col {
    flex: 1 1 30%;
    min-width: 260px;
    position: sticky;
    top: 100px;
}

.faq-accordion.accordion {
    --bs-accordion-border-color: transparent;
    --bs-accordion-border-width: 0;
    --bs-accordion-border-radius: 16px;
    --bs-accordion-inner-border-radius: 16px;
    --bs-accordion-bg: transparent;
    --bs-accordion-btn-padding-x: 28px;
    --bs-accordion-btn-padding-y: 20px;
    --bs-accordion-btn-bg: #f5f8fc;
    --bs-accordion-btn-color: var(--black);
    --bs-accordion-btn-focus-border-color: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-color: var(--black);
    --bs-accordion-active-bg: transparent;
    --bs-accordion-body-padding-x: 28px;
    --bs-accordion-body-padding-y: 0;
    --bs-accordion-btn-icon: none;
    --bs-accordion-btn-active-icon: none;
}

.faq-accordion__heading {
    margin: 0;
}

.faq-accordion .accordion-button:focus-visible {
    outline: 2px solid var(--themeColor);
    outline-offset: -2px;
}

.faq-accordion .accordion-item {
    position: relative;
    border-radius: 16px !important;
    background: transparent;
    overflow: hidden;
    transition: all 0.35s ease;
}

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

.faq-accordion .accordion-item.is-open {
    border: 1px solid color-mix(in srgb, var(--themeColor) 25%, transparent) !important;
    background: var(--theme-soft);
    box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--themeColor) 25%, transparent);
}

.faq-accordion .accordion-item:not(.is-open):hover {
    box-shadow: 0 6px 18px -14px rgba(17, 24, 39, 0.35);
}

.faq-accordion .accordion-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.6px;
    color: var(--black) !important;
    background: #f5f8fc !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    transition: all 0.35s ease;
}

.faq-accordion .accordion-button:not(.collapsed) {
    background: transparent !important;
    border-color: transparent;
    padding-bottom: 12px;
}

.faq-accordion .accordion-button::after {
    display: none !important;
}

.faq-accordion__number {
    flex-shrink: 0;
    display: none;
    place-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--themeColor);
    background: color-mix(in srgb, var(--themeColor) 10%, transparent);
    transition: all 0.35s ease;
}

.faq-accordion .accordion-button:not(.collapsed) .faq-accordion__number {
    color: #fff;
    background: var(--themeColor);
}

.faq-accordion__question-text {
    flex: 1;
    text-align: left;
}

.faq-accordion__chevron {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-content: center;
    transition: transform 0.3s ease;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7' fill='none'><path d='M12.5 0.750047C12.5 0.750047 8.44934 6.25 7 6.25C5.55057 6.25 1.5 0.75 1.5 0.75' stroke='%23ef5322' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
}

.faq-accordion .accordion-button:not(.collapsed) .faq-accordion__chevron {
    transform: rotate(180deg);
}

.faq-accordion .accordion-body {
    color: #4b5563;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    padding: 0 28px 24px 28px;
}

.faq-help-card {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    border-radius: 32px;
    overflow: hidden;
    padding: 42px;
    gap: 30px;
    background: var(--paper);
}

.faq-help-card::after,
.faq-help-card::before {
    position: absolute;
    content: "";
}

.faq-help-card::before {
    z-index: -1;
    width: 482px;
    height: 482px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--themeColor) 10%, transparent);
    filter: blur(110px);
    top: -132px;
    left: -156px;
}

.faq-help-card::after {
    z-index: -1;
    width: 418px;
    height: 418px;
    border-radius: 418px;
    opacity: 0.6;
    background: color-mix(in srgb, var(--mint) 25%, transparent);
    filter: blur(110px);
    top: 48px;
    left: 170px;
}

.faq-help-card__title {
    color: var(--black);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -1.44px;
    margin: 0 0 10px 0;
}

.faq-help-card__text {
    color: #4b5563;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.57;
    letter-spacing: -0.45px;
    opacity: 0.7;
    margin: 0;
}

.faq_content_body img {
    width: 100%;
    height: auto;
}

.demo_title {
    color: var(--themeColor);
    font-weight: 600;
}

/*
==============================================================
    FAQ Help Card Button Css
==============================================================
*/

.faq-help-card__btn-wrapper {
    margin-top: 20px;
}

.faq-help-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 30px;
    background-color: var(--themeColor);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid var(--themeColor);
}

.faq-help-card__btn:hover {
    background-color: transparent;
    color: var(--themeColor);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@media only screen and (max-width: 1244.98px) {
    .faq-section__header-row {
        flex-wrap: wrap;
    }
}

@media only screen and (max-width: 991.98px) {
    .faq-section__title {
        font-size: 24px;
    }

    .faq-section__card-col {
        position: static;
    }

    .faq-accordion .accordion-button {
        padding: 16px 20px;
        font-size: 16px;
        gap: 14px;
    }

    .faq-accordion .accordion-button:not(.collapsed) {
        padding-bottom: 8px;
    }

    .faq-accordion__number {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .faq-accordion .accordion-body {
        padding: 0 20px 18px 18px;
    }
}

@media only screen and (max-width: 575.98px) {
    .faq-help-card {
        padding: 25px 20px;
        gap: 20px;
    }

    .faq-accordion__question-text {
        font-size: 16px;
    }
}

/*
==============================================================
    Single Service Page — Minimal / Clean / Premium
    Scoped to .single_service_area and .service_faq_area only.
    Uses existing design tokens: --themeColor, --black, --text,
    --border, --shadow, --white, --radius6, --radius12,
    --font-family-primary, --font-family-secondary
==============================================================
*/

/* ---------- Layout shell ---------- */
.single_service_area {
    padding: 90px 0 60px;
}

/* ---------- Intro header ---------- */
.single_service_intro {
    max-width: 90%;
    margin: 0 auto 30px;
    text-align: center;
}

.single_service_eyebrow {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--themeColor);
    padding: 0px 16px;
    border-radius: 20px;
    margin-bottom: 18px;
}

.single_service_heading {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 16px;
}

.single_service_lede {
    font-size: 17px;
    line-height: 1.65;
    color: var(--text);
    margin: 0 auto;
}

/* ---------- Alternating content blocks ---------- */
.single_service_blocks {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.single_service_block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 56px;
    padding: 40px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius12, 12px);
    box-shadow: var(--shadow);
}

.single_service_block--media-left {
    grid-template-areas: "media content";
}

.single_service_block--media-right {
    grid-template-areas: "content media";
}

.single_service_block--media-left .single_service_block_media {
    grid-area: media;
}

.single_service_block--media-left .single_service_block_content {
    grid-area: content;
}

.single_service_block--media-right .single_service_block_media {
    grid-area: media;
}

.single_service_block--media-right .single_service_block_content {
    grid-area: content;
}

.single_service_block_media {
    border-radius: var(--radius6, 6px);
    overflow: hidden;
    background: var(--paper, #f7f5f0);
}

.single_service_block_media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--radius6, 6px);
    transition: transform 0.4s ease;
}

.single_service_block:hover .single_service_block_media img {
    transform: scale(1.02);
}

.single_service_block_title {
    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 16px;
    position: relative;
    padding-bottom: 14px;
}

.single_service_block_title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    border-radius: 3px;
    background: var(--themeColor);
}

.single_service_block_description {
    color: var(--text);
    font-size: 15px !important;
    font-family: var(--font-family-secondary) !important;
}

.single_service_block_description p {
    color: var(--text);
    font-size: 15px !important;
    font-family: var(--font-family-secondary) !important;
    margin-bottom: 14px;
}
.single_service_block_description span {
    color: var(--text);
    font-size: 15px !important;
    font-family: var(--font-family-secondary) !important;
    margin-bottom: 14px;
}

.single_service_block_description p:last-child {
    margin-bottom: 0;
}

.single_service_block_description ul,
.single_service_block_description ol {
    margin: 0 0 14px;
    padding-left: 0px;
    color: var(--text);
}

.single_service_block_description li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.single_service_block_description a {
    color: var(--themeColor);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.single_service_block_description img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius6, 6px);
    margin: 10px 0;
}

/* ---------- FAQ section ---------- */
.service_faq_area {
    padding: 70px 0 100px;
    background: var(--paper, #f7f5f0);
    margin-bottom: 40px;
}

.service_faq_header {
    max-width: 620px;
    margin: 0 auto 48px;
    text-align: center;
}

.service_faq_heading {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--black);
    margin: 12px 0;
}

.service_faq_sub {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
}

.service_faq_wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.service_faq_accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.service_faq_item {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius12, 12px);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.service_faq_item:has(.service_faq_item_button:not(.collapsed)) {
    border-color: color-mix(in srgb, var(--themeColor) 30%, var(--border));
    box-shadow: var(--shadow);
}

.service_faq_item_header {
    margin: 0;
}

.service_faq_item_button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: left;
    background: var(--white);
    border: none;
    padding: 22px 24px;
    font-size: 16.5px;
    font-weight: 500;
    color: var(--black);
    cursor: pointer;
    transition: color 0.25s ease;
}

.service_faq_item_button:focus {
    outline: none;
    box-shadow: none;
}

.service_faq_item_button:focus-visible {
    outline: 2px solid var(--themeColor);
    outline-offset: -2px;
}

.service_faq_item_button:not(.collapsed) {
    color: var(--themeColor);
    padding-bottom: 16px !important;
}

.service_faq_item_question {
    flex: 1;
}

.service_faq_item_icon {
    flex-shrink: 0;
    position: relative;
    width: 20px;
    height: 20px;
}

.service_faq_item_icon::before,
.service_faq_item_icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.25s ease, background 0.25s ease;
}

.service_faq_item_icon::before {
    width: 12px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.service_faq_item_icon::after {
    width: 2px;
    height: 12px;
    transform: translate(-50%, -50%);
}

.service_faq_item_button:not(.collapsed) .service_faq_item_icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.service_faq_item_button:not(.collapsed) .service_faq_item_icon::before {
    background: var(--themeColor);
}

.service_faq_item_body {
    padding: 16px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text);
}

.service_faq_wrapper .accordion-button:not(.collapsed)::after {
    display: none !important;
}
.service_faq_wrapper .accordion-button::after {
    display: none !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .single_service_area {
        padding: 60px 0 40px;
    }

    .single_service_heading {
        font-size: 30px;
    }

    .single_service_intro {
        margin-bottom: 20px;
    }

    .single_service_block {
        grid-template-columns: 1fr;
        grid-template-areas:
            "media"
            "content" !important;
        gap: 28px;
        padding: 28px;
    }

    .single_service_block_media img {
        aspect-ratio: 16 / 10;
    }

    .single_service_block_title {
        font-size: 21px;
    }

    .service_faq_area {
        padding: 50px 0 70px;
    }

    .service_faq_heading {
        font-size: 24px;
    }
}

@media (max-width: 576px) {
    .single_service_heading {
        font-size: 26px;
    }

    .single_service_lede {
        font-size: 15.5px;
    }

    .single_service_block {
        padding: 20px;
        border-radius: var(--radius6, 6px);
    }

    .single_service_block_title {
        font-size: 19px;
    }

    .single_service_block_description {
        font-size: 15px;
    }

    .service_faq_item_button {
        padding: 18px 18px;
        font-size: 15.5px;
    }

    .service_faq_item_body {
        padding: 0 18px 20px;
        font-size: 14.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .single_service_block_media img,
    .service_faq_item,
    .service_faq_item_button,
    .service_faq_item_icon::before,
    .service_faq_item_icon::after {
        transition: none !important;
    }
}

/*
==============================================================
    Fixed Communication Social Css
==============================================================
*/
.fixed_communication_social.fixed_communication_social_active {
    z-index: 999 !important;
    position: relative;
}

.fixed_communication_social .fixed_communication_toggle {
    position: fixed;
    bottom: 50px;
    right: 30px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 999;
    /* animation: ripple-red 1s linear infinite; */
    transition: 0.5s;
    border: 1px solid var(--border);
}

@-webkit-keyframes ripple-red {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 128, 0, 0.3), 0 0 0 1px rgba(0, 128, 0, 0.3),
            0 0 0 1px rgba(0, 128, 0, 0.3);
    }

    100% {
        box-shadow: 0 0 0 1px rgba(0, 128, 0, 0.3),
            0 0 0 1px rgba(0, 128, 0, 0.3), 0 0 0 30px rgba(2241, 42, 2, 0);
    }
}

.fixed_communication_social .fixed_communication_toggle svg {
    position: absolute;
    opacity: 0;
    transition: 0.5s;
}

.fixed_communication_social .fixed_communication_toggle svg:nth-child(1) {
    opacity: 1;
    transform: rotate(360deg);
}

.fixed_communication_social.fixed_communication_social_active
    .fixed_communication_toggle
    svg:nth-child(1) {
    opacity: 0;
    transform: rotate(0deg);
}

.fixed_communication_social.fixed_communication_social_active
    .fixed_communication_toggle
    svg:nth-child(2) {
    opacity: 1;
    transform: rotate(360deg);
}

.fixed_communication_social.fixed_communication_social_active
    .fixed_communication_toggle
    svg:nth-child(3) {
    opacity: 1;
    transform: rotate(360deg);
}

.communication_social {
    position: fixed;
    bottom: 55px;
    right: 34px;
}

.communication_social ul {
    margin: 0px !important;
    padding: 0px !important;
}

.communication_social ul li {
    transition: 0.3s;
    list-style: none;
}

.communication_social ul li:last-child {
    margin-bottom: 0px;
}

.communication_social ul li a {
    border-radius: 100%;
    color: #ffffff;
    position: relative;
}

.communication_social ul li a p {
    position: absolute;
    top: 0;
    right: 100%;
    width: max-content;
    margin-right: 15px;
    background-color: #ffffff;
    color: #333333;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 5px 8px;
    height: 25px;
    line-height: 18px;
    font-size: 14px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    font-weight: 500;
}

.communication_social ul li:hover a p {
    opacity: 1;
    visibility: visible;
}

.communication_social ul li a p::before {
    content: "";
    position: absolute;
    right: -10px;
    top: 50%;
    width: 0;
    height: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border-top: 10px solid transparent;
    border-left: 10px solid #e9ecef61;
    border-bottom: 10px solid transparent;
}

.fixed_communication_social .communication_social ul li:nth-child(1) {
    transform: translateY(78px);
}

.fixed_communication_social .communication_social ul li:nth-child(2) {
    transform: translateY(40px);
}

.fixed_communication_social.fixed_communication_social_active
    .communication_social
    ul
    li:nth-child(1) {
    transform: translateY(-60px);
}

.fixed_communication_social.fixed_communication_social_active
    .communication_social
    ul
    li:nth-child(2) {
    transform: translateY(-55px);
}

.fixed_communication_social.fixed_communication_social_active
    .communication_social
    ul
    li:nth-child(3) {
    transform: translateY(-50px);
}

.fixed_communication_social .fixed_communication_toggle p {
    width: max-content;
    display: block;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 100%;
    background-color: #ffffff;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 1px 10px;
    margin-right: 12px;
    border-radius: 3px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.fixed_communication_social .fixed_communication_toggle p::before {
    content: "";
    position: absolute;
    right: -10px;
    top: 50%;
    width: 0;
    height: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border-top: 10px solid transparent;
    border-left: 10px solid #e9ecef61;
    border-bottom: 10px solid transparent;
    transition: 0.3s;
}

.fixed_communication_social.fixed_communication_social_active
    .fixed_communication_toggle:hover
    p {
    opacity: 1;
    visibility: visible;
}

.fixed_communication_social .fixed_communication_toggle svg ellipse {
    fill: red;
    stroke: none;
}

.fixed_communication_social .fixed_communication_toggle svg g circle {
    fill: var(--themeColor);
    stroke: none;
}

.our_integration_area {
    position: relative;
    overflow: hidden;
}

.our_integration_area .container {
    margin: 0 auto;
}

.integration_head {
    text-align: center;
    max-width: 100%;
    margin: 0 auto 30px;
}

.integration_eyebrow {
    display: inline-block;
    font-family: "Space Grotesk", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ff6b4a;
    padding: 6px 16px;
    border: 1px solid #ff6b4a33;
    border-radius: 999px;
    background: #ff6b4a0d;
    margin-bottom: 20px;
}

.integration_title {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.2;
    color: #0a2a2e;
    margin: 0 0 16px;
}

.integration_title span {
    position: relative;
    display: inline-block;
    color: #003e47;
}

.integration_title span::after {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: -6px;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 14 C 30 4, 50 20, 78 10 S 130 2, 158 12 S 190 18, 198 8' stroke='%23FF6B4A' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.integration_sub {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #5b6b6d;
    margin: 0;
}

.our_integration_content {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.integration_card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    background: #ffffff;
    border-radius: 10px;
    /* box-shadow: 0 1px 2px rgba(10, 42, 46, 0.04),
        0 8px 24px rgba(10, 42, 46, 0.05); */
    border: 1px solid #edf1f1;
    padding: 20px 28px;
    transition: transform 0.25s ease, box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.integration_card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 62, 71, 0.12);
    border-color: #ff6b4a44;
}

.integration_card img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(15%);
    transition: filter 0.25s ease;
}

.integration_card:hover img {
    filter: grayscale(0%);
}

@media (max-width: 992px) {
    .our_integration_content {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .our_integration_content {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .integration_card {
        height: 80px;
        padding: 14px 18px;
    }
    .integration_card img {
        max-height: 26px;
    }
}

/* Contact / Quote Form — Redesigned
----------------------------------- */

.video_embed_wrapper {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.video_embed_wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service_area_contact_us {
    padding-top: 0px !important;
    background-color: #ffff !important;
    margin-bottom: 40px;
}

.contact_us_wrapper {
    padding: 30px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #f7f5f0 0%, #fdf9f2 45%, #fde7e2 100%);
}

.contact_us_area .auth_item {
    position: relative;
}

.contact_us_area h1 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 22px;
}

.contact_us_area h1 > *:nth-child(2) {
    color: var(--themeColor) !important;
}

.contact_us_area .auth_item select,
.contact_us_area .auth_item input,
.contact_us_area .auth_item textarea {
    width: 100%;
    background-color: #f8f9fb;
    border: 1.5px solid #e6e8eb;
    border-radius: 10px;
    padding: 14px 20px 14px 62px;
    font-size: 16px;
    font-family: "Albert Sans", sans-serif;
    color: var(--black);
    outline: none;
    transition: border-color 0.25s ease, background-color 0.25s ease,
        box-shadow 0.25s ease;
}

.contact_us_area .auth_item select:focus,
.contact_us_area .auth_item input:focus,
.contact_us_area .auth_item textarea:focus {
    border-color: var(--themeColor) !important;
    background-color: var(--white) !important;
    box-shadow: 0 0 0 4px rgba(96, 191, 193, 0.12) !important;
}

.contact_us_area .auth_item select {
    appearance: none;
    cursor: pointer;
}

.contact_us_area .auth_item input::placeholder,
.contact_us_area .auth_item textarea::placeholder {
    font-size: 16px;
    color: #9a9fa8;
}

.contact_us_area .auth_item textarea {
    resize: none;
    min-height: 100px;
}

.contact_us_area .auth_item svg {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    height: 34px;
    width: 34px;
    padding: 8px;
    background-color: var(--theme-soft);
    border-radius: 8px;
    border: none;
    color: var(--themeColor);
    transition: background-color 0.25s ease, color 0.25s ease;
}

.contact_us_area .auth_item:focus-within svg {
    background-color: var(--themeColor);
    color: var(--white);
}

.contact_us_area .auth_item .textarea_svg_icon {
    transform: none;
    height: 34px;
    width: 34px;
    top: 16px !important;
}

.contact_us_area .auth_item > i.fa-angle-down {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #9a9fa8;
    pointer-events: none;
}

.contact_us_area .auth_item i {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}

.contact_us_area .text-danger {
    display: block;
    font-size: 14px;
    margin-top: 0px;
    padding-left: 4px;
}

.contact_us_area .common_btn {
    margin-top: 0px;
}

.contact_us_area .common_btn .common_btn_link {
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--themeColor);
    color: var(--white);
    padding: 0px 0px !important;
    border-radius: 6px;
    font-size: 16px !important;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: background-color 0.25s ease, transform 0.15s ease;
    cursor: pointer;
    margin: 0 auto;
}

.contact_us_area .common_btn .common_btn_link:hover {
    background-color: var(--black);
}

.contact_us_area .common_btn .common_btn_link:active {
    transform: scale(0.98);
}

#required_input_validation {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 600;
}

@media only screen and (max-width: 576px) {
    .service_area_contact_us .contact_us_wrapper {
        padding: 20px !important;
        border-radius: 10px;
    }

    .contact_us_area .auth_item {
        margin-bottom: 16px;
    }

    .contact_us_area .auth_item select,
    .contact_us_area .auth_item input,
    .contact_us_area .auth_item textarea {
        padding: 12px 16px 12px 54px;
        font-size: 15px;
    }

    .contact_us_area .auth_item svg {
        left: 10px;
        height: 30px;
        width: 30px;
    }
}