/*
************
*************************

   Template Name: Eula - Creative Personal Portfolio HTML Template
   Description: Philip is a modern unique design layout focused for resume, cv, vCard, startup business, companies, agencies, all types of professions person which need a professional way to showcase their projects and services with 100% super responsive experience.
   Author: _ThemePhi
   Version: 1.0

-----------------------------------------------------------------------------------

CSS INDEX
===================
02. header
03. banner


*******************************************************
*************************************************************** */
/*
************
*************************
01. common
*******************************************************
*************************************************************** */
/* ///////////////////////////////////////////////////////////
Responsive Layout Declaration
/////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////
Font Family Declaration
/////////////////////////////////////////////////////////// */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
/* ///////////////////////////////////////////////////////////
Color Declaration
/////////////////////////////////////////////////////////// */
:root {
    --clr-common-white: #FFFFFF;
    --clr-common-black: #0F291F;
    --clr-common-lightBlack: #0F291F;
    --clr-common-border: #525252;
    --clr-body-heading: #0B0C0F;
    --clr-body-text: #475569;
    --clr-theme-primary: #03c03c;
    --clr-theme-primary-dark: #5839FF;
    --clr-theme-primary-soft: #E5F8F0;
    --clr-bg-gray: #F7F9FB;
}

/* ///////////////////////////////////////////////////////////
Mixin Declaration
/////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////
Animation Declaration
/////////////////////////////////////////////////////////// */
@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes wcSlideBottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes wcSlideBottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@-webkit-keyframes reveal {
    to {
        opacity: 1;
        -webkit-filter: blur(0px);
        filter: blur(0px);
    }
}
@keyframes reveal {
    to {
        opacity: 1;
        -webkit-filter: blur(0px);
        filter: blur(0px);
    }
}
@-webkit-keyframes wcfadeUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes wcfadeUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@-webkit-keyframes wcSpinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes wcSpinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
body {
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--clr-body-text);
    font-size: 16px;
    line-height: 26px;
}

.img, img {
    max-width: 100%;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}

a,
.button, button {
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}

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

a:focus,
a:hover {
    color: inherit;
    text-decoration: none;
}

a,
button {
    color: inherit;
    outline: medium none;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 15px;
    font-family: "Manrope", sans-serif;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
}

h1 {
    font-size: 62px;
}

h2 {
    font-size: 48px;
}

h3 {
    font-size: 36px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 16px;
}

a {
    text-decoration: none;
    transition: all 0.3s linear 0s;
}

p {
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: var(--clr-body-text);
}

ul {
    margin: 0;
    padding: 0;
}

hr {
    border-top: 0 none;
    padding: 0;
    opacity: 1;
}

label {
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
}

*::-moz-selection {
    background-color: var(--clr-theme-primary);
    color: var(--clr-common-white);
    text-shadow: none;
}

::-moz-selection {
    background-color: var(--clr-theme-primary);
    color: var(--clr-common-white);
    text-shadow: none;
}

::selection {
    background-color: var(--clr-theme-primary);
    color: var(--clr-common-white);
    text-shadow: none;
}

input:focus::placeholder, textarea:focus::placeholder {
    opacity: 0;
}

input::-webkit-input-placeholder {
    color: var(--clr-body-text);
    font-size: 14px;
    opacity: 1;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
input:-moz-placeholder {
    color: var(--clr-body-text);
    font-size: 14px;
    opacity: 1;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
input::-moz-placeholder {
    color: var(--clr-body-text);
    font-size: 14px;
    opacity: 1;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
input:-ms-input-placeholder {
    color: var(--clr-body-text);
    font-size: 14px;
    opacity: 1;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}

textarea::-webkit-input-placeholder {
    color: var(--clr-body-text);
    font-size: 14px;
    opacity: 1;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
textarea:-moz-placeholder {
    color: var(--clr-body-text);
    font-size: 14px;
    opacity: 1;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
textarea::-moz-placeholder {
    color: var(--clr-body-text);
    font-size: 14px;
    opacity: 1;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
textarea:-ms-input-placeholder {
    color: var(--clr-body-text);
    font-size: 14px;
    opacity: 1;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}

/* <<<<<<<    Common Classes   >>>>>>>>> */
.fix {
    overflow: hidden;
}

.clear {
    clear: both;
}

.nh_light_bg {
    background-color: var(--clr-bg-gray);
}

.nh_border_bottom {
    border-bottom: 1px solid rgb(242, 242, 242);
}

.pb-06 {
    padding-bottom: 6px;
}

.mb-05 {
    margin-bottom: 5px;
}

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

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

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

/* <<<<<<<    Overlay   >>>>>>>>> */
[data-overlay] {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
[data-overlay]::before {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    content: "";
}

/* <<<<<<<    Margin & Padding     >>>>>>>>> */
.mt-5 {
    margin-top: 5px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ml-5 {
    margin-left: 5px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-15 {
    margin-left: 15px;
}

.ml-20 {
    margin-left: 20px;
}

.ml-25 {
    margin-left: 25px;
}

.ml-30 {
    margin-left: 30px;
}

.ml-35 {
    margin-left: 35px;
}

.ml-40 {
    margin-left: 40px;
}

.ml-45 {
    margin-left: 45px;
}

.ml-50 {
    margin-left: 50px;
}

.ml-55 {
    margin-left: 55px;
}

.ml-60 {
    margin-left: 60px;
}

.ml-65 {
    margin-left: 65px;
}

.ml-70 {
    margin-left: 70px;
}

.ml-75 {
    margin-left: 75px;
}

.ml-80 {
    margin-left: 80px;
}

.ml-85 {
    margin-left: 85px;
}

.ml-90 {
    margin-left: 90px;
}

.ml-95 {
    margin-left: 95px;
}

.ml-100 {
    margin-left: 100px;
}

.ml-105 {
    margin-left: 105px;
}

.ml-110 {
    margin-left: 110px;
}

.ml-115 {
    margin-left: 115px;
}

.ml-120 {
    margin-left: 120px;
}

.ml-125 {
    margin-left: 125px;
}

.ml-130 {
    margin-left: 130px;
}

.ml-135 {
    margin-left: 135px;
}

.ml-140 {
    margin-left: 140px;
}

.ml-145 {
    margin-left: 145px;
}

.ml-150 {
    margin-left: 150px;
}

.ml-155 {
    margin-left: 155px;
}

.ml-160 {
    margin-left: 160px;
}

.ml-165 {
    margin-left: 165px;
}

.ml-170 {
    margin-left: 170px;
}

.ml-175 {
    margin-left: 175px;
}

.ml-180 {
    margin-left: 180px;
}

.ml-185 {
    margin-left: 185px;
}

.ml-190 {
    margin-left: 190px;
}

.ml-195 {
    margin-left: 195px;
}

.ml-200 {
    margin-left: 200px;
}

.mr-5 {
    margin-right: 5px;
}

.mr-10 {
    margin-right: 10px;
}

.mr-15 {
    margin-right: 15px;
}

.mr-20 {
    margin-right: 20px;
}

.mr-25 {
    margin-right: 25px;
}

.mr-30 {
    margin-right: 30px;
}

.mr-35 {
    margin-right: 35px;
}

.mr-40 {
    margin-right: 40px;
}

.mr-45 {
    margin-right: 45px;
}

.mr-50 {
    margin-right: 50px;
}

.mr-55 {
    margin-right: 55px;
}

.mr-60 {
    margin-right: 60px;
}

.mr-65 {
    margin-right: 65px;
}

.mr-70 {
    margin-right: 70px;
}

.mr-75 {
    margin-right: 75px;
}

.mr-80 {
    margin-right: 80px;
}

.mr-85 {
    margin-right: 85px;
}

.mr-90 {
    margin-right: 90px;
}

.mr-95 {
    margin-right: 95px;
}

.mr-100 {
    margin-right: 100px;
}

.mr-105 {
    margin-right: 105px;
}

.mr-110 {
    margin-right: 110px;
}

.mr-115 {
    margin-right: 115px;
}

.mr-120 {
    margin-right: 120px;
}

.mr-125 {
    margin-right: 125px;
}

.mr-130 {
    margin-right: 130px;
}

.mr-135 {
    margin-right: 135px;
}

.mr-140 {
    margin-right: 140px;
}

.mr-145 {
    margin-right: 145px;
}

.mr-150 {
    margin-right: 150px;
}

.mr-155 {
    margin-right: 155px;
}

.mr-160 {
    margin-right: 160px;
}

.mr-165 {
    margin-right: 165px;
}

.mr-170 {
    margin-right: 170px;
}

.mr-175 {
    margin-right: 175px;
}

.mr-180 {
    margin-right: 180px;
}

.mr-185 {
    margin-right: 185px;
}

.mr-190 {
    margin-right: 190px;
}

.mr-195 {
    margin-right: 195px;
}

.mr-200 {
    margin-right: 200px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pr-5 {
    padding-right: 5px;
}

.pr-10 {
    padding-right: 10px;
}

.pr-15 {
    padding-right: 15px;
}

.pr-20 {
    padding-right: 20px;
}

.pr-25 {
    padding-right: 25px;
}

.pr-30 {
    padding-right: 30px;
}

.pr-35 {
    padding-right: 35px;
}

.pr-40 {
    padding-right: 40px;
}

.pr-45 {
    padding-right: 45px;
}

.pr-50 {
    padding-right: 50px;
}

.pr-55 {
    padding-right: 55px;
}

.pr-60 {
    padding-right: 60px;
}

.pr-65 {
    padding-right: 65px;
}

.pr-70 {
    padding-right: 70px;
}

.pr-75 {
    padding-right: 75px;
}

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

.pr-85 {
    padding-right: 85px;
}

.pr-90 {
    padding-right: 90px;
}

.pr-95 {
    padding-right: 95px;
}

.pr-100 {
    padding-right: 100px;
}

.pr-105 {
    padding-right: 105px;
}

.pr-110 {
    padding-right: 110px;
}

.pr-115 {
    padding-right: 115px;
}

.pr-120 {
    padding-right: 120px;
}

.pr-125 {
    padding-right: 125px;
}

.pr-130 {
    padding-right: 130px;
}

.pr-135 {
    padding-right: 135px;
}

.pr-140 {
    padding-right: 140px;
}

.pr-145 {
    padding-right: 145px;
}

.pr-150 {
    padding-right: 150px;
}

.pr-155 {
    padding-right: 155px;
}

.pr-160 {
    padding-right: 160px;
}

.pr-165 {
    padding-right: 165px;
}

.pr-170 {
    padding-right: 170px;
}

.pr-175 {
    padding-right: 175px;
}

.pr-180 {
    padding-right: 180px;
}

.pr-185 {
    padding-right: 185px;
}

.pr-190 {
    padding-right: 190px;
}

.pr-195 {
    padding-right: 195px;
}

.pr-200 {
    padding-right: 200px;
}

.container {
    padding-right: 15px;
    padding-left: 15px;
}

.row {
    --bs-gutter-x: 30px;
}
.row.g-0 {
    --bs-gutter-x: 0;
}

@media (min-width: 1400px) {
    .container {
        max-width: 1200px;
    }
    .container.container_custom-1 {
        max-width: 1450px;
    }
}
i[class^=flaticon-]:before, i[class*=" flaticon-"]:before {
    line-height: inherit;
}

/*---------------------------------------------------*/
/*          mouse cursor animation
/*---------------------------------------------------*/
.cursor {
    position: fixed;
    left: 0;
    pointer-events: none;
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
    color: var(--white);
    background-color: var(--clr-common-primary);
    text-transform: capitalize;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 999;
    opacity: 0;
    mix-blend-mode: hard-light;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.cursor.large {
    width: 180px;
    height: 180px;
    text-align: center;
    font-size: 19px;
    font-weight: 400;
}

.cursor1 {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 1px solid var(--clr-common-primary);
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: 0.15s;
    transition: 0.15s;
    z-index: 999;
    mix-blend-mode: difference;
}

@media (max-width: 1200px) {
    .cursor1 {
        display: none;
    }
}
.cursor1.hide {
    opacity: 0;
    visibility: hidden;
}

.cursor2 {
    position: fixed;
    width: 8px;
    height: 8px;
    background-color: var(--clr-common-primary);
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: 0.2s;
    transition: 0.2s;
    z-index: 999;
    mix-blend-mode: difference;
}

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

.nh_navigation div {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 20px;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    color: var(--clr-common-black);
    background-color: #fff;
    border: 1px solid rgb(242, 242, 242);
    cursor: pointer;
}

.nh_navigation div:hover {
    background: var(--clr-theme-primary);
    color: var(--clr-common-white);
    border-color: var(--clr-theme-primary);
}

.nh_pagination {
    text-align: center;
}
.nh_pagination .swiper-pagination-bullets {
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.nh_pagination .swiper-pagination-bullets .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0;
    padding: 0;
    background: #475569;
    opacity: 1;
}
.nh_pagination .swiper-pagination-bullets .swiper-pagination-bullet-active {
    background: var(--clr-theme-primary);
}
.nh_pagination_white .swiper-pagination-bullets .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.3);
}
.nh_pagination_white .swiper-pagination-bullets .swiper-pagination-bullet-active {
    background: #fff;
}

.nh_pagination_2 {
    text-align: center;
}
.nh_pagination_2 .swiper-pagination-bullets {
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.nh_pagination_2 .swiper-pagination-bullets .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0;
    padding: 0;
    background: rgba(6, 177, 110, 0.5);
    opacity: 1;
    position: relative;
    z-index: 1;
}
.nh_pagination_2 .swiper-pagination-bullets .swiper-pagination-bullet-active {
    background: var(--clr-theme-primary);
    width: 22px;
    height: 22px;
    background: transparent;
    border: 1px solid var(--clr-theme-primary);
}
.nh_pagination_2 .swiper-pagination-bullets .swiper-pagination-bullet-active::before {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    content: "";
    width: 8px;
    height: 8px;
    background-color: var(--clr-theme-primary);
    border-radius: 50%;
    z-index: 9;
}

.nh_theme-btn {
    height: 60px;
    display: inline-flex;
    align-items: center;
    padding: 0 40px;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-transform: capitalize;
    background-color: var(--clr-theme-primary);
    border-radius: 8px;
    gap: 6px;
}
.nh_theme-btn:hover {
    background-color: var(--clr-common-black);
    color: var(--clr-common-white);
}
.nh_theme-btn-white {
    background-color: #fff;
    color: rgb(15, 41, 31);
}
.nh_theme-btn-black {
    background-color: var(--clr-common-black);
    color: #fff;
}
.nh_theme-btn-black:hover {
    background-color: var(--clr-theme-primary);
    color: #fff;
}
.nh_theme-btn-transparent {
    border: 1px solid rgb(15, 41, 31);
    border-radius: 8px;
    height: 57px;
    display: inline-flex;
    padding: 0 28px;
    align-items: center;
    color: rgb(15, 41, 31);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    gap: 6px;
}
.nh_theme-btn-transparent:hover {
    background-color: var(--clr-theme-primary);
    color: #fff;
    border-color: var(--clr-theme-primary);
}
.nh_theme-btn-transparent-w {
    border-color: #fff;
    color: #fff;
}

/* Search  */
.ba-search-popup {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 99999;
    margin-top: -540px;
    transform: translateY(-110%);
    -webkit-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
    -moz-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
    -o-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
    transition: all 1500ms cubic-bezier(0.86, 0, 0.07, 1);
    -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    -moz-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    -o-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    -webkit-transition: all 0.6s linear 0s;
    -moz-transition: all 0.6s linear 0s;
    -ms-transition: all 0.6s linear 0s;
    -o-transition: all 0.6s linear 0s;
    transition: all 0.6s linear 0s;
}
.ba-search-popup::after {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 560px;
    background-image: url(../images/bg/waves-shape.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-top: 0px;
    content: "";
}
.ba-search-popup .ba-color-layer {
    position: fixed;
    content: "";
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.9);
    -webkit-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
    -moz-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
    -o-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
    transition: all 1500ms cubic-bezier(0.86, 0, 0.07, 1);
    -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    -moz-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    -o-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}

.ba-search-popup-inner {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 9999;
    transform: translate(-50%, -50%);
    width: 50%;
}
@media (max-width: 991px) {
    .ba-search-popup-inner {
        width: 70%;
    }
}
@media (max-width: 575px) {
    .ba-search-popup-inner {
        width: 85%;
    }
}
@media (max-width: 767px) {
    .ba-search-popup-inner {
        width: 70%;
    }
}
.ba-search-popup-inner form {
    position: relative;
}
.ba-search-popup-inner form input {
    width: 100%;
    height: 70px;
    border: 0;
    border-radius: 60px;
    padding: 0 20px;
    padding-right: 90px;
}
.ba-search-popup-inner form button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 70px;
    border: 0;
    border-top-right-radius: 60px;
    border-bottom-right-radius: 60px;
    background: var(--clr-theme-primary);
    color: #fff;
    font-size: 20px;
}

.search-active .ba-search-popup {
    transform: translateY(0%);
    margin-top: 0;
}

/* ///////////////////////////////////////////////////////////
02. Header CSS
/////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////
Header CSS 01 Start
/////////////////////////////////////////////////////////// */
.nh_header-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
    border-bottom: 1px solid rgba(15, 41, 31, 0.08);
}
.nh_header-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    margin-top: 10px;
}
@media (max-width: 1199px) {
    .nh_header-wrap {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}
@media (max-width: 575px) {
    .nh_header-wrap {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}
.nh_header-logo {
    width: 150px;
}
@media (max-width: 767px) {
    .nh_header-logo {
        width: 140px;
    }
}
.nh_header-logo img {
    width: 89%;
}
@media (max-width: 1199px) {
    .nh_header-menu {
        display: none;
    }
}
.nh_header-menu nav ul {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 40px;
    margin-bottom: 0;
}
.nh_header-menu nav ul .menu-has-child {
    position: relative;
    z-index: 99;
    text-align: start;
}
.nh_header-menu nav ul li a {
    color: var(--clr-body-text);
    display: block;
    color: rgb(71, 85, 105);
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 500;
    height: 81px;
    line-height: 100px;
    border-bottom: 3px solid transparent;
}
.nh_header-menu nav ul li .submenu {
    position: absolute;
    left: 0;
    top: 100%;
    background: #fff;
    width: 240px;
    opacity: 0;
    padding: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    box-shadow: 0 9px 19px rgba(0, 0, 0, 0.1);
    display: block;
}
.nh_header-menu nav ul li .submenu li {
    display: block;
    margin-right: 0;
    position: relative;
    z-index: 99;
}
.nh_header-menu nav ul li .submenu li a {
    padding: 12px 25px;
    color: var(--clr-common-black);
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    height: auto;
    line-height: 20px;
    border-bottom: 0;
}
.nh_header-menu nav ul li .submenu li .submenu {
    left: 100%;
    top: 0;
}
.nh_header-menu nav ul li .submenu li:hover > a {
    background-color: var(--clr-theme-primary);
    color: #fff;
}
.nh_header-menu nav ul li .submenu li:not(:last-child) {
    border-bottom: 1px solid #f2f2f2;
}
.nh_header-menu nav ul li:hover > .submenu {
    opacity: 1;
    visibility: visible;
}
.nh_header-menu nav ul li:hover > a {
    color: var(--clr-theme-primary);
    border-color: var(--clr-theme-primary);
}
.nh_header-action {
    display: flex;
    align-items: center;
    gap: 30px;
}
.nh_header-action-menu {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #0F291F;
    border-radius: 50%;
    font-size: 22px;
    color: #0F291F;
}
.nh_header-action-search {
    font-size: 25px;
    color: #0F291F;
}

/* ///////////////////////////////////////////////////////////
Header CSS 03 Start
/////////////////////////////////////////////////////////// */
.h3_nh_header-top {
    background-color: var(--clr-theme-primary);
    padding-top: 15px;
    padding-bottom: 15px;
}
@media (max-width: 575px) {
    .h3_nh_header-top {
        display: none;
    }
}
.h3_nh_header-contact {
    display: flex;
    align-items: center;
}
@media (max-width: 991px) {
    .h3_nh_header-contact {
        justify-content: center;
        margin-bottom: 10px;
    }
}
.h3_nh_header-contact span {
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.h3_nh_header-contact span:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    margin-right: 20px;
    padding-right: 20px;
}
.h3_nh_header-action {
    display: flex;
    align-items: center;
    justify-content: end;
}
@media (max-width: 991px) {
    .h3_nh_header-action {
        justify-content: center;
    }
}
.h3_nh_header-user span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
}
.h3_nh_header-social {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    padding-left: 20px;
    margin-left: 20px;
}
.h3_nh_header-social-list {
    display: flex;
    align-items: center;
    gap: 8px;
}
.h3_nh_header-social-list a {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    color: var(--clr-theme-primary);
    font-size: 10px;
}
.h3_nh_header-social-list a:hover {
    background: #fff;
}

/* ///////////////////////////////////////////////////////////
Header CSS 01 Start
/////////////////////////////////////////////////////////// */
.h4_nh_header-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 99;
}
.h4_nh_header-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 1199px) {
    .h4_nh_header-wrap {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}
@media (max-width: 575px) {
    .h4_nh_header-wrap {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}
@media (max-width: 1199px) {
    .h4_nh_header-menu {
        display: none;
    }
}
.h4_nh_header-menu nav ul {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 40px;
    margin-bottom: 0;
}
.h4_nh_header-menu nav ul .menu-has-child {
    position: relative;
    z-index: 99;
    text-align: start;
}
.h4_nh_header-menu nav ul li:is(.menu-has-child) > a::after {
    display: inline-block;
    font-family: "Font Awesome 6 Pro";
    content: "\f107";
    font-size: 12px;
    font-weight: 500;
    margin-left: 5px;
    color: var(--clr-theme-primary);
}
.h4_nh_header-menu nav ul li a {
    color: #fff;
    display: block;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 500;
    height: 80px;
    line-height: 80px;
}
.h4_nh_header-menu nav ul li .submenu {
    position: absolute;
    left: 0;
    top: 100%;
    background: #fff;
    width: 240px;
    opacity: 0;
    padding: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    box-shadow: 0 9px 19px rgba(0, 0, 0, 0.1);
    display: block;
}
.h4_nh_header-menu nav ul li .submenu li {
    display: block;
    margin-right: 0;
    position: relative;
    z-index: 99;
}
.h4_nh_header-menu nav ul li .submenu li a {
    padding: 12px 25px;
    color: var(--clr-common-black);
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    height: auto;
    line-height: 20px;
}
.h4_nh_header-menu nav ul li .submenu li .submenu {
    left: 100%;
    top: 0;
}
.h4_nh_header-menu nav ul li .submenu li:hover > a {
    background-color: var(--clr-theme-primary);
    color: #fff;
}
.h4_nh_header-menu nav ul li .submenu li:not(:last-child) {
    border-bottom: 1px solid #f2f2f2;
}
.h4_nh_header-menu nav ul li:hover > .submenu {
    opacity: 1;
    visibility: visible;
}
.h4_nh_header-menu nav ul li:hover > a {
    color: var(--clr-theme-primary);
}
.h4_nh_header-action {
    display: flex;
    align-items: center;
    gap: 30px;
}
.h4_nh_header-action-menu {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--clr-theme-primary);
    border-radius: 50%;
    font-size: 22px;
    color: #fff;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.h4_nh_header-action-menu:hover {
    background-color: #fff;
    color: var(--clr-theme-primary);
}
.h4_nh_header-action-search {
    font-size: 25px;
    color: #fff;
}

.h5_nh_header-top {
    background-color: var(--clr-theme-primary);
    padding-top: 13px;
    padding-bottom: 13px;
}
@media (max-width: 767px) {
    .h5_nh_header-top {
        display: none;
    }
}
.h5_nh_header-top-contact {
    display: flex;
    align-items: center;
}
@media (max-width: 1199px) {
    .h5_nh_header-top-contact {
        justify-content: center;
        margin-bottom: 10px;
    }
}
.h5_nh_header-top-contact span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    text-transform: capitalize;
}
.h5_nh_header-top-contact span:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    margin-right: 20px;
    padding-right: 20px;
}
.h5_nh_header-top-action {
    display: flex;
    align-items: center;
    justify-content: end;
}
@media (max-width: 1199px) {
    .h5_nh_header-top-action {
        justify-content: center;
    }
}
.h5_nh_header-top-user span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}
.h5_nh_header-top-language {
    position: relative;
    z-index: 9;
    padding-left: 20px;
    margin-left: 20px;
}
.h5_nh_header-top-language::after {
    position: absolute;
    left: 0;
    top: 50%;
    content: "";
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    background-color: rgba(255, 255, 255, 0.3);
}
.h5_nh_header-top-language-option.nice-select {
    border-radius: 8px;
    border: 0;
    width: 100%;
    padding: 0;
    background: transparent;
    z-index: 99;
    height: 22px;
    padding-right: 20px;
    display: flex;
    align-items: center;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    text-transform: capitalize;
}
.h5_nh_header-top-language-option.nice-select ul {
    background-color: #fff;
    width: 85px;
    z-index: 99;
    border-radius: 4px;
    border: none;
    margin-top: 7px;
    box-shadow: 0px 6px 50px 0px rgba(27, 42, 82, 0.2);
}
.h5_nh_header-top-language-option.nice-select ul li {
    color: #7F879E;
    font-size: 13px;
    font-weight: 500;
    width: 100%;
    padding: 0 15px;
    min-height: 30px;
    height: 30px;
    line-height: 30px;
}
.h5_nh_header-top-language-option.nice-select .option.selected {
    font-weight: 500;
}
.h5_nh_header-top-language-option.nice-select::after {
    display: none;
}
.h5_nh_header-top-language-option.nice-select::before {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Pro";
    content: "\f107";
    margin-top: 1px;
}
.h5_nh_header-top-language-option.nice-select.open::before {
    content: "\f106";
}
.h5_nh_header-action {
    display: flex;
    align-items: center;
    gap: 30px;
}
.h5_nh_header-action-call {
    display: flex;
    align-items: center;
    gap: 8px;
}
@media (max-width: 1399px) {
    .h5_nh_header-action-call {
        display: none;
    }
}
.h5_nh_header-action-call-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0px 8px 48px 0px rgba(0, 0, 0, 0.12);
}
.h5_nh_header-action-call-info span {
    color: rgb(133, 133, 133);
    font-size: 13px;
    font-weight: 600;
    line-height: normal;
    display: block;
    margin-bottom: 1px;
}
.h5_nh_header-action-call-info a {
    color: rgb(11, 12, 15);
    font-size: 22px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.5px;
    display: block;
}

/* ///////////////////////////////////////////////////////////
04. Hero CSS
/////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////
Hero CSS 01 Start
/////////////////////////////////////////////////////////// */


:root{
    --card-h: 420px;
    --radius: 28px;
    --pad: 48px;
}
body{ margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:#f5f6f7; }
.wrap{ max-width:1200px; margin:40px auto; padding:0 16px; }

/* Slider shell */
.hero{ position:relative; }
.hero .swiper { overflow: hidden; }
.hero__card{
    height:var(--card-h);
    border-radius:var(--radius);
    box-shadow:0 18px 50px rgba(0,0,0,.12);
    background:#fff;
    position:relative;
    isolation:isolate;
}

/* Split layout */
.hero__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    height:100%;
    border-radius:var(--radius);
    overflow:hidden;
    position:relative;
}
.hero__left{
    padding:var(--pad);
    color:#fff;
    background:#03C03C;
    position:relative;
}
.hero__right{
    background:#ffe29a; /* fallback */
    position:relative;
    display:flex; align-items:center; justify-content:center;
}
.hero__right img{
    width:100%; height:100%; object-fit:cover;
}

/* Typography */
.hero__title{
    font-weight:800; font-size:48px; line-height:1.05; margin:0 0 12px;
}
.hero__lead{
    font-weight:600; font-size:18px; opacity:.95; margin:0 0 28px;
}
.hero__btn{
    display:inline-flex; align-items:center; justify-content:center;
    height:48px; padding:0 18px; color:#fff; text-decoration:none;
    border:2px solid rgba(255,255,255,.9); border-radius:10px;
    font-weight:700; transition:.2s ease;
    background:transparent;
}
.hero__btn:hover{ transform:translateY(-2px); }

/* Pagination as pills */
.hero__pagination{
    position:absolute; left:50%; transform:translateX(-50%);
    bottom:16px; display:flex; gap:10px; z-index:5;
}
.hero__dot{
    display:inline-block; width:38px; height:8px; border-radius:999px;
    background:rgba(0,0,0,.15);
}
.hero__dot.swiper-pagination-bullet-active{
    background:var(--active,#e6007e);
    width:56px;
    transition:width .2s ease, background .2s ease;
}

/* Arrows */
.hero__nav{
    position:absolute; top:50%; transform:translateY(-50%);
    z-index:6; width:44px; height:44px; border-radius:50%;
    background:#3e3f41; color:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 24px rgba(0,0,0,.25); cursor:pointer; border:0;
}
.hero__nav--prev{ left:5px; }
.hero__nav--next{ right:5px; }
.hero__nav:focus{ outline:2px solid #fff7; outline-offset:2px; }

/* Responsive */
@media (max-width:1000px){ :root{ --card-h:380px; --pad:36px; } .hero__title{ font-size:40px; } }
@media (max-width:760px){
    :root{ --card-h:420px; --pad:24px; }
    .hero__grid{ grid-template-columns:1fr; }
    .hero__right{ order:-1; height:100%; }
    .hero__left{ height:100%; }
    .hero__title{ font-size:34px; }
    .hero__nav--prev{ left:6px; } .hero__nav--next{ right:6px; }
}











/* ===== Quick nav (4 icons) ===== */
:root{
    --quick-bg:#fff;
    --quick-radius:24px;
    --quick-shadow:0 10px 30px rgba(0,0,0,.08);
    --quick-sep:#ececf1;
    --quick-hover:#e6007e;      /* бренд-акцент */
}

.quick-nav{ margin-top:28px; }

.quick-nav__wrap{
    display:grid;
    grid-template-columns:repeat(4,1fr);   /* 4 у ряд */
    background:var(--quick-bg);
    border-radius:var(--quick-radius);
    box-shadow:var(--quick-shadow);
    overflow:hidden;
}

/* плитка */
.quick-nav__item{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px;
    padding:14px 8px;
    text-decoration:none;
    color:#222;
    position:relative;
    transition:transform .2s ease, color .2s ease;
}

/* вертикальні роздільники (desktop) */
.quick-nav__item::after{
    content:"";
    position:absolute; top:16px; bottom:16px; right:0; width:1px;
    background:var(--quick-sep);
}
.quick-nav__item:last-child::after{ display:none; }

.quick-nav__icon{
    width:44px; height:44px; display:grid; place-items:center;
    border-radius:12px; background:#f4f5f7;
}
.quick-nav__icon svg{
    width:22px; height:22px;   /* було 28px */
}

.quick-nav__label{
    font-size:14px; font-weight:600; text-align:center;
    color:#2b2b2f;
}

/* hover/focus */
.quick-nav__item:hover,
.quick-nav__item:focus-visible {
    color: #03c03c; /* акцент */
    transform: translateY(-2px);
}

.quick-nav__item:hover .quick-nav__icon,
.quick-nav__item:focus-visible .quick-nav__icon {
    background: rgba(3, 192, 60, 0.12); /* акцентний зелений з прозорістю */
}

.quick-nav__item:focus-visible {
    outline: 2px solid #0000;
    box-shadow: 0 0 0 3px rgba(3, 192, 60, 0.25) inset; /* зелений обвід */
}


/* ====== Responsive ====== */

/* планшет: трохи компактніше */
@media (max-width: 992px){
    .quick-nav__item{ padding:20px 10px; }
    .quick-nav__icon{
        width:36px; height:36px;   /* було 44px */
        border-radius:8px;
    }
    .quick-nav__icon svg{ width:26px; height:26px; }
}

/* мобілка: 2x2 + тонкі роздільники як у таблиці */
@media (max-width: 640px){
    .quick-nav__wrap{
        grid-template-columns: repeat(4,1fr); /* 4 в один ряд */
        width: 94%;
    }

    /* прибираємо бордери для таблиці */
    .quick-nav__item{
        border:0;
        padding:12px 6px;
    }
    .quick-nav__item::after{ display:none; }

    .quick-nav__icon{
        width:34px; height:34px;
    }
    .quick-nav__icon svg{ width:22px; height:22px; }

    .quick-nav__label{ font-size:12px; }

}


/* анімації off для користувачів з reduce motion */
@media (prefers-reduced-motion: reduce){
    .quick-nav__item{ transition:none; }
}


































:root{
    --accent:#03c03c;
    --radius:20px;
    --shadow:0 12px 28px rgba(0,0,0,.08);
}

.pricing{
    margin-top: 50px;
    margin-bottom: 50px;
}

.pricing__wrap{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.pricing__card{
    background:#fff;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:28px 22px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.pricing__title{
    font-size:18px;
    font-weight:700;
    margin:0 0 20px;
}

.pricing__features{
    list-style:none;
    padding:0;
    margin:0 0 20px;
    font-size:15px;
    font-weight:500;
    width:100%;
}
.pricing__features li{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
}
.pricing__features span{ margin-right:10px; }
.pricing__features select{
    border:1px solid #ccc;
    border-radius:8px;
    padding:6px 10px;
}

.pricing__price{
    font-size:17px;
    margin:10px 0;
}
.pricing__price strong{
    font-size:28px;
    font-weight:800;
    color:#000;
}

.pricing__oldprice{
    font-size:15px;
    color:#999;
    text-decoration:line-through;
    margin-bottom:20px;
}

.pricing__btn{
    display:block;
    width:100%;
    padding:14px;
    border-radius:10px;
    background:var(--accent);
    color:#fff;
    font-weight:700;
    text-decoration:none;
    transition:.2s ease;
}
.pricing__btn:hover{ opacity:.9; }

.pricing__more{
    margin-top:14px;
    font-size:14px;
    color:#666;
    text-decoration:underline;
}

.accent{ color:var(--accent); }

/* responsive */
@media(max-width:900px){
    .pricing__wrap{ grid-template-columns:1fr; }
}









:root{
    --accent:#03c03c;
    --text:#0f1424;
    --muted:#6b7280;
    --card:#fff;
    --radius:22px;
    --container:1200px;
}

/* ==== BLOK 1: Promo ==== */
.iptv-offer{
    background:#fff;
    border-radius:var(--radius);
    box-shadow:0 12px 34px rgba(0,0,0,.06);
    margin:56px auto 28px;
    max-width:var(--container);
    overflow:hidden;
    position:relative;
}
.iptv-offer::before{
    content:"";
    position:absolute; inset:0;
    background:
        radial-gradient(80% 120% at -10% 0%, rgba(3,192,60,.18) 0%, rgba(3,192,60,0) 55%) ,
        radial-gradient(70% 120% at 110% 100%, rgba(3,192,60,.14) 0%, rgba(3,192,60,0) 55%);
    pointer-events:none;
}
.iptv__inner{
    position:relative; z-index:1;
    display:grid; grid-template-columns: 1.2fr 1fr;
    gap:40px; align-items:center;
    padding:clamp(36px,6vw,72px);
}
.iptv__content h2{
    font-size:clamp(28px,3.6vw,42px);
    margin:0 0 10px; color:var(--text); letter-spacing:-.01em;
}
.iptv__content p{
    margin:0 0 18px; color:var(--muted); line-height:1.7; font-size:17px;
}
.iptv__bullets{ list-style:none; padding:0; margin:0 0 26px; }
.iptv__bullets li{
    display:flex; align-items:center; gap:10px; margin-bottom:10px; color:var(--text);
}
.iptv__bullets .i{ width:22px; height:22px; color:var(--accent); flex:0 0 22px; }
.btn-accent{
    display:inline-block; background:var(--accent); color:#fff; font-weight:700;
    padding:14px 26px; border-radius:14px; text-decoration:none;
    transition:transform .2s ease, filter .2s ease;
}
.btn-accent:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.iptv__image img{
    width:100%; border-radius:16px; box-shadow:0 14px 30px rgba(0,0,0,.10);
}

/* ==== BLOK 2: Features grid ==== */
.iptv-features{ padding: 12px 16px 56px; }
.iptv__container{ max-width:var(--container); margin:0 auto; }
.iptv-features__head{ text-align:center; margin-bottom:22px; }
.iptv-features__head h3{
    margin:0 0 6px; font-size:clamp(22px,3vw,32px); color:var(--text);
}
.iptv-features__head p{ margin:0; color:var(--muted); }

.iptv-grid{
    display:grid; gap:18px;
    grid-template-columns: repeat(3,1fr);
}
@media (max-width: 980px){
    .iptv__inner{ grid-template-columns:1fr; text-align:center; }
    .iptv__image{ order:-1; }
    .iptv-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px){
    .iptv-grid{ grid-template-columns: 1fr; }
}

.feat{
    background:var(--card);
    border-radius:16px;
    padding:18px 18px 16px;
    box-shadow:0 10px 26px rgba(0,0,0,.05);
    transition:transform .15s ease, box-shadow .15s ease;
}
.feat:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.08); }
.feat__icon{
    width:48px; height:48px; border-radius:12px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    display:grid; place-items:center; margin-bottom:10px; color:var(--accent);
}
.feat__icon .i{ width:28px; height:28px; }
.feat h4{ margin:0 0 6px; font-size:18px; color:var(--text); }
.feat p{ margin:0; color:var(--muted); line-height:1.55; font-size:15.5px; }

.iptv-features__cta{
    text-align:center; margin-top:20px;
}
.btn-outline{
    display:inline-block; border:2px solid var(--accent); color:var(--accent);
    padding:12px 22px; border-radius:12px; text-decoration:none; font-weight:700;
    transition:background .15s ease, color .15s ease, transform .15s ease;
    margin-bottom: 100px;
}
.btn-outline:hover{ background:var(--accent); color:#fff; transform:translateY(-2px); }














:root{
    --accent:#03c03c;
    --text:#0f1424;
    --muted:#6b7280;
    --card:#fff;
    --soft:#f5f7fb;
    --radius:22px;
    --container:1200px; /* піджени під твій хедер */
}

/* ===== Hero ===== */
.about-hero{
    padding: clamp(40px,6vw,80px) 16px 10px;
    background: linear-gradient(180deg,#fff 0%, #f9fafb 100%);
}
.about-hero__container{
    max-width: var(--container); margin:0 auto;
    display:grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px,4vw,60px);
    align-items:center;
    padding-bottom: 90px;
}
.about-hero .kicker{
    display:inline-block; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color: var(--accent); font-size:12px; margin-bottom:8px;
}
.about-hero h1{
    margin:0 0 10px; font-size: clamp(28px,4vw,44px); letter-spacing:-.01em;
}
.about-hero p{
    margin:0; color:var(--muted); line-height:1.7; font-size:17px;
}
.about-hero__meta{ display:flex; gap:18px; flex-wrap:wrap; margin-top:18px; }
.meta-item{ display:flex; align-items:center; gap:8px; background:#fff; border-radius:12px; padding:8px 12px; box-shadow:0 10px 24px rgba(0,0,0,.05);}
.meta-item .i{ width:20px; height:20px; color:var(--accent); }
.about-hero__image img{ width:100%; border-radius:16px; box-shadow:0 16px 40px rgba(0,0,0,.08); }

@media (max-width: 980px){
    .about-hero__container{ grid-template-columns:1fr; }
}

/* ===== Reasons ===== */
.reasons{ padding: 26px 16px 60px; }
.reasons__container{ max-width: var(--container); margin:0 auto; }
.reasons h2{ margin:0 0 16px; font-size: clamp(24px,3.4vw,36px); }
.reasons__grid{
    display:grid; gap: clamp(16px,2vw,24px);
    grid-template-columns: repeat(3,1fr);
}
@media (max-width: 980px){ .reasons__grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .reasons__grid{ grid-template-columns: 1fr; } }

.reason{
    background:#fff; border-radius:16px; padding:18px 18px 16px;
    box-shadow:0 12px 30px rgba(0,0,0,.06); transition:transform .15s ease, box-shadow .15s ease;
}
.reason:hover{ transform:translateY(-3px); box-shadow:0 18px 42px rgba(0,0,0,.09); }
.reason__icon{ width:56px; height:56px; border-radius:12px; display:grid; place-items:center;
    background: color-mix(in srgb, var(--accent) 14%, transparent); margin-bottom:10px; color:var(--accent);}
.reason__icon .i{ width:32px; height:32px; }
.reason__icon .i--fill{ fill: var(--accent); }
.reason h3{ margin:0 0 6px; font-size:18px; }
.reason p{ margin:0; color:var(--muted); line-height:1.55; }

/* links to docs */
.reasons__links{ margin-top:16px; display:flex; gap:12px; flex-wrap:wrap; }
.link-doc{
    display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px;
    background:#fff; color:var(--text); text-decoration:none; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.link-doc:hover{ color:var(--accent); }

/* ===== About + contact ===== */
.about-block{ padding: 20px 16px 60px; background:#fff;
    padding-bottom: 180px}
.about-block__container{ max-width: var(--container); margin:0 auto; display:grid; grid-template-columns: 1.3fr .7fr; gap: clamp(24px,4vw,48px); }
@media (max-width: 980px){ .about-block__container{ grid-template-columns:1fr; } }

.about-card{
    background: var(--soft); border-radius:16px; padding: clamp(18px,3vw,28px);
    box-shadow: 0 10px 24px rgba(0,0,0,.05);
}
.about-card h2{ margin:0 0 8px; font-size: clamp(22px,3.2vw,30px); }
.about-card p{ margin:0 0 12px; color:var(--muted); line-height:1.7; }
.checklist{ list-style:none; padding:0; margin:0; }
.checklist li{ position:relative; padding-left:26px; margin:8px 0; }
.checklist li::before{
    content:""; position:absolute; left:0; top:.45em; width:16px; height:16px; border-radius:6px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.about-info{ display:grid; gap:16px; }
.info-box{
    background:#fff; border-radius:16px; padding:18px;
    box-shadow: 0 10px 26px rgba(0,0,0,.05);
}
.info-box h3{ margin:0 0 8px; font-size:18px; }
.info-box p{ margin:0 0 10px; color:var(--text); }
.info-box a{ color: var(--accent); text-decoration:none; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ background:#eef7f0; color:#145a2a; border-radius:999px; padding:6px 10px; font-size:12px; }
.refs{ padding-left: 18px; margin: 0 0 12px; color: var(--muted); }

/* ===== CTA bar ===== */
.cta-bar{ padding: 28px 16px 64px; background: linear-gradient(180deg,#fff 0%, #f8faf9 100%); }
.cta-bar__container{
    max-width: var(--container); margin:0 auto; background:#fff; border-radius:18px;
    padding: clamp(18px,3.2vw,28px); box-shadow:0 16px 40px rgba(0,0,0,.08);
    display:grid; grid-template-columns: 1.2fr 1fr; gap:20px; align-items:center;
}
@media (max-width: 880px){ .cta-bar__container{ grid-template-columns:1fr; } }
.cta-bar__text h3{ margin:0 0 6px; font-size: clamp(20px,3vw,28px); }
.cta-bar__text p{ margin:0; color:var(--muted); }
.cta-form{ display:grid; grid-template-columns: 1fr 1fr auto; gap:12px; }
@media (max-width: 560px){ .cta-form{ grid-template-columns: 1fr; } }
.cta-form input{
    height:52px; border:1px solid #e7ebf0; border-radius:12px; padding:0 14px; font: inherit;
}
.btn-accent{
    height:52px; padding:0 22px; border:0; border-radius:12px; background:var(--accent); color:#fff; font-weight:700; cursor:pointer;
    transition: transform .15s ease, filter .15s ease;
}
.btn-accent:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.btn-outline{
    display:inline-block; border:2px solid var(--accent); color:var(--accent); padding:10px 16px; border-radius:12px; text-decoration:none; font-weight:700;
}
.btn-outline:hover{ background:var(--accent); color:#fff; }


















/* ===== variables */
:root{
    --accent: #03c03c;
    --text: #121625;
    --muted: #6b7280;
    --card: #fff;
    --shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* ===== layout */
.why-internet{
    padding: clamp(40px, 6vw, 96px) 16px; /* не впирається в боки */
    background: linear-gradient(180deg,#fff 0%, #f9fafb 100%);
    color: var(--text);
}
.why__container{
    max-width: 1180px;
    margin: 0 auto;
}
.why__title{
    font-size: clamp(28px, 4.2vw, 44px);
    line-height: 1.14;
    letter-spacing: -.01em;
    margin: 0 0 clamp(28px, 4vw, 48px);
}

/* ===== grid */
.why__grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: clamp(18px, 2vw, 32px);
}
@media (max-width: 900px){
    .why__grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
    .why__grid{ grid-template-columns: 1fr; }
}

/* ===== cards */
.why__item{
    background: var(--card);
    border-radius: 16px;
    padding: 24px 22px;
    box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}
.why__item:hover,
.why__item:focus-within{
    transform: translateY(-3px);
    box-shadow: 0 16px 42px rgba(0,0,0,.10);
}

/* ===== icon */
.why__icon{
    width: 64px; height: 64px;
    border-radius: 14px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    margin-bottom: 16px;
}
.why__icon .i{
    width: 40px; height: 40px;
    color: var(--accent);
}
.why__icon .i--fill{ fill: var(--accent); }

/* ===== text */
.why__item-title{
    margin: 0 0 8px;
    font-size: clamp(16px, 2.2vw, 20px);
    font-weight: 700;
}
.why__item-text{
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
    font-size: 15.5px;
}

/* ===== focus (a11y) */
.why__item:focus-within{
    outline: 2px solid #0000;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent) inset, var(--shadow);
}





















.nh_hero-area {
    background: linear-gradient(180deg, rgba(6, 177, 110, 0.09), rgba(6, 177, 110, 0) 100%);
    min-height: 600px;
    padding-top: 200px;
    padding-bottom: 310px;
}
.nh_hero-content-img {
    margin-bottom: 25px;
}
.nh_hero-content-title {
    font-family: "Manrope", sans-serif;
    font-size: 80px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -4px;
    color: var(--clr-body-heading);
    margin-bottom: 20px;
}
@media (max-width: 1399px) {
    .nh_hero-content-title {
        font-size: 75px;
    }
}
@media (max-width: 991px) {
    .nh_hero-content-title {
        font-size: 65px;
    }
}
@media (max-width: 767px) {
    .nh_hero-content-title {
        font-size: 55px;
    }
}
@media (max-width: 480px) {
    .nh_hero-content-title {
        font-size: 42px;
    }
}
.nh_hero-content-title span {
    color: var(--clr-theme-primary);
}
.nh_hero-content-text {
    color: rgb(133, 133, 133);
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 42px;
}
@media (max-width: 991px) {
    .nh_hero-content-text br {
        display: none;
    }
}
@media (max-width: 767px) {
    .nh_hero-content-text {
        font-size: 16px;
    }
}
.nh_hero-content-form {
    max-width: 805px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 1199px) {
    .nh_hero-content-form {
        max-width: 700px;
    }
}
@media (max-width: 575px) {
    .nh_hero-content-form {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 20px;
    }
}
.nh_hero-content-form-input {
    width: 100%;
    border: 1px solid rgb(242, 242, 242);
    border-radius: 8px;
    background: rgb(255, 255, 255);
    height: 60px;
    line-height: 60px;
    text-align: left;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 575px) {
    .nh_hero-content-form-input {
        padding: 0 20px;
    }
}
.nh_hero-content-form-input input {
    border: none;
    height: 40px;
    background: transparent;
    width: 100%;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    color: rgb(15, 41, 31);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    padding: 0;
    padding-right: 20px;
}
.nh_hero-content-form-input input::-webkit-input-placeholder {
    color: rgba(15, 41, 31, 0.5);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}
.nh_hero-content-form-input input:-moz-placeholder {
    color: rgba(15, 41, 31, 0.5);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}
.nh_hero-content-form-input input::-moz-placeholder {
    color: rgba(15, 41, 31, 0.5);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}
.nh_hero-content-form-input input:-ms-input-placeholder {
    color: rgba(15, 41, 31, 0.5);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}
.nh_hero-content-form-input select {
    border: none;
    background: transparent;
    color: rgb(6, 177, 110);
    font-family: Manrope;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    padding: 0;
    padding-left: 30px;
    height: 40px;
}
.nh_hero-content-form-button {
    background: var(--clr-theme-primary);
    border: none;
    color: #fff;
    height: 60px;
    border-radius: 8px;
    color: rgb(255, 255, 255);
    font-family: Manrope;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-transform: capitalize;
    padding: 0 30px;
    flex-shrink: 0;
}
.nh_hero-content-form-option.nice-select {
    border-radius: 8px;
    border: 0;
    width: 100%;
    width: auto;
    padding: 0;
    background: transparent;
    z-index: 99;
    height: 22px;
    padding-right: 20px;
    display: flex;
    align-items: center;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    text-transform: capitalize;
    border: none;
    background: transparent;
    color: rgb(6, 177, 110);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    margin-left: 30px;
    height: 40px;
}
.nh_hero-content-form-option.nice-select ul {
    background-color: #fff;
    width: auto;
    z-index: 99;
    border-radius: 4px;
    border: none;
    margin-top: 7px;
    box-shadow: 0px 6px 50px 0px rgba(27, 42, 82, 0.2);
}
.nh_hero-content-form-option.nice-select ul li {
    color: #7F879E;
    font-size: 13px;
    font-weight: 500;
    width: 100%;
    padding: 0 20px;
    min-height: 30px;
    height: 30px;
    line-height: 30px;
}
.nh_hero-content-form-option.nice-select .option.selected {
    font-weight: 500;
}
.nh_hero-content-form-option.nice-select::after {
    display: none;
}
.nh_hero-content-form-option.nice-select::before {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Pro";
    content: "\f107";
    margin-top: 2px;
}
.nh_hero-content-form-option.nice-select.open::before {
    content: "\f106";
}

/* ///////////////////////////////////////////////////////////
Hero CSS 02 Start
/////////////////////////////////////////////////////////// */
.h2_nh_hero-area {
    padding: 265px 0 160px;
    min-height: 600px;
    background: linear-gradient(180deg, rgb(247, 249, 251), rgba(247, 249, 251, 0) 100%);
}
.h2_nh_hero-content-subtitle {
    border-radius: 4px;
    background: var(--clr-theme-primary-soft);
    height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    color: var(--clr-theme-primary);
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 25px;
}
.h2_nh_hero-content-title {
    color: rgb(11, 12, 15);
    font-size: 72px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -4px;
    margin-bottom: 20px;
}
@media (max-width: 1399px) {
    .h2_nh_hero-content-title {
        font-size: 65px;
    }
}
@media (max-width: 1199px) {
    .h2_nh_hero-content-title {
        font-size: 58px;
        letter-spacing: -2px;
    }
}
@media (max-width: 480px) {
    .h2_nh_hero-content-title {
        line-height: 1.2;
        font-size: 40px;
    }
}
.h2_nh_hero-content p {
    color: rgb(71, 85, 105);
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 32px;
}
@media (max-width: 480px) {
    .h2_nh_hero-content p {
        font-size: 16px;
    }
}
.h2_nh_hero-img {
    position: relative;
    z-index: 1;
}
@media (max-width: 1199px) {
    .h2_nh_hero-img {
        margin-top: 80px;
    }
}
.h2_nh_hero-img img {
    width: 100%;
}
.h2_nh_hero-img-content {
    background: #fff;
    border-radius: 15px;
    position: absolute;
    left: 0;
    top: -48px;
    padding: 34px 28px 34px;
}
.h2_nh_hero-circle {
    width: 130px;
    height: 130px;
    transform: rotate(90deg);
}
.h2_nh_hero-counter {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.h2_nh_hero-counter h2 {
    color: rgb(6, 177, 110);
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -2px;
    text-transform: capitalize;
    margin-bottom: 7px;
}
.h2_nh_hero-counter span {
    color: rgba(0, 0, 0, 0.7);
    font-size: 13px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: 0.2px;
    text-transform: capitalize;
    display: block;
}

/* ///////////////////////////////////////////////////////////
Hero CSS 03 Start
/////////////////////////////////////////////////////////// */
.h3_nh_hero-area {
    min-height: 600px;
    padding-top: 230px;
}
.h3_nh_hero-content {
    padding-bottom: 100px;
}
.h3_nh_hero-content-subtitle {
    box-sizing: border-box;
    border: 1px solid rgba(6, 177, 110, 0.1);
    border-radius: 4px;
    color: rgb(6, 177, 110);
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 0 15px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    margin-bottom: 52px;
}
@media (max-width: 991px) {
    .h3_nh_hero-content-subtitle {
        margin-bottom: 30px;
    }
}
.h3_nh_hero-content-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 21px;
}
.h3_nh_hero-content-title span {
    color: rgb(11, 12, 15);
    font-size: 80px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 1;
    width: max-content;
    margin-bottom: 10px;
}
@media (max-width: 1199px) {
    .h3_nh_hero-content-title span {
        font-size: 65px;
    }
}
@media (max-width: 767px) {
    .h3_nh_hero-content-title span {
        font-size: 50px;
    }
}
@media (max-width: 575px) {
    .h3_nh_hero-content-title span {
        font-size: 45px;
    }
}
@media (max-width: 480px) {
    .h3_nh_hero-content-title span {
        font-size: 40px;
        display: none;
    }
}
.h3_nh_hero-content-title span:last-child {
    margin-bottom: 0;
}
.h3_nh_hero-content-title-small {
    display: none !important;
}
@media (max-width: 480px) {
    .h3_nh_hero-content-title-small {
        display: block !important;
        width: auto !important;
        line-height: 1.3 !important;
    }
}
.h3_nh_hero-content-title-link {
    position: relative;
    z-index: 1;
    height: 72px;
    width: 174px;
    border-radius: 50px;
}
@media (max-width: 991px) {
    .h3_nh_hero-content-title-link {
        display: none;
    }
}
.h3_nh_hero-content-title-link i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    color: #fff;
}
.h3_nh_hero-content-title-img {
    height: 72px;
}
@media (max-width: 991px) {
    .h3_nh_hero-content-title-img {
        display: none;
    }
}
.h3_nh_hero-content-title-shape {
    position: absolute;
    right: -20px;
    top: -10px;
}
@media (max-width: 991px) {
    .h3_nh_hero-content-title-shape {
        display: none;
    }
}
.h3_nh_hero-content-text {
    color: rgb(133, 133, 133);
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 42px;
}
@media (max-width: 991px) {
    .h3_nh_hero-content-text {
        font-size: 16px;
        line-height: 26px;
    }
    .h3_nh_hero-content-text br {
        display: none;
    }
}
.h3_nh_hero-content-form {
    max-width: 805px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 1199px) {
    .h3_nh_hero-content-form {
        max-width: 700px;
    }
}
@media (max-width: 575px) {
    .h3_nh_hero-content-form {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 20px;
    }
}
.h3_nh_hero-content-form-input {
    width: 100%;
    border: 1px solid rgb(242, 242, 242);
    border-radius: 8px;
    background: rgb(255, 255, 255);
    height: 60px;
    line-height: 60px;
    text-align: left;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 575px) {
    .h3_nh_hero-content-form-input {
        padding: 0 20px;
    }
}
.h3_nh_hero-content-form-input input {
    border: none;
    height: 40px;
    background: transparent;
    width: 100%;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    color: rgb(15, 41, 31);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    padding: 0;
    padding-right: 20px;
}
.h3_nh_hero-content-form-input input::-webkit-input-placeholder {
    color: rgba(15, 41, 31, 0.5);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}
.h3_nh_hero-content-form-input input:-moz-placeholder {
    color: rgba(15, 41, 31, 0.5);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}
.h3_nh_hero-content-form-input input::-moz-placeholder {
    color: rgba(15, 41, 31, 0.5);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}
.h3_nh_hero-content-form-input input:-ms-input-placeholder {
    color: rgba(15, 41, 31, 0.5);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}
.h3_nh_hero-content-form-input select {
    border: none;
    background: transparent;
    color: rgb(6, 177, 110);
    font-family: Manrope;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    padding: 0;
    padding-left: 30px;
    height: 40px;
}
.h3_nh_hero-content-form-button {
    background: var(--clr-theme-primary);
    border: none;
    color: #fff;
    height: 60px;
    border-radius: 8px;
    color: rgb(255, 255, 255);
    font-family: Manrope;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-transform: capitalize;
    padding: 0 30px;
    flex-shrink: 0;
}
.h3_nh_hero-content-form-option.nice-select {
    border-radius: 8px;
    border: 0;
    width: auto;
    padding: 0;
    z-index: 99;
    padding-right: 20px;
    display: flex;
    align-items: center;
    text-transform: capitalize;
    border: none;
    background: transparent;
    color: rgb(6, 177, 110);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    margin-left: 30px;
    height: 40px;
}
.h3_nh_hero-content-form-option.nice-select ul {
    background-color: #fff;
    width: auto;
    z-index: 99;
    border-radius: 4px;
    border: none;
    margin-top: 7px;
    box-shadow: 0px 6px 50px 0px rgba(27, 42, 82, 0.2);
}
.h3_nh_hero-content-form-option.nice-select ul li {
    color: #7F879E;
    font-size: 13px;
    font-weight: 500;
    width: 100%;
    padding: 0 20px;
    min-height: 30px;
    height: 30px;
    line-height: 30px;
}
.h3_nh_hero-content-form-option.nice-select .option.selected {
    font-weight: 500;
}
.h3_nh_hero-content-form-option.nice-select::after {
    display: none;
}
.h3_nh_hero-content-form-option.nice-select::before {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Pro";
    content: "\f107";
    margin-top: 2px;
}
.h3_nh_hero-content-form-option.nice-select.open::before {
    content: "\f106";
}

/* ///////////////////////////////////////////////////////////
Hero CSS 01 Start
/////////////////////////////////////////////////////////// */
.h4_nh_hero-area {
    position: relative;
    z-index: 1;
}
.h4_nh_hero-single {
    min-height: 600px;
    padding-top: 220px;
    padding-bottom: 280px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    z-index: 1;
}
.h4_nh_hero-single::before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(15, 41, 31, 0.8);
    z-index: -1;
}
.h4_nh_hero-content-img {
    margin-bottom: 25px;
}
.h4_nh_hero-content-title {
    margin-bottom: 23px;
}
.h4_nh_hero-content-title span {
    color: #fff;
    font-size: 80px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -1px;
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
    display: block;
}
@media (max-width: 1199px) {
    .h4_nh_hero-content-title span {
        font-size: 65px;
    }
}
@media (max-width: 991px) {
    .h4_nh_hero-content-title span {
        font-size: 60px;
    }
    .h4_nh_hero-content-title span br {
        display: none;
    }
}
@media (max-width: 575px) {
    .h4_nh_hero-content-title span {
        font-size: 55px;
    }
}
@media (max-width: 480px) {
    .h4_nh_hero-content-title span {
        font-size: 40px;
    }
}
.h4_nh_hero-content-title span:last-child {
    margin-bottom: 0;
}
.h4_nh_hero-content-title-link {
    position: relative;
    z-index: 1;
    height: 72px;
    width: 174px;
    border-radius: 50px;
    border: 2px solid var(--clr-theme-primary);
    display: inline-block;
}
@media (max-width: 991px) {
    .h4_nh_hero-content-title-link {
        display: none;
    }
}
.h4_nh_hero-content-title-link i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    color: #fff;
}
.h4_nh_hero-content-title-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.h4_nh_hero-content-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 37px;
}
@media (max-width: 991px) {
    .h4_nh_hero-content-text br {
        display: none;
    }
}
@media (max-width: 575px) {
    .h4_nh_hero-content-text {
        font-size: 16px;
    }
}
.h4_nh_hero-content-form {
    max-width: 805px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 1199px) {
    .h4_nh_hero-content-form {
        max-width: 700px;
    }
}
@media (max-width: 575px) {
    .h4_nh_hero-content-form {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 20px;
    }
}
.h4_nh_hero-content-form-input {
    width: 100%;
    border: 1px solid rgb(242, 242, 242);
    border-radius: 8px;
    background: rgb(255, 255, 255);
    height: 60px;
    line-height: 60px;
    text-align: left;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 575px) {
    .h4_nh_hero-content-form-input {
        padding: 0 20px;
    }
}
.h4_nh_hero-content-form-input input {
    border: none;
    height: 40px;
    background: transparent;
    width: 100%;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    color: rgb(15, 41, 31);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    padding: 0;
    padding-right: 20px;
}
.h4_nh_hero-content-form-input input::-webkit-input-placeholder {
    color: rgba(15, 41, 31, 0.5);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}
.h4_nh_hero-content-form-input input:-moz-placeholder {
    color: rgba(15, 41, 31, 0.5);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}
.h4_nh_hero-content-form-input input::-moz-placeholder {
    color: rgba(15, 41, 31, 0.5);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}
.h4_nh_hero-content-form-input input:-ms-input-placeholder {
    color: rgba(15, 41, 31, 0.5);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}
.h4_nh_hero-content-form-input select {
    border: none;
    background: transparent;
    color: rgb(6, 177, 110);
    font-family: Manrope;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    padding: 0;
    padding-left: 30px;
    height: 40px;
}
.h4_nh_hero-content-form-button {
    background: var(--clr-theme-primary);
    border: none;
    color: #fff;
    height: 60px;
    border-radius: 8px;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-transform: capitalize;
    padding: 0 30px;
    flex-shrink: 0;
}
.h4_nh_hero-content-form-option.nice-select {
    border-radius: 8px;
    border: 0;
    width: auto;
    padding: 0;
    background: transparent;
    z-index: 99;
    padding-right: 20px;
    display: flex;
    align-items: center;
    text-transform: capitalize;
    background: transparent;
    color: rgb(6, 177, 110);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    margin-left: 30px;
    height: 40px;
}
.h4_nh_hero-content-form-option.nice-select ul {
    background-color: #fff;
    width: auto;
    z-index: 99;
    border-radius: 4px;
    border: none;
    margin-top: 7px;
    box-shadow: 0px 6px 50px 0px rgba(27, 42, 82, 0.2);
}
.h4_nh_hero-content-form-option.nice-select ul li {
    color: #7F879E;
    font-size: 13px;
    font-weight: 500;
    width: 100%;
    padding: 0 20px;
    min-height: 30px;
    height: 30px;
    line-height: 30px;
}
.h4_nh_hero-content-form-option.nice-select .option.selected {
    font-weight: 500;
}
.h4_nh_hero-content-form-option.nice-select::after {
    display: none;
}
.h4_nh_hero-content-form-option.nice-select::before {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Pro";
    content: "\f107";
    margin-top: 2px;
}
.h4_nh_hero-content-form-option.nice-select.open::before {
    content: "\f106";
}

.h4_nh_hero-social {
    display: flex;
    justify-content: flex-start;
    align-items: start;
    position: absolute;
    left: 110px;
    top: 50%;
    transform: translateY(-50%);
}
@media (max-width: 1399px) {
    .h4_nh_hero-social {
        left: 45px;
    }
}
@media (max-width: 991px) {
    .h4_nh_hero-social {
        display: none;
    }
}
.h4_nh_hero-social .inner_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.h4_nh_hero-social span {
    writing-mode: sideways-lr;
    color: rgba(255, 255, 255, 0.5);
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    display: block;
}
.h4_nh_hero-social a {
    width: 31px;
    height: 31px;
    background: rgba(255, 255, 255, 0.5);
    color: var(--clr-common-black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.h4_nh_hero-social a:hover {
    background-color: var(--clr-theme-primary);
}

.h4_nh_nav {
    position: absolute;
    right: 100px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
}
@media (max-width: 1399px) {
    .h4_nh_nav {
        right: 45px;
    }
}
@media (max-width: 991px) {
    .h4_nh_nav {
        right: 50%;
        transform: translateX(50%);
        top: auto;
        bottom: 94px;
    }
}
.h4_nh_nav .nh_navigation {
    flex-direction: column;
}
@media (max-width: 991px) {
    .h4_nh_nav .nh_navigation {
        flex-direction: row;
    }
}
.h4_nh_nav .nh_navigation div {
    border-color: rgba(255, 255, 255, 0.2);
    background-color: transparent;
    color: #fff;
}
.h4_nh_nav .nh_navigation div:hover {
    background-color: var(--clr-theme-primary);
    border-color: var(--clr-theme-primary);
}

.h5_nh_hero-single {
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 600px;
    padding-top: 170px;
    padding-bottom: 225px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
@media (max-width: 767px) {
    .h5_nh_hero-single {
        padding-bottom: 170px;
    }
}
.h5_nh_hero-single::before {
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(90deg, rgb(11, 12, 15) 36.094%, rgba(11, 12, 15, 0) 64.925%);
    content: "";
    width: 100%;
    height: 100%;
    z-index: -1;
}
.h5_nh_hero-single::after {
    position: absolute;
    left: 210px;
    bottom: -105px;
    content: "";
    width: 434px;
    height: 434px;
    border-radius: 50%;
    filter: blur(490px);
    background: rgb(6, 177, 110);
    z-index: -1;
}
.h5_nh_hero-content-subtitle {
    color: rgb(6, 177, 110);
    font-family: Manrope;
    font-size: 14px;
    font-weight: 600;
    line-height: 52px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 1px dashed var(--clr-theme-primary);
    border-radius: 44px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    margin-bottom: 15px;
}
.h5_nh_hero-content-title {
    color: #fff;
    font-size: 72px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 20px;
}
@media (max-width: 1199px) {
    .h5_nh_hero-content-title {
        font-size: 65px;
    }
}
@media (max-width: 767px) {
    .h5_nh_hero-content-title {
        font-size: 55px;
    }
}
@media (max-width: 575px) {
    .h5_nh_hero-content-title {
        font-size: 50px;
    }
}
@media (max-width: 480px) {
    .h5_nh_hero-content-title {
        font-size: 38px;
    }
}
.h5_nh_hero-content-title span {
    color: var(--clr-theme-primary);
}
.h5_nh_hero-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 32px;
}
@media (max-width: 767px) {
    .h5_nh_hero-content p br {
        display: none;
    }
}
.h5_nh_hero-social {
    position: absolute;
    left: 95px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
@media (max-width: 1599px) {
    .h5_nh_hero-social {
        display: none;
    }
}
.h5_nh_hero-social a {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.h5_nh_hero-social a:hover {
    background: var(--clr-theme-primary);
    border-color: var(--clr-theme-primary);
}
.h5_nh_hero-info {
    position: absolute;
    right: 16%;
    bottom: 100px;
    background: var(--clr-common-black);
    display: flex;
    align-items: center;
    padding: 16px;
    border-radius: 68px;
    gap: 12px;
    padding-right: 30px;
}
@media (max-width: 1199px) {
    .h5_nh_hero-info {
        right: 15%;
    }
}
@media (max-width: 991px) {
    .h5_nh_hero-info {
        right: 5%;
    }
}
@media (max-width: 767px) {
    .h5_nh_hero-info {
        display: none;
    }
}
.h5_nh_hero-info-img {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}
.h5_nh_hero-info-img-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    color: #fff;
}
.h5_nh_hero-info-img-link:hover {
    color: #fff;
}
.h5_nh_hero-info-content h4 {
    color: rgb(255, 255, 255);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -1px;
    margin-bottom: 8px;
}
.h5_nh_hero-info-content span {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    display: flex;
    align-items: center;
    gap: 10px;
}
.h5_nh_hero-info-content span i {
    color: #FFB800;
}
.h5_nh_hero-info-shape {
    position: absolute;
    left: -50px;
    top: -79px;
}

.h5_nh_service-item {
    position: relative;
    z-index: 1;
    cursor: pointer;
}
.h5_nh_service-img {
    position: relative;
    z-index: 1;
}
.h5_nh_service-img img {
    width: 100%;
}
.h5_nh_service-img::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(21, 14, 50, 0.7), rgba(11, 12, 15, 0.7) 0.01%, rgba(6, 177, 110, 0.7) 100%);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.h5_nh_service-img-content {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    padding: 0 20px 40px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.h5_nh_service-img-content-icon {
    width: 56px;
    height: 56px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
    margin-left: auto;
    margin-right: auto;
}
.h5_nh_service-img-content-info h5 {
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -1px;
    text-align: center;
    margin-bottom: 15px;
}
.h5_nh_service-img-content-info p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 0;
}
.h5_nh_service-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -41px;
    z-index: 1;
    padding-right: 20px;
    padding-left: 20px;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.h5_nh_service-content-icon {
    width: 56px;
    height: 56px;
    background-color: var(--clr-common-black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: -28px;
    z-index: 9;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
.h5_nh_service-content-info {
    border-radius: 8px;
    box-shadow: 0px 8px 48px 0px rgba(0, 0, 0, 0.12);
    background: rgb(255, 255, 255);
    z-index: 9;
    padding: 45px 20px 20px;
}
.h5_nh_service-content-title {
    color: rgb(11, 12, 15);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    text-align: center;
    margin-bottom: 0;
}

.h5_nh_service-item:hover .h5_nh_service-img::before {
    opacity: 1;
    visibility: visible;
}
.h5_nh_service-item:hover .h5_nh_service-img-content {
    opacity: 1;
    visibility: visible;
}
.h5_nh_service-item:hover .h5_nh_service-content {
    bottom: 60px;
    opacity: 0;
    visibility: hidden;
}

/* ///////////////////////////////////////////////////////////
02. video CSS
/////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////
Header CSS o1 Start
/////////////////////////////////////////////////////////// */
.nh_video-area {
    margin-top: -210px;
    position: relative;
    z-index: 1;
}
.nh_video-wrap {
    position: relative;
    z-index: 1;
}
.nh_video-btn {
    position: absolute;
    left: 50%;
    top: 47%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 29px;
    color: var(--clr-theme-primary);
}
@media (max-width: 575px) {
    .nh_video-btn {
        width: 60px;
        height: 60px;
        font-size: 20px;
    }
}

/* ///////////////////////////////////////////////////////////
02. brand CSS
/////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////
Header CSS o1 Start
/////////////////////////////////////////////////////////// */
.nh_brand-wrap {
    display: flex;
    align-items: center;
}
.nh_brand-title {
    width: 100%;
    flex-shrink: 0;
    max-width: 250px;
}
@media (max-width: 1199px) {
    .nh_brand-title {
        max-width: 200px;
    }
}
@media (max-width: 991px) {
    .nh_brand-title {
        max-width: 180px;
    }
}
.nh_brand-title p {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--clr-theme-primary);
}
.nh_brand-content {
    flex-shrink: 0;
    width: calc(100% - 250px);
}
@media (max-width: 1199px) {
    .nh_brand-content {
        width: calc(100% - 200px);
    }
}
@media (max-width: 991px) {
    .nh_brand-content {
        width: calc(100% - 180px);
    }
}

/* ///////////////////////////////////////////////////////////
Header CSS 02 Start
/////////////////////////////////////////////////////////// */
.h2_nh_brand-area {
    margin-top: -180px;
}
.h2_nh_brand-area.inner_nh_brand-area {
    margin-top: -145px;
}
.h2_nh_brand-wrap {
    border-radius: 12px;
    box-shadow: 0px 8px 40px 0px rgba(11, 12, 15, 0.08);
    background: rgb(255, 255, 255);
    padding-top: 93px;
    padding-bottom: 100px;
}
.h2_nh_brand-item {
    display: flex;
    align-items: center;
    justify-content: center;
}
.h2_nh_brand-title {
    color: rgb(6, 177, 110);
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 44px;
}

/* ///////////////////////////////////////////////////////////
Header CSS 03 Start
/////////////////////////////////////////////////////////// */
.h3_nh_brand-area {
    margin-top: 0;
}

/* ///////////////////////////////////////////////////////////
04. section CSS
/////////////////////////////////////////////////////////// */
.nh_section-subtitle {
    border-radius: 4px;
    background: var(--clr-theme-primary-soft);
    height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    color: var(--clr-theme-primary);
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 28px;
}
@media (max-width: 575px) {
    .nh_section-subtitle {
        margin-bottom: 18px;
    }
}
.nh_section-subtitle-white {
    background-color: var(--clr-theme-primary);
    color: #fff;
}
.nh_section-subtitle-2 {
    background-color: rgba(6, 177, 110, 0.15);
    color: var(--clr-theme-primary);
}
.nh_section-subtitle-inner {
    margin-bottom: 18px;
}
.nh_section-title {
    color: var(--clr-body-heading);
    font-family: "Manrope", sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
}
@media (max-width: 1399px) {
    .nh_section-title {
        font-size: 45px;
    }
}
@media (max-width: 1199px) {
    .nh_section-title {
        font-size: 40px;
    }
}
@media (max-width: 575px) {
    .nh_section-title {
        font-size: 36px;
    }
}
@media (max-width: 480px) {
    .nh_section-title {
        font-size: 32px;
    }
}
.nh_section-title-white {
    color: #fff;
}
.nh_section-title-small {
    font-size: 44px;
}
@media (max-width: 1199px) {
    .nh_section-title-small {
        font-size: 40px;
    }
}
@media (max-width: 575px) {
    .nh_section-title-small {
        font-size: 36px;
    }
}
@media (max-width: 480px) {
    .nh_section-title-small {
        font-size: 32px;
    }
}
.nh_section-text {
    color: rgb(71, 85, 105);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}
.nh_section-text-white {
    color: rgba(255, 255, 255, 0.7);
}

.h5_nh_section-heading {
    color: rgb(15, 41, 31);
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: -1px;
}
@media (max-width: 480px) {
    .h5_nh_section-heading {
        font-size: 18px;
    }
}
@media (max-width: 480px) {
    .h5_nh_section-area .nh_section-title {
        font-size: 30px;
    }
}

/* ///////////////////////////////////////////////////////////
02. video CSS
/////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////
Header CSS 01 Start
/////////////////////////////////////////////////////////// */
.nh_reason-item {
    border-radius: 8px;
    box-shadow: 0px 8px 40px 0px rgba(11, 12, 15, 0.08);
    background: #fff;
    padding: 30px 30px 23px;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.nh_reason-item-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgb(229, 248, 240);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.nh_reason-item-icon svg {
    color: var(--clr-theme-primary);
}
.nh_reason-item-content {
    text-align: center;
}
.nh_reason-item-content-title {
    color: var(--clr-body-heading);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -1px;
    margin-bottom: 16px;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
@media (max-width: 1399px) {
    .nh_reason-item-content-title {
        font-size: 22px;
    }
}
.nh_reason-item-content p {
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    color: rgb(133, 133, 133);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 0;
}
.nh_reason-item:hover {
    background-color: var(--clr-theme-primary);
}
.nh_reason-item:hover .nh_reason-item-icon {
    background-color: #fff;
}
.nh_reason-item:hover .nh_reason-item-content-title {
    color: #fff;
}
.nh_reason-item:hover .nh_reason-item-content p {
    color: #fff;
}

/* ///////////////////////////////////////////////////////////
Header CSS 02 Start
/////////////////////////////////////////////////////////// */
.h2_nh_reason-item-icon {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background: rgb(229, 248, 240);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -50px;
    margin-left: 25px;
    position: relative;
    z-index: 1;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    border: 5px solid rgb(247, 249, 251);
}
.h2_nh_reason-item-icon svg {
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    color: var(--clr-theme-primary);
}
.h2_nh_reason-item-content {
    border-radius: 8px;
    box-shadow: 0px 8px 40px 0px rgba(11, 12, 15, 0.08);
    background: #fff;
    padding: 85px 25px 23px;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.h2_nh_reason-item-content-title {
    color: var(--clr-body-heading);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.8px;
    margin-bottom: 16px;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
@media (max-width: 1399px) {
    .h2_nh_reason-item-content-title {
        font-size: 22px;
    }
}
.h2_nh_reason-item-content-title:hover a {
    color: var(--clr-theme-primary);
}
.h2_nh_reason-item-content p {
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    color: rgb(133, 133, 133);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 0;
}
.h2_nh_reason-item:hover .h2_nh_reason-item-icon {
    background-color: var(--clr-theme-primary);
}
.h2_nh_reason-item:hover .h2_nh_reason-item-icon svg {
    color: #fff;
}

/* ///////////////////////////////////////////////////////////
02. price CSS
/////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////
Header CSS 01 Start
/////////////////////////////////////////////////////////// */
.nh_price-tab {
    display: flex;
}
.nh_price-tab .nav-tabs {
    border: 1px solid rgb(242, 242, 242);
    border-radius: 8px;
    padding: 4px;
    background-color: #fff;
}
.nh_price-tab .nav-tabs .nav-link {
    height: 46px;
    border-radius: 8px;
    border: 0;
    padding: 0 38px;
    color: var(--clr-body-heading);
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-transform: capitalize;
}
.nh_price-tab .nav-tabs .nav-link.active {
    background-color: var(--clr-theme-primary);
    color: #fff;
}

.nh_price-item {
    border: 1px solid rgb(242, 242, 242);
    border-radius: 10px;
    background: rgb(255, 255, 255);
    padding: 40px 30px 50px;
}
.nh_price-item.active {
    border: 1px solid rgb(6, 177, 110);
    border-radius: 10px;
    background: rgb(229, 248, 240);
    margin-top: 0;
}
@media (max-width: 991px) {
    .nh_price-item.mt-30 {
        margin-top: 0;
    }
}
.nh_price-item-head {
    margin-bottom: 27px;
}
.nh_price-item-head h3 {
    color: rgb(6, 177, 110);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
    margin-bottom: 14px;
}
.nh_price-item-head p {
    color: rgb(71, 85, 105);
    font-size: 18px;
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 0;
}
.nh_price-item-amount {
    border-top: 1px solid rgb(242, 242, 242);
    border-bottom: 1px solid rgb(242, 242, 242);
    padding-top: 20px;
    padding-bottom: 24px;
    margin-bottom: 40px;
}
.nh_price-item-amount h1 {
    color: rgb(6, 177, 110);
    font-size: 64px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -1px;
    margin-bottom: 0;
}
@media (max-width: 767px) {
    .nh_price-item-amount h1 {
        font-size: 60px;
    }
}
@media (max-width: 575px) {
    .nh_price-item-amount h1 {
        font-size: 56px;
    }
}
@media (max-width: 480px) {
    .nh_price-item-amount h1 {
        font-size: 50px;
    }
}
.nh_price-item-amount h1 span {
    color: rgb(71, 85, 105);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    margin-left: 5px;
}
.nh_price-item-list {
    margin-bottom: 40px;
}
.nh_price-item-list ul {
    list-style: none;
}
.nh_price-item-list ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgb(71, 85, 105);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 25px;
}
.nh_price-item-list ul li:last-child {
    margin-bottom: 0;
}
.nh_price-item-list ul li i {
    width: 20px;
    height: 20px;
    background: #E9F8F2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-theme-primary);
    font-size: 12px;
}
.nh_price-item-btn a {
    width: 100%;
    height: 60px;
    background-color: var(--clr-theme-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-transform: capitalize;
    border-radius: 10px;
    padding: 0 30px;
}

/* ///////////////////////////////////////////////////////////
Header CSS 01 Start
/////////////////////////////////////////////////////////// */
.h2_nh_price-area .nh_price-item-btn a {
    background: rgba(6, 177, 110, 0.1);
    color: var(--clr-theme-primary);
}
.h2_nh_price-area .nh_price-item-btn a:hover {
    background-color: var(--clr-theme-primary);
    color: #fff;
}
.h2_nh_price-area .nh_price-item.active {
    border: 1px solid rgb(6, 177, 110);
    border-radius: 10px;
    background: #fff;
    margin-top: 0;
}
.h2_nh_price-area .nh_price-item.active .nh_price-item-btn a {
    background-color: var(--clr-theme-primary);
    color: #fff;
}

/* ///////////////////////////////////////////////////////////
Header CSS 01 Start
/////////////////////////////////////////////////////////// */
.h3_nh_price-area .nh_price-item-btn a {
    background-color: var(--clr-theme-primary);
    color: #fff;
}
.h3_nh_price-area .nh_price-item-btn a:hover {
    background-color: var(--clr-common-black);
    color: #fff;
}
.h3_nh_price-area .nh_price-item.active {
    border: 1px solid rgb(6, 177, 110);
    border-radius: 10px;
    background: rgb(229, 248, 240);
}

/* ///////////////////////////////////////////////////////////
Header CSS 01 Start
/////////////////////////////////////////////////////////// */
.h4_nh_price-area .nh_price-item-btn a {
    background: rgba(6, 177, 110, 0.1);
    color: var(--clr-theme-primary);
}
.h4_nh_price-area .nh_price-item-btn a:hover {
    background-color: var(--clr-theme-primary);
    color: #fff;
}
.h4_nh_price-area .nh_price-item.active {
    border: 1px solid rgb(6, 177, 110);
    border-radius: 10px;
    background: var(--clr-common-black);
    margin-top: 0;
}
.h4_nh_price-area .nh_price-item.active .nh_price-item-head {
    margin-bottom: 27px;
}
.h4_nh_price-area .nh_price-item.active .nh_price-item-head p {
    color: #fff;
}
.h4_nh_price-area .nh_price-item.active .nh_price-item-amount {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.h4_nh_price-area .nh_price-item.active .nh_price-item-amount h1 span {
    color: #fff;
}
.h4_nh_price-area .nh_price-item.active .nh_price-item-list ul li {
    color: #fff;
}
.h4_nh_price-area .nh_price-item.active .nh_price-item-list ul li i {
    background: var(--clr-theme-primary);
    color: #fff;
}
.h4_nh_price-area .nh_price-item.active .nh_price-item-btn a {
    background-color: var(--clr-theme-primary);
    color: #fff;
}
.h4_nh_price-area .nh_price-item.active .nh_price-item-btn a:hover {
    color: var(--clr-theme-primary);
    background-color: #fff;
}

.h4_nh_combine_section {
    position: relative;
    z-index: 1;
}
.h4_nh_combine_section::before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(6, 177, 110, 0), rgba(6, 177, 110, 0.1) 100%);
    z-index: -1;
}

/* ///////////////////////////////////////////////////////////
02. service CSS
/////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////
Header CSS 01 Start
/////////////////////////////////////////////////////////// */
.nh_service-item {
    padding: 30px 30px 30px;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    border: 1px solid rgb(242, 242, 242);
    border-radius: 10px;
    background: rgb(255, 255, 255);
}
@media (max-width: 767px) {
    .nh_service-item {
        padding: 30px 25px 30px;
    }
}
.nh_service-item-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(6, 177, 110, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.nh_service-item-icon svg {
    color: var(--clr-theme-primary);
}
.nh_service-item-content {
    text-align: center;
}
.nh_service-item-content-title {
    color: rgb(0, 0, 0);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.8px;
    margin-bottom: 16px;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.nh_service-item-content p {
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    color: rgb(133, 133, 133);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 23px;
}
.nh_service-item-content-btn {
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    display: inline-flex;
    align-items: center;
    height: 41px;
    padding: 0 30px;
    border-radius: 8px;
    color: var(--clr-body-heading);
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
    border: 1px solid rgba(217, 217, 217, 0.5);
}
.nh_service-item:hover {
    background-color: var(--clr-theme-primary);
}
.nh_service-item:hover .nh_service-item-icon {
    background-color: #fff;
}
.nh_service-item:hover .nh_service-item-content-title {
    color: #fff;
}
.nh_service-item:hover .nh_service-item-content p {
    color: rgba(255, 255, 255, 0.7);
}
.nh_service-item:hover .nh_service-item-content-btn {
    background-color: var(--clr-body-heading);
    border-color: var(--clr-body-heading);
    color: #fff;
}

/* ///////////////////////////////////////////////////////////
Header CSS 02 Start
/////////////////////////////////////////////////////////// */
.h2_nh_service-item {
    padding: 30px 30px 30px;
    border-bottom: 1px solid #F2F2F2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    cursor: pointer;
}
@media (max-width: 991px) {
    .h2_nh_service-item {
        flex-wrap: wrap;
    }
}
@media (max-width: 575px) {
    .h2_nh_service-item {
        padding-left: 20px;
        padding-right: 20px;
    }
}
.h2_nh_service-item-heading {
    display: flex;
    align-items: center;
    gap: 30px;
    width: 45%;
}
@media (max-width: 991px) {
    .h2_nh_service-item-heading {
        width: 100%;
        gap: 25px;
    }
}
@media (max-width: 480px) {
    .h2_nh_service-item-heading {
        flex-wrap: wrap;
    }
}
.h2_nh_service-item-heading span {
    display: block;
    color: var(--clr-body-heading);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
}
.h2_nh_service-item-heading-icon {
    width: 105px;
    height: 105px;
    background: rgb(230, 247, 240);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--clr-theme-primary);
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    flex-shrink: 0;
}
.h2_nh_service-item-heading-title {
    color: var(--clr-body-heading);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: -0.5px;
    margin-bottom: 0;
}
.h2_nh_service-item-heading-title:hover a {
    color: var(--clr-theme-primary);
}
.h2_nh_service-item-content {
    width: 40%;
}
@media (max-width: 991px) {
    .h2_nh_service-item-content {
        width: 60%;
    }
}
@media (max-width: 767px) {
    .h2_nh_service-item-content {
        width: calc(100% - 120px);
    }
}
@media (max-width: 480px) {
    .h2_nh_service-item-content {
        width: 100%;
    }
}
.h2_nh_service-item-content p {
    color: rgb(133, 133, 133);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 0;
}
.h2_nh_service-item-icon {
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    border: 1px solid rgb(242, 242, 242);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: rgba(15, 41, 31, 0.5);
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    flex-shrink: 0;
}
.h2_nh_service-item:hover {
    background: rgba(6, 177, 110, 0.1);
    border-radius: 5px;
}
.h2_nh_service-item:hover .h2_nh_service-item-heading-icon {
    background: var(--clr-theme-primary);
    color: #fff;
}
.h2_nh_service-item:hover .h2_nh_service-item-icon {
    border-color: transparent;
    background: var(--clr-body-heading);
    color: #fff;
}

/* ///////////////////////////////////////////////////////////
Header CSS 02 Start
/////////////////////////////////////////////////////////// */
.h3_nh_service-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px 30px 28px;
    border-bottom: 1px solid #F2F2F2;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
@media (max-width: 1199px) {
    .h3_nh_service-item {
        padding: 28px 20px 28px;
    }
}
@media (max-width: 480px) {
    .h3_nh_service-item {
        flex-wrap: wrap;
    }
}
.h3_nh_service-item:last-child {
    border-bottom: 0;
}
.h3_nh_service-item-icon {
    width: 86px;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 177, 110, 0.08);
    flex-shrink: 0;
    border-radius: 50%;
    color: var(--clr-theme-primary);
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
@media (max-width: 575px) {
    .h3_nh_service-item-icon {
        width: 80px;
        height: 80px;
    }
}
.h3_nh_service-item-content h5 {
    color: rgba(11, 12, 15, 0.7);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -1px;
    margin-bottom: 11px;
}
.h3_nh_service-item-content h5:hover a {
    color: var(--clr-theme-primary);
}
.h3_nh_service-item-content p {
    color: rgb(133, 133, 133);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 0;
}
.h3_nh_service-item:hover {
    border-radius: 5px;
    background: rgba(6, 177, 110, 0.1);
}
.h3_nh_service-item:hover .h3_nh_service-item-icon {
    background: var(--clr-theme-primary);
    color: #fff;
}
@media (max-width: 1399px) {
    .h3_nh_service-img.ml-50 {
        margin-left: 20px;
    }
}
@media (max-width: 1199px) {
    .h3_nh_service-img.ml-50 {
        margin-left: 0;
    }
}
@media (max-width: 1199px) {
    .h3_nh_service-wrap.mr-20 {
        margin-right: 0;
    }
}

.nh_inner_service-item {
    position: relative;
    z-index: 1;
    padding: 40px 30px 33px;
    box-sizing: border-box;
    border: 1px solid rgb(242, 242, 242);
    border-radius: 6px;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.nh_inner_service-item:hover {
    box-shadow: 0px 8px 40px 0px rgba(11, 12, 15, 0.08);
    background: rgb(255, 255, 255);
    border-color: #fff;
}
.nh_inner_service-item-icon {
    width: 60px;
    height: 60px;
    background: rgb(229, 248, 240);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-theme-primary);
    border-radius: 50%;
    margin-bottom: 28px;
}
.nh_inner_service-item-title {
    color: var(--clr-body-heading);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin-bottom: 23px;
}
.nh_inner_service-item-title:hover {
    color: var(--clr-theme-primary);
}
.nh_inner_service-item-text {
    color: rgb(133, 133, 133);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 0;
}

.inn_nh_service-item {
    border: 1px solid rgb(242, 242, 242);
    padding: 25px 25px 18px;
    border-radius: 8px;
}
.inn_nh_service-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}
.inn_nh_service-item-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(242, 242, 242);
    border-radius: 4px;
}
.inn_nh_service-item-link {
    background: #f3f4f6;
    padding: 8px 8px 8px 14px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1;
}
.inn_nh_service-item-link:hover {
    background-color: #e5e7eb;
}
.inn_nh_service-item-link .title {
    margin-bottom: 1px;
    font-size: 14px;
    font-weight: 600;
    color: var(--clr-body-heading);
}
.inn_nh_service-item-link .icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: #fff;
}
.inn_nh_service-item-title {
    font-size: 20px;
    color: var(--clr-body-heading);
    letter-spacing: -0.32px;
    margin-bottom: 5px;
    line-height: 1.2;
    font-weight: 600;
}
.inn_nh_service-item-bottom p {
    margin-bottom: 0;
}

/* ///////////////////////////////////////////////////////////
02. video CSS
/////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////
Header CSS o1 Start
/////////////////////////////////////////////////////////// */
.nh_data-area {
    background-color: var(--clr-common-black);
}

/* ///////////////////////////////////////////////////////////
23. faq
/////////////////////////////////////////////////////////// */
@media (max-width: 1599px) {
    .nh_faq-img.mr-65 {
        margin-right: 40px;
    }
}
@media (max-width: 1399px) {
    .nh_faq-img.mr-65 {
        margin-right: 30px;
    }
}
@media (max-width: 1199px) {
    .nh_faq-img.mr-65 {
        margin-right: 0;
    }
}
@media (max-width: 1599px) {
    .nh_faq-content.ml-20 {
        margin-left: 10px;
    }
}
@media (max-width: 1199px) {
    .nh_faq-content.ml-20 {
        margin-left: 0;
    }
}
.nh_faq-content .accordion-item {
    overflow: hidden;
    background: transparent;
    border-radius: 8px;
    border: none;
}
.nh_faq-content .accordion-button {
    position: relative;
    cursor: pointer;
    box-shadow: none;
    background: rgb(242, 251, 248);
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    color: rgb(15, 41, 31);
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: -0.5px;
    border-radius: 8px 8px 0 0 !important;
    padding: 22px 50px 22px 30px;
    border: 2px solid transparent;
    border-bottom: 0;
}
@media (max-width: 480px) {
    .nh_faq-content .accordion-button {
        font-size: 18px;
        padding: 22px 45px 22px 20px;
    }
}
.nh_faq-content .accordion-button::after {
    display: none;
}
.nh_faq-content .accordion-button::before {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    content: "+";
    font-family: "Font Awesome 6 Pro";
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    font-weight: 600;
    color: var(--clr-theme-primary);
    text-align: center;
    font-size: 16px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 480px) {
    .nh_faq-content .accordion-button::before {
        right: 20px;
    }
}
.nh_faq-content .accordion-button:not(.collapsed) {
    padding-bottom: 16px;
    border-color: var(--clr-theme-primary);
}
.nh_faq-content .accordion-button:not(.collapsed)::before {
    content: "\f068";
}
.nh_faq-content .accordion-body {
    padding: 0 30px;
    padding-right: 35px;
    background: rgb(242, 251, 248);
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    border-radius: 0 0 8px 8px;
    border: 2px solid var(--clr-theme-primary);
    border: 2px solid rgb(6, 177, 110);
    border-top: 0;
}
@media (max-width: 480px) {
    .nh_faq-content .accordion-body {
        padding: 0 20px;
    }
}
.nh_faq-content .accordion-body p {
    padding: 0 0 23px;
    margin-bottom: 0;
    color: rgba(71, 85, 105, 0.9);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}

@media (max-width: 1199px) {
    .h3_nh_faq-wrap.pl-80 {
        padding-left: 50px;
    }
}
@media (max-width: 991px) {
    .h3_nh_faq-wrap.pl-80 {
        padding-left: 0;
    }
}
@media (max-width: 1199px) {
    .h3_nh_faq-wrap.pr-80 {
        padding-right: 50px;
    }
}
@media (max-width: 991px) {
    .h3_nh_faq-wrap.pr-80 {
        padding-right: 0;
    }
}
.h3_nh_faq-content .accordion-item {
    overflow: hidden;
    background: transparent;
    border-radius: 8px;
    border: none;
}
.h3_nh_faq-content .accordion-button {
    position: relative;
    cursor: pointer;
    box-shadow: none;
    background: #fff;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    color: rgba(15, 41, 31, 0.7);
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: -0.5px;
    border-radius: 8px 8px 0 0 !important;
    padding: 22px 70px 22px 30px;
    border-bottom: 0;
}
@media (max-width: 575px) {
    .h3_nh_faq-content .accordion-button {
        padding: 22px 60px 22px 20px;
        font-size: 16px;
    }
}
.h3_nh_faq-content .accordion-button::after {
    display: none;
}
.h3_nh_faq-content .accordion-button::before {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    content: "+";
    font-family: "Font Awesome 6 Pro";
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    font-weight: 600;
    color: var(--clr-theme-primary);
    text-align: center;
    font-size: 16px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 480px) {
    .h3_nh_faq-content .accordion-button::before {
        right: 20px;
    }
}
.h3_nh_faq-content .accordion-button:not(.collapsed) {
    padding-bottom: 16px;
    background-color: var(--clr-theme-primary);
    color: #fff;
}
.h3_nh_faq-content .accordion-button:not(.collapsed)::before {
    content: "\f068";
    color: #fff;
}
.h3_nh_faq-content .accordion-body {
    padding: 0 30px;
    padding-right: 35px;
    background: rgb(242, 251, 248);
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    border-radius: 0 0 8px 8px;
    border: 0;
    background-color: var(--clr-theme-primary);
}
@media (max-width: 575px) {
    .h3_nh_faq-content .accordion-body {
        padding-left: 20px;
        padding-right: 25px;
    }
}
.h3_nh_faq-content .accordion-body p {
    padding: 0 0 23px;
    margin-bottom: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}

@media (max-width: 1599px) {
    .h4_nh_faq-content.mr-70 {
        margin-right: 50px;
    }
}
@media (max-width: 1399px) {
    .h4_nh_faq-content.mr-70 {
        margin-right: 20px;
    }
}
@media (max-width: 1199px) {
    .h4_nh_faq-content.mr-70 {
        margin-right: 0;
    }
}
.h4_nh_faq-content .accordion-item {
    overflow: hidden;
    background: transparent;
    border-radius: 8px;
    border: none;
}
.h4_nh_faq-content .accordion-button {
    position: relative;
    cursor: pointer;
    box-shadow: none;
    background: #F7F9FB;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    color: rgba(15, 41, 31, 0.7);
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: -0.5px;
    border-radius: 8px 8px 0 0 !important;
    padding: 15px 70px 15px 30px;
    border-bottom: 0;
}
@media (max-width: 575px) {
    .h4_nh_faq-content .accordion-button {
        padding: 15px 60px 15px 20px;
        font-size: 16px;
    }
}
.h4_nh_faq-content .accordion-button::after {
    display: none;
}
.h4_nh_faq-content .accordion-button::before {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    content: "+";
    font-family: "Font Awesome 6 Pro";
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    font-weight: 600;
    color: var(--clr-theme-primary);
    text-align: center;
    font-size: 16px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 480px) {
    .h4_nh_faq-content .accordion-button::before {
        right: 20px;
    }
}
.h4_nh_faq-content .accordion-button:not(.collapsed) {
    padding-bottom: 16px;
    background-color: var(--clr-theme-primary);
    color: #fff;
}
.h4_nh_faq-content .accordion-button:not(.collapsed)::before {
    content: "\f068";
    color: #fff;
}
.h4_nh_faq-content .accordion-body {
    padding: 0 30px;
    padding-right: 35px;
    background: rgb(242, 251, 248);
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    border-radius: 0 0 8px 8px;
    border: 0;
    background-color: var(--clr-theme-primary);
}
@media (max-width: 575px) {
    .h4_nh_faq-content .accordion-body {
        padding-left: 20px;
        padding-right: 25px;
    }
}
.h4_nh_faq-content .accordion-body p {
    padding: 0 0 23px;
    margin-bottom: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}
@media (max-width: 1199px) {
    .h4_nh_faq-img.mr-20 {
        margin-right: 0;
    }
}

@media (max-width: 1399px) {
    .h5_nh_faq-content.mr-70 {
        margin-right: 50px;
    }
}
@media (max-width: 1199px) {
    .h5_nh_faq-content.mr-70 {
        margin-right: 0;
    }
}
@media (max-width: 1399px) {
    .h5_nh_faq-content.ml-60 {
        margin-left: 40px;
    }
}
@media (max-width: 1199px) {
    .h5_nh_faq-content.ml-60 {
        margin-left: 0;
    }
}
.h5_nh_faq-content .accordion-item {
    overflow: hidden;
    background: transparent;
    border-radius: 8px;
    border: none;
}
.h5_nh_faq-content .accordion-button {
    position: relative;
    cursor: pointer;
    box-shadow: none;
    background: #fff;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    color: var(--clr-body-heading);
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: -0.5px;
    border-radius: 8px 8px 0 0 !important;
    padding: 22px 70px 22px 30px;
    border-bottom: 0;
}
@media (max-width: 575px) {
    .h5_nh_faq-content .accordion-button {
        padding: 22px 60px 22px 20px;
        font-size: 16px;
    }
}
.h5_nh_faq-content .accordion-button::after {
    display: none;
}
.h5_nh_faq-content .accordion-button::before {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    content: "+";
    font-family: "Font Awesome 6 Pro";
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    font-weight: 600;
    color: var(--clr-theme-primary);
    text-align: center;
    font-size: 16px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 480px) {
    .h5_nh_faq-content .accordion-button::before {
        right: 20px;
    }
}
.h5_nh_faq-content .accordion-button:not(.collapsed) {
    padding-bottom: 16px;
    background-color: var(--clr-common-black);
    color: #fff;
}
.h5_nh_faq-content .accordion-button:not(.collapsed)::before {
    content: "\f068";
    color: #fff;
}
.h5_nh_faq-content .accordion-body {
    padding: 0 30px;
    padding-right: 35px;
    background: rgb(242, 251, 248);
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    border-radius: 0 0 8px 8px;
    border: 0;
    background-color: var(--clr-common-black);
}
@media (max-width: 575px) {
    .h5_nh_faq-content .accordion-body {
        padding-left: 20px;
        padding-right: 25px;
    }
}
.h5_nh_faq-content .accordion-body p {
    padding: 0 0 23px;
    margin-bottom: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}

@media (max-width: 1399px) {
    .h5_nh_faq-right.ml-40 {
        margin-left: 0;
    }
}
.h5_nh_faq-contact {
    display: flex;
    align-items: center;
    gap: 12px;
}
.h5_nh_faq-contact-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--clr-theme-primary);
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
}
.h5_nh_faq-contact-info a {
    color: rgb(11, 12, 15);
    font-size: 22px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.5px;
    display: block;
}
.h5_nh_faq-contact-info span {
    color: rgb(133, 133, 133);
    font-size: 13px;
    font-weight: 600;
    line-height: normal;
    display: block;
    margin-bottom: 5px;
}

@media (max-width: 1399px) {
    .inner_nh_faq-content.ml-60 {
        margin-left: 40px;
    }
}
@media (max-width: 1199px) {
    .inner_nh_faq-content.ml-60 {
        margin-left: 0;
    }
}
.inner_nh_faq-content .accordion-item {
    overflow: hidden;
    background: transparent;
    border-radius: 8px;
    border: none;
}
.inner_nh_faq-content .accordion-button {
    position: relative;
    cursor: pointer;
    box-shadow: none;
    background: #F7F9FB;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    color: var(--clr-body-heading);
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: -0.5px;
    border-radius: 8px 8px 0 0 !important;
    padding: 22px 70px 22px 30px;
    border-bottom: 0;
}
@media (max-width: 575px) {
    .inner_nh_faq-content .accordion-button {
        padding: 22px 60px 22px 20px;
        font-size: 16px;
    }
}
.inner_nh_faq-content .accordion-button::after {
    display: none;
}
.inner_nh_faq-content .accordion-button::before {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    content: "+";
    font-family: "Font Awesome 6 Pro";
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    font-weight: 600;
    color: var(--clr-theme-primary);
    text-align: center;
    font-size: 16px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 480px) {
    .inner_nh_faq-content .accordion-button::before {
        right: 20px;
    }
}
.inner_nh_faq-content .accordion-button:not(.collapsed) {
    padding-bottom: 16px;
    background-color: var(--clr-common-black);
    color: #fff;
}
.inner_nh_faq-content .accordion-button:not(.collapsed)::before {
    content: "\f068";
    color: #fff;
}
.inner_nh_faq-content .accordion-body {
    padding: 0 30px;
    padding-right: 35px;
    background: rgb(242, 251, 248);
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    border-radius: 0 0 8px 8px;
    border: 0;
    background-color: var(--clr-common-black);
}
@media (max-width: 575px) {
    .inner_nh_faq-content .accordion-body {
        padding-left: 20px;
        padding-right: 25px;
    }
}
.inner_nh_faq-content .accordion-body p {
    padding: 0 0 23px;
    margin-bottom: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}

/* ///////////////////////////////////////////////////////////
04. Hero CSS
/////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////
Hero CSS o1 Start
/////////////////////////////////////////////////////////// */
.nh_testimonial-item {
    background: #fff;
    border-radius: 10px;
    padding: 40px 30px 40px;
    position: relative;
    z-index: 1;
    border: 2px solid transparent;
}
@media (max-width: 480px) {
    .nh_testimonial-item {
        padding: 40px 25px 40px;
    }
}
.nh_testimonial-item-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 22px;
}
.nh_testimonial-item-rating i {
    color: rgb(255, 183, 0);
    font-size: 16px;
}
.nh_testimonial-item-title {
    color: rgb(11, 12, 15);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -1px;
    margin-bottom: 16px;
}
@media (max-width: 1199px) {
    .nh_testimonial-item-title {
        font-size: 22px;
    }
}
.nh_testimonial-item-text {
    color: rgba(133, 133, 133, 0.7);
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 0;
}
@media (max-width: 1199px) {
    .nh_testimonial-item-text {
        font-size: 18px;
    }
}
.nh_testimonial-admin {
    border-top: 1px solid rgb(242, 242, 242);
    margin-top: 21px;
    padding-top: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.nh_testimonial-admin-img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}
.nh_testimonial-admin-content h5 {
    color: var(--clr-body-heading);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -1px;
    text-align: left;
    margin-bottom: 5px;
}
.nh_testimonial-admin-content span {
    color: rgba(11, 12, 15, 0.7);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    display: block;
}
.nh_testimonial-quote {
    position: absolute;
    right: 30px;
    bottom: 28px;
    color: var(--clr-theme-primary);
    font-size: 60px;
    line-height: 1;
}
@media (max-width: 480px) {
    .nh_testimonial-quote {
        right: 20px;
        bottom: 45px;
        font-size: 45px;
    }
}

.nh_testimonial-active.swiper .swiper-slide-active .nh_testimonial-item {
    border-color: var(--clr-theme-primary);
}

/* ///////////////////////////////////////////////////////////
Hero CSS o1 Start
/////////////////////////////////////////////////////////// */
.h2_nh_testimonial-item {
    position: relative;
    z-index: 1;
    border: 2px solid transparent;
}
.h2_nh_testimonial-item-content {
    background: #fff;
    border-radius: 5px;
    padding: 28px 30px 35px;
    position: relative;
    z-index: 1;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
@media (max-width: 480px) {
    .h2_nh_testimonial-item-content {
        padding: 28px 20px 35px;
    }
}
.h2_nh_testimonial-item-content::before {
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    position: absolute;
    left: 20px;
    top: -21px;
    content: "";
    width: 40px;
    height: 33px;
    background: #fff;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    z-index: 1;
}
.h2_nh_testimonial-item-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 23px;
}
.h2_nh_testimonial-item-rating i {
    color: rgb(255, 183, 0);
    font-size: 16px;
}
.h2_nh_testimonial-item-text {
    color: #858585;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 17px;
}
@media (max-width: 480px) {
    .h2_nh_testimonial-item-text {
        font-size: 18px;
    }
}
.h2_nh_testimonial-admin {
    border-top: 1px solid rgb(242, 242, 242);
    margin-top: 21px;
    padding-top: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.h2_nh_testimonial-admin-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 30px;
}
.h2_nh_testimonial-admin-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.h2_nh_testimonial-admin-content h5 {
    color: var(--clr-body-heading);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    margin-bottom: 4px;
}
.h2_nh_testimonial-admin-content span {
    color: #475569;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    display: block;
}
.h2_nh_testimonial-quote {
    color: var(--clr-theme-primary);
    font-size: 60px;
    line-height: 1;
    margin-bottom: 8px;
}

.h2_nh_testimonial-active.swiper .swiper-slide-active .h2_nh_testimonial-item-content {
    background-color: var(--clr-theme-primary);
}
.h2_nh_testimonial-active.swiper .swiper-slide-active .h2_nh_testimonial-item-content::before {
    background-color: var(--clr-theme-primary);
}
.h2_nh_testimonial-active.swiper .swiper-slide-active .h2_nh_testimonial-item-text {
    color: #fff;
}
.h2_nh_testimonial-active.swiper .swiper-slide-active .h2_nh_testimonial-quote {
    color: #fff;
}
.h2_nh_testimonial-active.swiper .swiper-slide-active .h2_nh_testimonial-admin-content h5 {
    color: #fff;
}
.h2_nh_testimonial-active.swiper .swiper-slide-active .h2_nh_testimonial-admin-content span {
    color: #fff;
}

.h3_nh_testimonial-wrap {
    margin-left: -375px;
    margin-right: -375px;
}
@media (max-width: 1199px) {
    .h3_nh_testimonial-wrap {
        margin-left: -200px;
        margin-right: -200px;
    }
}
@media (max-width: 767px) {
    .h3_nh_testimonial-wrap {
        margin-left: 30px;
        margin-right: 30px;
    }
}
@media (max-width: 575px) {
    .h3_nh_testimonial-wrap {
        margin-left: 15px;
        margin-right: 15px;
    }
}
.h3_nh_testimonial-item {
    background-color: #F7F9FB;
    padding: 54px 50px 0;
    border-radius: 16px;
}
@media (max-width: 575px) {
    .h3_nh_testimonial-item {
        padding-left: 25px;
        padding-right: 25px;
    }
}
.h3_nh_testimonial-content {
    margin-bottom: 42px;
    text-align: center;
}
.h3_nh_testimonial-content-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin-bottom: 39px;
    color: rgba(15, 41, 31, 0.1);
}
.h3_nh_testimonial-content-text {
    color: rgba(15, 41, 31, 0.1);
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    margin-bottom: 0;
}
.h3_nh_testimonial-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}
.h3_nh_testimonial-rating i {
    color: #FFB700;
    font-size: 16px;
    line-height: 1;
}
.h3_nh_testimonial-thumbs-wrap {
    width: 870px;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 60px;
    padding-top: 20px;
    margin-top: -20px;
    margin-top: -170px;
    border-radius: 0 0 16px 16px;
}
.h3_nh_testimonial-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    cursor: pointer;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    position: relative;
    z-index: 1;
    width: 60px;
    height: 60px;
    border: 4px solid transparent;
}
.h3_nh_testimonial-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.h3_nh_testimonial-quote {
    position: absolute;
    right: 0;
    top: -4px;
    background: var(--clr-theme-primary);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    opacity: 0;
    visibility: hidden;
}

.h3_nh_testimonial-active .swiper-slide-active .h3_nh_testimonial-item {
    padding-bottom: 170px;
}
.h3_nh_testimonial-active .swiper-slide-active .h3_nh_testimonial-content-title {
    color: var(--clr-common-black);
}
.h3_nh_testimonial-active .swiper-slide-active .h3_nh_testimonial-content-text {
    color: rgba(15, 41, 31, 0.7);
}

.h3_nh_testimonial-thumbs {
    width: 330px;
    padding-top: 25px;
}
@media (max-width: 575px) {
    .h3_nh_testimonial-thumbs {
        width: 200px;
    }
}
.h3_nh_testimonial-thumbs .swiper-slide-thumb-active .h3_nh_testimonial-img {
    border-color: #fff;
    transform: scale(1);
}
.h3_nh_testimonial-thumbs .swiper-slide-thumb-active .h3_nh_testimonial-img .h3_nh_testimonial-quote {
    opacity: 1;
    visibility: visible;
}

.h5_nh_testimonial-area {
    background-color: var(--clr-common-black);
}
.h5_nh_testimonial-content {
    background: var(--clr-theme-primary);
    border-radius: 16px;
    padding: 38px 35px 45px;
    position: relative;
    z-index: 1;
    margin-bottom: 65px;
}
@media (max-width: 575px) {
    .h5_nh_testimonial-content {
        padding: 38px 30px 45px;
    }
}
@media (max-width: 480px) {
    .h5_nh_testimonial-content {
        padding: 33px 25px 40px;
    }
}
.h5_nh_testimonial-content::before {
    position: absolute;
    left: 50px;
    bottom: -50px;
    content: "";
    width: 50px;
    height: 50px;
    background: var(--clr-theme-primary);
    clip-path: polygon(100% 0, 0 0, 0 100%);
}
.h5_nh_testimonial-content i {
    font-size: 60px;
    color: #fff;
    margin-bottom: 22px;
}
.h5_nh_testimonial-content p {
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 0;
}
@media (max-width: 480px) {
    .h5_nh_testimonial-content p {
        font-size: 18px;
    }
}
.h5_nh_testimonial-admin {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 20px;
}
.h5_nh_testimonial-admin img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
.h5_nh_testimonial-admin-info h5 {
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin-bottom: 2px;
}
.h5_nh_testimonial-admin-info span {
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.3px;
}

/* ///////////////////////////////////////////////////////////
04. Hero CSS
/////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////
Hero CSS 01 Start
/////////////////////////////////////////////////////////// */
.nh_blog-item {
    overflow: hidden;
    border-radius: 10px;
    background-color: #F7F9FB;
    padding: 20px;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.nh_blog-item-img {
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    z-index: 1;
}
.nh_blog-item-img img {
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.5s linear 0s;
    -moz-transition: all 0.5s linear 0s;
    -ms-transition: all 0.5s linear 0s;
    -o-transition: all 0.5s linear 0s;
    transition: all 0.5s linear 0s;
    object-fit: cover;
}
.nh_blog-item-date {
    position: absolute;
    left: 15px;
    top: 15px;
    z-index: 1;
    color: rgba(11, 12, 15, 0.7);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    background-color: #fff;
    border-radius: 5px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
}
.nh_blog-item-content {
    padding: 23px 0 15px;
}
.nh_blog-item-content-meta {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.nh_blog-item-content-meta span {
    color: rgb(15, 41, 31);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    display: block;
    position: relative;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.nh_blog-item-content-meta span:not(:last-child) {
    padding-right: 12px;
    margin-right: 8px;
}
.nh_blog-item-content-meta span::after {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    width: 5px;
    height: 5px;
    background: rgb(15, 41, 31);
    border-radius: 50%;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.nh_blog-item-content-meta span:last-child::after {
    display: none;
}
.nh_blog-item-content-title {
    color: rgb(15, 41, 31);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.6px;
    margin-bottom: 26px;
}
.nh_blog-item-content-btn {
    color: rgb(15, 41, 31);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
    width: max-content;
}
.nh_blog-item-content-btn::before {
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 2px;
    content: "";
    background: var(--clr-theme-primary);
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.nh_blog-item-content-btn:hover {
    color: var(--clr-common-black);
}
.nh_blog-item-content-btn:hover::before {
    background-color: var(--clr-common-black);
}
.nh_blog-item:hover {
    background-color: var(--clr-theme-primary);
}
.nh_blog-item:hover .nh_blog-item-content-meta span {
    color: #fff;
}
.nh_blog-item:hover .nh_blog-item-content-meta span::after {
    background: #fff;
}
.nh_blog-item:hover .nh_blog-item-content-title {
    color: #fff;
}
.nh_blog-item:hover .nh_blog-item-content-btn {
    color: #fff;
}
.nh_blog-item:hover .nh_blog-item-content-btn::before {
    background-color: #fff;
}

.nh_blog-item:hover .nh_blog-item-img img {
    transform: scale(1.08);
}

/* ///////////////////////////////////////////////////////////
Hero CSS 02 Start
/////////////////////////////////////////////////////////// */
.h2_nh_blog-item {
    position: relative;
    z-index: 1;
}
.h2_nh_blog-item::before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    content: "";
    border-radius: 5px;
    background: linear-gradient(180deg, rgba(15, 41, 31, 0), rgb(15, 41, 31) 100%);
    z-index: auto;
}
.h2_nh_blog-item-img img {
    width: 100%;
}
.h2_nh_blog-item-content {
    position: absolute;
    left: 30px;
    bottom: 30px;
    right: 30px;
}
@media (max-width: 991px) {
    .h2_nh_blog-item-content {
        left: 25px;
        right: 25px;
    }
}
@media (max-width: 480px) {
    .h2_nh_blog-item-content {
        left: 20px;
        right: 20px;
        bottom: 25px;
    }
}
.h2_nh_blog-item-content-meta {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    width: max-content;
    gap: 15px;
    padding: 3px 10px 3px;
    margin-bottom: 13px;
}
.h2_nh_blog-item-content-meta a {
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.h2_nh_blog-item-content-meta a:hover {
    color: var(--clr-theme-primary);
}
.h2_nh_blog-item-content-meta a i {
    color: var(--clr-theme-primary);
}
.h2_nh_blog-item-content-title {
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -1px;
    margin-bottom: 24px;
}
.h2_nh_blog-item-content-title:hover a {
    color: var(--clr-theme-primary);
}
.h2_nh_blog-item-content-btn {
    height: 40px;
    display: inline-flex;
    border: 2px solid var(--clr-theme-primary);
    align-items: center;
    border-radius: 5px;
    padding: 0 25px;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}
.h2_nh_blog-item-content-btn:hover {
    background-color: var(--clr-theme-primary);
    color: #fff;
}

.h3_nh_blog-area .nh_blog-item-date {
    background-color: var(--clr-theme-primary);
    color: #fff;
}

/* ///////////////////////////////////////////////////////////
Hero CSS 04 Start
/////////////////////////////////////////////////////////// */
.h4_nh_blog-item {
    overflow: hidden;
    border-radius: 10px;
    background-color: #F7F9FB;
    padding: 20px;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.h4_nh_blog-item-img {
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    z-index: 1;
}
.h4_nh_blog-item-img img {
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.5s linear 0s;
    -moz-transition: all 0.5s linear 0s;
    -ms-transition: all 0.5s linear 0s;
    -o-transition: all 0.5s linear 0s;
    transition: all 0.5s linear 0s;
    object-fit: cover;
}
.h4_nh_blog-item-date {
    position: absolute;
    left: 15px;
    top: 15px;
    z-index: 1;
    color: var(--clr-theme-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    background-color: #E5F8F0;
    border-radius: 5px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
}
.h4_nh_blog-item-content {
    padding: 13px 0 15px;
}
.h4_nh_blog-item-content-meta {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.h4_nh_blog-item-content-meta span {
    color: rgb(15, 41, 31);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    display: block;
    position: relative;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.h4_nh_blog-item-content-meta span:not(:last-child) {
    padding-right: 12px;
    margin-right: 8px;
}
.h4_nh_blog-item-content-meta span::after {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    width: 5px;
    height: 5px;
    background: rgb(15, 41, 31);
    border-radius: 50%;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.h4_nh_blog-item-content-meta span:last-child::after {
    display: none;
}
.h4_nh_blog-item-content-title {
    color: rgb(15, 41, 31);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.6px;
    margin-bottom: 18px;
}
.h4_nh_blog-item-content-title:hover a {
    color: var(--clr-theme-primary);
}
.h4_nh_blog-item-content p {
    color: #858585;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 24px;
}
.h4_nh_blog-item-content-btn {
    height: 41px;
    padding: 0 30px;
    display: inline-flex;
    align-items: center;
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    text-transform: capitalize;
    background-color: var(--clr-theme-primary);
    border-radius: 10px;
}
.h4_nh_blog-item-content-btn:hover {
    background-color: var(--clr-common-black);
    color: #fff;
}

.h4_nh_blog-item:hover .h4_nh_blog-item-img img {
    transform: scale(1.08);
}

/* ///////////////////////////////////////////////////////////
Hero CSS 04 Start
/////////////////////////////////////////////////////////// */
.h5_nh_blog-item {
    border-radius: 0px 0px 8px 8px;
    box-shadow: 0px 8px 48px 0px rgba(0, 0, 0, 0.12);
    background: rgb(255, 255, 255);
}
.h5_nh_blog-item-img {
    border-radius: 8px 8px 0px 0px;
    overflow: hidden;
}
.h5_nh_blog-item-img img {
    -webkit-transition: all 0.5s linear 0s;
    -moz-transition: all 0.5s linear 0s;
    -ms-transition: all 0.5s linear 0s;
    -o-transition: all 0.5s linear 0s;
    transition: all 0.5s linear 0s;
    width: 100%;
}
.h5_nh_blog-item-content {
    padding: 25px 20px 30px 70px;
    position: relative;
    z-index: 1;
}
.h5_nh_blog-item-content-meta {
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--clr-common-black);
    display: flex;
    padding: 36px 15px 36px;
    align-items: center;
    flex-direction: column;
    gap: 12px;
    border-radius: 0px 0px 0px 8px;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.h5_nh_blog-item-content-meta span {
    writing-mode: sideways-lr;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    display: block;
}
.h5_nh_blog-item-content-title {
    color: rgb(15, 41, 31);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.5px;
    margin-bottom: 25px;
}
@media (max-width: 480px) {
    .h5_nh_blog-item-content-title {
        font-size: 17px;
    }
}
.h5_nh_blog-item-content-title:hover a {
    color: var(--clr-theme-primary);
}
.h5_nh_blog-item-content-admin {
    display: flex;
    align-items: center;
    gap: 8px;
}
.h5_nh_blog-item-content-admin img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}
.h5_nh_blog-item-content-admin span {
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    color: #A6A6A6;
    display: flex;
    align-items: center;
    gap: 5px;
}
.h5_nh_blog-item-content-admin span a {
    color: #4F4F4F;
}
.h5_nh_blog-item:hover .h5_nh_blog-item-img img {
    transform: scale(1.08);
}
.h5_nh_blog-item:hover .h5_nh_blog-item-content-meta {
    background-color: var(--clr-theme-primary);
}

.nh_inner-pagination ul {
    display: flex;
    list-style: none;
    justify-content: center;
    gap: 8px;
    align-items: center;
}
.nh_inner-pagination ul li a {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #F2F2F2;
    border-radius: 50%;
    color: var(--clr-common-black);
    font-size: 16px;
    font-weight: 600;
    line-height: 28px;
}
.nh_inner-pagination ul li a:hover {
    background: var(--clr-theme-primary);
    color: var(--clr-common-white);
    border-color: var(--clr-theme-primary);
}

.nh_blog_details-left {
    background-color: #F7F9FB;
    border-radius: 10px;
    padding: 30px;
}
@media (max-width: 480px) {
    .nh_blog_details-left {
        padding: 30px 20px;
    }
}
.nh_blog_details-content-img {
    position: relative;
    z-index: 1;
}
.nh_blog_details-content-img img {
    border-radius: 8px;
    width: 100%;
}
.nh_blog_details-content-img a {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 96px;
    height: 96px;
    background: var(--clr-common-black);
    border-radius: 50%;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-theme-primary);
}
.nh_blog_details-content-img a::after, .nh_blog_details-content-img a::before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    border-radius: 50%;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    animation-name: popupBtn;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.nh_blog_details-content-img a::before {
    animation-delay: 1s;
}
.nh_blog_details-content-title {
    color: rgb(15, 41, 31);
    font-family: Manrope;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.8px;
}
@media (max-width: 767px) {
    .nh_blog_details-content-title {
        font-size: 28px;
    }
}
@media (max-width: 480px) {
    .nh_blog_details-content-title {
        font-size: 24px;
    }
}
.nh_blog_details-content-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    row-gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.nh_blog_details-content-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(15, 41, 31, 0.7);
    font-family: Manrope;
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
}
.nh_blog_details-content-meta span i {
    color: var(--clr-theme-primary);
}
.nh_blog_details-content-meta span img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
}
.nh_blog_details-content-text {
    color: rgba(71, 85, 105, 0.7);
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}
.nh_blog_details-content blockquote {
    padding: 30px 30px 23px;
    margin: 0;
    margin-bottom: 42px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid rgb(6, 177, 110);
    border-radius: 10px;
    background: rgb(255, 255, 255);
}
.nh_blog_details-content blockquote svg {
    color: var(--clr-theme-primary);
    margin-bottom: 20px;
}
.nh_blog_details-content blockquote p {
    margin-bottom: 10px;
    color: rgb(15, 41, 31);
    font-family: Plus Jakarta Sans;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: -0.8px;
}
@media (max-width: 575px) {
    .nh_blog_details-content blockquote p {
        font-size: 22px;
    }
}
@media (max-width: 480px) {
    .nh_blog_details-content blockquote p {
        font-size: 20px;
    }
}
.nh_blog_details-content blockquote span {
    display: flex;
    justify-content: end;
}
.nh_blog_details-content blockquote cite {
    position: relative;
    z-index: 1;
    display: block;
    color: rgba(15, 41, 31, 0.7);
    font-family: Roboto;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    font-style: normal;
}
.nh_blog_details-content blockquote cite::before {
    position: absolute;
    left: -38px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    background-color: rgb(242, 242, 242);
    content: "";
}
.nh_blog_details-content-bottom {
    border-top: 1px solid rgb(242, 242, 242);
    border-bottom: 1px solid rgb(242, 242, 242);
    margin-top: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
@media (max-width: 575px) {
    .nh_blog_details-content-bottom {
        flex-wrap: wrap;
    }
}
.nh_blog_details-content-list {
    list-style: none;
}
.nh_blog_details-content-list li {
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: rgb(15, 41, 31);
    font-family: Manrope;
    font-size: 16px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0%;
    text-align: left;
}
.nh_blog_details-content-list li:last-child {
    margin-bottom: 0;
}
.nh_blog_details-content-list li i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--clr-theme-primary);
    color: var(--clr-common-white);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nh_blog_details-content-social {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nh_blog_details-content-social a {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(15, 41, 31, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 15px;
    color: var(--clr-common-black);
}
.nh_blog_details-content-social a:hover {
    background: var(--clr-theme-primary);
    border-color: var(--clr-theme-primary);
    color: var(--clr-common-white);
}
.nh_blog_details-comment {
    background: #fff;
    border-radius: 8px;
    padding: 30px 30px 30px;
    display: flex;
    align-items: start;
    gap: 15px;
}
@media (max-width: 575px) {
    .nh_blog_details-comment {
        flex-wrap: wrap;
    }
}
.nh_blog_details-comment img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    flex-shrink: 0;
}
.nh_blog_details-comment-info h5 {
    letter-spacing: -0.6px;
    margin-bottom: 2px;
    color: rgb(23, 27, 42);
    font-family: Plus Jakarta Sans;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}
.nh_blog_details-comment-info span {
    display: block;
    margin-bottom: 15px;
    color: rgb(23, 27, 42);
    font-family: Plus Jakarta Sans;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}
.nh_blog_details-comment-info p {
    margin-bottom: 20px;
    color: rgb(71, 85, 105);
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}
.nh_blog_details-comment-social {
    display: flex;
    align-items: center;
    gap: 6px;
}
.nh_blog_details-comment-social a {
    width: 28px;
    height: 28px;
    border: 1px solid rgb(242, 242, 242);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    color: var(--clr-common-black);
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.nh_blog_details-comment-social a:hover {
    background: var(--clr-theme-primary);
    border-color: var(--clr-theme-primary);
    color: var(--clr-common-white);
}
.nh_blog_details-reply h3 {
    color: rgb(15, 41, 31);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.6px;
    margin-bottom: 25px;
}
.nh_blog_details-reply form {
    background: #fff;
    border-radius: 8px;
    padding: 30px 30px;
}
@media (max-width: 480px) {
    .nh_blog_details-reply form {
        padding-left: 20px;
        padding-right: 20px;
    }
}
.nh_blog_details-reply-item input,
.nh_blog_details-reply-item textarea {
    height: 56px;
    line-height: 56px;
    width: 100%;
    padding: 0 20px;
    margin-bottom: 22px;
    box-sizing: border-box;
    border: 1px solid rgb(242, 242, 242);
    border-radius: 6px;
    background: rgb(255, 255, 255);
    color: rgba(15, 41, 31, 0.7);
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
}
.nh_blog_details-reply-item input:focus,
.nh_blog_details-reply-item textarea:focus {
    border-color: var(--clr-theme-primary);
}
.nh_blog_details-reply-item textarea {
    margin-bottom: 0;
    height: 220px;
}
.nh_blog_details-reply-item button {
    border: none;
    background: var(--clr-theme-primary);
    height: 60px;
    border-radius: 8px;
    padding: 0 30px;
    margin-top: 30px;
    color: rgb(255, 255, 255);
    font-family: Manrope;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-transform: capitalize;
}
.nh_blog_details-reply-item button:hover {
    background-color: var(--clr-common-black);
    color: #fff;
}

.nh_blog_details-post-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 767px) {
    .nh_blog_details-post-navigation {
        flex-wrap: wrap;
        row-gap: 40px;
        justify-content: center;
    }
}
.nh_blog_details-post-navigation-item {
    display: flex;
    align-items: center;
    gap: 15px;
}
.nh_blog_details-post-navigation-item .icon a {
    width: 56px;
    height: 56px;
    border: 1px solid #F2F2F2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 4px;
    color: rgb(15, 41, 31);
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.nh_blog_details-post-navigation-item .icon a:hover {
    border-color: var(--clr-theme-primary);
    color: var(--clr-theme-primary);
}
.nh_blog_details-post-navigation-item .info-2 {
    text-align: end;
}
@media (max-width: 767px) {
    .nh_blog_details-post-navigation-item .info-2 {
        text-align: start;
    }
}
.nh_blog_details-post-navigation-item .info span {
    color: rgba(15, 41, 31, 0.6);
    font-family: Manrope;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}
.nh_blog_details-post-navigation-item .info h5 {
    color: rgb(15, 41, 31);
    font-family: Manrope;
    font-size: 16px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: -0.3px;
    margin-bottom: 0;
}
.nh_blog_details-post-navigation-item .info h5:hover {
    color: var(--clr-theme-primary);
}

.nh_blog_widget-wrap {
    border-radius: 8px;
    background: rgb(42, 71, 65);
    padding: 30px 30px 40px;
    box-sizing: border-box;
    border: 1px solid rgb(245, 245, 245);
    border-radius: 12px;
    /* White */
    background: rgb(255, 255, 255);
}
@media (max-width: 480px) {
    .nh_blog_widget-wrap {
        padding: 30px 25px 40px;
    }
}
.nh_blog-widget:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 21px;
    padding-bottom: 30px;
}
.nh_blog-widget-title {
    color: rgb(255, 255, 255);
    font-size: 22px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -0.6px;
    margin-bottom: 20px;
    color: rgb(15, 41, 31);
    font-family: Plus Jakarta Sans;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -4%;
}
.nh_blog-widget form {
    position: relative;
    z-index: 1;
}
.nh_blog-widget form input {
    width: 100%;
    height: 56px;
    background: transparent;
    border: 2px solid var(--clr-theme-primary);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    padding: 0 20px;
    padding-right: 50px;
}
.nh_blog-widget form button {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 0;
}
.nh_blog-widget-post {
    display: flex;
    align-items: center;
    gap: 10px;
}
.nh_blog-widget-post-img {
    height: 90px;
    width: 90px;
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .nh_blog-widget-post-img {
        width: 80px;
        height: 80px;
    }
}
.nh_blog-widget-post-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}
.nh_blog-widget-post-content h4 {
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: -0.6px;
    margin-bottom: 1px;
    color: rgb(15, 41, 31);
    font-family: Manrope;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -4%;
    text-align: left;
    text-transform: capitalize;
}
@media (max-width: 480px) {
    .nh_blog-widget-post-content h4 {
        font-size: 16px;
    }
}
.nh_blog-widget-post-content h4:hover a {
    color: var(--clr-theme-primary);
}
.nh_blog-widget-post-content span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(15, 41, 31, 0.7);
    font-family: Plus Jakarta Sans;
    font-size: 14px;
    font-weight: 500;
    line-height: 38px;
    letter-spacing: 0%;
    text-align: left;
}
.nh_blog-widget-post-content span i {
    color: var(--clr-theme-primary);
}
.nh_blog-widget-category {
    list-style: none;
}
.nh_blog-widget-category li:not(:last-child) {
    margin-bottom: 10px;
}
.nh_blog-widget-category li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    background: #33574F;
    border-radius: 8px;
    height: 56px;
    padding: 0 20px;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    border-radius: 6px;
    /* Border */
    background: rgb(242, 242, 242);
    color: rgb(15, 41, 31);
    font-family: Plus Jakarta Sans;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: left;
}
.nh_blog-widget-category li a:hover {
    background: var(--clr-theme-primary);
    color: #fff;
}
.nh_blog-widget-tag {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 12px;
}
.nh_blog-widget-tag a {
    box-sizing: border-box;
    border: 1px solid rgb(247, 249, 251);
    border-radius: 50px;
    height: 31px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    text-transform: capitalize;
    color: rgba(23, 27, 42, 0.7);
    font-family: Plus Jakarta Sans;
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: left;
    text-transform: capitalize;
}
.nh_blog-widget-tag a:hover {
    background: var(--clr-theme-primary);
    color: #fff;
    border-color: var(--clr-theme-primary);
}

/* ///////////////////////////////////////////////////////////
02. video CSS
/////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////
Header CSS 01 Start
/////////////////////////////////////////////////////////// */
.nh_work-content-subtitle {
    border-radius: 4px;
    background: var(--clr-theme-primary-soft);
    height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    color: var(--clr-theme-primary);
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 22px;
}
.nh_work-content-title {
    color: rgb(11, 12, 15);
    font-size: 72px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -2px;
    margin-bottom: 25px;
}
@media (max-width: 1399px) {
    .nh_work-content-title {
        font-size: 65px;
    }
}
@media (max-width: 991px) {
    .nh_work-content-title {
        font-size: 50px;
    }
}
@media (max-width: 480px) {
    .nh_work-content-title {
        font-size: 32px;
    }
}

/* ///////////////////////////////////////////////////////////
Header CSS 02 Start
/////////////////////////////////////////////////////////// */
.h2_nh_work-area {
    position: relative;
    z-index: 1;
    margin-bottom: -220px;
}
.h2_nh_work-wrap {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border-radius: 10px;
    padding-left: 30px;
    padding-right: 30px;
}
@media (max-width: 480px) {
    .h2_nh_work-wrap {
        padding-left: 20px;
        padding-right: 20px;
    }
}
.h2_nh_work-content-title {
    color: rgb(255, 255, 255);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    margin-bottom: 25px;
}
@media (max-width: 767px) {
    .h2_nh_work-content-title {
        font-size: 44px;
    }
}
@media (max-width: 575px) {
    .h2_nh_work-content-title {
        font-size: 40px;
    }
}
@media (max-width: 480px) {
    .h2_nh_work-content-title {
        font-size: 30px;
    }
}
.h2_nh_work-content p {
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 33px;
}
@media (max-width: 767px) {
    .h2_nh_work-content p br {
        display: none;
    }
}

.h5_nh_work-wrap {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    min-height: 600px;
    display: flex;
    align-items: end;
}
.h5_nh_work-content {
    background: var(--clr-common-black);
    padding: 40px 50px 40px;
    margin-bottom: -100px;
    position: relative;
    z-index: 1;
}
@media (max-width: 480px) {
    .h5_nh_work-content {
        padding: 40px 25px 40px;
    }
}
.h5_nh_work-content::after {
    position: absolute;
    right: 0;
    bottom: 0;
    content: "";
    width: 20px;
    height: 20px;
    background-color: var(--clr-body-heading);
    z-index: 1;
}
.h5_nh_work-content-title {
    color: rgb(255, 255, 255);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -2px;
    margin-bottom: 41px;
}
@media (max-width: 1399px) {
    .h5_nh_work-content-title {
        font-size: 44px;
    }
}
@media (max-width: 767px) {
    .h5_nh_work-content-title {
        font-size: 36px;
    }
}
@media (max-width: 480px) {
    .h5_nh_work-content-title {
        font-size: 30px;
    }
}
.h5_nh_work-content img {
    margin-bottom: 22px;
}
.h5_nh_work-content-btn {
    height: 57px;
    display: inline-flex;
    align-items: center;
    background: var(--clr-theme-primary);
    padding: 0 28px;
    gap: 8px;
    border-radius: 50px;
    color: rgb(247, 247, 247);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}
.h5_nh_work-content-btn:hover {
    background-color: #fff;
    color: var(--clr-theme-primary);
}

/* ///////////////////////////////////////////////////////////
22. sidebar
/////////////////////////////////////////////////////////// */

/* ///////////////////////////////////////////////////////////
04. domain CSS
/////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////
Hero CSS 01 Start
/////////////////////////////////////////////////////////// */
.h2_nh_domain-area {
    position: relative;
    z-index: 1;
    margin-bottom: -180px;
}
.h2_nh_domain-wrap {
    background-color: var(--clr-common-black);
    padding: 70px 80px 70px;
    border-radius: 12px;
}
@media (max-width: 1199px) {
    .h2_nh_domain-wrap {
        padding: 70px 50px 70px;
    }
}
@media (max-width: 767px) {
    .h2_nh_domain-wrap {
        padding: 60px 40px 60px;
    }
}
@media (max-width: 575px) {
    .h2_nh_domain-wrap {
        padding: 60px 20px 60px;
    }
}
.h2_nh_domain-content {
    max-width: 820px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 1199px) {
    .h2_nh_domain-content {
        max-width: 700px;
    }
}
.h2_nh_domain-title {
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -1px;
    margin-bottom: 40px;
}
@media (max-width: 1199px) {
    .h2_nh_domain-title {
        font-size: 44px;
    }
}
@media (max-width: 767px) {
    .h2_nh_domain-title {
        font-size: 40px;
    }
}
@media (max-width: 575px) {
    .h2_nh_domain-title {
        font-size: 36px;
    }
}
@media (max-width: 480px) {
    .h2_nh_domain-title {
        font-size: 30px;
    }
}
.h2_nh_domain-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;
}
@media (max-width: 575px) {
    .h2_nh_domain-form {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 20px;
    }
}
.h2_nh_domain-form-input {
    width: 100%;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    text-align: left;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 991px) {
    .h2_nh_domain-form-input {
        padding: 0 20px;
    }
}
.h2_nh_domain-form-input input {
    height: 60px;
    line-height: 60px;
    border: none;
    background: transparent;
    width: 100%;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    padding: 0;
    padding-right: 20px;
}
.h2_nh_domain-form-input input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}
.h2_nh_domain-form-input input:-moz-placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}
.h2_nh_domain-form-input input::-moz-placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}
.h2_nh_domain-form-input input:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}
.h2_nh_domain-form-input select {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    padding: 0;
    padding-left: 30px;
    height: 60px;
}
.h2_nh_domain-form-button {
    background: var(--clr-theme-primary);
    border: none;
    color: #fff;
    height: 60px;
    border-radius: 8px;
    color: rgb(255, 255, 255);
    font-family: Manrope;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-transform: capitalize;
    padding: 0 30px;
    flex-shrink: 0;
}
.h2_nh_domain-form-option.nice-select {
    border-radius: 8px;
    border: 0;
    width: auto;
    padding: 0;
    z-index: 99;
    padding-right: 20px;
    display: flex;
    align-items: center;
    text-transform: capitalize;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    margin-left: 30px;
    height: 60px;
}
.h2_nh_domain-form-option.nice-select ul {
    background-color: #fff;
    width: auto;
    z-index: 99;
    border-radius: 4px;
    border: none;
    margin-top: 7px;
    box-shadow: 0px 6px 50px 0px rgba(27, 42, 82, 0.2);
}
.h2_nh_domain-form-option.nice-select ul li {
    color: #7F879E;
    font-size: 13px;
    font-weight: 500;
    width: 100%;
    padding: 0 20px;
    min-height: 30px;
    height: 30px;
    line-height: 30px;
}
.h2_nh_domain-form-option.nice-select .option.selected {
    font-weight: 500;
}
.h2_nh_domain-form-option.nice-select::after {
    display: none;
}
.h2_nh_domain-form-option.nice-select::before {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Pro";
    content: "\f107";
    margin-top: 2px;
    color: var(--clr-theme-primary);
}
.h2_nh_domain-form-option.nice-select.open::before {
    content: "\f106";
}
.h2_nh_domain-list {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 10px;
    justify-content: center;
}
.h2_nh_domain-list li {
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
    color: rgba(255, 255, 255, 0.65);
    position: relative;
    z-index: 1;
}
.h2_nh_domain-list li span {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    font-weight: 600;
}
.h2_nh_domain-list li:not(:first-child) {
    margin-left: 25px;
    padding-left: 25px;
}
.h2_nh_domain-list li:not(:first-child)::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    background: rgba(255, 255, 255, 0.2);
    height: 17px;
    width: 2px;
}
@media (max-width: 991px) {
    .h2_nh_domain-list li:not(:first-child) {
        margin-left: 15px;
        padding-left: 15px;
    }
}

.nh_inner_domain-item {
    box-sizing: border-box;
    border: 1px solid rgb(242, 242, 242);
    border-radius: 6px;
    padding: 30px 30px 30px;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.nh_inner_domain-item:hover {
    box-shadow: 0px 8px 40px 0px rgba(11, 12, 15, 0.08);
    background: rgb(255, 255, 255);
    border-color: #fff;
}
.nh_inner_domain-item-icon {
    margin-bottom: 22px;
}
.nh_inner_domain-item-content p {
    color: rgb(71, 85, 105);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 23px;
}
.nh_inner_domain-item-content-price {
    display: flex;
    align-items: end;
    color: rgb(6, 177, 110);
    font-size: 44px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -1px;
    border-top: 1px solid rgb(242, 242, 242);
    border-bottom: 1px solid rgb(242, 242, 242);
    padding-bottom: 19px;
    padding-top: 17px;
    margin-bottom: 30px;
}
.nh_inner_domain-item-content-price span {
    color: rgb(71, 85, 105);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
}
.nh_inner_domain-item-content-btn {
    border-radius: 8px;
    background: var(--clr-theme-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-transform: capitalize;
}
.nh_inner_domain-item-content-btn:hover {
    background-color: var(--clr-common-black);
    color: #fff;
}

.nh_domain_price-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    border-radius: 16px;
    background: rgb(255, 255, 255);
}
@media (max-width: 1199px) {
    .nh_domain_price-wrap {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 767px) {
    .nh_domain_price-wrap {
        grid-template-columns: 1fr;
    }
}
.nh_domain_price-top {
    height: 335px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nh_domain_price-item {
    border-right: 1px solid rgb(242, 242, 242);
}
.nh_domain_price-item:last-child {
    border: none;
}
@media (max-width: 1199px) {
    .nh_domain_price-item:nth-child(2) {
        border-right: 0;
    }
}
@media (max-width: 767px) {
    .nh_domain_price-item {
        border-right: 0;
    }
}
.nh_domain_price-head {
    padding-left: 35px;
    padding-right: 35px;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #fff;
    width: 100%;
}
@media (max-width: 991px) {
    .nh_domain_price-head {
        padding-left: 30px;
        padding-right: 30px;
    }
}
.nh_domain_price-head-title {
    color: rgb(6, 177, 110);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.6;
}
.nh_domain_price-head-content p {
    color: rgb(71, 85, 105);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 13px;
}
.nh_domain_price-head-content-price {
    display: flex;
    align-items: end;
    color: rgb(6, 177, 110);
    font-size: 44px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -1px;
    border-top: 1px solid rgb(242, 242, 242);
    border-bottom: 1px solid rgb(242, 242, 242);
    padding-bottom: 14px;
    padding-top: 12px;
    margin-bottom: 20px;
}
.nh_domain_price-head-content-price span {
    color: rgb(71, 85, 105);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
}
.nh_domain_price-head-content-btn {
    border-radius: 8px;
    background: var(--clr-theme-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
    height: 48px;
    border-radius: 58px;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-transform: capitalize;
}
.nh_domain_price-head-content-btn:hover {
    background-color: var(--clr-common-black);
    color: #fff;
}
.nh_domain_price-list-title li {
    border-top: 1px solid rgb(242, 242, 242);
    color: rgb(71, 85, 105);
    font-size: 16px;
    font-weight: 600;
    padding: 0 20px 0 30px;
    height: 62px;
    line-height: 62px;
}
.nh_domain_price-list-item li {
    border-top: 1px solid rgb(242, 242, 242);
    color: rgb(71, 85, 105);
    font-size: 16px;
    font-weight: 400;
    padding: 0 20px 0 35px;
    height: 62px;
    line-height: 62px;
}
@media (max-width: 991px) {
    .nh_domain_price-list-item li {
        padding-left: 30px;
    }
}
.nh_domain_price-list-item li .fa-check {
    color: var(--clr-theme-primary);
}

.nh_domain_price_2-wrap {
    border-radius: 16px;
    background: rgb(255, 255, 255);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 991px) {
    .nh_domain_price_2-wrap {
        grid-template-columns: 1fr auto 1fr;
    }
}
@media (max-width: 767px) {
    .nh_domain_price_2-wrap {
        grid-template-columns: 1fr;
    }
}
.nh_domain_price_2-single:not(:last-child) .nh_domain_price_2-item {
    border-right: 1px solid rgb(242, 242, 242);
}
@media (max-width: 767px) {
    .nh_domain_price_2-single:not(:last-child) .nh_domain_price_2-item {
        border: 0;
    }
}
.nh_domain_price_2-head {
    background: rgb(229, 248, 240);
    height: 94px;
    display: flex;
    align-items: center;
    padding: 0 60px;
}
@media (max-width: 1199px) {
    .nh_domain_price_2-head {
        padding: 0 50px;
    }
}
@media (max-width: 991px) {
    .nh_domain_price_2-head {
        padding: 0 30px;
    }
}
.nh_domain_price_2-head-title {
    color: rgb(6, 177, 110);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.5px;
    margin-bottom: 0;
}
@media (max-width: 991px) {
    .nh_domain_price_2-head-title {
        font-size: 20px;
    }
}
.nh_domain_price_2-item-common {
    height: 115px;
    display: flex;
    align-items: center;
    padding: 0 60px;
}
@media (max-width: 1199px) {
    .nh_domain_price_2-item-common {
        padding: 0 50px;
    }
}
@media (max-width: 991px) {
    .nh_domain_price_2-item-common {
        padding: 0 30px;
    }
}
.nh_domain_price_2-item-common:not(:first-child) {
    border-top: 1px solid rgb(242, 242, 242);
}
.nh_domain_price_2-item-price {
    flex-direction: column;
    align-items: start !important;
    justify-content: center;
}
.nh_domain_price_2-item-price-amount {
    color: rgb(6, 177, 110);
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.8px;
    display: flex;
    align-items: end;
    margin-bottom: 12px;
}
.nh_domain_price_2-item-price-amount span {
    color: rgb(71, 85, 105);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    display: block;
}
.nh_domain_price_2-item-price p {
    color: var(--clr-body-heading);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 0;
}
.nh_domain_price_2-item-security span {
    color: var(--clr-theme-primary);
    font-size: 20px;
}

.nh_domain_transfer-item {
    border-radius: 6px;
    background: rgb(247, 249, 251);
    position: relative;
    z-index: 1;
    padding: 44px 30px 33px;
}
.nh_domain_transfer-item::after {
    position: absolute;
    right: -20px;
    top: 30px;
    width: 40px;
    height: 40px;
    background: #fff;
    content: "";
    border-radius: 50%;
}
.nh_domain_transfer-item-number {
    width: 52px;
    height: 52px;
    background: rgb(6, 177, 110);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 50%;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 32px;
    outline: 4px solid rgba(6, 177, 110, 0.2);
}
.nh_domain_transfer-item-title {
    color: var(--clr-body-heading);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin-bottom: 23px;
}
@media (max-width: 1199px) {
    .nh_domain_transfer-item-title {
        font-size: 22px;
    }
}
.nh_domain_transfer-item-text {
    color: rgb(133, 133, 133);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 0;
}

.nh_domain_transfer_main:not(:last-child) .nh_domain_transfer-item::before {
    position: absolute;
    right: -30px;
    top: 12px;
    content: "";
    width: 50px;
    height: 40px;
    border-bottom: 2px dashed rgba(15, 41, 31, 0.2);
    z-index: 1;
}
@media (max-width: 991px) {
    .nh_domain_transfer_main:nth-child(2) .nh_domain_transfer-item::before {
        display: none;
    }
}
@media (max-width: 575px) {
    .nh_domain_transfer_main .nh_domain_transfer-item::before {
        display: none;
    }
}

/* ///////////////////////////////////////////////////////////
02. about CSS
/////////////////////////////////////////////////////////// */
@media (max-width: 1199px) {
    .nh_about-img.ml-15 {
        margin-left: 0;
    }
}
@media (max-width: 1399px) {
    .nh_about-img.mr-15 {
        margin-right: 0;
    }
}
@media (max-width: 1399px) {
    .nh_about-img.mr-35 {
        margin-right: 15px;
    }
}
@media (max-width: 1199px) {
    .nh_about-img.mr-35 {
        margin-right: 0px;
    }
}
@media (max-width: 1599px) {
    .nh_about-img.mr-50 {
        margin-right: 30px;
    }
}
@media (max-width: 1399px) {
    .nh_about-img.mr-50 {
        margin-right: 20px;
    }
}
@media (max-width: 1199px) {
    .nh_about-img.mr-50 {
        margin-right: 0px;
    }
}
@media (max-width: 1399px) {
    .nh_about-left.mr-20 {
        margin-right: 10px;
    }
}
@media (max-width: 1199px) {
    .nh_about-left.mr-20 {
        margin-right: 0;
    }
}
@media (max-width: 1399px) {
    .nh_about-left.ml-20 {
        margin-left: 10px;
    }
}
@media (max-width: 1199px) {
    .nh_about-left.ml-20 {
        margin-left: 0;
    }
}

.h2_nh_about-list ul {
    list-style: none;
}
.h2_nh_about-list ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgb(71, 85, 105);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 25px;
}
.h2_nh_about-list ul li:last-child {
    margin-bottom: 0;
}
.h2_nh_about-list ul li i {
    width: 20px;
    height: 20px;
    background: #E9F8F2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-theme-primary);
    font-size: 12px;
}

.h3_nh_about-text {
    border-radius: 8px;
    background: rgba(6, 177, 110, 0.08);
    padding: 23px 20px 23px 42px;
    position: relative;
    z-index: 1;
    width: max-content;
}
@media (max-width: 1199px) {
    .h3_nh_about-text {
        width: auto;
    }
}
.h3_nh_about-text::before {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    width: 12px;
    height: 12px;
    background: #e4f4f0;
    border-radius: 50%;
    border: 3px solid var(--clr-theme-primary);
}
.h3_nh_about-text p {
    color: rgb(6, 177, 110);
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: -0.2px;
    margin-bottom: 0;
}

.h5_nh_about-list ul {
    list-style: none;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    row-gap: 20px;
}
@media (max-width: 480px) {
    .h5_nh_about-list ul {
        grid-template-columns: 1fr;
    }
}
.h5_nh_about-list ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--clr-body-heading);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}
.h5_nh_about-list ul li i {
    width: 20px;
    height: 20px;
    background: var(--clr-theme-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
}

/* ///////////////////////////////////////////////////////////
04. section CSS
/////////////////////////////////////////////////////////// */
@media (max-width: 1599px) {
    .h2_nh_choose-img.ml-65 {
        margin-left: 40px;
    }
}
@media (max-width: 1399px) {
    .h2_nh_choose-img.ml-65 {
        margin-left: 30px;
    }
}
@media (max-width: 1199px) {
    .h2_nh_choose-img.ml-65 {
        margin-left: 0;
    }
}
@media (max-width: 991px) {
    .h2_nh_choose-img.ml-65 {
        margin-left: 0;
    }
}
@media (max-width: 1599px) {
    .h2_nh_choose-img.mr-65 {
        margin-right: 40px;
    }
}
@media (max-width: 1399px) {
    .h2_nh_choose-img.mr-65 {
        margin-right: 30px;
    }
}
@media (max-width: 1199px) {
    .h2_nh_choose-img.mr-65 {
        margin-right: 0;
    }
}
@media (max-width: 991px) {
    .h2_nh_choose-img.mr-65 {
        margin-right: 0;
    }
}
@media (max-width: 1599px) {
    .h2_nh_choose-content.mr-70 {
        margin-right: 40px;
    }
}
@media (max-width: 1399px) {
    .h2_nh_choose-content.mr-70 {
        margin-right: 30px;
    }
}
@media (max-width: 1199px) {
    .h2_nh_choose-content.mr-70 {
        margin-right: 0;
    }
}
@media (max-width: 1599px) {
    .h2_nh_choose-content.ml-70 {
        margin-left: 40px;
    }
}
@media (max-width: 1399px) {
    .h2_nh_choose-content.ml-70 {
        margin-left: 30px;
    }
}
@media (max-width: 1199px) {
    .h2_nh_choose-content.ml-70 {
        margin-left: 0;
    }
}
.h2_nh_choose-counter {
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
    row-gap: 30px;
}
.h2_nh_choose-counter-item-title {
    color: rgb(15, 41, 31);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    margin-bottom: 0;
}
.h2_nh_choose-counter-item-subtitle {
    color: rgb(71, 85, 105);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    display: block;
}

/* ///////////////////////////////////////////////////////////
02. video CSS
/////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////
Header CSS 03 Start
/////////////////////////////////////////////////////////// */
.h3_nh_headline-area {
    background-color: var(--clr-common-black);
    padding-top: 38px;
    padding-bottom: 38px;
}
@media (max-width: 991px) {
    .h3_nh_headline-area {
        padding-top: 25px;
        padding-bottom: 25px;
    }
}
.h3_nh_headline-title {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-bottom: 0;
    text-align: center;
    margin-right: 25px;
    width: max-content !important;
}
.h3_nh_headline-title .title {
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    cursor: pointer;
    display: block;
    color: rgb(255, 255, 255);
    font-size: 45px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
    position: relative;
    z-index: 1;
}
@media (max-width: 991px) {
    .h3_nh_headline-title .title {
        font-size: 40px;
    }
}
.h3_nh_headline-title .title::before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    content: "";
    background: var(--clr-theme-primary);
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    opacity: 0;
    visibility: hidden;
}
.h3_nh_headline-title .number {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    background-color: var(--clr-theme-primary);
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.6px;
    border-radius: 50%;
}
.h3_nh_headline-title:hover .title {
    color: var(--clr-theme-primary);
}
.h3_nh_headline-title:hover .title::before {
    opacity: 1;
    visibility: visible;
}

/* ///////////////////////////////////////////////////////////
Header CSS 05 Start
/////////////////////////////////////////////////////////// */
.h5_nh_headline-area {
    background-color: var(--clr-common-black);
    padding-top: 38px;
    padding-bottom: 38px;
    border-bottom: 8px solid var(--clr-theme-primary);
}
@media (max-width: 991px) {
    .h5_nh_headline-area {
        padding-top: 25px;
        padding-bottom: 25px;
    }
}
.h5_nh_headline-ticker {
    display: flex;
    gap: 65px;
}
.h5_nh_headline-title {
    display: flex;
    align-items: center;
    gap: 45px;
    margin-bottom: 0;
    text-align: center;
    width: max-content !important;
}
.h5_nh_headline-title .title {
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    cursor: pointer;
    display: block;
    color: rgb(255, 255, 255);
    font-size: 72px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
    position: relative;
    z-index: 1;
}
@media (max-width: 991px) {
    .h5_nh_headline-title .title {
        font-size: 40px;
    }
}
.h5_nh_headline-title .title::before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    content: "";
    background: var(--clr-theme-primary);
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    opacity: 0;
    visibility: hidden;
}
.h5_nh_headline-title img {
    width: 70px;
}
@media (max-width: 1199px) {
    .h5_nh_headline-title img {
        width: 60px;
    }
}
@media (max-width: 991px) {
    .h5_nh_headline-title img {
        width: 50px;
    }
}
.h5_nh_headline-title:hover .title {
    color: var(--clr-theme-primary);
}
.h5_nh_headline-title:hover .title::before {
    opacity: 1;
    visibility: visible;
}

#mobile-menu a.is-active { color: var(--accent, #03C03C); font-weight: 600; }
#mobile-menu li.is-active > a { color: var(--accent, #03C03C); }


/* ///////////////////////////////////////////////////////////
inner heading Start
/////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////
23. faq
/////////////////////////////////////////////////////////// */
.h3_nh_feature-item {
    border: 1px solid #F2F2F2;
    padding: 20px 20px 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}
@media (max-width: 1399px) {
    .h3_nh_feature-item {
        padding: 20px 15px 20px;
    }
}
.h3_nh_feature-item-icon {
    background: rgba(6, 177, 110, 0.1);
    width: 69px;
    height: 69px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--clr-theme-primary);
}
@media (max-width: 767px) {
    .h3_nh_feature-item-icon {
        width: 65px;
        height: 65px;
    }
}
.h3_nh_feature-item-content-title {
    color: var(--clr-body-heading);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    margin-bottom: 0;
}
@media (max-width: 767px) {
    .h3_nh_feature-item-content-title {
        font-size: 22px;
    }
}
.h3_nh_feature-item-content-title:hover a {
    color: var(--clr-theme-primary);
}

.h4_nh_feature-wrap {
    background-color: var(--clr-theme-primary);
    border-radius: 5px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: center;
    margin-top: -64px;
    position: relative;
    z-index: 1;
}
@media (max-width: 991px) {
    .h4_nh_feature-wrap {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 575px) {
    .h4_nh_feature-wrap {
        grid-template-columns: 1fr;
    }
}
.h4_nh_feature-item {
    padding: 30px 30px 30px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-right: 1px solid rgba(229, 248, 240, 0.25);
}
@media (max-width: 1199px) {
    .h4_nh_feature-item {
        padding: 30px 20px 30px;
    }
}
@media (max-width: 991px) {
    .h4_nh_feature-item {
        border-bottom: 1px solid rgba(229, 248, 240, 0.25);
        border-radius: 0;
    }
}
@media (max-width: 575px) {
    .h4_nh_feature-item {
        justify-content: center;
        border-right: 0;
    }
}
.h4_nh_feature-item-icon {
    background: #fff;
    width: 69px;
    height: 69px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--clr-theme-primary);
    flex-shrink: 0;
}
@media (max-width: 1199px) {
    .h4_nh_feature-item-icon {
        width: 60px;
        height: 60px;
    }
    .h4_nh_feature-item-icon svg {
        width: 26px;
    }
}
.h4_nh_feature-item-content-title {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    margin-bottom: 0;
}
@media (max-width: 1199px) {
    .h4_nh_feature-item-content-title {
        font-size: 22px;
    }
}

.inner_nh_feature-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 1199px) {
    .inner_nh_feature-wrap {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 767px) {
    .inner_nh_feature-wrap {
        grid-template-columns: 1fr;
    }
}

.inner_nh_feature-item {
    padding: 69px 30px 62px;
    border: 1px solid rgb(242, 242, 242);
    position: relative;
    z-index: 1;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.inner_nh_feature-item:first-child {
    border-top: 0;
    border-left: 0;
}
.inner_nh_feature-item:nth-child(2) {
    border-top: 0;
    border-left: 0;
    border-right: 0;
}
.inner_nh_feature-item:nth-child(3) {
    border-top: 0;
    border-right: 0;
}
.inner_nh_feature-item:nth-child(4) {
    border-top: 0;
    border-left: 0;
    border-bottom: 0;
}
.inner_nh_feature-item:nth-child(5) {
    border: 0;
}
.inner_nh_feature-item:last-child {
    border-bottom: 0;
    border-right: 0;
    border-top: 0;
}
.inner_nh_feature-item svg {
    margin-bottom: 15px;
    color: var(--clr-theme-primary);
}
.inner_nh_feature-item-title {
    color: var(--clr-body-heading);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.8px;
    margin-bottom: 13px;
    padding-bottom: 15px;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    position: relative;
    z-index: 1;
}
.inner_nh_feature-item-title::before {
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    width: 5%;
    height: 1px;
    background-color: transparent;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.inner_nh_feature-item p {
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    color: rgb(133, 133, 133);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 0;
}
.inner_nh_feature-item-number {
    position: absolute;
    right: 30px;
    bottom: 30px;
    font-size: 48px;
    font-weight: 700;
    display: block;
    font-family: "Manrope", sans-serif;
    line-height: 1;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px var(--clr-body-heading);
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.inner_nh_feature-item:hover {
    background-color: #F2F2F2;
}
.inner_nh_feature-item:hover .inner_nh_feature-item-title::before {
    width: 100%;
    background-color: var(--clr-theme-primary);
}
.inner_nh_feature-item:hover .inner_nh_feature-item-number {
    -webkit-text-stroke: 2px var(--clr-theme-primary);
}
.inner_nh_feature-item.active {
    background-color: #F2F2F2;
}
.inner_nh_feature-item.active .inner_nh_feature-item-title::before {
    width: 100%;
    background-color: var(--clr-theme-primary);
}
.inner_nh_feature-item.active .inner_nh_feature-item-number {
    -webkit-text-stroke: 2px var(--clr-theme-primary);
}

/* ///////////////////////////////////////////////////////////
02. cta CSS
/////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////
Header CSS o1 Start
/////////////////////////////////////////////////////////// */
.nh_cta-area {
    margin-bottom: -125px;
    position: relative;
    z-index: 1;
}
.nh_cta-wrap {
    background: var(--clr-theme-primary);
    border-radius: 10px;
    padding: 60px 80px 70px;
    display: flex;
    align-items: center;
    gap: 20px;
    row-gap: 30px;
}
@media (max-width: 1199px) {
    .nh_cta-wrap {
        padding: 60px 50px 70px;
    }
}
@media (max-width: 991px) {
    .nh_cta-wrap {
        padding: 50px 50px 60px;
        flex-wrap: wrap;
    }
}
@media (max-width: 767px) {
    .nh_cta-wrap {
        padding: 50px 40px 60px;
    }
}
@media (max-width: 575px) {
    .nh_cta-wrap {
        padding: 40px 30px 50px;
    }
}
.nh_cta-title {
    width: 500px;
}
@media (max-width: 1199px) {
    .nh_cta-title {
        width: 340px;
    }
}
@media (max-width: 991px) {
    .nh_cta-title {
        width: 100%;
    }
}
.nh_cta-title h2 {
    color: rgb(255, 255, 255);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    margin-bottom: 0;
}
@media (max-width: 1199px) {
    .nh_cta-title h2 {
        font-size: 44px;
    }
}
@media (max-width: 991px) {
    .nh_cta-title h2 {
        font-size: 42px;
    }
}
@media (max-width: 575px) {
    .nh_cta-title h2 {
        font-size: 40px;
    }
}
@media (max-width: 480px) {
    .nh_cta-title h2 {
        font-size: 34px;
    }
}
.nh_cta-form {
    width: calc(100% - 520px);
}
@media (max-width: 1199px) {
    .nh_cta-form {
        width: calc(100% - 360px);
    }
}
@media (max-width: 991px) {
    .nh_cta-form {
        width: 100%;
    }
}
.nh_cta-form form {
    display: flex;
    align-items: center;
    gap: 20px;
}
@media (max-width: 480px) {
    .nh_cta-form form {
        flex-wrap: wrap;
    }
}
.nh_cta-form form input {
    height: 60px;
    border-radius: 10px;
    border: none;
    padding: 0 20px;
    color: rgb(133, 133, 133);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: rgba(133, 133, 133, 0.5);
    width: 100%;
}
.nh_cta-form form button {
    background: var(--clr-common-black);
    border: none;
    border-radius: 10px;
    height: 60px;
    padding: 0 40px;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-transform: capitalize;
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .nh_cta-form form button {
        width: 100%;
    }
}

/* ///////////////////////////////////////////////////////////
02. price CSS
/////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////
Header CSS 01 Start
/////////////////////////////////////////////////////////// */
.h5_nh_counter-area {
    margin-top: -110px;
    position: relative;
    z-index: 1;
}
.h5_nh_counter-wrap {
    background: var(--clr-theme-primary);
    border-radius: 16px;
    padding: 50px 55px 55px;
    display: grid;
    grid-template-columns: 1fr 300px 300px 1fr;
}
@media (max-width: 1199px) {
    .h5_nh_counter-wrap {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}
@media (max-width: 991px) {
    .h5_nh_counter-wrap {
        grid-template-columns: 1fr 1fr;
        row-gap: 25px;
    }
}
@media (max-width: 767px) {
    .h5_nh_counter-wrap {
        padding: 50px 20px 55px;
    }
}
@media (max-width: 575px) {
    .h5_nh_counter-wrap {
        grid-template-columns: 1fr;
        padding: 50px 20px 55px;
    }
}
.h5_nh_counter-item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.h5_nh_counter-item::after {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    width: 1px;
    height: 105px;
    background: url("../../assets/images/bg/counter-line.png");
}
@media (max-width: 575px) {
    .h5_nh_counter-item::after {
        display: none;
    }
}
.h5_nh_counter-item:first-child {
    align-items: start;
}
@media (max-width: 991px) {
    .h5_nh_counter-item:first-child {
        align-items: center;
    }
}
@media (max-width: 991px) {
    .h5_nh_counter-item:nth-child(2)::after {
        display: none;
    }
}
.h5_nh_counter-item:last-child {
    align-items: end;
}
@media (max-width: 991px) {
    .h5_nh_counter-item:last-child {
        align-items: center;
    }
}
.h5_nh_counter-item:last-child::after {
    display: none;
}
.h5_nh_counter-item-title {
    color: rgb(255, 255, 255);
    font-size: 72px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 20px;
}
@media (max-width: 1199px) {
    .h5_nh_counter-item-title {
        font-size: 60px;
    }
}
.h5_nh_counter-item-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.2px;
    display: block;
    position: relative;
    z-index: 1;
}
.h5_nh_counter-item-subtitle::before {
    position: absolute;
    left: 50%;
    top: 50%;
    content: "";
    transform: translate(-50%, -50%) rotate(180deg);
    width: 61px;
    height: 61px;
    background: linear-gradient(180deg, rgb(252, 252, 252), rgba(252, 252, 252, 0) 100%);
    opacity: 0.15;
    border-radius: 50%;
}

/* ///////////////////////////////////////////////////////////
02. price CSS
/////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////
Header CSS 01 Start
/////////////////////////////////////////////////////////// */
.h5_nh_project-wrap {
    position: relative;
    z-index: 1;
}
.h5_nh_project-btn a {
    border-radius: 50px;
}
.h5_nh_project-item {
    display: flex;
    align-items: center;
    padding: 30px;
    background: #fff;
}
@media (max-width: 991px) {
    .h5_nh_project-item {
        flex-wrap: wrap;
        gap: 30px;
    }
}
@media (max-width: 480px) {
    .h5_nh_project-item {
        padding: 30px 20px;
    }
}
.h5_nh_project-item-img {
    width: 48.7%;
    flex-shrink: 0;
}
@media (max-width: 991px) {
    .h5_nh_project-item-img {
        width: 100%;
    }
}
.h5_nh_project-item-img img {
    width: 100%;
}
.h5_nh_project-item-content {
    padding: 20px 50px 20px 20px;
}
@media (max-width: 1199px) {
    .h5_nh_project-item-content {
        padding: 0;
        padding-right: 20px;
    }
}
@media (max-width: 991px) {
    .h5_nh_project-item-content {
        padding: 0;
    }
}
.h5_nh_project-item-content img {
    margin-bottom: 26px;
}
.h5_nh_project-item-content-title {
    color: rgb(11, 12, 15);
    font-size: 28px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: -1px;
}
@media (max-width: 1199px) {
    .h5_nh_project-item-content-title {
        font-size: 26px;
    }
}
@media (max-width: 575px) {
    .h5_nh_project-item-content-title {
        font-size: 24px;
    }
}
.h5_nh_project-item-content-text {
    color: rgb(133, 133, 133);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}

.h5_nh_project-navigation div {
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}
.h5_nh_project-navigation div.h5_nh_project-next {
    left: auto;
    right: -24px;
}
.h5_nh_project-navigation.nh_navigation {
    display: flex;
    gap: 15px;
    align-items: center;
}
.h5_nh_project-navigation.nh_navigation div {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    color: var(--clr-common-black);
    cursor: pointer;
    box-shadow: 0px 8px 48px 0px rgba(0, 0, 0, 0.12);
    background: rgb(255, 255, 255);
}
.h5_nh_project-navigation.nh_navigation div:hover {
    background: var(--clr-theme-primary);
    color: var(--clr-common-white);
    border-color: var(--clr-theme-primary);
}

.nh_inner_project-item {
    position: relative;
    z-index: 1;
}
.nh_inner_project-item-img img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
}
.nh_inner_project-item-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    border-radius: 8px;
    background: rgba(15, 41, 31, 0.8);
    padding: 30px 20px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100% - 40px);
    width: calc(100% - 40px);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.nh_inner_project-item-content-subtitle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 10px;
    background: var(--clr-theme-primary);
    border-radius: 5px;
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 23px;
}
.nh_inner_project-item-content-title {
    color: rgb(255, 255, 255);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.6px;
    margin-bottom: 25px;
}
.nh_inner_project-item-content-title:hover a {
    color: var(--clr-theme-primary);
}
.nh_inner_project-item-content-btn {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #fff;
    color: #fff;
    margin-left: auto;
    margin-right: auto;
}
.nh_inner_project-item-content-btn:hover {
    background-color: var(--clr-theme-primary);
    color: #fff;
    border-color: var(--clr-theme-primary);
}
.nh_inner_project-item:hover .nh_inner_project-item-content {
    opacity: 1;
    visibility: visible;
}

.nh_project_details-list ul {
    list-style: none;
}
.nh_project_details-list ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    /* Paragraph */
    color: rgb(71, 85, 105);
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}
.nh_project_details-list ul li:last-child {
    margin-bottom: 0;
}
.nh_project_details-list ul li i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--clr-theme-primary);
    color: var(--clr-common-white);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nh_project_details-img {
    position: relative;
    z-index: 1;
}
.nh_project_details-img img {
    border-radius: 8px;
    width: 100%;
}
.nh_project_details-img a {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 86px;
    height: 86px;
    background: var(--clr-theme-primary);
    border-radius: 50%;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-common-white);
}
.nh_project_details-img a::after, .nh_project_details-img a::before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    border-radius: 50%;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    animation-name: popupBtn;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.nh_project_details-img a::before {
    animation-delay: 1s;
}

.nh_project_details-info {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-radius: 8px;
    background: rgba(6, 177, 110, 0.07);
}
@media (max-width: 1199px) {
    .nh_project_details-info {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 991px) {
    .nh_project_details-info {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 767px) {
    .nh_project_details-info {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .nh_project_details-info {
        grid-template-columns: repeat(1, 1fr);
    }
}
.nh_project_details-info-item {
    padding: 32px 30px 34px;
    position: relative;
    z-index: 1;
}
@media (max-width: 1399px) {
    .nh_project_details-info-item {
        padding: 32px 26px 34px;
    }
}
.nh_project_details-info-item::after {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    background-color: rgba(71, 85, 105, 0.1);
    width: 1px;
    height: 53px;
}
.nh_project_details-info-item:last-child::after {
    display: none;
}
.nh_project_details-info-item span {
    color: rgb(71, 85, 105);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    display: block;
    margin-bottom: 3px;
}
.nh_project_details-info-item p {
    color: #475569;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.4px;
    margin-bottom: 0;
}

@keyframes popupBtn {
    0% {
        transform: scale(1);
        opacity: 0;
    }
    50% {
        transform: scale(1.6);
        opacity: 0.3;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}
/* ///////////////////////////////////////////////////////////
04. section CSS
/////////////////////////////////////////////////////////// */
.h5_nh_process-item {
    background-color: #fff;
    border-radius: 8px;
    position: relative;
    z-index: 1;
    padding: 30px 30px 23px;
}
.h5_nh_process-item::after {
    position: absolute;
    right: -20px;
    top: 30px;
    width: 40px;
    height: 40px;
    background: #F7F7F7;
    content: "";
    border-radius: 50%;
}
.h5_nh_process-item-number {
    width: 40px;
    height: 40px;
    background: rgb(15, 41, 31);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 700;
    line-height: 28px;
    margin-bottom: 22px;
}
.h5_nh_process-item-title {
    color: rgb(11, 12, 15);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
}
.h5_nh_process-item-text {
    color: rgb(133, 133, 133);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 0;
}

.h5_nh_process_main:not(:last-child) .h5_nh_process-item::before {
    position: absolute;
    right: -30px;
    top: 12px;
    content: "";
    width: 50px;
    height: 40px;
    border-bottom: 2px dashed rgba(15, 41, 31, 0.2);
    z-index: 1;
}
@media (max-width: 991px) {
    .h5_nh_process_main:nth-child(2) .h5_nh_process-item::before {
        display: none;
    }
}
@media (max-width: 575px) {
    .h5_nh_process_main .h5_nh_process-item::before {
        display: none;
    }
}

/* ///////////////////////////////////////////////////////////
02. video CSS
/////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////
Header CSS o1 Start
/////////////////////////////////////////////////////////// */
.h5_nh_team-item {
    border-radius: 0px 0px 8px 8px;
    background: rgb(247, 247, 247);
}
.h5_nh_team-item-img {
    border-radius: 0px 0px 8px 8px;
    position: relative;
    z-index: 1;
}
.h5_nh_team-item-img img {
    width: 100%;
}
.h5_nh_team-item-social {
    position: absolute;
    right: 20px;
    bottom: -38px;
    border-radius: 70px;
    cursor: pointer;
    overflow: hidden;
}
.h5_nh_team-item-social ul {
    padding-top: 20px;
    padding-bottom: 20px;
    background: var(--clr-theme-primary);
    border-radius: 70px 70px 0 0;
    padding-bottom: 40px;
    margin-bottom: -20px;
    transform: translateY(100px);
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    border: 3px solid #fff;
    border-bottom: 0;
    opacity: 0;
    visibility: hidden;
}
.h5_nh_team-item-social ul li a {
    color: #fff;
    font-size: 18px;
    line-height: 1;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.h5_nh_team-item-social ul li:not(:last-child) a {
    padding-bottom: 23px;
}
.h5_nh_team-item-social span {
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    z-index: 2;
    position: relative;
    display: block;
    border: 3px solid transparent;
    border-radius: 0 0 70px 70px;
    border-top: 0;
}
.h5_nh_team-item-social span i {
    width: 50px;
    height: 50px;
    background: var(--clr-common-black);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 70px;
    cursor: pointer;
    outline: 3px solid #fff;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.h5_nh_team-item-social:hover ul {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}
.h5_nh_team-item-social:hover span {
    border-radius: 0 0 70px 70px;
    border-color: #fff;
}
.h5_nh_team-item-social:hover span i {
    outline: 0;
}
.h5_nh_team-item-content {
    padding: 20px 25px 22px;
}
.h5_nh_team-item-content-title {
    color: rgb(11, 12, 15);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    margin-bottom: 6px;
}
.h5_nh_team-item-content-title:hover a {
    color: var(--clr-theme-primary);
}
.h5_nh_team-item-content p {
    color: rgb(133, 133, 133);
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0;
}

.inner_nh_team-area .h5_nh_team-item-content {
    background: #fff;
}

.nh_team_details-img img {
    width: 100%;
    border-radius: 8px;
}
@media (max-width: 1399px) {
    .nh_team_details-img {
        margin-right: 30px;
    }
}
@media (max-width: 1199px) {
    .nh_team_details-img {
        margin-right: 0;
    }
}
.nh_team_details-contact {
    display: grid;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 40px;
    border-radius: 8px;
    background: rgb(247, 249, 251);
}
@media (max-width: 480px) {
    .nh_team_details-contact {
        grid-template-columns: 1fr;
    }
}
.nh_team_details-contact-item {
    padding: 0 25px;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.nh_team_details-contact-item:first-child {
    border-bottom: 1px solid rgba(15, 41, 31, 0.06);
    border-right: 1px solid rgba(15, 41, 31, 0.06);
}
@media (max-width: 480px) {
    .nh_team_details-contact-item:first-child {
        border-right: 0;
    }
}
.nh_team_details-contact-item:nth-child(2) {
    border-bottom: 1px solid rgba(15, 41, 31, 0.06);
}
.nh_team_details-contact-item:nth-child(3) {
    border-right: 1px solid rgba(15, 41, 31, 0.06);
}
@media (max-width: 480px) {
    .nh_team_details-contact-item:nth-child(3) {
        border-bottom: 1px solid rgba(15, 41, 31, 0.06);
        border-right: 0;
    }
}
.nh_team_details-contact-item span {
    display: block;
    color: rgba(15, 41, 31, 0.5);
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.nh_team_details-contact-item a, .nh_team_details-contact-item p {
    display: block;
    margin-bottom: 0;
    color: rgb(15, 41, 31);
    font-family: Manrope;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.4px;
}

.nh_skill-content-progress {
    margin-bottom: 24px;
}
.nh_skill-content-progress .progress-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 10px;
}
.nh_skill-content-progress .progress-title p {
    margin-bottom: 0;
    color: rgb(71, 85, 105);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.nh_skill-content-progress .progress-title span {
    display: block;
    color: rgb(71, 85, 105);
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
}
.nh_skill-content-progress .progress {
    height: 10px;
    border-radius: 20px;
    background-color: rgb(229, 248, 240);
}
.nh_skill-content-progress .progress-bar {
    background-color: var(--clr-theme-primary);
    border-radius: 20px;
}

.w-80 {
    width: 80%;
}

.w-86 {
    width: 86%;
}

.w-92 {
    width: 92%;
}

/* ///////////////////////////////////////////////////////////
02. about CSS
/////////////////////////////////////////////////////////// */
.nh_breadcrumb-wrap {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    z-index: 1;
    min-height: 480px;
    padding-top: 223px;
    padding-bottom: 160px;
}
.nh_breadcrumb-wrap-2 {
    padding-top: 240px;
    padding-bottom: 198px;
}
.nh_breadcrumb-wrap-3 {
    padding-top: 200px;
}
.nh_breadcrumb-wrap::before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(15, 41, 31, 0.75);
    z-index: -1;
}
.nh_breadcrumb-content-title {
    color: rgb(255, 255, 255);
    font-size: 48px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -1px;
    margin-bottom: 12px;
}
@media (max-width: 575px) {
    .nh_breadcrumb-content-title {
        font-size: 42px;
    }
}
@media (max-width: 480px) {
    .nh_breadcrumb-content-title {
        font-size: 36px;
    }
}
.nh_breadcrumb-content-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.nh_breadcrumb-content-list a {
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.5px;
    display: block;
}
.nh_breadcrumb-content-list a:hover {
    color: var(--clr-theme-primary);
}
.nh_breadcrumb-content-list span {
    color: var(--clr-theme-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
}
.nh_breadcrumb-content-list span::before {
    display: inline-block;
    font-family: "Font Awesome 6 Pro";
    content: "\f105";
    font-size: 14px;
    font-weight: 600;
    margin-right: 10px;
    margin-top: 1px;
}

/* ///////////////////////////////////////////////////////////
02. about CSS
/////////////////////////////////////////////////////////// */
.nh_inner_contact-title {
    color: rgb(29, 29, 29);
    font-size: 32px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: -0.8px;
}
.nh_inner_contact-form {
    border-radius: 8px;
    background: rgb(247, 249, 251);
    padding: 40px 30px 40px;
}
@media (max-width: 480px) {
    .nh_inner_contact-form {
        padding-left: 20px;
        padding-right: 20px;
    }
}
.nh_inner_contact-form input,
.nh_inner_contact-form textarea {
    width: 100%;
    margin-bottom: 25px;
    color: #A3A3A3;
    padding: 0 20px;
    box-sizing: border-box;
    border: 1px solid #fff;
    border-radius: 6px;
    background: rgb(255, 255, 255);
    font-size: 15px;
    font-weight: 400;
    line-height: 56px;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.nh_inner_contact-form input::-webkit-input-placeholder,
.nh_inner_contact-form textarea::-webkit-input-placeholder {
    color: #A3A3A3;
    font-size: 16px;
}
.nh_inner_contact-form input:-moz-placeholder,
.nh_inner_contact-form textarea:-moz-placeholder {
    color: #A3A3A3;
    font-size: 16px;
}
.nh_inner_contact-form input::-moz-placeholder,
.nh_inner_contact-form textarea::-moz-placeholder {
    color: #A3A3A3;
    font-size: 16px;
}
.nh_inner_contact-form input:-ms-input-placeholder,
.nh_inner_contact-form textarea:-ms-input-placeholder {
    color: #A3A3A3;
    font-size: 16px;
}
.nh_inner_contact-form input:focus,
.nh_inner_contact-form textarea:focus {
    border-color: var(--clr-theme-primary);
}
.nh_inner_contact-form textarea {
    height: 240px;
    margin-bottom: 30px;
    resize: none;
}
.nh_inner_contact-form-btn {
    border-radius: 8px;
    background: var(--clr-theme-primary);
    text-transform: capitalize;
    height: 60px;
    display: inline-flex;
    align-items: center;
    padding: 0 30px;
    border: 0;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-transform: capitalize;
}
.nh_inner_contact-form-btn:hover {
    background-color: var(--clr-common-black);
    color: var(--clr-common-white);
}
.nh_inner_contact-form .nice-select {
    height: 56px;
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    border: 1px solid #fff;
    border-radius: 8px;
    margin-bottom: 25px;
    color: #A3A3A3;
    font-size: 15px;
    line-height: 56px;
    font-weight: 400;
    padding: 0 20px;
}
.nh_inner_contact-form .nice-select::after {
    border-bottom: 2px solid #A3A3A3;
    border-right: 2px solid #A3A3A3;
    content: "";
    display: block;
    height: 10px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 21px;
    top: 50%;
    transform-origin: 50% 50%;
    transform: rotate(45deg) translateY(-50%);
    transition: all 0.3s ease-in-out;
    width: 9.5px;
}
.nh_inner_contact-form .nice-select ul {
    width: 100%;
    border-radius: 8px;
    border: none;
    background-color: #fff;
    margin-top: 4px;
    border: 1px solid var(--clr-theme-primary);
}
.nh_inner_contact-form .nice-select ul li {
    color: var(--clr-common-black);
    font-size: 15px;
    font-weight: 400;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    min-height: 50px;
}
.nh_inner_contact-form .nice-select ul li.selected {
    font-weight: 400;
}
.nh_inner_contact-form .nice-select ul li:hover {
    background-color: var(--clr-theme-primary);
    color: #fff;
}
.nh_inner_contact-form .nice-select .option.focus, .nh_inner_contact-form .nice-select .nice-select .option.selected.focus {
    background-color: var(--clr-theme-primary);
    color: var(--clr-common-black);
}
.nh_inner_contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.nh_inner_contact-item-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-sizing: border-box;
    background: rgba(6, 177, 110, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-theme-primary);
}
.nh_inner_contact-item-info span {
    display: block;
    color: rgba(15, 41, 31, 0.5);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 3px;
}
.nh_inner_contact-item-info p, .nh_inner_contact-item-info a {
    color: rgba(15, 41, 31, 0.9);
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.4px;
    margin-bottom: 0;
    display: block;
}
.nh_inner_contact-item-info a:hover {
    color: var(--clr-theme-primary);
}
@media (max-width: 1599px) {
    .nh_inner_contact-left.ml-70 {
        margin-left: 50px;
    }
}
@media (max-width: 1399px) {
    .nh_inner_contact-left.ml-70 {
        margin-left: 30px;
    }
}
@media (max-width: 1199px) {
    .nh_inner_contact-left.ml-70 {
        margin-left: 0px;
    }
}
@media (max-width: 1399px) {
    .nh_inner_contact-img.ml-35 {
        margin-left: 15px;
    }
}
@media (max-width: 1199px) {
    .nh_inner_contact-img.ml-35 {
        margin-left: 0px;
    }
}

.nh_inner_contact_radius {
    border-radius: 60px;
}

.nh_inner_map-wrap {
    position: relative;
    z-index: 1;
}
.nh_inner_map-wrap iframe {
    width: 100%;
    height: 650px;
}
.nh_inner_map-item_1 {
    position: absolute;
    left: 30%;
    top: 250px;
    z-index: 1;
    transform: translateX(-50%);
}
.nh_inner_map-item_1::before {
    position: absolute;
    left: 50%;
    top: -43px;
    content: "";
    width: 25px;
    height: 25px;
    background: var(--clr-theme-primary);
    border-radius: 50%;
    border: 6px solid var(--clr-common-black);
    transform: translateX(-50%);
    cursor: pointer;
}
.nh_inner_map-item_2 {
    position: absolute;
    left: 50%;
    top: 190px;
    transform: translateX(-50%);
    z-index: 1;
}
.nh_inner_map-item_2::before {
    position: absolute;
    left: 50%;
    top: -43px;
    content: "";
    width: 25px;
    height: 25px;
    background: var(--clr-theme-primary);
    border-radius: 50%;
    border: 6px solid var(--clr-common-black);
    transform: translateX(-50%);
    cursor: pointer;
}
.nh_inner_map-item-content {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    background: #fff;
    width: 320px;
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.15);
}
.nh_inner_map-item-head {
    display: flex;
    align-items: center;
    background: var(--clr-theme-primary);
    padding: 23px 25px 23px;
    justify-content: space-between;
    gap: 20px;
    border-radius: 8px 8px 0 0;
    position: relative;
    z-index: 1;
}
.nh_inner_map-item-head::before {
    position: absolute;
    left: 50%;
    top: -7px;
    transform: translateX(-50%) rotate(45deg);
    content: "";
    width: 14px;
    height: 14px;
    background: var(--clr-theme-primary);
}
.nh_inner_map-item-head h4 {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: -1px;
    margin-bottom: 0;
}
.nh_inner_map-item-head span {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: -1px;
    display: block;
}
.nh_inner_map-item-info {
    padding: 24px 25px 24px;
}
.nh_inner_map-item-info p {
    color: rgb(15, 41, 31);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-transform: capitalize;
    margin-bottom: 0;
    display: grid;
    grid-template-columns: 90px 1fr;
}
.nh_inner_map-item-info p:not(:last-child) {
    margin-bottom: 14px;
}
.nh_inner_map-item-info p span {
    color: rgb(71, 85, 105);
    display: block;
}

.nh_inner_map-item_1:hover .nh_inner_map-item-content,
.nh_inner_map-item_2:hover .nh_inner_map-item-content {
    opacity: 1;
    visibility: visible;
}

/* ///////////////////////////////////////////////////////////
19. error
/////////////////////////////////////////////////////////// */
.nh_error-wrap img {
    margin-bottom: 45px;
}
@media (max-width: 1199px) {
    .nh_error-wrap {
        margin-left: 15%;
        margin-right: 15%;
    }
}
@media (max-width: 767px) {
    .nh_error-wrap {
        margin-left: 10%;
        margin-right: 10%;
    }
}
@media (max-width: 575px) {
    .nh_error-wrap {
        margin-left: 5%;
        margin-right: 5%;
    }
}
.nh_error-content h2 {
    color: rgb(20, 20, 20);
    font-size: 44px;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    letter-spacing: -1px;
    margin-bottom: 23px;
}
@media (max-width: 1199px) {
    .nh_error-content h2 {
        font-size: 38px;
    }
}
@media (max-width: 991px) {
    .nh_error-content h2 {
        font-size: 36px;
    }
}
@media (max-width: 575px) {
    .nh_error-content h2 {
        font-size: 34px;
    }
}
@media (max-width: 480px) {
    .nh_error-content h2 {
        font-size: 28px;
    }
}
.nh_error-content p {
    color: rgb(71, 85, 105);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    text-align: center;
    margin-bottom: 33px;
}
@media (max-width: 991px) {
    .nh_error-content p br {
        display: none;
    }
}
@media (max-width: 767px) {
    .nh_error-content p {
        font-size: 16px;
    }
}

/* ///////////////////////////////////////////////////////////
02. price CSS
/////////////////////////////////////////////////////////// */
.nh_hosting_price-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 390px 1fr 1fr 1fr;
    border-radius: 16px;
    background: rgb(255, 255, 255);
}
@media (max-width: 1199px) {
    .nh_hosting_price-wrap {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 767px) {
    .nh_hosting_price-wrap {
        grid-template-columns: 1fr;
    }
}
.nh_hosting_price-top {
    height: 228px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nh_hosting_price-item {
    border-right: 1px solid rgb(242, 242, 242);
}
.nh_hosting_price-item:last-child {
    border: none;
}
@media (max-width: 1199px) {
    .nh_hosting_price-item:nth-child(2) {
        border-right: 0;
    }
}
@media (max-width: 767px) {
    .nh_hosting_price-item {
        border-right: 0;
    }
}
.nh_hosting_price-head {
    padding-left: 35px;
    padding-right: 35px;
    padding-bottom: 30px;
    padding-top: 30px;
    background-color: #fff;
    text-align: center;
    width: 100%;
}
@media (max-width: 991px) {
    .nh_hosting_price-head {
        padding-left: 30px;
        padding-right: 30px;
    }
}
.nh_hosting_price-head-heading {
    color: rgb(6, 177, 110);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1px;
    margin-bottom: 0;
}
.nh_hosting_price-head-title {
    color: rgb(6, 177, 110);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.6;
    margin-bottom: 5px;
}
.nh_hosting_price-head-price {
    display: flex;
    justify-content: center;
    color: rgb(6, 177, 110);
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -1px;
    margin-bottom: 15px;
}
.nh_hosting_price-head span {
    color: rgb(71, 85, 105);
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 13px;
    display: block;
}
.nh_hosting_price-head-btn {
    border-radius: 8px;
    background: var(--clr-theme-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
    height: 48px;
    border-radius: 58px;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-transform: capitalize;
}
.nh_hosting_price-head-btn:hover {
    background-color: var(--clr-common-black);
    color: #fff;
}
.nh_hosting_price-list-title li {
    border-top: 1px solid rgb(242, 242, 242);
    color: rgb(71, 85, 105);
    font-size: 16px;
    font-weight: 600;
    padding: 0 20px 0 30px;
    height: 62px;
    line-height: 62px;
    display: flex;
    align-items: center;
}
.nh_hosting_price-list-item li {
    border-top: 1px solid rgb(242, 242, 242);
    color: rgb(71, 85, 105);
    font-size: 16px;
    font-weight: 400;
    padding: 0 20px 0 35px;
    height: 62px;
    line-height: 62px;
    display: flex;
    align-items: center;
}
@media (max-width: 991px) {
    .nh_hosting_price-list-item li {
        padding-left: 30px;
    }
}
.nh_hosting_price-list-item li .fa-check {
    color: var(--clr-theme-primary);
}

.nh_hosting_details-wrap {
    border-radius: 12px;
    background: rgb(247, 249, 251);
    padding: 30px 30px;
}
@media (max-width: 480px) {
    .nh_hosting_details-wrap {
        padding: 30px 20px;
    }
}
.nh_hosting_details-img img {
    width: 100%;
}
.nh_hosting_details-title {
    color: rgb(15, 41, 31);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.8px;
    text-transform: capitalize;
}
@media (max-width: 480px) {
    .nh_hosting_details-title {
        font-size: 28px;
    }
}
.nh_hosting_details-text {
    color: rgb(71, 85, 105);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}
.nh_hosting_details-title_2 {
    color: rgb(15, 41, 31);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
}
.nh_hosting_details-map {
    border-radius: 10px;
    background: rgb(15, 41, 31);
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nh_hosting_details-map img {
    width: 78%;
}
.nh_hosting_details-counter {
    border-radius: 8px;
    background: rgb(255, 255, 255);
    padding: 35px 50px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 30px;
}
@media (max-width: 767px) {
    .nh_hosting_details-counter {
        padding: 35px 40px 32px;
        justify-content: center;
    }
}
.nh_hosting_details-counter-item {
    width: 130px;
    text-align: center;
}
.nh_hosting_details-counter-content {
    position: relative;
    z-index: 1;
    width: 130px;
    height: 130px;
    margin-bottom: 18px;
}
.nh_hosting_details-counter-circle {
    width: 130px;
    height: 130px;
    transform: rotateX(-190deg) rotate(270deg);
}
.nh_hosting_details-counter-number {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.nh_hosting_details-counter-number span {
    color: rgb(6, 177, 110);
    font-family: Manrope;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.8px;
    text-transform: uppercase;
}
.nh_hosting_details-counter-year {
    color: rgb(15, 41, 31);
    font-family: Manrope;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.2px;
    text-transform: uppercase;
    margin-bottom: 0;
}
.nh_hosting_details-widget {
    border: 1px solid rgb(242, 242, 242);
    border-radius: 12px;
    background: rgb(255, 255, 255);
    padding: 35px 30px 30px;
}
.nh_hosting_details-widget-title {
    color: rgb(71, 85, 105);
    font-family: Plus Jakarta Sans;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.3px;
    margin-bottom: 26px;
}
.nh_hosting_details-list li {
    border-radius: 8px;
    background: rgb(249, 249, 249);
    color: rgb(71, 85, 105);
    font-family: Plus Jakarta Sans;
    font-size: 16px;
    font-weight: 600;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 8px;
    margin-bottom: 10px;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.nh_hosting_details-list li a {
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    width: 44px;
    height: 44px;
    background: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nh_hosting_details-list li:hover {
    background: var(--clr-theme-primary);
    color: #fff;
}
.nh_hosting_details-list li:hover a {
    background: var(--clr-common-black);
    color: #fff;
}
.nh_hosting_details-banner {
    position: relative;
    z-index: 1;
    padding: 42px 30px 50px;
}
@media (max-width: 480px) {
    .nh_hosting_details-banner {
        padding: 42px 25px 50px;
    }
}
.nh_hosting_details-banner img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 12px;
    object-fit: cover;
}
.nh_hosting_details-banner span {
    color: rgb(6, 177, 110);
    font-family: Plus Jakarta Sans;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 13px;
}
.nh_hosting_details-banner h2 {
    color: rgb(255, 255, 255);
    font-family: Plus Jakarta Sans;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: uppercase;
    margin-bottom: 51px;
}
@media (max-width: 767px) {
    .nh_hosting_details-banner h2 {
        font-size: 38px;
    }
}
@media (max-width: 480px) {
    .nh_hosting_details-banner h2 {
        font-size: 30px;
    }
}
.nh_hosting_details-banner form {
    position: relative;
    z-index: 1;
}
.nh_hosting_details-banner form input {
    width: 100%;
    height: 60px;
    border: none;
    border-radius: 6px;
    padding-left: 20px;
    padding-right: 60px;
    color: rgba(71, 85, 105, 0.7);
    font-family: Roboto;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.nh_hosting_details-banner form button {
    width: 52px;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: var(--clr-theme-primary);
    border: none;
    border-radius: 6px;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
}

/* ///////////////////////////////////////////////////////////
02. video CSS
/////////////////////////////////////////////////////////// */
@media (max-width: 1599px) {
    .nh_inner_support-img.mr-50 {
        margin-right: 30px;
    }
}
@media (max-width: 1399px) {
    .nh_inner_support-img.mr-50 {
        margin-right: 20px;
    }
}
@media (max-width: 1199px) {
    .nh_inner_support-img.mr-50 {
        margin-right: 0px;
    }
}

/* ///////////////////////////////////////////////////////////
02. footer CSS
/////////////////////////////////////////////////////////// */
:root{
    --accent:#03c03c;
    --bg:#0f0f2c;
    --text:#0f1424;
    --muted:#6b7280;
    --soft:#eef1f5;
    --radius:24px;
}


/* ===== CTA banner ===== */
.footer-cta{
    padding: 0 16px;
    /* margin-top: -96px; */
     position: relative;
  z-index: 10;
  


}

.footer-cta::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    #FFFFFF 0 50%,           /* нижні 50% білі */
    #F8F9FA 50% 100%  /* верх прозорий */
  );
  pointer-events: none;
  z-index: 0; /* під контентом */
}

.footer-cta__inner{
    max-width: 1160px; margin: 0 auto;
    background: linear-gradient(
        135deg,
        #03c03c 0%,
        #02a832 50%,
        #028f2a 100%
    );

    .footer-cta > *{
  position: relative;
  z-index: 1;
}


    color:#fff;
    border-radius: clamp(18px,3.2vw,var(--radius));
    padding: clamp(22px, 3.6vw, 36px);
    box-shadow: 0 20px 60px rgba(31, 41, 55, .25);
    display:grid; grid-template-columns: 1.1fr 1.2fr; gap: 28px;
    
    /* ADD THESE TWO LINES */
    position: relative; /* Establishes a new stacking context */
    z-index: 1;       /* Places this element above the ::before pseudo-element */
}
.footer-cta__text h3{
    font-size: clamp(24px, 3.8vw, 42px);
    margin: 0 0 8px; letter-spacing: -0.01em;
}
.footer-cta__text p{ margin:0; opacity:.9; }

.footer-cta__form{
    display:grid; grid-template-columns: 170px 1fr auto;
    gap:12px; align-items:center;
}
.footer-cta__form .select-wrap{
    position: relative; display:block; height: 54px;
    background:#fff; border-radius:12px; padding: 0 12px;
}
.footer-cta__form select{
    appearance:none; -webkit-appearance:none;
    width:100%; height:100%; border:0; background:transparent; padding-right:26px;
    font: inherit;
}
.footer-cta__form input[type="tel"]{
    height:54px; border:0; border-radius:12px; padding:0 16px;
    width:100%;
}
.btn-accent{
    height:54px; padding:0 22px; border:0; border-radius:12px;
    background:var(--accent); color:#0B2011; font-weight:700; cursor:pointer;
    transition: transform .15s ease, filter .15s ease;
}

.select-wrap{
  display:inline-flex;            /* центрує вміст по вертикалі */
  align-items:center;
  padding:8px 10px;
  border:1px solid #e5e7eb;
  border-radius:8px;
  background:#fff;
  min-width:112px;
  height:40px;                    /* фіксована висота чіпа */
  line-height:1;                  /* прибирає зсув baseline */
}
.select-wrap .select-faux{
  display:inline-flex;            /* прапорець + текст в один ряд */
  align-items:center;
  gap:6px;
  font-weight:600;
  white-space:nowrap;
  user-select:none;
  line-height:1;                  /* важливо для emoji */
}


.btn-accent:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.footer-cta__form .form-note{
    grid-column: 1 / -1; opacity:.85; font-size: 13px; line-height: 1.5;
}
.footer-cta__form .form-note a{ color:#fff; text-decoration: underline; }

/* responsive */
@media (max-width: 960px){
    .footer-cta__inner{ grid-template-columns: 1fr; }
    .footer-cta__form{ grid-template-columns: 150px 1fr auto; }
}
@media (max-width: 560px){
    .footer-cta__form{ grid-template-columns: 1fr; }
    .btn-accent{ width:100%; }
}

/* ===== main footer ===== */
.site-footer {
    background:#FFFFFF;
    color: var(--text);
    width: 100%;
}

.footer-main {
    padding: 46px 16px 8px;
}

.footer-main__inner {
    max-width: 1200px;   /* 👈 підганяємо під хедер */
    margin: 0 auto;
    padding-left: 16px;  /* 👈 ті ж падінги що і в хедері */
    padding-right: 16px;
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: clamp(24px, 4vw, 60px);
}


/* brand column */
.footer-brand .footer-logo img{
    display:inline-flex; align-items:center; gap:10px; margin-bottom:12px;
    font-weight:800; font-size: 28px; color:var(--text); text-decoration:none;
    height: 60px;
    width: auto;
}
.footer-brand .logo-zero{ color:var(--accent); }
.footer-hotline{ margin: 4px 0 16px; }
.footer-apps-title{ color: var(--muted); margin: 8px 0 10px; }

.footer-badges a img{
    height:40px; display:block;
    filter: saturate(0.9);
}
.footer-badges{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }

.footer-social a{
    width:36px; height:36px; border-radius:10px; display:inline-grid; place-items:center;
    background:#fff; color:var(--text); margin-right:8px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
}
.footer-social a:hover{
    transform: translateY(-2px);
    color: var(--accent);
    box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

/* links */
.footer-links{
    display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px, 2.4vw, 40px);
}
.footer-col h4{
    margin:0 0 12px; font-size:16px; font-weight:700;
}
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col li+li{ margin-top:8px; }
.footer-col a{
    color:var(--text); text-decoration:none;
    opacity:.85; transition: color .15s ease, opacity .15s ease;
}
.footer-col a:hover{ color:var(--accent); opacity:1; }

/* responsive main */
@media (max-width: 980px){
    .footer-main__inner{ grid-template-columns: 1fr; }
    .footer-links{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px){
    .footer-links{ grid-template-columns: 1fr; }
}

/* ===== bottom bar ===== */
.footer-bottom{
    border-top: 1px solid #e3e7ee;
    padding: 18px 16px;
    text-align:center;
    color:#7b8191;
}
.footer-bottom p{ margin:0; font-size: 14px; }

/* Контейнер форми: 2 колонки — інпут і кнопка */
.footer-cta__form{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:12px;
  align-items:center;
}

/* Висота і стиль інпуту */
.footer-cta__form input[type="tel"],
.footer-cta__phone{
  height:44px;
  padding:0 14px;
  border-radius:12px;
  font-size:16px;
}

/* Компактна кнопка — така ж висота, без зайвих відступів */
.footer-cta__form .btn-accent{
  height:44px;               /* ключове */
  padding:0 18px;            /* було забагато вертикального падінгу */
  border-radius:12px;
  font-size:16px;
  line-height:44px;          /* центрує текст вертикально */
  display:inline-block;      /* щоби висота працювала як очікується */
  white-space:nowrap;        /* не переносити текст */
  min-width:140px;           /* опціонально: фіксована «акуратна» ширина */
}

/* Мобільно: кнопка на всю ширину під інпутом */
@media (max-width: 640px){
  .footer-cta__form{
    grid-template-columns: 1fr;
  }
  .footer-cta__form .btn-accent{
    width:100%;
    line-height:44px;
  }
}



/* ///////////////////////////////////////////////////////////
Header CSS o1 Start
/////////////////////////////////////////////////////////// */
.nh_footer-area {
    background-color: var(--clr-common-black);
}
.nh_footer-top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 991px) {
    .nh_footer-top {
        display: none;
    }
}
.nh_footer-top-wrap {
    display: grid;
    align-items: center;
    grid-template-columns: 30% 40% 30%;
}
.nh_footer-top-item {
    display: flex;
    gap: 10px;
    padding-top: 50px;
    padding-bottom: 50px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    width: 100%;
}
.nh_footer-top-item:not(:first-child) {
    justify-content: center;
}
.nh_footer-top-item:last-child {
    border-right: 0;
}
.nh_footer-top-item-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(229, 248, 240);
    border-radius: 50%;
    font-size: 28px;
    color: var(--clr-theme-primary);
}
.nh_footer-top-item-content span {
    color: rgba(255, 255, 255, 0.5);
    font-family: Manrope;
    font-size: 14px;
    font-weight: 500;
    line-height: 26px;
    text-transform: capitalize;
}
.nh_footer-top-item-content h4 {
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.5px;
    margin-bottom: 0;
}
.nh_footer-top-item-content h4:hover a {
    color: var(--clr-theme-primary);
}
.nh_footer-main {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 1199px) {
    .nh_footer-widget.mr-70 {
        margin-right: 40px;
    }
}
@media (max-width: 991px) {
    .nh_footer-widget.mr-70 {
        margin-right: 0;
    }
}
@media (max-width: 1199px) {
    .nh_footer-widget.ml-50 {
        margin-left: 20px;
    }
}
@media (max-width: 991px) {
    .nh_footer-widget.ml-50 {
        margin-left: 0;
    }
}
.nh_footer-widget-logo {
    margin-bottom: 33px;
}
.nh_footer-widget-text {
    color: rgba(255, 255, 255, 0.7);
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 33px;
}
.nh_footer-widget-social {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nh_footer-widget-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
}
.nh_footer-widget-social a:hover {
    background: var(--clr-theme-primary);
    border-color: var(--clr-theme-primary);
}
.nh_footer-widget-title {
    color: rgb(255, 255, 255);
    font-family: Manrope;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -1px;
    margin-bottom: 28px;
}
.nh_footer-widget ul {
    list-style: none;
}
.nh_footer-widget ul li:not(:last-child) {
    margin-bottom: 16px;
}
.nh_footer-widget ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    text-transform: capitalize;
}
.nh_footer-widget ul li a:hover {
    color: var(--clr-theme-primary);
}
.nh_footer-widget ul li a i {
    font-size: 14px;
}
.nh_footer-widget-form input {
    width: 100%;
    border: none;
    background: #fff;
    border-radius: 6px;
    height: 56px;
    padding: 0 24px;
    margin-bottom: 20px;
    color: rgb(71, 85, 105);
    font-size: 16px;
    font-weight: 400;
    line-height: 56px;
    letter-spacing: -0.5px;
}
.nh_footer-widget-form input::-webkit-input-placeholder {
    color: rgb(71, 85, 105);
    font-size: 16px;
    font-weight: 400;
}
.nh_footer-widget-form input:-moz-placeholder {
    color: rgb(71, 85, 105);
    font-size: 16px;
    font-weight: 400;
}
.nh_footer-widget-form input::-moz-placeholder {
    color: rgb(71, 85, 105);
    font-size: 16px;
    font-weight: 400;
}
.nh_footer-widget-form input:-ms-input-placeholder {
    color: rgb(71, 85, 105);
    font-size: 16px;
    font-weight: 400;
}
.nh_footer-widget-form button {
    width: 100%;
    border: none;
    background: var(--clr-theme-primary);
    border-radius: 6px;
    height: 56px;
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}
.nh_footer-widget-form button:hover {
    background-color: #fff;
    color: var(--clr-theme-primary);
}
.nh_footer-copyright p {
    margin-bottom: 0;
    color: #858585;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
}
.nh_footer-copyright p a {
    color: #fff;
}
.nh_footer-menu ul {
    list-style: none;
    display: flex;
    justify-content: end;
    flex-wrap: wrap;
}
.nh_footer-menu ul li:not(:first-child) {
    margin-left: 25px;
    padding-left: 25px;
    position: relative;
    z-index: 1;
}
.nh_footer-menu ul li:not(:first-child)::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 12px;
    width: 2px;
    background: rgba(255, 255, 255, 0.12);
    content: "";
}
@media (max-width: 991px) {
    .nh_footer-menu ul li:not(:first-child) {
        margin-left: 15px;
        padding-left: 15px;
    }
}
@media (max-width: 480px) {
    .nh_footer-menu ul li:not(:first-child) {
        margin-left: 0;
    }
    .nh_footer-menu ul li:not(:first-child)::before {
        display: none;
    }
}
.nh_footer-menu ul li a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
}
.nh_footer-menu ul li a:hover {
    color: var(--clr-theme-primary);
}
.nh_footer-contact-wrap {
    padding: 0 50px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    display: grid;
    grid-template-columns: 29% 42% 29%;
}
.nh_footer-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 25px;
    padding-bottom: 25px;
    border-right: 2px solid rgb(15, 41, 31);
    width: 100%;
    justify-content: center;
}
.nh_footer-contact-item:first-child {
    justify-content: start;
}
.nh_footer-contact-item:last-child {
    justify-content: end;
    border-right: 0;
}
.nh_footer-contact-item-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(229, 248, 240);
    border-radius: 50%;
    font-size: 28px;
    color: var(--clr-theme-primary);
}
.nh_footer-contact-item-content span {
    color: rgba(255, 255, 255, 0.5);
    font-family: Manrope;
    font-size: 14px;
    font-weight: 500;
    line-height: 26px;
    text-transform: capitalize;
}
.nh_footer-contact-item-content h4 {
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.5px;
    margin-bottom: 0;
}
.nh_footer-contact-item-content h4:hover a {
    color: var(--clr-theme-primary);
}

@media (min-width: 992px) {
    .h2_nh_footer-area .nh_footer-main {
        border-bottom: 0;
    }
}

/* ///////////////////////////////////////////////////////////
Header CSS o1 Start
/////////////////////////////////////////////////////////// */
.h5_nh_footer-area {
    background-color: var(--clr-body-heading);
}
.h5_nh_footer-top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.h5_nh_footer-top-wrap {
    display: flex;
}
.h5_nh_footer-top-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 50px;
    padding-bottom: 50px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    width: 100%;
    padding-left: 100px;
}
.h5_nh_footer-top-item-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(229, 248, 240);
    border-radius: 50%;
    font-size: 28px;
    color: var(--clr-theme-primary);
}
.h5_nh_footer-top-item-content span {
    color: rgba(255, 255, 255, 0.5);
    font-family: Manrope;
    font-size: 14px;
    font-weight: 500;
    line-height: 26px;
    text-transform: capitalize;
}
.h5_nh_footer-top-item-content h4 {
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.5px;
    margin-bottom: 0;
}
.h5_nh_footer-top-item-content h4:hover a {
    color: var(--clr-theme-primary);
}
.h5_nh_footer-main {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.h5_nh_footer-widget-logo {
    margin-bottom: 33px;
}
.h5_nh_footer-widget-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 33px;
}
.h5_nh_footer-widget-title {
    color: rgb(255, 255, 255);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -1px;
    margin-bottom: 28px;
}
.h5_nh_footer-widget ul {
    list-style: none;
}
.h5_nh_footer-widget ul li {
    margin-bottom: 17px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}
.h5_nh_footer-widget ul li:last-child {
    margin-bottom: 0;
}
.h5_nh_footer-widget ul li a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    text-transform: capitalize;
    position: relative;
    z-index: 1;
}
.h5_nh_footer-widget ul li a::after {
    position: absolute;
    left: 0;
    bottom: 0px;
    content: "";
    width: 10%;
    height: 1px;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.h5_nh_footer-widget ul li a:hover {
    color: #fff;
}
.h5_nh_footer-widget ul li a:hover::after {
    opacity: 1;
    visibility: visible;
    width: 100%;
}
.h5_nh_footer-widget ul li span {
    background: #09D11D;
    height: 22px;
    padding: 0 7px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 500;
    line-height: 26px;
    text-transform: capitalize;
}
.h5_nh_footer-widget-form {
    position: relative;
    z-index: 1;
    max-width: 332px;
    width: 100%;
}
.h5_nh_footer-widget-form input {
    width: 100%;
    border: none;
    background: #fff;
    border-radius: 8px;
    height: 64px;
    padding: 0 25px;
    color: rgb(133, 133, 133);
    font-size: 16px;
    font-weight: 400;
    line-height: 56px;
    letter-spacing: -0.5px;
}
.h5_nh_footer-widget-form input::-webkit-input-placeholder {
    color: rgb(133, 133, 133);
    font-size: 16px;
    font-weight: 400;
}
.h5_nh_footer-widget-form input:-moz-placeholder {
    color: rgb(133, 133, 133);
    font-size: 16px;
    font-weight: 400;
}
.h5_nh_footer-widget-form input::-moz-placeholder {
    color: rgb(133, 133, 133);
    font-size: 16px;
    font-weight: 400;
}
.h5_nh_footer-widget-form input:-ms-input-placeholder {
    color: rgb(133, 133, 133);
    font-size: 16px;
    font-weight: 400;
}
.h5_nh_footer-widget-form button {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 8px;
    background-color: var(--clr-theme-primary);
    color: #fff;
    font-size: 18px;
}
.h5_nh_footer-widget-post:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 19px;
    padding-bottom: 18px;
}
.h5_nh_footer-widget-post span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    display: block;
    margin-bottom: 7px;
}
.h5_nh_footer-widget-post h5 {
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    text-transform: capitalize;
    margin-bottom: 0;
}
.h5_nh_footer-widget-post h5:hover a {
    color: var(--clr-theme-primary);
}
.h5_nh_footer-widget-mail {
    display: flex;
    align-items: center;
    gap: 10px;
}
.h5_nh_footer-widget-mail i {
    font-size: 20px;
    color: var(--clr-theme-primary);
    line-height: normal;
    margin-top: 1px;
}
.h5_nh_footer-widget-mail a {
    display: block;
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    text-transform: lowercase;
}
.h5_nh_footer-bottom {
    background-color: #2C2F36;
}
@media (max-width: 767px) {
    .h5_nh_footer-bottom-logo {
        display: none;
    }
}
.h5_nh_footer-bottom-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 767px) {
    .h5_nh_footer-bottom-wrap {
        justify-content: center;
    }
}
.h5_nh_footer-bottom-social {
    display: flex;
    align-items: center;
    gap: 8px;
}
@media (max-width: 991px) {
    .h5_nh_footer-bottom-social {
        display: none;
    }
}
.h5_nh_footer-bottom-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
}
.h5_nh_footer-bottom-social a:hover {
    background: var(--clr-common-black);
    border-color: var(--clr-common-black);
}
.h5_nh_footer-bottom-copyright p {
    margin-bottom: 0;
    color: #B8B8B8;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
}
.h5_nh_footer-bottom-copyright p a {
    color: #fff;
}
.h5_nh_footer-copyright p {
    margin-bottom: 0;
    color: #858585;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
}
@media (max-width: 575px) {
    .h5_nh_footer-copyright p {
        text-align: center;
    }
}
.h5_nh_footer-copyright p a {
    color: #fff;
}
.h5_nh_footer-menu ul {
    list-style: none;
    display: flex;
    justify-content: end;
}
.h5_nh_footer-menu ul li:not(:first-child) {
    margin-left: 25px;
    padding-left: 25px;
    position: relative;
    z-index: 1;
}
.h5_nh_footer-menu ul li:not(:first-child)::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 12px;
    width: 2px;
    background: rgba(255, 255, 255, 0.12);
    content: "";
}
.h5_nh_footer-menu ul li a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
}
.h5_nh_footer-menu ul li a:hover {
    color: var(--clr-theme-primary);
}
.h5_nh_footer-contact-wrap {
    padding: 0 50px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    display: grid;
    grid-template-columns: 29% 42% 29%;
}
.h5_nh_footer-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 25px;
    padding-bottom: 25px;
    border-right: 2px solid rgb(15, 41, 31);
    width: 100%;
    justify-content: center;
}
.h5_nh_footer-contact-item:first-child {
    justify-content: start;
}
.h5_nh_footer-contact-item:last-child {
    justify-content: end;
    border-right: 0;
}
.h5_nh_footer-contact-item-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(229, 248, 240);
    border-radius: 50%;
    font-size: 28px;
    color: var(--clr-theme-primary);
}
.h5_nh_footer-contact-item-content span {
    color: rgba(255, 255, 255, 0.5);
    font-family: Manrope;
    font-size: 14px;
    font-weight: 500;
    line-height: 26px;
    text-transform: capitalize;
}
.h5_nh_footer-contact-item-content h4 {
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.5px;
    margin-bottom: 0;
}
.h5_nh_footer-contact-item-content h4:hover a {
    color: var(--clr-theme-primary);
}

/*# sourceMappingURL=main.css.map */




/* bezdrat*/

:root{
    --accent:#03c03c;
    --text:#0f1424;
    --muted:#6b7280;
    --card:#fff;
    --soft:#f5f7fb;
    --radius:20px;
    --container:1200px;
}

/* util */
.container{ max-width:var(--container); margin:0 auto; padding:0 16px; }
.section-title{ font-size:clamp(22px,3.6vw,32px); margin:22px 0 45px; }
.section-title span{ color:var(--accent); }

:root{
    --accent:#03c03c;
    --text:#0f1424;
    --muted:#6b7280;
    --container:1200px;
}

/* base container (як у тебе вже є) */
.container{ max-width:var(--container); margin:0 auto; padding:0 16px; }

/* зелений hero */
.wl-hero--green{
    --accent:#03c03c;
    --g1:#03c03c;
    --g2:#02a833;      /* трохи темніший для глибини */
    color:#fff;
    background:
        radial-gradient(1100px 520px at 85% -10%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%),
        linear-gradient(180deg, var(--g1) 0%, var(--g2) 100%);
    overflow:hidden;
}
.wl-hero--green .wl-hero__kicker{ color:#e9ffe9; opacity:.9; }
.wl-hero--green .wl-hero__title{ color:#fff; }
.wl-hero--green .wl-hero__lead{ color:rgba(255,255,255,.9); }

/* Форма: інпут + кнопка в один ряд */
.wl-hero__form{
  display: flex;
  flex-wrap: nowrap;        /* не переносити */
  align-items: flex-start;
  gap: 12px;
}

/* Контейнер інпута – рядок, висота по контенту */
.wl-input{
  position: relative;
  display: inline-flex;     /* запобігає розтягуванню по висоті */
  align-items: center;
         /* тягнеться по ширині */
  min-width: 100%;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}

/* Сам інпут: фіксована висота */
.wl-input input{
  flex: 1 1 auto;
  height: 58px;
  border: 0;
  border-radius: 16px;
  padding: 0 46px 0 16px;
  font: inherit;
  color: #0f1424;
}

/* Хрестик очищення */
.wl-input__clear{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border: 0; border-radius: 10px;
  background: #eef1f4; color: #6b7385;
  cursor: pointer;
}

/* Кнопка поруч з інпутом */
.wl-btn{
  flex: 0 0 auto;
  height: 58px;
  padding: 0 24px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: #03c03c;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

/* На мобільних — у стовпчик */
@media (max-width: 560px){
  .wl-hero__form{
    flex-wrap: wrap;
  }
  .wl-btn{ width: 43%; }
}


/* сітка/розміри */
.wl-hero__container{ max-width:1200px; margin:0 auto; padding:clamp(40px,6vw,90px) 16px; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,64px); align-items:center; }
.wl-hero__right{ display:flex; align-items:center; justify-content:center; }    
.wl-hero__right img{
  width:auto;             /* не стискаємо по ширині, а тримаємо пропорції */
  max-width:100%;         /* не виходимо за контейнер */
  height:clamp(280px, 42vh, 560px);  /* зростає з екраном, але має межі */
  object-fit:contain;
  display:block;
}

/* опціонально: трохи більша на великих екранах */
@media (min-width: 1400px){
  .wl-hero__right img{ height:600px; }
}

@media (max-width:980px){ .wl-hero__container{ grid-template-columns:1fr; } .wl-hero__right{ order:-1; text-align:center; } .wl-btn{ width:43%; } }


/* TOP nabídka */
:root{
  --accent:#03c03c;
  --accent-2:#02a833;
  --ink:#0f1424;
  --muted:#687186;
  --card:#fff;
  --line:rgba(15,20,36,.08);
}

/* контейнер карток */
.wl-cards{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:24px;
  align-items: stretch;
}

/* базова картка */
.wl-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:16px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px 22px 20px;
  box-shadow:0 8px 28px rgba(0,0,0,.06);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.wl-card:hover{
  transform: translateY(-2px);
  box-shadow:0 14px 40px rgba(0,0,0,.10);
  border-color: rgba(3,192,60,.25);
}

/* бейдж “Nejpopulárnější” */
.wl-card__badge{
  position:absolute; top:14px; right:14px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#fff; font-weight:700; font-size:12px; letter-spacing:.2px;
  padding:6px 10px; border-radius:999px;
  box-shadow:0 6px 18px rgba(3,192,60,.35);
}

/* іконка в м’якому “блабі” */
.wl-card__icon{
  width:48px; height:48px;
  display:grid; place-items:center;
  border-radius:12px;
  background:linear-gradient(180deg,#e9f9ef,#d8f3e3);
  color:var(--accent);
}
.wl-card .i{ width:26px; height:26px; }
.wl-card .i--fill{ fill: currentColor; }

/* заголовок + список */
.wl-card h3{
  margin:6px 0 2px;
  font-size:18px; line-height:1.25; color:var(--ink);
}
.wl-card__list{
  list-style:none; margin:0; padding:0; color:var(--muted);
  display:flex; flex-direction:column; gap:8px;
}
.wl-card__list li{
  position:relative; padding-left:20px;
}
.wl-card__list li::before{
  content:"";
  position:absolute; left:0; top:10px;
  width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--accent) 0 60%, #fff 61% 100%);
  box-shadow:0 0 0 2px rgba(3,192,60,.15) inset;
}

/* CTA зона */
.wl-card__cta{ margin-top:auto; }
.btn-accent, .btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 18px; border-radius:12px;
  font-weight:800; text-decoration:none; white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-accent{
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#fff; border:1px solid transparent;
  box-shadow:0 8px 20px rgba(3,192,60,.28);
}
.btn-accent:hover{ transform:translateY(-1px); filter:brightness(.98); }

.btn-outline{
  background:#fff; color:var(--accent);
  border:1.5px solid rgba(3,192,60,.7);
}
.btn-outline:hover{
  background: rgba(3,192,60,.06);
  border-color: var(--accent);
  transform:translateY(-1px);
}

/* Виділення “рекомендованої” картки (2-га) */
.wl-cards > .wl-card:nth-child(2){
  border-color: rgba(3,192,60,.25);
  box-shadow: 0 16px 48px rgba(3,192,60,.12);
}
.wl-cards > .wl-card:nth-child(2) .btn-accent{
  box-shadow:0 10px 26px rgba(3,192,60,.35);
}

/* дрібні штрихи заголовка секції */
.section-title{
  font-size: clamp(26px, 3.6vw, 40px);
  line-height:1.15; margin:0 0 18px;
  color:#0f1424;
}
.section-title span{
  background:linear-gradient(90deg, var(--accent), #1fbf75);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* адаптив */
@media (max-width: 1100px){
  .wl-cards{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 620px){
  .wl-cards{ grid-template-columns: 1fr; }
}

.wl-card__meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:2px;
}

/* speed chip */
.wl-chip{
  display:inline-flex; align-items:baseline; gap:6px;
  padding:8px 12px; border-radius:999px; line-height:1; white-space:nowrap;
  background:linear-gradient(180deg,#e9f9ef,#d8f3e3);
  color:var(--accent); border:1px solid rgba(3,192,60,.25);
  box-shadow:0 4px 14px rgba(3,192,60,.12) inset;
}
.wl-chip--speed strong{ font-size:20px; font-weight:900; line-height:1; letter-spacing:.2px; }
.wl-chip--speed span{ font-size:12px; opacity:.9; }

/* price */
.wl-card__price{ display:flex; align-items:baseline; gap:6px; }
.wl-price__value{ font-size:22px; font-weight:900; line-height:1; color:#0f1424; letter-spacing:.2px; }
.wl-price__per{ font-size:12px; color:var(--muted); }

/* тонка лінія перед списком, щоб відділити meta */
.wl-card__list{ margin-top:10px; padding-top:12px; border-top:1px solid rgba(15,20,36,.06); }

/* підсилення для 2-ї картки */
.wl-cards > .wl-card:nth-child(2) .wl-chip{
  background:linear-gradient(180deg,#dcfde7,#c9f7da);
  border-color: rgba(3,192,60,.35);
}
.wl-cards > .wl-card:nth-child(2) .wl-price__value{ color:var(--accent); }



/* PROČ právě */
.wl-why{ padding: 60px 0 60px; background:#fff; }
.wl-why h2{ margin:0 0 16px; font-size:clamp(22px,3.6vw,32px); }
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap: clamp(14px,2vw,20px); }
@media (max-width:1100px){ .why-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .why-grid{ grid-template-columns:1fr; } }
.why{ background:#fff; border-radius:16px; padding:18px; box-shadow:0 10px 26px rgba(0,0,0,.05); }
.why__icon{ width:56px; height:56px; border-radius:12px; display:grid; place-items:center; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); margin-bottom:10px; }
.why__icon .i{ width:30px; height:30px; }
.why__icon .i--fill{ fill:var(--accent); }
.why h3{ margin:0 0 6px; font-size:18px; }
.why p{ margin:0; color:var(--muted); }

/* STEPS */
:root{
  --accent:#03c03c;
  --ink:#0f1424;
  --muted:#6b7280;
  --card:#fff;
  --line:rgba(15,20,36,.08);
}

/* Секція */
.wl-steps{
  background: linear-gradient(180deg,#f7faf8 0%, #f3f7f5 100%);
  padding: clamp(32px,6vw,64px) 0;
}
.wl-steps h2{
  font-size: clamp(26px,3.4vw,36px);
  line-height:1.15; color:var(--ink); margin:0 0 20px;
}

/* Сітка кроків */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:20px;
  counter-reset: step;
}

/* Картка кроку */
.step{
  position:relative;
  background: var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px 18px 16px 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  display:flex; gap:14px; align-items:flex-start;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.step:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
  border-color: rgba(3,192,60,.22);
}

/* З’єднувальна лінія між картками (десктоп) */
.step::after{
  content:"";
  position:absolute; top:34px; right:-10px; width:20px; height:2px;
  background: linear-gradient(90deg, var(--accent), rgba(3,192,60,.25));
  opacity:.45;
}
.steps .step:last-child::after{ display:none; }

/* Номер у «капсулі» */
.step__num{
  flex:0 0 auto;
  width:34px; height:34px; border-radius:999px;
  display:grid; place-items:center;
  font-weight:900; color:#fff;
  background: linear-gradient(180deg, #18d164, var(--accent));
  box-shadow: 0 6px 18px rgba(3,192,60,.35);
}

/* Тіло кроку */
.step__body h4{
  margin:2px 0 6px; font-size:18px; line-height:1.25; color:var(--accent);
}
.step__body p{
  margin:0; color:var(--muted); font-size:15px; line-height:1.55;
}

/* Адаптив */
@media (max-width: 1100px){
  .steps{ grid-template-columns: repeat(2,1fr); }
  .step::after{ display:none; }
}
@media (max-width: 560px){
  .steps{ grid-template-columns: 1fr; gap:14px; }
  .step{
    padding:16px; border-radius:16px; 
  }
  .step__num{ width:30px; height:30px; font-size:14px; }
  .step__body h4{ font-size:17px; }
  .step__body p{ font-size:14px; }
}

/* HOW + gear */
.wl-how{ padding: 60px 0 60px; background:#fff; }
.wl-how h2{ margin:0 0 16px; font-size:clamp(22px,3.6vw,32px); }
.how__inner{ display:grid; grid-template-columns:1.1fr 1fr; gap: clamp(20px,3vw,40px); }
@media (max-width:980px){ .how__inner{ grid-template-columns:1fr; } }
.how__list{ margin:0; padding-left:18px; color:var(--text); }
.how__list li{ margin-bottom:10px; }
.gear{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:980px){ .gear{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .gear{ grid-template-columns:1fr 1fr;} }
.gear__item{ background:#fff; border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,.06); overflow:hidden; text-align:center; }
.gear__item img{ width:100%; height:160px; object-fit:cover; display:block; }
.gear__item figcaption{ padding:8px 10px; font-size:14px; color:var(--text); }




/* kabelove pripojeni*/

:root{
  --accent:#03c03c;
  --accent-2:#02a833;
  --ink:#0f1424;
  --muted:#6b7280;
  --line:rgba(15,20,36,.10);
  --card:#fff;
}

/* секція */
.wl-top{ padding: clamp(36px,6vw,72px) 0; }
.section-title{
  font-size: clamp(28px,3.6vw,40px);
  line-height:1.15; margin:0 0 20px; color:var(--ink);
}
.section-title span{
  background:linear-gradient(90deg,var(--accent),#1fbf75);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* сітка карток */
.cbl-cards{
  display:grid; gap:24px;
  grid-template-columns: repeat(3,1fr);
  align-items:stretch;
}

/* базова картка */
.cbl-card{
  display:flex; flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px;
  box-shadow:0 8px 28px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cbl-card:hover{
  transform: translateY(-3px);
  box-shadow:0 16px 42px rgba(0,0,0,.10);
  border-color: rgba(3,192,60,.24);
}

/* шапка з “чіпом” підзаголовка */
.cbl-card__head{ margin-bottom:12px; }
.cbl-card__head h3{
  margin:0 0 8px; font-size:20px; line-height:1.25; color:var(--ink);
}
.cbl-card__sub{
  display:inline-block;
  font-size:13px; color:var(--accent);
  background:linear-gradient(180deg,#e9f9ef,#d8f3e3);
  border:1px solid rgba(3,192,60,.28);
  border-radius:999px;
  padding:6px 10px;
  box-shadow:0 4px 14px rgba(3,192,60,.12) inset;
}
.cbl-card__head--dark h3{ color:#0b1130; }

/* ціна */
.cbl-price{
  display:flex; align-items:baseline; gap:8px;
  margin-top:4px; margin-bottom:10px;
}
.cbl-price__num{
  font-size:28px; font-weight:900; line-height:1; letter-spacing:.2px; color:var(--ink);
}
.cbl-price__per{ font-size:12px; color:var(--muted); }

/* розділювач перед списком */
.cbl-list{
  list-style:none; margin:12px 0 0; padding:12px 0 0;
  border-top:1px solid rgba(15,20,36,.08);
  display:flex; flex-direction:column; gap:8px;
  color:var(--muted);
}
.cbl-list li{
  position:relative; padding-left:18px;
}
.cbl-list li::before{
  content:""; position:absolute; left:0; top:10px;
  width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--accent) 0 60%, #fff 61% 100%);
  box-shadow:0 0 0 2px rgba(3,192,60,.18) inset;
}
.cbl-list li strong{ color:var(--ink); }

/* CTA */
.cbl-btn{
  margin-top:auto;
  display:inline-flex; align-items:center; justify-content:center;
  height:46px; padding:0 20px; border-radius:12px;
  font-weight:800; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.cbl-btn--solid{
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  color:#fff; border:1px solid transparent;
  box-shadow:0 10px 24px rgba(3,192,60,.28);
}
.cbl-btn--solid:hover{ transform:translateY(-1px); filter:brightness(.98); }
.cbl-btn--outline{
  background:#fff; color:var(--accent);
  border:1.5px solid rgba(3,192,60,.7);
  margin-top: 20px;
}
.cbl-btn--outline:hover{
  background: rgba(3,192,60,.06);
  border-color: var(--accent);
  transform:translateY(-1px);
}

/* рекомендована картка (середня) */
.cbl-card--featured{
  border-color: rgba(3,192,60,.28);
  box-shadow: 0 16px 48px rgba(3,192,60,.12);
  position:relative;
}
.cbl-card--featured::before{
  content:"Doporučujeme";
  position:absolute; top:16px; right:16px;
  font-size:12px; font-weight:800; color:#fff;
  padding:6px 10px; border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 8px 22px rgba(3,192,60,.35);
}

/* адаптив */
@media (max-width: 1060px){
  .cbl-cards{ grid-template-columns:1fr; }
  .cbl-card{ padding:20px; }
  .cbl-card--featured::before{ top:12px; right:12px; }
}


/*Gigabit /



/* бейдж у хедері рекомендованої */
.cbl-card--featured::before{
  content:"Doporučujeme";
  position:absolute; top:16px; right:16px;
  font-size:12px; font-weight:800; color:#fff;
  padding:6px 10px; border-radius:999px;
  background:linear-gradient(90deg,var(--accent),#02a833);
  box-shadow:0 8px 22px rgba(3,192,60,.35);
}

/* BUNDLE panel */
.cbl-bundle{
  margin-top:8px; margin-bottom:8px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:12px; border-radius:14px;
  background:linear-gradient(180deg,#f7fff9,#effff5);
  border:1px solid rgba(3,192,60,.22);
}
.cbl-bundle__left{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.cbl-badge{
  display:inline-block;
  font-size:12px; font-weight:800; color:#0b7a35;
  padding:4px 8px; border-radius:999px;
  background:#e9f9ef; border:1px solid rgba(3,192,60,.28);
}
.cbl-bundle__title{ font-weight:700; color:#0f1424; font-size:14px; }
.cbl-bundle__tv{ display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
.cbl-bundle__tv li{
  font-size:12px; color:#25623f; padding-left:16px; position:relative; white-space:nowrap;
}
.cbl-bundle__tv li::before{
  content:""; position:absolute; left:0; top:6px;
  width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--accent) 0 60%, #fff 61% 100%);
  box-shadow:0 0 0 2px rgba(3,192,60,.18) inset;
}

/* Cena a úspora vpravo */
.cbl-bundle__right{ text-align:right; display:flex; flex-direction:column; gap:4px; }
.cbl-bundle__price{ display:flex; align-items:baseline; gap:6px; justify-content:flex-end; }
.cbl-bundle__price strong{ font-size:20px; font-weight:900; color:var(--accent); }
.cbl-bundle__price span{ font-size:12px; color:#6b7280; }

.cbl-bundle__save{ display:flex; gap:8px; align-items:baseline; justify-content:flex-end; }
.cbl-bundle__save .old{
  font-size:12px; color:#9aa1b3; text-decoration: line-through;
}
.cbl-bundle__save .save{
  font-size:12px; font-weight:700; color:#0b7a35;
}

/* контейнер CTA у картці */
.cbl-card__cta{ margin-top:auto; display:flex; gap:10px; align-items:center; }
.cbl-link{ font-size:13px; color:#25623f; text-underline-offset:3px; }

/* адаптив */
@media (max-width:1060px){
  .cbl-bundle{ flex-direction:column; align-items:flex-start; }
  .cbl-bundle__right{ text-align:left; }
}


/*tv switcher */

.cbl-addon{
  margin-top:10px;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  font-size:14px;
}
.cbl-addon__price{ font-weight:600; color:#0f1424; }

/* switch */
.cbl-switch{
  display:inline-flex; align-items:center; gap:8px;
  cursor:pointer; user-select:none;
}
.cbl-switch input{ display:none; }
.cbl-switch .slider{
  position:relative; width:38px; height:20px;
  background:#ccc; border-radius:20px;
  transition:.2s;
}
.cbl-switch .slider::before{
  content:""; position:absolute; left:2px; top:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  transition:.2s;
}
.cbl-switch input:checked + .slider{ background:#03c03c; }
.cbl-switch input:checked + .slider::before{ transform:translateX(18px); }

.cbl-switch .lbl{ font-size:13px; color:#25623f; font-size: 20px; }

/* ціни */
.cbl-addon__price .total-price{ font-weight:700; color:#03c03c; }
.cbl-addon__price .internet-price{ font-weight:600; }






:root{
  --accent:#03c03c;
  --ink:#0f1424;
  --muted:#6b7280;
  --line:rgba(15,20,36,.08);
}

/* Секція */
.wl-faq{ padding: clamp(32px,6vw,64px) 0; }
.wl-faq h2{
  font-size: clamp(26px,3.4vw,36px);
  line-height:1.15; color:var(--ink); margin:0 0 18px;
}

/* Контейнер */
.faq{ display:flex; flex-direction:column; gap:14px; }

/* Картка питання */
.faq__item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  overflow:hidden;          /* щоб не вилазив фокус */
}

/* Summary як кнопка */
.faq__item > summary{
  display:flex; align-items:center; gap:12px;
  padding:16px 18px;
  list-style:none;          /* ховає маркер Firefox */
  cursor:pointer;
  font-weight:700; color:var(--accent);
  position:relative;
}
.faq__item > summary::-webkit-details-marker{ display:none; }

/* Стрілка праворуч */
.faq__item > summary::after{
  content:"";
  margin-left:auto;
  width:10px; height:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s ease, opacity .2s ease;
  opacity:.8;
}
.faq__item[open] > summary::after{
  transform: rotate(135deg);
}

/* Стан ховера/фокуса */
.faq__item > summary:hover{ background:rgba(3,192,60,.06); }
.faq__item > summary:focus-visible{
  outline:3px solid rgba(3,192,60,.3);
  outline-offset:2px;
  border-radius:12px;
}

/* Тіло відповіді */
.faq__item > p{
  margin:0;
  padding:0 18px 16px 18px;
  color:var(--muted);
  line-height:1.55;
  /* проста анімація появи */
  opacity:0; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}
.faq__item[open] > p{
  opacity:1; transform: translateY(0);
}



/*televize*/
:root{
    --accent:#03c03c;
    --text:#0f1424;
    --muted:#6b7280;
    --soft:#f5f7fb;
    --container:1200px;
    --radius:18px;
}

/* base */
.container{max-width:var(--container);margin:0 auto;padding:0 16px;}
.kicker{display:inline-block;text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:12px;color:var(--accent);}

/* ===== HERO ===== */
.tv-hero{padding:clamp(32px,6vw,70px) 0;background:linear-gradient(180deg,#fff 0%,#f7faf8 100%);}
.tv-hero__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,60px);align-items:center;}
@media (max-width:980px){.tv-hero__grid{grid-template-columns:1fr}.tv-hero__right{order:-1;text-align:center}}
.tv-hero h1{margin:8px 0 10px;font-size:clamp(28px,4.2vw,42px);letter-spacing:-.01em}
.tv-hero p{margin:0;color:var(--muted);line-height:1.7}
.tv-hero__right img{width:100%;border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.08)}
.benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px;padding:0;list-style:none}
.benefits li{display:flex;gap:10px;align-items:center;background:#fff;border-radius:12px;padding:10px 12px;box-shadow:0 8px 20px rgba(0,0,0,.05)}
.ic{width:22px;height:22px;display:inline-block;background:color-mix(in srgb,var(--accent) 16%,transparent);border-radius:6px;position:relative}
.ic::after{content:"";position:absolute;inset:4px;background:var(--accent);border-radius:4px}

/* small pictogram variations (pure CSS shapes) */
.tv-ic--hd::after{clip-path:polygon(0 0,100% 0,100% 40%,60% 40%,60% 100%,40% 100%,40% 40%,0 40%)}
.tv-ic--replay::after{clip-path:polygon(50% 0,65% 20%,50% 20%,50% 60%,80% 60%,80% 80%,20% 80%,20% 40%,50% 40%)}
.tv-ic--devices::after{clip-path:polygon(10% 25%,90% 25%,90% 45%,10% 45%,10% 25%,25% 55%,75% 55%,75% 75%,25% 75%)}

/* ===== START OFFER ===== */
.tv-start{padding: 12px 0 46px;}
.tv-start__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,3vw,40px);align-items:center}
@media (max-width:980px){.tv-start__grid{grid-template-columns:1fr}.tv-start__right{text-align:center}}
.tv-start h2{margin:0 0 6px;font-size:clamp(22px,3.4vw,32px)}
.tv-start h2 span{color:var(--accent)}
.muted{color:var(--muted)}
.channels{list-style:disc;padding-left:20px;margin:10px 0 14px}
.price-line{display:flex;align-items:center;gap:16px;justify-content:space-between;background:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 10px 24px rgba(0,0,0,.05)}
.price{font-size:22px}
.btn-accent{display:inline-block;background:var(--accent);color:#fff;font-weight:800;border-radius:12px;padding:10px 18px;text-decoration:none}
.tv-start__right img{width:100%;border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.08)}

/* ===== TABS ===== */
.tv-tabs{padding: 10px 0 56px;background:#fff}
.tv-tabs h2{margin:0 0 12px;font-size:clamp(22px,3.2vw,30px)}
.tabs{background:#fff;border-radius:16px;box-shadow:0 10px 26px rgba(0,0,0,.06);padding:12px}
.tabs input{display:none}
.tabs__nav{display:flex;gap:8px;flex-wrap:wrap}
.tab{flex:0 0 auto;padding:10px 14px;border-radius:999px;background:#eef5f0;color:#145a2a;cursor:pointer;font-weight:700}
#tab-kids:checked ~ .tabs__nav label[for=tab-kids],
#tab-sport:checked ~ .tabs__nav label[for=tab-sport],
#tab-movies:checked ~ .tabs__nav label[for=tab-movies]{background:var(--accent);color:#fff}
.tabs__panes{margin-top:12px}
.pane{display:none;background:#f8faf9;border-radius:12px;padding:14px}
#tab-kids:checked ~ .tabs__panes .pane:nth-child(1),
#tab-sport:checked ~ .tabs__panes .pane:nth-child(2),
#tab-movies:checked ~ .tabs__panes .pane:nth-child(3){display:block}
.pack{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0 0 10px;list-style:none}
.pack li{background:#fff;border:1px solid #e6edf0;border-radius:999px;padding:8px 12px}
.pack__cta{display:flex;gap:12px;align-items:center;justify-content:space-between}
.price-sm{color:#334155}
.btn-outline{display:inline-block;border:2px solid var(--accent);color:var(--accent);padding:10px 16px;border-radius:12px;text-decoration:none;font-weight:700;
    margin-bottom: 0;

}

.wl-top{
    padding-bottom: 100px;
    padding-top: 50px;
}
.btn-outline:hover{background:var(--accent);color:#fff}

.tv-btn {
    display: inline-block;
    padding: 15px 30px;
    background-color: #03c03c;
    color: white;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.tv-btn:hover {
    background-color: #029902;  /* Колір при наведенні */
}
.tv-btn {
    display: inline-block;
    padding: 15px 30px;
    background-color: #03c03c;
    color: white;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.tv-btn:hover {
    background-color: #029902;  /* Колір при наведенні */
}


/* ===== DEVICES ===== */
:root{
    --accent:#03c03c;
    --text:#1a2233;
    --muted:#5f6b7a;
    --bg:#f5f7fb;
    --radius:22px;
}

.tv-watch{ padding:60px 0; background:var(--bg); }
.tv-watch__head{ text-align:center; margin-bottom:32px; }
.tv-watch__head h2{ font-size:2rem; margin-bottom:12px; }
.tv-watch__head p{ color:var(--muted); }

.watch-grid{
    display:grid; gap:20px; max-width:1200px; margin:0 auto;
    grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
    padding-top: 100px;
    padding-bottom: 100px;
}

.watch-card{
    display:grid; grid-template-columns:auto 1fr auto; gap:16px;
    background:#fff; border-radius:var(--radius);
    padding:20px; color:var(--text);
    box-shadow:0 4px 14px rgba(0,0,0,.06);
    text-decoration:none; transition:.2s ease;
}
.watch-card:hover{
    border:1px solid var(--accent);
    box-shadow:0 8px 24px rgba(3,192,60,.2);
}
.watch-card--wide{ grid-column:span 2; }
@media(max-width:700px){ .watch-card--wide{ grid-column:span 1; } }

.watch-card__icon {
    background: var(--accent);
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.watch-card__icon svg {
    width: 24px;
    height: 24px;
}

.watch-card__body h3{ margin:0 0 6px; font-size:1.1rem; }
.watch-card__body p{ margin:0; color:var(--muted); line-height:1.5; }

.watch-card__arrow{
    align-self:center; font-weight:700; color:var(--accent);
    transition:transform .2s;
}
.watch-card:hover .watch-card__arrow{ transform:translateX(4px); }

/* ===== FAQ ===== */
.tv-faq{padding: 80px 0 80px;background:#fff;}
.faq{display:grid;gap:10px}
.faq__item{background:#fff;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.05);padding:12px 14px}
.faq__item>summary{cursor:pointer;font-weight:700;list-style:none}
.faq__item[open]>summary{color:var(--accent)}
.faq__item p{margin:10px 0 0;color:var(--muted)}

/* Notice */

.legal-notice {
    background: #f5f7fb;
    padding: 60px 16px;
    text-align: center;
    font-size: 0.95rem;
    color: #5f6b7a;
    margin-bottom: 70px;
}
.legal-notice h2 {
    font-size: 1.4rem;
    margin-bottom: 16px;
    color: #1a2233;
}
.legal-notice p {
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.6;
}
.legal-notice strong {
    color: #03c03c;
}
/* Top Balicky*/
/* ===== equal height for 4 cards ===== */
.packs-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:clamp(14px,2vw,20px);
    align-items:stretch;                 /* витягуємо всі картки по висоті */
}

/* каркаси карток */
.pack{
    display:flex;
    flex-direction:column;
    background:#fff;
    border-radius:22px;
    box-shadow:0 20px 50px rgba(0,0,0,.06);
    overflow:hidden;
}

.pack__media img{
    width:100%; height:200px; aspect-ratio:16/7; object-fit:cover;
}

/* усередині — флекс-колонка, щоб футер завжди був знизу */
.pack__body{
    display:flex;
    flex-direction:column;
    flex:1;                               /* займає всю доступну висоту */
    padding:16px 18px 12px;
}

/* текст: clamp на 3 рядки */
.pack__text{
    margin:0 0 12px;
    color:#5f6b7a;
    line-height:1.65;

    display:-webkit-box;
    -webkit-line-clamp:3;                 /* скільки рядків */
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* логотипи залишаються над футером */
.pack__logos{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:6px; }
.pack__logos img{ height:24px; filter:grayscale(100%); opacity:.9; }
.pack__logos img:hover{ filter:none; opacity:1; }

/* розділювач штовхає футер униз завдяки margin-top:auto */
.pack__hr{
    border:0; border-top:1px solid #e7edf3;
    margin:14px 0 12px;
    margin-top:auto;                      /* <-- ключ для прилипан ня футера */
}

/* футер (ціна + кнопка) завжди внизу */
.pack__cta{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
}

/* дрібні доробки для заголовків/цін (як було) */
.pack__title{ margin:8px 0 6px; font-size:22px; color:#03c03c; }
.pack__points{ margin:0 0 8px; font-weight:700; color:#1b2535; }
.pack__price{ font-size:20px; color:#1a2233; }
.pack__price strong{ font-size:28px; }

/* адаптив залишається 4→2→1 */
@media (max-width: 992px){ .packs-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 576px){ .packs-grid{ grid-template-columns:1fr; } }
/* кнопка у картках */
.pack__cta .btn-accent,
.pack__cta a{
    display:inline-block;
    background:#03c03c;
    color:#fff !important;
    font-weight:600;
    border-radius:10px;
    padding:10px 16px;
    text-decoration:none;
    transition:background .25s;
}

.pack__cta .btn-accent:hover,
.pack__cta a:hover{
    background:#029902;
}

.iptv-offer { padding: 56px 0; background: #e9eef5; }
.iptv-offer h2 { font-size: 34px; font-weight: 800; margin: 0 0 8px; color:#1a1b22; }
.iptv-offer__sub { color:#5b6170; margin: 0 0 20px; max-width: 900px; }

.iptv-pills { display:flex; flex-wrap:wrap; gap:10px; margin: 18px 0 24px; padding:0; list-style:none; }
.pill { border:0; background:#dfe5ee; color:#2a2f3a; padding:10px 14px; border-radius:999px; font-weight:600; cursor:pointer; }
.pill .pill__num { background:#cbd3df; border-radius:999px; padding:3px 8px; margin-left:8px; font-weight:700; }
.pill.is-active { background:#03c03c; color:#fff; }
.pill.is-active .pill__num { background:#3ac162; color:#fff; }

.channels-grid {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(210px,1fr));
    gap:18px;
}
.channel-card {
    display:block;
    background:#fff;
    border-radius:16px;
    padding:14px;
    text-decoration:none;
    color:#14151a;
    box-shadow:0 10px 22px rgba(0,0,0,.08);
    transition:transform .15s ease, box-shadow .15s ease;
}
.channel-card:hover { transform: translateY(-3px); box-shadow:0 14px 28px rgba(0,0,0,.12); }

.channel-card__logo {
    position:relative;
    height:100px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f6f7fb;
    border-radius:12px;
    overflow:hidden;
    margin-bottom:10px;
}
.channel-card__logo img { max-width: 90%; max-height: 80%; object-fit: contain; }

.channel-card__title { font-size:14px; font-weight:600; color:#2a2f3a; }

.badge {
    position:absolute; top:8px; right:8px;
    padding:2px 6px; border-radius:6px;
    font-size:11px; font-weight:800; letter-spacing:.2px;
}
.badge--hd { background:#03c03c; color:#fff; }

@media (max-width: 480px){
    .iptv-offer h2 { font-size: 26px; }
    .iptv-offer__sub { font-size: 14px; }
}


/* ===== GRID ===== */
.channels-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
  gap: 20px;
  margin-top: 24px;
}

/* Приховуємо картки після 6-ї, доки немає .expanded */
/* .channels-grid:not(.expanded) .channel-card:nth-child(n+7){ display: none; } */

/* ===== CARD ===== */
.channel-card{
  display: block;
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.channel-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.085);
}

.channel-card__logo{
  position: relative;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.channel-card__logo img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.badge{
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 12px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  background: #edf2ff;
  color: #4154f1;
  font-weight: 600;
}
.badge--hd{
  background: #ecfdf3;
  color: #067647;
}

.channel-card__title{
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== SHOW MORE BUTTON ===== */
.show-more-wrapper{ text-align:center; margin-top: 18px; }
.show-more-btn{
  background: none;
  border: none;
  font-size: 16px;
  color: #0066ff;
  cursor: pointer;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .2s;
}


/* ===== PILLS (щоб були акуратні, якщо ще не стилізовані) ===== */
.iptv-pills{ display:flex; flex-wrap:wrap; gap:10px; margin: 16px 0 8px; padding:0; list-style:none; }
.pill{
  padding:8px 12px; border-radius:999px; border:1px solid rgba(0,0,0,.08); background:#fff;
  font-size:14px; cursor:pointer;
}
.pill.is-active{ background:#f0f7ff; border-color:#cfe4ff; color:#0b63ce; }
.pill__num{ margin-left:6px; opacity:.7; }


/* Add this rule to hide cards that don't match the filter */
.channel-card.is-hidden {
    display: none;
}

/* Hides cards that don't match the current filter */
.channel-card.is-hidden {
    display: none;
}

/* Hides extra cards ONLY when the grid is collapsed (does NOT have the .expanded class) */
.channels-grid:not(.expanded) .channel-card.is-sliced {
    display: none;
}

.iptv-pills {
  display: flex;
  flex-wrap: wrap; /* За замовчуванням (для десктопів) дозволяємо перенесення */
  gap: 10px;
  margin: 16px 0 8px;
  padding: 0;
  list-style: none;
}

.iptv-pills li {
  /* Цей стиль потрібен тільки для мобільної версії, тому ми перенесемо його всередину медіа-запиту */
}

.pill {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap; /* Додамо, щоб текст кнопки не переносився */
}

/* ... інші ваші стилі для .pill.is-active, .pill__num ... */


/* ===== АДАПТИВНІ СТИЛІ ДЛЯ ПОВЗУНКА (ТІЛЬКИ МОБІЛЬНІ) ===== */
@media (max-width: 768px) {

  .iptv-pills {
    flex-wrap: nowrap; /* Забороняємо переносити елементи на новий рядок */
    overflow-x: auto; /* Додаємо горизонтальну прокрутку */

    /* Трюк зі смугою прокрутки */
    padding-bottom: 12px;
    margin-bottom: -12px;
  }

  .iptv-pills li {
    flex-shrink: 0; /* Гарантуємо, що кнопки не будуть стискатися */
  }

  /* Стилізація смуги прокрутки для WebKit-браузерів */
  .iptv-pills::-webkit-scrollbar {
    height: 6px;
  }

  .iptv-pills::-webkit-scrollbar-track {
    background: transparent; /* Робимо доріжку прозорою */
  }

  .iptv-pills::-webkit-scrollbar-thumb {
    background: #e0e0e0; /* Колір повзунка */
    border-radius: 10px;
  }

  .iptv-pills::-webkit-scrollbar-thumb:hover {
    background: #cccccc;
  }
}


/* За замовчуванням ховаємо додаткові пакети */
.pack--extra {
    display: none;
}

/* Коли JavaScript додасть клас .is-expanded, показуємо їх */
section.tv-packs .packs-grid.is-expanded .pack.pack--extra {
    display: block;
}


/* ================== Модальне вікно ================== */
.modal {
  display: none; /* приховане спочатку */
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1000;
  font-family: 'Inter', sans-serif;
}

.modal__overlay {
  position: absolute;
  top:0; left:0;
  width:100%; height:100%;
  background-color: rgba(0,0,0,0.5);
  transition: opacity 0.3s ease;
}

.modal__content {
  position: relative;
  background: #fff;
  border-radius: 12px;
  max-width: 400px;
  width: 90%;
  margin: 80px auto;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  z-index: 10;
  animation: modalFade 0.3s ease;
}

@keyframes modalFade {
  from {opacity: 0; transform: translateY(-20px);}
  to {opacity: 1; transform: translateY(0);}
}

.modal__close {
  position: absolute;
  top: 15px; right: 15px;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: #333;
}

.modal__title {
  font-size: 22px;
  margin-bottom: 5px;
  color: #03C03C;
}

.modal__subtitle {
  font-size: 14px;
  color: #555;
  margin-bottom: 20px;
}

.modal__form label {
  font-size: 14px;
  margin-top: 10px;
  display: block;
  color: #555;
}

.modal__form input {
  width: 100%;
  padding: 12px;
  margin-top: 5px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.modal__form input:focus {
  border-color: #03C03C;
  outline: none;
}

.modal__submit {
  width: 100%;
  margin-top: 20px;
  padding: 12px;
  background-color: #03C03C;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.modal__submit:hover {
  background-color: #029902;
  transform: translateY(-2px);
}

/* Адаптивність */
@media (max-width: 576px) {
  .modal__content {
    margin: 40px 10px;
    padding: 20px;
  }
}


:root{
  --accent:#03C03C;
  --accent-10: color-mix(in oklab, var(--accent) 10%, white);
  --text:#0f172a;
  --muted:#64748b;
  --space:24px;
  --radius:16px;
  --shadow:0 14px 40px rgba(0,0,0,.18);
}

/* overlay */
.modal{ position:fixed; inset:0; display:none; place-items:center;
  background:rgba(15,23,42,.45); backdrop-filter:saturate(140%) blur(6px); z-index:1000;
}
.modal[open]{ display:grid; }

/* dialog */
.modal__dialog{
  width:min(760px, 92vw); background:#fff; color:var(--text);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
  animation:modalFade .22s ease-out both;
}
@keyframes modalFade{ from{opacity:0; transform:translateY(8px) scale(.985)} to{opacity:1; transform:translateY(0) scale(1)} }
@media (prefers-reduced-motion:reduce){ .modal__dialog{animation:none} }

.modal__close{ position:absolute; right:12px; top:12px; width:40px; height:40px;
  border:0; background:transparent; border-radius:12px; cursor:pointer; color:#94a3b8;
}
.modal__close:hover{ color:#475569; }

.modal__header{ display:flex; align-items:center; gap:12px; padding:calc(var(--space)-4px) var(--space) 8px; }
.modal__icon{ width:48px;height:48px; display:grid; place-items:center; border-radius:12px; color:var(--accent); background:var(--accent-10); }
.modal__title{ margin:0; font-weight:800; font-size:clamp(20px,2.5vw,28px); }
.modal__badge{ margin-left:auto; font-size:12px; font-weight:700; padding:6px 10px; border-radius:999px; background:var(--accent-10); color:var(--accent); }

.modal__body{ padding:12px var(--space) var(--space); }
.modal__points{ margin:.25rem 0 .5rem; color:#111827; font-weight:600; }
.modal__text{ margin:0 0 16px; color:#1f2937; line-height:1.6; }

.modal__logos{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 16px; }
.modal__logos img{ height:79px; max-width:90px; object-fit:contain; filter:saturate(1.05) contrast(1.02); }

.modal__priceRow{ display:flex; gap:30px; align-items:center; justify-content:space-between; }
.modal__price{ font-size:20px; font-weight:800; }
.modal__price span{ color:#475569; font-weight:600; margin-left:6px; }

/* CTA */
.cta{ appearance:none; border:0; cursor:pointer; padding:14px 33px; border-radius:14px;
  font-weight:800; background:var(--accent); color:#fff; min-width:180px; box-shadow:0 10px 26px rgba(3,192,60,.28);
}
/*.cta:focus{ outline:none; box-shadow:0 0 0 5px color-mix(in oklab, var(--accent) 25%, transparent); }*/

/* мобільні відступи */
@media (max-width:600px){
  :root{ --space:16px; }
  .modal__icon{ width:40px;height:40px; }
  .modal__logos img{ height:50px; }
  .cta{ padding:12px 16px; }
}

/* ======== PACK PAGE — ARD One vibe (accent #03C03C) ======== */
:root{
  --accent:#03C03C;
  --hero-top:#3f37d0;
  --hero-bot:#241e86;
  --ink:#101828;
  --muted:#667085;
  --card:#fff;
  --bg:#f5f7fb;
  --radius:16px;
  --radius-lg:20px;
  --shadow-hero:0 20px 45px rgba(23,32,56,.20);
  --shadow-card:0 12px 30px rgba(23,32,56,.14);
  --shadow-soft:0 8px 18px rgba(23,32,56,.10);
  --step:#F59E0B;      /* маленький oranž step-чіп, як на скріні */
}

.packsp{ color:var(--ink); }
.packsp .container{ max-width:1140px; margin:0 auto; padding:0 20px; }
.packsp a{ color:white); text-decoration:none; }

/* ---------- HERO (градієнт + “картка” з логотипом праворуч) ---------- */
.packsp-hero{
  padding:72px 0 32px; color:#fff;
  background:
    #03c03c;
}
.packsp-hero .container{
  display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:28px; align-items:center;
}
.packsp-h1{
  margin:0 0 10px; font-weight:900; letter-spacing:.25px;
  font-size:clamp(28px,3.4vw,42px);
}
.packsp-badge{
  margin-left:10px; padding:4px 8px; border-radius:999px;
  background:#fff; color:#0f172a; font-size:12px; font-weight:800;
}
.packsp-sub{ margin:0; opacity:.95; line-height:1.6; max-width:62ch; }

/* Лого/обкладинка справа — як біла картка */
.packsp-logoWrap{ display:grid; place-items:center; }
.packsp-logo{
  width:100%; max-width:360px; border-radius:18px; background:#fff; padding:18px;
  box-shadow:var(--shadow-hero); object-fit:contain;
}

/* ---------- PROMO (білий блок з формою) ---------- */
.packsp-promo{
  margin-top:22px; background:var(--card); color:var(--ink);
  border-radius:var(--radius-lg); padding:20px 22px;
  box-shadow:var(--shadow-card);
}
.packsp-promo .row{
  display:grid; grid-template-columns:1.1fr 420px; gap:18px; align-items:center; margin-top: 44px; padding: 23px;
}
.packsp-promo .hint{
  font-size:20px; font-weight:800; letter-spacing:.2px;
}
.packsp-promo .hint strong{ text-decoration:underline; text-decoration-thickness:2px; }

/* “Krok 1” і підпис до e-mail — без зміни HTML */
.packsp-promo form{ position:relative; padding-top:37px; }
.packsp-promo form::before{
  content:"1"; position:absolute; left:0; top:0;
  width:26px; height:26px; border-radius:999px; display:grid; place-items:center;
  background:var(--step); color:#fff; font-weight:800; font-size:13px;
  box-shadow:0 4px 12px rgba(245,158,11,.45);
}
.packsp-promo form::after{
  content:"Začněte tím, že zadáte váše jméno a telefonní číslo";
  position:absolute; left:34px; top:2px; font-size:12px; font-weight:700; color:#6b7280;
}

/* Поле + CTA в одну лінію */
.field-group{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; }
.packsp-input{
  width:100%; height:46px; border:1.5px solid #e6eaf1; border-radius:12px; padding:10px 14px; font:inherit;
  transition:border-color .15s, box-shadow .15s;
}
.packsp-input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 24%, transparent);
}

/* CTA — зелений акцент */
.packsp-cta{
  height:46px; width: 200px; padding:0 18px; border:none; border-radius:12px; font-weight:800; cursor:pointer;
  background:var(--accent); color:#fff; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px rgba(3,192,60,.30); transition:transform .06s, filter .2s;
}
.packsp-cta:hover{ filter:brightness(.98); transform:translateY(-1px); }
.packsp-cta:focus{ outline:none; box-shadow:0 0 0 5px color-mix(in oklab, var(--accent) 28%, transparent); }

.packsp-note{ display:block; color:#8a94a6; margin-top:8px; }

/* ---------- MAIN ---------- */
.packsp-main{ padding:40px 0 80px; }
.packsp-grid{ display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:28px; align-items:start; }

/* Лівий контент */
.packsp-card{
  background:var(--card); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); padding:24px 26px;
}
.packsp-card h2{ margin:0 0 12px; font-weight:900; font-size:clamp(26px,3vw,32px); }
.packsp-text{ color:#1f2937; line-height:1.8; }

/* Лоток під логотипи */
.packsp-logos{
  margin-top:14px; padding:10px 12px; border-radius:12px; background:#fff;
  box-shadow:inset 0 0 0 1px #eef1f6; display:flex; flex-wrap:wrap; gap:12px; align-items:center;
}
.packsp-logos img{ height:80px; max-width:110px; object-fit:contain; }

/* Правий info-бокс з лініями, як на скріні */
.packsp-props{
  position:sticky; top:24px;
  background:var(--card); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft);
}
.packsp-props .row{
  padding:14px 22px; display:grid; grid-template-columns:1fr auto; align-items:center;
  border-bottom:1px solid #edf0f5;
}
.packsp-props .row:first-child{ border-top-left-radius:var(--radius-lg); border-top-right-radius:var(--radius-lg); }
.packsp-props .row:last-child{ border-bottom:0; border-bottom-left-radius:var(--radius-lg); border-bottom-right-radius:var(--radius-lg); }
.packsp-props .k{ color:#6b7280; }
.packsp-props .v{ font-weight:800; }

/* Ціна + CTA */
.packsp-priceRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 22px 18px; }
.packsp-price strong{ font-size:34px; }
.packsp-price span{ color:#6b7280; margin-left:6px; font-weight:600; }
.packsp-priceRow .packsp-cta{ min-width:170px; height:42px; border-radius:12px; }

/* FAQ */
.packsp-faq h3{ text-align:center; margin:12px 0 18px; font-weight:900; }
.packsp-acc{ display:grid; gap:12px; }
.packsp-acc details{
  background:#fff; border-radius:14px; border:1px solid #e9edf3; box-shadow:var(--shadow-soft); overflow:hidden;
}
.packsp-acc summary{
  list-style:none; cursor:pointer; padding:14px 18px; font-weight:800; display:flex; align-items:center;
}
.packsp-acc summary::-webkit-details-marker{ display:none; }
.packsp-acc summary::after{ content:"+"; margin-left:auto; font-weight:900; transition:transform .2s ease; }
.packsp-acc details[open] summary::after{ content:"–"; transform:rotate(180deg); }
.packsp-acc .a{ padding:0 18px 16px; color:#1f2937; line-height:1.65; }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .packsp-hero .container{ grid-template-columns:1fr; }
  .packsp-grid{ grid-template-columns:1fr; }
  .packsp-promo .row{ grid-template-columns:1fr;}
  .packsp-props{ position:static; }
  .packsp-logo{ max-width:340px; }
}
@media (max-width:600px){
  .field-group{ grid-template-columns:1fr; gap:10px; }
  .packsp-input,.packsp-cta{ height:46px; }
}
:root {
    --accent: #03C03C;
    --text: #1a2233;
    --muted: #5f6b7a;
    --soft: #f5f7fb;
    --radius: 12px;
}

.cameras-hero {
    background: var(--soft);
    padding: 60px 16px;
    display: flex;
    align-items: center;
}
.cameras-hero__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}
.cameras-hero__left { flex: 1; min-width: 280px; }
.cameras-hero__right { flex: 1; min-width: 280px; }
.cameras-hero__left h1 { font-size: 2.2rem; color: var(--accent); margin-bottom: 12px; }
.cameras-hero__left p { color: var(--text); margin-bottom: 20px; }
.tv-btn { background: var(--accent); color: #fff; padding: 12px 24px; border-radius: 8px; border: none; cursor: pointer; transition: 0.3s; }
.tv-btn:hover { background: #029902; }

.cameras-benefits {
    padding: 60px 16px;
    text-align: center;
}
.benefits-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.benefit { background: #fff; border-radius: var(--radius); padding: 20px; flex: 1 1 220px; max-width: 250px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.benefit h3 { color: var(--accent); margin: 12px 0 8px; }
.benefit p { color: var(--muted); font-size: 0.9rem; }

.cameras-steps { background: var(--soft); padding: 60px 16px; }
.steps { counter-reset: step; list-style: none; padding: 0; }
.step { display: flex; gap: 20px; margin-bottom: 24px; }
.step__num { counter-increment: step; background: var(--accent); color: #fff; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-weight: bold; }
.step__num::before { content: counter(step); }
.step__body h4 { margin: 0 0 4px; color: var(--text); font-size: 1rem; }
.step__body p { margin: 0; color: var(--muted); font-size: 0.9rem; }

.cameras-faq { padding: 60px 16px; background: #fff; }
.faq details { margin-bottom: 12px; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.faq p { margin: 6px 0 0; color: var(--muted); font-size: 0.9rem; }

/* Модальне вікно */
.modal { display: none; position: fixed; top:0; left:0; width:100%; height:100%; z-index:1000; font-family: 'Inter', sans-serif; }
.modal__overlay { position:absolute; top:0; left:0; width:100%; height:100%; background-color: rgba(0,0,0,0.5); }
.modal__content { position: relative; background: #fff; border-radius: var(--radius); max-width:400px; width:90%; margin:80px auto; padding:30px; box-shadow:0 10px 30px rgba(0,0,0,0.15);}
.modal__close { position:absolute; top:15px; right:15px; font-size:24px; background:none; border:none; cursor:pointer; color:#333;}
.modal__title { font-size:22px; color: var(--accent); margin-bottom:6px; }
.modal__subtitle { font-size:14px; color: #555; margin-bottom:20px; }
.modal__form input { width:100%; padding:12px; margin-top:5px; border-radius:8px; border:1px solid #ccc; font-size:14px; }
.modal__form input:focus { border-color: var(--accent); outline:none; }
.modal__submit { width:100%; padding:12px; background: var(--accent); color:#fff; border:none; border-radius:8px; cursor:pointer; font-size:16px; margin-top:20px; }
.modal__submit:hover { background:#029902; }

:root {
  --accent: #03C03C;
  --text: #1a2233;
  --muted: #5f6b7a;
  --soft: #f5f7fb;
  --radius: 12px;
  --btn-padding: 14px 28px;
  --font-family: 'Inter', sans-serif;
}

/* ======================= Основні стилі ======================= */
body {
  font-family: var(--font-family);
  color: var(--text);
  margin: 0;
  background-color: #fff;
  line-height: 1.6;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ======================= Hero-блок ======================= */
.cameras-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  padding: 80px 0;
  background: var(--soft);
}

.cameras-hero__left { flex: 1; min-width: 280px; }
.cameras-hero__right { flex: 1; min-width: 280px; text-align: center; }

.cameras-hero .kicker {
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.cameras-hero h1 {
  font-size: 2.5rem;
  color: var(--accent);
  margin: 12px 0 16px;
}

.cameras-hero p {
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 24px;
}

.tv-btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  padding: var(--btn-padding);
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
}

.tv-btn:hover {
  background: #029902;
  transform: translateY(-2px);
}

.cameras-hero__right img {
  width: 100%;
  max-width: 450px;
  border-radius: var(--radius);
}

/* ======================= Переваги ======================= */
.cameras-benefits {
  padding: 60px 0;
  text-align: center;
}

.cameras-benefits h2 {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 40px;
}

.benefits-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.benefit {
  flex: 1 1 220px;
  max-width: 250px;
  background: #fff;
  border-radius: var(--radius);
  padding: 24px 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.benefit:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.benefit h3 {
  font-size: 1.1rem;
  margin: 12px 0 8px;
  color: var(--accent);
}

.benefit p {
  font-size: 0.9rem;
  color: var(--muted);
}

/* ======================= Процес установки ======================= */
.cameras-steps {
  background: var(--soft);
  padding: 60px 0;
  text-align: center;
}

.cameras-steps h2 {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 40px;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.step {
  background: #fff;
  border-radius: var(--radius);
  padding: 24px 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.step__icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 12px;
  font-size: 1.2rem;
}

.step h4 {
  font-size: 1.1rem;
  color: var(--accent);
  margin-bottom: 6px;
}

.step p {
  font-size: 0.9rem;
  color: var(--muted);
}

/* ======================= Галерея ======================= */
.cameras-gallery {
  padding: 60px 0;
}

.cameras-gallery h2 {
  font-size: 2rem;
  color: var(--accent);
  text-align: center;
  margin-bottom: 40px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.gallery-grid img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform 0.3s ease;
}

.gallery-grid img:hover {
  transform: scale(1.05);
}

/* ======================= TOP пакети ======================= */
.cameras-packages {
  padding: 60px 0;
  text-align: center;
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  justify-items: center;
}

.package {
  background: #fff;
  border-radius: var(--radius);
  padding: 24px 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 260px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.package:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.package h3 { font-size: 1.2rem; color: var(--accent); }
.package p { font-size: 0.9rem; color: var(--muted); }
.package .price { font-size: 1.1rem; font-weight: 700; color: var(--accent); margin-top: auto; }

/* ======================= FAQ ======================= */
.cameras-faq {
  padding: 60px 0;
}

.cameras-faq h2 {
  font-size: 2rem;
  color: var(--accent);
  text-align: center;
  margin-bottom: 40px;
}

.cameras-faq details {
  background: #fff;
  padding: 16px 20px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.cameras-faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
  outline: none;
}

.cameras-faq p { margin-top: 6px; color: var(--muted); font-size: 0.9rem; }

/* ======================= Модальне вікно ======================= */
.modal {
  display: none;
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  z-index:1000;
  font-family: var(--font-family);
}

.modal__overlay {
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  background-color: rgba(0,0,0,0.5);
}

.modal__content {
  position: relative;
  background: #fff;
  border-radius: var(--radius);
  max-width:400px;
  width:90%;
  margin:80px auto;
  padding:30px;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
  animation: modalFade 0.3s ease;
}

@keyframes modalFade {
  from {opacity: 0; transform: translateY(-20px);}
  to {opacity: 1; transform: translateY(0);}
}

.modal__close {
  position:absolute; top:15px; right:15px;
  font-size:24px;
  background:none;
  border:none;
  cursor:pointer;
  color:#333;
}

.modal__title { font-size:22px; color: var(--accent); margin-bottom:6px; }
.modal__subtitle { font-size:14px; color:#555; margin-bottom:20px; }
.modal__form input { width:100%; padding:12px; margin-top:5px; border-radius:8px; border:1px solid #ccc; font-size:14px; }
.modal__form input:focus { border-color: var(--accent); outline:none; }
.modal__submit { width:100%; padding:12px; background: var(--accent); color:#fff; border:none; border-radius:8px; cursor:pointer; font-size:16px; margin-top:20px; }
.modal__submit:hover { background:#029902; }

/* ======================= Адаптив ======================= */
@media(max-width: 992px) {
  .cameras-hero { flex-direction: column; text-align:center; }
  .cameras-hero__right img { max-width: 300px; margin: 0 auto; }
}


/* General Styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #F9FAFB;
}

.container {
  width: 95%;
  margin: 0 auto;
}

h2 {
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 20px;
}

h3 {
  font-size: 1.5em;
  font-weight: 600;
}

/* Search Section */
.search-section {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.search-input {
  width: 80%;
  padding: 10px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

/* Services Section */
.services {
  background-color: #f9f9f9;
  padding: 40px 0;
}

.service-cards {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.service-card {
  background-color: #fff;
  padding: 20px;
  width: 23%;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

/* Instructions Section */
.instructions {
  background-color: #f4f4f4;
  padding: 40px 0;
}

.instructions-cards {
  display: flex;
  gap: 20px;
}

.instruction-card {
  background-color: #fff;
  padding: 20px;
  width: 30%;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

/* Contact Form Section */
.contact-form {
  background-color: #fff;
  padding: 40px 0;
}

form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

input, textarea {
  padding: 12px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

textarea {
  resize: vertical;
  height: 100px;
}

button {
  padding: 6px;
  background-color: #5e4db2;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* button:hover {
  background-color: #4c3d91;
} */

:root {
  --accent: #03c03c;
  --ink: #0f172a;
  --muted: #6b7280;
  --bg: #0b1026;
}
.support-hero {
background: linear-gradient(135deg, #03c03c, #016A20);
  padding: 42px 0 24px;
  color: #fff;
}
.support-hero .breadcrumbs {
  font-size: 0.875rem;
  opacity: 0.85;
}
.support-hero .title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  margin: 14px 0 16px;
}
.support-hero .search {
  max-width: 640px;
  position: relative;
}
.support-hero .search input {
  width: 100%;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0 44px 0 14px;
}
.support-hero .search svg {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.7;
}
.tabs {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}
.tabs a {
  display: inline-flex;
  padding: 16px 0;
  color: #6b7280;
  font-weight: 600;
  position: relative;
}
.tabs a.active,
.tabs a:hover {
  color: var(--accent);
}
.tabs a.active:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
}
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .grid {
    grid-template-columns: 1fr;
  }
}
.card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}
.card h3 {
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #0f172a;
}
.card p {
  color: #6b7280;
  margin: 8px 0 0;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.card .go {
  margin-left: auto;
}
.card .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: 0.8125rem;
}
.icon {
  width: 24px;
  height: 24px;
  color: var(--accent);
}
.arrow {
  width: 18px;
  height: 18px;
  color: var(--accent);
}
.section-title {
  font-size: 1rem;
  /* letter-spacing: 0.14em; */
  color: #6b7280;
  font-weight: 800;
  margin: 28px 0 12px;
}
.accordion {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.accordion + .accordion {
  margin-top: 10px;
}
.ac-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  cursor: pointer;
  font-weight: 700;
}
.ac-body {
  display: none;
  padding: 0 18px 18px;
  color: #4b5563;
}
.ac-open .ac-body {
  display: block;
}
.ac-open .chev {
  transform: rotate(180deg);
}
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 40px 0;
}
@media (max-width: 900px) {
  .contact {
    grid-template-columns: 1fr;
  }
}
.ct-cards {
  display: grid;
  gap: 12px;
}
.ct-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px;
}
.ct-card .bullet {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(3, 192, 60, 0.1);
  display: grid;
  place-items: center;
  color: var(--accent);
}
.ct-card a {
  color: #0f172a;
  font-weight: 800;
}
.muted {
  color: #6b7280;
  font-size: 0.875rem;
}
.form {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
}
.form label {
  font-size: 0.8125rem;
  color: #374151;
  font-weight: 700;
  margin-bottom: 6px;
  display: block;
}
.form input,
.form textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.9375rem;
}
.form textarea {
  min-height: 140px;
  resize: vertical;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  border: none;
}
.btn:hover {
  filter: brightness(0.95);
}
.note {
  font-size: 0.875rem;
  color: #6b7280;
}

/* Pills list (tabs-like) */
.doc-pills{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  padding:0;
  margin:18px 0 0;
  list-style:none;
}

.doc-pills a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:9999px;              /* повністю круглі краї */
  background:#fff;                   /* як на скріні */
  color:#0f172a;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(15,23,42,.08);
  border:1px solid rgba(15,23,42,.06);
  line-height:1.1;
  white-space:nowrap;                /* короткі «пігулки» */
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.doc-pills a:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(15,23,42,.12);
  border-color:rgba(15,23,42,.14);
}

.doc-pills a:active{
  transform:translateY(0);
  box-shadow:0 6px 18px rgba(15,23,42,.08);
}

/* гарна поведінка на дуже вузьких екранах */
@media (max-width:480px){
  .doc-pills{ gap:10px; }
  .doc-pills a{ padding:9px 14px; font-size:.95rem; }
}

/* Загальні стилі */
body {
    font-family: 'Inter', sans-serif; /* Шрифт, схожий на той, що у дизайні */
    background-color: #f8f9fa;
    color: #212529;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Секція документів */
.documents-section {
    padding: 60px 0;
}

.section-title {
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 40px;
    color: #121F38; /* Темно-синій колір, як на скріншоті */
}

.documents-grid {
    display: grid;
    /* Створює дві рівні колонки */
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* Стилі для картки документа */
.doc-card {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: inherit;
    border: 1px solid #f0f2f5;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.doc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.doc-card-content {
    flex-grow: 1;
    margin-right: 16px;
}

.doc-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #121F38;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    line-height: 1.4;
}

.doc-card-badge {
    display: inline-block;
    margin-left: 10px;
    background-color: #e9ecef; /* Світло-сірий фон значка */
    color: #495057;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 12px;
    flex-shrink: 0;
}

.doc-card-meta {
    font-size: 14px;
    color: #8A94A6; /* Сірий колір для мета-даних */
    margin: 0;
}

.doc-card-icon svg {
    stroke: #8A94A6; /* Колір іконок */
}

/* Адаптивність для екранів менших за 992px */
@media (max-width: 992px) {
    .documents-grid {
        /* Перемикаємо на одну колонку на менших екранах */
        grid-template-columns: 1fr;
    }
}


/*Additional services*/

:root{
  --accent:#03c03c;
  --accent-2:#02a833;
  --ink:#0f1424;
  --muted:#6b7280;
  --line:rgba(15,20,36,.10);
  --card:#fff;
}

/* ---------- Addons (feature cards) ---------- */
.wl-addons{ padding: clamp(32px,6vw,64px) 0; }
.wl-addons h2{
  font-size: clamp(26px,3.4vw,36px);
  line-height: 1.15; margin:0 0 18px; color:var(--ink);
}
.addons-grid{
  display:grid; gap:20px;
  grid-template-columns: repeat(3,1fr);
}
.addon{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px;
  box-shadow:0 8px 28px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display:flex; flex-direction:column; gap:10px;
}
.addon:hover{
  transform: translateY(-2px);
  box-shadow:0 16px 40px rgba(0,0,0,.10);
  border-color: rgba(3,192,60,.22);
}
.addon__icon{
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(180deg,#e9f9ef,#d8f3e3);
  color:var(--accent);
  display:grid; place-items:center;
}
.addon .i{ width:24px; height:24px; }
.addon .i--fill{ fill: currentColor; }
.addon h3{ margin:6px 0 2px; font-size:18px; color:var(--ink); }
.addon p{ margin:0; color:var(--muted); line-height:1.55; }
.addon__meta{ margin-top:auto; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center; padding:6px 10px;
  border-radius:999px; font-size:12px; white-space:nowrap;
  background:linear-gradient(180deg,#f7fff9,#effff5);
  border:1px solid rgba(3,192,60,.22); color:#0b7a35;
}
.chip--soft{ background:#eef7ff; border-color:rgba(22,74,138,.18); color:#164a8a; }
.addon__link{ color:#25623f; font-weight:700; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Price table ---------- */
.wl-price-table{ padding: clamp(24px,5vw,56px) 0; }
.wl-price-table h2{
  font-size: clamp(26px,3.4vw,36px);
  line-height:1.15; margin:0 0 14px; color:var(--ink);
}
.table-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 8px 28px rgba(0,0,0,.06);
  overflow:hidden;
}
.c-table{ width:100%; border-collapse:separate; border-spacing:0; }
.c-table thead th{
  text-align:left; background:linear-gradient(180deg,var(--accent),var(--accent-2));
  color:#fff; font-weight:800;
  padding:14px 16px; font-size:14px;
}
.c-table tbody td{
  padding:14px 16px; vertical-align:top; border-top:1px solid rgba(15,20,36,.06);
  font-size:15px; color:var(--ink);
}
.c-table tbody tr:nth-child(even) td{ background: #fafdfb; }
.c-table .col-price{ white-space:nowrap; text-align:right; font-weight:800; }

/* примітка під табличкою */
.table-note{
  margin:10px 16px 16px; color:var(--muted); font-size:13px;
}

/* ---------- Responsive (stacked rows) ---------- */
@media (max-width: 900px){
  .addons-grid{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  .c-table thead{ display:none; }
  .c-table, .c-table tbody, .c-table tr, .c-table td{ display:block; width:100%; }
  .c-table tbody tr{ border-top:1px solid rgba(15,20,36,.06); }
  .c-table tbody td{
    border:none; padding:10px 16px;
  }
  .c-table tbody td[colspan]{ padding-top:0; }
  .c-table tbody td.col-price{ text-align:left; }
  .c-table tbody td::before{
    content: attr(data-label) " ";
    display:block; font-size:12px; color:var(--muted); margin-bottom:2px;
  }
}




/*end*/

/*podpora*/
:root{
  --accent:#03c03c;
  --accent-2:#02a833;
  --ink:#0f1424;
  --muted:#6b7280;
  --line:rgba(15,20,36,.10);
  --card:#fff;
}

/* секція */
.wl-help{ padding: clamp(28px,6vw,60px) 0; }

/* Tabs */
.help-tabs{
  position:relative;
  display:flex; gap:24px; align-items:center;
  border-bottom:1px solid rgba(15,20,36,.08);
  margin-bottom:16px;
}
.help-tab{
  position:relative;
  appearance:none; background:none; border:0;
  padding:14px 2px; font-weight:700; color:#6b748a; cursor:pointer;
}
.help-tab.is-active{ color:var(--ink); }
.help-tab__activebar{
  position:absolute; bottom:-1px; left:0; height:2.5px; width:140px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:2px; transform:translateX(0); transition: transform .25s ease, width .25s ease;
}

/* Panels */
.help-panel{ display:none; }
.help-panel.is-active{ display:block; }

/* Карточки */
.help-grid{
  display:grid; gap:16px; grid-template-columns: repeat(3,1fr);
  margin-bottom:16px;
}
.help-card{
  display:flex; align-items:flex-start; gap:14px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  color:inherit;
}
.help-card:hover{
  transform: translateY(-2px);
  box-shadow:0 16px 40px rgba(0,0,0,.1);
  border-color: rgba(3,192,60,.22);
}
.help-card__icon{
  flex:0 0 auto; width:36px; height:36px; border-radius:999px;
  background:#fff; position:relative;
  box-shadow: inset 0 0 0 2px rgba(3,192,60,.45);
  display:grid; place-items:center; color:var(--accent);
}
.help-card__icon .i{ width:20px; height:20px; }
.help-card__icon .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); display:block; }

.help-card__content{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.help-card__content strong{ color:var(--ink); font-size:16px; line-height:1.25; }
.help-card__content span{ color:var(--muted); font-size:14px; line-height:1.5; }

.help-card__arrow{
  margin-left:auto; align-self:center; width:10px; height:10px; flex:0 0 auto;
  border-right:2px solid #9aa1b3; border-bottom:2px solid #9aa1b3;
  transform: rotate(-45deg); transition: transform .2s ease, border-color .2s ease;
}
.help-card:hover .help-card__arrow{ transform: translateX(2px) rotate(-45deg); border-color:var(--accent); }

/* Accordions */
.help-acc{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  overflow:hidden; margin-top:12px;
}
.help-acc > summary{
  list-style:none; display:flex; align-items:center; gap:10px;
  padding:14px 16px; font-weight:700; cursor:pointer; color:var(--ink);
}
.help-acc > summary::-webkit-details-marker{ display:none; }
.help-acc > summary::after{
  content:""; margin-left:auto; width:10px; height:10px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: rotate(-45deg); transition:.2s;
  opacity:.8;
}
.help-acc[open] > summary::after{ transform: rotate(135deg); }

.help-acc__body{ padding:0 16px 14px; }
.help-acc__body ul{ margin:0; padding-left:18px; }
.help-acc__body a{ color:#25623f; text-underline-offset:3px; }

/* Responsive */
@media (max-width: 1100px){
  .help-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .help-grid{ grid-template-columns: 1fr; }
  .help-tabs{ gap:16px; overflow:auto; }
}


/*end*/


/* ===== Modern Mobile Menu ===== */
.modern-mm { --b:#e5e7eb; --bg:#fff; --soft:#f8fafc; --fg:#111827; --muted:#6b7280; --accent:#2563eb; --ok:#059669; }
.menu-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:opacity .2s; z-index:1000; }
.menu-backdrop.show{ opacity:1; }
.body-lock{ overflow:hidden; }

.zq_mobile_menu{ position:fixed; top:0; left:0; height:100dvh; width:88%; max-width:380px; background:var(--bg);
  border-right:1px solid var(--b); transform:translateX(-104%); transition:transform .25s ease; z-index:1001;
  display:flex; flex-direction:column; box-shadow:8px 0 30px rgba(0,0,0,.12); }
.zq_mobile_menu.open{ transform:translateX(0); }

.mm-head{ position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--b); background:linear-gradient(180deg,#ffffff 0%,#f9fafb 100%); }
.mm-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg); font-weight:800; }
.mm-brand img{ width:110px; height:auto; display:block; }
.close-menu{ width:40px; height:40px; border:none; background:#03B839; border-radius:10px; cursor:pointer; font-size:22px; }

.mm-nav{ padding:10px 8px; overflow:auto; flex:1; }
.mm-root, .sub-menu{ list-style:none; margin:0; padding:0; }
.mm-root > li{ border-bottom:1px dashed var(--b); }

.mm-root > li > a,
.dmenu{
  width:100%; display:flex; align-items:center; gap:12px; padding:12px 12px; font-size:16px; color:var(--fg);
  text-decoration:none; background:none; border:none; text-align:left; cursor:pointer; border-radius:10px;
}
.mm-root > li > a:hover, .dmenu:hover{ background:var(--soft); }
.mi{ width:20px; height:20px; display:inline-grid; place-items:center; color:var(--accent); margin-right: 16px;}
.mi svg{ width:20px; height:20px; }

.dmenu > span:nth-child(1){ display:flex; align-items:center; gap:12px; } /* icon+label if you group them */
.dmenu .chev svg{ width:18px; height:18px; transition:transform .2s; color:#6b7280; }
.dmenu[aria-expanded="true"] .chev svg{ transform:rotate(180deg); }

.sub-menu{ padding: 0 0 12px 10px; }
.sub-menu li a{
  display:flex; align-items:center; gap:12px; padding:10px 12px 10px 34px; color:#374151; text-decoration:none;
  border-radius:8px; margin:4px 8px 0 0;
}
.sub-menu li a:hover{ background:#f3f4f6; }

.mm-contacts{ padding:12px 14px; border-top:1px solid var(--b); display:grid; gap:8px; background:#fcfdfd; }
.mm-cta{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; text-decoration:none; color:#fff; background:#03b839 }
.mm-cta.soft{ background:#eef2ff; color:#1f2937; }
.mm-cta .mi svg{ color:#fff; }
.mm-cta.soft .mi svg{ color:var(--accent); }

.mm-socials{ padding:12px 14px 16px; display:flex; gap:10px; border-top:1px solid var(--b); }
.soc{ width:40px; height:40px; border-radius:10px; display:inline-grid; place-items:center; color:#111827; background:#f3f4f6; text-decoration:none; }
.soc:hover{ background:#e5e7eb; }
.soc svg{ width:20px; height:20px; }

/* Доступність */
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Ховаємо сайдбар на великих екранах (якщо треба) */
@media (min-width: 1200px){ .zq_mobile_menu, .menu-backdrop{ display:none; } }




/*wifi pokryti */
        :root {
            --accent: #03C03C;
            --accent-600: #039A31;
            --ink: #0B1220;
            --muted: #6B7280;
            --card: #fff;
            --ring: rgba(3, 192, 60, .25);
            --radius: 16px;
            --shadow: 0 6px 24px rgba(16, 24, 40, .08);
        }
          .icon { color:#03C03C; } 
        .page {
            color: var(--ink);
            font: 16px/1.55 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0
        }

        h1 {
            font-size: clamp(28px, 4vw, 44px);
            line-height: 1.15;
            margin: 0 0 14px;
            letter-spacing: -.02em
        }

        h2 {
            font-size: clamp(22px, 3vw, 32px);
            line-height: 1.2;
            margin: 0 0 14px
        }

        h3 {
            font-size: clamp(18px, 2.6vw, 22px);
            margin: 0 0 8px
        }

        p {
            margin: 0 0 12px
        }

        .muted {
            color: var(--muted)
        }

        .lead {
            font-size: 18px;
            color: #1F2937
        }

        .space-16 {
            height: 16px
        }

        .space-24 {
            height: 24px
        }

        /* badges, buttons */
        .badge {
            display: inline-flex;
            gap: 8px;
            align-items: center;
            padding: 6px 10px;
            border-radius: 999px;
            font-weight: 700
        }

        .badge--ok {
            background: #E8FFF1;
            color: #065F46
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 18px;
            border-radius: 12px;
            font-weight: 800;
            text-decoration: none
        }

        /* .btn--accent {
            background: var(--accent);
            color: #fff;
            box-shadow: 0 6px 18px var(--ring)
        } */

        .btn--accent:hover {
            background: var(--accent-600)
        }

        .btn--ghost {
            background: #fff;
            color: var(--accent);
            border: 1.5px solid var(--accent)
        }

        /* hero */
        .hero {
            background: linear-gradient(180deg, #F8FFF9 0%, #fff 100%)
        }

        .hero__wrap {
            display: grid;
            gap: 24px;
            grid-template-columns: 1.05fr .95fr;
            align-items: center;
            padding: 42px 0
        }

        .hero__img {
            aspect-ratio: 16/10;
            border-radius: 16px;
            background: #E5F8EA center/cover no-repeat
        }

        .hero__cta {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 16px
        }

        .hero__meta {
            display: flex;
            gap: 18px;
            flex-wrap: wrap;
            color: #065F46
        }

        .hero__meta li {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 700
        }

        .icon {
            width: 22px;
            height: 22px
        }

        /* logos */
        .logos {
            padding: 16px 0 38px
        }

        .logos__row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
            align-items: center
        }

        .logos__item {
            height: 88px;
            background: #F9FAFB;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .logos__item img {
            max-width: 140px;
            height: auto;
            object-fit: contain
        }

        /* steps */
        .installation-steps {
            padding: 48px 0;
            background: #F7FAF8
        }

        .installation-steps__row {
            display: grid;
            gap: 22px;
            grid-template-columns: repeat(4, minmax(240px, 1fr));
            max-width: 1100px;
            margin: 0 auto
        }

        @media (max-width:1200px) {
            .installation-steps__row {
                grid-template-columns: repeat(3, minmax(240px, 1fr))
            }
        }

        @media (max-width:900px) {
            .installation-steps__row {
                grid-template-columns: repeat(2, minmax(240px, 1fr))
            }
        }

        @media (max-width:560px) {
            .installation-steps__row {
                grid-template-columns: 1fr;
                max-width: 520px
            }
        }

        .installation-step {
            display: grid;
            grid-template-columns: 56px 1fr;
            gap: 14px;
            min-height: 132px;
            padding: 18px 16px;
            background: #fff;
            border: 1px solid #eef2f7;
            border-radius: 16px;
            box-shadow: 0 10px 24px rgba(16, 24, 40, .06)
        }

        .installation-step__icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: #ECFDF5;
            display: grid;
            place-items: center
        }

        .installation-step__title {
            margin: 0;
            font-weight: 900
        }

        .installation-step__text {
            margin: 0;
            color: #4B5563
        }

        /* audience chips */
        .aud {
            padding: 10px 0 36px
        }

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

        .aud__item {
            padding: 16px;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            background: #fff;
            font-weight: 800
        }

        .aud__item:hover {
            border-color: var(--accent);
            box-shadow: 0 10px 22px var(--ring)
        }

        /* showcase */
        .quality {
            padding: 32px 0
        }

        .quality__grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px
        }

        .qual {
            padding: 18px;
            border: 1px solid #e5e7eb;
            border-radius: 16px
        }

        .qual__img {
            height: 220px;
            border-radius: 12px;
            background: #EEF2F7 center/cover no-repeat
        }

        .rec {
            padding: 14px 18px;
            border-radius: 14px;
            background: linear-gradient(90deg, var(--accent) 0%, #12d669 60%, #7cf3aa 100%);
            color: #003b18;
            font-weight: 900
        }

        /* pricing / systems */
        .split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 22px
        }

        .card {
            background: var(--card);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            border: 1px solid #e5e7eb
        }

        .card .price {
            font-weight: 900;
            font-size: 1.2em
        }

        .chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            background: #F0FDF4;
            color: #065F46;
            font-weight: 800
        }

        .ul {
            margin: 10px 0 0;
            padding-left: 18px
        }

        .ul li {
            margin: 6px 0
        }

        /* FAQ chips layout */
        .faq {
            background: #F9FAFB;
            padding: 24px 0;
            border-radius: 12px
        }

        .faq-grid {
            display: grid;
            gap: 18px;
            grid-template-columns: 1fr 1fr;
            max-width: 1200px;
            margin: 0 auto
        }

        .faq-item {
            background: #fff;
            border-radius: 10px;
            padding: 16px;
            border: 1px solid #E5E7EB;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .08)
        }

        .faq-item[open] {
            box-shadow: 0 6px 20px rgba(0, 0, 0, .1)
        }

        .faq-item summary {
            font-weight: 800;
            cursor: pointer
        }

        .faq-item p {
            color: #4B5563;
            margin-top: 8px
        }

        @media (max-width:1024px) {

            .hero__wrap,
            .logos__row,
            .quality__grid,
            .split,
            .faq-grid {
                grid-template-columns: 1fr
            }
        }



        /* --- Vizuální vylepšení pro ceník --- */

/* Seznam vlastností s ikonami */
.ul-features {
    list-style-type: none;
    padding-left: 0;
    margin-top: 16px;
    font-size: 0.95em;
}

.ul-features li {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.ul-features .icon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    color: var(--accent); /* Použije vaši hlavní barvu */
    flex-shrink: 0;
}

/* Styly pro tlačítka (CTA) */
.button-primary,
.button-secondary {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

/* Hlavní tlačítko */
.button-primary {
    background-color: var(--accent);
    color: white;
}

.button-primary:hover {
    background-color: #333; /* Ztmaví se po najetí */
    color: white;
}

/* Sekundární tlačítko */
.button-secondary {
    background-color: #eef2f7;
    color: #333;
    border-color: #eef2f7;
}

.button-secondary:hover {
    background-color: #dfe6ef;
    border-color: #dfe6ef;
}



/* --- Vizuální vylepšení pro ceník --- */
.ul-features {
    list-style-type: none;
    padding-left: 0;
    margin-top: 16px;
    font-size: 0.95em;
}

.ul-features li {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    line-height: 1.4;
}

.ul-features .icon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    color: var(--accent);
    flex-shrink: 0;
}

.button-primary,
.button-secondary {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.button-primary {
    background-color: var(--accent);
    color: white;
}
.button-primary:hover {
    filter: brightness(110%);
}

.button-secondary {
    background-color: #eef2f7;
    color: #333;
}
.button-secondary:hover {
    background-color: #dfe6ef;
}
/*end */


/*Kamery*/
.page{color:var(--ink); font:16px/1.55 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
  .container{max-width:1200px; margin:0 auto; padding:0 0px;}
  h1{font-size:clamp(28px,4vw,44px); line-height:1.15; margin:0 0 14px; letter-spacing:-.02em;}
  h2{font-size:clamp(22px,3vw,32px); line-height:1.2; margin:0 0 14px;}
  h3{font-size:clamp(18px,2.6vw,22px); margin:0 0 8px;}
  p{margin:0 0 12px; color:#111827;}
  .muted{color:var(--muted)}
  .lead{font-size:18px; color:#1F2937}
  .space-16{height:16px}
  .space-24{height:24px}
  .space-48{height:48px}
  .badge-cam { margin-bottom: 10px; display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px; font-weight:600; background:#E8FFF1; color:#065F46}
  .btn{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px; font-weight:700; text-decoration:none; transition:.2s; cursor:pointer}
  .btn--accent{background:var(--accent); color:#fff; box-shadow:0 6px 18px var(--ring)}
  .btn--accent:hover{background:var(--accent-600)}
  .btn--ghost{background:transparent; color:var(--accent); border:1.5px solid var(--accent)}
  .grid{display:grid; gap:18px}
  .card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow)}
  .chip{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#F0FDF4; color:#065F46; font-weight:600; font-size:14px}
  .pill{display:inline-flex; padding:8px 12px; border:1px solid #e5e7eb; border-radius:999px; color:#374151; background:#fff}
  .icon{width:26px; height:26px}
  .hero{background:linear-gradient(180deg,#F8FFF9 0%,#fff 100%)}
  .hero__wrap{display:grid; gap:24px; grid-template-columns:1.05fr .95fr; align-items:center; padding:42px 0}
  .hero__img{aspect-ratio:16/10; border-radius:16px; background:#E5F8EA center/cover no-repeat}
  .hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 42px;}
  .hero__meta{display:flex; gap:18px; flex-wrap:wrap; color:#065F46}
  .hero__meta li{display:flex; align-items:center; gap:8px; font-weight:600}
  .logos{padding:16px 0 38px}
  .logos__row{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:center}
  .logos__item{height:111px; background:#F9FAFB; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#9CA3AF; font-weight:700}
/* Installation steps block */
.installation-steps{padding:48px 0;background:#F7FAF8}

.installation-steps__row{
  display:grid;
  gap:22px;
  grid-template-columns:repeat(4,minmax(240px,1fr));
  max-width:1100px;         /* максимальна ширина для центрування */
  margin:0 auto;            /* центруємо блок */
}

@media (max-width:1200px){ .installation-steps__row{grid-template-columns:repeat(3,minmax(240px,1fr))} }
@media (max-width:900px) { .installation-steps__row{grid-template-columns:repeat(2,minmax(240px,1fr))} }
@media (max-width:560px) { .installation-steps__row{grid-template-columns:1fr; max-width:520px} }

/* Step cards */
.installation-step{
  display:grid;
  grid-template-columns:56px 1fr; /* іконка + текст */
  align-items:start;
  gap:14px;
  min-height:132px;
  padding:18px 16px;
  background:#fff;
  border:1px solid #eef2f7;
  border-radius:16px;
  box-shadow:0 10px 24px rgba(16,24,40,.06);
}

.installation-step__icon{
  width:48px;height:48px;
  border-radius:12px;
  background:#ECFDF5;
  display:grid;place-items:center;
}

.installation-step__body{display:grid;gap:6px}
.installation-step__title{margin:0;font-weight:800;line-height:1.2}
.installation-step__text{margin:0;color:#4B5563}

/* Avoid wrapping step titles */
.installation-step__title .nowrap{white-space:nowrap}


  .aud{padding:10px 0 36px}
  .aud__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
  .aud__item{padding:16px; border:1px solid #e5e7eb; border-radius:14px; background:#fff; font-weight:700}
  .aud__item:hover{border-color:var(--accent); box-shadow:0 10px 22px var(--ring)}
  .quality{padding:32px 0}
  .quality__grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
  .qual{padding:18px; border:1px solid #e5e7eb; border-radius:16px}
  .qual__img{height:240px; border-radius:12px; background:#EEF2F7 center/cover no-repeat}
  .rec{padding:14px 18px; border-radius:14px; background:linear-gradient(90deg,var(--accent) 0%, #12d669 60%, #7cf3aa 100%); color:#003b18; font-weight:800}
  .rec small{opacity:.8; font-weight:700}
  .split{display:grid; grid-template-columns:1fr 1fr; gap:22px}
  .ul{margin:10px 0 0 0; padding-left:18px}
  .ul li{margin:6px 0}
  .contact-bar{margin:24px 0; padding:16px; border:2px solid #111827; border-radius:14px; display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center}
  .contact-bar input{height:44px; padding:0 12px; border:1.5px solid #e5e7eb; border-radius:10px; outline:none}
  .contact-bar input:focus{border-color:var(--accent); box-shadow:0 0 0 6px var(--ring)}
  details{background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px 14px}
  details[open]{box-shadow:var(--shadow)}
  summary{cursor:pointer; font-weight:700; list-style:none}
  summary::-webkit-details-marker{display:none}

  .quality .qual h3{margin:8px 0 10px;font-weight:600}
.quality .qual .qual__img{
  width:100%; background-size:cover; background-position:center;
  border-radius:12px; box-shadow:0 6px 20px rgba(16,24,40,.08)
}
.quality .qual .qual__desc{margin:10px 0 0; padding-left:18px; color:#4b5563; font-size:.95rem}
.quality .qual .qual__desc li{margin:6px 0}

  /* Q/A Section */
.faq{
  background-color: #F9FAFB;
  padding: 24px 0;
  border-radius: 12px;
}

.faq-header {
  text-align: center;
  margin-bottom: 20px;
}

.faq h2 {
  font-size: 2em;
  color: #1F2937;
  font-weight: 700;
}

.faq-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
  max-width: 1200px;
  margin: 0 auto;
}

.faq-item {
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.faq-item:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.faq-item summary {
  font-size: 1.1em;
  color: #111827;
  font-weight: 600;
  cursor: pointer;
}

.faq-item p {
  margin-top: 10px;
  color: #4B5563;
}

.faq-icon {
  margin-right: 10px;
  color: #03C03C;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .faq-item summary {
    font-size: 1.2em;
  }
}


  @media (max-width:1024px){
    .hero__wrap,.logos__row,.steps__row,.aud__grid,.quality__grid,.split,.faq,.cta{grid-template-columns:1fr}
  }

  .container-cam{
        max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 ;
  }
  .logos__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 стовпці */
  gap: 18px;
}

.logos__item img {
  width: 100%; /* Робимо зображення адаптивним */
  height: auto; /* Підтримуємо пропорції */
  max-width: 150px; /* Максимальна ширина для зображень */
  object-fit: contain; /* Зберігаємо пропорції без обрізки */
}


/*end*/

/*sprava site */

  .page{color:var(--ink); font:16px/1.55 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
  .container{max-width:1200px; margin:0 auto; padding:0 0px;}
  h1{font-size:clamp(28px,4vw,44px); line-height:1.15; margin:0 0 14px; letter-spacing:-.02em;}
  h2{font-size:clamp(22px,3vw,32px); line-height:1.2; margin:0 0 14px;}
  h3{font-size:clamp(18px,2.6vw,22px); margin:0 0 8px;}
  p{margin:0 0 12px; color:#111827;}
  .muted{color:var(--muted)}
  .lead{font-size:18px; color:#1F2937}
  .space-16{height:16px}
  .space-24{height:24px}
  .space-48{height:48px}
  .badge { margin-bottom: 10px; display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px; font-weight:600; background:#E8FFF1; color:#065F46}
  .btn{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px; font-weight:700; text-decoration:none; transition:.2s; cursor:pointer}
  .btn--accent{background:var(--accent); color:#fff; box-shadow:0 6px 18px var(--ring)}
  .btn--accent:hover{background:var(--accent-600)}
  .btn--ghost{background:transparent; color:var(--accent); border:1.5px solid var(--accent)}
  .grid{display:grid; gap:18px}
  .card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow)}
  .chip{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#F0FDF4; color:#065F46; font-weight:600; font-size:14px}
  .pill{display:inline-flex; padding:8px 12px; border:1px solid #e5e7eb; border-radius:999px; color:#374151; background:#fff}
  .icon{width:26px; height:26px}

  /* HERO */
  .hero{background:linear-gradient(180deg,#F8FFF9 0%,#fff 100%)}
  .hero__wrap{display:grid; gap:24px; grid-template-columns:1.05fr .95fr; align-items:center; padding:42px 0}
  .hero__img{aspect-ratio:16/10; border-radius:16px; background:#E5F8EA center/cover no-repeat}
  .hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 42px;}
  .hero__meta{display:flex; gap:18px; flex-wrap:wrap; color:#065F46}
  .hero__meta li{display:flex; align-items:center; gap:8px; font-weight:600}

  /* LOGOS */
  .logos{padding:16px 0 38px}
  .logos__row{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:center}
  .logos__item{height:111px; background:#F9FAFB; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#9CA3AF; font-weight:700}
  .logos__item img{max-width:150px; width:100%; height:auto; object-fit:contain}

  /* STEPS */
  .steps{padding:48px 0;background:#F7FAF8}
  .steps__row{display:grid; gap:22px; grid-template-columns:repeat(4,minmax(240px,1fr)); max-width:1100px; margin:0 auto}
  @media (max-width:1200px){ .steps__row{grid-template-columns:repeat(3,minmax(240px,1fr))} }
  @media (max-width:900px) { .steps__row{grid-template-columns:repeat(2,minmax(240px,1fr))} }
  @media (max-width:560px) { .steps__row{grid-template-columns:1fr; max-width:520px} }
  .step{display:grid; grid-template-columns:56px 1fr; align-items:start; gap:14px; min-height:132px; padding:18px 16px; background:#fff; border:1px solid #eef2f7; border-radius:16px; box-shadow:0 10px 24px rgba(16,24,40,.06)}
  .step__icon{width:48px;height:48px;border-radius:12px;background:#ECFDF5;display:grid;place-items:center}
  .step__title{margin:0;font-weight:800;line-height:1.2}
  .step__text{margin:0;color:#4B5563}
  .nowrap{white-space:nowrap}

  /* SERVICES */
  .services{padding:28px 0}
  .services__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  .service{padding:16px; border:1px solid #e5e7eb; border-radius:14px; background:#fff}
  .service h3{margin:0 0 6px}
  .service p{color:#4B5563}
  @media (max-width:1024px){ .hero__wrap,.logos__row,.steps__row,.services__grid,.aud__grid,.quality__grid,.split,.faq-grid{grid-template-columns:1fr} }

  /* AUDIENCE */
  .aud{padding:10px 0 36px}
  .aud__grid{display:grid; ; gap:16px}
  .aud__item{padding:16px; border:1px solid #e5e7eb; border-radius:14px; background:#fff; font-weight:700}
  .aud__item:hover{border-color:var(--accent); box-shadow:0 10px 22px var(--ring)}

  /* QUALITY (Monitoring/Reporty) */
  .quality{padding:32px 0}
  .quality__grid{display:grid;; gap:20px}
  .qual{padding:18px; border:1px solid #e5e7eb; border-radius:16px}
  .qual__img{height:240px; border-radius:12px; background:#EEF2F7 center/cover no-repeat}
  .rec{padding:14px 18px; border-radius:14px; background:linear-gradient(90deg,var(--accent) 0%, #12d669 60%, #7cf3aa 100%); color:#003b18; font-weight:800}
  .rec small{opacity:.8; font-weight:700}

  /* PRICING */
  .split{display:grid; gap:22px}
  .price {font-weight:800}
  .plan .ul{margin:10px 0 0 0; padding-left:18px}
  .plan .ul li{margin:6px 0}

  /* FAQ */
  .faq{background-color:#F9FAFB; padding:24px 0; border-radius:12px}
  .faq-header{text-align:center; margin-bottom:20px}
  .faq-grid{display:grid; gap:18px; grid-template-columns: 1fr 1fr; max-width:1200px; margin:0 auto}
  .faq-item{background:#fff; border-radius:10px; padding:16px; border:1px solid #E5E7EB; box-shadow:0 2px 8px rgba(0,0,0,0.1); transition:.3s}
  .faq-item:hover{border-color:var(--accent); box-shadow:0 6px 20px rgba(0,0,0,0.1)}
  .faq-item summary{font-size:1.05em; color:#111827; font-weight:600; cursor:pointer}
  .faq-item p{margin-top:10px; color:#4B5563}
  .faq-icon{margin-right:10px}
  @media (max-width:768px){ .faq-grid{grid-template-columns:1fr} }



/*end */

.wl-input--combo { position: relative; }
.wl-suggest {
    color: black;
  position: absolute; left:0; right:0; top:100%;
  background:#fff; border:1px solid rgba(0,0,0,.12);
  border-radius:10px; margin-top:6px; padding:6px 0;
  max-height:280px; overflow:auto; z-index:1000; /* важливо */
  box-shadow:0 12px 24px rgba(16,24,40,.08);
}
.wl-suggest[hidden]{ display:none; }
.wl-suggest .wl-suggest__item { padding:10px 14px; cursor:pointer; }
.wl-suggest .wl-suggest__item[aria-selected="true"],
.wl-suggest .wl-suggest__item:hover { background:#f6f8fb; }


.wl-suggest__meta { padding:10px 14px; color:#6b7280; cursor:default; }
.wl-suggest__meta[aria-disabled="true"] { pointer-events:none; }
.modal[hidden]{ display:none !important; }
.modal{ position:fixed; inset:0; z-index:9999; }
.modal__overlay{ position:absolute; inset:0; background:rgba(15,20,32,.55); }
.modal__dialog{
  position:relative; max-width:520px; width:100%;
  margin:6vh auto; background:#fff; border-radius:16px;
  padding:20px; box-shadow:0 20px 60px rgba(16,24,40,.2); z-index:1;
}
.modal__close{ position:absolute; top:8px; right:10px; border:0; background:transparent; font-size:24px; line-height:1; cursor:pointer; }


/*MAIN MODAL STYLES START */

/* base */
.nl-modal{ position:fixed; inset:0; display:none; z-index:999999; }
.nl-modal.open{ display:block; }
.nl-modal__overlay{ position:absolute; inset:0; background:rgba(12,18,28,.55); backdrop-filter: blur(4px); }
.nl-modal__dialog{
  position:relative; max-width:560px; width:calc(100% - 32px);
  margin:6vh auto; border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.95));
  backdrop-filter: saturate(1.2) blur(6px);
  box-shadow: 0 30px 80px rgba(14, 22, 41, .35);
  padding:22px 22px 18px; animation: nl-pop .18s ease-out;
  color:#0f172a;
}
@keyframes nl-pop{ from{ transform:translateY(8px) scale(.98); opacity:.6 } to{ transform:translateY(0) scale(1); opacity:1 } }

.nl-modal__close{
  position:absolute; top:10px; right:12px; width:36px; height:36px; border-radius:12px;
  display:grid; place-items:center; color:#334155; background:#eef2f7; border:0; cursor:pointer;
}
.nl-modal__close:hover{ background:#e6ebf3; }

/* header */
.nl-modal__header{ display:flex; gap:14px; align-items:flex-start; margin-bottom:10px; }
.nl-modal__icon{ flex:0 0 auto; width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#0ea5e9; background:#e0f2fe; box-shadow: inset 0 0 0 1px rgba(14,165,233,.25); }
.nl-modal__title{ margin:0; font-size:22px; line-height:1.25; font-weight:800; letter-spacing:.1px; }
.nl-modal__subtitle{ display:flex; gap:8px; align-items:center; margin-top:4px; color:#64748b; font-size:14px; }

/* form */
.nl-modal__form{ margin-top:12px; }
.nl-field{ display:block; margin-bottom:14px; }
.nl-field__label{ display:block; margin-bottom:8px; font-weight:600; color:#334155; }
.nl-input-wrap{ position:relative; }
.nl-input-wrap svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#64748b; }
.nl-input{
  width:100%; padding:12px 12px 12px 40px; border:1px solid #e2e8f0; border-radius:12px;
  font-size:16px; outline:none; background:#fff;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.nl-input:focus{ border-color:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.15); }
.nl-sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* button */
.nl-btn{ display:inline-flex; align-items:center; gap:10px; border:0; cursor:pointer; border-radius:12px; padding:14px 16px; font-weight:700; }
.nl-btn--primary{
 
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color:#fff; box-shadow: 0 10px 24px rgba(34,197,94,.35);
}
.nl-btn--primary:hover{ filter: brightness(1.03); }

/* alerts */
.nl-alert{ display:flex; align-items:center; gap:8px; margin-top:10px; padding:10px 12px; border-radius:12px; font-weight:600; }
.nl-alert--ok { background:#ecfdf5; color:#0f766e; }
.nl-alert--err{ background:#fef2f2; color:#b91c1c; }

.nl-modal__success{ text-align:center; padding:16px 8px; }
.nl-modal__success-icon{ margin:8px auto 10px; }
.nl-modal__success-title{ margin:4px 0 6px; font-size:1.15rem; }
.nl-modal__success-text{ margin:0 0 14px; color:#64748b; }


/*MAIN MODAL STYLES END */


/* — змінні тепер локальні — */
#wl-scope{
  --wl-ink:#0B1220;
  --wl-muted:#6B7280;
  --wl-accent:#19C165;
  --wl-accent-600:#14A653;
  --wl-ring:rgba(25,193,101,.18);
  --wl-radius:12px;
  --wl-shadow:0 6px 20px rgba(16,24,40,.06);
}

/* вся далішня стилізація — тільки всередині #wl-scope */
#wl-scope .wl-form{ max-width:520px; color:var(--wl-ink); }
#wl-scope .wl-form--card{
  background:#fff; border:1px solid #E7EBF1; border-radius:16px; padding:16px; box-shadow:var(--wl-shadow);
}
#wl-scope .wl-note{ margin:0 0 12px; font-size:14px; color:var(--wl-muted); }

#wl-scope .wl-form__row{ margin:0 0 10px; }
#wl-scope .wl-input{
  width:100%; height:44px; padding:10px 12px;
  font:15px/1.4 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--wl-ink); background:#fff; border:1px solid #D9DFE7; border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(16,24,40,.02);
  transition:border-color .18s, box-shadow .18s, background-color .18s;
}
#wl-scope .wl-input::placeholder{ color:#9CA3AF; }
#wl-scope .wl-input:hover{ border-color:#CBD3DE; }
#wl-scope .wl-input:focus{ outline:none; border-color:var(--wl-accent); box-shadow:0 0 0 2px var(--wl-ring); }

/* валідація */
#wl-scope .wl-input.is-invalid{ border-color:#DC2626; }
#wl-scope .wl-input.is-invalid:focus{ box-shadow:0 0 0 2px rgba(220,38,38,.16); }
#wl-scope .wl-help{ display:block; margin-top:6px; font-size:12px; color:var(--wl-muted); }
#wl-scope .wl-help--error{ color:#DC2626; }

/* кнопка */
#wl-scope .wl-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 18px; font-weight:600; font-size:15px; letter-spacing:.2px;
  border-radius:10px; border:1px solid transparent; background:var(--wl-accent); color:#fff;
  cursor:pointer; user-select:none; transition:background-color .18s, transform .04s, box-shadow .18s, opacity .18s;
  box-shadow:0 1px 2px rgba(16,24,40,.08); width:100%;
}
#wl-scope .wl-btn:hover{ background:var(--wl-accent-600); }
#wl-scope .wl-btn:active{ transform:translateY(1px); }
#wl-scope .wl-btn[disabled]{ opacity:.6; cursor:not-allowed; box-shadow:none; }

/* спінер */
#wl-scope .wl-btn__spinner{
  display:none; width:16px; height:16px; border:2px solid rgba(255,255,255,.55);
  border-top-color:#fff; border-radius:50%; animation:wl-spin .75s linear infinite;
}
#wl-scope .wl-btn[aria-busy="true"] .wl-btn__spinner{ display:inline-block; }
#wl-scope .wl-btn[aria-busy="true"] .wl-btn__label{ opacity:.85; }

@keyframes wl-spin{ to{ transform:rotate(360deg); } }

/* inline-режим */
@media (min-width:640px){
  #wl-scope .wl-form.wl-form--inline{ display:flex; align-items:stretch; gap:10px; }
  #wl-scope .wl-form.wl-form--inline .wl-form__row{ margin:0; flex:1; }
  #wl-scope .wl-form.wl-form--inline .wl-btn{ width:auto; }
}

/* a11y: прихована мітка — теж у scope */
#wl-scope .sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* dark mode тільки всередині scope */
@media (prefers-color-scheme: dark){
  #wl-scope .wl-form--card{ background:#111827; border-color:#202938; box-shadow:none; }
  #wl-scope .wl-input{ background:#151B28; color:#E5E7EB; border-color:#2A354A; }
  #wl-scope .wl-input:hover{ border-color:#344462; }
  #wl-scope .wl-input::placeholder{ color:#7C879A; }
}

    :root{
      --accent:#0DBD42;
      --accent-light:#e6f9ec;
      --ink:#0b1220;
      --muted:#6b7280;
      --soft:#f8fafc;
    }

    .rg-head{
      margin-bottom:18px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
    }
    .rg-head h2{margin:0;font-weight:800;color:var(--ink);}
    .rg-sub{color:var(--muted);font-size:.9rem;}

    .rg-grid{
      display:grid;gap:16px;
      grid-template-columns:repeat(1,minmax(0,1fr));
    }
    @media(min-width:640px){.rg-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
    @media(min-width:992px){.rg-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
    @media(min-width:1200px){.rg-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}

    .rg-card{
      position:relative;display:flex;align-items:center;gap:14px;
      padding:18px;border-radius:16px;background:#fff;
      border:1px solid #e5e7eb;box-shadow:0 3px 10px rgba(0,0,0,.04);
      transition:all .18s ease;text-decoration:none;color:var(--ink);
    }
    .rg-card:hover{
      border-color:var(--accent);
      box-shadow:0 8px 20px rgba(13,189,66,.15);
      transform:translateY(-2px);
    }
    .rg-ico{
      flex:0 0 auto;width:48px;height:48px;border-radius:14px;
      display:grid;place-items:center;
      background:var(--soft);border:1px solid #e2e8f0;color:var(--accent);
      transition:background .18s ease,color .18s ease;
    }
    .rg-card:hover .rg-ico{background:var(--accent);color:#fff;}

    .rg-ttl{font-weight:700;line-height:1.25;}
    .rg-arr{
      margin-left:auto;width:30px;height:30px;border-radius:999px;
      display:grid;place-items:center;
      border:1px solid #e2e8f0;color:#94a3b8;background:#fff;
      transition:all .18s ease;
    }
    .rg-card:hover .rg-arr{
      background:var(--accent);color:#fff;border-color:var(--accent);
      transform:translateX(3px);
    }

    .rg-info{
      display:flex;align-items:center;gap:14px;
      padding:20px;background:var(--soft);
      border:1px dashed var(--accent);
      border-radius:16px;color:var(--ink);
    }
    .rg-cta{
      margin-left:auto;padding:10px 16px;border-radius:10px;
      border:1px solid var(--accent);background:var(--accent-light);
      color:var(--ink);text-decoration:none;font-weight:600;
      transition:background .18s ease,color .18s ease;
    }
    .rg-cta:hover{background:var(--accent);color:#fff;}