/*------------------------------------------------------------------
Project:Solar Enregy 
Author: The_Krishna        
-------------------------------------------------------------------*/

/*----------------Table of contents Start---------------------------
1.index.html 
---------Table of contents End-----------------------------------*/

/*------------------------ [Color codes] ------------------------                     
Background:
Content:
-------------------------------------------------------------------*/

/*----------------------- [ Default css ] -----------------------*/

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

html::-webkit-scrollbar {
    display: none;
}

*,
::after,
::before {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

a:focus,
a {
    outline: none;
    text-decoration: none;
    cursor: pointer;
}

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

svg {
    vertical-align: middle;
}

input {
    outline-width: 0;
    outline-offset: 0;
    outline: 0;
    border: none;
    outline: none;
    width: 100%;
}

textarea {
    outline-width: 0;
    outline-offset: 0;
    outline: 0;
}

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

body {
    width: 100%;
    height: 100% !important;
    font-family: "Plus Jakarta Sans", sans-serif;
}

.data-project-sport {
    overflow: hidden;
}

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-corner {
    display: none;
}

::-webkit-scrollbar-thumb {
    background: #8bc34a;
    border-radius: 10px;
    background-clip: content-box;
}

::-webkit-scrollbar-track {
    background-color: #10271D;
}

.container {
    width: 1290px;
    margin: auto;
}

.js-scroll {
    width: 100%;
}

.fade_up,
.fade_down,
.zoom_in,
.zoom_out,
.fade_right,
.fade_left,
.flip_left,
.flip_right,
.flip_up,
.flip_down {
    opacity: 1;
    transform: none;
    transition: none;
}

.show {
    opacity: 1;
    transform: none;
}

.animation-data {
    animation: drop-in 5s ease 500ms backwards;
    transition: all 0.2s ease;
    overflow: hidden;
}

@keyframes drop-in {
    0% {
        opacity: 0;
        transform: translateY(80px);
    }
    100% {
        opacity: 1;
        transform: translate(0px);
    }
}

/* --------------------- [ Header Section Design ] --------------------- */

.header {
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    position: absolute;
    top: 10px;
    left: 0px;
    z-index: 999;
    transition: all 0.3s ease-in-out;
}

.design-data {
    padding: 40px;
    margin: 0 20px;
    border-radius: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
}

.logo-data {
    display: inline-flex;
    align-items: center;
}

.logo-data img {
    height: 54px;
    width: auto;
    max-width: 250px;
    object-fit: contain;
    background-color: #FFF;
    padding: 4px 8px;
    border-radius: 8px;
    display: block;
}

.ul-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.li-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
}

.navbar-anchor {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    color: #FFF;
    transition: all .5s ease-in;
}

.navbar-anchor:hover {
    color: #9FD456;
    transition: all .5s ease-in;
}

.li-nav i {
    margin-left: 8px;
}

.ul-design {
    padding: 20px;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
    background-color: #FFF;
    border-radius: 20px;
    position: absolute;
    top: 40px;
    left: 0;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    min-width: 210px;
    opacity: 0;
    transform: translateY(15px);
    pointer-events: none;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.ul-design.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.li-design {
    width: 100%;
}

.anchor-design {
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #10271D;
    text-transform: capitalize;
    display: flex;
    transition: all.5s ease-in;
}

.anchor-design:hover {
    color: #9FD456;
    transition: all.5s ease-in;
}

.contact-data {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.button-design {
    position: relative;
    padding: 15px 30px;
    border-radius: 30px;
    height: 48px;
    border: none;
    cursor: pointer;
    background-color: #FFF;
    transition: all 0.2s ease;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    color: #10271D;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 100;
}

.button-design:active {
    transform: scale(0.96);
}

.button-design img {
    width: 100%;
    max-width: 30px;
}

.button-design:before,
.button-design:after {
    position: absolute;
    content: "";
    width: 100%;
    left: 50%;
    height: 100%;
    transform: translateX(-50%);
    z-index: -1000;
    background-repeat: no-repeat;
}

.button-design:hover:before {
    top: -70%;
    background-image: radial-gradient(circle, #FFF 20%, transparent 20%), radial-gradient(circle, transparent 20%, #FFF 20%, transparent 30%), radial-gradient(circle, #FFF 20%, transparent 20%), radial-gradient(circle, #FFF 20%, transparent 20%), radial-gradient(circle, transparent 10%, #FFF 15%, transparent 20%), radial-gradient(circle, #FFF 20%, transparent 20%), radial-gradient(circle, #FFF 20%, transparent 20%), radial-gradient(circle, #FFF 20%, transparent 20%), radial-gradient(circle, #FFF 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
    background-position: 50% 120%;
    animation: greentopBubbles 0.6s ease;
}

@keyframes greentopBubbles {
    0% {
        background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
    }
    50% {
        background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
    }
    100% {
        background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

.button-design:hover::after {
    bottom: -70%;
    background-image: radial-gradient(circle, #FFF 20%, transparent 20%), radial-gradient(circle, #FFF 20%, transparent 20%), radial-gradient(circle, transparent 10%, #FFF 15%, transparent 20%), radial-gradient(circle, #FFF 20%, transparent 20%), radial-gradient(circle, #FFF 20%, transparent 20%), radial-gradient(circle, #FFF 20%, transparent 20%), radial-gradient(circle, #FFF 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
    background-position: 50% 0%;
    animation: greenbottomBubbles 0.6s ease;
}

@keyframes greenbottomBubbles {
    0% {
        background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
    }
    50% {
        background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
    }
    100% {
        background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

.menu-design {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 100px;
    background-color: #FFF;
}

.menu-design img {
    width: 100%;
    max-width: 24px;
}

/* ----- [ menubar design ] ----- */

.menu {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu.active {
    opacity: 1;
    visibility: visible;
}

.left-design {
    width: 60%;
    background-color: #10271D;
    height: 100%;
    padding: 60px;
    transform: translateY(-100%);
    overflow-y: scroll;
}

.right-design {
    width: 40%;
    background-color: #FFFF;
    height: 100%;
    padding: 60px;
    transform: translateY(100%);
}

.left-design .logo-data img {
    height: 54px;
    width: auto;
    max-width: 250px;
    object-fit: contain;
}

.close-btn {
    background-color: transparent;
    border: none;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.close-btn img {
    width: 100%;
    max-width: 30px;
}

.data-close {
    text-align: end;
}

.data-closed {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #000;
    text-transform: uppercase;
    opacity: 0;
    top: 0;
    visibility: hidden;
    transition: 0.3s;
    transform: translateX(0px);
}

.close-btn:hover .data-closed {
    transition: 0.3s;
    transform: translateX(-10px);
    opacity: 1;
    visibility: visible;
}

.docts-responsive {
    display: none;
}

.data-btn {
    color: #FFFF;
}

.data-page {
    width: 100%;
    padding: 100px;
}

.menu-ul {
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
}

.menu-li {
    width: 100%;
    position: relative;
}

.menu-anhor {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.text-menu {
    font-size: 38px;
    font-weight: 700;
    line-height: 64px;
    color: #FFF;
    transition: all .5s ease;
}

.menu-anhor:hover .text-menu {
    color: #9FD456;
    transition: all .5s ease;
}

.menu-anhor:hover i {
    color: #9FD456;
    transition: all .5s ease;
}

.menu-anhor i {
    font-size: 26px;
    color: #FFF;
    display: inline-block;
    transition: transform 0.4s ease;
}

.under-menu-li {
    display: flex;
    flex-direction: column;
    gap: 30px;
    border-radius: 10px;
    height: 0;
    overflow: hidden;
    opacity: 0;
}

.ander-li-achor {
    font-size: 24px;
    font-weight: 600;
    padding-left: 30px;
    line-height: 32px;
    color: #FFF;
    transition: all .5s ease;
}

.ander-li-achor:hover {
    color: #9FD456;
    transition: all .5s ease;
}

.data-contact {
    height: 100%;
    padding-top: 100px;
}

.title-get-data {
    font-size: 36px;
    font-weight: 800;
    line-height: 48px;
    color: #000;
    margin-bottom: 15px;
}

.design-call {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 2px;
    margin-top: 20px;
}

.design-call p {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #717172;
}

.call-data {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #000;
    max-width: 200px;
    width: 100%;
}

.social-data-design {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.social-design {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: transparent;
    border-radius: 100px;
    border: 1px solid #000;
    transition: all .35s ease;
}

.social-design i {
    font-size: 20px;
    color: #10271D;
}

.social-design:hover {
    background-color: #10271D;
    transition: all .35s ease;
}

.social-design:hover i {
    color: #FFF;
    transition: all .35s ease;
}

.data-main-contact {
    display: none;
    padding: 0 100px;
}

.mex-tilte {
    font-size: 36px;
    font-weight: 800;
    line-height: 48px;
    color: #FFF;
}

.design-call-left {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 2px;
    margin-top: 20px;
}

.design-call-left p {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #717172;
}

.call-data-left {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #FFF;
    max-width: 200px;
    width: 100%;
}

/* --------------------- [ hero Section Design ] --------------------- */

.bg-container {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 20px;
    max-width: 100%;
    padding: 20px;
}

.left-data {
    width: 100%;
    background-color: #10271D;
    border-radius: 20px;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    position: relative;
}

.left-data::after {
    width: 100%;
    height: 100%;
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: url(../images/hero/left-mask.png);
    background-position: left center;
    background-repeat: no-repeat;
}

.data-gap .data-hero-sport {
    padding: 0;
    width: calc(50% - 10px);
}

.data-gap .data-hero-sport-two {
    padding: 0;
    width: calc(50% - 10px);
}

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

.spect-text {
    font-size: 24px;
    font-weight: 500;
    font-family: "Plus Jakarta Sans", sans-serif;
    line-height: normal;
    color: #FFF;
}

.spect-data img {
    width: 100%;
    max-width: 100px;
}

.hero-title {
    font-size: 64px;
    font-weight: normal;
    line-height: 80px;
    color: #FFF;
}

.hero-title span {
    font-weight: 800;
    color: #9FD456;
}

.hero-desc {
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    color: #FFF;
    margin-top: 40px;
    max-width: 730px;
}

.button {
    position: relative;
    padding: 15px 40px;
    border-radius: 30px;
    border: none;
    color: #fff;
    cursor: pointer;
    background-color: #9FD456;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 11;
    margin-top: 40px;
}

.btn-text {
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
    color: #10271D;
    white-space: nowrap;
}

.button img {
    width: 100%;
    max-width: 30px;
}

.button:active {
    transform: scale(0.96);
}

.button:before,
.button:after {
    position: absolute;
    content: "";
    width: 100%;
    left: 50%;
    height: 100%;
    transform: translateX(-50%);
    z-index: 0;
    background-repeat: no-repeat;
}

.button:hover:before {
    top: -70%;
    background-image: radial-gradient(circle, #9FD456 20%, transparent 20%), radial-gradient(circle, transparent 20%, #9FD456 20%, transparent 30%), radial-gradient(circle, #9FD456 20%, transparent 20%), radial-gradient(circle, #9FD456 20%, transparent 20%), radial-gradient(circle, transparent 10%, #9FD456 15%, transparent 20%), radial-gradient(circle, #9FD456 20%, transparent 20%), radial-gradient(circle, #9FD456 20%, transparent 20%), radial-gradient(circle, #9FD456 20%, transparent 20%), radial-gradient(circle, #9FD456 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
    background-position: 50% 120%;
    animation: greentopBubbles 0.6s ease;
}

@keyframes greentopBubbles {
    0% {
        background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
    }
    50% {
        background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
    }
    100% {
        background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

.button:hover::after {
    bottom: -70%;
    background-image: radial-gradient(circle, #9FD456 20%, transparent 20%), radial-gradient(circle, #9FD456 20%, transparent 20%), radial-gradient(circle, transparent 10%, #9FD456 15%, transparent 20%), radial-gradient(circle, #9FD456 20%, transparent 20%), radial-gradient(circle, #9FD456 20%, transparent 20%), radial-gradient(circle, #9FD456 20%, transparent 20%), radial-gradient(circle, #9FD456 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
    background-position: 50% 0%;
    animation: greenbottomBubbles 0.6s ease;
}

@keyframes greenbottomBubbles {
    0% {
        background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
    }
    50% {
        background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
    }
    100% {
        background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

.text-design-font {
    margin: auto;
    margin-top: 128px;
    width: 100%;
}

.text-font {
    font-size: 140px;
    font-weight: 800;
    line-height: 123px;
    text-transform: uppercase;
    color: #FFF;
    text-align: center;
    background: linear-gradient(181deg, rgba(255, 255, 255, 0.2) 0%, rgb(255 255 255 / 0%) 90%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShimmer 3s linear infinite;
}

@keyframes gradientShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.data-left {
    padding: 100px;
    padding-top: 0;
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    margin-top: -80px;
}

.right-data {
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.right-data img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 20px;
}

/* --------------------- [ services Section Design ] --------------------- */

.data-box-services {
    overflow: hidden;
    width: 100%;
    border-radius: 20px;
    background-color: #000;
}

.services {
    width: 100%;
    overflow: hidden;
    border-radius: 20px 20px 0px 0px;
    background-image: url(../imagess/DSC00003.JPG);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    text-align: center;
}

.overlay-data {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.65) 100%);
}

.data-design-margin {
    margin-top: 80px;
    text-align: center;
    position: relative;
    z-index: 1;
}

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

.box-design {
    padding: 7px 20px 7px 20px;
    border: 2px solid #888888;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.dot {
    width: 6px;
    height: 6px;
    background-color: #FFF;
    border-radius: 20px;
}

.title-font {
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    color: #000000;
}

.services .title-font {
    color: #FFF;
}

.max-width-data {
    margin: auto;
    text-align: center;
    max-width: 980px;
    margin-bottom: 30px;
}

.title-font-sec {
    font-size: 48px;
    font-weight: normal;
    line-height: 64px;
    color: #FFF;
}

.title-font-sec span {
    font-weight: 800;
}

.desc-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    color: #888888;
    max-width: 1070px;
    margin: auto;
    margin-bottom: 20px;
    text-align: center;
}

.services-boxes {
    background-color: #000;
    padding-bottom: 100px;
}

.boxdesign-services {
    background-color: #10271D;
    border-radius: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 40px;
    gap: 20px;
    flex-direction: column;
    height: 100%;
    width: 100%;
    flex: 1 1 auto;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.boxdesign-services:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.boxdesign-services img {
    width: 100%;
    max-width: 100px;
    flex-shrink: 0;
}

.solar-services {
    font-size: 26px;
    font-weight: 700;
    line-height: 36px;
    color: #FFF;
    margin: 0;
    min-height: 72px;
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.solar-desc {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #888888;
    margin: 0;
    flex: 1 1 auto;
}

.services-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border-radius: 30px;
    padding: 15px 40px;
    border: 3px solid #9FD456;
    width: 100%;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
    color: #9FD456;
    transition: all .5s ease;
    margin-top: auto;
}

.services-btn img {
    width: 100%;
    max-width: 30px;
}

.services-btn:hover {
    transition: all .5s ease;
    color: #10271D;
    background-color: #FFF;
    border: 3px solid #FFF;
}

.services-btn:hover img {
    filter: brightness(0) saturate(100%) invert(10%) sepia(16%) saturate(1693%) hue-rotate(102deg) brightness(91%) contrast(91%);
}

.boxdesign-services-center {
    background-color: #FFFF;
    border-radius: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 40px;
    gap: 20px;
    flex-direction: column;
    height: 100%;
    width: 100%;
    flex: 1 1 auto;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.boxdesign-services-center:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.boxdesign-services-center img {
    width: 100%;
    max-width: 100px;
    flex-shrink: 0;
}

.solar-services-center {
    font-size: 26px;
    font-weight: 700;
    line-height: 36px;
    color: #10271D;
    margin: 0;
    min-height: 72px;
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.solar-desc-center {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #888888;
    margin: 0;
    flex: 1 1 auto;
}

.services-btn-center {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFF;
    border-radius: 30px;
    padding: 15px 40px;
    border: 3px solid #10271D;
    width: 100%;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
    color: #10271D;
    transition: all .5s ease;
    margin-top: auto;
}

.services-btn-center img {
    width: 100%;
    max-width: 30px;
    filter: brightness(0) saturate(100%) invert(10%) sepia(16%) saturate(1693%) hue-rotate(102deg) brightness(91%) contrast(91%);
}

.services-btn-center:hover {
    transition: all .5s ease;
    color: #9FD456;
    background-color: #10271D;
    border: 3px solid #10271D;
}

.services-btn-center:hover img {
    filter: brightness(0) saturate(100%) invert(73%) sepia(4%) saturate(4766%) hue-rotate(43deg) brightness(101%) contrast(103%);
}

.box-services {
    row-gap: 30px;
    align-items: stretch;
    justify-content: center;
}

.box-services > div[class*="col-"] {
    display: flex;
    flex-direction: column;
}

/* --------------------- [ About Section Design ] --------------------- */

.about-data {
    padding: 100px 0;
}

.about-detail {
    row-gap: 30px;
}

.box-data-design {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 2px solid #000000;
    padding: 7px 20px 7px 20px;
}

.dot-data {
    width: 6px;
    height: 6px;
    background-color: #000;
    border-radius: 20px;
}

.title-about {
    font-size: 48px;
    font-weight: normal;
    line-height: 64px;
    color: #000000;
    margin-top: 20px;
}

.title-about span {
    font-weight: 800;
    color: #000000;
}

.tile-data-about {
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    color: #1a1a1a;
    margin-top: 30px;
    margin-bottom: 20px;
}

.margin-about {
    margin-top: 0;
    margin-bottom: 0;
}

.image-data-about {
    margin-top: 60px;
    position: relative;
}

.image-data-about img {
    width: 100%;
    max-width: 410px;
}

.data-experience {
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 50px;
    background-color: #FFF;
    border: 5px solid #E7F0E9;
    width: 370px;
    position: absolute;
    bottom: 0;
    left: 30%;
}

.font-about-exper {
    position: relative;
    z-index: 0;
}

.font-exper {
    font-size: 160px;
    font-weight: 800;
    line-height: 160px;
    color: #10271D;
    width: 175px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rounded-about {
    background-color: #CBE5D2;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    position: absolute;
    right: -20%;
    top: -15%;
    z-index: -1;
}

.year-exper {
    position: absolute;
    right: -50%;
    top: 0%;
    z-index: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    color: #000000;
    max-width: 98px;
}

.deta-right-design {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    width: 100%;
    height: 100%;
    row-gap: 60px;
}

.experience-top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.palate-exper-left {
    width: 330px;
    height: 330px;
    background-color: #FFF;
    border: 2.5px solid #10271D;
    box-shadow: 0 10px 30px rgba(16, 39, 29, 0.08);
    border-radius: 200px;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.palate-exper-right {
    width: 330px;
    height: 330px;
    background-color: #FFF;
    border: 2.5px solid #10271D;
    box-shadow: 0 10px 30px rgba(16, 39, 29, 0.08);
    border-radius: 200px;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.palate-exper-bottom {
    width: 330px;
    height: 330px;
    background-color: #FFF;
    border: 2.5px solid #10271D;
    box-shadow: 0 10px 30px rgba(16, 39, 29, 0.08);
    border-radius: 200px;
    z-index: 1;
    margin-top: 258px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.palate-exper-left:hover,
.palate-exper-right:hover,
.palate-exper-bottom:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(16, 39, 29, 0.16);
    border-color: #9FD456;
}

.data-tpo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
}

.data-bto {
    display: flex;
    align-items: center;
    justify-content: end;
    position: relative;
    width: 100%;
}

.data-bto img {
    width: 100%;
    max-width: 550px;
}

.subscribe-index {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 20px;
}

.mega-counter {
    font-size: 64px;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    color: #000000;
}

.descr-index {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    color: #000000;
    text-align: center;
}

/* --------------------- [ Appointment Section Design ] --------------------- */

.w-apoint {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.main-div-appoint {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../imagess/DSC00008.JPG');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    border-radius: 20px;
    padding: 130px 0;
    padding-bottom: 300px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.appoint-ment-data {
    margin: auto;
    width: 100%;
    max-width: 880px;
    text-align: center;
    margin-top: -220px;
}

.appoit-detail {
    width: 100%;
    background-color: #FFF;
    border: 2px solid #10271D;
    border-radius: 20px;
    box-shadow: 0px 15px 35px 4px rgba(16, 39, 29, 0.12);
    padding: 36px 40px 30px 40px;
    position: relative;
    z-index: 11;
}

.appoit-detail .title-about {
    font-size: 34px;
    line-height: 44px;
    margin-top: 0;
    margin-bottom: 6px;
}

.title-desc {
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    color: #333333;
    margin-top: 8px;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.main-appointment {
    margin-top: 24px;
    row-gap: 16px;
    justify-content: space-between;
}

.input-appoint {
    max-width: 48%;
    width: 100%;
    padding: 0;
}

.data-max {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: start;
    height: 100%;
    width: 100%;
}

.input-appoint input {
    border: 2px solid #E7F0E9;
    border-radius: 25px;
    background-color: #FFF;
    padding: 11px 16px;
    padding-left: 52px;
    height: 48px;
    font-size: 14.5px;
}

.property-detail {
    position: absolute;
    top: 13px;
    left: 16px;
}

.property-detail img {
    width: 100%;
    max-width: 22px;
}

.name-class {
    position: relative;
}

#ui-datepicker-div {
    display: none;
    background-color: #fff;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
    margin-top: 0.25rem;
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.ui-datepicker-calendar thead th {
    padding: 0.25rem 0;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 400;
    color: #10271D;
}

.ui-datepicker-calendar tbody td {
    width: 2.5rem;
    text-align: center;
    padding: 0;
}

.ui-datepicker-calendar tbody td a {
    display: block;
    border-radius: 0.25rem;
    line-height: 2rem;
    transition: 0.3s all;
    color: #10271D;
    font-size: 0.875rem;
    text-decoration: none;
}

.ui-datepicker-calendar tbody td a:hover {
    background-color: #10271D4f;
}

.ui-datepicker-calendar tbody td a.ui-state-active {
    background-color: #10271D;
    color: white;
}

.ui-datepicker-header a.ui-corner-all {
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 2rem;
    height: 2rem;
    margin: 0.5rem;
    border-radius: 0.25rem;
    transition: 0.3s all;
}

.ui-datepicker-header a.ui-corner-all:hover {
    background-color: #ECEFF1;
}

.ui-datepicker-header a.ui-datepicker-prev {
    left: 0;
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==");
    background-repeat: no-repeat;
    background-size: 0.5rem;
    background-position: 50%;
    transform: rotate(180deg);
}

.ui-datepicker-header a.ui-datepicker-next {
    right: 0;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==');
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: 50%;
}

.ui-datepicker-header a>span {
    display: none;
}

.ui-datepicker-title {
    text-align: center;
    line-height: 2rem;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    padding-bottom: 0.25rem;
}

.ui-datepicker-week-col {
    color: #ea1c29;
    font-weight: 400;
    font-size: 0.75rem;
}

.date-design {
    width: 100%;
    position: relative;
}

.data-relative img {
    max-width: 24px;
    width: 100%;
    filter: brightness(0) saturate(100%) invert(10%) sepia(11%) saturate(1925%) hue-rotate(176deg) brightness(97%) contrast(100%);
}

.data-relative {
    position: absolute;
    display: flex;
    justify-content: start;
    gap: 10px;
    top: 42px;
    padding-left: 5px;
}

.data-relative p {
    font-size: 16px;
    font-weight: 500;
    color: #0E121D;
    line-height: normal;
}

.appoint-ment form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 25px;
}

.select-home {
    width: 100%;
    border: 2px solid #E7F0E9;
    border-radius: 25px;
    background-color: #FFF;
    padding: 11px 16px;
    padding-left: 52px;
    height: 48px;
    font-size: 14.5px;
    color: #555555;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.select-home:focus {
    outline: none;
    border-color: #9FD456;
}

.down-btn {
    position: absolute;
    right: 18px;
    top: 14px;
}

.down-btn img {
    width: 100%;
    max-width: 20px;
}

.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.no-spinner[type="number"] {
    -moz-appearance: textfield;
}

.input-appoint-data {
    padding: 0;
}

.textarea-box {
    width: 100%;
    border: 2px solid #E7F0E9;
    border-radius: 25px;
    background-color: #FFF;
    padding: 12px 18px 10px 52px;
    height: 48px;
    min-height: 48px;
    max-height: 52px;
    font-size: 14.5px;
    color: #555555;
}

textarea {
    resize: none;
}

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

@media (max-width: 768px) {
    .make-appoint {
        padding: 0 !important;
    }
    .appoint-ment-data {
        margin-top: -40px !important;
        padding: 0 10px;
    }
    .appoit-detail {
        padding: 22px 16px 18px !important;
        border-radius: 16px !important;
    }
    .appoit-detail .title-about {
        font-size: 22px !important;
        line-height: 30px !important;
        margin-top: 0 !important;
        margin-bottom: 6px !important;
    }
    .appoit-detail .title-desc {
        font-size: 13.5px !important;
        line-height: 20px !important;
        margin-top: 6px !important;
        margin-bottom: 12px !important;
        color: #444444 !important;
    }
    .main-appointment {
        margin-top: 10px !important;
        row-gap: 10px !important;
    }
    .input-appoint {
        max-width: 100% !important;
    }
    .input-appoint input,
    .select-home {
        height: 44px !important;
        padding: 10px 14px 10px 46px !important;
        font-size: 13.5px !important;
        border-radius: 22px !important;
        border: 1.5px solid #D8E5DB !important;
    }
    .textarea-box {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 52px !important;
        padding: 12px 14px 10px 46px !important;
        font-size: 13.5px !important;
        border-radius: 20px !important;
        border: 1.5px solid #D8E5DB !important;
    }
    .property-detail {
        top: 11px !important;
        left: 14px !important;
    }
    .property-detail img {
        max-width: 18px !important;
        max-height: 18px !important;
    }
    .down-btn {
        top: 13px !important;
        right: 14px !important;
    }
    .down-btn img {
        max-width: 16px !important;
    }
    .butn-submit {
        margin-top: 8px !important;
        width: 100% !important;
    }
    .butn-submit .button {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
        border-radius: 24px !important;
        margin-top: 0 !important;
    }
}

/* --------------------- [ Why choose us Section Design ] --------------------- */

.data-why {
    align-items: center;
    row-gap: 30px;
}

.why-image-wrapper {
    position: relative;
    width: 100%;
    height: 330px;
    border-radius: 24px;
    overflow: hidden;
    border: 2px solid rgba(159, 212, 86, 0.4);
    box-shadow: 0 20px 45px rgba(16, 39, 29, 0.12);
    background: #10271D;
}

.why-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.why-image-wrapper:hover .why-main-img {
    transform: scale(1.05);
}

.why-image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 39, 29, 0.05) 0%, rgba(16, 39, 29, 0.75) 100%);
    pointer-events: none;
}

.why-floating-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(16, 39, 29, 0.90);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid rgba(159, 212, 86, 0.45);
    border-radius: 16px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    z-index: 2;
    animation: floatBadge 4s ease-in-out infinite;
}

@keyframes floatBadge {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.badge-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #9FD456;
    color: #10271D;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(159, 212, 86, 0.4);
}

.badge-text-box .badge-title {
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    line-height: 22px;
}

.badge-text-box span {
    font-size: 13px;
    font-weight: 500;
    color: #D6E8D8;
    display: block;
}

.why-choose-desc {
    margin-bottom: 0px;
    font-size: 18px;
    line-height: 30px;
    color: #1a1a1a;
}

.why-choose-data {
    margin-top: 45px;
    align-items: stretch;
    justify-content: center;
    row-gap: 24px;
}

.why-detail-area {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFB 100%);
    border: 2px solid #E2ECE5;
    border-radius: 20px;
    padding: 28px 24px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(16, 39, 29, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

.why-detail-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #9FD456 0%, #10271D 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.why-detail-area:hover {
    transform: translateY(-8px);
    border-color: #9FD456;
    box-shadow: 0 20px 45px rgba(16, 39, 29, 0.12);
}

.why-detail-area:hover::before {
    opacity: 1;
}

.why-card-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: linear-gradient(135deg, #F0F8E8 0%, #E2F3D3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #10271D;
    font-size: 26px;
    border: 1.5px solid rgba(159, 212, 86, 0.45);
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 6px 16px rgba(159, 212, 86, 0.15);
    flex-shrink: 0;
    margin-bottom: 4px;
}

.why-detail-area:hover .why-card-icon {
    background: #10271D;
    color: #9FD456;
    transform: scale(1.1) rotate(5deg);
    border-color: #10271D;
    box-shadow: 0 8px 20px rgba(16, 39, 29, 0.25);
}

.title-top {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: #10271D;
    margin: 0;
}

.title-desc-why {
    font-size: 15px;
    font-weight: 450;
    line-height: 26px;
    color: #222222;
    margin: 0;
}

@media (max-width: 768px) {
    .why-image-wrapper {
        height: 260px;
        border-radius: 18px;
    }
    .why-floating-badge {
        bottom: 12px;
        left: 12px;
        right: 12px;
        padding: 10px 14px;
        gap: 10px;
        border-radius: 12px;
    }
    .badge-icon-box {
        width: 38px;
        height: 38px;
        font-size: 20px;
        border-radius: 10px;
    }
    .badge-text-box .badge-title {
        font-size: 14px;
        line-height: 18px;
    }
    .badge-text-box span {
        font-size: 11.5px;
    }
    .why-detail-area {
        padding: 22px 18px;
    }
}

/* --------------------- [ Our Success Section Design ] --------------------- */

.success-detail {
    margin: auto;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.design-slick-succes-main {
    display: flex;
    padding-top: 60px;
    align-items: center;
    justify-content: center;
}

.success-data-design {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 20px;
    width: 100%;
}

.image-data-succes {
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.image-data-succes img,
.image-data-succes video {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s ease;
}

.image-data-succes:hover img,
.image-data-succes:hover video {
    transform: scale(1.05);
}

.project-video-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 1;
    background: rgba(16, 39, 29, 0.85);
    color: #9FD456;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(159, 212, 86, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.image-data-succes:hover .project-video-tag {
    opacity: 0;
}

.overlay-succes {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    width: calc(100% - 30px);
    max-height: calc(100% - 30px);
    overflow-y: auto;
    border-radius: 12px;
    background-color: #FFF;
    padding: 20px;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    transition: all 0.35s ease-in-out;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.image-data-succes:hover .overlay-succes {
    transform: translateY(0px);
    opacity: 1;
    visibility: visible;
}

.sucess-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 36px;
    color: #10271D;
    margin-bottom: 10px;
}

.success-desc {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #888888;
}

.data-sucess {
    margin-top: 20px;
}

.slick-slide {
    margin: 0 15px;
}

/* --------------------- [ Testimonial Section Design ] --------------------- */

.testimonial-main {
    padding-top: 60px;
}

.image-data-test {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 20px;
    height: 100%;
    width: 100%;
}

.image-data-test img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
    display: block;
}

.client-says {
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
    border-radius: 20px;
    background-color: #E7F0E9;
    padding: 60px;
    position: relative;
    overflow: hidden;
    background-image: url(../images/testimonial/trac-bg.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-blend-mode: luminosity;
}

.main-testimonail-data {
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.star-data {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.star-data img {
    width: 100%;
    max-width: 24px;
}

.client-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 48px;
    color: #10271D;
    margin-top: 20px;
}

.client-desc {
    font-size: 26px;
    font-weight: 500;
    line-height: 40px;
    color: #10271D;
    margin-top: 40px;
}

.message-data {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    margin-top: 60px;
}

.message-data img {
    width: 100%;
    max-width: 80px;
}

.message-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    color: #10271D;
}

.testimonial-detail {
    width: 100%;
}

.slick-dots {
    display: flex;
    justify-content: end;
    gap: 10px;
    margin-top: -18px;
    align-items: center;
    position: relative;
    z-index: 11;
}

.slick-dots li button {
    width: 10px;
    height: 10px;
    border-radius: 50px;
    background: #888888;
    border: none;
    color: #FFF;
    font-size: 0;
    display: flex;
    padding: 0;
    align-items: center;
    justify-content: center;
}

li.slick-active button {
    background: #10271D;
    mix-blend-mode: normal;
}

li.slick-active {
    width: 20px;
    height: 19px;
    border-radius: 50px;
    border: 2px solid #10271D;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-testimonail-slide {
    width: 100%;
    height: 100%;
}

.image-testimonail-slide .slick-list,
.image-testimonail-slide .slick-track,
.image-testimonail-slide .slick-slide,
.image-testimonail-slide .slick-slide > div {
    height: 100%;
}

/* --------------------- [ Working Prosess Section Design ] --------------------- */

.work-data {
    background-color: #E7F0E9;
}

.prosess-main-data {
    row-gap: 30px;
    align-items: stretch;
}

.prosess-main-data > div[class*="col-"] {
    display: flex;
    flex-direction: column;
}

.work-detail {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    text-align: center;
    height: 100%;
    width: 100%;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.work-detail:hover {
    transform: translateY(-8px);
}

.image-prosess {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 240px;
    margin: 0 auto;
    border-radius: 100%;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(16, 39, 29, 0.12);
    flex-shrink: 0;
}

.image-prosess img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.work-detail:hover .image-prosess img {
    transform: scale(1.08);
}

.proses-detail {
    width: 100%;
    flex: 1 1 auto;
    padding: 24px 20px 30px;
    padding-top: 55px;
    box-shadow: 0px 30px 25px -20px rgba(16, 39, 29, 0.1);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    background-color: #FFF;
    position: relative;
    margin-top: -60px;
    border-radius: 0 0 18px 18px;
    transition: box-shadow 0.4s ease;
}

.work-detail:hover .proses-detail {
    box-shadow: 0px 35px 45px -15px rgba(16, 39, 29, 0.18);
}

.number-proses {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #9FD456;
    color: #FFF;
    width: 80px;
    height: 80px;
    font-size: 32px;
    font-weight: 700;
    line-height: 32px;
    border-radius: 100px;
    position: absolute;
    top: -18%;
    box-shadow: 0 8px 20px rgba(159, 212, 86, 0.4);
    transition: transform 0.35s ease;
}

.work-detail:hover .number-proses {
    transform: scale(1.1);
}

.title-proses {
    font-size: 22px;
    font-weight: 700;
    line-height: 30px;
    color: #10271D;
    margin: 0;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.prosess-desc {
    font-size: 15px;
    font-weight: 450;
    line-height: 24px;
    color: #333333;
    margin-top: 10px;
    margin-bottom: 0;
    flex: 1 1 auto;
}

.prosess-call {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    row-gap: 30px;
}

.data-call-proses {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.prosess-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: #FFF;
    border-radius: 100px;
}

.prosess-image img {
    width: 100%;
    max-width: 30px;
}

.prosess-call-detail {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
}

.prog-main {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #10271D;
}

.mailup {
    font-size: 20px;
    font-weight: 700;
    line-height: 36px;
    color: #10271D;
}

/* --------------------- [ Team Members Section Design ] --------------------- */

.team-all {
    row-gap: 80px;
}

.data-team-biggest {
    padding-bottom: 65px;
}

.team-data {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    position: relative;
}

.image-team-data {
    width: 100%;
    overflow: hidden;
}

.image-team-data img {
    width: 100%;
    object-fit: cover;
}

.data-team {
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    color: #FFF;
    margin-bottom: 5px;
}

.box-content {
    position: absolute;
    bottom: -15%;
    display: flex;
    padding: 20px;
    background-color: #10271D;
    transition: 0.4s ease-in-out;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 260px;
    border-bottom: 6px solid transparent;
}

.th-social {
    visibility: hidden;
    opacity: 0;
    margin-top: 0;
    line-height: 0;
    max-height: 0;
    transition: 0.4s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.box-text {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #888888;
}

.team-data:hover .th-social {
    margin-top: 20px;
    visibility: visible;
    opacity: 1;
    max-height: 60px;
}

.team-data:hover .box-content {
    bottom: -22%;
    border-bottom: 6px solid #9FD456;
}

.th-social a {
    background-color: #FFF;
    color: #10271D;
    box-shadow: 0px 20px 40px rgba(2, 29, 53, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    line-height: normal;
    background-color: #E7F0E9;
    font-size: 20px;
    text-align: center;
    text-decoration: none;
    border-radius: 100px;
}

.th-social a:hover {
    background-color: #9FD456;
    color: #10271D;
    transition: .3s all ease-in-out;
}

/* --------------------- [ FAQ Section Design ] --------------------- */

.data-flow {
    max-width: 410px;
}

.faq-container {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.faq-item {
    background: #fff;
    margin-bottom: 15px;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.faq-question {
    cursor: pointer;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    background: #FFF;
    justify-content: space-between;
}

.faq-answer {
    display: none;
    padding: 20px;
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    color: #888888;
}

.faq-question i {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-question p {
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    color: #10271D;
}

.line-faq {
    width: 100%;
    max-width: 690px;
    margin: 0 20px;
    height: 2px;
    display: none;
    background-color: #E7F0E9;
}

.faq-question img {
    width: 100%;
    max-width: 30px;
}

.closed-data {
    position: relative;
}

.data-close-faq {
    display: none;
}

/* --------------------- [ Bloge Section Design ] --------------------- */

.blog-data {
    row-gap: 30px;
}

.blog-detail {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    transition: all .5s ease-in;
}

.image-blog {
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
}

.image-blog img {
    width: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-detail:hover .image-blog img {
    opacity: 1;
    transform: scale(1.02);
    -webkit-animation: flash 1.5s;
    animation: flash 1.5s;
}

@keyframes flash {
    0% {
        opacity: .4;
    }
    100% {
        opacity: 1;
    }
}

.date-time {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 40px;
    padding: 20px 0;
}

.blog-date {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.blog-date img {
    width: 100%;
    max-width: 24px;
}

.blog-date-font {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: #888888;
}

.blog-line {
    width: 100%;
    height: 2px;
    background-color: #E7F0E9;
}

.blog-title {
    font-size: 23px;
    font-weight: 500;
    line-height: 36px;
    color: #10271D;
    padding-top: 20px;
    padding-bottom: 15px;
    width: 100%;
}

.blog-desc {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #888888;
}

.faq-home-sec {
    padding-top: 100px !important;
    padding-bottom: 380px !important;
}

/* --------------------- [ Footer Section Design ] --------------------- */

.footer {
    background-color: #000000;
    padding: 100px 0;
    padding-bottom: 40px;
}

.footer-appointment-data {
    background-color: #10271D;
    overflow: hidden;
    border-radius: 20px;
    padding: 60px;
    background-image: url(../images/footer/frame-top.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: normal;
    margin-top: -355px;
    position: relative;
    z-index: 10;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
}

.footer-top {
    row-gap: 30px;
}

.data-footer-left-appoint {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
}

.left-apooitn {
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    color: #FFF;
    margin: 0;
}

.last-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 60px;
    color: #FFF;
    margin-top: 10px;
    margin-bottom: 20px;
}

.last-title span {
    color: #9FD456;
    display: inline;
}

.dotter {
    font-weight: 700;
    color: #9FD456;
    display: inline;
}

.last-desc {
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    color: #888888;
    margin: 0;
}

.last-btn {
    display: inline-flex;
    align-items: center;
    justify-items: start;
    background-color: #FFF;
    border-radius: 10px;
    padding: 18px 30px;
    margin-top: 40px;
    gap: 14px;
    text-decoration: none;
    transition: all .3s ease;
}

.last-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.last-btn img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.tele-data {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
}

.tele-data span {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #888888;
}

.tele-data p {
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    color: #10271D;
    margin: 0;
}

.last-image-data {
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
}

.last-image-data img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.footer-main {
    padding-top: 100px;
    row-gap: 30px;
}

.left-main-footer {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
}

.main-footer-desc {
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    color: #888888;
    margin-top: 20px;
    margin-bottom: 30px;
}

.social-footer {
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    color: #FFF;
    margin-bottom: 15px;
}

.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.social-data-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: #FFFFFF33;
    color: #888888;
    border-radius: 100px;
    font-size: 22px;
    line-height: normal;
    transition: all .5s ease-in;
}

.social-data-footer:hover {
    background-color: #9FD456;
    color: #10271D;
    transition: all .5s ease-in;
}

.line-footer-center {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
}

.center-footer-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: #FFF;
}

.footer-ul {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
}

.footer-li a {
    font-size: 18px;
    font-weight: 500;
    line-height: 36px;
    color: #888888;
    transition: all .5s ease-in;
}

.footer-li a:hover {
    color: #FFF;
    transition: all .5s ease-in;
}

.last-data-footer {
    background-color: #9FD456;
    padding: 30px;
    padding-bottom: 60px;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    border-radius: 10px;
}

.data-contact-footer {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    margin-bottom: 20px;
}

.data-flex-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 15px;
    gap: 10px;
}

.data-flex-footer img {
    width: 100%;
    max-width: 24px;
}

.data-flex-footer p {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #10271D;
}

.last-main-data {
    position: relative;
}

.data-appoint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
    gap: 10px;
    padding: 15px 40px;
    border-radius: 30px;
    background-color: #10271D;
    position: absolute;
    bottom: -30px;
}

.data-appoint img {
    width: 100%;
    max-width: 30px;
}

.data-appoint p {
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
    color: #FFF;
}

.copy-right {
    padding-top: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dato-copy {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #888888;
}

.dato-copy a {
    color: #888888;
    transition: all .5s ease-in;
}

.dato-copy a:hover {
    color: #FFF;
    transition: all .5s ease-in;
}

.data-bottm-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
}

.data-bottm-text p {
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    color: #888888;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.data-bottm-text a {
    display: inline-flex;
    align-items: center;
}

.data-bottm-text img {
    height: 32px;
    max-height: 35px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
    transition: transform .3s ease;
}

.data-bottm-text a:hover img {
    transform: scale(1.06);
}

/* ------------------------ [ Loader Section Start ] */

.preloader {
    position: fixed;
    background-color: #10271D;
    background-position: center center;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    text-align: center;
}

.loader img {
    width: 60px;
    animation: spin 5s linear infinite;
}

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

/* ------------------------ [ hero section all separate section ] */

.services-home-hero {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    background-image: url(../images/separate-image/image--bg-all.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    padding: 140px 100px;
    position: relative;
}

.desck-about {
    background-image: url(../images/hero/image-data-about.png);
}

.services-home-hero::after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}

.title-of-hero {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    gap: 30px;
    position: relative;
    z-index: 1;
}

.title-of-hero p {
    font-size: 64px;
    font-weight: 800;
    line-height: 80px;
    color: #FFF;
}

.title-of-hero span {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: #FFF;
}

.title-of-hero a {
    color: #FFF;
}

.services-separate .title-about {
    max-width: 980px;
    width: 100%;
    margin: auto;
    text-align: center;
    margin-top: 20px;
}

.separte-desc {
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    color: #1a1a1a;
    margin: auto;
    max-width: 1070px;
    margin-top: 30px;
}

.services-boxe .boxdesign-services-center {
    background-color: #E7F0E9;
}

.services-boxe .boxdesign-services-center .services-btn-center {
    background-color: #E7F0E9;
}

.services-boxe .boxdesign-services-center .services-btn-center:hover {
    transition: all .5s ease;
    color: #9FD456;
    background-color: #10271D;
    border: 3px solid #10271D;
}

.padding-sucess {
    padding-bottom: 100px;
}

.data-sevices-sec {
    row-gap: 40px;
    align-items: stretch;
    justify-content: flex-start;
}

.data-sevices-sec > div[class*="col-"] {
    display: flex;
    flex-direction: column;
}

.services-sec {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.services-image {
    overflow: hidden;
    width: 100%;
    height: 280px;
    border-radius: 20px;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 10px 25px rgba(16, 39, 29, 0.08);
}

.services-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.services-sec:hover .services-image img {
    transform: scale(1.05);
}

.services-second-text {
    padding: 0 25px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
    margin-top: -50px;
    flex-grow: 1;
}

.box-data-services {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    border-radius: 20px;
    background-color: #10271D;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(16, 39, 29, 0.2);
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.services-sec:hover .box-data-services {
    transform: translateY(-3px);
}

.box-data-services img {
    width: 100%;
    max-width: 70px;
}

.services-sec-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: #10271D;
    margin-top: 22px;
    margin-bottom: 0;
    min-height: 64px;
    display: flex;
    align-items: flex-start;
}

.services-sec-desc {
    font-size: 15px;
    font-weight: 500;
    line-height: 23px;
    color: #6B7280;
    margin-top: 10px;
    margin-bottom: 0;
    min-height: 69px;
    flex-grow: 1;
}

.services-second-text .button {
    margin-top: 25px;
    margin-bottom: 5px;
    align-self: flex-start;
}

.services-padding-data {
    padding: 100px;
    width: 100%;
    height: 100%;
    background-image: url(../images/services/bg-image-sec.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    padding-bottom: 265px;
}

.services-padding-data::after {
    content: "";
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.services-main-separate {
    align-items: center;
    justify-content: start;
    position: relative;
    z-index: 1;
}

.over-services-seprate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 20px;
    gap: 10px;
    border: 2px solid #FFF;
}

.over-services-seprate .dovt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6px;
    height: 6px;
    border-radius: 20px;
    background-color: #FFF;
}

.over-services-seprate p {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: #FFF;
}

.second-services-data-title {
    color: #FFF !important;
}

.services-about {
    display: flex;
    align-items: center;
    justify-content: start;
    margin-top: 40px;
    gap: 30px;
}

.services-about-image {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 120px;
    height: 120px;
    width: 100%;
    background-color: #9FD456;
    border-radius: 20px;
}

.services-about-image img {
    width: 100%;
    max-width: 80px;
}

.data-detail-service {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
}

.data-detail-service p {
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    color: #FFF;
}

.data-detail-service span {
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    color: #FFF;
}

.design-sec-exper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -165px;
    position: relative;
}

.over-exper-sec {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 330px;
    height: 330px;
    background-color: #FFF;
    border-radius: 100%;
    border: 2.5px solid #10271D;
    box-shadow: 0 10px 30px rgba(16, 39, 29, 0.08);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.over-exper-sec:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(16, 39, 29, 0.16);
    border-color: #9FD456;
}

.data-detail-services-main {
    width: 100%;
}

.ander-data-detail-main {
    display: flex;
    align-items: center;
    gap: 30px;
    justify-content: start;
    margin-bottom: 20px;
}

.main-image-ander {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background-color: #10271D;
    border-radius: 10px;
}

.main-image-ander img {
    width: 100%;
    max-width: 60px;
}

.services-detail-title {
    font-size: 40px;
    font-weight: 800;
    line-height: 64px;
    color: #10271D;
}

.detail-desc {
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    color: #888888;
}

.main-services-iomages {
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    margin: 40px 0;
}

.main-services-iomages img {
    width: 100%;
    object-fit: cover;
}

.services-detail-title-sec {
    font-size: 32px;
    font-weight: 700;
    line-height: 48px;
    color: #10271D;
    margin-top: 40px;
    margin-bottom: 20px;
}

.image-services-sec-data {
    overflow: hidden;
    border-radius: 20px;
    width: 48%;
}

.image-services-sec-data img {
    width: 100%;
    object-fit: cover;
}

.image-scroll-services {
    margin: 40px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.prosess-over-services {
    margin-top: 30px;
    margin-bottom: 40px;
    justify-content: space-between;
    row-gap: 15px;
}

.service-ul {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    gap: 15px;
}

.services-li {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    width: 100%;
}

.services-li img {
    width: 100%;
    max-width: 30px;
}

.services-li p {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: #10271D;
}

.data-all-services-contact {
    width: 100%;
}

.all-services-box {
    background-color: #E7F0E9;
    padding: 30px;
    border-radius: 20px;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.serives-title-detail-box {
    font-size: 26px;
    font-weight: 800;
    line-height: 36px;
    color: #10271D;
}

.all-box-services {
    width: 100%;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.all-services-box li {
    width: 100%;
}

.services-box-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: #FFF;
    padding: 15px 30px;
    border-radius: 30px;
    transition: all .5s ease-in;
}

.services-box-link p {
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    color: #10271D;
}

.services-box-link i {
    font-size: 26px;
    line-height: normal;
    color: #10271D;
}

.services-box-link:hover {
    background-color: #9FD456;
    transition: all .5s ease-in;
}

.data-all-services-contact {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    gap: 60px;
}

.all-contact p {
    font-size: 26px;
    font-weight: 800;
    line-height: 36px;
    color: #10271D;
}

.all-contact {
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
}

.data-input-service {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.service-hight {
    max-height: 120px;
}

.input-submit {
    display: inline-flex;
    text-align: left;
    width: 100%;
}

.company-pro {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    background-color: #E7F0E9;
    border-radius: 20px;
    padding: 30px;
    width: 100%;
}

.data-spect {
    font-size: 26px;
    font-weight: 800;
    line-height: 36px;
    color: #10271D;
}

.data-overan {
    font-size: 16px;
    font-weight: 500;
    line-height: 30px;
    color: #10271D;
    margin-top: 20px;
}

.data-services-detail {
    row-gap: 30px;
}

.data-input-service .input-appoint {
    width: 100% !important;
    max-width: 100% !important;
}

.about-detail-data {
    row-gap: 30px;
    align-items: start;
    justify-content: center;
}

.all-left-about {
    width: 100%;
}

.only-image-about {
    width: 100%;
    margin-top: 30px;
}

.only-image-about img {
    width: 100%;
    object-fit: cover;
}

.all-right-about {
    width: 100%;
}

.about-detail-desc {
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    color: #888888;
    margin-top: 30px;
}

.data-about-ul {
    margin-top: 30px;
    row-gap: 20px;
}

.stoped-btn-about {
    margin-top: 30px;
}

.medal-about {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
}

.box-medal {
    width: 100%;
    max-width: 220px;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    background-color: #FFF;
    box-shadow: 0px 10px 20px 0px rgba(16, 39, 29, 0.1);
    border-top: 4px solid #10271D;
    padding: 20px;
    gap: 15px;
    text-align: left;
}

.box-medal img {
    width: 100%;
    max-width: 60px;
}

.box-medal p {
    font-size: 20px;
    font-weight: 600;
    line-height: 36px;
    color: #10271D;
}

.team-sec-detail {
    row-gap: 100px;
}

.team-card {
    overflow: hidden;
    position: relative;
    border-radius: 25px;
    border: 1px solid #E0E0E0;
}

.team-card::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}

.team-image {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: inherit;
    padding-bottom: 103%;
}

.team-image img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.6s cubic-bezier(0.21, 0, 0.01, 0.98);
}

.team-content {
    position: relative;
    display: flex;
    padding: 25px;
    align-items: start;
    justify-content: center;
    gap: 0px;
    flex-direction: column;
}

.name {
    font-size: 24px;
    font-weight: 700;
    color: #10271D;
    text-transform: capitalize;
    transition: all .35s ease-in;
}

.team-item-socials {
    position: absolute;
    width: 104px;
    left: 8.5%;
    bottom: calc(100% - 15px);
    z-index: 2;
    text-align: center;
    pointer-events: none;
}

.socials-trigger-wrapper {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    cursor: pointer;
    margin: 0 19px;
    border-radius: 50px 50px 0 0;
    background-color: #ffffff;
}

.socials-trigger-wrapper::before {
    right: calc(100% - 1px);
    border-bottom-right-radius: 20px;
    content: "";
    position: absolute;
    background-color: transparent;
    bottom: 15px;
    height: 40px;
    width: 20px;
    box-shadow: 0 20px 0 0 #ffffff;
}

.socials-trigger-wrapper:after {
    content: "";
    position: absolute;
    background-color: transparent;
    bottom: 15px;
    height: 40px;
    box-shadow: 0 20px 0 0 #ffffff;
    left: calc(100% - 1px);
    border-bottom-left-radius: 20px;
    width: 20px;
}

.socials-trigger-wrapper i {
    height: 50px;
    width: 50px;
    line-height: 50px;
    margin: 8px 8px 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    border-radius: 50px;
    background-color: #10271D;
    color: #ffffff;
}

.social-team {
    max-width: 50px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 50px;
    pointer-events: auto;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
    transform: translateY(100%);
    padding: 15px;
    position: relative;
    max-width: 100%;
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.01, 0.98);
    background-color: #10271D;
    border-radius: 15%;
}

.team-card:hover .social-icon {
    transform: translateY(0%);
}

.social-icon a {
    text-decoration: none;
    color: #ffffff;
}

.social-icon a:hover {
    color: #9FD456;
    transition: all .4s ease;
}

.team-content span {
    font-size: 16px;
    font-weight: 500;
    color: #888888;
}

.team-sec-deta {
    row-gap: 30px;
}

.team-detail-scoot {
    border: 2px solid #E7F0E9;
    border-radius: 20px;
    padding: 60px;
    row-gap: 30px;
}

.detail-image-team {
    overflow: hidden;
    border-radius: 10px;
    width: 100%;
}

.detail-image-team img {
    width: 100%;
    object-fit: cover;
}

.desc-team {
    width: 100%;
}

.name-of-all {
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: space-between;
}

.name-of-expert-detail {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
}

.name-of-expert-detail p {
    font-size: 32px;
    font-weight: 700;
    line-height: 48px;
    color: #10271D;
}

.name-of-expert-detail span {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: #888888;
}

.social-icon-team {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.social-icon-team a {
    width: 44px;
    height: 44px;
    background-color: #E7F0E9;
    color: #10271D;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .5s ease-in;
    font-size: 20px;
}

.social-icon-team a:hover {
    background-color: #10271D;
    color: #9FD456;
}

.team-about {
    margin-top: 30px;
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    color: #888888;
}

.info-card {
    border: 2px solid #E7F0E9;
    border-radius: 20px;
    margin-top: 60px;
}

.data-four {
    padding: 20px;
    gap: 12px;
}

.border-data {
    border-bottom: 2px solid #E7F0E9;
    border-right: 2px solid #E7F0E9;
}

.border-data-sec {
    border-bottom: 2px solid #E7F0E9;
}

.border-data-right {
    border-right: 2px solid #E7F0E9;
}

.design-boder-width {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: #E7F0E9;
    border-radius: 100px;
}

.design-boder-width img {
    width: 100%;
    max-width: 24px;
}

.design-name-of-team {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
}

.design-name-of-team p {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #888888;
}

.design-name-of-team .doctef {
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    color: #10271D;
}

.data-very-team {
    row-gap: 30px;
}

.data-noial {
    width: 100%;
}

.team-title-single {
    font-size: 36px;
    font-weight: 800;
    line-height: 48px;
    color: #10271D;
    margin-bottom: 20px;
}

.team-title-single span {
    font-weight: normal;
}

.dattitle-single {
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    color: #888888;
}

.data-progress-single-design {
    margin-top: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 30px;
}

.skill-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    gap: 10px;
}

.skill-box.active {
    border: 2px solid #007bff;
}

.skill-title {
    font-weight: bold;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.skill-percent {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(0);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #888888;
    transition: transform 0.3s ease, opacity 0.5s ease;
    display: inline-block;
}

.progress {
    height: 8px;
    background: #e5efe7;
    border-radius: 0px;
    overflow: hidden;
    padding: 2px;
    width: 100%;
}

.progress-bar {
    height: 100%;
    width: 0;
    background: #8bc34a;
    transition: width 1.5s ease;
}

.team-data-bg {
    background-image: url(../images/hero/image-data-about-1.png);
}

.princing-data {
    background-image: url(../images/hero/image-data-about-2.png);
}

.fax-bg {
    background-image: url(../images/hero/image-data-about-3.png);
}

.princing-main {
    row-gap: 30px;
}

.princing-detail {
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    padding: 30px;
    border-radius: 20px;
    background-color: #E7F0E9;
}

.plan-name {
    font-size: 26px;
    font-weight: 700;
    line-height: 36px;
    color: #10271D;
    margin-bottom: 10px;
}

.plan-desc {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #888888;
}

.line-plan {
    margin: 30px 0;
    width: 100%;
    height: 2px;
    background-color: #FFF;
}

.plan-sub {
    font-size: 48px;
    font-weight: 700;
    line-height: 64px;
    margin-bottom: 30px;
    color: #10271D;
}

.plan-sub span {
    font-size: 20px;
    font-weight: 500;
    line-height: 48px;
}

.plan-ul {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
}

.plan-li {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
}

.plan-li img {
    width: 100%;
    max-width: 30px;
}

.plan-point {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: #10271D;
}

.point-data-min {
    color: #888888;
}

.plan-btn {
    margin-top: 30px;
    background-color: #E7F0E9;
}

.center-data {
    background-color: #10271D;
}

.center-paln {
    color: #FFF;
}

.sub-palnesd {
    color: #FFF;
}

.colo-nam-plan {
    color: #FFF;
}

.plan-btn-sec {
    background-color: #10271D;
    margin-top: 30px;
}

.question-design {
    width: 100%;
    max-width: 410px;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    gap: 10px;
}

.question-design-li {
    display: flex;
    align-items: center;
    justify-content: start;
    background-color: #E7F0E9;
    gap: 10px;
    padding: 20px;
    width: 100%;
    border-radius: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.question-design-li p {
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    transition: all 0.3s ease;
    color: #10271D;
}

.question-design-li img {
    width: 100%;
    max-width: 36px;
    transition: opacity 0.3s ease;
}

.image-data-faq {
    position: relative;
}

.sec-faq-image {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.first-faq-image {
    display: block;
}

.question-design-li:hover {
    background-color: #10271D;
}

.question-design-li:hover p {
    color: #FFF;
}

.question-design-li:hover .first-faq-image {
    opacity: 0;
}

.question-design-li:hover .sec-faq-image {
    opacity: 1;
}

.question-design-li.active {
    background-color: #10271D;
}

.question-design-li.active p {
    color: #FFF;
}

.question-design-li.active .first-faq-image {
    opacity: 0;
}

.question-design-li.active .sec-faq-image {
    opacity: 1;
}

.sepatrat-faq {
    border: 2px solid #E7F0E9;
    border-radius: 10px;
}

.faq-container-seprate {
    margin-top: 0;
}

.faq-data-main {
    row-gap: 30px;
}

.testimonial-seprate {
    row-gap: 30px;
}

.seprate-test {
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    border-radius: 20px;
    background-color: #E7F0E9;
    padding: 30px;
}

.review-data {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px;
}

.title-seprate {
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    color: #10271D;
    margin: 20px 0;
}

.desc-title-testimonial {
    font-size: 20px;
    font-weight: 500;
    line-height: 36px;
    color: #10271D;
}

.last-ntesti {
    display: flex;
    align-items: center;
    justify-content: start;
    margin-top: 60px;
    gap: 15px;
}

.last-ntesti img {
    width: 100%;
    max-width: 48px;
}

.last-ntesti p {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    color: #10271D;
}

.data-spot-testimonial {
    margin: auto;
    text-align: center;
}

.load-more {
    cursor: pointer;
    margin-top: 0;
}

.seprate-test {
    display: none;
}

.testimonial-bg {
    background-image: url(../images/hero/image-data-about-4.png);
}

.error-bg {
    background-image: url(../images/hero/image-data-about-5.png);
}

.error-text {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.image-four img {
    width: 100%;
    max-width: 400px;
}

.round-image img {
    width: 100%;
    max-width: 500px;
}

.rotate-error-1 {
    position: absolute;
    left: 10%;
    animation: smooth-left-right 5s ease-in-out infinite alternate;
}

.rotate-error-2 {
    position: absolute;
    right: 10%;
    z-index: -1;
    animation: smooth-right-left 5s ease-in-out infinite alternate;
}

@keyframes smooth-left-right {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(40px);
    }
}

@keyframes smooth-right-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-40px);
    }
}

.error-text-desxc {
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    color: #888888;
    margin-top: 20px;
    text-align: center;
}

.error-btn {
    margin-top: 0;
}

.data-project-1 {
    display: none;
}

.data-project-btn {
    margin-top: -30px;
}

.hero-data-bottom {
    padding-bottom: 0px;
}

.project-two {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    overflow: hidden;
}

.project-image {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.project-image img {
    width: 100%;
    object-fit: cover;
    transition-delay: .1s;
    transition-timing-function: ease-in-out;
    transition-duration: .7s;
    transition-property: all;
}

.overlay-project {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
    transition: all .4s cubic-bezier(.12, 0, .39, 0);
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.714) 0, #0000002c 100% 100%);
    height: 100%;
    transition-delay: .1s;
    transition-timing-function: ease-in-out;
    transition-duration: .7s;
    transition-property: all;
}

.project-two:hover .overlay-project {
    opacity: 1;
}

.pro-detail {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(10px);
    width: 90%;
    height: 90%;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 20px;
    transition: all .7s ease-in-out;
    backdrop-filter: blur(5px);
    background-color: #ffffff1c;
    border-radius: 20px;
}

.project-two:hover .pro-detail {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
}

.project-title-two {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: #9FD456;
    margin-bottom: 10px;
}

.project-desc-two {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #FFF;
}

.project-two {
    display: none;
}

/* --------------------- slider */

.split-slideshow {
    position: relative;
    height: 100vh;
}

.slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.slideshow .slider {
    width: 100vw;
    height: 100vh;
}

.slideshow .item {
    width: 100% !important;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.slideshow .item img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
}

/* Right mirrored slideshow (narrow) */

.slideshow-right {
    left: 0;
    z-index: 1;
    width: 50vw;
    pointer-events: none;
}

.slideshow-right .slider {
    position: absolute;
    left: 0;
}

/* Center big text */

.slideshow-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    font-size: 78px;
    width: 100%;
    text-align: center;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 15px;
    line-height: 0.9;
}

.slideshow-text a {
    color: #FFF;
}

/* small credit badge */

.the-most {
    position: fixed;
    z-index: 150;
    bottom: 0;
    left: 0;
    width: 50vw;
    max-width: 200px;
    padding: 10px;
}

.the-most img {
    max-width: 100%;
    display: block;
}

.dowing-seted .slick-vertical .slick-slide {
    border: none;
}

.dowing-seted .slick-slide {
    margin: 0;
}

.dowing-seted .slick-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: -50px;
    align-items: center;
    position: relative;
    z-index: 11;
}

.dowing-seted li.slick-active {
    width: 20px;
    height: 19px;
    border-radius: 50px;
    border: 2px solid #FFFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dowing-seted li.slick-active button {
    background: #FFF;
    mix-blend-mode: normal;
}

.dowing-seted .slick-dots li button {
    background: #FFFF;
}

.project-3-color {
    background-color: transparent;
}

#main {
    display: flex;
}

#main .part {
    flex: 1;
}

#main .part .section {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

#main .part .section img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: absolute;
    left: var(--x);
    pointer-events: none;
}

.project-four-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    font-size: 35px;
    width: 100%;
    text-align: center;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 5px;
    line-height: 0.8;
}

.about-seprate-detail {
    row-gap: 30px;
    justify-content: center;
}

.separte-about {
    margin-top: 20px;
}

.about-slider-design {
    border-radius: 20px;
    overflow: hidden;
}

.about-slider-design img {
    width: 100%;
}

.deright-sport {
    margin-top: 20px;
    margin-bottom: 40px;
}

.deright-sport .slick-slide {
    margin: 0 7px;
}

.foren-about {
    margin-top: 20px;
}

.data-about-setedf {
    row-gap: 15px;
    margin-top: 30px;
}

.about-text-spotry {
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
    color: #10271D;
}

.all-box-about {
    width: 100%;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.all-box-about .lock-about {
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    background-color: #FFF;
    padding: 15px 30px;
    gap: 6px;
    border-radius: 20px;
    transition: all .5s ease-in;
}

.lock-about span {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #888888;
}

.lock-about p {
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    color: #10271D;
}

.pro-detail-bg {
    background-image: url(../images/hero/image-data-about-6.png);
}

.main-location iframe {
    border-radius: 20px;
    width: 100%;
}

.main-location {
    width: 100%;
}

.contatc-title {
    font-size: 40px;
    font-weight: 800;
    line-height: 64px;
    color: #10271D;
}

.contact-desc {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    color: #888888;
}

.contact-data-image {
    width: 100%;
    overflow: hidden;
    margin-top: 30px;
    border-radius: 20px;
}

.contact-data-image img {
    width: 100%;
    object-fit: cover;
}

.data-contact-left {
    margin: auto;
    width: 90%;
    background-color: #10271D;
    border-radius: 20px;
    padding: 30px;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    margin-top: -60px;
    position: relative;
    z-index: 1;
}

.contatc-name {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: #FFF;
}

.name-contact {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.contact-anchor {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: start;
    gap: 10px;
}

.contact-anchor p {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #FFF;
}

.contact-sperow {
    row-gap: 30px;
}

@media (min-width: 992px) {
    .contact-sperow {
        display: flex;
        align-items: stretch;
    }

    .contact-sperow > .col-xl-4,
    .contact-sperow > .col-lg-4,
    .contact-sperow > .col-xl-8,
    .contact-sperow > .col-lg-8 {
        display: flex;
        flex-direction: column;
    }

    .left-contact {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .left-contact .data-contact-left {
        margin-top: -60px;
        margin-bottom: 0;
        width: 90%;
        flex-grow: 1;
        justify-content: flex-start;
    }

    .right-contact {
        width: 100%;
        height: 100%;
        background-color: #E7F0E9;
        border-radius: 20px;
        padding: 35px 35px 35px 35px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .right-contact-desc {
        font-size: 18px;
        font-weight: 500;
        line-height: 30px;
        color: #10271D;
        margin-top: 10px;
    }

    .right-contact .contact-rowed {
        margin-top: 25px;
        row-gap: 18px;
        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
    }

    .right-contact .input-appoint-beat {
        padding: 0 10px;
        max-width: 50%;
        flex: 0 0 50%;
    }

    .right-contact .input-appoint-data {
        padding: 0 10px;
        width: 100%;
    }

    .right-contact .input-appoint-beat input,
    .right-contact .input-appoint-beat .select-home {
        height: 52px;
        border: 2px solid #E7F0E9;
        border-radius: 30px;
        background-color: #FFF;
        padding: 13px 20px 13px 56px;
        font-size: 15px;
        width: 100%;
    }

    .right-contact .textarea-box {
        width: 100%;
        height: 125px;
        min-height: 110px;
        max-height: 160px;
        border: 2px solid #E7F0E9;
        border-radius: 20px;
        background-color: #FFF;
        padding: 15px 20px 15px 56px;
        font-size: 15px;
        line-height: 24px;
        color: #555555;
    }

    .right-contact .butn-submit-left {
        padding: 0 10px;
        width: 100%;
        margin-top: 15px;
    }
}

@media (max-width: 991px) {
    .left-contact {
        width: 100%;
    }

    .right-contact {
        width: 100%;
        background-color: #E7F0E9;
        border-radius: 20px;
        padding: 25px 20px;
    }

    .right-contact-desc {
        font-size: 16px;
        font-weight: 500;
        line-height: 26px;
        color: #10271D;
        margin-top: 8px;
    }

    .right-contact .contact-rowed {
        margin-top: 20px;
        row-gap: 15px;
    }

    .right-contact .input-appoint-beat {
        padding: 0;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .right-contact .input-appoint-data {
        padding: 0;
        width: 100%;
    }

    .right-contact .input-appoint-beat input,
    .right-contact .input-appoint-beat .select-home {
        height: 48px;
        border: 2px solid #E7F0E9;
        border-radius: 25px;
        background-color: #FFF;
        padding: 12px 18px 12px 50px;
        font-size: 14px;
        width: 100%;
    }

    .right-contact .textarea-box {
        width: 100%;
        height: 100px;
        min-height: 90px;
        max-height: 140px;
        border: 2px solid #E7F0E9;
        border-radius: 18px;
        background-color: #FFF;
        padding: 14px 18px 14px 50px;
        font-size: 14px;
        line-height: 22px;
        color: #555555;
    }

    .right-contact .butn-submit-left {
        display: flex;
        align-items: center;
        justify-content: start;
        margin-top: 15px;
        width: 100%;
    }
}

.data-blog-1 {
    display: none;
}

.blog-det {
    background-image: url(../images/hero/image-data-about-7.png)
}

.contact-det {
    background-image: url(../images/hero/image-data-about-8.png)
}

.blog-separate-image {
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
}

.blog-separate-image img {
    width: 100%;
    object-fit: cover;
}

.left-blog-data {
    width: 100%;
}

.blog-comment-bloger {
    margin: 10px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 80px;
}

.bloge-date-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.bloge-date-sep i {
    font-size: 24px;
    color: #10271D;
}

.bloge-date-sep p {
    color: #10271D;
    font-size: 16px;
    font-weight: 500;
}

.quite-box-data {
    margin: 15px 0;
    background-color: #E7F0E9;
    padding: 40px;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}

.quiz-text-blog {
    font-size: 22px;
    font-weight: 700;
    line-height: 36px;
    font-style: italic;
    color: #10271D;
}

.line_client {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.line {
    height: 2px;
    width: 60px;
    background-color: #10271D;
}

.jordon {
    color: #10271D;
    font-size: 16px;
    line-height: 20px;
    padding-left: 10px;
}

.image-data-blog {
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
}

.image-data-blog img {
    width: 100%;
    object-fit: cover;
}

.blog-data-sec-detail {
    width: 90%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    border-radius: 20px;
    padding: 20px;
    background-color: #FFF;
    gap: 12px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    margin-top: -60px;
    position: relative;
    z-index: 0;
}

.bloger-data {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.bloger-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.bloger-name i {
    color: #10271D;
    font-weight: 500;
}

.bloger-name p {
    color: #10271D;
}

.bloger-title-data-main {
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    color: #10271D;
    cursor: pointer;
}

.main-sec-blog {
    flex-direction: column;
}

/* ----------- Slider 3 project -2  */

.fnc-slider {
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    height: 100vh;
}

.fnc-slider *,
.fnc-slider *:before,
.fnc-slider *:after {
    box-sizing: border-box;
}

.fnc-slider__slides {
    position: relative;
    height: 100%;
    transition: transform 1s 0.6666666667s;
}

.fnc-slider .m--blend-dark .fnc-slide__inner {
    background-color: #8a8a8a;
}

.fnc-slider .m--blend-dark .fnc-slide__mask-inner {
    background-color: #575757;
}

.fnc-slider .m--navbg-dark {
    background-color: #575757;
}

.fnc-slider .m--blend-green .fnc-slide__inner {
    background-color: #6d9b98;
}

.fnc-slider .m--blend-green .fnc-slide__mask-inner {
    background-color: #42605E;
}

.fnc-slider .m--navbg-green {
    background-color: #42605E;
}

.fnc-slider .m--blend-red .fnc-slide__inner {
    background-color: #ea2329;
}

.fnc-slider .m--blend-red .fnc-slide__mask-inner {
    background-color: #990e13;
}

.fnc-slider .m--navbg-red {
    background-color: #990e13;
}

.fnc-slider .m--blend-blue .fnc-slide__inner {
    background-color: #59aecb;
}

.fnc-slider .m--blend-blue .fnc-slide__mask-inner {
    background-color: #2D7791;
}

.fnc-slider .m--navbg-blue {
    background-color: #2D7791;
}

.fnc-slide {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translate3d(0, 0, 0);
}

.fnc-slide.m--before-sliding {
    z-index: 2 !important;
    transform: translate3d(100%, 0, 0);
}

.fnc-slide.m--active-slide {
    z-index: 1;
    transition: transform 1s 0.6666666667s ease-in-out;
    transform: translate3d(0, 0, 0);
}

.fnc-slide__inner {
    position: relative;
    height: 100%;
    background-size: cover;
    background-position: center top;
    transform: translate3d(0, 0, 0);
}

.m--global-blending-active .fnc-slide__inner,
.m--blend-bg-active .fnc-slide__inner {
    background-blend-mode: luminosity;
}

.m--before-sliding .fnc-slide__inner {
    transform: translate3d(-100%, 0, 0);
}

.m--active-slide .fnc-slide__inner {
    transition: transform 1s 0.6666666667s ease-in-out;
    transform: translate3d(0, 0, 0);
}

.fnc-slide__mask {
    overflow: hidden;
    z-index: 1;
    position: absolute;
    right: 60%;
    top: 15%;
    width: 50.25vh;
    height: 67vh;
    margin-right: -90px;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 6vh 0, 6vh 61vh, 44vh 61vh, 44vh 6vh, 6vh 6vh);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 6vh 0, 6vh 61vh, 44vh 61vh, 44vh 6vh, 6vh 6vh);
    transform-origin: 50% 0;
    transition-timing-function: ease-in-out;
}

.m--before-sliding .fnc-slide__mask {
    transform: rotate(-10deg) translate3d(200px, 0, 0);
    opacity: 0;
}

.m--active-slide .fnc-slide__mask {
    transition: transform 0.7s 1.2222222222s, opacity 0.35s 1.2222222222s;
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.m--previous-slide .fnc-slide__mask {
    transition: transform 0.7s 0.3333333333s, opacity 0.35s 0.6833333333s;
    transform: rotate(10deg) translate3d(-200px, 0, 0);
    opacity: 0;
}

.fnc-slide__mask-inner {
    z-index: -1;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100vw;
    height: 100vh;
    margin-left: -50vw;
    margin-top: -50vh;
    background-size: cover;
    background-position: center center;
    background-blend-mode: luminosity;
    transform-origin: 50% 16.5vh;
    transition-timing-function: ease-in-out;
}

.m--before-sliding .fnc-slide__mask-inner {
    transform: translateY(0) rotate(10deg) translateX(-200px) translateZ(0);
}

.m--active-slide .fnc-slide__mask-inner {
    transition: transform 0.7s 1.2222222222s;
    transform: translateX(0);
}

.m--previous-slide .fnc-slide__mask-inner {
    transition: transform 0.7s 0.3333333333s;
    transform: translateY(0) rotate(-10deg) translateX(200px) translateZ(0);
}

.fnc-slide__content {
    z-index: 2;
    position: absolute;
    left: 40%;
    top: 40%;
}

.fnc-slide__heading {
    margin-bottom: 10px;
    text-transform: uppercase;
}

.fnc-slide__heading-line {
    overflow: hidden;
    position: relative;
    padding-right: 20px;
    font-size: 80px;
    font-weight: 800;
    color: #fff;
    word-spacing: 10px;
}

.m--before-sliding .fnc-slide__heading-line {
    transform: translateY(100%);
}

.m--active-slide .fnc-slide__heading-line {
    transition: transform 1.5s 1s;
    transform: translateY(0);
}

.m--previous-slide .fnc-slide__heading-line {
    transition: transform 1.5s;
    transform: translateY(-100%);
}

.fnc-slide__heading-line span {
    display: block;
}

.m--before-sliding .fnc-slide__heading-line span {
    transform: translateY(-100%);
}

.m--active-slide .fnc-slide__heading-line span {
    transition: transform 1.5s 1s;
    transform: translateY(0);
}

.m--previous-slide .fnc-slide__heading-line span {
    transition: transform 1.5s;
    transform: translateY(100%);
}

.fnc-slide__action-btn {
    position: relative;
    margin-left: 200px;
    padding: 5px 15px;
    font-size: 20px;
    line-height: 1;
    color: transparent;
    border: none;
    text-transform: uppercase;
    background: transparent;
    cursor: pointer;
    text-align: center;
    outline: none;
}

.fnc-slide__action-btn span {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: transform 0.3s;
    transform-origin: 50% 0;
    line-height: 30px;
    color: #fff;
}

.fnc-slide__action-btn span:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-top: none;
    border-bottom: none;
}

.fnc-slide__action-btn span:after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 30px;
    background: #1F2833;
    opacity: 0;
    transform-origin: 50% 0;
    transform: translateY(100%) rotateX(-90deg);
    transition: opacity 0.15s 0.15s;
}

.fnc-slide__action-btn:hover span {
    transform: rotateX(90deg);
}

.fnc-slide__action-btn:hover span:after {
    opacity: 1;
    transition: opacity 0.15s;
}

.fnc-nav {
    z-index: 5;
    position: absolute;
    right: 0;
    bottom: 0;
}

.fnc-nav__bgs {
    z-index: -1;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.fnc-nav__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.fnc-nav__bg.m--nav-bg-before {
    z-index: 2 !important;
    transform: translateX(100%);
}

.fnc-nav__bg.m--active-nav-bg {
    z-index: 1;
    transition: transform 1s 0.6666666667s;
    transform: translateX(0);
}

.fnc-nav__controls {
    font-size: 0;
}

.fnc-nav__control {
    overflow: hidden;
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 150px;
    height: 50px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-transform: capitalize;
    background: #10271D;
    border: none;
    outline: none;
    cursor: pointer;
    transition: background-color 0.5s;
}

.fnc-nav__control.m--active-control {
    background: #8bc34a;
    color: #10271D;
}

.fnc-nav__control-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    transform-origin: 0 50%;
    transform: scaleX(0);
    transition-timing-function: linear !important;
}

.m--with-autosliding .m--active-control .fnc-nav__control-progress {
    transform: scaleX(1);
}

.m--prev-control .fnc-nav__control-progress {
    transform: translateX(100%);
    transition: transform 0.5s !important;
}

.m--reset-progress .fnc-nav__control-progress {
    transform: scaleX(0);
    transition: transform 0s 0s !important;
}

.m--autosliding-blocked .fnc-nav__control-progress {
    transition: all 0s 0s !important;
    transform: scaleX(0) !important;
}

.demo-cont {
    overflow: hidden;
    position: relative;
    height: 100vh;
    perspective: 1500px;
    background: #000;
}

.demo-cont__credits {
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 1;
    position: absolute;
    right: 0;
    top: 0;
    width: 400px;
    height: 100%;
    padding: 20px 10px 30px;
    background: #303030;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    color: #fff;
    text-align: center;
    transition: transform 0.7s;
    transform: translate3d(100%, 0, 0) rotateY(-45deg);
    will-change: transform;
}

.credits-active .demo-cont__credits {
    transition: transform 0.7s 0.2333333333s;
    transform: translate3d(0, 0, 0);
}

.demo-cont__credits *,
.demo-cont__credits *:before,
.demo-cont__credits *:after {
    box-sizing: border-box;
}

.demo-cont__credits-close {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

.demo-cont__credits-close:before,
.demo-cont__credits-close:after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
    margin-top: -1px;
    background: #fff;
}

.demo-cont__credits-close:before {
    transform: rotate(45deg);
}

.demo-cont__credits-close:after {
    transform: rotate(-45deg);
}

.demo-cont__credits-heading {
    text-transform: uppercase;
    font-size: 40px;
    margin-bottom: 20px;
}

.demo-cont__credits-img {
    display: block;
    width: 60%;
    margin: 0 auto 30px;
    border-radius: 10px;
}

.demo-cont__credits-name {
    margin-bottom: 20px;
    font-size: 30px;
}

.demo-cont__credits-link {
    display: block;
    margin-bottom: 10px;
    font-size: 24px;
    color: #fff;
}

.demo-cont__credits-blend {
    font-size: 30px;
    margin-bottom: 10px;
}

.example-slider {
    z-index: 2;
    transform: translate3d(0, 0, 0);
    transition: transform 0.7s;
}

.credits-active .example-slider {
    transform: translate3d(-400px, 0, 0) rotateY(10deg) scale(0.9);
}

.example-slider .fnc-slide-1 .fnc-slide__inner,
.example-slider .fnc-slide-1 .fnc-slide__mask-inner {
    background-image: url("../images/project-3/image-1.png");
}

.example-slider .fnc-slide-2 .fnc-slide__inner,
.example-slider .fnc-slide-2 .fnc-slide__mask-inner {
    background-image: url("../images/project-3/image-2.png");
}

.example-slider .fnc-slide-3 .fnc-slide__inner,
.example-slider .fnc-slide-3 .fnc-slide__mask-inner {
    background-image: url("../images/project-3/image-3.png");
}

.example-slider .fnc-slide-3 .fnc-slide__inner:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
}

.example-slider .fnc-slide-4 .fnc-slide__inner,
.example-slider .fnc-slide-4 .fnc-slide__mask-inner {
    background-image: url("../images/project-3/image-6.png");
}

.example-slider .fnc-slide-4 .fnc-slide__inner:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
}

.colorful-switch {
    position: relative;
    width: 180px;
    height: 77.1428571429px;
    margin: 0 auto;
    border-radius: 32.1428571429px;
    background: #cfcfcf;
}

.colorful-switch:before {
    content: "";
    z-index: -1;
    position: absolute;
    left: -5px;
    top: -5px;
    width: 190px;
    height: 87.1428571429px;
    border-radius: 37.1428571429px;
    background: #314239;
    transition: background-color 0.3s;
}

.colorful-switch:hover:before {
    background: #4C735F;
}

.colorful-switch__checkbox {
    z-index: -10;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.colorful-switch__label {
    z-index: 1;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 32.1428571429px;
    cursor: pointer;
}

.colorful-switch__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 540px;
    height: 100%;
    background: linear-gradient(90deg, #14DCD6 0, #10E7BD 180px, #EF9C29 360px, #E76339 100%);
    transition: transform 0.5s;
    transform: translate3d(-360px, 0, 0);
}

.colorful-switch__checkbox:checked~.colorful-switch__label .colorful-switch__bg {
    transform: translate3d(0, 0, 0);
}

.colorful-switch__dot {
    position: absolute;
    left: 131.1428571429px;
    top: 50%;
    width: 5.1428571429px;
    height: 5.1428571429px;
    margin-left: -2.5714285714px;
    margin-top: -2.5714285714px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.5s;
    transform: translate3d(0, 0, 0);
}

.colorful-switch__checkbox:checked~.colorful-switch__label .colorful-switch__dot {
    transform: translate3d(-80.3571428571px, 0, 0);
}

.colorful-switch__on {
    position: absolute;
    left: 104.1428571429px;
    top: 22.5px;
    width: 19.2857142857px;
    height: 36px;
    transition: transform 0.5s;
    transform: translate3d(0, 0, 0);
}

.colorful-switch__checkbox:checked~.colorful-switch__label .colorful-switch__on {
    transform: translate3d(-80.3571428571px, 0, 0);
}

.colorful-switch__on__inner {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28);
    transform-origin: 100% 50%;
    transform: rotate(45deg) scale(0) translateZ(0);
}

.colorful-switch__checkbox:checked~.colorful-switch__label .colorful-switch__on__inner {
    transition: transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61);
    transform: rotate(45deg) scale(1) translateZ(0);
}

.colorful-switch__on__inner:before,
.colorful-switch__on__inner:after {
    content: "";
    position: absolute;
    border-radius: 2.5714285714px;
    background: #fff;
}

.colorful-switch__on__inner:before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 6.1428571429px;
}

.colorful-switch__on__inner:after {
    right: 0;
    top: 0;
    width: 6.1428571429px;
    height: 100%;
}

.colorful-switch__off {
    position: absolute;
    left: 131.1428571429px;
    top: 50%;
    width: 41.1428571429px;
    height: 41.1428571429px;
    margin-left: -20.5714285714px;
    margin-top: -20.5714285714px;
    transition: transform 0.5s;
    transform: translate3d(0, 0, 0);
}

.colorful-switch__checkbox:checked~.colorful-switch__label .colorful-switch__off {
    transform: translate3d(-80.3571428571px, 0, 0);
}

.colorful-switch__off:before,
.colorful-switch__off:after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 5.1428571429px;
    margin-top: -2.5714285714px;
    border-radius: 2.5714285714px;
    background: #fff;
    transition: transform 0.25s 0.25s;
}

.colorful-switch__checkbox:checked~.colorful-switch__label .colorful-switch__off:before,
.colorful-switch__checkbox:checked~.colorful-switch__label .colorful-switch__off:after {
    transition-delay: 0s;
}

.colorful-switch__off:before {
    transform: rotate(45deg) scaleX(1) translateZ(0);
}

.colorful-switch__checkbox:checked~.colorful-switch__label .colorful-switch__off:before {
    transform: rotate(45deg) scaleX(0) translateZ(0);
}

.colorful-switch__off:after {
    transition-timing-function: cubic-bezier(0.67, -0.16, 0.47, 1.61);
    transform: rotate(-45deg) scaleX(1) translateZ(0);
}

.colorful-switch__checkbox:checked~.colorful-switch__label .colorful-switch__off:after {
    transition-timing-function: ease;
    transform: rotate(-45deg) scaleX(0) translateZ(0);
}

/* -------------------- coming soon data */

.coming-data {
    width: 100%;
    height: 100vh;
    margin: auto;
    align-items: center;
    justify-content: start;
}

.main-skot {
    padding: 0;
}

.coming-slider {
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
}

.coming-slider img {
    width: 100%;
}

.slider-coming {
    width: 100%;
    height: 100%;
}

.coming-image-data {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
}

.coming-image-data * {
    outline: none;
}

.coming-image-data .slider-track {
    transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
}

.coming-image-data .coming-slider {
    height: 100%;
    position: relative;
    z-index: 1;
}

.coming-image-data .coming-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
    transform: scale(1.2);
}

.coming-image-data .coming-slider.slick-active img {
    transform: scale(1);
}

.coming-image-data .slick-slide {
    margin: 0;
}

.left-slide-coming {
    width: 100%;
    height: 100%;
    background-color: #10271D;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 20px;
    text-align: center;
    padding: 60px;
}

.main-skot {
    height: 100%;
}

.coming-image-data .slick-track {
    height: 100%;
    align-items: center;
    justify-content: center;
}

.coming-image-data .slick-list {
    height: 100%;
}

.left-slide-coming {
    background-image: url(../images/hero/left-mask.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}

.logo-coming img {
    width: 100%;
    max-width: 200px;
}

.comming-title {
    font-size: 40px;
    font-weight: 800;
    line-height: 64px;
    color: #FFF;
    margin-top: 30px;
}

.comming-title span {
    color: #9FD456;
}

.comming-desc {
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    color: #FFF;
    margin-top: 25px;
}

.wrapper {
    width: 100%;
    margin-top: 30px;
}

.countdown-container {
    width: 100%;
    height: 100%;
    text-align: center;
}

.countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve3d;
    perspective: 500px;
    height: 12rem;
    width: 100%;
    margin: 0 auto;
}

.countdown.remove {
    animation: hide-countdown 1s cubic-bezier(0, 0.9, 0.56, 1.2) forwards;
    overflow: hidden;
}

.number,
.separator {
    font-size: 70px;
    font-weight: 700;
    display: block;
    color: #8bc34a;
    height: auto;
    position: relative;
    text-align: center;
    width: 100%;
}

.separator {
    margin: 0;
    width: 2rem;
}

.new,
.old,
.current {
    color: #8bc34a;
    position: absolute;
    border-radius: 1rem;
    height: 10rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.new {
    animation: show-new 0.4s cubic-bezier(0, 0.9, 0.5, 1.2) forwards;
}

.old {
    animation: hide-old 2s cubic-bezier(0, 0.9, 0.56, 1.2) forwards;
}

.countdown section {
    position: relative;
}

#js-days:after,
#js-hours:after,
#js-minutes:after,
#js-seconds:after {
    content: "Days";
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    bottom: -40px;
    font-size: 18px;
    color: #FFF;
}

#js-hours:after {
    content: "Hourse";
}

#js-minutes:after {
    content: "Minuts";
}

#js-seconds:after {
    content: "Seconds";
}

@keyframes hide-countdown {
    to {
        height: 0;
        overflow: hidden;
    }
}

@keyframes show-new {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-2rem) scale(0.8) rotateX(-20deg);
    }
    100% {
        transform: translate(-50%, -50%);
    }
}

@keyframes hide-old {
    0% {
        transform: translate(-50%, -50%);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-5rem) scale(0.5) rotateX(-75deg);
    }
}

.comming-input {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 20px;
    width: 100%;
    max-width: 550px;
}

.comming-input input {
    display: flex;
    width: 100%;
    border: 2px solid #FFF;
    padding: 20px;
    background-color: transparent;
    border-radius: 100px;
    color: #FFF;
    position: relative;
}

.comming-input input:-webkit-autofill,
.comming-input input:-webkit-autofill:hover,
.comming-input input:-webkit-autofill:focus,
.comming-input input:-webkit-autofill:active {
    transition: background-color 5000000s ease-in-out 0s;
    background-color: transparent !important;
    color: #FFF !important;
}

.comming-input input:focus {
    color: #FFF;
    background-color: transparent;
    box-shadow: none;
}

.comming-input input:focus {
    background-color: transparent !important;
    -webkit-text-fill-color: #FFF !important;
    color: #FFF !important;
    box-shadow: none !important;
}

.data-comming-soon-btn {
    position: absolute;
    right: 5px;
    margin-top: 0;
    max-width: 200px;
}

.line-comming {
    width: 100%;
    height: 1px;
    background-color: #ffffff64;
    margin-top: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-coming {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
}

.social-main-data {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.social-design-comming {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: #FFF;
    border: 2px solid #FFF;
    border-radius: 100px;
    width: 40px;
    height: 40px;
    transition: all .5s ease;
    font-size: 22px;
}

.social-design-comming:hover {
    background-color: #8bc34a;
    color: #10271D;
    border: 2px solid #8bc34a;
    transition: all .5s ease;
}

.copy-comming {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #FFF;
}

.copy-comming a {
    color: #FFF;
}

/* ----------------------------------------- bottom to top page  */

#scroll {
    position: fixed;
    left: 24px;
    bottom: 24px;
    cursor: pointer;
    width: 48px;
    height: 48px;
    background-color: #8bc34a;
    display: none;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: all .5s ease-in;
    z-index: 9990;
}

#scroll:hover {
    background-color: #10271D;
    transition: all .5s ease-in;
    opacity: 1;
}

#scroll::before,
#scroll::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 0 0 #8bc34a;
    animation: button-ripple-2 3s infinite;
    opacity: 0.6;
    z-index: 0;
}

@keyframes button-ripple-2 {
    0% {
        box-shadow: 0 0 0 0 #8bc34a;
        opacity: 0.6;
    }
    70% {
        box-shadow: 0 0 0 var(--glow-size, 25px) #8bc34a;
        opacity: 0;
    }
    100% {
        box-shadow: 0 0 0 0 #8bc34a;
        opacity: 0;
    }
}

/* ----------------------------- bg-home Index.html video/image */

.image-home {
    width: 100%;
    height: 100%;
    background-color: #0b1510;
    border-radius: 20px;
    padding: 100px 0;
    padding-top: 160px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hero-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
    border-radius: 20px;
}

.image-home::after {
    position: absolute;
    content: " ";
    background: #000000;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    opacity: 0.60;
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 2;
}

.data-hero-home {
    position: relative;
    z-index: 995;
    width: 100%;
    max-width: 750px;
}

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

.home-made-services img {
    width: 100%;
    max-width: 100px;
}

.home-made-title {
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
    color: #FFF;
}

.home-hero-title {
    font-size: 64px;
    font-weight: normal;
    line-height: 80px;
    color: #FFF;
    margin-top: 20px;
}

.home-hero-title span {
    color: #9FD456;
    font-weight: 800;
}

.home-desc-made {
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    color: #FFF;
    margin-top: 40px;
}

.text-relable-data {
    position: absolute;
    width: 100%;
    margin: auto;
    text-align: center;
    bottom: -2%;
    left: 0;
    z-index: 111;
}

.home-renewable {
    font-size: 290px;
    line-height: 290px;
    pointer-events: none;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ------------------------------------ Video-home Index.html video */

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

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 0;
}

.data-video {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
    z-index: 1;
}

.video-home {
    background-image: none;
}

/* ------------------------------------ slider-home Index.html slider */

.video-slider-slider {
    width: 100%;
    position: relative;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.slider-under-home {
    width: 100%;
    position: relative;
    height: 100%;
}

.bg-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide-content {
    position: relative;
    z-index: 2;
    height: 100%;
    transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    max-height: 600px;
}

.slide-content {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.slide-content .home-made-services {
    transition-delay: 0.2s;
}

.slide-content .home-hero-title {
    transition-delay: 0.3s;
}

.slide-content .home-desc-made {
    transition-delay: 0.5s;
}

.slide-content .slider-btn {
    transition-delay: 0.7s;
}

.slick-active .slide-content,
.slick-active .slide-content .provide,
.slick-active .slide-content .quality,
.slick-active .slide-content .residents,
.slick-active .slide-content .btn-cutomer-main {
    opacity: 1;
    transform: translateY(0);
}

.slider-under-home {
    margin: 0;
}


/* ---------------------- bottom fixed */

.bottom-line-scotter {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    bottom: 0;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    height: 50px;
    left: 0;
    mask: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, black 100%) add;
    overflow: visible;
    position: fixed;
    right: 0;
    pointer-events: none;
}

#scroll {
    display: none;
}

.navbar-anchor.active {
    color: #9FD456;
}

.ul-design li a.active {
    color: #9FD456 !important;
}

/* ---------------------------------------update */

.menu {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu.active {
    opacity: 1;
    visibility: visible;
}

.right-design {
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
    transform: translateY(100%);
}

.left-design {
    transform: translateY(-100%);
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

.menu.active .left-design {
    transform: translateY(0%);
}

.menu.active .right-design {
    transform: translateY(0%);
    transition-delay: 0.1s;
}

/* ==========================================================================
   Services Dropdown & Service Detail Pages System
   ========================================================================== */

/* Navbar Services Dropdown */
.li-nav {
    position: relative;
}

.li-nav .ul-design {
    padding: 14px 10px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 4px;
    background-color: #FFFFFF;
    border-radius: 16px;
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
    min-width: 290px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1050;
    border: 1px solid rgba(16, 39, 29, 0.08);
}

.li-nav:hover .ul-design,
.li-nav .ul-design.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.ul-design .li-design {
    width: 100%;
}

.ul-design .anchor-design {
    width: 100%;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 20px;
    color: #10271D;
    padding: 9px 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.25s ease;
}

.ul-design .anchor-design:hover,
.ul-design .anchor-design.active {
    background-color: #F0F7ED;
    color: #3E8210 !important;
    padding-left: 18px;
}

.ul-design .anchor-design i {
    font-size: 15px;
    opacity: 0.5;
    transition: transform 0.25s ease;
}

.ul-design .anchor-design:hover i {
    transform: translateX(3px);
    opacity: 1;
    color: #3E8210;
}

/* Mobile Dropdown Submenu */
.under-menu-li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.under-menu-li li {
    width: 100%;
}

.under-menu-li .ander-li-achor {
    font-size: 16px;
    font-weight: 600;
    padding: 10px 10px 10px 35px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.85);
    display: block;
    transition: all 0.25s ease;
}

.under-menu-li .ander-li-achor:hover,
.under-menu-li .ander-li-achor.active {
    color: #9FD456 !important;
    padding-left: 42px;
}

/* Service Detail Page Layout */
.service-detail-wrap {
    padding: 70px 0 100px;
    background: #FFFFFF;
}

.service-main-image {
    width: 100%;
    border-radius: 22px;
    overflow: hidden;
    margin-bottom: 35px;
    position: relative;
    box-shadow: 0 15px 35px rgba(16, 39, 29, 0.1);
}

.service-main-image img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.service-main-image:hover img {
    transform: scale(1.03);
}

.service-badge-overlay {
    position: absolute;
    bottom: 22px;
    left: 22px;
    background: rgba(16, 39, 29, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #FFFFFF;
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 14.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1.5px solid rgba(159, 212, 86, 0.45);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.service-badge-overlay i {
    color: #9FD456;
    font-size: 18px;
}

.service-detail-wrap .box-data-design {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid #E1EFE0;
    border-radius: 50px;
    background: #F4FAF2;
    padding: 6px 18px;
    margin-bottom: 16px;
}

.service-detail-wrap .box-data-design .dot-data {
    width: 8px;
    height: 8px;
    background-color: #3E8210;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(62, 130, 16, 0.5);
}

.service-detail-wrap .box-data-design .title-font {
    font-size: 13.5px;
    font-weight: 700;
    color: #3E8210;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0;
}

.service-heading,
h1.service-heading,
h2.service-heading {
    font-size: 34px;
    font-weight: 800;
    line-height: 46px;
    color: #10271D;
    margin: 12px 0 16px;
    letter-spacing: -0.3px;
}

.service-heading span,
h1.service-heading span,
h2.service-heading span {
    color: #3E8210;
}

.service-subheading,
p.service-subheading {
    font-size: 16.5px;
    font-weight: 600;
    line-height: 28px;
    color: #2B570B;
    margin-bottom: 22px;
    padding: 14px 20px;
    background: #F6FBF3;
    border-left: 4px solid #9FD456;
    border-radius: 0 12px 12px 0;
}

.service-detail-wrap p {
    font-size: 15px;
    color: #4B5563;
    line-height: 27px;
    margin-bottom: 18px;
}

.service-detail-wrap strong {
    color: #10271D;
    font-weight: 700;
}

.service-detail-wrap h3 {
    font-size: 22px;
    font-weight: 800;
    color: #10271D;
    margin: 36px 0 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.service-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 25px 0 35px;
}

.service-feature-card {
    background: #F7FAF4;
    border: 1.5px solid #E3EFE0;
    border-radius: 18px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(16, 39, 29, 0.03);
}

.service-feature-card:hover {
    transform: translateY(-4px);
    border-color: #9FD456;
    box-shadow: 0 12px 28px rgba(16, 39, 29, 0.08);
    background: #FFFFFF;
}

.service-feature-card .icon-wrap,
.service-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #10271D;
    color: #9FD456;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(16, 39, 29, 0.15);
}

.service-feature-card h5,
.service-feature-title {
    font-size: 17px;
    font-weight: 700;
    color: #10271D;
    margin: 4px 0 0;
}

.service-feature-card p,
.service-feature-desc {
    font-size: 14px;
    color: #555555;
    line-height: 22px;
    margin: 0;
}

/* Scope & Technical Specifications Table */
.service-spec-table {
    width: 100%;
    margin: 25px 0 35px;
    border-radius: 16px;
    overflow: hidden;
    border: 1.5px solid #E1EFE0;
    box-shadow: 0 4px 18px rgba(16, 39, 29, 0.04);
}

.service-spec-table table {
    width: 100%;
    border-collapse: collapse;
}

.service-spec-table th {
    background-color: #10271D;
    color: #FFFFFF;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
}

.service-spec-table td {
    padding: 14px 20px;
    font-size: 14.5px;
    color: #333333;
    border-bottom: 1px solid #EAEAEA;
    background-color: #FFFFFF;
}

.service-spec-table tr:nth-child(even) td {
    background-color: #F9FCF8;
}

.service-spec-table td:first-child {
    font-weight: 700;
    color: #10271D;
    width: 34%;
    border-right: 1px solid #EAEAEA;
}

/* Service Process Steps */
.service-steps-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 25px 0 35px;
}

.service-step-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: #FFFFFF;
    border: 1.5px solid #E6EFE4;
    padding: 18px 22px;
    border-radius: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(16, 39, 29, 0.03);
}

.service-step-item:hover {
    border-color: #9FD456;
    transform: translateX(4px);
    box-shadow: 0 8px 22px rgba(16, 39, 29, 0.07);
}

.service-step-item .step-badge,
.service-step-number {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #10271D;
    color: #9FD456;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(16, 39, 29, 0.2);
    border: 2px solid #9FD456;
}

.service-step-item h5,
.service-step-info h4 {
    font-size: 17px;
    font-weight: 700;
    color: #10271D;
    margin-bottom: 4px;
}

.service-step-item p,
.service-step-info p {
    font-size: 14px;
    color: #555555;
    line-height: 22px;
    margin: 0;
}

/* Sidebar Styles */
.service-sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: sticky;
    top: 100px;
}

.sidebar-widget {
    background: #F7FAF4;
    border: 1.5px solid #E3EFE0;
    border-radius: 20px;
    padding: 30px 24px;
    box-shadow: 0 10px 30px rgba(16, 39, 29, 0.04);
}

.sidebar-widget-title,
.sidebar-title {
    font-size: 20px;
    font-weight: 800;
    color: #10271D;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 2px solid #E1EFE0;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-widget-title::after,
.sidebar-title::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 50px;
    height: 3px;
    background: #9FD456;
    border-radius: 2px;
}

.service-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.service-nav-list li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.service-nav-list li a,
.service-nav-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    background: #FFFFFF;
    border: 1.5px solid #E6EFE4;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #10271D !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(16, 39, 29, 0.03);
}

.service-nav-list li a span,
.service-nav-item a span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
}

.service-nav-list li a .nav-svc-icon {
    font-size: 17px;
    color: #3E8210;
    transition: color 0.3s ease;
}

.service-nav-list li a i.ri-arrow-right-s-line,
.service-nav-item a i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #F0F7EC;
    color: #3E8210;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-left: 8px;
}

.service-nav-list li a:hover,
.service-nav-item a:hover {
    background: #10271D;
    color: #FFFFFF !important;
    border-color: #10271D;
    transform: translateX(6px);
    box-shadow: 0 8px 22px rgba(16, 39, 29, 0.16);
}

.service-nav-list li a:hover .nav-svc-icon {
    color: #9FD456;
}

.service-nav-list li a:hover i.ri-arrow-right-s-line,
.service-nav-item a:hover i {
    background: #9FD456;
    color: #10271D;
    transform: translateX(2px);
}

.service-nav-list li a.active,
.service-nav-list li.active a,
.service-nav-item.active a {
    background: #10271D;
    color: #FFFFFF !important;
    border-color: #10271D;
    border-left: 4px solid #9FD456 !important;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(16, 39, 29, 0.18);
}

.service-nav-list li a.active .nav-svc-icon {
    color: #9FD456;
}

.service-nav-list li a.active i.ri-arrow-right-s-line,
.service-nav-list li.active a i,
.service-nav-item.active a i {
    background: #9FD456;
    color: #10271D;
    font-weight: 700;
}

.sidebar-contact-box {
    background: linear-gradient(145deg, #10271D 0%, #193D2C 100%);
    border: 1.5px solid rgba(159, 212, 86, 0.25);
    border-radius: 20px;
    padding: 32px 24px;
    color: #FFFFFF;
    text-align: center;
    box-shadow: 0 12px 32px rgba(16, 39, 29, 0.22);
    position: relative;
    overflow: hidden;
}

.sidebar-contact-box::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 130px;
    height: 130px;
    background: radial-gradient(circle, rgba(159, 212, 86, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.sidebar-contact-icon,
.sidebar-contact-box .phone-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(159, 212, 86, 0.16);
    border: 1.5px solid rgba(159, 212, 86, 0.35);
    color: #9FD456;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin: 0 auto 18px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.sidebar-contact-title,
.sidebar-contact-box h4 {
    font-size: 22px;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 10px;
}

.sidebar-contact-desc,
.sidebar-contact-box p {
    font-size: 14px;
    color: #C1CDC6;
    line-height: 22px;
    margin-bottom: 18px;
}

.sidebar-contact-phone,
.sidebar-contact-box .phone-link {
    font-size: 16px;
    font-weight: 700;
    color: #9FD456 !important;
    display: inline-block;
    margin-bottom: 6px;
    text-decoration: none !important;
    transition: all 0.25s ease;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
}

.sidebar-contact-phone:hover,
.sidebar-contact-box .phone-link:hover {
    color: #FFFFFF !important;
    background: rgba(159, 212, 86, 0.18);
    transform: translateY(-1px);
}

.sidebar-contact-box .button,
.sidebar-contact-box .button-design {
    width: 100%;
    margin-top: 15px;
    justify-content: center;
    background: #FFFFFF !important;
    color: #10271D !important;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
}

.sidebar-contact-box .button:hover,
.sidebar-contact-box .button-design:hover {
    background: #9FD456 !important;
    color: #10271D !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(159, 212, 86, 0.3);
}

@media (max-width: 991px) {
    .service-main-image img {
        height: 280px;
    }
    .service-feature-grid {
        grid-template-columns: 1fr;
    }
    .service-main-content h2.service-heading {
        font-size: 28px;
        line-height: 38px;
    }
    .service-sidebar {
        margin-top: 40px;
        position: static;
    }
}

/* ==========================================================================
   Floating Action Buttons (WhatsApp & Contact) & Quick Lead Modal
   ========================================================================== */

.floating-actions {
    position: fixed;
    right: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    z-index: 9995;
    pointer-events: auto;
}

/* Base floating button */
.floating-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 22px;
    border-radius: 50px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    border: 1px solid transparent;
    cursor: pointer;
    outline: none;
    user-select: none;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.floating-action i {
    font-size: 19px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* WhatsApp Floating Button */
.floating-action.floating-whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.38), 0 2px 6px rgba(0, 0, 0, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    position: relative;
}

.floating-action.floating-whatsapp::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 54px;
    border: 2px solid #25D366;
    opacity: 0;
    animation: floating-whatsapp-pulse 2.8s cubic-bezier(0.24, 0, 0.38, 1) infinite;
    pointer-events: none;
}

@keyframes floating-whatsapp-pulse {
    0% {
        transform: scale(0.96);
        opacity: 0.75;
    }
    50% {
        transform: scale(1.08);
        opacity: 0;
    }
    100% {
        transform: scale(1.08);
        opacity: 0;
    }
}

.floating-action.floating-whatsapp:hover {
    transform: translateX(-4px) scale(1.03);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.52), 0 4px 10px rgba(0, 0, 0, 0.12);
    color: #ffffff;
}

.floating-action.floating-whatsapp:active {
    transform: translateX(-2px) scale(0.98);
}

/* Contact Floating Button */
.floating-action.floating-contact {
    background: linear-gradient(135deg, #10271D 0%, #17382a 100%);
    color: #ffffff;
    border-color: rgba(159, 212, 86, 0.45);
    box-shadow: 0 8px 24px rgba(16, 39, 29, 0.4), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.floating-action.floating-contact i {
    color: #9FD456;
}

.floating-action.floating-contact:hover {
    background: linear-gradient(135deg, #163627 0%, #1f4a38 100%);
    border-color: #9FD456;
    transform: translateX(-4px) scale(1.03);
    box-shadow: 0 12px 30px rgba(16, 39, 29, 0.55), 0 0 18px rgba(159, 212, 86, 0.25);
    color: #ffffff;
}

.floating-action.floating-contact:active {
    transform: translateX(-2px) scale(0.98);
}

/* Mobile Responsive Floating Buttons */
@media (max-width: 767px) {
    .floating-actions {
        right: 14px;
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        gap: 10px;
        z-index: 9995;
    }
    .floating-action {
        width: 48px;
        height: 48px;
        padding: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
    }
    .floating-action span {
        display: none;
    }
    .floating-action i {
        font-size: 24px;
        margin: 0;
    }
    .floating-action.floating-whatsapp::before {
        border-radius: 50%;
    }
    #scroll {
        left: 14px;
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
}

/* ==========================================================================
   Floating Lead Capture Modal & Overlay
   ========================================================================== */

.floating-lead-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(10, 26, 19, 0.68);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    box-sizing: border-box;
}

.floating-lead-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.floating-lead-modal {
    background: #ffffff;
    width: 100%;
    max-width: 440px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
    transform: translateY(20px) scale(0.96);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'Plus Jakarta Sans', sans-serif;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.floating-lead-modal-overlay.active .floating-lead-modal {
    transform: translateY(0) scale(1);
}

.floating-lead-modal-header {
    padding: 22px 24px 18px;
    position: relative;
    border-bottom: 1px solid #f0f4f1;
    background: linear-gradient(180deg, #F8FAF8 0%, #FFFFFF 100%);
}

.floating-lead-modal-header.theme-whatsapp {
    background: linear-gradient(135deg, #075E54 0%, #128C7E 100%);
    color: #ffffff;
    border-bottom: none;
}

.floating-lead-modal-header.theme-contact {
    background: linear-gradient(135deg, #10271D 0%, #1B4332 100%);
    color: #ffffff;
    border-bottom: none;
}

.floating-lead-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    margin-bottom: 8px;
}

.floating-lead-badge i {
    font-size: 13px;
}

.floating-lead-modal-title {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 4px;
    color: #ffffff;
}

.floating-lead-modal-subtitle {
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
}

.floating-lead-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.floating-lead-modal-close:hover {
    background: rgba(255, 255, 255, 0.32);
    transform: scale(1.08);
}

.floating-lead-modal-body {
    padding: 22px 24px 26px;
}

.floating-lead-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.floating-lead-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.floating-lead-label {
    font-size: 12px;
    font-weight: 700;
    color: #10271D;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.floating-lead-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.floating-lead-input-wrap i {
    position: absolute;
    left: 14px;
    font-size: 16px;
    color: #7d8f85;
    pointer-events: none;
    transition: color 0.2s ease;
}

.floating-lead-input,
.floating-lead-textarea {
    width: 100%;
    padding: 11px 14px 11px 40px;
    border: 1.5px solid #E1E8E3;
    border-radius: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    color: #10271D;
    background: #F8FAF8;
    transition: all 0.25s ease;
    outline: none;
    box-sizing: border-box;
}

.floating-lead-textarea {
    padding-left: 40px;
    resize: none;
    min-height: 72px;
    padding-top: 10px;
}

.floating-lead-input:focus,
.floating-lead-textarea:focus {
    background: #ffffff;
    border-color: #438B3B;
    box-shadow: 0 0 0 3px rgba(67, 139, 59, 0.12);
}

.floating-lead-input:focus + i,
.floating-lead-textarea:focus + i {
    color: #438B3B;
}

.floating-lead-error {
    font-size: 11.5px;
    color: #d93025;
    margin-top: 2px;
    display: none;
    font-weight: 600;
}

.floating-lead-submit {
    margin-top: 4px;
    width: 100%;
    padding: 13px 20px;
    border-radius: 10px;
    border: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s ease;
    outline: none;
}

.floating-lead-submit.theme-whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
}

.floating-lead-submit.theme-whatsapp:hover {
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.5);
    transform: translateY(-1px);
}

.floating-lead-submit.theme-contact {
    background: linear-gradient(135deg, #10271D 0%, #1F4D38 100%);
    box-shadow: 0 6px 18px rgba(16, 39, 29, 0.35);
}

.floating-lead-submit.theme-contact:hover {
    background: linear-gradient(135deg, #17382a 0%, #29664b 100%);
    box-shadow: 0 8px 24px rgba(16, 39, 29, 0.45);
    transform: translateY(-1px);
}

.floating-lead-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

.floating-lead-status {
    display: none;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.45;
    text-align: center;
    margin-top: 8px;
}

.floating-lead-status.success {
    display: block;
    background: #E8F5E9;
    color: #1B5E20;
    border: 1.5px solid #C8E6C9;
}

.floating-lead-status.error {
    display: block;
    background: #FFEBEE;
    color: #C62828;
    border: 1.5px solid #FFCDD2;
}

.floating-lead-direct-call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 12.5px;
    color: #55695E;
}

.floating-lead-direct-call a {
    color: #438B3B;
    font-weight: 700;
    text-decoration: underline;
}

.floating-lead-direct-call a:hover {
    color: #10271D;
}

@media (min-width: 768px) {
    .floating-lead-modal-overlay {
        background: rgba(10, 26, 19, 0.45);
        align-items: flex-end;
        justify-content: flex-end;
        padding-right: 24px;
        padding-bottom: 125px;
    }
    .floating-lead-modal {
        max-width: 380px;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.08);
    }
}

/* ==========================================================================
   On-Page Consultation / Contact Form Alerts
   ========================================================================== */

.consultation-form-alert {
    width: 100%;
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    animation: fadeInAlert 0.3s ease;
}

@keyframes fadeInAlert {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.consultation-form-alert.success {
    background: #E8F5E9;
    color: #1B5E20;
    border: 1.5px solid #A5D6A7;
}

.consultation-form-alert.error {
    background: #FFEBEE;
    color: #C62828;
    border: 1.5px solid #FFCDD2;
}

.consultation-form-alert i {
    font-size: 20px;
    flex-shrink: 0;
}

.input-appoint.has-error input,
.input-appoint-beat.has-error input {
    border-color: #d93025 !important;
    background-color: #fff8f8 !important;
}