@font-face {
    font-family: Geomanist-Regular;
    src: url(../fonts/Geomanist-Regular.ttf)
}

@font-face {
    font-family: Geomanist-Medium;
    src: url(../fonts/Geomanist-Medium.ttf)
}

@font-face {
    font-family: Geomanist-Semi;
    src: url(../fonts/Geomanist-Semi.ttf)
}

@font-face {
    font-family: Geomanist-Bold;
    src: url(../fonts/Geomanist-Bold.ttf)
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    font-family: Geomanist-Regular;
    overflow-x: hidden
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
    list-style: none;
    margin: 0;
    padding: 0
}

a {
    text-decoration: none
}

.dec_banner {
    font-size: 19px
}

.fw-bold {
    font-family: var(--bold)
}

.fw-medium {
    font-family: var(--medium)
}

#owl_slider .owl-item img {
    width: 18px !important
}

.fs-50 {
    font-size: 50px !important
}

.fs-17 {
    font-size: 17px !important
}

.loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite
}

.loader::before,
.loader::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 5px solid #FFF;
    animation: prixClipFix 2s linear infinite
}

.loader::after {
    border-color: var(--PrimaryColor);
    animation: prixClipFix 2s linear infinite, rotate 0.5s linear infinite reverse;
    inset: 6px
}

@keyframes rotate {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes prixClipFix {
    0% {
        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
    }

    25% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
    }

    50% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
    }

    75% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
    }

    100% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
    }
}

.circle_map {
    width: 10px;
    height: 10px;
    background-color: var(--PrimaryColor);
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    animation: pulses 2s infinite;
    border: 1px solid #fff
}

.circle_1 {
    top: 21.7%;
    left: 6.3%
}

.circle_2 {
    top: 18.7%;
    left: 5.3%
}

.circle_3 {
    top: 18%;
    left: 7.5%
}

.circle_4 {
    top: 20.5%;
    left: 9.5%
}

.circle_5 {
    top: 20.5%;
    left: 15.5%
}

.circle_6 {
    top: 25.5%;
    left: 14.5%
}

.circle_7 {
    top: 28.7%;
    left: 15.7%
}

.circle_8 {
    top: 33.7%;
    left: 15.7%
}

.circle_9 {
    top: 29.2%;
    left: 22.7%
}

.circle_10 {
    top: 37.7%;
    left: 17.1%
}

.circle_11 {
    top: 28.7%;
    left: 17.1%
}

.circle_12 {
    top: 37.7%;
    left: 19.7%
}

.circle_13 {
    top: 34.5%;
    left: 18.5%
}

.circle_14 {
    top: 34%;
    left: 24%
}

.circle_15 {
    top: 37%;
    left: 23.5%
}

.circle_16 {
    top: 31.7%;
    left: 27.7%
}

.circle_17 {
    top: 34.5%;
    left: 26.7%
}

.circle_18 {
    top: 36.7%;
    left: 27.3%
}

.circle_19 {
    top: 38%;
    left: 26.3%
}

.circle_20 {
    top: 30.7%;
    left: 30%
}

.circle_21 {
    top: 29.7%;
    left: 28.4%
}

.circle_22 {
    top: 27.7%;
    left: 28%
}

header {
    box-shadow: 0 0 10px rgb(0 0 0 / .1)
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: #fff0;
    transition: all 0.3s ease;
    box-shadow: none
}

header.sticky {
    box-shadow: 0 4px 10px rgb(0 0 0 / .1);
    background: rgb(255 255 255 / .9)
}

.main_menu>li {
    position: relative
}

.main_menu>li>a,
header.sticky .main_menu>li>a {
    display: inline-block;
    padding: 12px 20px;
    color: var(--BlackColor) !important;
    font-family: var(--medium);
    transition: .3s;
    position: relative
}

header.sticky .logo_main img {
    filter: brightness(1) invert(0)
}

header.sticky .btn_toggle {
    color: var(--BlackColor)
}

.main_menu li a:hover {
    color: var(--PrimaryColor)
}

.main_menu>li>a::after {
    content: '';
    width: 0%;
    height: 2px;
    background-color: var(--PrimaryColor);
    transition: .3s;
    position: absolute;
    bottom: 0;
    left: 0
}

.main_menu>li>a:hover::after {
    width: 100%
}

.sub_menu {
    position: absolute;
    top: 100%;
    z-index: 99;
    background-color: var(--WhiteColor);
    border-radius: 7px;
    width: 350px;
    box-shadow: 0 0 10px rgb(0 0 0 / .1);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: .3s
}

.sub_menu>li>a {
    display: block;
    padding: 12px 20px;
    color: var(--BlackColor);
    font-family: var(--medium);
    transition: .3s
}

.sub_menu>li>a:hover {
    display: block;
    background-color: var(--PrimaryColor);
    color: var(--WhiteColor)
}

.main_menu>li:hover .sub_menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0)
}

.main-box {
    height: 100vh;
    display: flex;
    margin: auto
}

.button-box {
    height: 500px;
    max-width: 500px;
    align-items: center;
    justify-content: center;
    margin: auto;
    display: grid
}

.button {
    display: flex;
    border-radius: 5px;
    transition: all 0.5s ease;
    font-size: 18px;
    background-color: var(--PrimaryColor);
    color: #fff;
    outline: none;
    cursor: pointer;
    border: none;
    padding: 8px 20px;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden
}

.button-pulse {
    animation: pulses 2s infinite
}

@keyframes pulses {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--rgbPrimaryColor), .7)
    }

    70% {
        box-shadow: 0 0 0 15px rgba(var(--rgbPrimaryColor), 0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--rgbPrimaryColor), 0)
    }
}

.title {
    font-family: var(--semi);
    transition: 0.5s;
    text-shadow: 2px 2px 4px rgb(0 0 0 / .5)
}

.btn_toggle {
    display: none;
    color: var(--WhiteColor)
}

.mob_menu {
    display: none
}

.logo_main h2 {
    color: var(--BlackColor)
}

@media screen and (max-width:991px) {
    .btn_toggle {
        display: block
    }

    .main_menu {
        display: none !important
    }

    .mob_menu {
        width: 90%;
        height: 100vh;
        background-color: var(--WhiteColor);
        position: absolute;
        top: 0;
        left: -100%;
        z-index: 9999;
        box-shadow: 0 0 10px rgb(0 0 0 / .1);
        transition: .3s
    }

    .mob_menu ul li a {
        display: block;
        padding: 12px 20px;
        border-bottom: 1px solid var(--PrimaryColor);
        color: var(--BlackColor)
    }

    .mob_active {
        left: 0
    }

    .button {
        font-size: 18px
    }

    .button img {
        width: 35px !important
    }

    .mob_menu {
        display: block
    }
}

@media screen and (max-width:560px) {
    .button {
        padding: 12px;
        font-size: 16px
    }

    .button img {
        width: 25px !important
    }

    .btn_toggle {
        margin-right: 10px !important
    }

    .logo_main h2 {
        font-size: 21px
    }

    .mob_sub_menu li {
        padding: 12px 20px
    }
}

#calendarModal .modal-xl {
    max-width: 1320px
}

.slider_con {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4
}

.slider {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden
}

.slide {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 100%;
    left: 0;
    transition: top 1s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 1;
    color: #fff;
    text-align: center;
    padding: 20px 40px
}

.slide video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1
}

.slide.active {
    top: 0;
    z-index: 2
}

.slider_con h1 {
    font-size: 46px;
    font-family: var(--bold);
    color: var(--PrimaryColor);
    margin: 5px 0
}

.slider_con span {
    color: var(--WhiteColor);
}

.slider_con button {
    margin-top: 25px;
    padding: 12px 24px;
    background: var(--PrimaryColor);
    color: var(--WhiteColor);
    border: none;
    border-radius: 5px;
    font-family: var(--regular);
    cursor: pointer;
    transition: 0.3s
}

.slider_sec .pagination {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--WhiteColor);
    font-family: var(--bold);
    z-index: 999;
    display: block
}

.slider_sec .pagination div {
    margin: 10px 0;
    opacity: .6;
    cursor: pointer
}

.slider_sec .pagination .active {
    opacity: 1
}

.slider_sec .pagination-wrapper {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10
}

.line {
    width: 2px;
    height: 120px;
    background-color: #999;
    position: relative;
    margin-bottom: 10px
}

.numbers {
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    text-align: center
}

.numbers div {
    color: #fff;
    font-family: var(--bold);
    opacity: .6;
    cursor: pointer;
    transition: 0.3s;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff
}

.numbers .active {
    opacity: 1
}

.slder::after,
.slider::after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / .1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2
}

@media screen and (max-width:991px) {
    .slider_con h2 {
        font-size: 23px;
        margin: 4px 0
    }

    .slider_con {
        width: 100%;
        padding: 0 30px
    }

    .box>ul {
        right: -25px !important
    }
}

.content_title {
    color: var(--PrimaryColor);
    font-family: var(--semi)
}

.bg_service::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: #F0F2F3;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2
}

.img_service::before {
    content: '';
    width: 40px;
    height: 40px;
    border: 4px solid var(--PrimaryColor);
    position: absolute;
    top: -10px;
    left: 42%;
    transform: translate(-50%, 0);
    z-index: -1
}

.single_service_box::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: var(--WhiteColor);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1
}

.title_service {
    font-family: var(--medium)
}

.title_service span {
    color: var(--PrimaryColor)
}

.btn_custom {
    color: var(--PrimaryColor);
    border: 1px solid var(--PrimaryColor);
    transition: .3s
}

.btn_custom:hover {
    background-color: var(--PrimaryColor);
    color: var(--WhiteColor)
}

.project_section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    background-image: url(../images/bg_project.png);
    background-size: 100%;
    background-attachment: fixed
}

.single_project_box::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: var(--WhiteColor);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1
}

.single_work_box h3 span {
    color: var(--PrimaryColor)
}

.video-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 10px rgb(0 0 0 / .1)
}

.video-wrapper video {
    width: 100%;
    display: block;
    border-radius: 10px
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: var(--PrimaryColor);
    border-radius: 50%;
    cursor: pointer;
    z-index: 2
}

.play-btn::before {
    content: "";
    position: absolute;
    left: 32px;
    top: 27px;
    border-style: solid;
    border-width: 14px 0 13px 23px;
    border-color: #fff0 #fff0 #fff0 #fff
}

.play-btn::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    border: 2px solid rgb(255 255 255 / .7);
    border-radius: 50%;
    top: -20px;
    left: -20px;
    animation: pulse 1.5s infinite
}

@keyframes pulse {
    0% {
        transform: scale(.9);
        opacity: 1
    }

    100% {
        transform: scale(1.3);
        opacity: 0
    }
}

.video-wrapper.playing::before {
    opacity: 0;
    pointer-events: none
}

.single_logo_box img {
    filter: brightness(0) invert(1);
    margin: 20px 0;
    width: 60%;
    cursor: pointer;
    transition: .3s
}

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

.bg_contact_bg {
    background-image: url(../images/contact_bg.png);
    background-size: cover;
    padding: 80px 0;
    background-attachment: fixed
}

.title_contact {
    font-size: 48px;
    font-family: var(--semi)
}

.btn_custom_dark {
    color: var(--WhiteColor);
    border: 1px solid var(--PrimaryColor);
    background-color: var(--PrimaryColor)
}

.btn_custom_dark:hover {
    color: var(--WhiteColor)
}

.bg_testmonials {
    background-image: url(../images/bg_testminolas.png);
    background-size: cover
}

.testim .wrap {
    position: relative;
    width: 100%;
    max-width: 1020px;
    padding: 40px 20px;
    margin: auto
}

.testim .arrow {
    display: block;
    position: absolute;
    color: #eee;
    cursor: pointer;
    font-size: 2em;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    padding: 5px;
    z-index: 22222222
}

.testim .arrow:before {
    cursor: pointer
}

.testim .arrow:hover {
    color: var(--PrimaryColor)
}

.testim .arrow.left {
    left: -40px
}

.testim .arrow.right {
    right: -40px
}

.testim .dots {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 60px;
    left: 0;
    display: block;
    z-index: 3333;
    height: 12px
}

.testim .dots .dot {
    list-style-type: none;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #eee;
    margin: 0 10px;
    cursor: pointer;
    -webkit-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    position: relative
}

.testim .dots .dot.active {
    -webkit-animation: testim-scale .5s ease-in-out forwards;
    -moz-animation: testim-scale .5s ease-in-out forwards;
    -ms-animation: testim-scale .5s ease-in-out forwards;
    -o-animation: testim-scale .5s ease-in-out forwards;
    animation: testim-scale .5s ease-in-out forwards
}

.testim .cont {
    position: relative;
    overflow: hidden
}

.testim .cont>div {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 20px 30px 20px;
    opacity: 0
}

.testim .cont>div.inactive {
    opacity: 0
}

.testim .cont>div.active {
    position: relative;
    opacity: 1
}

.testim .cont div .img img {
    display: block;
    width: 60px;
    height: 60px;
    margin: auto;
    border-radius: 50%
}

.testim .cont div h6 {
    color: var(--WhiteColor)
}

.testim .cont div p {
    color: #7D7D7D
}

.testim .cont div.active .img img {
    -webkit-animation: testim-show .5s ease-in-out forwards;
    -moz-animation: testim-show .5s ease-in-out forwards;
    -ms-animation: testim-show .5s ease-in-out forwards;
    -o-animation: testim-show .5s ease-in-out forwards;
    animation: testim-show .5s ease-in-out forwards
}

.testim .cont div.active h2 {
    -webkit-animation: testim-content-in .4s ease-in-out forwards;
    -moz-animation: testim-content-in .4s ease-in-out forwards;
    -ms-animation: testim-content-in .4s ease-in-out forwards;
    -o-animation: testim-content-in .4s ease-in-out forwards;
    animation: testim-content-in .4s ease-in-out forwards
}

.testim .cont div.active p {
    -webkit-animation: testim-content-in .5s ease-in-out forwards;
    -moz-animation: testim-content-in .5s ease-in-out forwards;
    -ms-animation: testim-content-in .5s ease-in-out forwards;
    -o-animation: testim-content-in .5s ease-in-out forwards;
    animation: testim-content-in .5s ease-in-out forwards
}

.testim .cont div.inactive .img img {
    -webkit-animation: testim-hide .5s ease-in-out forwards;
    -moz-animation: testim-hide .5s ease-in-out forwards;
    -ms-animation: testim-hide .5s ease-in-out forwards;
    -o-animation: testim-hide .5s ease-in-out forwards;
    animation: testim-hide .5s ease-in-out forwards
}

.testim .cont div.inactive h2 {
    -webkit-animation: testim-content-out .4s ease-in-out forwards;
    -moz-animation: testim-content-out .4s ease-in-out forwards;
    -ms-animation: testim-content-out .4s ease-in-out forwards;
    -o-animation: testim-content-out .4s ease-in-out forwards;
    animation: testim-content-out .4s ease-in-out forwards
}

.testim .cont div.inactive p {
    -webkit-animation: testim-content-out .5s ease-in-out forwards;
    -moz-animation: testim-content-out .5s ease-in-out forwards;
    -ms-animation: testim-content-out .5s ease-in-out forwards;
    -o-animation: testim-content-out .5s ease-in-out forwards;
    animation: testim-content-out .5s ease-in-out forwards
}

@-webkit-keyframes testim-content-in {
    from {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }

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

@-moz-keyframes testim-content-in {
    from {
        opacity: 0;
        -moz-transform: translateY(100%);
        transform: translateY(100%)
    }

    to {
        opacity: 1;
        -moz-transform: translateY(0);
        transform: translateY(0)
    }
}

@-ms-keyframes testim-content-in {
    from {
        opacity: 0;
        -ms-transform: translateY(100%);
        transform: translateY(100%)
    }

    to {
        opacity: 1;
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

@-o-keyframes testim-content-in {
    from {
        opacity: 0;
        -o-transform: translateY(100%);
        transform: translateY(100%)
    }

    to {
        opacity: 1;
        -o-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes testim-content-in {
    from {
        opacity: 0;
        transform: translateY(100%)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@-webkit-keyframes testim-content-out {
    from {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

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

@-moz-keyframes testim-content-out {
    from {
        opacity: 1;
        -moz-transform: translateY(0);
        transform: translateY(0)
    }

    to {
        opacity: 0;
        -moz-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

@-ms-keyframes testim-content-out {
    from {
        opacity: 1;
        -ms-transform: translateY(0);
        transform: translateY(0)
    }

    to {
        opacity: 0;
        -ms-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

@-o-keyframes testim-content-out {
    from {
        opacity: 1;
        -o-transform: translateY(0);
        transform: translateY(0)
    }

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

@keyframes testim-content-out {
    from {
        opacity: 1;
        transform: translateY(0)
    }

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

@-webkit-keyframes testim-show {
    from {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }

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

@-moz-keyframes testim-show {
    from {
        opacity: 0;
        -moz-transform: scale(0);
        transform: scale(0)
    }

    to {
        opacity: 1;
        -moz-transform: scale(1);
        transform: scale(1)
    }
}

@-ms-keyframes testim-show {
    from {
        opacity: 0;
        -ms-transform: scale(0);
        transform: scale(0)
    }

    to {
        opacity: 1;
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@-o-keyframes testim-show {
    from {
        opacity: 0;
        -o-transform: scale(0);
        transform: scale(0)
    }

    to {
        opacity: 1;
        -o-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes testim-show {
    from {
        opacity: 0;
        transform: scale(0)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@-webkit-keyframes testim-hide {
    from {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    to {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
}

@-moz-keyframes testim-hide {
    from {
        opacity: 1;
        -moz-transform: scale(1);
        transform: scale(1)
    }

    to {
        opacity: 0;
        -moz-transform: scale(0);
        transform: scale(0)
    }
}

@-ms-keyframes testim-hide {
    from {
        opacity: 1;
        -ms-transform: scale(1);
        transform: scale(1)
    }

    to {
        opacity: 0;
        -ms-transform: scale(0);
        transform: scale(0)
    }
}

@-o-keyframes testim-hide {
    from {
        opacity: 1;
        -o-transform: scale(1);
        transform: scale(1)
    }

    to {
        opacity: 0;
        -o-transform: scale(0);
        transform: scale(0)
    }
}

@keyframes testim-hide {
    from {
        opacity: 1;
        transform: scale(1)
    }

    to {
        opacity: 0;
        transform: scale(0)
    }
}

@media all and (max-width:300px) {
    body {
        font-size: 14px
    }
}

@media all and (max-width:500px) {
    .testim .arrow {
        font-size: 1.5em
    }

    .testim .cont div p {
        line-height: 25px
    }
}

.single_logo_box {
    width: 20%;
    padding: 0 10px;
    margin-top: 20px
}

footer {
    background-image: url(../images/footer_bg.png);
    background-size: cover;
    background-position: bottom;
    padding: 100px 0
}

.footer_menu li a {
    display: block;
    padding: 5px 0;
    color: var(--BlackColor);
    transition: .3s
}

.footer_menu li a:hover {
    color: var(--PrimaryColor)
}

.footer_icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #F4F4F4;
    color: var(--PrimaryColor)
}

.footer_icon_1 {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #F4F4F4;
    color: var(--PrimaryColor);
    transition: .3s
}

.footer_icon_1:hover {
    background-color: var(--PrimaryColor);
    color: var(--WhiteColor)
}

.contact_bg_page {
    background-image: url(../images/contact_bg_page.png);
    background-size: cover
}

.mail_box a {
    color: var(--BlackColor)
}

.mail_box a:hover {
    color: var(--PrimaryColor)
}

.custom_input {
    background: #f3f3f3;
    border: none;
    height: 45px
}

textarea.custom_input {
    height: auto
}

.scroll-container {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    display: flex;
    justify-content: end
}

.btn_list_blog {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    list-style: none;
    gap: 10px;
    width: max-content
}

.btn_list_blog li {
    flex: 0 0 auto;
    padding: 7px 10px;
    cursor: pointer;
    font-size: 14px;
    background-color: #f2f2f2;
    border-radius: 5px;
    white-space: nowrap
}

.active_blog_btn {
    background-color: var(--PrimaryColor) !important;
    color: var(--WhiteColor);
    border-radius: 5px
}

.page-item.active .page-link {
    background: var(--PrimaryColor);
    border-color: var(--PrimaryColor)
}

.page-link {
    color: var(--PrimaryColor)
}

.title_blog {
    color: #000 !important
}

.blog_video_sec::before {
    content: '';
    width: 100%;
    height: 99.5%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb(0 0 0 / .5);
    z-index: 1
}

.blog_content_details * {
    font-family: var(--regular) !important
}

.blog_content_details h2,
.blog_content_details h3,
.blog_content_details h4,
.blog_content_details h5,
.blog_content_details h6 {
    font-family: var(--medium) !important
}

.about_service_main {
    background-color: #00040F
}

.single_service_about {
    background-image: url(../images/bg_about_service.png);
    background-size: cover
}

.single_service_about {
    height: 70px;
    border-radius: 8px
}

.single_btn_why {
    border-radius: 10px;
    cursor: pointer
}

.single_btn_why h3 {
    color: #888
}

.icon_why {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background-color: var(--WhiteColor);
    color: var(--PrimaryColor)
}

.single_btn_why p {
    display: none
}

.single_btn_why .icon_why_main {
    display: none
}

.active_btn_why {
    background-color: var(--PrimaryColor)
}

.active_btn_why h3,
.active_btn_why p {
    color: var(--WhiteColor)
}

.active_btn_why p {
    display: block
}

.active_btn_why img {
    filter: brightness(0) invert(1)
}

.active_btn_why .icon_why_main {
    display: block
}

.content_why::before {
    content: '';
    width: 111%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -70px;
    background-color: rgba(var(--rgbPrimaryColor), .1);
    z-index: -1
}

.active_btn_why {
    position: relative
}

.active_btn_why::before {
    content: '';
    width: 5px;
    height: 80%;
    background-color: var(--PrimaryColor);
    border-radius: 10px;
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translate(-50%, -50%)
}

.service_1_banner::before {
    content: '';
    width: 100%;
    height: 99.5%;
    background-color: rgb(0 0 0 / .5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.service_1banner_title {
    transform: translate(-50%, -50%);
    z-index: 1
}

.service_1banner_title h1 {
    font-size: 55px
}

.service_1banner_title h1 span {
    color: var(--PrimaryColor)
}

.btn_custom_white {
    color: var(--PrimaryColor);
    background-color: var(--WhiteColor);
    transition: .3s
}

.btn_custom_white:hover {
    background-color: var(--PrimaryColor);
    color: var(--WhiteColor)
}

.btn_custom_orange {
    color: var(--WhiteColor);
    background-color: var(--PrimaryColor);
    transition: .3s
}

.btn_custom_orange:hover {
    background-color: var(--WhiteColor);
    color: var(--PrimaryColor)
}

.icon_approch {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--PrimaryColor);
    color: var(--WhiteColor);
    font-size: 20px
}

.icon_approch::before {
    content: '';
    width: 2px;
    height: 70%;
    position: absolute;
    top: 0;
    left: 9.5%;
    background-color: #DADADA;
    z-index: -1
}

.icon_approch::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    bottom: 28%;
    left: 8.6%;
    background-color: #DADADA;
    z-index: -1
}

.service_approch .col-lg-4:nth-child(2) .icon_approch::after {
    bottom: 0%
}

.service_approch .col-lg-4:nth-child(2) .icon_approch::before {
    height: 100%
}

.service_approch .col-lg-4:nth-child(3) .icon_approch::after {
    bottom: 13%
}

.service_approch .col-lg-4:nth-child(3) .icon_approch::before {
    height: 85%
}

#owl_slider .owl-nav button.owl-next,
#owl_slider .owl-nav button.owl-prev {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--PrimaryColor);
    color: var(--PrimaryColor)
}

#owl_slider .owl-nav button.owl-next:hover,
#owl_slider .owl-nav button.owl-prev:hover {
    background-color: var(--PrimaryColor);
    color: var(--WhiteColor)
}

#owl_slider .owl-nav {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 0
}

.single_price_box {
    box-shadow: 0 0 10px rgb(0 0 0 / .1)
}

.single_price_icon {
    width: 60px;
    height: 60px;
    background-color: var(--PrimaryColor);
    color: var(--WhiteColor);
    font-size: 27px
}

.content {
    max-width: 1000px !important
}

@media screen and (min-width:992px) {
    .contact_bg_mob::before {
        background: none
    }

    #owl_slider {
        display: none !important
    }
}

@media screen and (max-width:1200px) {
    .icon_approch::after {
        left: 12%
    }

    .icon_approch::before {
        left: 13%
    }
}

@media screen and (max-width:991px) {
    .content {
        width: 100% !important
    }

    .single_work_box:nth-child(2) {
        margin-left: -40px !important
    }

    .content_why::before {
        left: 0;
        width: 100%
    }

    .content_why {
        padding: 40px 30px
    }

    .service_approch {
        display: none !important
    }

    #owl_slider .icon_approch::before,
    #owl_slider .icon_approch::after {
        display: none
    }

    .owl_slider_content {
        padding: 15px 0 !important
    }

    .fs-50 {
        font-size: 40px !important
    }

    .fs-17 {
        font-size: 16px !important
    }
}

@media screen and (max-width:767px) {
    .service_1banner_title h1 {
        font-size: 35px;
    }

    .service_1_banner video {
        object-fit: cover;
        height: 500px;
    }

    .project_section::before {
        background-image: url(../images/mob_bg_project.png)
    }

    .contact_bg_page {
        background: none
    }

    .contact_bg_mob {
        position: relative
    }

    .contact_bg_mob::before {
        content: '';
        width: 100%;
        height: 100%;
        background-image: url(../images/mob_contact_bg.png);
        background-size: cover;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1
    }

    .scroll-container {
        display: block
    }

    #owl_slider .icon_approch::before,
    #owl_slider .icon_approch::after {
        display: block
    }

    .owl_slider_content {
        padding: 15px 50px !important
    }

    .icon_approch::before {
        left: 6%;
        height: 100%
    }

    .icon_approch::after {
        left: 5.3%;
        bottom: 0
    }

    .service_1banner_title {
        padding: 0 20px !important;
        width: 100% !important
    }

    .service_1banner_title h1 {
        font-size: 35px !important
    }

    .fs-50 {
        font-size: 36px !important
    }
}

@media screen and (max-width:576px) {
    .title_main {
        font-size: 38px !important
    }

    .title_main_1 {
        font-size: 28px !important
    }

    .title_contact {
        font-size: 35px !important
    }

    .single_work_box {
        width: 100% !important;
        margin-top: 15px !important
    }

    .single_work_box h4 {
        font-size: 17px;
        padding: 0 40px
    }

    .single_work_box:nth-child(2) {
        margin-left: 0 !important
    }

    .service_1banner_title {
        padding: 0 20px !important;
        width: 100% !important
    }

    .service_1banner_title h1 {
        font-size: 25px !important
    }

    .play-btn {
        width: 50px;
        height: 50px
    }

    .play-btn::before {
        border-width: 10px 0 10px 19px;
        left: 19px;
        top: 15px
    }

    .play-btn::after {
        width: 60px;
        height: 60px;
        top: -5px;
        left: -5px
    }

    .single_logo_box {
        width: 33.33%
    }

    .content_testmonials {
        font-size: 16px !important
    }

    .testim .arrow.right {
        right: -5px
    }

    .testim .arrow.left {
        left: -5px
    }

    .testim .arrow {
        top: 64%
    }

    .slider {
        height: 60vh
    }
}

.partner_sec .cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.partner_sec .cards-grid .row-2 {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: calc(66.66% + 10px);
    margin: 0 auto;
    width: 100%;
}

.partner_sec .card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    cursor: default;
}

.partner_sec .card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(var(--rgbPrimaryColor), 0.05) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
}

.partner_sec .card:hover {
    border-color: rgba(var(--rgbPrimaryColor), 0.5);
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08), 0 0 30px rgba(var(--rgbPrimaryColor), 0.08);
    background: #fff;
}

.partner_sec .card:hover::before {
    opacity: 1;
}

.partner_sec .card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(var(--rgbPrimaryColor), 0.1);
    border: 1px solid rgba(var(--rgbPrimaryColor), 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 22px;
    transition: background 0.3s;
}

.partner_sec .card:hover .card-icon {
    background: rgba(var(--rgbPrimaryColor), 0.18);
}

.partner_sec .card-number {
    position: absolute;
    top: 28px;
    right: 28px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(var(--rgbPrimaryColor), 0.3);
}

.partner_sec .card h3 {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.partner_sec .card p {
    font-size: 14.5px;
    color: #666666;
    line-height: 1.7;
}

.partner_sec .card p strong {
    color: var(--PrimaryColor);
    font-weight: 600;
}

@media (max-width: 900px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cards-grid .row-2 {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }

    .cards-grid .row-2 {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: #f9f9f9;
    border: 1px solid #ebebeb;
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.faq-item.open {
    border-color: rgba(var(--rgbPrimaryColor), 0.45);
    box-shadow: 0 8px 30px rgba(var(--rgbPrimaryColor), 0.07);
    background: #fff;
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: left;
}

.faq-question-text {
    font-size: 15.5px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.4;
    flex: 1;
    transition: color 0.2s;
}

.faq-item.open .faq-question-text {
    color: var(--PrimaryColor);
}

.faq-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #efefef;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.3s, border-color 0.3s, transform 0.35s;
}

.faq-item.open .faq-icon {
    background: rgba(var(--rgbPrimaryColor), 0.12);
    border-color: rgba(var(--rgbPrimaryColor), 0.35);
    transform: rotate(45deg);
}

.faq-icon svg {
    stroke: #888;
    transition: stroke 0.3s;
}

.faq-item.open .faq-icon svg {
    stroke: var(--PrimaryColor);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s;
    padding: 0 26px;
}

.faq-item.open .faq-answer {
    max-height: 400px;
    padding-bottom: 24px;
}

.faq-answer p {
    font-size: 14.5px;
    color: #555;
    line-height: 1.75;
    border-top: 1px solid #f0f0f0;
    padding-top: 16px;
}

.faq-answer p strong {
    color: var(--PrimaryColor);
    font-weight: 600;
}

.partner_sec {
    background-color: #f8f8f8;
}

.industries-wrapper {
    position: relative;
    padding: 20px 0;
}

.industries-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 10px 0 30px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--rgbPrimaryColor), 0.3) transparent;
}

.industries-scroll::-webkit-scrollbar {
    height: 6px;
}

.industries-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.industries-scroll::-webkit-scrollbar-thumb {
    background: rgba(var(--rgbPrimaryColor), 0.4);
    border-radius: 10px;
}

.industries-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--rgbPrimaryColor), 0.6);
}

/* ── Industry Card (pill-shaped) ── */
.industry-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
    background: #fff;
    border: 2px solid #f0f0f0;
    border-radius: 200px;
    padding: 32px 40px;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
}

.industry-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 200px;
    background: linear-gradient(135deg, rgba(var(--rgbPrimaryColor), 0.05), rgba(255, 170, 51, 0.08));
    opacity: 0;
    transition: opacity 0.4s;
}

.industry-card:hover::before {
    opacity: 1;
}

.industry-card:hover {
    border-color: var(--PrimaryColor);
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 50px rgba(var(--rgbPrimaryColor), 0.12);
}

/* icon */
.industry-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--rgbPrimaryColor), 0.15), rgba(255, 170, 51, 0.1));
    border: 2px solid rgba(var(--rgbPrimaryColor), 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    transition: transform 0.4s;
    position: relative;
    z-index: 1;
}

.industry-card:hover .industry-icon {
    transform: rotate(10deg) scale(1.1);
    border-color: rgba(var(--rgbPrimaryColor), 0.5);
}

/* title */
.industry-info {
    position: relative;
    z-index: 1;
}

.industry-info h3 {
    font-size: 16.5px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.4;
    letter-spacing: -0.01em;
    transition: color 0.3s;
}

.industry-card:hover .industry-info h3 {
    color: var(--PrimaryColor);
}

/* ── Navigation Arrows (optional) ── */
.scroll-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

.scroll-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.scroll-btn:hover {
    border-color: var(--PrimaryColor);
    background: rgba(var(--rgbPrimaryColor), 0.08);
}

.scroll-btn svg {
    stroke: #666;
    transition: stroke 0.3s;
}

.scroll-btn:hover svg {
    stroke: var(--PrimaryColor);
}

/* ── Bottom CTA ── */
.industries-cta {
    margin-top: 70px;
    text-align: center;
    background: linear-gradient(135deg, #fff 0%, #fafafa 100%);
    border: 2px solid #f0f0f0;
    border-radius: 24px;
    padding: 48px 40px;
    position: relative;
    overflow: hidden;
}

.industries-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(var(--rgbPrimaryColor), 0.06) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.industries-cta p {
    font-size: 16px;
    color: #555;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
}

.industries-cta p strong {
    color: #d07020;
    font-weight: 600;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--PrimaryColor);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    padding: 16px 36px;
    border-radius: 100px;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(var(--rgbPrimaryColor), 0.25);
    position: relative;
    z-index: 1;
}

.cta-btn:hover {
    background: #e07800;
    box-shadow: 0 8px 30px rgba(var(--rgbPrimaryColor), 0.35);
    transform: translateY(-2px);
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .industries-section {
        padding: 80px 20px;
    }

    .industry-card {
        flex: 0 0 260px;
        padding: 28px 32px;
    }

    .industry-icon {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }
}

.tabs-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.tab-btn {
    background: #f5f5f5;
    border: 2px solid transparent;
    color: #666;
    font-size: 14.5px;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.tab-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--rgbPrimaryColor), 0.08), rgba(255, 170, 51, 0.06));
    opacity: 0;
    transition: opacity 0.3s;
}

.tab-btn:hover {
    background: #fff;
    border-color: rgba(var(--rgbPrimaryColor), 0.3);
}

.tab-btn.active {
    background: #fff;
    border-color: var(--PrimaryColor);
    color: var(--PrimaryColor);
    box-shadow: 0 4px 20px rgba(var(--rgbPrimaryColor), 0.15);
}

.tab-btn.active::before {
    opacity: 1;
}

/* ── Tab Content ── */
.tab-content {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Use Case Grid ── */
.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

/* ── Use Case Card ── */
.use-case-card {
    background: linear-gradient(135deg, #fafafa 0%, #fff 100%);
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.use-case-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, var(--PrimaryColor), #ffaa33);
    transition: height 0.4s;
}

.use-case-card:hover::before {
    height: 100%;
}

.use-case-card:hover {
    border-color: rgba(var(--rgbPrimaryColor), 0.4);
    transform: translateX(8px);
    box-shadow: -8px 0 30px rgba(var(--rgbPrimaryColor), 0.1);
    background: #fff;
}

.use-case-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(var(--rgbPrimaryColor), 0.12);
    border: 1px solid rgba(var(--rgbPrimaryColor), 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 20px;
    transition: all 0.4s;
}

.use-case-card:hover .use-case-icon {
    background: rgba(var(--rgbPrimaryColor), 0.2);
    transform: scale(1.1);
}

.use-case-card h4 {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.use-case-card p {
    font-size: 14.5px;
    color: #666;
    line-height: 1.75;
}

.process_sec .header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 70px;
    flex-wrap: wrap;
}

.process_sec .eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--PrimaryColor);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.process_sec .eyebrow::before {
    content: '';
    width: 28px;
    height: 2px;
    background: var(--PrimaryColor);
    border-radius: 2px;
}

.process_sec h2 {
    font-size: clamp(34px, 4.5vw, 50px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #111010;
}

.process_sec h2 span {
    color: var(--PrimaryColor);
    position: relative;
}

.process_sec h2 span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 100%;
    height: 6px;
    background: #FFDEC9;
    z-index: -1;
    border-radius: 3px;
}

.process_sec .header-note {
    font-size: 15px;
    color: #999;
    line-height: 1.7;
    max-width: 300px;
    text-align: right;
}

.process_sec .cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.process_sec .card {
    position: relative;
    border-radius: 24px;
    padding: 40px 36px 36px;
    border: 1.5px solid #E8E8E4;
    background: var(--WhiteColor);
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease;
    cursor: default;
}

.process_sec .card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.09);
    border-color: var(--PrimaryColor);
}

.process_sec .card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #FFF2EB;
    transition: transform 0.5s ease, background 0.3s ease;
    z-index: 0;
}

.process_sec .card:hover::before {
    transform: scale(2.6);
    background: #FFF0E6;
}

.process_sec .step-pill {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFF2EB;
    border: 1px solid #FFDEC9;
    border-radius: 100px;
    padding: 5px 14px 5px 6px;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}

.process_sec .step-pill-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--PrimaryColor);
    display: flex;
    align-items: center;
    justify-content: center;
}

.process_sec .step-pill-dot span {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.process_sec .step-pill-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--PrimaryColor);
}

.process_sec .card-title {
    font-size: 22px;
    font-weight: 600;
    color: #111010;
    line-height: 1.2;
    margin-bottom: 14px;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
}

.process_sec .card:hover .card-title {
    color: var(--PrimaryColor);
}

.process_sec .card-desc {
    font-size: 14.5px;
    color: #444;
    line-height: 1.75;
    position: relative;
    z-index: 1;
}

.process_sec .card-line {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3.5px;
    width: 0;
    background: linear-gradient(90deg, var(--PrimaryColor), #FFAA55);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.process_sec .card:hover .card-line {
    width: 100%;
}

.process_sec .ghost-num {
    position: absolute;
    bottom: -10px;
    right: 16px;
    font-size: 96px;
    font-weight: 700;
    color: rgba(var(--rgbPrimaryColor), 0.05);
    line-height: 1;
    letter-spacing: -0.05em;
    user-select: none;
    transition: color 0.4s;
    z-index: 0;
}

.process_sec .card:hover .ghost-num {
    color: rgba(var(--rgbPrimaryColor), 0.12);
}

.process_sec .card.featured {
    grid-column: span 2;
    display: flex;
    gap: 40px;
    align-items: center;
}

.process_sec .card.featured .card-body {
    flex: 1;
}

.process_sec .featured-badge {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #FFF2EB;
    border: 2px dashed #FFDEC9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    z-index: 1;
    transition: border-color 0.3s, background 0.3s;
}

.process_sec .card.featured:hover .featured-badge {
    background: #FFDEC9;
    border-color: var(--PrimaryColor);
}

.process_sec .featured-badge p {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--PrimaryColor);
    text-align: center;
    line-height: 1.5;
}

.process_sec .featured-badge strong {
    font-size: 30px;
    font-weight: 700;
    color: var(--PrimaryColor);
    line-height: 1;
}

.process_sec .card {
    opacity: 0;
    animation: rise 0.55s ease forwards;
}

.process_sec .card:nth-child(1) {
    animation-delay: 0.05s;
}

.process_sec .card:nth-child(2) {
    animation-delay: 0.13s;
}

.process_sec .card:nth-child(3) {
    animation-delay: 0.21s;
}

.process_sec .card:nth-child(4) {
    animation-delay: 0.29s;
}

.process_sec .card:nth-child(5) {
    animation-delay: 0.37s;
}

.process_sec .card:nth-child(6) {
    animation-delay: 0.45s;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.process_sec .section-footer {
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 32px 40px;
    background: var(--WhiteColor);
    border: 1.5px solid #E8E8E4;
    border-radius: 24px;
}

@media (max-width: 960px) {
    .cards-grid {
        grid-template-columns: 1fr 1fr;
    }

    .card.featured {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .process_sec .cards-grid {
        grid-template-columns: 1fr;
    }

    .process_sec .card.featured {
        grid-column: span 1;
        flex-direction: column;
    }

    .process_sec .card.featured .featured-badge {
        width: 120px;
        height: 120px;
    }

    .process_sec .header-note {
        text-align: left;
    }
}

.stats-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.stat-card {
    background: rgba(255, 255, 255, .2);
    border: 2px solid #e8e8e8;
    border-radius: 16px;
    padding: 28px 36px;
    text-align: center;
    min-width: 160px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--PrimaryColor), #ffaa33);
    opacity: 0;
    transition: opacity 0.4s;
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-card:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--rgbPrimaryColor), 0.4);
    box-shadow: 0 20px 50px rgba(var(--rgbPrimaryColor), 0.15);
}

.stat-number {
    font-size: clamp(32px, 4vw, 42px);
    font-weight: 800;
    color: var(--PrimaryColor);
    line-height: 1;
    margin-bottom: 8px;
    display: block;
}

.stat-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--WhiteColor);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {

    .stats-container {
        flex-direction: column;
        align-items: center;
    }

    .stat-card {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 576px) {

    .stat-card {
        padding: 24px 28px;
    }

    .stat-number {
        font-size: 36px;
    }
}

.cta-banner {
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
    border: 2px solid var(--PrimaryColor);
    border-radius: 24px;
    padding: 60px 40px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s;
}

.cta-banner::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(var(--rgbPrimaryColor), 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.cta-banner::after {
    content: '';
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 170, 51, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.cta-banner:hover {
    border-color: rgba(var(--rgbPrimaryColor), 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.cta-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.cta-title {
    font-size: clamp(32px, 5vw, 48px);
    font-family: var(--medium);
    color: #1a1a1a;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-align: center;
}

.cta-title span {
    color: var(--PrimaryColor);
}

.cta-description {
    font-size: clamp(16px, 2vw, 18px);
    color: #666;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto 36px;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cta-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--PrimaryColor);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 18px 40px;
    border-radius: 100px;
    border: none;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 8px 24px rgba(var(--rgbPrimaryColor), 0.3);
}

.cta-btn-primary:hover {
    background: var(--PrimaryColor);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(var(--rgbPrimaryColor), 0.4);
}

.cta-btn-primary svg {
    transition: transform 0.3s;
}

.cta-btn-primary:hover svg {
    transform: translateX(4px);
}

.cta-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: var(--PrimaryColor);
    font-size: 16px;
    font-weight: 700;
    padding: 18px 40px;
    border-radius: 100px;
    border: 2px solid var(--PrimaryColor);
    text-decoration: none;
    transition: all 0.3s;
}

.cta-btn-secondary:hover {
    border-color: var(--PrimaryColor);
    color: var(--PrimaryColor);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(var(--rgbPrimaryColor), 0.15);
}

.cta-section {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(var(--rgbPrimaryColor), 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255, 170, 51, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.cta-container {
    position: relative;
    z-index: 2;
}

.cta-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
    border: 2px solid #e8e8e8;
    border-radius: 32px;
    padding: 60px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
    transition: all 0.5s;
}

.cta-split:hover {
    box-shadow: 0 30px 80px rgba(var(--rgbPrimaryColor), 0.1);
    border-color: rgba(var(--rgbPrimaryColor), 0.3);
}

.cta-split::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 20%;
    bottom: 20%;
    width: 2px;
    background: linear-gradient(180deg, transparent, rgba(var(--rgbPrimaryColor), 0.3), transparent);
    transform: translateX(-50%);
}

.cta-left {
    position: relative;
    z-index: 2;
}

.cta-title {
    font-size: clamp(28px, 4.5vw, 48px);
    font-weight: 900;
    color: var(--BlackColor);
    line-height: 1.15;
    letter-spacing: -0.03em;
    position: relative;
}

.cta-title span {
    position: relative;
    display: inline-block;
}

.cta-title span::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--PrimaryColor), var(--PrimaryColor));
    border-radius: 2px;
    animation: slideIn 1s ease-out forwards;
}

@keyframes slideIn {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

.cta-right {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 28px;
    background: #fff;
    border: 2px solid #e8e8e8;
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.contact-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--PrimaryColor);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.4s;
}

.contact-card:hover::before {
    transform: scaleY(1);
}

.contact-card:hover {
    border-color: rgba(var(--rgbPrimaryColor), 0.4);
    transform: translateX(8px);
    box-shadow: -8px 0 30px rgba(var(--rgbPrimaryColor), 0.12);
}

.contact-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--rgbPrimaryColor), 0.12), rgba(255, 170, 51, 0.08));
    border: 2px solid rgba(var(--rgbPrimaryColor), 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.4s;
}

.contact-card:hover .contact-icon {
    background: linear-gradient(135deg, rgba(var(--rgbPrimaryColor), 0.2), rgba(255, 170, 51, 0.15));
    border-color: rgba(var(--rgbPrimaryColor), 0.4);
    transform: rotate(10deg) scale(1.1);
}

.contact-icon svg {
    stroke: var(--PrimaryColor);
}

.contact-details {
    flex: 1;
}

.contact-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--BlackColor);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.contact-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--BlackColor);
    text-decoration: none;
    transition: color 0.3s;
}

.contact-value:hover {
    color: var(--PrimaryColor);
}

.contact-arrow {
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s;
}

.contact-card:hover .contact-arrow {
    opacity: 1;
    transform: translateX(0);
}

.contact-arrow svg {
    stroke: var(--PrimaryColor);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cta-split {
    animation: fadeInUp 1s ease-out forwards;
}

@media (max-width: 992px) {

    .cta-split {
        grid-template-columns: 1fr;
        gap: 50px;
        padding: 50px;
    }

    .cta-split::after {
        left: 20%;
        right: 20%;
        top: 50%;
        bottom: auto;
        width: auto;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(var(--rgbPrimaryColor), 0.3), transparent);
    }

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

@media (max-width: 768px) {
    .cta-section {
        padding: 60px 0;
    }

    .cta-split {
        padding: 40px 32px;
        border-radius: 24px;
    }

    .contact-card {
        padding: 20px 24px;
    }

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

    .contact-value {
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .cta-split {
        padding: 32px 24px;
    }

    .contact-card {
        flex-direction: column;
        text-align: center;
    }

    .contact-value {
        font-size: 15px;
    }
}


.why-section {
    padding: 100px 0;
    background: #fafafa;
    position: relative;
    overflow: hidden;
}

.why-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -100px;
    transform: translateY(-50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(var(--rgbPrimaryColor), 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.content-wrapper {
    position: relative;
    z-index: 2;
}

.left-content {
    padding-right: 40px;
}

.section-title {
    font-size: clamp(24px, 4vw, 36px);
    color: var(--BlackColor);
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}

.section-description {
    font-size: 15px;
    color: var(--BlackColor);
    line-height: 1.8;
}

.right-features {
    padding-left: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid var(--PrimaryColor);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.feature-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--PrimaryColor);
}

.feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(var(--rgbPrimaryColor), 0.12);
    border: 1px solid rgba(var(--rgbPrimaryColor), 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-icon svg {
    stroke: var(--PrimaryColor);
}

.feature-content {
    flex: 1;
}

.feature-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--BlackColor);
    margin-bottom: 8px;
    line-height: 1.4;
}

.feature-description {
    font-size: 14px;
    color: var(--BlackColor);
    line-height: 1.7;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.left-content,
.feature-item {
    animation: fadeInUp 0.8s ease-out forwards;
}

.left-content {
    animation-delay: 0.1s;
}

.feature-item:nth-child(1) {
    animation-delay: 0.2s;
}

.feature-item:nth-child(2) {
    animation-delay: 0.3s;
}

.feature-item:nth-child(3) {
    animation-delay: 0.4s;
}

@media (max-width: 992px) {

    .left-content,
    .right-features {
        padding-left: 0;
        padding-right: 0;
    }

    .left-content {
        margin-bottom: 50px;
    }
}

@media (max-width: 768px) {

    .left-content {
        margin-bottom: 40px;
    }

    .feature-item {
        padding: 20px;
    }

    .feature-icon {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 576px) {
    .feature-item {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .feature-icon {
        margin-bottom: 4px;
    }
}

.process-content-wrapper {
    position: relative;
    z-index: 2;
}

.process-header-container {
    text-align: center;
    margin-bottom: 60px;
}

.process-carousel-container {
    position: relative;
    padding: 0 60px;
}

.process-cards-wrapper {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 20px 0;
}

.process-cards-wrapper::-webkit-scrollbar {
    display: none;
}

.process-step-card {
    flex: 0 0 340px;
    background: #ffffff;
    border: 2px solid var(--PrimaryColor);
    border-radius: 20px;
    padding: 36px 32px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.process-step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--PrimaryColor);
    opacity: 0;
    transition: opacity 0.4s;
}

.process-step-card:hover::before {
    opacity: 1;
}

.process-step-card:hover {
    border-color: rgba(var(--rgbPrimaryColor), 0.4);
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.process-icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(var(--rgbPrimaryColor), 0.08);
    border: 2px solid rgba(var(--rgbPrimaryColor), 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: all 0.4s;
}

.process-step-card:hover .process-icon-wrapper {
    background: rgba(var(--rgbPrimaryColor), 0.15);
    border-color: rgba(var(--rgbPrimaryColor), 0.4);
    transform: scale(1.08);
}

.process-icon-wrapper svg {
    stroke: var(--PrimaryColor);
}

.process-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--BlackColor);
    margin-bottom: 14px;
    line-height: 1.3;
}

.process-card-description {
    font-size: 14.5px;
    color: var(--BlackColor);
    line-height: 1.7;
    margin-bottom: 20px;
}

.carousel-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--PrimaryColor);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 10;
}

.carousel-nav-button:hover {
    background: var(--PrimaryColor);
    border-color: var(--PrimaryColor);
    transform: translateY(-50%) scale(1.1);
}

.carousel-nav-button svg {
    stroke: var(--BlackColor);
    transition: stroke 0.3s;
}

.carousel-nav-button:hover svg {
    stroke: #ffffff;
}

.carousel-nav-prev {
    left: 0;
}

.carousel-nav-next {
    right: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.process-header-container,
.process-step-card {
    animation: fadeInUp 0.8s ease-out forwards;
}

.process-header-container {
    animation-delay: 0.1s;
}

.process-step-card:nth-child(1) {
    animation-delay: 0.2s;
}

.process-step-card:nth-child(2) {
    animation-delay: 0.3s;
}

.process-step-card:nth-child(3) {
    animation-delay: 0.4s;
}

@media (max-width: 992px) {

    .process-carousel-container {
        padding: 0 50px;
    }

    .process-step-card {
        flex: 0 0 300px;
    }
}

@media (max-width: 768px) {

    .process-header-container {
        margin-bottom: 50px;
    }

    .process-carousel-container {
        padding: 0 40px;
    }

    .process-step-card {
        flex: 0 0 280px;
        padding: 32px 28px;
    }

    .carousel-nav-button {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 576px) {
    .process-carousel-container {
        padding: 0 10px;
    }

    .process-step-card {
        flex: 0 0 calc(100% - 20px);
    }

    .carousel-nav-button {
        display: none;
    }
}

.option-card-wrapper {
    background: #ffffff;
    border: 2px solid var(--PrimaryColor);
    border-radius: 24px;
    padding: 40px 36px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: block;
}

.option-card-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--rgbPrimaryColor), 0.04), rgba(255, 170, 51, 0.04));
    opacity: 0;
    transition: opacity 0.4s;
}

.option-card-wrapper:hover::before {
    opacity: 1;
}

.option-card-wrapper:hover {
    border-color: var(--PrimaryColor);
    transform: translateY(-10px);
    box-shadow: 0 24px 60px rgba(var(--rgbPrimaryColor), 0.18);
}

.option-icon-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--PrimaryColor);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    position: relative;
    z-index: 2;
    transition: all 0.4s;
}

.option-card-wrapper:hover .option-icon-large {
    transform: scale(1.15) rotate(10deg);
    box-shadow: 0 12px 32px rgba(var(--rgbPrimaryColor), 0.35);
}

.option-icon-large svg {
    stroke: #ffffff;
}

.option-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
}

.option-card-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--BlackColor);
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
    transition: color 0.3s;
}

.option-card-wrapper:hover .option-card-value {
    color: var(--PrimaryColor);
}

.option-card-description {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    position: relative;
    z-index: 2;
}

.social-connect-banner {
    border: 2px solid var(--PrimaryColor);
    border-radius: 28px;
    padding: 48px 44px;
    text-align: center;
}

.social-banner-title {
    font-size: clamp(22px, 3.5vw, 32px);
    font-weight: 800;
    color: var(--BlackColor);
    margin-bottom: 12px;
}

.social-banner-subtitle {
    font-size: 15px;
    color: #666;
    margin-bottom: 36px;
}

.social-platforms-row {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.platform-link-button {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #ffffff;
    border: 2px solid var(--PrimaryColor);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.platform-link-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--PrimaryColor);
    opacity: 0;
    transition: opacity 0.3s;
}

.platform-link-button:hover::before {
    opacity: 1;
}

.platform-link-button svg {
    position: relative;
    z-index: 2;
    stroke: var(--BlackColor);
    transition: all 0.3s;
}

.platform-link-button:hover svg {
    stroke: var(--WhiteColor);
    transform: scale(1.15);
}

.platform-link-button:hover {
    border-color: var(--PrimaryColor);
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(var(--rgbPrimaryColor), 0.25);
}