/*------------------------------------------------------------------
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 {
    overflow: hidden;
    width: 100%;
    will-change: transform;
}

.fade_up,
.fade_down,
.zoom_in,
.zoom_out {
    opacity: 0;
    transition: all 2s;
}

.fade_up {
    transform: translateY(-100%);
}

.fade_down {
    transform: translateY(100%);
}

.zoom_in {
    transform: scale(0.5);
}

.zoom_out {
    transform: scale(1.5);
}

.fade_right {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 2s;
}

.fade_left {
    opacity: 0;
    transform: translateX(100%);
    transition: all 2s;
}

.flip_left {
    opacity: 0;
    transform: perspective(400px) rotateY(-90deg);
    transition: all 2s;
}

.flip_right {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
    transition: all 2s;
}

.flip_up {
    opacity: 0;
    transform: perspective(400px) rotateX(-90deg);
    transition: all 2s;
}

.flip_down {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
    transition: all 2s;
}

.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.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: fixed;
    top: 10px;
    left: 0px;
    z-index: 99;
    transition: all 0.3s ease-in-out;
}

.data-separate {
    position: relative;
    top: 0;
    margin-top: 10px;
}

.data-separate.active {
    position: fixed;
    top: 10px;
    animation: slideIn 0.5s ease forwards;
}

.design-data.active {
    background-color: #10271D;
    animation: slideIn 0.5s ease forwards;
    transform: translateY(-100%);
}

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

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

@keyframes slideIn {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

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

.logo-data img {
    width: 100%;
}

.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: 100;
    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 {
    max-width: 200px;
    width: 100%;
}

.logo-data {
    display: inline-flex;
}

.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(../images/services/bg.png);
    background-position: top 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) 100%);
}

.data-design-margin {
    margin-top: 300px;
    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: #888888;
}

.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: start;
    justify-content: start;
    padding: 40px;
    gap: 20px;
    flex-direction: column;
}

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

.solar-services {
    font-size: 26px;
    font-weight: 700;
    line-height: 36px;
    color: #FFF;
}

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

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

.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: start;
    justify-content: start;
    padding: 40px;
    gap: 20px;
    flex-direction: column;
}

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

.solar-services-center {
    font-size: 26px;
    font-weight: 700;
    line-height: 36px;
    color: #10271D;
}

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

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

.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: center;
    justify-content: center;
}

/* --------------------- [ 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 #888888;
    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: #888888;
    margin-top: 20px;
}

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

.tile-data-about {
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    color: #888888;
    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: #E7F0E9;
    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: 500;
    line-height: 30px;
    color: #888888;
    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: 2px solid #E7F0E9;
    border-radius: 200px;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.palate-exper-right {
    width: 330px;
    height: 330px;
    background-color: #FFF;
    border: 2px solid #E7F0E9;
    border-radius: 200px;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.palate-exper-bottom {
    width: 330px;
    height: 330px;
    background-color: #FFF;
    border: 2px solid #E7F0E9;
    border-radius: 200px;
    z-index: 1;
    margin-top: 258px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.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: #10271D;
}

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

/* --------------------- [ 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-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    border-radius: 20px;
    padding: 250px 0;
    padding-bottom: 610px;
    transition: background-image 2s ease-in-out;
    animation: zoomEffect 35s linear infinite;
}

@keyframes zoomEffect {
    0% {
        transform: scale(1);
    }

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

.appoint-video {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    background-color: #9FD456;
    width: 140px;
    height: 140px;
    position: relative;
}

.appoint-video::before,
.appoint-video::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 0 0 #FFFF;
    animation: button-ripple 3s infinite;
    opacity: 0.6;
    z-index: 0;
}

.appoint-video::after {
    animation-delay: 1.5s;
}

@keyframes button-ripple {
    0% {
        box-shadow: 0 0 0 0 #FFFF;
        opacity: 0.6;
    }

    70% {
        box-shadow: 0 0 0 var(--glow-size, 25px) #FFFF;
        opacity: 0;
    }

    100% {
        box-shadow: 0 0 0 0 #FFFF;
        opacity: 0;
    }
}

.appoint-video img {
    width: 100%;
    max-width: 48px;
}

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

.appoit-detail {
    width: 100%;
    background-color: #FFF;
    border: 2px solid #E7F0E9;
    border-radius: 20px;
    box-shadow: 0px 10px 20px 4px rgba(16, 39, 29, 0.1);
    padding: 60px;
    position: relative;
    z-index: 11;
}

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

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

.input-appoint {
    max-width: 490px;
    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: 30px;
    background-color: #FFF;
    padding: 15px;
    padding-left: 60px;
}

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

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

.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: 30px;
    background-color: #FFF;
    padding: 15px;
    padding-left: 60px;
    color: #888888;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

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

.down-btn {
    position: absolute;
    right: 20px;
    top: 17px;
}

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

.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: 30px;
    background-color: #FFF;
    padding: 15px;
    padding-left: 60px;
    color: #888888;
    max-height: 60px;
}

textarea {
    resize: none;
}

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

/* --------------------- [ Why choose us Section Design ] --------------------- */
.data-why {
    align-items: end;
    row-gap: 30px;
    justify-content: end;
}

video {
    width: 100%;
    height: 100%;
}

.video-data {
    width: 100%;
    max-height: 275px;
    overflow: hidden;
}

.why-choose-desc {
    margin-bottom: 0px;
}

.why-choose-data {
    margin-top: 60px;
    align-items: start;
    justify-content: center;
    row-gap: 30px;
}

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

.top-tilte {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 15px;
    width: 100%;
}

.top-tilte img {
    width: 100%;
    max-width: 40px;
}

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

.title-desc-why {
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    color: #888888;
}

/* --------------------- [ 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;
}

.image-data-succes {
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

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

.overlay-succes {
    position: absolute;
    bottom: 10px;
    width: 95%;
    border-radius: 10px;
    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);
}

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

.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 {
    height: 100%;
}

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

/* --------------------- [ Working Prosess Section Design ] --------------------- */
.work-data {
    background-color: #E7F0E9;
}

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

.work-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    height: 100%;
}

.image-prosess {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 240px;
    margin: auto;
    border-radius: 100%;
    overflow: hidden;
}

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

.proses-detail {
    width: 100%;
    padding: 15px;
    padding-top: 55px;
    box-shadow: 0px 30px 25px -20px rgba(16, 39, 29, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #FFF;
    position: relative;
    margin-top: -60px;
}

.number-proses {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #9FD456;
    color: #FFF;
    width: 80px;
    height: 80px;
    font-size: 36px;
    font-weight: 700;
    line-height: 36px;
    border-radius: 100px;
    position: absolute;
    top: -18%;
}

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

.prosess-desc {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #888888;
    margin-top: 10px;
}

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

.blog-sec {
    padding-bottom: 255px;
}

/* --------------------- [ 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: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: normal;
    margin-top: -355px;
}

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

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

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

.dotter {
    font-weight: 800;
    display: contents;
}

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

.last-btn {
    display: flex;
    align-items: center;
    justify-items: start;
    background-color: #FFF;
    border-radius: 10px;
    padding: 20px;
    padding-right: 90px;
    margin-top: 40px;
    gap: 10px;
}

.last-btn img {
    width: 100%;
    max-width: 60px;
}

.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: 36px;
    color: #10271D;
}

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

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

.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: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #888888;
}

/* ------------------------ [ 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: 999;
    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: #888888;
    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: 30px;
    align-items: center;
    justify-content: center;
}

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

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

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

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

.box-data-services {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 20px;
    background-color: #10271D;
}

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

.services-sec-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 36px;
    color: #10271D;
    margin-top: 30px;
}

.services-sec-desc {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #888888;
    margin-top: 10px;
}

.services-second-text .button {
    margin-top: 30px;
}

.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: 2px solid #E7F0E9;
}

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

.left-contact {
    width: 100%;
}

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

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

.contact-rowed {
    margin-top: 30px;
    row-gap: 20px;
    justify-content: space-between;
}

.input-appoint-beat {
    padding: 0;
    max-width: 385px;
}

.input-appoint-beat input {
    border: 2px solid #E7F0E9;
    border-radius: 30px;
    background-color: #FFF;
    padding: 15px;
    padding-left: 60px;
}

.butn-submit-left {
    display: flex;
    align-items: center;
    justify-content: start;
    margin-top: 30px;
}

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

.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;
    right: 30px;
    bottom: 30px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    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;
}

#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 image */
.image-home {
    width: 100%;
    height: 100%;
    background-image: url(../images/hero/image-home-1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    padding: 100px 0;
    padding-top: 160px;
    position: relative;
    overflow: hidden;
}

.image-home::after {
    position: absolute;
    content: " ";
    background: #000000;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    opacity: 0.65;
    pointer-events: none;
    top: 0;
    left: 0;
}

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

/*---------------------- text-scroll animation  */
.title-about {
    font-size: 48px;
    font-weight: normal;
    line-height: 64px;
    color: #88888817;
    background: linear-gradient(to right, #10271D, #10271D) no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 50% 100%;
    transition: background-size 0.5s cubic-bezier(.1, .5, .5, 1);
    display: inline-block;
}

@keyframes scroll-text-color {
    to {
        background-size: 100%;
    }
}

.services-detail-title {
    color: #88888817;
    background: linear-gradient(to right, #10271D, #10271D) no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 30% 100%;
    transition: background-size 0.5s cubic-bezier(.1, .5, .5, 1);
    display: inline-block;
}

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