@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

 :root {
   --theme-color: #9d3842;
   --secondary-color: #042A2F;
   --title-color: #063A41;
   --title-color2: #67B846;
   --text-color: #000000;
   --text-color2: #C7C7C7;
   --body-color: #042A2F;
   --smoke-color: #f1f5f4;
   --light-color: #E6EAEB;
   --black-color: #1C2438;
   --white-color: #ffffff;
   --yellow-color: #fec624;
   --success-color: #28a745;
   --error-color: #dc3545;
   --border-color: #CDD5D6;
   --title-font: "Poppins", sans-serif;
   --title-font2: "Poppins", sans-serif;
   --body-font: "Poppins", sans-serif;
   --icon-font: "Font Awesome 6 Pro";
   --main-container: 1300px;
   --main-container2: 1530px;
   --main-container3: 1920px;
   --main-container4: 1470px;
   --main-container5: 1594px;
   --container-gutters: 15px;
   --section-space: 50px;
   --section-space-mobile: 80px;
   --section-title-space: 60px;
   --ripple-ani-duration: 5s;
 }

 .poppins-thin {
   font-family: "Poppins", sans-serif;
   font-weight: 100;
   font-style: normal;
 }

 .poppins-extralight {
   font-family: "Poppins", sans-serif;
   font-weight: 200;
   font-style: normal;
 }

 .poppins-light {
   font-family: "Poppins", sans-serif;
   font-weight: 300;
   font-style: normal;
 }

 .poppins-regular {
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-style: normal;
 }

 .poppins-medium {
   font-family: "Poppins", sans-serif;
   font-weight: 500;
   font-style: normal;
 }

 .poppins-semibold {
   font-family: "Poppins", sans-serif;
   font-weight: 600;
   font-style: normal;
 }

 .poppins-bold {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   font-style: normal;
 }

 .poppins-extrabold {
   font-family: "Poppins", sans-serif;
   font-weight: 800;
   font-style: normal;
 }

 .poppins-black {
   font-family: "Poppins", sans-serif;
   font-weight: 900;
   font-style: normal;
 }

 .poppins-thin-italic {
   font-family: "Poppins", sans-serif;
   font-weight: 100;
   font-style: italic;
 }

 .poppins-extralight-italic {
   font-family: "Poppins", sans-serif;
   font-weight: 200;
   font-style: italic;
 }

 .poppins-light-italic {
   font-family: "Poppins", sans-serif;
   font-weight: 300;
   font-style: italic;
 }

 .poppins-regular-italic {
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-style: italic;
 }

 .poppins-medium-italic {
   font-family: "Poppins", sans-serif;
   font-weight: 500;
   font-style: italic;
 }

 .poppins-semibold-italic {
   font-family: "Poppins", sans-serif;
   font-weight: 600;
   font-style: italic;
 }

 .poppins-bold-italic {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
   font-style: italic;
 }

 .poppins-extrabold-italic {
   font-family: "Poppins", sans-serif;
   font-weight: 800;
   font-style: italic;
 }

 .poppins-black-italic {
   font-family: "Poppins", sans-serif;
   font-weight: 900;
   font-style: italic;
 }


 /*------------------- 1.5. Typography -------------------*/
 html,
 body {
   scroll-behavior: auto !important;
   overflow-x: hidden;
 }

 body {
   font-family: var(--body-font);
   font-size: 16px;
   font-weight: 400;
   color: var(--body-color);
   background-color: var(--white-color);
   background-color: var(--white-color);
   line-height: 28px;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
 }

 iframe {
   border: none;
   width: 100%;
 }

 .slick-slide:focus,
 button:focus,
 a:focus,
 a:active,
 input,
 input:hover,
 input:focus,
 input:active,
 textarea,
 textarea:hover,
 textarea:focus,
 textarea:active {
   outline: none;
 }

 input:focus {
   outline: none;
   box-shadow: none;
 }

 img:not([draggable]),
 embed,
 object,
 video {
   max-width: 100%;
   height: auto;
 }

 ul {
   list-style-type: disc;
 }

 ol {
   list-style-type: decimal;
 }

 table {
   margin: 0 0 1.5em;
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
   border: 1px solid var(--border-color);
 }

 th {
   font-weight: 700;
   color: var(--title-color);
 }

 td,
 th {
   border: 1px solid var(--border-color);
   padding: 9px 12px;
 }

 a {
   color: var(--theme-color);
   text-decoration: none;
   outline: 0;
   transition: all ease 0.4s;
 }

 a:hover {
   color: var(--title-color);
 }

 a:active,
 a:focus,
 a:hover,
 a:visited {
   text-decoration: none;
   outline: 0;
 }

 button {
   transition: all ease 0.4s;
 }

 img {
   border: none;
   max-width: 100%;
 }

 ins {
   text-decoration: none;
 }

 pre {
   background: #f5f5f5;
   color: #666;
   font-size: 14px;
   margin: 20px 0;
   overflow: auto;
   padding: 20px;
   white-space: pre-wrap;
   word-wrap: break-word;
 }

 span.ajax-loader:empty,
 p:empty {
   display: none;
 }

 p {
   margin: 0 0 20px 0;
   color: var(--text-color);
   line-height: 200%;
 }

 h1 a,
 h2 a,
 h3 a,
 h4 a,
 h5 a,
 h6 a,
 p a,
 span a {
   font-size: inherit;
   font-family: inherit;
   font-weight: inherit;
   line-height: inherit;
 }

 .h1,
 h1,
 .h2,
 h2,
 .h3,
 h3,
 .h4,
 h4,
 .h5,
 h5,
 .h6,
 h6 {
   font-family: var(--title-font);
   color: var(--title-color);
   text-transform: none;
   font-weight: 600;
   line-height: 1.2;
   margin: 0 0 15px 0;
 }

 .h1,
 h1 {
   font-size: 48px;
 }

 .h2,
 h2 {
   font-size: 40px;
 }

 .h3,
 h3 {
   font-size: 36px;
 }

 .h4,
 h4 {
   font-size: 30px;
 }

 .h5,
 h5 {
   font-size: 24px;
 }

 .h6,
 h6 {
   font-size: 20px;
 }

 .shape-mockup {
   position: absolute;
   z-index: 0;
 }

 .bg-linear {
   background: rgb(215, 214, 214);
   background: linear-gradient(183deg, rgba(215, 214, 214, 0) 0%, rgba(14, 122, 49, 0.0788690476) 100%);
 }

 .icon-text {
   position: relative;
   padding-left: 87px;
   margin-bottom: 0;
 }

 .icon-text .icon {
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
 }

 /* Large devices */
 @media (max-width: 1199px) {

   .h1,
   h1 {
     font-size: 40px;
   }

   .h2,
   h2 {
     font-size: 36px;
   }

   .h3,
   h3 {
     font-size: 30px;
   }

   .h4,
   h4 {
     font-size: 24px;
   }

   .h5,
   h5 {
     font-size: 20px;
   }

   .h6,
   h6 {
     font-size: 16px;
   }
 }

 /* Small devices */
 @media (max-width: 767px) {

   .h1,
   h1 {
     font-size: 36px;
   }

   .h2,
   h2 {
     font-size: 30px;
   }

   .h3,
   h3 {
     font-size: 26px;
   }

   .h4,
   h4 {
     font-size: 22px;
   }

   .h5,
   h5 {
     font-size: 18px;
   }

   .h6,
   h6 {
     font-size: 16px;
   }
 }

 /*------------------- 1.6. Extend -------------------*/
 /*------------------- 1.7. Wordpress Default -------------------*/
 /*=================================
    02. Reset
==================================*/
 /*------------------- 2.1. Container -------------------*/
 /* @media only screen and (min-width: 1300px) {
  .container-xxl,
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: calc(var(--main-container) + var(--container-gutters));
    padding-left: calc(var(--container-gutters) / 2);
    padding-right: calc(var(--container-gutters) / 2);
  }
} */
 .main-container2 {
   max-width: calc(var(--main-container2) + var(--container-gutters));
   padding-left: calc(var(--container-gutters) / 2);
   padding-right: calc(var(--container-gutters) / 2);
   margin: 0 auto;
 }

 .main-container3 {
   max-width: calc(var(--main-container3) + var(--container-gutters));
   padding-left: calc(var(--container-gutters) / 2);
   margin: 0 0 0 auto;
 }

 .main-container4 {
   max-width: calc(var(--main-container4) + var(--container-gutters));
   padding-left: calc(var(--container-gutters) / 2);
   padding-right: calc(var(--container-gutters) / 2);
   margin: 0 auto;
 }

 .main-container5 {
   max-width: calc(var(--main-container5) + var(--container-gutters));
   padding-left: calc(var(--container-gutters) / 2);
   margin: 0 0 0 auto;
 }

 @media only screen and (min-width: 2100px) {
   .main-container3 {
     margin: 0 0 0 auto;
   }
 }

 @media only screen and (max-width: 1600px) {
   .container-fluid.px-0 {
     padding-left: 15px !important;
     padding-right: 15px !important;
   }

   .container-fluid.px-0 .row {
     margin-left: 0 !important;
     margin-right: 0 !important;
   }
 }

 /* Medium devices */
 @media (max-width: 991px) {
   .main-container3 {
     padding-left: calc(var(--container-gutters) / 2);
     padding-right: calc(var(--container-gutters) / 2);
     margin: 0 auto;
   }
 }

 /*------------------- 2.2. Grid -------------------*/
 @media (min-width: 767px) {
   .row:not([class*=gx-]) {
     --bs-gutter-x: 30px;
   }
 }

 .gy-gx {
   --bs-gutter-y: var(--bs-gutter-x);
 }

 .gy-30 {
   --bs-gutter-y: 30px;
 }

 @media (min-width: 1300px) {
   .gx-60 {
     --bs-gutter-x: 60px;
   }
 }

 @media (min-width: 1300px) {
   .gx-45 {
     --bs-gutter-x: 45px;
   }
 }

 /*------------------- 2.3. Input -------------------*/
 select,
 .form-control,
 .form-select,
 textarea,
 input {
   height: 65px;
   padding: 0 45px 0 18px;
   border: 1px solid var(--border-color);
   color: var(--text-color);
   background-color: var(--white-color);
   font-family: var(--title-font);
   font-size: 16px;
   width: 100%;
   border-radius: 6px;
   font-weight: 500;
 }

 select:focus,
 .form-control:focus,
 .form-select:focus,
 textarea:focus,
 input:focus {
   outline: 0;
   box-shadow: none;
   background-color: var(--white-color);
 }

 select::-moz-placeholder,
 .form-control::-moz-placeholder,
 .form-select::-moz-placeholder,
 textarea::-moz-placeholder,
 input::-moz-placeholder {
   color: var(--text-color);
   font-weight: 500;
 }

 select::-webkit-input-placeholder,
 .form-control::-webkit-input-placeholder,
 .form-select::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder,
 input::-webkit-input-placeholder {
   color: var(--text-color);
   font-weight: 500;
 }

 select:-ms-input-placeholder,
 .form-control:-ms-input-placeholder,
 .form-select:-ms-input-placeholder,
 textarea:-ms-input-placeholder,
 input:-ms-input-placeholder {
   color: var(--text-color);
   font-weight: 500;
 }

 select::placeholder,
 .form-control::placeholder,
 .form-select::placeholder,
 textarea::placeholder,
 input::placeholder {
   color: var(--text-color);
   font-weight: 500;
 }

 .form-select,
 select {
   display: block;
   width: 100%;
   line-height: 1.5;
   vertical-align: middle;
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
   background-position: right 20px center;
   background-repeat: no-repeat;
   background-size: 16px 12px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   cursor: pointer;
 }

 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }

 /* Firefox */
 input[type=number] {
   -moz-appearance: textfield;
 }

 textarea.form-control,
 textarea {
   min-height: 150px;
   padding-top: 16px;
   padding-bottom: 17px;
   border-radius: 6px;
 }

 input[type=checkbox] {
   visibility: hidden;
   opacity: 0;
   display: inline-block;
   vertical-align: middle;
   width: 0;
   height: 0;
   display: none;
 }

 input[type=checkbox]:checked~label:before {
   content: "\f00c";
   color: var(--white-color);
   background-color: var(--theme-color);
   border-color: var(--theme-color);
 }

 input[type=checkbox]~label {
   position: relative;
   padding-left: 30px;
   cursor: pointer;
   display: block;
 }

 input[type=checkbox]~label:before {
   content: "";
   font-family: var(--icon-font);
   font-weight: 700;
   position: absolute;
   left: 0px;
   top: 4px;
   background-color: var(--white-color);
   border: 1px solid var(--border-color);
   height: 18px;
   width: 18px;
   line-height: 18px;
   text-align: center;
   font-size: 12px;
   border-radius: 4px;
 }

 input[type=radio] {
   visibility: hidden;
   opacity: 0;
   display: inline-block;
   vertical-align: middle;
   width: 0;
   height: 0;
   display: none;
 }

 input[type=radio]~label {
   position: relative;
   padding-left: 30px;
   cursor: pointer;
   line-height: 1;
   display: inline-block;
   font-weight: 600;
   margin-bottom: 0;
 }

 input[type=radio]~label::before {
   content: "\f111";
   position: absolute;
   font-family: var(--icon-font);
   left: 0;
   top: -3px;
   width: 20px;
   height: 20px;
   padding-left: 0.5px;
   font-size: 0.4em;
   line-height: 18.95px;
   text-align: center;
   border: 1px solid var(--theme-color);
   border-radius: 100%;
   font-weight: 700;
   background: var(--white-color);
   color: transparent;
   transition: all 0.2s ease;
 }

 input[type=radio]:checked~label::before {
   border-color: var(--theme-color);
   background-color: var(--theme-color);
   color: var(--white-color);
 }

 label {
   margin-bottom: 0.5em;
   margin-top: -0.3em;
   display: block;
   color: var(--title-color);
   font-family: var(--body-font);
   font-size: 16px;
 }

 .form-group {
   margin-bottom: var(--bs-gutter-x);
   position: relative;
 }

 .form-group>i {
   position: absolute;
   right: calc(var(--bs-gutter-x) / 2 + 30px);
   top: 17px;
   font-size: 16px;
   color: #A0ABB4;
 }

 .form-group.has-label>i {
   top: 48px;
 }

 textarea.is-invalid,
 select.is-invalid,
 input.is-invalid,
 .was-validated input:invalid {
   border: 1px solid var(--error-color) !important;
   background-position: right calc(0.375em + 0.8875rem) center;
   background-image: none;
 }

 textarea.is-invalid:focus,
 select.is-invalid:focus,
 input.is-invalid:focus,
 .was-validated input:invalid:focus {
   outline: 0;
   box-shadow: none;
 }

 textarea.is-invalid {
   background-position: top calc(0.375em + 0.5875rem) right calc(0.375em + 0.8875rem);
 }

 .row.no-gutters>.form-group {
   margin-bottom: 0;
 }

 .form-messages {
   display: none;
   margin: 0;
   padding: 10px 15px;
   margin-top: 15px;
   border-radius: 4px;
 }

 .form-messages>pre:last-child {
   margin-bottom: 0;
 }

 .form-messages>pre:first-of-type {
   margin-top: 0;
 }

 .form-messages.success {
   background-color: var(--success-color);
   color: var(--white-color);
   display: block;
 }

 .form-messages.error {
   background-color: var(--error-color);
   color: var(--white-color);
   display: block;
 }

 .form-messages pre {
   padding: 0;
   background-color: transparent;
   color: inherit;
 }

 /*------------------- 2.4. Slick Slider -------------------*/
 .row>.slick-list {
   padding-left: 0;
   padding-right: 0;
 }

 .slick-track>[class*=col] {
   flex-shrink: 0;
   width: 100%;
   max-width: 100%;
   padding-right: calc(var(--bs-gutter-x) / 2);
   padding-left: calc(var(--bs-gutter-x) / 2);
   margin-top: var(--bs-gutter-y);
 }

 .slick-track {
   min-width: 100%;
 }

 .slick-slide img {
   display: inline-block;
 }

 .slick-dots {
   list-style-type: none;
   padding: 0;
   margin: 40px 0 0 0;
   line-height: 0;
   text-align: center;
   height: max-content;
   line-height: 0;
 }

 .slick-dots li {
   display: inline-block;
   margin-right: 7px;
 }

 .slick-dots li:last-child {
   margin-right: 0;
 }

 .slick-dots button {
   font-size: 0;
   padding: 0;
   background-color: transparent;
   width: 36px;
   height: 8px;
   line-height: 3px;
   border: none;
   background-color: transparent;
   border: 1px solid var(--theme-color);
   border-radius: 30px;
   transition: all ease 0.4s;
   position: relative;
 }

 .slick-dots button:hover,
 .slick-dots .slick-active button {
   background-color: var(--theme-color);
 }

 .slick-arrow {
   display: inline-block;
   padding: 0;
   position: absolute;
   top: 50%;
   left: var(--pos-x, -65px);
   max-width: 50px;
   max-height: 50px;
   font-size: var(--icon-font-size, 18px);
   margin-top: calc(var(--icon-size, 120px) / -2);
   z-index: 2;
   border-radius: 50%;
   color: var(--white-color);
   border: 2px dashed var(--border-color);
   transition: all 0.5s ease;
 }

 .slick-arrow i {
   color: #7E999D;
   font-size: 18px;
   background-color: var(--border-color);
   width: 100%;
   height: 100%;
   padding: 14px;
   border-radius: 50%;
   transition: all 0.5s ease;
 }

 .slick-arrow.default {
   position: relative;
   --pos-x: 0;
   margin-top: 0;
 }

 .slick-arrow.slick-next {
   right: var(--pos-x, -65px);
   left: auto;
 }

 .slick-arrow:hover {
   color: var(--white-color);
   border-color: var(--theme-color);
 }

 .slick-arrow:hover i {
   color: var(--white-color);
   background-color: var(--theme-color);
 }

 .arrow-margin .slick-arrow {
   top: calc(50% - 30px);
 }

 .arrow-wrap .slick-arrow {
   opacity: 0;
   visibility: hidden;
 }

 .arrow-wrap:hover .slick-arrow {
   opacity: 1;
   visibility: visible;
 }

 /* Extra large devices */
 @media (max-width: 1300px) {
   .slick-arrow {
     --arrow-horizontal: -20px;
   }
 }

 /* Medium Large devices */
 @media (max-width: 1299px) {
   .slick-arrow {
     --arrow-horizontal: 40px;
   }
 }

 /* Medium devices */
 @media (max-width: 991px) {
   .slick-arrow {
     --icon-size: 40px;
     margin-right: 40px;
   }

   .slick-arrow.slick-next {
     margin-right: 0;
     margin-left: 40px;
   }

   .slick-dots {
     margin: 8px 0 38px 0;
   }
 }

 /*------------------- 2.5. Mobile Menu -------------------*/
 .vs-menu-wrapper {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.6);
   z-index: 999999;
   width: 0;
   width: 100%;
   height: 100%;
   transition: all ease 0.8s;
   opacity: 0;
   visibility: hidden;
 }

 .vs-menu-wrapper .mobile-logo {
   padding-bottom: 0;
   padding-top: 40px;
   display: block;
   text-align: center;
   background-color: var(--white-color);
 }

 .vs-menu-wrapper .mobile-logo svg {
   max-width: 185px;
 }

 .vs-menu-wrapper .vs-menu-toggle {
   border: none;
   font-size: 22px;
   position: absolute;
   right: 10px;
   top: 10px;
   padding: 0;
   line-height: 1;
   width: 33px;
   height: 33px;
   line-height: 33px;
   font-size: 18px;
   z-index: 1;
   color: var(--white-color);
   background-color: var(--theme-color);
   border-radius: 50%;
 }

 .vs-menu-wrapper .vs-menu-toggle:hover {
   background-color: var(--secondary-color);
   color: var(--white-color);
 }

 .vs-menu-wrapper .vs-menu-area {
   width: 100%;
   max-width: 310px;
   background-color: var(--white-color);
   border-right: 3px solid var(--theme-color);
   height: 100%;
   position: relative;
   left: -110%;
   opacity: 0;
   visibility: hidden;
   transition: all ease 1s;
   z-index: 1;
 }

 .vs-menu-wrapper.vs-body-visible {
   opacity: 1;
   visibility: visible;
 }

 .vs-menu-wrapper.vs-body-visible .vs-menu-area {
   left: 0;
   opacity: 1;
   visibility: visible;
 }

 .vs-mobile-menu {
   overflow-y: scroll;
   max-height: calc(100vh - 200px);
   padding-bottom: 40px;
   margin-top: 33px;
   text-align: left;
 }

 .vs-mobile-menu::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(242, 0, 58, 0.2);
   background-color: #000;
 }

 .vs-mobile-menu::-webkit-scrollbar {
   width: 6px;
   background-color: #000;
 }

 .vs-mobile-menu::-webkit-scrollbar-thumb {
   background-color: var(--theme-color);
 }

 .vs-mobile-menu ul {
   margin: 0;
   padding: 0 0;
 }

 .vs-mobile-menu ul li {
   border-bottom: 1px solid var(--border-color);
   list-style-type: none;
 }

 .vs-mobile-menu ul li li:first-child {
   border-top: 1px solid var(--border-color);
 }

 .vs-mobile-menu ul li a {
   display: block;
   position: relative;
   padding: 12px 0;
   line-height: 1;
   font-size: 16px;
   text-transform: capitalize;
   color: var(--title-color);
   font-weight: 700;
 }

 .vs-mobile-menu ul li a:before {
   content: "\f105";
   font-family: var(--icon-font);
   position: relative;
   left: 0;
   top: 0;
   margin-right: 10px;
   display: inline-block;
 }

 .vs-mobile-menu ul li.vs-active>a {
   color: var(--theme-color);
 }

 .vs-mobile-menu ul li.vs-active>a:before {
   transform: rotate(90deg);
 }

 .vs-mobile-menu ul li ul li {
   padding-left: 20px;
 }

 .vs-mobile-menu ul li ul li:last-child {
   border-bottom: none;
 }

 .vs-mobile-menu ul .vs-item-has-children>a .vs-mean-expand {
   position: absolute;
   right: 0;
   top: 50%;
   font-weight: 400;
   font-size: 12px;
   width: 25px;
   height: 25px;
   line-height: 25px;
   margin-top: -12.5px;
   display: inline-block;
   text-align: center;
   background-color: var(--smoke-color);
   color: var(--title-color);
   box-shadow: 0 0 20px -8px rgba(242, 0, 58, 0.5);
   border-radius: 50%;
 }

 .vs-mobile-menu ul .vs-item-has-children>a .vs-mean-expand:before {
   content: "\f067";
   font-family: var(--icon-font);
 }

 .vs-mobile-menu ul .vs-item-has-children.vs-active>a .vs-mean-expand:before {
   content: "\f068";
 }

 .vs-mobile-menu>ul {
   padding: 0 40px;
 }

 .vs-mobile-menu>ul>li:last-child {
   border-bottom: none;
 }

 .vs-menu-toggle {
   width: 50px;
   height: 50px;
   padding: 0;
   font-size: 24px;
   border: none;
   background-color: var(--theme-color);
   color: var(--white-color);
   display: inline-block;
   border-radius: 0;
 }

 .vs-menu-toggle:hover {
   background-color: var(--title-color);
 }

 .vs-menu-toggle.style-text,
 .vs-menu-toggle.style-text-white {
   width: auto;
   height: auto;
   background-color: transparent;
   color: var(--title-color);
   font-size: 20px;
 }

 .vs-menu-toggle.style-text i,
 .vs-menu-toggle.style-text-white i {
   margin-right: 10px;
 }

 .vs-menu-toggle.style-text-white {
   color: var(--white-color);
 }

 @media (max-width: 400px) {
   .vs-menu-wrapper .vs-menu-area {
     width: 100%;
     max-width: 270px;
   }

   .vs-mobile-menu>ul {
     padding: 0 20px;
   }
 }

 /*=================================
    03. Utilities
==================================*/
 /*------------------- 3.1. Preloader -------------------*/
 .preloader {
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   z-index: 999;
   background-color: var(--title-color);
 }

 .preloader .vs-btn {
   padding: 15px 20px;
   border-radius: 0;
   font-size: 14px;
 }

 .preloader-inner {
   text-align: center;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
   line-height: 0;
 }

 .preloader-inner img {
   display: block;
   margin: 0 auto 10px auto;
 }

 .loader {
   width: 110px;
   height: 110px;
   border-radius: 50%;
   display: inline-block;
   position: relative;
   border: 3px solid;
   border-color: var(--theme-color) var(--theme-color) transparent transparent;
   box-sizing: border-box;
   animation: rotationloader 1.5s linear infinite;
 }

 .loader::after,
 .loader::before {
   content: "";
   box-sizing: border-box;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
   border: 3px solid;
   border-color: transparent transparent #bfe603 #bfe603;
   width: 102px;
   height: 102px;
   border-radius: 50%;
   box-sizing: border-box;
   animation: rotationBackloader 0.7s linear infinite;
   transform-origin: center center;
 }

 .loader::before {
   width: 94px;
   height: 94px;
   border-color: var(--theme-color) var(--theme-color) transparent transparent;
   animation: rotationloader 2s linear infinite;
 }

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

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

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

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

 /*------------------- 3.2. Buttons -------------------*/
 .vs-btn {
   display: inline-block;
   border: none;
   text-align: center;
   text-transform: capitalize;
   vertical-align: middle;
   font-size: 18px;
   font-weight: 600;
   font-family: var(--title-font);
   border: 2px solid var(--theme-color);
   background-color: var(--theme-color);
   color: var(--white-color);
   line-height: 1;
   padding: 18px 30px;
   border-radius: 9999px;
   transition: all 0.5s ease;
 }

 .vs-btn:hover {
   color: var(--white-color);
   border-color: var(--secondary-color);
   background-color: var(--secondary-color);
 }

 .vs-btn2 {
   display: inline-block;
   border: none;
   text-align: center;
   text-transform: capitalize;
   vertical-align: middle;
   font-size: 16px;
   font-weight: 600;
   font-family: var(--title-font);
   border: 2px solid var(--theme-color);
   background-color: var(--theme-color);
   color: var(--white-color);
   line-height: 1;
   padding: 3px 5px 3px 12px;
   border-radius: 9999px;
   transition: all 0.5s ease;
 }

 .vs-btn2 i {
   width: 25px;
   height: 25px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--white-color);
   background-color: var(--title-color);
   border-radius: 50px;
   margin-left: 3px;
   transition: all 0.5s ease;
 }

 .vs-btn2:hover {
   color: var(--white-color);
   border-color: var(--secondary-color);
   background-color: var(--secondary-color);
 }

 .vs-btn2:hover i {
   background-color: var(--theme-color);
 }

 .icon-btn {
   width: var(--icon-size, 65px);
   height: var(--icon-size, 65px);
   line-height: var(--icon-size, 65px);
   background-color: var(--smoke-color);
   border: none;
   padding: 0;
   text-align: center;
   color: var(--title-color);
   border-radius: 50%;
   transition: all ease 0.4s;
   position: relative;
   z-index: 1;
 }

 .icon-btn:hover {
   color: var(--white-color);
   background-color: var(--secondary-color);
 }

 .icon-btn2 {
   width: 100%;
   height: 100%;
   overflow: hidden;
   border-radius: 50%;
   background-color: #0B3F46;
   border: none;
   line-height: 1;
 }

 .icon-btn2:hover {
   background-color: var(--theme-color);
 }

 .custom-arraw .icon-arraw {
   border: 2px dashed #27565C;
   border-radius: 50%;
   width: 50px;
   height: 50px;
   line-height: 50px;
   text-align: center;
   display: inline-flex;
   align-items: center;
   transition: all 0.5s ease;
 }

 .custom-arraw .icon-arraw:not(:last-child) {
   margin-right: 7px;
 }

 .custom-arraw .icon-arraw:hover {
   border-color: var(--theme-color);
 }

 .play-btn {
   display: inline-block;
   position: relative;
   z-index: 1;
 }

 .play-btn>i {
   display: inline-block;
   width: var(--icon-size, 95px);
   height: var(--icon-size, 95px);
   line-height: var(--icon-size, 95px);
   text-align: center;
   background-color: var(--theme-color);
   color: var(--white-color);
   font-size: var(--icon-font-size, 1.5em);
   border-radius: 50%;
   z-index: 1;
   transition: all ease 0.4s;
 }

 .vs-client__layout1 .play-btn>i {
   font-style: normal;
   font-size: 40px;
   font-weight: 900;
 }

 .play-btn:after,
 .play-btn:before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   background-color: var(--theme-color);
   z-index: -1;
   border-radius: 50%;
   transition: all ease 0.4s;
 }

 .play-btn:after {
   animation-delay: 2s;
 }

 .play-btn:hover:after,
 .play-btn:hover::before,
 .play-btn:hover i {
   background-color: var(--white-color);
   color: var(--title-color);
 }

 .link-btn {
   font-family: var(--title-font);
   color: var(--title-color);
   font-weight: 500;
   font-size: 18px;
   display: inline-block;
   line-height: 1;
   position: relative;
   text-transform: capitalize;
   transition: all ease 0.3s;
 }

 .link-btn i {
   margin-right: 7px;
 }

 .link-btn:hover {
   color: var(--theme-color);
 }

 .scroll-btn {
   position: fixed;
   bottom: 300px;
   right: 30px;
   z-index: 94;
   opacity: 0;
   visibility: hidden;
   display: inline-block;
   border-radius: 50%;
   /* Small devices */
 }

 .scroll-btn i {
   display: inline-block;
   background-color: var(--theme-color);
   color: var(--white-color);
   text-align: center;
   font-size: 16px;
   width: var(--btn-size, 50px);
   height: var(--btn-size, 50px);
   line-height: var(--btn-size, 50px);
   z-index: 2;
   border-radius: inherit;
   position: relative;
   transition: all ease 0.8s;
 }

 .scroll-btn:before {
   content: "";
   position: absolute;
   left: var(--extra-shape, -6px);
   top: var(--extra-shape, -6px);
   right: var(--extra-shape, -6px);
   bottom: var(--extra-shape, -6px);
   background-color: var(--white-color);
   border-radius: inherit;
   z-index: 1;
   transition: all ease 0.4s;
 }

 .scroll-btn:focus i,
 .scroll-btn:hover i {
   background-color: var(--secondary-color);
   color: var(--white-color);
 }

 .scroll-btn.show {
   bottom: 120px;
   opacity: 1;
   visibility: visible;
 }

 @media (max-width: 767px) {
   .scroll-btn {
     --btn-size: 40px;
     --extra-shape: -4px;
     right: 15px;
     bottom: 50px;
   }

   .scroll-btn.show {
     bottom: 15px;
   }
 }

 .bar-btn {
   border: none;
   display: inline-block;
   padding: 0;
   line-height: 1;
   font-size: 25px;
   vertical-align: middle;
   background-color: transparent;
   width: 25px;
   height: 18px;
   position: relative;
 }

 .bar-btn .bar:before {
   content: "";
   width: 100%;
   height: 2px;
   display: inline-block;
   position: absolute;
   right: 0;
   top: 0;
   transition: all ease 0.4s;
   background-color: var(--white-color);
 }

 .bar-btn .bar:nth-child(2):before {
   top: 50%;
   margin-top: -1.5px;
   width: 25px;
   right: -6px;
 }

 .bar-btn .bar:nth-child(3):before {
   top: auto;
   bottom: 0;
 }

 /* Small devices */
 @media (max-width: 767px) {
   .play-btn {
     --icon-size: 90px;
   }
 }

 /* Small devices */
 @media (max-width: 767px) {
   .vs-btn2 i {
     width: 45px;
     height: 45px;
     margin-left: 12px;
   }
 }

 /*------------------- 3.3. Titles -------------------*/
 .title-area {
   margin-bottom: 40px;
   line-height: 100%;
 }

 .title-area .sec-subtitle {
   font-size: 18px;
   font-weight: 600;
   text-transform: uppercase;
   color: var(--theme-color);
   line-height: 100%;
   display: inline-block;
   position: relative;
   margin: 0 50px 10px;
 }

 .title-area .sec-subtitle::before {
   content: "";
   width: 40px;
   height: 3px;
   border-radius: 30px;
   background-color: var(--theme-color);
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: -50px;
 }

 .title-area .sec-subtitle::after {
   content: "";
   width: 40px;
   height: 3px;
   border-radius: 30px;
   background-color: var(--theme-color);
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   right: -50px;
 }

 .title-area .sec-subtitle.right-shape {
   margin-left: 0;
 }

 .title-area .sec-subtitle.right-shape::before {
   display: none;
 }

 .title-area .sec-subtitle.left-shape {
   margin-right: 0;
 }

 .title-area .sec-subtitle.left-shape::after {
   display: none;
 }

 .title-area .sec-title {
   font-size: 35px;
   margin-bottom: 0;
   text-transform: capitalize;
   line-height: 122%;
   font-weight: 600;
 }

 .title-area .sec-title .title-highlight {
   display: inline-block;
   color: var(--theme-color);
 }

 /* Small devices */
 @media (max-width: 767px) {
   .title-arraw {
     display: none;
   }
 }

 /*------------------- 3.4. Common -------------------*/
 .image-scale-hover {
   overflow: hidden;
 }

 .image-scale-hover img {
   transition: all ease 0.4s;
   transform: scale(1.001);
 }

 .image-scale-hover:hover img {
   transform: scale(1.2);
 }

 .shape-mockup {
   position: absolute;
 }

 .z-index-step1 {
   position: relative;
   z-index: 4;
 }

 .z-index-common {
   position: relative;
   z-index: 3;
 }

 .z-index2 {
   position: relative;
   z-index: 2;
 }

 .z-index {
   z-index: 1;
 }

 .z-index-n1 {
   z-index: -1;
 }

 .media-body {
   flex: 1;
 }

 .badge {
   position: absolute;
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
   display: inline-block;
   text-align: center;
   background-color: var(--theme-color);
   color: var(--black-color);
   padding: 0.35em 0.55em;
   border-radius: 50%;
 }

 .bg-colo1 {
   background: rgb(215, 214, 214);
   background: linear-gradient(183deg, rgba(215, 214, 214, 0) 0%, rgba(14, 122, 49, 0.1208858543) 100%);
 }

 .custom-sheap {
   display: block;
 }

 .custome-sheap1 {
   display: block;
 }

 @media (min-width: 1921px) {
   .d-hd-none {
     display: none !important;
   }
 }

 @media (max-width: 1799px) {
   .custom-sheap {
     display: none;
   }
 }

 @media (max-width: 1680px) {
   .custome-sheap1 {
     display: none;
   }
 }

 /*------------------- 3.6. Font -------------------*/
 .font-icon {
   font-family: var(--icon-font);
 }

 .font-title {
   font-family: var(--title-font);
 }

 .font-body {
   font-family: var(--body-font);
 }

 .fw-light {
   font-weight: 300;
 }

 .fw-normal {
   font-weight: 400;
 }

 .fw-medium {
   font-weight: 500;
 }

 .fw-semibold {
   font-weight: 600;
 }

 .fw-bold {
   font-weight: 700;
 }

 .fw-extrabold {
   font-weight: 800;
 }

 .fs-md {
   font-size: 18px;
 }

 .fs-xs {
   font-size: 14px;
 }

 .fs-20 {
   font-size: 20px;
 }

 /* Small devices */
 @media (max-width: 767px) {

   .fs-20,
   .fs-md {
     font-size: 16px;
   }
 }

 /*------------------- 3.7. Background -------------------*/
 .bg-theme {
   background-color: var(--theme-color) !important;
 }

 .bg-smoke {
   background-color: var(--smoke-color) !important;
 }

 .bg-vs-light {
   background-color: var(--light-color) !important;
 }

 .bg-white {
   background-color: var(--white-color) !important;
 }

 .bg-black {
   background-color: var(--black-color) !important;
 }

 .bg-title {
   background-color: var(--title-color) !important;
 }

 .bg-theme2 {
   background-color: var(--secondary-color) !important;
 }

 .background-image,
 [data-bg-src] {
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
 }

 .bg-fluid {
   background-repeat: no-repeat;
   background-size: 100% 100%;
   background-position: center center;
 }

 .bg-auto {
   background-size: auto auto;
 }

 /*------------------- 3.8. Text Color -------------------*/
 .text-theme {
   color: var(--theme-color) !important;
 }

 .text-title {
   color: var(--title-color) !important;
 }

 .text-body {
   color: var(--body-color) !important;
 }

 .text-white {
   color: var(--white-color) !important;
 }

 .text-yellow {
   color: var(--yellow-color) !important;
 }

 .text-success {
   color: var(--success-color) !important;
 }

 .text-error {
   color: var(--error-color) !important;
 }

 .text-inherit {
   color: inherit;
 }

 .text-inherit:hover {
   color: var(--theme-color);
 }

 a.text-theme:hover,
 .text-reset:hover {
   text-decoration: underline;
 }

 /*------------------- 3.9. Overlay -------------------*/
 .overlay {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
 }

 .position-center {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }

 [data-overlay] {
   position: relative;
 }

 [data-overlay] [class^=col-],
 [data-overlay] [class*=col-] {
   z-index: 1;
 }

 [data-overlay]:before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   z-index: 1;
 }

 [data-overlay=theme]:before {
   background-color: var(--theme-color);
 }

 [data-overlay=title]:before {
   background-color: var(--title-color);
 }

 [data-overlay=white]:before {
   background-color: var(--white-color);
 }

 [data-overlay=black]:before {
   background-color: var(--black-color);
 }

 [data-opacity="1"]:before {
   opacity: 0.1;
 }

 [data-opacity="2"]:before {
   opacity: 0.2;
 }

 [data-opacity="3"]:before {
   opacity: 0.3;
 }

 [data-opacity="4"]:before {
   opacity: 0.4;
 }

 [data-opacity="5"]:before {
   opacity: 0.5;
 }

 [data-opacity="6"]:before {
   opacity: 0.6;
 }

 [data-opacity="7"]:before {
   opacity: 0.7;
 }

 [data-opacity="8"]:before {
   opacity: 0.8;
 }

 [data-opacity="9"]:before {
   opacity: 0.9;
 }

 [data-opacity="10"]:before {
   opacity: 1;
 }

 /*------------------- 3.10. Animation -------------------*/
 .jump-reverse-img,
 .jump-img,
 .jump-reverse,
 .jump {
   animation: jumpping var(--duration, 6s) infinite linear;
 }

 .jump-reverse-img,
 .jump-img {
   --duration: 5s;
 }

 .jump-reverse-img,
 .jump-reverse {
   --jump-y: -20px;
 }

 .rotate-reverse-img,
 .rotate-img,
 .rotate-reverse,
 .rotate {
   animation: rotate var(--duration, 12s) infinite linear;
 }

 .rotate-reverse-img,
 .rotate-img {
   --duration: 40s;
 }

 .moving {
   animation: moving 8s linear infinite;
 }

 @keyframes moving {
   0% {
     transform: translateY(0);
   }

   50% {
     transform: translateY(-50px);
   }

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

 .rotate-reverse {
   --rotate-angle: -360deg;
 }

 .fadeInUp {
   -webkit-animation-name: fadeInUp;
   animation-name: fadeInUp;
 }

 .wow-animated {
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
 }

 .fadein {
   --animation-name: fadein-custom;
 }

 .slideinup {
   --animation-name: slideinup;
 }

 .slideindown {
   --animation-name: slideindown;
 }

 .slideinleft {
   --animation-name: slideinleft;
 }

 .slideinright {
   --animation-name: slideinright;
 }

 .animated {
   animation-fill-mode: both;
   animation-iteration-count: 1;
   animation-duration: 1s;
   animation-delay: 0.3s;
   animation-name: var(--animation-name);
 }

 .ripple-animation,
 .play-btn:after,
 .play-btn:before {
   animation-duration: var(--ripple-ani-duration);
   animation-timing-function: ease-in-out;
   animation-iteration-count: infinite;
   animation-name: ripple;
 }

 .spin {
   animation: spin 20s infinite linear;
 }

 .vs-slider-shape-1 {
   position: absolute;
   z-index: 3;
   animation: vswing 1s ease-in-out 1s forwards infinite alternate;
   transform-origin: top right;
 }

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

 .bubble {
   position: absolute;
   bottom: -100px;
   width: 40px;
   height: 40px;
   background: rgba(255, 255, 255, 0);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0), inset 1px -7px 13px rgba(255, 255, 255, 0.54);
   border-radius: 50%;
   opacity: 0.5;
   animation: rise 10s infinite ease-in;
 }

 .bubble:nth-child(1) {
   width: 40px;
   height: 40px;
   left: 10%;
   animation-duration: 8s;
 }

 .bubble:nth-child(2) {
   width: 20px;
   height: 20px;
   left: 20%;
   animation-duration: 5s;
   animation-delay: 1s;
 }

 .bubble:nth-child(3) {
   width: 50px;
   height: 50px;
   left: 35%;
   animation-duration: 7s;
   animation-delay: 2s;
 }

 .bubble:nth-child(4) {
   width: 80px;
   height: 80px;
   left: 50%;
   animation-duration: 11s;
   animation-delay: 0s;
 }

 .bubble:nth-child(5) {
   width: 35px;
   height: 35px;
   left: 55%;
   animation-duration: 6s;
   animation-delay: 1s;
 }

 .bubble:nth-child(6) {
   width: 45px;
   height: 45px;
   left: 65%;
   animation-duration: 8s;
   animation-delay: 3s;
 }

 .bubble:nth-child(7) {
   width: 90px;
   height: 90px;
   left: 70%;
   animation-duration: 12s;
   animation-delay: 2s;
 }

 .bubble:nth-child(8) {
   width: 25px;
   height: 25px;
   left: 80%;
   animation-duration: 6s;
   animation-delay: 2s;
 }

 .bubble:nth-child(9) {
   width: 15px;
   height: 15px;
   left: 70%;
   animation-duration: 5s;
   animation-delay: 1s;
 }

 .bubble:nth-child(10) {
   width: 90px;
   height: 90px;
   left: 25%;
   animation-duration: 10s;
   animation-delay: 4s;
 }

 @keyframes rise {
   0% {
     bottom: -100px;
     transform: translateX(0);
   }

   50% {
     transform: translate(100px);
   }

   100% {
     bottom: 1080px;
     transform: translateX(-200px);
   }
 }

 @keyframes vswing {
   0% {
     -webkit-transform: rotate(25deg);
     -ms-transform: rotate(25deg);
     transform: rotate(25deg);
   }

   100% {
     -webkit-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 }

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

   30% {
     opacity: 0.4;
   }

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

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

   100% {
     transform: rotate(var(--rotate-angle, 360deg));
   }
 }

 @keyframes slideinup {
   0% {
     opacity: 0;
     transform: translateY(70px);
   }

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

 @keyframes slideindown {
   0% {
     opacity: 0;
     transform: translateY(-70px);
   }

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

 @keyframes slideinleft {
   0% {
     opacity: 0;
     transform: translateX(-70px);
   }

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

 @keyframes slideinright {
   0% {
     opacity: 0;
     transform: translateX(70px);
   }

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

 @keyframes fadein-custom {
   0% {
     opacity: 0;
   }

   100% {
     opacity: 1;
   }
 }

 @keyframes fadeInUp {
   0% {
     opacity: 0;
     -webkit-transform: translateY(20px);
     -ms-transform: translateY(20px);
     transform: translateY(20px);
   }

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

 @keyframes spin {
   to {
     transform: rotate(360deg);
   }
 }

 @keyframes jumpping {

   0%,
   100% {
     transform: translate3d(0, 0, 0);
   }

   40% {
     transform: translate3d(0, var(--jump-y, 20px), var(--jump-x, 0));
   }
 }

 /*------------------- 3.10. Animation -------------------*/
 .back-to-top {
   --back-to-top-size: 70px;
   position: fixed;
   bottom: 20px;
   right: 20px;
   width: var(--back-to-top-size);
   height: var(--back-to-top-size);
   background: none;
   border: none;
   cursor: pointer;
   z-index: 1000;
   /* Small devices */
 }

 @media (max-width: 767px) {
   .back-to-top {
     --back-to-top-size: 60px;
     bottom: 80px;
     right: 10px;
   }
 }

 .back-to-top .progress-circle {
   display: inline-block;
   width: 45px;
   height: 45px;
   transform: rotate(-90deg);
   background: var(--theme-color);
   border-radius: 50%;
   box-shadow: 0px 0px 3px #063A41;
 }

 .back-to-top .progress-circle svg {
   width: 100%;
   height: 100%;
 }

 .back-to-top .progress-circle circle {
   fill: none;
   stroke-width: 3;
   stroke-linecap: round;
 }

 .back-to-top .progress-circle .bg {
   stroke: var(--title-color);
 }

 .back-to-top .progress-circle .progress {
   stroke: var(--white-color);
   stroke-dasharray: 251.2;
   /* Circumference = 2 * PI * R (R=40) */
   stroke-dashoffset: 251.2;
   transition: stroke-dashoffset 0.2s linear;
 }

 .back-to-top .progress-percentage {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(90deg);
   color: var(--white-color);
   pointer-events: none;
   font-size: 12px;
   font-weight: 600;
   font-family: var(--title-font);
   padding: 5px;
   transition: color 0.2s linear;
   /* Small devices */
 }

 @media (max-width: 767px) {
   .back-to-top .progress-percentage {
     font-size: 10px;
   }
 }

 .back-to-top:hover .progress-percentage {
   color: var(--title-color2);
 }

 /*=================================
    04. Template Style
==================================*/
 /*------------------- 4.1. Widget  -------------------*/
 .widget_nav_menu ul,
 .widget_pages ul,
 .widget_meta ul,
 .widget_archive ul,
 .widget_categories ul {
   padding: 0;
   margin: -0.4em 0 0 0;
   list-style: none;
 }

 .widget_nav_menu .children,
 .widget_pages .children,
 .widget_meta .children,
 .widget_archive .children,
 .widget_categories .children {
   margin-left: 10px;
 }

 .widget_meta ul,
 .widget_nav_menu ul,
 .widget_pages ul,
 .widget_archive ul {
   margin-bottom: -20px;
 }

 .widget_meta ul ul,
 .widget_nav_menu ul ul,
 .widget_pages ul ul,
 .widget_archive ul ul {
   margin-bottom: 0;
 }

 .widget_meta a,
 .widget_nav_menu a,
 .widget_pages a,
 .widget_archive a {
   position: relative;
   color: #444444;
   padding-left: 15px;
   margin-bottom: 12px;
   display: block;
 }

 .widget_meta a:before,
 .widget_nav_menu a:before,
 .widget_pages a:before,
 .widget_archive a:before {
   content: "\f105";
   position: absolute;
   left: 0;
   top: -1px;
   font-family: var(--icon-font);
 }

 .widget_meta a:after,
 .widget_nav_menu a:after,
 .widget_pages a:after,
 .widget_archive a:after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 0;
   height: 1px;
   background-color: var(--theme-color);
   opacity: 0;
   visibility: hidden;
   transition: all ease 0.4s;
 }

 .widget_meta a:hover,
 .widget_nav_menu a:hover,
 .widget_pages a:hover,
 .widget_archive a:hover {
   color: var(--theme-color);
 }

 .widget_meta a:hover:after,
 .widget_nav_menu a:hover:after,
 .widget_pages a:hover:after,
 .widget_archive a:hover:after {
   width: 100%;
   opacity: 1;
   visibility: visible;
 }

 .widget_meta li,
 .widget_nav_menu li,
 .widget_pages li,
 .widget_archive li {
   display: block;
   position: relative;
 }

 .widget_meta li>span,
 .widget_nav_menu li>span,
 .widget_pages li>span,
 .widget_archive li>span {
   width: 44px;
   height: 44px;
   line-height: 44px;
   font-size: 14px;
   font-weight: 700;
   color: var(--title-color);
   background-color: var(--white-color);
   right: 5px;
   top: 5px;
   z-index: 1;
   display: inline-block;
   text-align: center;
   position: absolute;
   transition: all ease 0.4s;
   border-radius: 50%;
 }

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

 .widget_categories a {
   display: block;
   font-family: var(--title-font);
   color: var(--text-color);
   text-transform: capitalize;
   font-size: 16px;
   padding: 5px 0px 18px 0px;
   margin-bottom: 12px;
   font-weight: 400;
   line-height: 1;
   line-height: 160%;
   transition: color ease 0.2s, background-color ease 0.4s;
 }

 .widget_categories a:hover {
   color: var(--theme-color);
 }

 .widget_categories a i {
   font-size: 14px;
   margin-left: 20px;
   color: var(--theme-color);
   margin-right: 6px;
   margin-left: 0;
 }

 .widget_categories li {
   display: block;
   position: relative;
 }

 .widget_categories li>span {
   font-size: 14px;
   font-weight: 700;
   color: var(--title-color);
   right: 5px;
   top: 5px;
   z-index: 1;
   display: inline-block;
   text-align: center;
   position: absolute;
   transition: all ease 0.4s;
 }

 .widget_categories li .dot-shape {
   display: flex;
   position: absolute;
   bottom: 0;
 }

 .widget_categories li:hover {
   color: var(--theme-color);
 }

 .widget_categories li:hover span {
   color: var(--theme-color);
 }

 .widget_categories .widget_title {
   position: relative;
   font-weight: 600;
   font-size: 24px;
   line-height: 140%;
   margin: 0 0 5px 0;
   padding: 0 0 10px 28px;
   font-family: var(--title-font);
 }

 .widget_meta a {
   padding-bottom: 10px;
   margin-bottom: 12px;
   border-bottom: 1px solid #d9d9d9;
   display: block;
   padding-left: 0;
 }

 .widget_meta a:after,
 .widget_meta a:before {
   display: none;
 }

 .widget_meta>ul {
   margin-bottom: -0.3em;
 }

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

 .widget_nav_menu .sub-menu {
   margin-left: 10px;
 }

 .widget {
   padding: 0;
   position: relative;
   margin-bottom: 45px;
 }

 .widget select,
 .widget input {
   height: 38px;
   border: none;
   background-color: var(--input-bg, #F0F4F5);
 }

 .widget_title {
   position: relative;
   font-weight: 600;
   font-size: 24px;
   line-height: 140%;
   margin: 0 0 10px 0;
   padding: 0 0 13px 28px;
   font-family: var(--title-font);
 }

 .widget_title:before {
   content: "//";
   position: absolute;
   left: 0;
   height: 4px;
   width: 85px;
   color: var(--theme-color);
 }

 .widget_about {
   margin-bottom: 40px;
 }

 .widget_search {
   margin-bottom: 0;
 }

 .widget_gallery {
   margin-bottom: 50px;
 }

 .widget .search-form {
   position: relative;
   display: flex;
   border-bottom: 2px solid var(--border-color);
   padding-bottom: 15px;
 }

 .widget .search-form input {
   flex: 1;
   background-color: transparent;
   padding: 0;
   letter-spacing: 0.4px;
   font-size: 16px;
   font-weight: 600;
   text-transform: capitalize;
   height: 100%;
   font-family: var(--body-font);
 }

 .widget .search-form input::placeholder {
   color: #8B9595;
   letter-spacing: 0.4px;
   font-size: 16px;
   font-weight: 400;
   text-transform: capitalize;
 }

 .widget .search-form button {
   border: none;
   background-color: transparent;
   color: var(--white-color);
   padding: 0;
   margin: 0;
   color: var(--title-color);
   width: auto;
   font-size: 18px;
   display: inline-flex;
   align-items: end;
 }

 .widget .search-form button:hover {
   color: var(--theme-color);
 }

 .widget_about .title {
   font-size: 24px;
   font-weight: 600;
   line-height: 140%;
   margin-bottom: 13px;
 }

 .widget_about .text {
   line-height: 160%;
   margin-bottom: 0;
 }

 .widget_about img {
   margin-bottom: 30px;
   border-radius: 0 100px 0 0;
   width: 100%;
 }

 .sidebar-gallery {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 11px;
 }

 .sidebar-gallery .gallery-thumb {
   overflow: hidden;
   position: relative;
   border-radius: 5px;
   border: 1px solid #96e191;
 }

 .sidebar-gallery .gallery-thumb img {
   transition: all ease 0.4s;
   width: 100%;
   height: 100%;
   transform: scale(1);
 }

 .sidebar-gallery .gallery-thumb:before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: var(--theme-color);
   z-index: 1;
   opacity: 0;
   visibility: hidden;
   transition: all ease 0.4s;
 }

 .sidebar-gallery .gallery-thumb .gal-btn {
   position: absolute;
   left: 50%;
   top: 50%;
   width: var(--icon-size, 35px);
   height: var(--icon-size, 35px);
   margin: calc(var(--icon-size, 35px) / -2) 0 0 calc(var(--icon-size, 35px) / -2);
   text-align: center;
   font-size: 18px;
   color: var(--white-color);
   background-color: transparent;
   border-radius: 50%;
   transition: all ease 0.4s;
   opacity: 0;
   visibility: hidden;
   z-index: 3;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }

 .sidebar-gallery .gallery-thumb .gal-btn:hover {
   transform: scale(1);
   background-color: var(--white-color);
   color: var(--theme-color);
 }

 .sidebar-gallery .gallery-thumb:hover:before {
   opacity: 0.8;
   visibility: visible;
 }

 .sidebar-gallery .gallery-thumb:hover .gal-btn {
   opacity: 1;
   visibility: visible;
   transition-delay: 0.1s;
 }

 .sidebar-gallery .gallery-thumb:hover img {
   transform: scale(1.12);
 }

 .wp-block-tag-cloud a,
 .tagcloud a {
   display: inline-block;
   border: none;
   font-size: 16px;
   font-weight: 400;
   line-height: 1;
   padding: 9.5px 16.5px;
   margin-right: 5px;
   margin-bottom: 10px;
   color: var(--text-color);
   background-color: var(--light-color);
   border-radius: 4px;
 }

 .wp-block-tag-cloud a:hover,
 .tagcloud a:hover {
   background-color: var(--theme-color);
   color: var(--white-color);
 }

 .tagcloud {
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
 }

 .tagcloud a {
   color: var(--text-color);
   background-color: var(--light-color);
   font-weight: 600;
   text-transform: capitalize;
   font-size: 16px;
   letter-spacing: 0.4px;
   margin: 0;
   border-radius: 3px;
   padding: 11px 12px;
   border: 1px solid #DBE1E2;
 }

 .recent-post {
   display: flex;
   align-items: center;
   margin-bottom: 20px;
 }

 .recent-post:last-child {
   margin-bottom: 0;
   padding-bottom: 0;
   border-bottom: none;
 }

 .recent-post .media-img {
   margin-right: 18px;
 }

 .recent-post .media-img img {
   width: 100%;
   border-radius: 6px;
 }

 .recent-post .post-title {
   text-transform: capitalize;
   font-size: 18px;
   font-weight: 500;
   line-height: 24px;
   margin: 0 0 -0.1em 0;
 }

 .recent-post .recent-post-meta {
   margin: -0.15em 0 0 0;
 }

 .recent-post .recent-post-meta a {
   text-transform: uppercase;
   font-size: 16px;
   font-weight: 600;
   line-height: 160%;
   color: var(--theme-color);
 }

 .recent-post .recent-post-meta a i {
   margin-right: 5px;
   color: var(--theme-color);
 }

 .sidebar-area {
   margin-bottom: -10px;
 }

 .sidebar-area .newsletter-form .vs-btn:hover {
   color: var(--secondary-color);
   background-color: var(--white-color);
 }

 .widget_newsletter {
   background-color: var(--secondary-color);
   border: none;
 }

 .widget_newsletter:before {
   display: none;
 }

 .widget_newsletter .widget_title {
   color: var(--white-color);
   border-bottom-color: rgba(231, 231, 231, 0.14);
 }

 .widget_newsletter .form_text {
   color: #cfcfcf;
   margin-top: -0.45em;
 }

 .widget_newsletter input {
   height: 56px;
   color: #444444;
   margin-bottom: 15px;
   border-radius: 9999px;
 }

 .widget_newsletter .vs-btn {
   background-color: var(--theme-color);
   border-color: var(--theme-color);
   width: 100%;
 }

 .widget_newsletter .vs-btn:hover {
   border-color: var(--white-color);
 }

 .widget_shopping_cart {
   text-align: left;
 }

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

 .widget_shopping_cart .mini_cart_item {
   position: relative;
   border-bottom: 1px solid var(--theme-color);
   padding: 0 0 32px 0px;
   margin: 0 0 27px 0;
   min-height: 90px;
   display: flex;
   align-items: center;
   gap: 15px;
   flex-wrap: wrap;
 }

 .widget_shopping_cart .mini_cart_item a {
   color: var(--title-color);
 }

 .widget_shopping_cart .mini_cart_item>a>img {
   max-width: 80px;
   margin-right: 15px;
 }

 .widget_shopping_cart .remove {
   position: absolute;
   right: 0;
   top: 0;
   color: var(--title-color);
   line-height: 1;
   font-size: 18px;
 }

 .widget_shopping_cart .remove:hover {
   color: var(--theme-color);
 }

 .widget_shopping_cart .img {
   position: absolute;
   left: 0;
   top: 3px;
   width: 90px;
   height: 90px;
   display: inline-block;
   border: 1px solid var(--border-color);
 }

 .widget_shopping_cart .product-title {
   font-size: 14px;
   color: var(--title-color);
   font-weight: 400;
   margin-bottom: 0;
   display: inline-block;
 }

 .widget_shopping_cart .amount {
   display: block;
   font-weight: 600;
   color: var(--black-color);
   font-size: 16px;
 }

 .widget_shopping_cart .quantity {
   display: inline-flex;
   margin-top: 0px;
 }

 .widget_shopping_cart .qut-btn {
   border: 1px solid var(--border-color);
   background-color: transparent;
   display: inline-block;
   background-color: transparent;
   width: 25px;
   height: 25px;
   padding: 0;
   font-size: 12px;
   z-index: 1;
   position: relative;
 }

 .widget_shopping_cart .qut-btn:hover {
   background-color: var(--title-color);
   border-color: transparent;
   color: var(--white-color);
 }

 .widget_shopping_cart .qty-input {
   border: 1px solid var(--border-color);
   text-align: center;
   width: max-content;
   min-width: 40px;
   font-size: 12px;
   padding: 0;
   height: 25px;
   margin: 0 -1px;
 }

 .widget_shopping_cart .subtotal {
   float: right;
   text-align: right;
   font-size: 12px;
   margin-top: 19px;
 }

 .widget_shopping_cart .subtotal>span:not(.amount) {
   color: var(--body-color);
   font-weight: 300;
 }

 .widget_shopping_cart .subtotal .amount {
   font-size: 12px;
   display: inline-block;
 }

 .widget_shopping_cart .total {
   color: var(--title-color);
   text-transform: uppercase;
   line-height: 1;
   margin-bottom: 25px;
   font-size: 18px;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 .widget_shopping_cart .total .amount {
   font-size: inherit;
   display: inline-block;
   color: var(--black-color);
 }

 .widget_shopping_cart .buttons {
   margin: 0;
   gap: 15px;
 }

 .widget_shopping_cart .buttons .vs-btn {
   background-color: var(--theme-color);
   border-color: var(--theme-color);
 }

 .widget_shopping_cart .buttons .vs-btn:hover {
   background-color: var(--secondary-color);
   border-color: var(--secondary-color);
 }

 .tagcloud2 {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
 }

 .tagcloud2 span,
 .tagcloud2 a {
   font-size: 16px;
   font-weight: 500;
   letter-spacing: 0.4px;
   font-family: var(--title-font);
   color: var(--text-color);
   text-transform: capitalize;
   line-height: 160%;
 }

 .tagcloud2 span {
   font-weight: 700;
   text-transform: uppercase;
   margin-right: 13px;
   color: var(--vs-theme-color);
 }

 .tagcloud2 a {
   margin-right: 9px;
 }

 .tagcloud2 a:last-child {
   margin-right: 0;
 }

 .tagcloud2 a:hover {
   color: var(--theme-color);
 }

 .share-box {
   position: relative;
 }

 .share-box ul {
   margin: 0;
 }

 .share-box ul li {
   padding: 0;
   list-style: none;
 }

 .share-box ul {
   position: absolute;
   right: 0;
   top: -35px;
   display: flex;
   align-items: center;
   gap: 12px;
   background-color: var(--smoke-color);
   border-radius: 4px;
   border: 1px solid var(--border-color);
   box-shadow: 0px 4px 4px 0px rgba(var(--black-color-rgb), 0.07);
   line-height: 0;
   padding: 10px 15px;
   opacity: 0;
   transform: scale(0.8);
   transition: all 0.3s ease-in-out;
 }

 .share-box ul::after {
   position: absolute;
   content: "";
   background-color: transparent;
   bottom: -7px;
   right: 0px;
   width: 0;
   height: 0;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   border-top: 6px solid var(--border-color);
 }

 .share-box:hover ul {
   opacity: 1;
 }

 /* Large devices */
 @media (max-width: 1199px) {
   .widget {
     --widget-padding-y: 30px;
     --widget-padding-x: 30px;
   }

   .recent-post .post-title {
     font-size: 18px;
     line-height: 24px;
   }
 }

 /* Medium devices */
 @media (max-width: 991px) {
   .sidebar-area {
     padding-top: 30px;
   }

   .wp-block-tag-cloud a,
   .tagcloud a {
     padding: 10.5px 18px;
   }
 }

 /* Small devices */
 @media (max-width: 767px) {
   .widget_title {
     font-size: 22px;
   }
 }

 /* Extra small devices */
 @media (max-width: 575px) {
   .widget {
     padding: 0px 15px;
   }
 }

 .footer-widget {
   margin-bottom: 40px;
 }

 .footer-widget,
 .footer-widget .widget {
   padding: 0;
   border: none;
   padding-bottom: 0;
   background-color: transparent;
 }

 .footer-widget .widget_title {
   color: var(--white-color);
   font-size: 18px;
   margin-bottom: 45px;
   padding: 0;
   border: none;
   text-transform: capitalize;
 }

 .footer-widget.widget_meta,
 .footer-widget.widget_pages,
 .footer-widget.widget_archive,
 .footer-widget.widget_categories,
 .footer-widget.widget_nav_menu {
   margin-bottom: 45px;
 }

 .footer-widget.widget_meta ul ul,
 .footer-widget.widget_pages ul ul,
 .footer-widget.widget_archive ul ul,
 .footer-widget.widget_categories ul ul,
 .footer-widget.widget_nav_menu ul ul {
   margin-top: 0;
 }

 .footer-widget.widget_meta a,
 .footer-widget.widget_pages a,
 .footer-widget.widget_archive a,
 .footer-widget.widget_categories a,
 .footer-widget.widget_nav_menu a {
   width: max-content;
   display: block;
   border: none;
   font-size: 16px;
   font-weight: 600;
   font-family: var(--body-font);
   color: #ffffff;
   margin-bottom: 16px;
   max-width: 100%;
   padding: 0;
   background-color: transparent;
   position: relative;
 }

 .footer-widget.widget_meta a:hover,
 .footer-widget.widget_pages a:hover,
 .footer-widget.widget_archive a:hover,
 .footer-widget.widget_categories a:hover,
 .footer-widget.widget_nav_menu a:hover {
   background-color: transparent;
   color: var(--theme-color);
 }

 .footer-widget.widget_meta li>span,
 .footer-widget.widget_pages li>span,
 .footer-widget.widget_archive li>span,
 .footer-widget.widget_categories li>span,
 .footer-widget.widget_nav_menu li>span {
   width: auto;
   height: auto;
   position: relative;
   background-color: transparent;
   color: var(--body-color);
   line-height: 1;
 }

 .footer-widget.widget_meta li:last-child a,
 .footer-widget.widget_pages li:last-child a,
 .footer-widget.widget_archive li:last-child a,
 .footer-widget.widget_categories li:last-child a,
 .footer-widget.widget_nav_menu li:last-child a {
   margin-bottom: 0;
 }

 .footer-logo {
   margin-bottom: 18px;
 }

 .footer-text {
   text-transform: capitalize;
   color: #CFCFCF;
   margin-bottom: 18px;
   font-size: 15px;
   line-height: 165%;
   font-weight: 600;
 }

 /* Large devices */
 @media (max-width: 1199px) {
   .footer-widget {
     margin-bottom: 20px;
   }

   .footer-widget .widget_title {
     font-size: 20px;
     margin-bottom: 30px;
   }

   .footer-widget .footer-menu a {
     font-size: 16px;
   }
 }

 /* Medium devices */
 @media (max-width: 991px) {
   .footer-widget .widget_title {
     font-size: 22px;
   }
 }

 /*------------------- 4.2. Header  -------------------*/
 .vs-header {
   position: relative;
   z-index: 41;
 }

 .header-logo {
   max-width: 270px;
   height: 85px;
   /* display: inline-flex; */
   align-items: center;
   z-index: 0;
 }

 .will-sticky .sticky-active {
   position: fixed;
   top: -100%;
   right: 0;
   left: 0;
   background-color: var(--white-color);
   transition: all ease 0.8s;
   box-shadow: 0 0 10px 0 #0000003d;
   height: 80px;
 }

 .will-sticky .sticky-active.active {
   padding: 0 15px;
   top: 0;
 }

 .will-sticky .sticky-active.active .menu-area {
   margin-bottom: 0;
 }

 .main-menu {
   text-align: right;
   /* padding-left: 110px; */
 }

 .main-menu a {
   display: block;
   position: relative;
   font-family: var(--title-font);
   font-weight: 500;
   line-height: 160%;
   font-size: 18px;
   color: var(--title-color);
   text-transform: capitalize;
   /* Extra large devices */
 }

 @media (max-width: 1300px) {
   .main-menu a {
     font-size: 16px;
   }
 }

 .main-menu a:hover {
   color: var(--theme-color);
 }

 .main-menu>ul>li {
   margin: 0 16px;
 }

 .main-menu ul {
   margin: 0;
   padding: 0;
 }

 .main-menu ul li {
   list-style-type: none;
   display: inline-block;
   position: relative;
 }

 .main-menu ul li.menu-item-has-children>a:after {
   content: "\f078";
   position: relative;
   font-family: var(--icon-font);
   margin-left: 5px;
   top: -0.8px;
   font-size: 0.8rem;
 }

 .main-menu ul li:last-child {
   margin-right: 0;
 }

 .main-menu ul li:first-child {
   margin-left: 0;
 }

 .main-menu ul li:hover>ul.sub-menu,
 .main-menu ul li:hover ul.mega-menu {
   visibility: visible;
   opacity: 1;
   margin-top: 0;
   z-index: 9;
 }

 .main-menu ul.sub-menu li a.active {
   color: var(--theme-color);
 }

 .main-menu ul li.menu-item-has-children.active>a {
   color: var(--theme-color);
 }

 .main-menu ul.sub-menu,
 .main-menu ul.mega-menu {
   position: absolute;
   text-align: left;
   top: 100%;
   left: 0;
   background-color: var(--white-color);
   box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
   visibility: hidden;
   min-width: 190px;
   width: max-content;
   padding: 7px;
   left: -14px;
   margin-top: 50px;
   opacity: 0;
   z-index: -1;
   border-bottom: 3px solid var(--theme-color);
   box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.09), 0px 3px 0px 0px rgba(231, 13, 60, 0.004);
   transform-origin: top center;
   transition: margin-top 0.4s ease-in-out 0s, visibility 0.4s ease-in-out 0s, opacity 0.4s ease-in-out 0s, z-index 0s;
 }

 .main-menu ul.sub-menu a,
 .main-menu ul.mega-menu a {
   font-size: 16px;
   line-height: 30px;
 }

 .main-menu ul.sub-menu {
   padding: 18px 20px;
   left: -27px;
 }

 .main-menu ul.sub-menu:before {
   content: "";
   position: absolute;
   left: 34px;
   top: 32px;
   width: 1px;
   background-color: var(--border-color);
   height: calc(100% - 65px);
 }

 .main-menu ul.sub-menu li {
   display: block;
   margin: 0 0;
   padding: 3px 9px;
 }

 .main-menu ul.sub-menu li.menu-item-has-children>a:after {
   content: "\f105";
   float: right;
   top: 3px;
 }

 .main-menu ul.sub-menu li.menu-item-has-children.active>a {
   color: var(--theme-color);
 }

 .main-menu ul.sub-menu li.menu-item-has-children.menu-item-has-children.mega-menu-wrap.active>a {
   color: var(--white-color);
 }

 .main-menu ul.sub-menu li.menu-item-has-children.menu-item-has-children.mega-menu-wrap.active>a:hover {
   color: var(--theme-color);
 }

 .main-menu ul.sub-menu li.menu-item-has-children.menu-item-has-children.mega-menu-wrap.active .mega-menu li.active ul li.active a.active,
 .main-menu ul.sub-menu li.menu-item-has-children.menu-item-has-children.mega-menu-wrap.active .mega-menu li.active ul li.active a:hover {
   color: var(--theme-color);
   transform: translateX(10px);
 }

 .main-menu ul.sub-menu li.menu-item-has-children.menu-item-has-children.mega-menu-wrap.active .mega-menu li ul a:hover {
   color: var(--theme-color);
 }

 .main-menu ul.sub-menu li a {
   position: relative;
   padding-left: 21px;
 }

 .main-menu ul.sub-menu li a:before {
   content: "\f111";
   position: absolute;
   top: 3.3em;
   left: 0;
   font-family: var(--icon-font);
   width: 11px;
   height: 11px;
   text-align: center;
   border-radius: 50%;
   display: inline-block;
   font-size: 0.2em;
   line-height: 11.5px;
   color: var(--secondary-color);
   font-weight: 700;
   background-color: var(--white-color);
   box-shadow: inset 0px 2px 4px 0px rgba(12, 119, 53, 0.4);
 }

 .main-menu ul.sub-menu li ul.sub-menu {
   left: 100%;
   right: auto;
   top: 0;
   margin: 0 0;
   margin-left: 20px;
 }

 .main-menu ul.sub-menu li ul.sub-menu li ul {
   left: 100%;
   right: auto;
 }

 .main-menu .mega-menu-wrap {
   position: static;
 }

 .main-menu ul.mega-menu {
   display: flex;
   justify-content: space-between;
   text-align: left;
   width: 100%;
   max-width: var(--main-container);
   padding: 20px 15px 23px 15px;
   left: 50%;
   transform: translateX(-50%);
 }

 .main-menu ul.mega-menu li {
   display: block;
   width: 100%;
   padding: 0 15px;
 }

 .main-menu ul.mega-menu li li {
   padding: 4px 0;
 }

 .main-menu ul.mega-menu li a {
   display: inline-block;
 }

 .main-menu ul.mega-menu li a.active {
   color: var(--theme-color);
 }

 .main-menu ul.mega-menu>li>a {
   display: block;
   padding: 0;
   padding-bottom: 5px;
   margin-bottom: 10px;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-weight: 700;
   color: var(--title-color);
   border-color: var(--theme-color);
 }

 .main-menu ul.mega-menu>li>a::after,
 .main-menu ul.mega-menu>li>a::before {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 15px;
   height: 1px;
   background-color: var(--theme-color);
 }

 .main-menu ul.mega-menu>li>a::after {
   width: calc(100% - 20px);
   left: 20px;
 }

 .main-menu ul.mega-menu>li>a:hover {
   padding-left: 0;
 }

 .menu-style1>ul>li>a {
   padding: 41px 0;
 }

 .menu-style1>ul>li>a.active {
   color: var(--title-color);
 }

 .menu-style1>ul>li>a:hover {
   color: var(--theme-color);
 }

 .menu-style2>ul>li>a {
   color: var(--white-color);
 }

 .menu-style2>ul>li>a.active {
   color: var(--white-color) !important;
 }

 .menu-style2>ul>li>a:hover {
   color: var(--theme-color) !important;
 }

 .main-menu>ul>li>a {
   padding: 25px 0;
   padding-top: 8px;
 }

 .main-menu>ul>li>a.active {
   color: var(--theme-color);
 }

 .main-menu>ul>li.mega-menu-wrap>a {
   padding: 25px 0;
   padding-top: 10px;
 }

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

 .header-links li {
   display: inline-block;
   font-size: 15px;
   font-weight: 600;
   color: var(--white-color);
   font-family: var(--title-font);
   margin-right: 18px;
   padding-right: 20px;
   line-height: 165%;
   position: relative;
 }

 .header-links li:not(:last-child)::before {
   content: "";
   position: absolute;
   right: 0;
   width: 3px;
   height: 20px;
   background-color: #51757A;
   top: 50%;
   transform: translateY(-50%);
 }

 .header-links li:not(:last-child)::after {
   content: "";
   position: absolute;
   right: -4px;
   width: 2px;
   height: 12px;
   background-color: #51757A;
   top: 50%;
   transform: translateY(-50%);
 }

 .header-links li:last-child {
   margin-right: 0;
 }

 .header-links i {
   color: var(--theme-color);
   margin-right: 10px;
   font-weight: 700;
 }

 .header-links a {
   color: inherit;
 }

 .header-links a:hover {
   color: var(--theme-color);
 }

 .header-inner {
   display: inline-flex;
   align-items: center;
   height: 110px;
   max-width: 100%;
 }

 .menu-style1>ul>li.mega-menu-wrap>a {
   color: var(--title-color) !important;
 }

 .menu-style1>ul>li.mega-menu-wrap>a:hover {
   color: var(--theme-color) !important;
 }

 .contact-content {
   padding: 0 35px 0 25px;
 }

 .contact-content .contact-text {
   color: var(--white-color);
   font-size: 15px;
   font-weight: 600;
   margin-bottom: 2px;
   line-height: normal;
   position: relative;
 }

 .contact-content .contact-title {
   position: relative;
   margin-bottom: 0;
 }

 .contact-content .contact-title a {
   color: var(--white-color);
 }

 .contact-content .contact-title a:hover {
   color: var(--title-color);
 }

 .main-menu ul li.menu-item-has-children>a:after {
   display: none;
 }

 .header-icons {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px;
 }

 .header-icons .searchBoxTggler {
   color: var(--title-color);
   font-size: 18px;
   border: none;
   padding-left: 0;
   margin-right: 12px;
   padding-right: 20px;
   background-color: transparent;
   position: relative;
 }

 .header-icons .searchBoxTggler:hover {
   color: var(--theme-color);
 }

 .header-icons .searchBoxTggler i {
   font-weight: 700;
 }

 .header-icons .searchBoxTggler::before {
   content: "";
   position: absolute;
   right: 0;
   width: 1.5px;
   height: 32px;
   background-color: #B4C4C6;
   top: 50%;
   transform: translateY(-50%);
 }

 .header-icons .searchBoxTggler::after {
   content: "";
   position: absolute;
   right: -3px;
   width: 1px;
   height: 22px;
   background-color: #B4C4C6;
   top: 50%;
   transform: translateY(-50%);
 }

 .header-icons .icon-btn {
   color: var(--white-color);
   margin-right: 20px;
   background-color: var(--theme-color);
   font-size: 20px;
 }

 .header-icons .icon-btn:hover {
   background-color: var(--title-color);
 }

 .vs-header .sticky-wrapper {
   background-color: var(--white-color);
   height: 80px;
 }

 .vs-header .sticky-wrapper.style2 {
   background-color: var(--title-color);
 }

 .vs-header .sticky-wrapper.style2 .header-icons {
   background-color: var(--title-color);
   border-right: 8px solid var(--theme-color);
 }

 .vs-header .sticky-wrapper.style2 .header-icons .icon-btn {
   border: 3.5px solid var(--white-color);
   line-height: 63px;
 }

 .vs-header .sticky-wrapper.style2 .searchBoxTggler {
   color: var(--white-color);
 }

 .vs-header .sticky-wrapper.style2 .header-inner {
   background-color: var(--white-color);
   border-right: 7px solid var(--theme-color);
 }

 .vs-header .sticky-wrapper.style2 .contact-text {
   color: var(--title-color);
 }

 .vs-header .sticky-wrapper.style2 .contact-title a {
   color: var(--theme-color);
 }

 .vs-header .sticky-wrapper.style2 .contact-title a:hover {
   color: var(--title-color);
 }

 .vs-header .sticky-wrapper.style2 .header-logo::after {
   background-color: var(--theme-color);
 }

 .vs-header .sticky-wrapper.style2 .header-logo::before {
   background-color: var(--white-color);
 }

 .vs-header .sticky-wrapper.style2 .sticky-active.active {
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.35);
 }

 .vs-header .sticky-wrapper.style2 .sticky-active.active .header-logo::after {
   display: none;
 }

 .vs-header .sticky-wrapper.style2 .sticky-active.active .header-logo::before {
   display: none;
 }

 .vs-header .sticky-wrapper.style2 .sticky-active.active .menu-style2>ul>li>a {
   color: var(--title-color);
 }

 .vs-header .sticky-wrapper.style2 .sticky-active.active .menu-style2>ul>li>a.active {
   color: var(--title-color) !important;
 }

 .vs-header .sticky-wrapper.style2 .sticky-active.active .menu-style2>ul>li>a:hover {
   color: var(--theme-color) !important;
 }

 .vs-header .sticky-wrapper.style2 .sticky-active.active .header-icons {
   background-color: unset;
   border-right: none;
 }

 .vs-header .sticky-wrapper.style2 .sticky-active.active .header-icons .searchBoxTggler i {
   color: var(--title-color);
 }

 .vs-header .sticky-wrapper.style2 .sticky-active.active .header-icons .icon-btn {
   border-color: var(--theme-color);
 }

 .vs-header .sticky-wrapper.style2 .sticky-active.active .header-logo {
   height: 100%;
   max-width: 150px;
   padding: 15px 0;
 }

 .vs-header .sticky-wrapper.style2 .sticky-active.active .header-inner {
   background-color: var(--white-color);
   border: none;
 }

 .vs-header .sticky-wrapper.style2 .sticky-active.active .header-inner .contact-content .contact-title a {
   color: var(--title-color);
 }

 .vs-header .sticky-wrapper.style2 .sticky-active.active .header-inner .contact-content .contact-title a:hover {
   color: var(--theme-color);
 }

 .vs-header .sticky-wrapper.style2 .header-icons .searchBoxTggler::after {
   background-color: #456B71;
 }

 .vs-header .sticky-wrapper.style2 .header-icons .searchBoxTggler::before {
   background-color: #456B71;
 }

 .vs-header .will-sticky .sticky-active.active .menu-area {
   margin-bottom: 0;
 }

 .vs-header .header-top {
   padding: 0px 0;
   background-color: var(--title-color);
 }

 .vs-header .header-top.style2 {
   background: rgb(23, 167, 191);
   background: linear-gradient(270deg, #18A384 0%, rgb(16, 156, 61) 100%);
 }

 .vs-header .header-top.style2 .social-style1 a {
   background-color: #0D5A54;
 }

 .vs-header .header-top.style2 .social-style1 a:hover {
   color: var(--white-color);
   background-color: var(--title-color);
 }

 .vs-header .header-top.style2 .social-title::before {
   background-color: #61BFA3;
 }

 .vs-header .header-top.style2 .social-title::after {
   background-color: #61BFA3;
 }

 .vs-header .header-top.style2 .header-links::before {
   background-color: #10483A;
 }

 .vs-header .header-links {
   padding: 14px 40px;
   position: relative;
 }

 .vs-header .header-links::before {
   content: "";
   width: 100%;
   height: 100%;
   background-color: var(--body-color);
   position: absolute;
   top: 0;
   left: 16px;
   transform: skewX(-30deg);
 }

 .vs-header .header-logo {
   position: relative;
 }

 .vs-header .header-logo img {
   position: relative;
   z-index: 1;
 }

 .vs-header .header-logo::after {
   content: "";
   position: absolute;
   top: 0%;
   right: -23%;
   height: 90%;
   border-bottom-right-radius: 10px;
   bottom: 0;
   width: 100%;
   z-index: -1;
   /* background-color: #54CE7B; */
   transform: skewX(40deg);
 }

 .vs-header .header-logo::before {
   content: "";
   position: absolute;
   top: 0%;
   right: -20%;
   height: 100%;
   bottom: 0;
   width: 99999px;
   /* background-color: var(--theme-color); */
   transform: skewX(33deg);
   border-bottom-right-radius: 10px;
 }

 .vs-header.header-layout1 .header-inner {
   background-color: var(--theme-color);
   border-radius: 40px 0 0px 40px;
 }

 .vs-header.header-layout1 .header-icons {
   background-color: var(--white-color);
   border-radius: 0 56px 56px 0;
   height: 100%;
 }

 .vs-header.header-layout2 .header-top {
   background-color: #1C2438;
 }

 .vs-header.header-layout2 .header-links {
   margin-left: 350px;
 }

 .vs-header.header-layout2 .header-links::before {
   display: none;
 }

 .vs-header.header-layout2 .menu-style1>ul>li>a {
   padding: 30px 0;
 }

 .vs-header.header-layout2 .header-inner {
   height: 99px;
 }

 .vs-header.header-layout2 .header-logo {
   height: 100%;
   z-index: auto;
 }

 .vs-header.header-layout2 .header-logo::before {
   top: -62px;
   right: -60%;
   height: 155px;
   /* background: linear-gradient(73deg, rgb(1, 157, 91) 99%, #0BA17F);
   border-bottom: 10px solid #68BF45; */
 }

 .vs-header.header-layout2 .header-logo::after {
   top: unset;
   right: -69%;
   height: 99px;
   bottom: -14px;
   width: 30px;
   z-index: 1;
   /* background-color: var(--white-color); */
   transform: skewX(33deg);
 }

 .vs-header.header-layout2 .header-logo .main-logo {
   transform: translateY(-35%);
   z-index: 1;
 }

 .vs-header.header-layout2 .main-menu {
   padding-left: 140px;
   z-index: 1;
   position: relative;
 }

 .vs-header.header-layout2 .contact-content {
   position: relative;
 }

 .vs-header.header-layout2 .contact-content::before {
   content: "";
   position: absolute;
   top: -25px;
   right: 0;
   height: 99px;
   bottom: 0;
   width: 115%;
   background-color: #079F5F;
   z-index: 0;
   border-right: 8px solid #5EBC47;
 }

 .vs-header.header-layout2 .header-icons .icon-btn {
   margin-right: 0;
   border: 3.5px solid var(--white-color);
 }

 .vs-header.header-layout2 .social-style1 a {
   border: 2.5px solid var(--theme-color);
   background-color: #5EBC47;
 }

 .vs-header.header-layout2 .social-style1 a:hover {
   color: var(--white-color);
   background-color: var(--theme-color);
 }

 .vs-header.header-layout2 .sticky-active.active .main-logo {
   transform: unset;
 }

 .vs-header.header-layout2 .header-links li {
   color: #CDCCD9;
 }

 .vs-header.header-layout2 .header-links li i {
   color: var(--title-color2);
 }

 .vs-header.header-layout2 .social-style1 .social-title {
   color: #CDCCD9;
 }

 @media (max-width: 1700px) {
   .vs-header.header-layout2 .contact-content {
     padding: 0 0 0 25px;
   }

   .vs-header.header-layout2 .contact-content::before {
     display: none;
   }

   .vs-header.header-layout2 .contact-content .contact-text {
     color: var(--title-color2);
   }

   .vs-header.header-layout2 .contact-content .contact-title a {
     color: var(--title-color);
   }

   .vs-header.header-layout2 .contact-content .contact-title a:hover {
     color: var(--theme-color);
   }

   .vs-header.header-layout2 .header-icons .icon-btn {
     border-color: var(--title-color2);
   }

   .vs-header.header-layout1 .header-icons .icon-btn {
     margin-right: 0;
   }

   .vs-header.header-layout1 .header-inner {
     background-color: var(--white-color);
   }

   .vs-header.header-layout1 .header-inner .contact-content {
     padding: 0 0 0 10px;
   }

   .vs-header.header-layout1 .header-inner .contact-content::before {
     display: none;
   }

   .vs-header.header-layout1 .header-inner .contact-content .contact-text {
     color: var(--title-color2);
   }

   .vs-header.header-layout1 .header-inner .contact-content .contact-title a {
     color: var(--title-color);
   }

   .vs-header.header-layout1 .header-inner .contact-content .contact-title a:hover {
     color: var(--theme-color);
   }

   .vs-header.header-layout1 .sticky-wrapper.style2 .header-icons {
     border-radius: unset;
     border-right: none;
   }

   .vs-header.header-layout1 .sticky-wrapper.style2 .header-icons .icon-btn {
     margin-right: 0;
   }

   .vs-header.header-layout1 .sticky-wrapper.style2 .header-inner {
     background-color: var(--title-color);
     border-right: none;
   }

   .vs-header.header-layout1 .sticky-wrapper.style2 .header-inner .contact-content {
     padding: 0 0 0 25px;
   }

   .vs-header.header-layout1 .sticky-wrapper.style2 .header-inner .contact-content::before {
     display: none;
   }

   .vs-header.header-layout1 .sticky-wrapper.style2 .header-inner .contact-content .contact-text {
     color: var(--title-color2);
   }

   .vs-header.header-layout1 .sticky-wrapper.style2 .header-inner .contact-content .contact-title a {
     color: var(--white-color);
   }

   .vs-header.header-layout1 .sticky-wrapper.style2 .header-inner .contact-content .contact-title a:hover {
     color: var(--theme-color);
   }
 }

 @media (max-width: 1600px) {
   .vs-header .header-top {
     padding: 0 30px;
   }

   .vs-header .sticky-wrapper {
     padding: 0 15px;
   }
 }

 /* Extra large devices */
 @media (max-width: 1500px) {
   .main-menu {
     text-align: right;
   }
 }

 @media (max-width: 1399px) {
   .main-menu {
     text-align: right;
   }

   .vs-header .header-links {
     margin-left: 0;
   }

   .vs-header .main-menu {
     padding-left: 0px;
     font-size: 13px;
     text-transform: capitalize;
   }

   .vs-header .main-menu>ul>li {
     margin: 0 8px;
   }

   .vs-header.header-layout2 .header-logo .main-logo {
     transform: translateY(5%);
   }

   .vs-header.header-layout2 .header-logo .main-logo .main-logo1 {
     display: none;
   }

   .vs-header.header-layout2 .header-logo .main-logo .main-logo2 {
     display: block;
   }

   .vs-header.header-layout2 .header-logo::before {
     display: none;
   }

   .vs-header.header-layout2 .header-logo::after {
     display: none;
   }

   .vs-header.header-layout2 .header-links {
     margin-left: 0;
     padding-left: 0;
   }

   .vs-header.header-layout2 .main-menu {
     padding-left: 0px;
   }
 }

 /* Large devices */
 @media (max-width: 1199px) {
   .main-menu>ul>li {
     margin: 0 10px;
   }

   .header-icons .searchBoxTggler {
     display: none;
   }

   .vs-header .header-logo::before {
     right: -15%;
   }

   .vs-header .header-logo::after {
     right: -17%;
   }

   .vs-header .contact-content {
     display: none;
   }

   .vs-header.header-layout2 .icon-btn {
     line-height: 50px !important;
   }

   .vs-header .icon-btn {
     width: 55px;
     height: 55px;
   }

   .vs-header.header-layout1 .icon-btn {
     line-height: 57px !important;
   }

   .vs-header.header-layout1.style2 .icon-btn {
     line-height: 50px !important;
   }
 }

 /* Medium devices */
 @media (max-width: 991px) {
   .header-layout1 .header-top {
     padding: 10px 30px;
   }

   .header-layout1 .header-links {
     margin-left: 0;
     padding: 0;
   }

   .header-layout1 .header-links li {
     margin: 0;
     padding: 0;
   }

   .header-layout1 .header-links li::after {
     display: none;
   }

   .header-layout1 .header-links li::before {
     display: none;
   }

   .header-layout1 .header-links::before {
     display: none;
   }

   .header-layout1.style2 .header-links i {
     color: var(--white-color);
   }

   .vs-header .header-links {
     padding: 0;
   }

   .vs-header .header-links li {
     margin: 0;
     padding: 0;
   }

   .vs-header .header-links li::after {
     display: none;
   }

   .vs-header .header-links li::before {
     display: none;
   }

   .vs-header .header-links::before {
     display: none;
   }

   .header-layout2 .header-top {
     padding-top: 8px;
     padding-bottom: 8px;
   }
 }

 /* Extra small devices */
 @media (max-width: 575px) {
   .header-logo {
     max-width: 150px;
     padding: 10px 0;
   }

   .vs-header.header-layout2 .header-logo .main-logo {
     transform: unset;
   }

   .vs-header .header-top {
     padding: 8px 0;
   }

   .vs-header .sticky-wrapper {
     padding: 0 0;
   }
 }

 /*------------------- 4.3. Footer  -------------------*/
 .widget-area {
   padding-top: 80px;
   padding-bottom: 20px;
 }

 .footer-wrapper .gallery-thumb {
   border: 3px solid var(--theme-color);
   border-radius: 10px;
 }

 .footer-wrapper .widget-area {
       padding-top: 50px;
    padding-bottom: 165px;
 }

 .footer-layout1 {
   position: relative;
 }

 .footer-layout1 .widget_categories a {
   margin-bottom: 18px;
 }

 .footer-layout1 .widget_title {
   position: relative;
   padding-bottom: 8px;
 }

 .footer-layout1 .widget_title::before {
   content: "";
   position: absolute;
   width: 80px;
   height: 3px;
   background-color: var(--theme-color);
   bottom: -8px;
   z-index: 1;
   left: 0;
 }

 .footer-layout1 .widget_title::after {
   content: "";
   position: absolute;
   width: 80%;
   height: 3px;
   background-color: #144F56;
   bottom: -8px;
   left: 0;
 }

 .footer-layout1 .widget_categories ul {
   column-count: 1;
 }

 .footer-layout1 .widget_categories ul li {
   position: relative;
   padding-left: 22px;
   font-size: 15px;
   line-height: 150%;
   transition: all 0.5s ease;
 }

 .footer-layout1 .widget_categories ul li::after {
   content: "\f101";
   position: absolute;
   left: 0;
   top: 0;
   font-size: 14px;
   color: white;
   font-family: var(--icon-font);
 }

 .footer-layout1 .widget_categories ul li:hover {
   transform: translateX(10px);
 }

 .footer-layout1 .extra-space-top {
   padding-top: 240px;
 }

 .common-line {
   text-align: center;
   width: 100%;
 }

 .common-line img {
   width: 100%;
 }

 .footer-wrapper .vs-widget-about {
   padding-right: 50px;
 }

 .footer-wrapper .contact-box {
   margin-bottom: 25px;
 }

 .footer-wrapper .social-style1 .social-title {
   color: #fff;
   font-weight: 700;
 }

 .footer-wrapper .social-style1 .social-icon a {
   width: 40px;
   height: 40px;
   line-height: 40px;
   background-color: var(--title-color);
   border: 1px solid #1C4F57;
 }

 .footer-wrapper .social-style1 .social-icon a:hover {
   color: var(--white-color);
   background-color: var(--theme-color);
   border-color: var(--theme-color);
 }

 .contact-box {
   display: flex;
   align-items: center;
 }

 .contact-box .contact-content {
   padding: 0 0 0 14px;
 }

 .contact-box .contact-title {
   font-size: 22px;
   line-height: 145%;
 }

 .contact-box .contact-title:hover a {
   color: var(--theme-color);
 }

 .contact-box .contact-text {
   font-weight: 700;
   color: var(--theme-color);
   text-transform: capitalize;
   font-family: var(--title-font);
 }

 .contact-box .icon {
   border-right: 1px solid #0B6538;
   padding-right: 14px;
 }

 .media-style1 {
   display: flex;
   padding-bottom: 30px;
   border-bottom: 3px solid rgba(255, 217, 0, 0.3215686275);
   transition: all 0.5s ease;
 }

 .media-style1:hover {
   border-color: var(--theme-color);
 }

 .media-style1 .media-icon {
   width: 60px;
   height: 60px;
   line-height: 60px;
   text-align: center;
   border-radius: 50px;
   background-color: var(--theme-color);
   margin-right: 30px;
 }

 .media-style1 .media-body .media-title {
   color: var(--white-color);
   text-transform: capitalize;
   font-size: 18px;
 }

 .media-style1 .media-body .media-info {
   font-size: 16px;
   color: var(--smoke-color);
   margin-bottom: 0;
 }

 .media-style1 .media-body .media-info a {
   color: var(--white-color);
   transform: all 0.5s ease;
 }

 .media-style1 .media-body .media-info a:hover {
   color: var(--theme-color);
 }

 .footer-social a {
   color: var(--white-color);
 }

 .footer-social a:hover {
   color: var(--theme-color);
 }

 .footer-social a:not(:last-child) {
   margin-right: 18px;
 }

 .newsletter-form .search-btn {
   position: relative;
 }

 .newsletter-form .search-btn .form-control {
   margin-bottom: 0;
 }

 .newsletter-form .search-btn .icon-btn {
   position: absolute;
   right: 5px;
   top: 50%;
   transform: translateY(-50%);
   background-color: var(--theme-color);
 }

 .newsletter-form .search-btn .icon-btn:hover {
   background-color: var(--secondary-color);
 }

 .copyright-wrap {
   text-align: center;
   background-color: #9d3842;
   position: relative;
 }

 .copyright-text {
   margin: 0;
   font-size: 16px;
   padding: 6px 0;
   font-weight: 500;
   color: var(--white-color);
   position: relative;
   z-index: 0;
 }

 .copyright-text::before {
   content: "";
   position: absolute;
   bottom: 0;
   right: -55px;
   height: 100%;
   bottom: 0;
   width: 99999px;
   background-color: var(--theme-color);
   transform: skewX(50deg);
   z-index: -1;
 }

 .copyright-text a {
   font-weight: 700;
   color: #fff;
   text-transform: capitalize;
 }

 .copyright-text a:hover {
   color: var(--white-color);
 }

 .copyright-menu ul {
   margin: 0;
 }

 .copyright-menu li {
   margin-right: 20px;
   display: inline-block;
 }

 .copyright-menu a {
   display: block;
   text-decoration: none;
   text-transform: capitalize;
   color: var(--white-color);
   font-size: 16px;
   font-weight: 500;
 }

 .copyright-menu a:hover {
   color: var(--theme-color);
 }

 /* Large devices */
 @media (max-width: 1199px) {
   .copyright-text::before {
     display: none;
   }

   .copyright-text a {
     color: #ffff;
   }

   .copyright-text a:hover {
     color: var(--title-color2);
   }
 }

 /* Medium devices */
 @media (max-width: 991px) {
   .copyright-wrap {
     padding-bottom: 10px;
   }
 }

 /* Medium devices */
 @media (max-width: 991px) {
   .footer-layout2 {
     clip-path: none;
     padding-top: 80px;
   }
 }

 /* Small devices */
 @media (max-width: 767px) {
   .footer-wrapper .widget-area {
     padding-top: 60px;
   }
 }

 /* Extra small devices */
 @media (max-width: 575px) {
   .footer-wrapper .vs-widget-about {
     padding-right: 0;
   }

   .footer-layout1 .widget_categories ul {
     column-count: 1;
   }
 }

 /*------------------- 4.4. Breadcumb  -------------------*/
 .breadcumb-menu {
   max-width: 100%;
   padding: 0;
   margin: 12px 0 0 0;
   list-style-type: none;
   position: relative;
   text-align: left;
 }

 .breadcumb-menu li {
   display: inline-block;
   list-style: none;
   position: relative;
 }

 .breadcumb-menu li:after {
   content: "//";
   position: relative;
   margin-left: 12px;
   margin-right: 3px;
   color: var(--theme-color);
 }

 .breadcumb-menu li:last-child {
   color: var(--theme-color);
 }

 .breadcumb-menu li:last-child:after {
   display: none;
 }

 .breadcumb-menu li,
 .breadcumb-menu a,
 .breadcumb-menu span {
   word-break: break-word;
   white-space: normal;
   font-weight: 600;
   font-size: 18px;
   color: var(--white-color);
   font-family: var(--body-font);
   text-transform: uppercase;
 }

 .breadcumb-menu .fa-home-lg {
   margin-right: 10px;
 }

 .breadcumb-menu a:hover {
   color: var(--theme-color);
 }

 .breadcumb-title {
   color: var(--white-color);
   margin: -0.25em 0 -0.2em 0;
   font-size: 60px;
   font-weight: 600;
   line-height: 117%;
   text-transform: uppercase;
   text-align: left;
 }

 .breadcumb-title span {
   color: var(--theme-color);
   display: inline-block;
 }

 .breadcumb-wrapper {
   background-color: var(--secondary-color);
   background-size: cover;
   padding-top: 165px !important;
   padding-bottom: 165px !important;
   background-image: url(../img/banner/PageTitle-D.jpg);
 }

 /* Small devices */
 @media (max-width: 767px) {
   .breadcumb-title {
     font-size: 50px;
   }
 }

 /*------------------- 4.5. Pagination  -------------------*/
 .vs-pagination {
   margin-bottom: 0px;
 }

 .vs-pagination ul {
   margin: 0;
   padding: 0;
   list-style: none;
 }

 .vs-pagination span,
 .vs-pagination a {
   width: 56px;
   height: 56px;
   line-height: 53px;
   text-align: center;
   font-size: 18px;
   font-weight: 700;
   font-family: var(--body-font);
   color: var(--text-color);
   display: inline-block;
   border: 2px solid var(--border-color);
   border-radius: 5px;
   background-color: #E6EBEC;
 }

 .vs-pagination span.active,
 .vs-pagination span:hover,
 .vs-pagination a.active,
 .vs-pagination a:hover {
   color: var(--white-color);
   border-color: var(--theme-color);
   background-color: var(--theme-color);
 }

 .vs-pagination span i,
 .vs-pagination a i {
   font-size: 16px;
   font-weight: 900;
 }

 .vs-pagination li {
   display: inline-block;
   margin: 0 3px;
   list-style-type: none;
 }

 .post-pagination {
   padding: 30px 0 0 0;
 }

 .post-pagi-box {
   display: flex;
   align-items: center;
 }

 .post-pagi-box>a {
   color: var(--body-color);
   font-weight: 600;
   font-size: 16px;
   font-family: var(--title-font);
   display: flex;
   align-items: center;
   gap: 12px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }

 .post-pagi-box>a i {
   color: var(--theme-color);
   font-weight: 700;
 }

 .post-pagi-box>a:hover {
   color: var(--theme-color);
 }

 .post-pagi-box img {
   width: 80px;
   margin-right: 25px;
 }

 .post-pagi-box.next {
   flex-direction: row-reverse;
 }

 .post-pagi-box.next img {
   margin-right: 0;
   margin-left: 25px;
 }

 /* Small devices */
 @media (max-width: 767px) {
   .vs-pagination {
     text-align: center;
   }

   .vs-pagination a {
     width: 35px;
     height: 35px;
     line-height: 35px;
     font-size: 14px;
   }

   .vs-pagination li {
     margin: 0 2px;
   }
 }

 /*------------------- 4.6. Blog  -------------------*/
 blockquote {
   display: block;
   position: relative;
   overflow: hidden;
   font-size: 24px;
   font-weight: 700;
   font-family: var(--title-font);
   color: var(--title-color);
   background-color: var(--bg-color3);
   border-left: 4px solid var(--theme-color);
   padding: 43px 50px 42px 35px;
   margin: 35px 0;
 }

 blockquote p {
   font-family: inherit;
   color: inherit;
   z-index: 3;
   width: 100%;
   margin-bottom: 0 !important;
   line-height: 1.5;
   position: relative;
 }

 blockquote:before {
   content: "\e1e4";
   font-family: var(--icon-font);
   position: absolute;
   bottom: 30px;
   font-size: 46px;
   font-weight: 600;
   line-height: 1;
   color: var(--theme-color);
   left: 38px;
   top: 0;
 }

 blockquote p {
   margin-bottom: 0;
 }

 blockquote p a {
   color: inherit;
 }

 blockquote cite {
   color: var(--theme-color);
   font-family: var(--title-font);
   font-size: 16px;
   font-weight: 600;
   display: inline-block;
   position: relative;
   text-transform: uppercase;
   padding-left: 32px;
   line-height: 160%;
   margin-top: 10px;
   font-style: normal;
 }

 blockquote cite:before {
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 25px;
   height: 4px;
   border-radius: 30px;
   background-color: var(--theme-color);
 }

 blockquote.vs-quote {
   text-align: left;
   padding: 0 30px 40px 110px;
   border-left: 0;
   background-color: transparent;
   border-bottom: 8px solid var(--theme-color);
   margin: 40px 0 38px;
   border-radius: 30px;
 }

 blockquote.vs-quote p {
   font-size: 24px;
   font-weight: 500;
   font-family: var(--title-font);
   line-height: 140%;
   color: var(--title-color);
   text-transform: capitalize;
   letter-spacing: 0.9px;
 }

 blockquote.vs-quote .quote-author {
   display: block;
   font-size: 14px;
   color: #74787c;
   font-family: var(--title-font);
   display: block;
   font-weight: 400;
 }

 .wp-block-image img {
   width: 100%;
   border-radius: 30px;
 }

 .blog-meta span,
 .blog-meta a {
   display: inline-block;
   margin-right: 20px;
   font-size: 16px;
   font-weight: 600;
   color: var(--secondary-color);
   text-transform: uppercase;
   font-family: var(--title-font);
   transition: all 0.5s ease;
 }

 .blog-meta span:last-child,
 .blog-meta a:last-child {
   margin-right: 0;
 }

 .blog-meta span i,
 .blog-meta a i {
   margin-right: 10px;
   color: var(--secondary-color);
   transition: all 0.5s ease;
 }

 .blog-meta a:hover {
   color: var(--theme-color);
 }

 .blog-meta a:hover i {
   color: var(--theme-color);
 }

 .blog-category {
   margin-bottom: -10px;
 }

 .blog-category a {
   display: inline-block;
   color: var(--white-color);
   padding: 4.5px 24.5px;
   margin-right: 5px;
   margin-bottom: 10px;
   border: 1px solid transparent;
   background-color: var(--theme-color);
 }

 .blog-category a:hover {
   background-color: var(--white-color);
   color: var(--body-color);
   border-color: var(--theme-color);
 }

 .blog-title a {
   color: inherit;
 }

 .blog-title a:hover {
   color: var(--theme-color);
 }

 .vs-blog {
   margin-bottom: 30px;
 }

 .share-links-title {
   font-size: 18px;
   color: var(--title-color);
   font-family: var(--title-font);
   font-weight: 700;
   margin: 0 15px 0 0;
   display: inline-block;
 }

 .share-links {
   margin: 50px 0 50px 0;
   padding: 17px 30px;
   background-color: var(--light-color);
 }

 .share-links .row {
   align-items: center;
   --bs-gutter-y: 15px;
 }

 .share-links .tagcloud {
   display: inline-block;
 }

 .share-links .social-links {
   display: inline-block;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }

 .share-links .social-links li {
   display: inline-block;
   margin-right: 4px;
 }

 .share-links .social-links li:last-child {
   margin-right: 0;
 }

 .share-links .social-links a {
   width: 46px;
   height: 46px;
   line-height: 46px;
   font-size: 16px;
   color: var(--title-color);
   text-align: center;
   display: block;
   border: 1px solid var(--border-color);
   border-radius: 50%;
 }

 .share-links .social-links a:hover {
   color: var(--black-color);
   background-color: var(--theme-color);
   border-color: var(--theme-color);
 }

 .blog-inner-author {
   font-size: 16px;
   text-transform: uppercase;
   font-family: var(--body-font);
   color: var(--title-color);
   font-weight: 600;
   margin-bottom: 6px;
 }

 .blog-inner-author span {
   line-height: 160%;
   display: inline-flex;
 }

 .blog-inner-author span a {
   margin-left: 6px;
 }

 .blog-inner-author span:hover {
   color: var(--title-color);
 }

 .blog-inner-author a {
   color: var(--theme-color);
 }

 .blog-inner-author a i {
   margin-right: 8px;
 }

 .blog-inner-author a:hover {
   color: var(--title-color);
 }

 .blog-inner-author .blog-date {
   line-height: 160%;
 }

 .blog-inner-author .blog-date:not(:first-child) {
   margin-left: 14px;
 }

 .blog-inner-author img {
   width: 67px;
   height: 67px;
   padding: 3px;
   margin-right: 10px;
   background-color: var(--theme-color);
   border-radius: 50%;
 }

 .blog-single {
   position: relative;
   margin-bottom: 50px;
 }

 .blog-single .blog-links {
   display: flex;
   justify-content: space-between;
 }

 .blog-single .blog-links .link-btn {
   font-size: 16px;
   text-transform: uppercase;
   font-weight: 700;
 }

 .blog-single .blog-links .link-btn i {
   color: var(--theme-color);
   font-weight: 700;
   margin-right: 0;
   font-size: 14px;
   margin-left: 8px;
 }

 .blog-single .blog-title {
   font-size: 36px;
   margin-bottom: 25px;
   line-height: initial;
 }

 .blog-single .blog-meta {
   margin-bottom: 4px;
 }

 .blog-single .blog-text {
   text-transform: capitalize;
   line-height: 160%;
   font-weight: 500;
 }

 .blog-single .blog-img {
   position: relative;
   background-color: var(--smoke-color);
   margin: -1px;
   border-radius: 20px;
 }

 .blog-single .blog-img img {
   width: 100%;
   border-radius: 20px;
 }

 .blog-single .blog-audio {
   line-height: 1;
 }

 .blog-single .blog-img .slick-arrow {
   --pos-x: 30px;
   border: none;
   width: 50px;
   height: 50px;
   line-height: 50px;
   background-color: var(--white-color);
   color: var(--secondary-color);
   border-radius: 50%;
   font-size: 20px;
 }

 .blog-single .blog-img .slick-arrow:hover {
   background-color: var(--secondary-color);
   color: var(--white-color);
 }

 .blog-single .blog-img .play-btn {
   --icon-size: 60px;
   --icon-font-size: 20px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin: calc(var(--icon-size) / -2) 0 0 calc(var(--icon-size) / -2);
 }

 .blog-single .blog-content {
   overflow: hidden;
   padding: 33px 0px 18px 0px;
   position: relative;
   border-bottom: 1px solid var(--border-color);
   position: relative;
   margin-bottom: 28px;
   line-height: 160%;
 }

 .blog-single .blog-content::before {
   position: absolute;
   content: "";
   border-bottom: 1px solid var(--border-color);
   display: block;
   width: 100%;
   left: 0;
   bottom: 1px;
 }

 .blog-single:hover .blog-img .slick-arrow {
   opacity: 1;
   visibility: visible;
 }

 .list-style1 .list-unstyled img {
   margin-right: 15px;
 }

 .list-style1 .list-unstyled li {
   margin-bottom: 10px;
 }

 .post-admin {
   border-radius: 0px;
   display: flex;
   gap: 30px;
   align-items: center;
   padding: 37px 45px;
   margin-top: 40px;
   position: relative;
   z-index: 1;
   overflow: hidden;
 }

 .post-admin::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   min-height: 100%;
   background-color: var(--title-color);
   border: 1px solid var(--border-color);
   z-index: -1;
   border-radius: 26px;
 }

 .post-admin .post-img {
   flex: 0 var(--image-size);
   --image-size: 137px;
   width: var(--image-size);
   height: var(--image-size);
   max-width: var(--image-size);
   max-height: var(--image-size);
   min-width: var(--image-size);
   min-height: var(--image-size);
   border-radius: 50%;
   overflow: hidden;
   border: 3px solid var(--theme-color);
 }

 .post-admin .post-img img {
   height: 100%;
   object-fit: cover;
   width: 100%;
 }

 .post-admin .post-header {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   justify-content: space-between;
   margin-bottom: 10px;
 }

 .post-admin .post-header__heading {
   margin-bottom: 0;
   color: var(--white-color);
   text-transform: capitalize;
   letter-spacing: 0.6px;
   display: flex;
   align-items: center;
   font-size: 24px;
   line-height: 140%;
   gap: 18px;
   flex-wrap: wrap;
 }

 .post-admin .post-header__heading a:hover {
   color: var(--theme-color);
 }

 .post-admin .post-header__heading span {
   font-size: 15px;
   color: var(--theme-color);
 }

 .post-admin .post-text {
   margin-bottom: 15px;
   padding-right: 0;
   color: var(--white-color);
   text-transform: capitalize;
   line-height: 160%;
 }

 .post-admin__social {
   display: flex;
   align-items: center;
   gap: 13px;
 }

 .post-admin__social a {
   color: var(--white-color);
   font-size: 13px;
   letter-spacing: 0.4px;
 }

 .post-admin__social a:hover {
   color: var(--theme-color);
 }

 .vs-blog__style1 {
   border-radius: 30px;
   background-color: var(--white-color);
   padding: 15px;
   box-shadow: 0px 5px 9px rgba(0, 0, 0, 0.09);
   margin-bottom: 10px;
 }

 .vs-blog__style1 .blog-img {
   border-radius: 15px;
   overflow: hidden;
   position: relative;
 }

 .vs-blog__style1 .blog-img::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   background: rgb(16, 156, 61);
   background: linear-gradient(0deg, rgba(16, 156, 61, 0.2973564426) 0%, rgba(255, 255, 255, 0) 95%);
 }

 .vs-blog__style1 .blog-img img {
   width: 100%;
   transform: scale(1);
   transition: all 0.5s ease;
   position: relative;
 }

 .vs-blog__style1 .blog-cate {
   position: absolute;
   bottom: 0;
   background-color: var(--theme-color);
   left: 0;
   font-weight: 700;
   font-size: 15px;
   line-height: initial;
   color: var(--white-color);
   padding: 12px 40px 12px 22px;
   letter-spacing: 1px;
   text-transform: uppercase;
   transition: all 0.5s ease;
   clip-path: polygon(0 0, 80% 0%, 100% 100%, 0% 100%);
   z-index: 1;
 }

 .vs-blog__style1 .blog-cate:hover {
   background-color: var(--title-color);
 }

 .vs-blog__style1 .blog-inner-author .blog-date {
   color: #5F5D76;
   text-transform: capitalize;
 }

 .vs-blog__style1 .blog-inner-author .blog-date:hover {
   color: var(--theme-color);
 }

 .vs-blog__style1 .blog-inner-author i {
   color: var(--theme-color);
 }

 .vs-blog__style1 .blog-title {
   font-size: 26px;
   font-weight: 600;
   line-height: normal;
 }

 .vs-blog__style1 .blog-content {
   padding: 27px 22px 25px 22px;
 }

 .vs-blog__style1:hover .blog-img img {
   transform: scale(1.1);
 }

 .vs-blog__style1:hover .blog-btn::before {
   background-color: var(--theme-color);
 }

 .vs-blog__style1.style2 {
   padding: 16px;
 }

 .vs-blog__style1.style2 .blog-content {
   padding: 25px 20px 25px 0px;
 }

 .blog-btn {
   position: relative;
 }

 .blog-btn .link-btn .icon {
   border: 1.9px dashed var(--theme-color);
   display: inline-block;
   border-radius: 50%;
   margin-right: 14px;
   transition: all 0.5s ease;
 }

 .blog-btn .link-btn i {
   width: 40px;
   height: 40px;
   line-height: 40px;
   background-color: var(--theme-color);
   color: var(--white-color);
   border-radius: 50%;
   margin: 1.5px;
   text-align: center;
   transition: all 0.5s ease;
 }

 .blog-btn .link-btn:hover .icon {
   border-color: var(--title-color);
 }

 .blog-btn .link-btn:hover i {
   background-color: var(--title-color);
 }

 .blog-btn::before {
   content: "";
   position: absolute;
   width: 26%;
   height: 2px;
   background-color: #8DB69A;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
 }

 /* Large devices */
 @media (max-width: 1199px) {
   blockquote {
     font-size: 20px;
     padding: 23px 30px 26px 30px;
   }

   blockquote cite {
     font-size: 16px;
   }

   .blog-single {
     --blog-space-y: 40px;
     --blog-space-x: 30px;
   }

   .blog-single .blog-title {
     font-size: 30px;
   }

   .vs-blog__style1 .blog-title {
     font-size: 24px;
   }
 }

 /* Small devices */
 @media (max-width: 767px) {
   blockquote.vs-quote {
     padding: 40px 15px;
   }

   blockquote.vs-quote p {
     line-height: 1.8;
   }

   .share-links {
     padding: 17px 20px;
   }

   .share-links-title {
     font-size: 18px;
     display: block;
     margin: 0 0 10px 0;
   }

   .blog-single {
     --blog-space-y: 40px;
     --blog-space-x: 20px;
   }

   .blog-single:not(.has-post-thumbnail) .blog-content {
     padding: 40px 0px 0px;
   }

   .blog-single .blog-title {
     font-size: 24px;
     line-height: 1.6;
   }

   .blog-single .blog-meta>span:not(:last-child):after,
   .blog-single .blog-meta a:not(:last-child):after {
     content: "";
     margin: 0 10px 0 14px;
   }

   .blog-details:not(.has-post-thumbnail) .blog-content {
     padding: 0;
   }

   .blog-details .blog-single .blog-img {
     margin-bottom: 30px;
   }

   .post-admin {
     display: block;
   }

   .post-admin .post-img {
     margin: 0 auto 30px;
   }
 }

 /*------------------- 4.7. Comments  -------------------*/
 .comment-respond {
   position: relative;
   background-color: var(--smoke-color);
   padding: 40px 40px 50px;
   border-radius: 10px;
   border: 1px solid #E7EBEB;
 }

 .comment-respond .form-title a#cancel-comment-reply-link {
   font-size: 0.7em;
   text-decoration: underline;
 }

 .comment-respond .custom-checkbox.notice {
   margin-top: 10px;
   margin-bottom: 25px;
 }

 .comment-respond .row {
   --bs-gutter-x: 20px;
 }

 .comment-respond .form-control {
   height: 70px;
   background-color: var(--white-color);
   border: 2px dashed #9BACAE;
   border-radius: 10px;
   padding: 20px 25px;
   font-size: 15px;
   font-weight: 600;
   text-transform: capitalize;
   color: var(--title-color);
 }

 .comment-respond textarea.form-control {
   min-height: 152px;
   padding: 25px 25px 30px;
 }

 .comment-respond .form-group>i {
   top: 20.5px;
 }

 .comment-respond .vs-custom-checkbox {
   padding-top: 10px;
   margin-bottom: 35px;
 }

 .comment-respond input[type=checkbox]~label {
   font-size: 15px;
   font-weight: 600;
   letter-spacing: 0.4px;
   text-transform: capitalize;
   color: var(--text-color);
 }

 .comment-respond input[type=checkbox]~label:before {
   background-color: var(--white-color);
   border: 2px dashed var(--border-color);
   border-radius: 5px;
 }

 .comment-respond input[type=checkbox]:checked~label:before {
   background-color: var(--theme-color);
   border-color: transparent;
 }

 .comment-respond .blog-inner-title {
   font-size: 30px;
   margin-bottom: 10px;
   margin-top: 0;
 }

 .comment-respond .blog-inner-title+p {
   margin-bottom: 15px;
   font-size: 16px;
   font-weight: 500;
   letter-spacing: 0.4px;
   text-transform: capitalize;
   line-height: 160%;
 }

 .comment-respond .form-text {
   margin-bottom: 25px;
 }

 .question-form .comment-respond,
 .review-form .comment-respond {
   margin: 0 0 20px 0;
 }

 .question-form .form-control,
 .review-form .form-control {
   background-color: transparent;
   border: 1px solid #e4e4e4;
 }

 .question-form .rating-select,
 .review-form .rating-select {
   display: flex;
   align-items: center;
 }

 .question-form .rating-select label,
 .review-form .rating-select label {
   font-weight: 500;
   color: var(--title-color);
 }

 .review-form .form-title {
   margin: 0 0 20px 0;
 }

 .vs-comments-wrap {
   margin: var(--blog-space-y, 60px) 0 var(--blog-space-y, 60px) 0;
 }

 .vs-comments-wrap .description p:last-child {
   margin-bottom: 0;
 }

 .vs-comments-wrap .blog-inner-title {
   line-height: 132%;
   font-size: 30px;
   margin-bottom: 50px;
 }

 .vs-comments-wrap .form-inner {
   margin-top: 38px;
 }

 .vs-comments-wrap .comment-respond {
   margin: 30px 0;
 }

 .vs-comments-wrap pre {
   background: #ededed;
   color: #666;
   font-size: 14px;
   margin: 20px 0;
   overflow: auto;
   padding: 20px;
   white-space: pre-wrap;
   word-wrap: break-word;
 }

 .vs-comments-wrap blockquote {
   background-color: #eaf8f9;
 }

 .vs-comments-wrap li {
   margin: 0;
 }

 .vs-comments-wrap li .comment-ele {
   display: flex;
   width: 100%;
 }

 .vs-comments-wrap .vs-post-comment {
   position: relative;
   position: relative;
   margin: 40px 0;
   background: var(--white-color);
 }

 .vs-comments-wrap .vs-post-inner {
   display: flex;
   align-items: center;
 }

 .vs-comments-wrap ul.comment-list {
   list-style: none;
   margin: -10px 0 0 0;
   padding: 0;
 }

 .vs-comments-wrap ul.comment-list ul ul,
 .vs-comments-wrap ul.comment-list ul ol,
 .vs-comments-wrap ul.comment-list ol ul,
 .vs-comments-wrap ul.comment-list ol ol {
   margin-bottom: 0;
 }

 .vs-comments-wrap .comment-avater {
   margin-right: 25px;
   overflow: hidden;
   background-color: transparent;
   border-radius: 50%;
   width: 118px;
   height: 118px;
   border: 4px solid var(--theme-color);
 }

 .vs-comments-wrap .comment-avater img {
   width: 100%;
   height: 100%;
 }

 .vs-comments-wrap .comment-content {
   flex: 1;
   position: relative;
   padding: 18px 50px 22px 30px;
   border: 2px dashed #9BACAE;
   border-radius: 10px;
   margin-bottom: 13px;
 }

 .vs-comments-wrap .commented-on {
   font-size: 16px;
   display: block;
   margin-bottom: 0;
   margin-top: 0em;
   font-weight: 600;
   color: var(--theme-color);
   font-family: var(--body-font);
   text-transform: uppercase;
   line-height: 160%;
 }

 .vs-comments-wrap .commented-on i {
   margin-right: 7px;
   font-size: 0.9rem;
 }

 .vs-comments-wrap .name {
   margin-bottom: 5px;
   font-size: 24px;
   font-weight: 600;
   display: flex;
   align-items: center;
   color: var(--title-color);
   line-height: 140%;
   text-transform: capitalize;
   gap: 18px;
   font-family: var(--title-font);
 }

 .vs-comments-wrap .comment-top {
   display: flex;
   justify-content: space-between;
 }

 .vs-comments-wrap .text:last-of-type {
   color: var(--text-color);
   letter-spacing: 0.4px;
   text-transform: capitalize;
   margin: 0 0 0px 0;
   font-weight: 500;
   line-height: 160%;
 }

 .vs-comments-wrap .children {
   margin: 0;
   padding: 0;
   list-style-type: none;
   margin-left: 70px;
 }

 .vs-comments-wrap .reply_and_edit {
   position: absolute;
   right: 0;
   top: 15px;
   line-height: 1;
 }

 .vs-comments-wrap .replay-btn {
   font-weight: 700;
   font-size: 14px;
   display: inline-flex;
   font-family: var(--title-font);
   align-items: center;
   text-transform: uppercase;
   justify-content: flex-end;
   gap: 7px;
   letter-spacing: 0.4px;
   padding-left: 18%;
 }

 .vs-comments-wrap .replay-btn i {
   margin-right: 0px;
   font-size: 13px;
   color: var(--vs-theme-color);
 }

 .vs-comments-wrap .replay-btn:hover {
   color: var(--theme-color);
 }

 .vs-comments-wrap .star-rating {
   font-size: 12px;
   margin-bottom: 10px;
   position: absolute;
   top: 5px;
   right: 0;
   width: 80px;
 }

 .vs-comment-form .form-inner {
   margin-top: 35px;
 }

 .vs-comments-wrap.vs-comment-form {
   margin: 0;
 }

 /* Large devices */
 @media (max-width: 1199px) {
   .vs-comments-wrap .vs-post-comment {
     display: block;
     padding: 15px 15px;
     margin: 0;
   }

   .vs-comments-wrap .replay-btn {
     padding-left: 0%;
   }

   .vs-comments-wrap .star-rating {
     position: relative;
     top: 0;
     right: 0;
   }

   .vs-comments-wrap .comment-top {
     display: block;
   }

   .vs-comments-wrap .comment-avater {
     margin-right: 0;
     margin-bottom: 20px;
   }

   .vs-comments-wrap .vs-post-inner {
     display: block;
   }

   .vs-comments-wrap .children {
     margin-left: 40px;
   }

   .vs-comments-wrap .reply_and_edit {
     position: relative;
     top: 0;
     margin: 15px 0 0 0;
   }
 }

 /* Small devices */
 @media (max-width: 767px) {
   .vs-comments-wrap .children {
     margin-left: 20px;
   }

   .vs-comments-wrap .name {
     font-size: 18px;
   }
 }

 /*------------------- 4.8. Hero Area  -------------------*/
 .vs-hero__layout1 .bubbles {
   width: 40%;
 }

 .vs-hero__content {
   padding: 55px 0px 80px 45px;
   position: relative;
   border-left: 10px solid var(--theme-color);
   z-index: 1;
   margin-left: 240px;
 }

 .vs-hero__content::after {
   content: "";
   position: absolute;
   width: 40%;
   height: 10px;
   left: 0;
   top: 0;
   background-color: var(--theme-color);
 }

 .vs-hero__content::before {
   content: "";
   position: absolute;
   width: 65%;
   height: 10px;
   left: 0;
   bottom: 0;
   background-color: var(--theme-color);
 }

 .vs-hero__content .vs-btn2 {
   text-transform: uppercase;
   border: 2px solid #65B047;
   padding: 2px 5px 2px 28px;
   background: rgb(23, 167, 191);
   background: linear-gradient(85deg, rgb(23, 167, 191) 0%, rgb(103, 184, 70) 72%);
 }

 .vs-hero__content .vs-btn2:hover {
   color: var(--title-color);
   border-color: var(--theme-color);
 }

 .vs-hero__content .vs-btn2:hover i {
   color: var(--title-color);
   background-color: var(--white-color);
 }

 .vs-hero__subtitle {
   color: var(--theme-color);
   font-size: 20px;
   font-weight: 600;
   font-family: var(--title-font);
   text-transform: uppercase;
   display: inline-flex;
   align-items: end;
   margin-bottom: 15px;
 }

 .vs-hero__subtitle .icon {
   margin-right: 12px;
 }

 .vs-hero__title {
   font-size: 80px;
   color: var(--white-color);
   text-transform: uppercase;
   line-height: 94%;
   margin-bottom: 30px;
 }

 .vs-hero__title--highlight {
   color: var(--theme-color);
 }

 .vs-hero__item2 {
   padding: 115px 0;
 }

 .vs-hero__item2.style2 {
   padding: 240px 0;
   border-bottom: 5px solid var(--theme-color);
 }

 .vs-hero__text {
   font-size: 18px;
   font-weight: 500;
   color: var(--text-color2);
   text-transform: capitalize;
   margin-bottom: 35px;
 }

 .vs-hero .hero-btn {
   display: inline-flex;
   align-items: center;
   gap: 15px;
 }

 .vs-hero .play-btn>i {
   width: 64px;
   height: 64px;
   line-height: 64px;
   font-size: 18px;
 }

 .vs-hero__layout1 {
   position: relative;
 }

 .vs-hero__layout1 .main-img {
   position: relative;
 }

 .vs-hero__layout1 .main-img .slide-item {
   position: relative;
   clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 122%);
 }

 .vs-hero__layout1 .main-img .slide-item::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   background: rgb(3, 39, 44);
   background: linear-gradient(94deg, rgba(3, 39, 44, 0.8267682073) 0%, rgba(6, 58, 65, 0) 100%);
   z-index: 1;
 }

 .vs-hero__layout1 .main-img img {
   width: 100%;
   max-height: 820px;
   position: relative;
 }

 .vs-hero__layout1 .vs-hero__item {
   position: relative;
 }

 .vs-hero__layout1 .vs-hero__item::after {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   background: rgb(3, 39, 44);
   background: linear-gradient(94deg, rgba(3, 39, 44, 0.8267682073) 0%, rgba(6, 58, 65, 0) 100%);
 }

 .vs-hero__layout1 .vs-hero__item .dot-shape {
   position: absolute;
   width: 30px;
   height: 10px;
   left: 66%;
   bottom: 0;
   background-color: var(--theme-color);
   border-radius: 30px;
   display: block;
 }

 .vs-hero-style2 {
   position: relative;
 }

 .vs-hero-style2 .vs-hero__title {
   text-transform: capitalize;
   margin-bottom: 15px;
 }

 .vs-hero-style2 .vs-hero__content {
   padding: 0;
   border: none;
   margin-left: 0;
 }

 .vs-hero-style2 .vs-hero__content::after {
   display: none;
 }

 .vs-hero-style2 .vs-hero__content::before {
   display: none;
 }

 .vs-hero-style2 .main-img img {
   clip-path: none;
 }

 .vs-hero-style2 .bottom-shape {
   display: block;
 }

 .vs-hero-style2 .bottom-shape img {
   width: 100%;
   text-align: center;
 }

 @media (min-width: 2500px) {
   .main-container3 {
     margin: 0 auto;
   }
 }

 @media (min-width: 2200px) and (max-width: 2499px) {
   .vs-hero__content {
     margin-left: 165px;
   }
 }

 @media (max-width: 1780px) {
   .vs-hero__content {
     margin-left: 40px;
   }
 }

 /* Extra large devices */
 @media (max-width: 1500px) {
   .vs-hero__title {
     font-size: 52px;
   }
 }

 /* Large devices */
 @media (max-width: 1199px) {
   .vs-hero__title {
     font-size: 32px;
     line-height: 130%;
   }

   .vs-hero__item2.style2 {
     padding: 120px 0 140px;
   }

   .vs-hero-style2 .vs-hero__title {
     font-size: 52px;
   }
 }

 /* Medium devices */
 @media (max-width: 991px) {
   .vs-hero__layout1 .vs-hero__content {
     margin: 80px 0 40px;
   }

   .vs-hero__layout1 .vs-hero__title {
     font-size: 65px;
   }

   .vs-hero__layout1 .vs-hero__image .main-img img {
     width: 100%;
     max-height: 510px;
     clip-path: none;
     position: relative;
   }

   .vs-hero__item2.style2 {
     padding: 80px 0 140px;
   }

   .vs-hero-style2 .vs-hero__item2 {
     padding: 80px 0 100px;
   }

   .vs-hero-style2 .vs-hero__item2 .vs-hero__content {
     text-align: center;
     margin-left: 0;
   }
 }

 /* Small devices */
 @media (max-width: 767px) {
   .vs-hero__layout1 .vs-hero__title {
     font-size: 42px;
   }
 }

 /* Extra small devices */
 @media (max-width: 575px) {
   .vs-hero__image .main-img {
     clip-path: none;
   }

   .vs-hero__layout1 .main-img .slide-item {
     clip-path: unset;
   }
 }

 /*------------------- 4.9. Error  -------------------*/
 .error-area__text {
   text-transform: uppercase;
   font-size: 30px;
   font-weight: 400;
   letter-spacing: 2px;
   font-family: var(--body-font);
   line-height: 132%;
   margin-bottom: 18px;
 }

 .error-area__text span {
   color: var(--theme-color);
 }

 .error-area__img {
   display: block;
   margin-bottom: 55px;
 }

 /*------------------- 4.10. About  -------------------*/
 .about-layout1 {
   position: relative;
 }

 .about-layout1 .title-area {
   margin-bottom: 22px;
   /* padding-right: 70px; */
 }

 .about-layout1 .about-text {
   /* text-transform: capitalize; */
   font-weight: 500;
   line-height: 40px;
 }

 .about-layout1.style3 .contact-box {
   margin-bottom: 40px;
 }

 .about-layout1.style3 .contact-box .contact-title {
   font-size: 20px;
 }

 .about-layout1.style3 .contact-box .contact-title a {
   color: var(--title-color);
 }

 .about-layout1.style3 .contact-box .contact-title a:hover {
   color: var(--theme-color);
 }

 .about-layout1.style3 .contact-box .contact-text {
   font-family: var(--body-font);
   font-size: 14px;
   color: var(--text-color);
   font-weight: 500;
 }

 .about-layout1.style3 .tab-list {
   margin-bottom: 0;
 }

 .about-layout1.style3 .tab-list .list-title {
   font-size: 20px;
   font-weight: 600;
   line-height: 150%;
 }

 .about-layout1.style3 .tab-list ul {
   padding-left: 0;
 }

 .about-layout1.style3 .tab-list li {
   font-weight: 600;
   line-height: 160%;
 }

 .about-layout1.style3 .tab-list li:not(:last-child) {
   margin-bottom: 5px;
 }

 .about-layout1.style3 .tab-img {
   background: rgb(32, 169, 176);
   background: linear-gradient(270deg, rgb(32, 169, 176) 0%, rgb(16, 156, 61) 100%);
 }

 .about-layout1.style3 .tab-img img {
   border-radius: 13px;
   padding: 6px;
 }

 .about-layout1 .tab-box {
   margin-bottom: 30px;
 }

 .about-layout1.style2 .tab-box {
   margin-bottom: 4px;
 }

 .about-layout1.style2 .tab-box .tab-img {
   border: 4px solid var(--theme-color);
 }

 .img-box1 {
   position: relative;
   max-width: 635px;
   margin-bottom: 38px;
 }

 .img-box1::before {
   content: "";
   position: absolute;
   width: 120px;
   height: 10px;
   top: 20px;
   right: 0;
   background-color: var(--theme-color);
 }

 .img-box1 .img1 {
   border-left: 12px solid var(--theme-color);
 }

 .img-box1 .img1::before {
   content: "";
   position: absolute;
   width: 45%;
   height: 10px;
   left: 0;
   bottom: 0;
   background-color: var(--theme-color);
 }

 .img-box1 .img1 img {
   margin-left: 18px;
   margin-bottom: 28px;
 }

 .img-box1 .img2 {
   position: absolute;
   top: 70px;
   right: 0;
   border: 12px solid var(--theme-color);
   box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.28);
 }

 .img-box1 .img-icon {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   max-width: 164px;
   max-height: 164px;
   background-color: var(--theme-color);
   border-radius: 50%;
   padding: 58px;
   z-index: 1;
 }

 .img-box1 .img-icon img {
   text-align: center;
 }

 .img-box1 .img-icon .icon-shep {
   display: block;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   text-align: center;
   z-index: -1;
 }

 .img-box1.style2 .img2 {
   top: 105px;
 }

 .img-box1.style2::before {
   top: 75px;
 }

 .img-box2 {
   position: relative;
 }

 .img-box2 .shape-mockup img {
   height: 100%;
 }

 .img-box2 .img1 {
   border-radius: 10px;
   overflow: hidden;
   margin-right: 30px;
 }

 .img-box2 .img1 img {
   width: 100%;
   transform: scale(1);
   transition: all 0.5s ease;
 }

 .img-box2 .img2 {
   position: absolute;
   bottom: 0px;
   left: 0;
   border-top: 8px solid var(--white-color);
   border-right: 8px solid var(--white-color);
 }

 .img-box2 .img-icon {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 130px;
   height: 130px;
   background-color: var(--theme-color);
   border: 8px solid var(--white-color);
   border-radius: 50%;
   text-align: center;
   line-height: 115px;
   z-index: 1;
   transition: all 0.5s ease;
 }

 .img-box2 .img-icon img {
   text-align: center;
 }

 .img-box2 .img-icon .icon-shep {
   display: block;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   text-align: center;
   z-index: -1;
 }

 .img-box2 .img-icon:hover {
   background-color: var(--title-color);
   border-color: var(--theme-color);
 }

 .img-box2:hover .img1 img {
   transform: scale(1.1);
 }

 .about-box1 {
   display: inline-flex;
   align-items: center;
   margin-bottom: 30px;
   margin-top: 12px;
 }

 .about-box1 .item-title {
   line-height: 150%;
   margin-bottom: 5px;
 }

 .about-box1 .about-item {
   display: block;
 }

 .about-box1 .about-item:first-child {
   margin-right: 70px;
 }

 .about-box1 .item-icon {
   margin-bottom: 15px;
   display: block;
 }

 .about-box1 .item-text {
   text-transform: capitalize;
   font-weight: 600;
   font-size: 15px;
   margin-bottom: 0;
 }

 .author-box {
   display: flex;
   align-items: center;
 }

 .author-box img {
   border-radius: 50%;
   border: 2px dashed var(--theme-color);
   padding: 3px;
 }

 .about-inner {
   display: flex;
   align-items: center;
   margin-bottom: 24px;
 }

 .about-inner .author-box {
   margin-left: 17px;
 }

 .about-inner .desi {
   font-size: 14px;
   color: var(--theme-color);
   font-weight: 700;
 }

 .author-content {
   margin-left: 15px;
 }

 .author-content .desi {
   margin-bottom: 0;
   line-height: 170%;
 }

 .author-content .title {
   margin-bottom: 0;
   line-height: 140%;
   font-family: var(--title-font2);
 }

 .about-notice {
   position: relative;
 }

 .about-notice .notice-icon {
   position: absolute;
   left: 0;
   top: 0;
   top: 50%;
   transform: translateY(-50%);
 }

 .about-notice .notice-text {
   padding-left: 42px;
   margin-bottom: 0;
   font-weight: 600;
   font-size: 18px;
   color: var(--theme-color);
 }

 .nav-tabs {
   display: inline-flex;
   padding: 5px;
   border: 1px solid var(--border-color);
   border-radius: 10px;
   margin-bottom: 28px;
       justify-content: space-evenly;
 }

 .nav-tabs .nav-link {
   border: none;
   text-transform: capitalize;
   font-weight: 700;
   color: var(--title-color);
   font-family: var(--title-font);
   background-color: transparent;
   border-radius: 7px;
   font-size: 16px;
 }

 .nav-tabs .nav-link.active {
   color: var(--white-color);
   background-color: var(--theme-color);
 }

 .tab-box {
   display: inline-flex;
   align-items: center;
   gap: 20px;
 }

 .tab-box .tab-img {
   position: relative;
   display: inline-block;
   border-radius: 13px;
   overflow: hidden;
 }

 .tab-box .tab-img::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   background-color: hsla(193, 83%, 16%, 0.356);
 }

 .tab-box .play-btn {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }

 .tab-box .play-btn i {
   width: 72px;
   height: 72px;
   line-height: 72px;
   font-size: 18px;
 }

 .tab-list {
   margin-right: 0;
   padding-left: 0;
 }

 .tab-list li {
   list-style: none;
   padding-left: 32px;
   position: relative;
   color: var(--text-color);
   font-size: 16px;
   font-weight: 500;
   text-transform: capitalize;
 }

 .tab-list li:not(:last-child) {
   margin-bottom: 14px;
 }

 .tab-list li .icon {
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
 }

 .tab-content {
   margin-bottom: 30px;
 }

 .image-gallery {
   display: grid;
   grid-template-rows: repeat(2, 1fr);
   grid-template-columns: repeat(4, 1fr);
   gap: 0px;
   width: 100%;
   height: 100%;
 }

 .image-gallery img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 0px;
 }

 .image-gallery__col {
   overflow: hidden;
   position: relative;
   z-index: 1;
 }

 .image-gallery__col::before {
   position: absolute;
   content: "";
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: var(--theme-color);
   z-index: 2;
   opacity: 70%;
   transform-origin: center;
   transform: scaleY(0);
   visibility: hidden;
   transition: all ease 0.4s;
 }

 .image-gallery__col img {
   transition: all ease 0.4s;
   transform: scale(1);
 }

 .image-gallery__col--popup {
   --icon-size: 116px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--white-color);
   font-size: clamp(1.125rem, 0.85rem + 1.38vw, 2.5rem);
   position: absolute;
   width: var(--icon-size);
   height: var(--icon-size);
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(0);
   border-radius: 50%;
   background-color: var(--bg-color);
   z-index: 4;
   opacity: 90%;
   visibility: hidden;
 }

 .image-gallery__col--popup i {
   font-size: 64px;
   color: var(--white-color);
   font-size: 64px;
   width: 80px;
   height: 80px;
   line-height: 80px;
   background-color: transparent;
   border-radius: 50%;
   text-align: center;
   transition: all 0.5s ease;
 }

 .image-gallery__col--popup i:hover {
   background-color: var(--secondary-color);
 }

 .image-gallery__col:hover::before {
   transform: scaleY(1);
   visibility: visible;
 }

 .image-gallery__col:hover .image-gallery__col--popup {
   transform: translate(-50%, -50%) scale(1);
   visibility: visible;
   opacity: 90%;
 }

 .image-gallery__col:hover img {
   transform: scale(1.2);
   backface-visibility: hidden;
   perspective: 1000px;
 }

 /* Large devices */
 @media (max-width: 1199px) {
   .img-box1 {
     margin: 0 auto 38px;
   }
 }

 /* Medium devices */
 @media (max-width: 991px) {
   .img-box1::before {
     display: none;
   }

   .img-box1 .img1 {
     overflow: hidden;
   }

   .img-box1 .img1 img {
     width: 100%;
   }

   .about-layout1 .custome-space-bottom {
     padding-bottom: 40px;
   }
 }

 /* Small devices */
 @media (max-width: 767px) {
   .tab-box {
     display: block;
   }

   .tab-box .tab-img {
     margin-bottom: 20px;
   }

   .img-box2 .img2 {
     display: none;
   }

   .about-layout1.style3 .tab-img {
     margin-bottom: 0;
   }

   .about-layout1.style3 .tab-list {
     margin-bottom: 30px;
   }

   .image-gallery {
     grid-template-columns: repeat(3, 1fr);
   }
 }

 /* Extra small devices */
 @media (max-width: 575px) {
   .about-inner {
     display: block;
   }

   .about-inner .vs-btn2 {
     margin-bottom: 20px;
   }

   .img-box1 {
     margin-bottom: 0;
   }

   .img-box1 .img2 {
     display: none;
   }

   .img-box2 .img1 {
     margin-right: 20px;
   }

   .image-gallery {
     grid-template-columns: repeat(2, 1fr);
   }

   .about-box1 .about-item:first-child {
     margin-right: 10px;
   }
 }

 /*------------------- 4.11. Service  -------------------*/
 .vs-service__layout1 .slick-track {
   margin-bottom: 10px;
 }

 .vs-service__body {
   padding: 30px 30px 26px;
 }

 .vs-service__img {
   overflow: hidden;
   position: relative;
 }

 .vs-service__img::after {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   background-color: rgba(3, 39, 44, 0.17);
 }

 .vs-service__img img {
   width: 100%;
   transform: scale(1);
   transition: all 0.5s ease;
 }

 .vs-service__title {
   margin-bottom: 0;
   font-size: 20px;
 }

 .vs-service__title a {
   color: var(--title-color);
   text-transform: uppercase;
   line-height: 150%;
   font-weight: 600;
   margin-bottom: 0;
   font-size: 16px;
 }

 .vs-service__title a:hover {
   color: var(--theme-color);
 }

 .vs-service__subtitle {
   font-size: 14px;
   text-transform: uppercase;
   font-weight: 600;
   color: var(--theme-color);
   margin-bottom: 0;
   line-height: 170%;
 }

 .vs-service__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom: 2px dashed #D4D4DB;
   padding-bottom: 25px;
   margin-bottom: 25px;
   position: relative;
   transition: all 0.5s ease;
 }

 .vs-service__header::after {
   content: "";
   position: absolute;
   width: 48px;
   height: 6px;
   bottom: -4px;
   right: 0;
   background-color: #D4D4DB;
   transform: skewX(-25deg);
   transition: all 0.5s ease;
 }

 .vs-service__style1 {
   border-radius: 10px;
   box-shadow: 0px 5px 9px rgba(0, 0, 0, 0.09);
   overflow: hidden;
   border-bottom: 8px solid transparent;
   transition: all 0.5s ease;
 }

 .vs-service__style1:hover {
   border-color: var(--theme-color);
 }

 .vs-service__style1:hover .vs-service__header {
   border-color: var(--theme-color);
 }

 .vs-service__style1:hover .vs-service__header::after {
   background-color: var(--theme-color);
 }

 .vs-service__style1:hover .vs-service__img img {
   transform: scale(1.1);
 }

 .vs-service__text {
   margin-bottom: 0;
 }

 .service-style2 {
   margin-top: 0px;
   position: relative;
 }

 .service-style2 .service-img {
   width: 183px;
   height: 183px;
   line-height: 183px;
 }

 .service-style2 .service-img .img {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   margin: 0 auto;
   border: 10px solid var(--white-color);
   transform: scale(1);
 }

 .service-style2 .service-icon {
   width: 75px;
   height: 75px;
   line-height: 66px;
   border-radius: 50%;
   text-align: center;
   border: 5px solid var(--white-color);
   /* background-color: var(--theme-color); */
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translate(-50%, 32%);
   transition: all 0.5s ease;
 }

 .service-style2 .service-icon .icon {
   transform: scaleX(1);
   transition: all 0.5s ease;
 }

 .service-style2 .service-top {
   position: absolute;
   left: 50%;
   transform: translate(-50%, -50%);
 }

 .service-style2 .service-body {
   text-align: center;
   padding: 122px 25px 42px;
   position: relative;
   border-radius: 10px;
       border-right: 1px solid #9d3842;
    border-left: 1px solid #9d3842;
}
 

  /* Equal Height Columns */
 

.main {
    width: 100%;
    display: flex;
}

.service-style2 {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Optional */
.service-body {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

 .service-style2 .service-body::after {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   background-color: var(--white-color);
   z-index: -1;
   border-radius: 10px 10px 15px 15px;
   clip-path: polygon(0 0, 100% 0, 100% 100%, 51% 95%, 0 100%, 0% 25%);
 }

 .service-style2 .service-body::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 105%;
   left: 0;
   top: -10px;
   background-color: var(--theme-color);
   z-index: -1;
   border-radius: 10px 10px 15px 15px;
   clip-path: polygon(0 0, 100% 0, 100% 100%, 51% 95%, 0 100%, 0% 25%);
   transition: all 0.5s ease;
 }

 .service-style2 .vs-service__title {
   font-size: 22px;
   font-weight: 600;
   margin-bottom: 10px;
 }

 .service-style2 .vs-service__title a {
   text-transform: capitalize;
 }

 .service-style2 .vs-service__text {
   margin-bottom: 16px;
   text-transform: capitalize;
   font-weight: 500;
 }

 .service-style2 .icon-btn {
   width: 35px;
   height: 35px;
   line-height: 35px;
   font-size: 14px;
   font-weight: 700;
   color: var(--white-color);
   background-color: var(--theme-color);
   display: block;
   margin: 0 auto;
 }

 .service-style2 .icon-btn:hover {
   background-color: var(--title-color);
 }

 .service-style2:hover .service-body::before {
   background-color: var(--title-color);
 }

 .service-style2:hover .service-icon {
   /* background-color: var(--title-color); */
 }

 /* .service-body{
  height: 100% !important;
 } */

 .service-style2:hover .service-icon .icon {
   transform: scaleX(-1);
 }

 .service-style3 {
   position: relative;
 }

 .service-style3:first-child .service-content {
   border-radius: 30px 0 0px 30px;
   transition: all 0.5s ease;
 }

 .service-style3:last-child .service-content {
   border-radius: 0 30px 30px 0;
   transition: all 0.5s ease;
 }

 .service-style3::after {
   content: "";
   position: absolute;
   left: 0;
   top: -20px;
   width: 100%;
   height: 20px;
   background-color: var(--theme-color);
   border-radius: 30px 30px 0 0;
   visibility: hidden;
   opacity: 0;
   transition: all 0.5s ease;
 }

 .service-style3::before {
   content: "";
   position: absolute;
   left: 0;
   bottom: -10px;
   width: 100%;
   height: 15px;
   background-color: var(--theme-color);
   border-radius: 0 0 30px 30px;
   visibility: hidden;
   opacity: 0;
   transition: all 0.5s ease;
 }

 .service-style3 .service-content {
   background-color: var(--theme-color);
   padding: 30px;
   position: relative;
   overflow: hidden;
   transition: all 0.5s ease;
 }

 .service-style3 .service-content .service-title {
   font-size: 24px;
   font-weight: 500;
   text-transform: capitalize;
   position: relative;
   z-index: 1;
 }

 .service-style3 .service-content .service-title a {
   color: var(--white-color);
 }

 .service-style3 .service-content .service-title a:hover {
   color: var(--theme-color);
 }

 .service-style3 .service-content .service-text {
   font-size: 15px;
   font-weight: 500;
   text-transform: capitalize;
   color: var(--white-color);
   position: relative;
   z-index: 1;
 }

 .service-style3 .service-content.border-right {
   border-right: 1px solid var(--title-color);
 }

 .service-style3 .icon-btn3 {
   margin-bottom: 14px;
   position: relative;
   z-index: 1;
 }

 .service-style3 .service-bg1 {
   visibility: hidden;
   opacity: 0;
   transition: all 0.5s ease;
 }

 .service-style3:hover .service-content {
   background-color: transparent;
 }

 .service-style3:hover .service-bg1 {
   opacity: 1;
   visibility: visible;
 }

 .service-style3:hover .icon-btn3 {
   border-color: var(--theme-color);
 }

 .service-style3:hover .icon-btn3 .icon {
   background-color: var(--theme-color);
 }

 .service-style3:hover:first-child .service-content {
   border-radius: 0;
 }

 .service-style3:hover:last-child .service-content {
   border-radius: 0;
 }

 .service-style3:hover::after,
 .service-style3:hover::before {
   visibility: visible;
   opacity: 1;
 }

 .service-style4 {
   background-color: var(--white-color);
   border-radius: 20px;
   overflow: hidden;
   position: relative;
 }

 .service-style4 .service-img {
   position: relative;
   padding: 6px;
   z-index: 1;
 }

 .service-style4 .service-img img {
   border-radius: 15px;
 }

 .service-style4 .service-body {
   padding: 40px 25px 35px 25px;
   text-align: center;
   position: relative;
 }

 .service-style4 .service-text {
   margin-bottom: 0;
 }

 .service-style4 .service-title {
   font-size: 24px;
   text-transform: capitalize;
   font-weight: 600;
   line-height: 140%;
   margin-bottom: 10px;
 }

 .service-style4 .service-title a {
   color: var(--title-color);
 }

 .service-style4 .service-title a:hover {
   color: var(--theme-color);
 }

 .service-style4 .service-content {
   position: relative;
   z-index: 1;
 }

 .service-style4 .service-img {
   position: relative;
 }

 .service-style4 .service-img .service-icon {
   position: absolute;
   bottom: 0;
   text-align: center;
   width: 82px;
   height: 82px;
   line-height: 82px;
   background-color: var(--white-color);
   left: 50%;
   transform: translate(-50%, 45%);
   border-radius: 100%;
 }

 .service-style4 .icon-btn3 {
   border-color: var(--theme-color);
 }

 .service-style4 .icon-btn3 .icon {
   width: 62px;
   height: 62px;
   line-height: 62px;
   background-color: var(--theme-color);
 }

 .service-style4:hover .icon-btn3 {
   border-color: var(--title-color);
 }

 .service-style4:hover .icon-btn3 .icon {
   background-color: var(--title-color);
 }

 .arraw-style1 .custom-arraw {
   position: relative;
   bottom: initial;
   text-align: right;
   margin-bottom: 30px;
 }

 .arraw-style1 .custom-arraw .slick-prev {
   left: initial;
 }

 .arraw-style1 .custom-arraw .slick-next {
   left: initial;
 }

 .service-bg1 {
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
 }

 .service-bg1 img {
   width: 100%;
   height: 100%;
 }

 .service-layout1 .service-inner {
   background-color: var(--theme-color);
   border-radius: 20px;
   margin-bottom: 15px;
   margin-top: 20px;
   transform: translateY(-104px);
 }

 .icon-btn3 {
   border: 2px dashed var(--title-color);
   text-align: center;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   transition: all 0.5s ease;
 }

 .icon-btn3 .icon {
   background-color: #124349;
   width: 84px;
   height: 84px;
   line-height: 84px;
   border-radius: 50%;
   transition: all 0.5s ease;
 }

 .custome-space-bottom {
   padding-bottom: 110px;
 }

 .gx-1px {
   --bs-gutter-x: 1px;
 }

 /* Extra large devices */
 /* Large devices */
 @media (max-width: 1199px) {
   .service-layout1 .service-inner {
     background-color: unset;
     margin-bottom: 0;
     transform: translateY(-65px);
   }
 }

 /* Medium devices */
 @media (max-width: 991px) {
   .service-style3::before {
     display: none;
   }

   .service-style3::after {
     display: none;
   }

   .service-style3:not(:last-child) {
     margin-bottom: 20px;
   }

   .service-style3 .service-content {
     border-radius: 30px !important;
   }

   .service-style3 .border-right {
     border: none !important;
   }

   .gx-0 {
     --bs-gutter-x: 20px !important;
   }
 }

 /* Small devices */
 @media (max-width: 767px) {
   .arraw-style1 .custom-arraw {
     margin-bottom: 0;
   }
 }

 /*------------------- 4.12. process  -------------------*/
 .process-layout1 {
   position: relative;
   overflow: hidden;
 }

 .process-layout1 .slick-slide:nth-child(odd) {
   margin-top: 40px;
 }

 .process-style1 {
   background-color: var(--white-color);
   padding-top: 5px;
 }

 .process-style1 .process-img {
   position: relative;
   border-radius: 50%;
   text-align: center;
   max-width: 270px;
   max-height: 270px;
   margin-bottom: 20px;
   margin: 0 auto;
 }

 .process-style1 .process-img:before {
   content: "";
   position: absolute;
   left: var(--extra-shape, -5px);
   top: var(--extra-shape, -5px);
   right: var(--extra-shape, -5px);
   bottom: var(--extra-shape, -5px);
   background-color: transparent;
   border-radius: inherit;
   z-index: 1;
   border: 2px dashed var(--theme-color);
   transition: all ease 0.4s;
   animation: spin 30s infinite linear;
 }

 .process-style1 .process-img img {
   border-radius: 50%;
   padding: 10px;
   width: 100%;
   height: 100%;
 }

 .process-content {
   text-align: center;
   padding: 25px 30px 0px 30px;
 }

 .process-content .process-title {
   margin: 0 0 10px 0;
 }

 .process-content .process-title a {
   color: var(--black-color);
 }

 .process-content .process-title a:hover {
   color: var(--secondary-color);
 }

 .process-content .process-text {
   color: #444444;
   margin-bottom: 0;
 }

 /* Extra small devices */
 @media (max-width: 575px) {
   .process-layout1 .slick-slide:nth-child(odd) {
     margin-top: 0px;
   }
 }

 /* Large devices */
 @media (max-width: 1199px) {
   .process-layout1 .slick-slide:nth-child(odd) {
     margin-top: 0px;
   }
 }

 /*------------------- 4.14. Counter  -------------------*/
 .vs-counter__layout1 {
   background-color: var(--secondary-color);
   border-bottom: 6px solid var(--theme-color);
   overflow: hidden;
 }

 .vs-counter__layout1 .play-btn2 {
   border-radius: 50%;
   border: 2px dashed var(--secondary-color);
   display: inline-block;
   margin-right: 25px;
   position: relative;
 }

 .vs-counter__layout1 .play-btn2 i {
   width: 96px;
   height: 96px;
   color: var(--white-color);
   font-size: 24px;
   background-color: var(--secondary-color);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
 }

 .vs-counter__layout1 .play-btn2:hover {
   border-color: var(--white-color);
 }

 .vs-counter__layout1 .play-btn2:hover i {
   color: var(--theme-color);
 }

 .vs-counter__layout1 .title-area {
   margin-bottom: 0;
 }

 .vs-counter__layout1 .title-area .sec-subtitle {
   color: var(--white-color);
   margin-bottom: 6px;
   margin-left: 0;
 }

 .vs-counter__layout1 .title-area .sec-subtitle::before {
   display: none;
 }

 .vs-counter__layout1 .title-area .sec-subtitle::after {
   right: -50px;
   background-color: var(--white-color);
 }

 .vs-counter__layout1 .title-area .sec-title {
   color: var(--white-color);
   font-size: 30px;
   text-transform: uppercase;
   position: relative;
 }

 .vs-counter__inner {
   display: inline-flex;
   align-items: center;
   position: relative;
   max-width: 440px;
   padding: 45px 35px 30px 0px;
 }

 .vs-counter__inner::before {
   content: "";
   position: absolute;
   top: 0%;
   right: 0;
   height: 100%;
   bottom: 0;
   width: 99999px;
   background-color: var(--theme-color);
 }

 .counter-style1 {
   padding-left: 20px;
   padding: 10px;
 }

 .counter-style1 .media-count {
   display: inline-flex;
   align-items: center;
 }

 .counter-style1 .media-title {
   margin-bottom: 0;
 }

 .counter-style1 .media-inner {
   display: inline-flex;
   align-items: center;
   text-align: center;
 }

 .counter-style1 .media-title {
   color: var(--white-color);
   font-family: var(--title-font);
   font-weight: 600;
 }

 .counter-style1 .media-text {
   color: var(--text-color2);
   text-transform: capitalize;
   margin-bottom: 0;
   font-weight: 500;
   line-height: 160%;
 }

 .counter-style1 .count-icon {
   color: var(--white-color);
   font-size: 36px;
   display: inline-block;
   font-weight: 500;
 }

 .counter-style1 .counter-icon {
   margin-right: 15px;
 }

 .counter-layout2 {
   background-color: var(--theme-color);
   overflow: hidden;
   position: relative;
 }

 .counter-layout2 .counter-icon {
   border: 2px dashed var(--white-color);
   border-radius: 50%;
 }

 .counter-layout2 .counter-icon .icon {
   width: 82px;
   height: 82px;
   line-height: 82px;
   border-radius: 50%;
   display: block;
   text-align: center;
   background-color: var(--title-color);
   margin: 3px;
 }

 .counter-layout2 .counter-icon .icon img {
   transition: all 0.2s ease;
 }

 .counter-layout2 .counter-icon:hover .icon img {
   filter: brightness(0) saturate(100%) invert(27%) sepia(92%) saturate(609%) hue-rotate(90deg) brightness(140%) contrast(98%);
 }

 .counter-layout2 .media-title {
   font-size: 40px;
 }

 .counter-layout2 .media-text {
   color: #F1F1F1;
   text-transform: uppercase;
 }

 .counter-layout2 .counter-style1 {
   padding: 100px 0;
 }

 /* Medium Large devices */
 @media (max-width: 1299px) {
   .vs-counter__inner {
     padding: 100px 40px 100px 0px;
   }
 }

 /* Large devices */
 @media (max-width: 1199px) {
   .vs-counter__inner {
     padding: 100px 20px 100px 20px;
   }

   .counter-style1 .media-style {
     text-align: center;
   }
 }

 /* Medium devices */
 @media (max-width: 991px) {
   .counter-style1 {
     padding-left: 0;
   }

   .counter-layout2 .counter-style1 {
     padding: 80px 0;
   }
 }

 /* Small devices */
 @media (max-width: 767px) {
   .vs-counter__inner {
     max-width: 100%;
     width: 100%;
     justify-content: center;
   }

   .vs-counter__inner::before {
     right: -5%;
   }

   .counter-style1 {
     padding-left: 0;
     padding-top: 60px;
     padding-bottom: 60px;
   }

   .counter-style1 .media-style {
     text-align: center;
   }

   .counter-layout2 .counter-icon {
     display: inline-block;
     margin-bottom: 5px;
   }

   .counter-style1 .media-inner {
     display: block;
   }

   .counter-style1 .counter-icon {
     margin-right: 0;
   }

   .counter-style1 .media-counter {
     margin-top: 10px;
   }

   .vs-counter__inner {
     padding: 60px 40px 60px 0px;
   }
 }

 @media (max-width: 399px) {
   .vs-counter__inner {
     display: block;
     padding: 60px 5px 60px 5px;
     justify-content: space-between;
     text-align: center;
   }

   .vs-counter__inner .play-video {
     margin-bottom: 30px;
   }
 }

 /*------------------- 4.15. Testimonial  -------------------*/
 .vs-testi__layout1 {
   position: relative;
   overflow: hidden;
 }

 .vs-testi__layout1 .title-area .sec-subtitle::before {
   background-color: var(--white-color);
 }

 .vs-testi__layout1 .title-area .sec-title {
   font-size: 36px;
 }

 .vs-testi__layout1 .custom-arraw::after {
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 14%;
   height: 2px;
   background-color: var(--theme-color);
 }

 .vs-testi__layout1 .custom-arraw::before {
   content: "";
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 65%;
   height: 2px;
   background-color: var(--theme-color);
 }

 .vs-testi__form1 {
   /* padding: 55px 48px; */
   background-color: var(--theme-color);
   border: 8px solid transparent;
   border-image: linear-gradient(180deg, rgba(4, 42, 47, 0.5242471989) 0%, rgba(255, 255, 255, 0) 50%);
   border-image-slice: 1;
   z-index: 1;
   position: relative;
 }

 .vs-testi__form1 .vs-comment-form img {
   height: 100%;
   width: 100%;
 }

 .vs-testi__form1 .title-area {
   margin-bottom: 32px;
 }

 .vs-testi__form1 .vs-btn {
   width: 100%;
   background-color: var(--title-color);
   border-radius: 6px;
   text-transform: uppercase;
   font-weight: 700;
   padding: 21px 30px;
 }

 .vs-testi__form1 .vs-btn:hover {
   color: var(--white-color);
   background-color: transparent;
   border-color: var(--white-color);
 }

 .vs-testi__inner {
   z-index: 0;
   position: relative;
 }

 .vs-testi__inner .title-area {
   padding-right: 70px;
   margin-bottom: 45px;
 }

 .vs-testi__inner .title-area .sec-title {
   margin-bottom: 25px;
 }

 .vs-testi__inner .title-area .sec-text {
   color: var(--text-color2);
   font-weight: 600;
   text-transform: capitalize;
 }

 .vs-testi__top {
   display: flex;
   align-items: center;
   margin-bottom: 35px;
 }

 .vs-testi__title {
   color: var(--white-color);
   font-size: 20px;
   margin-bottom: 0;
   font-weight: 700;
   text-transform: capitalize;
   line-height: 150%;
 }

 .vs-testi__image {
   max-width: 82px;
   max-height: 82px;
   overflow: hidden;
   border-radius: 50%;
   border: 2px dashed var(--theme-color);
   margin-right: 20px;
 }

 .vs-testi__image img {
   width: 100%;
   border-radius: 50%;
   background-color: var(--theme-color);
 }

 .vs-testi__text {
   color: var(--text-color2);
   font-weight: 600;
   margin-bottom: 0;
   text-transform: capitalize;
 }

 .vs-testi__icon i {
   color: var(--theme-color);
   font-size: 40px;
   font-weight: 700;
   position: absolute;
   right: 40px;
   top: 50px;
 }

 .vs-testi__style1 {
   background-color: #0B3C43;
   padding: 55px 40px 55px 0px;
   position: relative;
 }

 .vs-testi__items {
   position: relative;
 }

 .vs-testi__items::after {
   content: "";
   position: absolute;
   left: -77%;
   bottom: 0;
   width: 177%;
   height: 100%;
   background-color: #0B3C43;
   z-index: -1;
 }

 .custom-arraw {
   position: absolute;
   bottom: -80px;
   display: block;
   width: 100%;
   text-align: left;
 }

 .custom-arraw .slick-prev {
   left: 25%;
   position: relative;
 }

 .custom-arraw .slick-next {
   left: 8%;
   position: relative;
 }

 .star-rating {
   display: inline-flex;
 }

 .star-rating i {
   color: var(--theme-color);
 }

 .testi-layout3 {
   background-color: #FAFDF9;
   overflow: hidden;
   position: relative;
 }

 .testi-layout3 .video-box {
   margin-left: 65px;
 }

 .testi-layout3 .title-area .sec-title {
   color: var(--title-color);
 }

 .testi-layout3 .custom-arraw {
   display: inline-flex;
 }

 .testi-layout3 .vs-testi__author .vs-testi__title {
   color: var(--title-color);
 }

 .testi-layout3 .title-inner {
   display: inline-flex;
   align-items: end;
   justify-content: space-between;
   width: 100%;
   margin-bottom: 28px;
 }

 .testi-layout3 .title-area {
   margin-bottom: 0;
 }

 .testi-layout3 .custom-arraw {
   margin-bottom: 0;
 }

 .testi-layout3 .arraw-style1 {
   position: relative;
   top: -10px;
 }

 .testi-layout3 .testi-items .testi-text {
   font-weight: 600;
   text-transform: capitalize;
   margin-bottom: 35px;
   padding-right: 50px;
 }

 .testi-layout3 .vs-testi__top {
   position: relative;
 }

 .testi-layout3 .vs-testi__top .quote-icon {
   position: absolute;
   right: 0;
   bottom: 0;
   bottom: -15px;
 }

 .testi-layout3 .testi-body {
   padding-left: 25px;
 }

 .testi-layout3 .testi-bg {
   right: 56.5%;
   top: 0;
   height: 100%;
 }

 .testi-layout3 .testi-bg img {
   width: 100%;
   height: 100%;
 }

 .testi-layout3::after {
   content: "";
   position: absolute;
   top: 0;
   right: 16%;
   width: 20px;
   height: 57px;
   background-color: var(--theme-color);
 }

 .quote-icon {
   font-size: 80px;
   color: rgba(123, 123, 123, 0.137254902);
 }

 .testi-layout2 {
   transform: translateY(-120px);
   position: relative;
   z-index: 1;
 }

 .testi-bg {
   position: absolute;
   clip-path: polygon(0 0, 100% 0%, 98% 100%, 0% 100%);
 }

 .testi-bg::before {
   content: "";
   position: absolute;
   right: 0;
   top: 0;
   width: 10px;
   height: 100%;
   background: var(--theme-color);
   z-index: 1;
 }

 .testi-bg::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   background: rgb(16, 156, 61);
   background: linear-gradient(180deg, rgba(0, 26, 8, 0.23) 0%, rgba(0, 0, 0, 0.41) 100%);
 }

 .testi-style2 {
   background-color: var(--title-color);
   border-radius: 20px;
   overflow: hidden;
   position: relative;
   max-height: 500px;
 }

 .testi-style2 .testi-content {
   padding: 68px 0px 68px 90px;
 }

 .testi-style2 .testi-content .testi-text {
   font-size: 24px;
   font-weight: 500;
   color: var(--white-color);
   text-transform: capitalize;
   font-style: italic;
   margin-bottom: 25px;
 }

 .testi-style2 .border-icon {
   margin-bottom: 38px;
 }

 .testi-style2 .title-area .sec-subtitle {
   color: var(--white-color);
 }

 .testi-style2 .title-area .desi {
   color: var(--theme-color);
   font-size: 16px;
   font-weight: 700;
   text-transform: capitalize;
 }

 .testi-style2 .slick-dots {
   position: absolute;
   top: 50%;
   margin: 0;
   right: -97%;
   transform: translateY(-50%);
 }

 .testi-style2 .slick-dots li {
   display: block;
   margin-right: 0;
 }

 .testi-style2 .slick-dots li:not(:last-child) {
   margin-bottom: 8px;
 }

 .testi-style2 .slick-dots li button {
   width: 8px;
   height: 36px;
 }

 .testi-style2 .testi-img {
   position: relative;
   z-index: 0;
 }

 .testi-style2 .testi-items {
   z-index: 1;
   position: relative;
 }

 .border-icon {
   display: inline-block;
   border: 2px dashed var(--theme-color);
   border-radius: 50%;
 }

 .border-icon .icon {
   width: 82px;
   height: 82px;
   line-height: 82px;
   border-radius: 50%;
   display: block;
   text-align: center;
   background-color: var(--theme-color);
   margin: 2px;
   color: var(--white-color);
   font-size: 35px;
 }

 @media (max-width: 1920px) {
   .testi-layout3 .testi-bg {
     height: 100%;
   }

   .testi-layout3 .testi-bg img {
     height: 100%;
   }
 }

 @media (max-width: 1500px) {
   .testi-layout3 {
     background-color: var(--title-color);
   }

   .testi-layout3 .testi-bg {
     display: none;
   }

   .testi-layout3 .title-area .sec-title {
     color: var(--white-color);
   }

   .testi-layout3 .testi-text {
     color: var(--white-color);
   }

   .testi-layout3 .icon-btn2 {
     background-color: var(--theme-color);
   }

   .testi-layout3 .icon-btn2:hover {
     background-color: var(--title-color2);
   }

   .testi-layout3 .custom-arraw .icon-arraw {
     border-color: var(--theme-color);
   }

   .testi-layout3 .custom-arraw .icon-arraw:hover {
     border-color: var(--title-color2);
   }
 }

 /* Extra large devices */
 @media (max-width: 1300px) {
   .vs-testi__layout1 .custom-arraw .slick-next {
     left: 6%;
     position: relative;
   }
 }

 /* Large devices */
 @media (max-width: 1199px) {
   .testi-layout3 .testi-bg {
     width: 100%;
     bottom: 0;
     left: 0;
     clip-path: unset;
   }

   .testi-layout3 .testi-bg::before {
     display: none;
   }

   .testi-layout3 .testi-bg::after {
     background: rgb(16, 156, 61);
     background: linear-gradient(180deg, rgba(0, 26, 8, 0.61) 0%, rgba(0, 0, 0, 0.83) 100%);
   }

   .testi-layout3 .title-area .sec-title {
     color: var(--white-color);
   }

   .testi-layout3 .vs-testi__author .vs-testi__title {
     color: var(--white-color);
   }

   .testi-layout3 .testi-text {
     color: var(--white-color);
   }

   .vs-testi__layout1 .custom-arraw {
     display: none;
   }

   .vs-testi__style1 {
     padding: 55px 40px 55px 40px;
   }

   .vs-testi__items::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
   }

   .blog-box2 {
     display: flex;
     gap: 30px;
     margin-top: 20px;
   }

   .testi-style2 {
     max-height: 100%;
     text-align: center;
   }

   .testi-style2 .testi-content {
     padding: 80px 30px 0px 30px;
   }
 }

 /* Medium devices */
 @media (max-width: 991px) {
   .testi-layout3 .testi-body {
     padding-left: 0;
   }

   .testi-layout3 .video-box {
     width: 100%;
     margin-bottom: 60px;
     margin-left: 0;
   }

   .testi-layout2 {
     transform: translateY(-80px);
   }
 }

 /* Small devices */
 @media (max-width: 767px) {
   .blog-box2 {
     display: block;
     gap: 30px;
     margin-top: 20px;
   }
 }

 /* Extra small devices */
 @media (max-width: 575px) {
   /* .vs-testi__form1 {
    padding: 30px 15px;
  } */

   .vs-testi__form1 .vs-btn {
     text-transform: capitalize;
     padding: 20px;
   }
 }

 /*------------------- 4.16. categorie  -------------------*/
 .categorie-style1 {
   text-align: center;
 }

 .categorie-style1 .categorie-img {
   background-color: #FFF7CC;
   border-radius: 50%;
   padding: 30px;
   width: 230px;
   height: 230px;
   line-height: 170px;
   margin: 0 auto 25px auto;
   transition: all 0.5s ease;
 }

 .categorie-style1 .categorie-content .categorie-title {
   margin-bottom: 0;
 }

 .categorie-style1 .categorie-content .categorie-title a {
   color: var(--black-color);
 }

 .categorie-style1 .categorie-content .categorie-title a:hover {
   color: var(--secondary-color);
 }

 .categorie-style1 .categorie-content .categorie-text {
   margin-bottom: 0;
 }

 .categorie-style1:hover .categorie-img {
   background-color: var(--theme-color);
 }

 .categorie-style2 {
   position: relative;
   overflow: hidden;
   margin-bottom: 30px;
 }

 .categorie-style2::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5568627451);
 }

 .categorie-style2 .categorie-img img {
   width: 100%;
 }

 .categorie-style2 .categorie-content {
   position: absolute;
   left: 30px;
   bottom: 20px;
 }

 .categorie-style2 .categorie-content .categorie-title {
   margin-bottom: 3px;
 }

 .categorie-style2 .categorie-content .categorie-title a {
   color: var(--white-color);
 }

 .categorie-style2 .categorie-content .categorie-title a:hover {
   color: var(--theme-color);
 }

 .categorie-style2 .categorie-content .categorie-text {
   color: var(--white-color);
   margin-bottom: 0;
 }

 .categorie-style2 .title-area {
   margin-bottom: 30px;
 }

 .categorie-layout2 {
   padding-bottom: 90px;
 }

 .categorie-layout2 .title-left {
   color: var(--secondary-color);
   font-weight: 600;
   width: 100%;
 }

 .categorie-layout2 .title-link {
   display: inline-block;
   width: 100%;
   text-align: right;
 }

 .categorie-layout2 .title-link a {
   color: var(--black-color);
   font-weight: 600;
   border-bottom: 2px solid var(--theme-color);
   transition: all 0.5s ease;
 }

 .categorie-layout2 .title-link a:hover {
   color: var(--secondary-color);
   border-color: var(--secondary-color);
 }

 .categorie-layout2 .title-link a i {
   margin-left: 5px;
   position: relative;
   top: 2px;
 }

 /* Large devices */
 @media (max-width: 1199px) {
   .categorie-style1 .categorie-img {
     width: 200px;
     height: 200px;
     line-height: 130px;
   }
 }

 /* Medium devices */
 @media (max-width: 991px) {
   .categorie-layout2 {
     padding-bottom: 60px;
   }

   .categorie-layout2 .title-left {
     text-align: center;
   }

   .categorie-layout2 .title-link {
     text-align: center;
   }
 }

 /* Small devices */
 @media (max-width: 767px) {
   .title-area .sec-title {
     font-size: 32px;
   }
 }

 /* Extra small devices */
 @media (max-width: 575px) {
   .categorie-layout2 .title-area .sec-title {
     font-size: 28px;
   }

   .categorie-layout2 .title-link a {
     font-size: 14px;
   }
 }

 /*------------------- 4.17. Team  -------------------*/
 .vs-team__layout1 {
   position: relative;
 }

 .vs-team__style1 {
   position: relative;
 }

 .vs-team__style1:hover .vs-team__img img {
   transform: scale(1.1);
 }

 .vs-team__social--media {
   position: absolute;
   left: 0;
   bottom: -1px;
   padding: 60px 20px 25px;
   position: absolute;
   background-color: var(--theme-color);
   clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%);
 }

 .vs-team__social--media a {
   display: block;
   color: var(--white-color);
   text-align: center;
   transition: all 0.4s ease;
 }

 .vs-team__social--media a:hover {
   color: var(--title-color);
 }

 .vs-team__social--media a:not(:last-child) {
   margin-bottom: 12px;
 }

 .vs-team__img {
   position: relative;
   margin-bottom: 5px;
   border-radius: 20px;
   overflow: hidden;
   /* background-color: #124349; */
   /* border-bottom: 5px solid var(--theme-color); */
   width: 100%;
   text-align: center;
   padding: 10px;
 }

 .vs-team__img img {
   transform: scale(1);
   transition: all 0.5s ease;
 }

 .vs-team__content {
   text-align: center;
 }

 .vs-team__title {
   font-size: 18px;
   text-transform: capitalize;
   line-height: 145%;
   margin-bottom: 4px;
 }

 .vs-team__title a {
   color: var(--title-color);
 }

 .vs-team__title a:hover {
   color: var(--theme-color);
 }

 .vs-team__subtitle {
   color: var(--theme-color);
   font-weight: 600;
   font-family: var(--title-font);
   margin-bottom: 0;
   line-height: initial;
   font-size: 16px;
 }

 .team-details .team-img {
   background-color: var(--title-color);
   border-radius: 15px;
   overflow: hidden;
   border-bottom: 5px solid var(--theme-color);
 }

 .team-details .team-top {
   display: flex;
   align-items: start;
   justify-content: space-between;
   border-bottom: 1px solid var(--border-color);
   position: relative;
   margin-bottom: 45px;
 }

 .team-details .team-top::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 1px;
   width: 100%;
   height: 1px;
   background-color: var(--border-color);
   z-index: -1;
 }

 .team-details .title-area {
   margin-bottom: 0;
 }

 .team-details .title-area .team-title {
   text-transform: capitalize;
   margin-bottom: 0;
   font-size: 36px;
   line-height: 128%;
 }

 .team-details .title-area .team-degi {
   font-size: 16px;
   text-transform: capitalize;
   color: var(--theme-color);
   font-weight: 600;
   font-family: var(--title-font);
 }

 .team-details .social-style1 {
   background-color: var(--theme-color);
   padding: 25px 20px 25px 70px;
   clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
 }

 .team-details .social-style1 a {
   width: 40px;
   height: 40px;
   line-height: 40px;
   background-color: var(--white-color);
   color: var(--theme-color);
 }

 .team-details .team-text {
   font-weight: 500;
   text-transform: capitalize;
 }

 .team-details .sec-title {
   font-size: 36px;
   font-weight: 600;
   text-transform: capitalize;
   line-height: 128%;
 }

 .team-details .sec-title .title-highlight {
   display: inline-block;
   color: var(--theme-color);
 }

 .team-details .icon-area {
   display: flex;
   align-items: center;
 }

 .team-details .icon-area .icon {
   margin-right: 15px;
 }

 .team-details .icon-box .team-title {
   font-size: 22px;
   font-weight: 600;
 }

 .team-details .icon-box .title-area {
   border-bottom: 2px solid var(--border-color);
   padding-bottom: 20px;
   margin-bottom: 10px;
 }

 .team-contact-list {
   padding-left: 0;
   margin-bottom: 30px;
 }

 .team-contact-list li {
   position: relative;
   color: var(--title-color);
   font-size: 18px;
   font-weight: 500;
   line-height: 32px;
   display: flex;
 }

 .team-contact-list li:not(:last-child) {
   margin-bottom: 8px;
 }

 .team-contact-list sub {
   display: inline-block;
   width: 210px;
   font-size: 16px;
   font-weight: 700;
   margin-top: 10px;
   font-family: var(--title-font);
   color: var(--title-color);
   text-transform: uppercase;
 }

 .team-contact-list span {
   font-weight: 500;
   font-size: 16px;
   color: var(--text-color);
 }

 .progress-box {
   margin: 0 0 25px 0;
 }

 .progress-box__number,
 .progress-box__title {
   font-size: 20px;
   font-weight: 600;
   line-height: 1;
   font-family: var(--title-font);
   color: var(--title-color);
   display: inline-block;
   margin: 0 0 11px 0;
 }

 .progress-box__number {
   float: right;
   margin: 5px 0 0 0;
 }

 .progress-box__progress {
   height: 10px;
   border-radius: 30px;
   background-color: #CDD8D9;
 }

 .progress-box__bar {
   height: 100%;
   background-color: var(--theme-color);
   box-shadow: 0px 10px 31px rgba(169, 177, 193, 0.17);
   border-radius: 30px;
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-size: 1rem 1rem;
 }

 .progress-box.style2 .progress-box__title,
 .progress-box.style2 .progress-box__number {
   color: var(--body-color);
   font-weight: 400;
   font-family: var(--body-font);
 }

 .progress-box.style2 .progress-box__progress,
 .progress-box.style2 .progress-box__bar {
   border-radius: 0;
 }

 .progress-box.style2:last-child {
   margin-bottom: 0;
 }

 /* Extra small devices */
 @media (max-width: 575px) {
   .team-details .title-area {
     margin-bottom: 30px;
   }

   .team-details .team-top {
     display: block;
     text-align: center;
     border: none;
   }

   .team-details .team-top::after {
     display: none;
   }
 }

 /*------------------- 4.18. Faq  -------------------*/
 .accordion-style1 {
   position: relative;
   height: 455px;
   max-height: 100%;
   z-index: 1;
   padding-top: 8px;
 }

 .accordion-style1 .accordion-button {
   padding: 18px 52px 18px 34px;
   font-size: 20px;
   text-align: left;
   font-family: var(--title-font);
   font-weight: 600;
   line-height: 150%;
   position: relative;
   max-width: 100%;
   color: var(--title-color);
   text-transform: capitalize;
   background-color: var(--white-color);
   outline: none;
   box-shadow: none;
   border-radius: 10px;
 }

 .accordion-style1 .accordion-button.collapsed {
   border: 2px solid #E0E0E0;
 }

 .accordion-style1 .accordion-button.collapsed .number {
   background-color: var(--title-color);
   color: var(--white-color);
 }

 .accordion-style1 .accordion-button::before {
   content: "\f067";
   font-family: var(--icon-font);
   position: absolute;
   right: 30px;
   top: 50%;
   line-height: initial;
   transform: translateY(-50%);
   color: var(--theme-color);
   text-align: center;
   font-size: 16px;
   font-weight: 700;
   transition: all ease 0.4s;
 }

 .accordion-style1 .accordion-button:hover::before {
   color: var(--title-color);
 }

 .accordion-style1 .accordion-button:hover:not(.collapsed):before {
   color: var(--white-color);
 }

 .accordion-style1 .accordion-button::after {
   display: none;
 }

 .accordion-style1 .accordion-button:not(.collapsed) {
   color: var(--white-color);
   background-color: var(--theme-color);
   border-radius: 10px 10px 0 0;
   border: 2px solid transparent;
 }

 .accordion-style1 .accordion-button:not(.collapsed):before {
   content: "\f068";
   color: var(--white-color);
 }

 .accordion-style1 .accordion-body {
   padding: 24px 30px;
   border-left: 2px solid #E0E0E0;
   border-right: 2px solid #E0E0E0;
   border-bottom: 2px solid #E0E0E0;
   border-radius: 0 0 10px 10px;
 }

 .accordion-style1 .accordion-body p {
   font-family: var(--body-font);
   font-size: 16px;
   font-weight: 500;
   margin-bottom: 0;
   text-transform: capitalize;
   line-height: 170%;
 }

 .accordion-style1 .accordion-item {
   border-bottom: none;
   background-color: var(--white-color);
   border-radius: 10px;
   box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.17);
 }

 .accordion-style1 .accordion-item:not(:last-child) {
   margin: 0 0 12px 0;
 }

 .accordion-style1 .accordion-collapse {
   border: none;
 }

 .accordion-style1.layout2 .accordion-button {
   max-width: 100%;
 }

 .accordion-style1.layout2 .accordion-item {
   padding: 0 0 36px 0;
   margin: 0 0 42px 0;
   border-color: #ebebeb;
 }

 .accordion-style1.layout2 .accordion-item:last-child {
   padding-bottom: 0;
   margin-bottom: 0;
 }

 .accordion-style1.layout2 .accordion-item:first-child {
   border-top: 1px solid #ebebeb;
   padding-top: 40px;
 }

 .accordion-style1 .accordion-item:last-of-type .accordion-button.collapsed,
 .accordion-style1 .accordion-item:last-of-type .accordion-collapse {
   border-bottom-width: 2px !important;
   border-radius: 10px !important;
 }

 .accordion-item:first-of-type .accordion-button {
   border-top-left-radius: 10px !important;
   border-top-right-radius: 10px !important;
 }

 .faq-layout1 {
   position: relative;
   overflow: hidden;
   background-color: var(--title-color);
 }

 .faq-layout1 .vs-pagination {
   margin-top: 60px;
 }

 .faq-layout1 .faq-btn {
   margin-top: 35px;
 }

 /* Medium devices */
 @media (max-width: 991px) {
   .faq-layout1 .faq-btn {
     margin-top: 0px;
     margin-bottom: 40px;
   }

   .accordion-style1 {
     height: auto;
   }
 }

 /*------------------- 4.19. subscribe  -------------------*/
 .subscribe-style1 {
   background-color: var(--secondary-color);
   padding: 45px 50px;
 }

 .subscribe-style1 .subscribe-inner {
   display: flex;
   align-items: self-start;
 }

 .subscribe-style1 .subscribe-inner .subscribe-icon {
   display: inline-block;
   font-size: 48px;
   margin: 5px 25px 0 0;
   color: var(--theme-color);
 }

 .subscribe-style1 .subscribe-inner .sec-title {
   text-transform: uppercase;
   color: var(--white-color);
   margin-bottom: 0;
 }

 .subscribe-style1 .subscribe-inner .sec-subtitle {
   font-size: 18px;
   color: var(--white-color);
 }

 .subscribe-style1 .subscribe-img {
   position: absolute;
   right: 0;
   transform: translateY(-60%);
 }

 .subscribe-style1 .newsletter-form {
   margin-left: 50px;
 }

 .subscribe-style1 .newsletter-form .search-btn {
   border-radius: 50px;
   background-color: var(--white-color);
   overflow: hidden;
   position: relative;
   display: flex;
   align-items: center;
   padding: 5px;
 }

 .subscribe-style1 .newsletter-form .search-btn input {
   font-weight: 600;
   font-size: 16px;
   border: none;
 }

 .subscribe-style1 .newsletter-form .search-btn .vs-btn {
   background-color: var(--theme-color);
 }

 .subscribe-style1 .newsletter-form .search-btn .vs-btn:hover {
   background-color: var(--secondary-color);
 }

 /* Medium devices */
 @media (max-width: 991px) {
   .subscribe-style1 {
     padding: 45px 20px;
   }

   .subscribe-style1 .newsletter-form {
     margin-left: 0px;
   }

   .subscribe-style1 .subscribe-img {
     display: none;
   }

   .subscribe-layout1 {
     transform: translateY(28%);
   }
 }

 /* Small devices */
 @media (max-width: 767px) {
   .subscribe-inner .sec-title {
     font-size: 24px;
   }

   .subscribe-style1 {
     padding: 45px 0px;
   }

   .newsletter-form .search-btn .form-control {
     padding: 0 10px 0 10px;
   }

   .subscribe-style1 .newsletter-form .search-btn .vs-btn {
     padding: 14px 12px;
   }
 }

 /*------------------- 4.20. contact -------------------*/
 .map {
   margin-top: 100px;
   -webkit-filter: grayscale(100%);
 }

 .team-layout2 {
   background: rgb(215, 214, 214);
   background: linear-gradient(183deg, rgba(215, 214, 214, 0) 0%, rgba(14, 122, 49, 0.0788690476) 100%);
   position: relative;
 }

 .contact-style1 .contact-icon {
   max-width: 78px;
   width: 100%;
   height: 78px;
   background-color: var(--theme-color);
   border: 4px solid rgba(255, 255, 255, 0.349);
   border-radius: 50%;
   text-align: center;
   line-height: 78px;
   margin-right: 16px;
   z-index: 1;
   transition: all 0.5s ease;
 }

 .contact-style1 .contact-icon i {
   font-size: 24px;
   color: var(--white-color);
   font-weight: 500;
 }

 .contact-style1 .contact-icon:hover {
   background-color: var(--title-color);
 }

 .contact-style1 .contact-box:not(:last-child) {
   margin-bottom: 15px;
 }

 .contact-style1 .contact-box .contact-title {
   font-size: 16px;
   text-transform: uppercase;
   font-weight: 700;
   line-height: 160%;
 }

 .contact-style1 .contact-box .contact-text {
   color: var(--text-color);
   font-size: 16px;
   text-transform: uppercase;
   font-weight: 600;
   line-height: 160%;
   margin-bottom: 0;
 }

 .contact-style1 .contact-inner {
   padding: 0;
   /* border-bottom: 2px dashed rgba(156, 155, 155, 0.4509803922); */
   padding-bottom: 35px;
   margin-bottom: 25px;
 }

 .contact-style1 .title-area {
   margin-bottom: 20px;
 }

 .contact-address {
   display: inline-block;
   margin-bottom: 25px;
   font-size: 15px;
   max-width: 40ch;
 }

 .contact-address span {
   color: var(--theme-color);
   font-family: var(--body-font);
   text-transform: uppercase;
   font-weight: 700;
 }

 .contact-address .address {
   font-family: var(--body-font);
   font-size: 15px;
   color: var(--text-color);
   font-weight: 600;
   text-transform: capitalize;
 }

 .social-style2 {
   display: inline-flex;
 }

 .social-style2 .social-title {
   font-weight: 700;
   font-size: 16px;
   text-transform: uppercase;
   color: var(--title-color);
   margin-right: 15px;
 }

 .social-style2 .social-icon a {
   font-size: 15px;
   color: var(--text-color);
 }

 .social-style2 .social-icon a:not(:last-child) {
   margin-right: 14px;
 }

 .social-style2 .social-icon a:hover {
   color: var(--theme-color);
 }

 .form-style2 .vs-comment-form {
   border: none;
 }

 .form-style2 select,
 .form-style2 .form-control,
 .form-style2 .form-select,
 .form-style2 textarea,
 .form-style2 input {
   background-color: #EEF1F2;
   height: 70px;
   border-radius: 10px;
 }

 .form-style2 select:focus,
 .form-style2 .form-control:focus,
 .form-style2 .form-select:focus,
 .form-style2 textarea:focus,
 .form-style2 input:focus {
   border-color: var(--theme-color);
 }

 .form-style2 .vs-btn {
   padding: 21px 47px;
 }

 /*------------------- 4.21. client -------------------*/
 .vs-client__inner {
   display: inline-flex;
   align-items: center;
 }

 .vs-client__inner .author-img {
   margin-right: 17px;
 }

 .vs-client__subtitle {
   font-size: 22px;
   font-weight: 600;
   color: var(--theme-color);
 }

 .vs-client__text {
   font-size: 22px;
   color: var(--white-color);
   margin-bottom: 0;
   font-weight: 600;
 }

 .vs-client__layout1 {
   position: relative;
   margin-top: 200px;
   margin-left: 50px;
   margin-right: 50px;
   border-radius: 150px;
 }

 @media (max-width: 768px) {
   .vs-client__layout1 {
     margin-top: 100px;
     margin-left: 10px;
     margin-right: 10px;
     border-radius: 80px;
   }
 }

 .vs-client__layout1 .title-area {
   margin-bottom: 20px;
 }

 .vs-client__layout1::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 16%;
   width: 99px;
   height: 10px;
   background-color: var(--theme-color);
 }

 .vs-client__brand {
   padding: 40px;
   background-color: var(--title-color);
   border: 2px solid #0D444B;
   text-align: center;
   transition: all 0.5s ease;
 }

 .vs-client__brand img {
   text-align: center;
   margin: 0 auto;
 }

 .vs-client__brand:hover {
   background-color: var(--theme-color);
 }

 .video-style1 {
   padding: 40px 0 0px;
   transform: translateY(-120px);
   border: 8px solid transparent;
   /* border-image: linear-gradient(4deg, rgb(16, 156, 61) 0%, rgba(255, 255, 255, 0) 70%); */
   border-image-slice: 1;
   z-index: 1;
   position: relative;
   margin: 0px 100px;
   background-color: #063A41;
   border-bottom-left-radius: 150px;
   border-bottom-right-radius: 150px;
 }

 @media (max-width: 768px) {
   .video-style1 {
     margin: 0px 0px;
   }
 }

 .video-style1.background-image {
   background-size: auto !important;
 }

 .video-style1 .title-area .sec-title {
   color: var(--white-color);
   text-transform: uppercase;
   margin-bottom: 20px;
 }

 .video-style1 .video-area {
   margin-bottom: 30px;
 }

 /* Medium devices */
 @media (max-width: 991px) {
   .video-style1 {
     transform: translateY(-60px);
   }

   .vs-service__layout1 .custome-space-bottom {
     padding-bottom: 40px;
   }
 }

 /*------------------- 4.22. book -------------------*/
 .book-layout1 {
   position: relative;
   overflow: hidden;
 }

 .book-layout1::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(103, 184, 70, 0.12) 100%);
   z-index: -1;
 }

 .book-layout1 .title-text {
   font-size: 18px;
   text-transform: capitalize;
   font-weight: 600;
   height: 80px;
   line-height: 80px;
 }

 .book-layout1 .title-text a {
   color: var(--title-color);
   font-weight: 700;
   transition: all 0.5s ease;
 }

 .book-layout1 .title-text a:hover {
   color: var(--theme-color);
 }

 .book-layout1 .title-text .icon {
   margin-right: 16px;
 }

 .book-layout1 .vs-comment-form .vs-btn {
   width: 100%;
   border-radius: 6px;
   text-transform: uppercase;
   font-weight: 700;
   margin-top: 12px;
   padding: 22px 30px;
 }

 .book-layout1 .book-img {
   text-align: right;
   margin-right: 50px;
 }

 .book-layout1 .book-bg {
   max-width: 100%;
   height: 100%;
   clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 0% 100%);
   top: 0;
   left: 56%;
 }

 .book-layout1 .book-bg::before {
   content: "";
   position: absolute;
   left: -7px;
   top: -35px;
   width: 11%;
   height: 100%;
   background: rgb(16, 156, 61);
   z-index: 1;
   transform: rotate(-167deg);
 }

 .book-layout1 .book-bg::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   background: rgb(16, 156, 61);
   background: linear-gradient(180deg, rgba(0, 26, 8, 0.23) 0%, rgba(0, 0, 0, 0.41) 100%);
 }

 .book-layout1 .book-bg img {
   width: 100%;
   height: 100%;
   max-width: 100%;
   max-height: 875px;
   position: relative;
 }

 .video-box {
   z-index: 1;
   position: relative;
   text-align: center;
   display: inline-block;
 }

 .video-box .video-title {
   color: var(--white-color);
   font-family: var(--title-font2);
   font-weight: 700;
   margin-bottom: 30px;
 }

 .vs-comment-form.style2 {
   margin-top: 38px;
 }

 .vs-comment-form.style2 select,
 .vs-comment-form.style2 .form-control,
 .vs-comment-form.style2 .form-select,
 .vs-comment-form.style2 textarea,
 .vs-comment-form.style2 input {
   background-color: #E6EDE7;
   border-color: #CDD7D1;
   position: relative;
 }

 .vs-comment-form.style2 select:focus,
 .vs-comment-form.style2 .form-control:focus,
 .vs-comment-form.style2 .form-select:focus,
 .vs-comment-form.style2 textarea:focus,
 .vs-comment-form.style2 input:focus {
   border-right: 5px solid var(--theme-color);
 }

 @media (max-width: 1800px) {
   .book-shape {
     display: none;
   }

   .book-layout1 {
     background-color: var(--title-color);
   }

   .book-layout1 .book-img {
     text-align: center;
     margin-right: 50px;
   }

   .book-layout1 .title-area .sec-title {
     color: var(--white-color);
   }

   .book-layout1 .title-text {
     color: var(--white-color);
   }
 }

 @media (max-width: 1500px) {
   .book-layout1 .book-img {
     text-align: center;
     margin-right: 50px;
   }
 }

 /* Medium Large devices */
 @media (max-width: 1299px) {
   .book-layout1 .title-area {
     color: var(--white-color);
   }

   .book-layout1 .title-area .sec-subtitle {
     color: var(--white-color);
   }

   .book-layout1 .title-area .sec-subtitle::before {
     background-color: var(--white-color);
   }

   .book-layout1 .title-area .sec-title {
     color: var(--white-color);
   }

   .book-layout1 .book-bg {
     clip-path: unset;
     top: 0;
     left: 0;
     width: 100%;
   }

   .book-layout1 .book-bg::before {
     display: none;
   }

   .book-layout1 .book-bg img {
     max-height: 100%;
     height: 100%;
   }

   .book-layout1 .book-img {
     text-align: center;
     margin-right: 0;
     margin-top: 60px;
   }

   .book-layout1 .title-text {
     height: auto;
     line-height: initial;
     color: var(--white-color);
   }

   .book-layout1 .title-text a {
     display: block;
     color: var(--white-color);
   }
 }

 /* Medium devices */
 @media (max-width: 991px) {
   .book-img .play-btn {
     --icon-size: 104px;
   }
 }

 /* Small devices */
 @media (max-width: 767px) {
   .book-layout1 {
     background-color: var(--title-color);
   }
 }

 /*------------------- 4.23. newsletter -------------------*/
 .newsletter-style1 {
   text-align: center;
   border-radius: 20px;
   background: rgb(23, 167, 191);
   background: linear-gradient(266deg, rgb(23, 167, 191) 0%, rgb(16, 156, 61) 100%);
   padding: 50px 50px 80px 50px;
   position: relative;
   overflow: hidden;
 }

 .newsletter-style1 .newsletter-title {
   color: var(--white-color);
   text-transform: uppercase;
   font-size: 40px;
   font-weight: 500;
   margin-bottom: 4px;
 }

 .newsletter-style1 .newsletter-text {
   color: var(--white-color);
 }

 .newsletter-style1 .newsletter-text {
   font-size: 18px;
   font-weight: 500;
 }

 .newsletter-style1 .title-area {
   margin-bottom: 30px;
 }

 .newsletter-style1 .newsletter-form {
   position: relative;
   z-index: 1;
 }

 .search-btn {
   position: relative;
 }

 .search-btn .form-control {
   height: 70px;
   border-radius: 50px;
   padding: 0 45px 0 30px;
 }

 .search-btn .form-control::placeholder {
   text-transform: capitalize;
   color: #97969A;
 }

 .search-btn .vs-btn {
   position: absolute;
   line-height: 160%;
   right: 5px;
   top: 50%;
   padding: 16px 50px;
   font-size: 16px;
   font-weight: 700;
   max-height: 65px;
   text-transform: uppercase;
   transform: translateY(-50%);
   background-color: var(--theme-color);
 }

 .search-btn .vs-btn:hover {
   color: var(--white-color);
   background-color: var(--title-color);
   border-color: var(--title-color);
 }

 .footer-layout1 .newsletter {
   position: absolute;
   width: 100%;
   top: -32%;
 }

 /* Medium Large devices */
 @media (max-width: 1299px) {
   .footer-layout1 .newsletter {
     position: relative;
     top: auto;
     padding-bottom: 80px;
   }

   .footer-layout1 .extra-space-top {
     padding-top: 120px;
   }
 }

 /* Medium devices */
 @media (max-width: 991px) {
   .footer-layout1 .newsletter {
     padding-bottom: 40px;
   }

   .footer-layout1 .extra-space-top {
     padding-top: 80px;
   }

   .search-btn .vs-btn {
     padding: 16px 30px;
   }
 }

 /* Extra small devices */
 @media (max-width: 575px) {
   .search-btn .form-control {
     height: 55px;
   }

   .search-btn .form-control::placeholder {
     text-transform: capitalize;
     color: #97969A;
     font-size: 12px;
   }

   .search-btn .vs-btn {
     position: relative;
     transform: unset;
     color: var(--title-color);
     background-color: var(--white-color);
     margin-top: 15px;
   }
 }

 /*------------------- 4.24. portfolio -------------------*/
 .portfolio-style1 {
   position: relative;
   overflow: hidden;
   border-radius: 15px;
 }

 .portfolio-style1:not(:last-child) {
   margin-bottom: 20px;
 }

 .portfolio-style1 .portfolio-img {
   position: relative;
   border-radius: 15px;
   overflow: hidden;
 }

 .portfolio-style1 .portfolio-img::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(16, 156, 61, 0.0705882353);
   visibility: visible;
   opacity: 1;
   transition: all 0.5s ease;
 }

 .portfolio-style1 .portfolio-img img {
   width: 100%;
 }

 .portfolio-style1 .portfolio-img .icon {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -100%);
   color: var(--white-color);
 }

 .portfolio-style1 .portfolio-img .icon i {
   color: var(--white-color);
   font-size: 20px;
 }

 .portfolio-style1 .portfolio-content {
   position: absolute;
   bottom: 0;
   background-color: var(--theme-color);
   width: 100%;
   padding: 25px 40px;
   visibility: hidden;
   opacity: 0;
   transition: all 0.5s ease;
 }

 .portfolio-style1 .portfolio-content .portfolio-subtitle {
   margin-bottom: 0;
   color: var(--white-color);
   text-transform: uppercase;
   font-size: 14px;
   font-weight: 600;
   margin-bottom: 5px;
 }

 .portfolio-style1 .portfolio-content .portfolio-title {
   margin-bottom: 0;
   color: var(--white-color);
   font-size: 20px;
   font-weight: 700;
   text-transform: uppercase;
 }

 .portfolio-style1 .portfolio-content .portfolio-title a {
   color: var(--white-color);
 }

 .portfolio-style1 .portfolio-content .portfolio-title a:hover {
   color: var(--title-color);
 }

 .portfolio-style1 .icon-btn {
   width: 75px;
   height: 75px;
   line-height: 80px;
   background-color: var(--theme-color);
   color: var(--white-color);
   visibility: hidden;
   opacity: 0;
   cursor: pointer;
   transition: all 0.5s ease;
 }

 .portfolio-style1 .icon-btn:hover {
   background-color: var(--title-color);
 }

 .portfolio-style1:hover .portfolio-img::before {
   background-color: rgba(6, 58, 65, 0.6784313725);
 }

 .portfolio-style1:hover .portfolio-content {
   visibility: visible;
   opacity: 1;
 }

 .portfolio-style1:hover .icon-btn {
   visibility: visible;
   opacity: 1;
 }

 .portfolio-layout1 .vs-pagination {
   margin-bottom: 0px;
   text-align: center;
   margin-top: 60px;
 }

 .portfolio-Details img {
   border-radius: 10px;
 }

 .portfolio-Details .portfolio-content {
   padding-top: 45px;
 }

 .portfolio-Details .portfolio-title {
   text-transform: capitalize;
   line-height: 128%;
 }

 .portfolio-Details .portfolio-text {
   font-weight: 500;
   text-transform: capitalize;
 }

 .portfolio-Details .play-btn>i {
   width: 96px;
   height: 96px;
   line-height: 96px;
 }

 .portfolio-Details .widget_categories.style2 {
   background-color: #F0F3F4;
   border-radius: 15px;
   overflow: hidden;
 }

 .portfolio-Details .widget_categories.style2 .widget_title {
   background-color: var(--title-color);
   color: var(--white-color);
   padding: 20px 30px;
   text-transform: capitalize;
   font-weight: 700;
   margin-bottom: 0;
 }

 .portfolio-Details .widget_categories.style2 .widget_title::before {
   content: "\f66f";
   font-family: "Font Awesome 6 Pro";
   right: 30px;
   left: unset;
   width: unset;
 }

 .portfolio-Details .widget_categories.style2 .widget_content {
   padding: 30px 35px;
   border-radius: 0 0 15px 15px;
   overflow: hidden;
   border-left: 2px solid var(--border-color);
   border-right: 2px solid var(--border-color);
   border-bottom: 2px solid var(--border-color);
 }

 .portfolio-Details .widget_categories.style2 li a {
   position: relative;
   padding-left: 20px;
   color: var(--title-color);
   font-size: 18px;
   font-weight: 600;
 }

 .portfolio-Details .widget_categories.style2 li a i {
   position: absolute;
   left: 0;
   transform: translateY(40%);
 }

 .portfolio-Details .widget_categories.style2 li a:hover {
   color: var(--theme-color);
 }

 .portfolio-Details .widget_categories.style2 li:last-child a {
   margin: 0;
   padding-bottom: 0;
 }

 .portfolio-Details .widget_categories.style2 li:not(:last-child) a {
   border-bottom: 1px solid var(--border-color);
   padding-bottom: 15px;
 }

 .list-style2 {
   margin-bottom: 0;
   padding: 0;
 }

 .list-style2 li {
   list-style: none;
   margin: 0;
   padding-left: 26px;
   font-size: 16px;
   font-weight: 600;
   color: var(--text-color);
   text-transform: capitalize;
   line-height: 160%;
   position: relative;
 }

 .list-style2 li:not(:last-child) {
   margin-bottom: 8px;
 }

 .list-style2 li i {
   position: absolute;
   left: 0;
   transform: translateY(35%);
   color: var(--theme-color);
   font-size: 18px;
 }

 .play-video {
   position: relative;
   z-index: 1;
 }

 .play-video .play-btn {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }

 .contact-box2 {
   background-color: var(--title-color);
   border-radius: 15px;
   text-align: center;
   padding: 60px 40px;
   border: 2px solid #667B7D;
   box-shadow: 0 -6px 3px -2px var(--theme-color);
 }

 .contact-box2 .portfolio-title {
   color: var(--white-color);
   font-size: 30px;
   font-weight: 600;
   text-transform: capitalize;
   max-width: 12ch;
   margin: 0 auto 20px;
 }
 .portfolio-title{
 font-size: 18px;
 color: #9d3842;
 }

 .contact-box2 .icon-btn {
   display: inline-block;
   background-color: var(--theme-color);
   color: var(--white-color);
   width: 95px;
   height: 95px;
   line-height: 95px;
   margin-bottom: 32px;
 }

 .contact-box2 .icon-btn:hover {
   background-color: var(--title-color2);
 }

 .contact-box2 .contact-title {
   color: var(--white-color);
   font-size: 16px;
   text-transform: capitalize;
   margin-bottom: 2px;
 }

 .contact-box2 .contact-text {
   font-size: 30px;
   font-weight: 600;
 }

 .contact-box2 .contact-text a {
   color: var(--white-color);
 }

 .contact-box2 .contact-text a:hover {
   color: var(--title-color2);
 }

 .contact-box2 .contact-content {
   padding: 0;
 }

 .list-box1 {
   display: flex;
   gap: 30px;
 }

 /* Small devices */
 @media (max-width: 767px) {
   .portfolio-Details .widget_categories.style2 {
     padding: 0;
   }
 }

 /*------------------- 4.25. package -------------------*/
 .package-style1 {
   background-color: #063136;
   border: 2px solid var(--theme-color);
   border-radius: 50px;
   position: relative;
   margin-bottom: 30px;
   transition: all 0.5s ease;
   margin-left: 20px;
   margin-right: 20px;
 }

 .package-style1 .package-top {
   background-color: var(--secondary-color);
   border-bottom: 10px solid var(--theme-color);
   border-radius: 18px 18px 40px 40px;
   padding: 15px 20px 5px 20px;
   transition: all 0.5s ease;
 }

 .package-style1 .package-inner {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 12px;
 }

 .package-style1 .title-area {
   margin-bottom: 0;
 }

 .package-style1 .package-text {
   margin-bottom: 0;
 }

 .package-style1 .package-name {
   font-size: 18px;
   color: var(--white-color);
   margin-bottom: 0;
   text-transform: capitalize;
   line-height: 140%;
   transition: all 0.5s ease;
 }

 .package-style1 .package-text {
   text-transform: uppercase;
   color: var(--theme-color);
   font-size: 14px;
   font-weight: 700;
 }

 .package-style1 .icon-btn3 {
   border-color: var(--theme-color);
 }

 .package-style1 .icon-btn3 .icon {
   width: 72px;
   height: 72px;
   line-height: 72px;
   background-color: var(--theme-color);
 }

 .package-style1 .icon-btn3:hover {
   border-color: var(--title-color);
 }

 .package-style1 .icon-btn3:hover .icon {
   background-color: var(--title-color);
 }

 .package-style1 .package-price {
   font-size: 45px;
   color: var(--white-color);
   font-weight: 600;
   line-height: 122%;
   font-family: var(--title-font);
   margin-bottom: 0;
 }

 .package-style1 .package-price .duration {
   font-size: 15px;
   font-weight: 700;
   color: var(--text-color2);
   transition: all 0.5s ease;
 }

 .package-style1 .list-style1 {
   position: relative;
   padding: 15px;
   border-bottom: 1px solid #2A5053;
 }

 .package-style1 .list-style1::after {
   content: "";
   position: absolute;
   left: 0;
   width: 100%;
   height: 1px;
   bottom: 2px;
   background-color: #2A5053;
 }

 .package-style1 .package-bottom {
   padding: 0px 10px 45px 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 .package-style1 .package-bottom .save-price {
   color: #67B846;
   display: inline-flex;
   font-size: 20px;
   text-transform: capitalize;
   font-weight: 500;
 }

 .package-style1 .package-bottom .save-price strong {
   color: var(--white-color);
   margin-left: 5px;
   font-weight: 600;
 }

 .package-style1 .price-btn {
   position: absolute;
   bottom: -18px;
   left: 65px;
 }

 .package-style1 .vs-btn2 {
   text-transform: capitalize;
   border: 2px solid #65B047;
   padding: 3px 5px 3px 12px;
   background: rgb(23, 167, 191);
   background: linear-gradient(85deg, rgb(23, 167, 191) 0%, rgb(103, 184, 70) 72%);
 }

 .package-style1 .vs-btn2 i {
   width: 25px;
   height: 25px;
 }

 .package-style1 .vs-btn2:hover {
   color: var(--title-color);
   border-color: var(--theme-color);
 }

 .package-style1 .vs-btn2:hover i {
   color: var(--title-color);
   background-color: var(--white-color);
 }

 .package-style1:hover {
   border-color: #67B846;
 }

 .package-style1:hover .package-top {
   background-color: var(--theme-color);
   border-color: #67B846;
 }

 .package-style1:hover .icon-btn3 {
   border-color: var(--title-color);
 }

 .package-style1:hover .icon-btn3 .icon {
   background-color: var(--title-color);
 }

 .package-style1:hover .package-price .duration {
   color: var(--white-color);
 }

 .package-style1:hover .package-name {
   color: var(--white-color);
 }

 .package-layout1 {
   position: relative;
 }

 .list-style1 ul li {
   color: var(--text-color2);
   font-weight: 600;
   text-transform: capitalize;
   font-size: 16px;
   line-height: 160%;
 }

 .list-style1 ul li:last-child {
   margin-bottom: 0;
 }

 /* Extra small devices */
 @media (max-width: 575px) {
   .package-style1 .package-name {
     font-size: 20px;
   }
 }

 /*------------------- 4.26. Simple Sections  -------------------*/
 .social-style1 {
   /* display: inline-flex; */
   align-items: center;
   color: #fff;
 }

 .social-style1 .social-title {
   display: inline-block;
   font-size: 16px;
   font-family: var(--title-font);
   color: var(--white-color);
   position: relative;
   margin-right: 15px;
   padding-right: 14px;
   line-height: 165%;
   font-weight: 600;
 }

 .social-style1 .social-title::before {
   content: "";
   position: absolute;
   right: 0;
   width: 1.5px;
   height: 22px;
   background-color: #ffffff;
   top: 50%;
   transform: translateY(-50%);
 }

 .social-style1 .social-title::after {
   content: "";
   position: absolute;
   right: -2px;
   width: 1px;
   height: 14px;
   background-color: #ffffff;
   top: 50%;
   transform: translateY(-50%);
 }

 .social-style1 a {
   color: var(--white-color);
   font-size: 14px;
   margin-right: 6px;
   width: 36px;
   height: 36px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 30px;
   background-color: var(--theme-color);
 }

 .social-style1 a:last-child {
   margin-right: 0;
 }

 .social-style1 a:hover {
   color: var(--theme-color);
   background-color: var(--white-color);
 }

 /*------------------- 4.27. popupsearch Sections  -------------------*/
 .popup-search-box {
   position: fixed;
   top: 0;
   left: 50%;
   background-color: rgba(0, 0, 0, 0.95);
   height: 0;
   width: 0;
   overflow: hidden;
   z-index: 99999;
   opacity: 0;
   visibility: hidden;
   border-radius: 50%;
   transform: translateX(-50%);
   transition: all ease 0.4s;
 }

 .popup-search-box button.searchClose {
   width: 60px;
   height: 60px;
   line-height: 60px;
   position: absolute;
   top: 40px;
   right: 40px;
   border: none;
   background-color: var(--secondary-color);
   color: var(--white-color);
   font-size: 30px;
   border-radius: 50%;
   transition: all ease 0.4s;
 }

 .popup-search-box button.searchClose i {
   line-height: inherit;
 }

 .popup-search-box button.searchClose:hover {
   color: var(--white-color);
   background-color: var(--theme-color);
 }

 .popup-search-box form {
   position: absolute;
   top: 50%;
   left: 50%;
   display: inline-block;
   padding-bottom: 40px;
   cursor: auto;
   width: 100%;
   max-width: 700px;
   transform: translate(-50%, -50%) scale(0);
   transition: transform ease 0.4s;
   /* Large devices */
 }

 @media (max-width: 1199px) {
   .popup-search-box form {
     max-width: 600px;
   }
 }

 .popup-search-box form input {
   font-size: 14px;
   height: 70px;
   width: 100%;
   border: 2px solid var(--white-color);
   background-color: transparent;
   padding-left: 30px;
   color: #fff;
   border-radius: 50px;
 }

 .popup-search-box form input::-moz-placeholder {
   color: #fff;
 }

 .popup-search-box form input::-webkit-input-placeholder {
   color: #fff;
 }

 .popup-search-box form input:-ms-input-placeholder {
   color: #fff;
 }

 .popup-search-box form input::placeholder {
   color: #fff;
 }

 .popup-search-box form button {
   position: absolute;
   top: 0px;
   background-color: transparent;
   border: none;
   font-size: 20px;
   right: 13px;
   color: var(--white-color);
   cursor: pointer;
   width: 70px;
   height: 70px;
   transition: all ease 0.4s;
   transform: scale(1.001);
 }

 .popup-search-box form button:hover {
   transform: scale(1.1);
 }

 .popup-search-box.show {
   opacity: 1;
   visibility: visible;
   width: 100.1%;
   height: 100%;
   transition: all ease 0.4s;
   border-radius: 0;
 }

 .popup-search-box.show form {
   transition-delay: 0.5s;
   transform: translate(-50%, -50%) scale(1);
 }

 /*------------------- 4.28. Popup Side Menu  -------------------*/
 .sidemenu-wrapper {
   position: fixed;
   z-index: 99999;
   right: 0;
   top: 0;
   height: 100%;
   width: 0;
   background-color: rgba(0, 0, 0, 0.75);
   opacity: 0;
   visibility: hidden;
   transition: all ease 0.8s;
 }

 .sidemenu-wrapper .closeButton {
   display: inline-block;
   border: 1px solid;
   width: 50px;
   height: 50px;
   line-height: 50px;
   font-size: 24px;
   padding: 0;
   position: absolute;
   top: 20px;
   right: 20px;
   background-color: var(--black-color);
   color: var(--white-color);
   border-radius: 50%;
   transform: rotate(0);
   transition: all ease 0.4s;
   z-index: 2;
 }

 .sidemenu-wrapper .closeButton:hover {
   color: var(--white-color);
   background-color: var(--theme-color);
   border-color: transparent;
   transform: rotate(90deg);
 }

 .sidemenu-wrapper .sidemenu-content {
   background-color: var(--white-color);
   width: 450px;
   margin-left: auto;
   padding: 40px 30px 80px 30px;
   height: 100%;
   overflow: scroll;
   position: relative;
   right: -500px;
   cursor: auto;
   transition-delay: 1s;
   transition: right ease 1s;
 }

 .sidemenu-wrapper .sidemenu-content::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1);
   box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1);
   background-color: #F5F5F5;
 }

 .sidemenu-wrapper .sidemenu-content::-webkit-scrollbar {
   width: 2px;
   background-color: #F5F5F5;
 }

 .sidemenu-wrapper .widget {
   padding: 0;
   border: none;
   background-color: transparent;
 }

 .sidemenu-wrapper.show {
   opacity: 1;
   visibility: visible;
   width: 100%;
   transition: all ease 0.8s;
 }

 .sidemenu-wrapper.show .sidemenu-content {
   right: 0;
   opacity: 1;
   visibility: visible;
 }

 .offcanvas-wrapper {
   position: fixed;
   z-index: 99999;
   right: 0;
   top: 0;
   height: 100%;
   width: 0;
   background-color: rgba(0, 0, 0, 0.75);
   opacity: 0;
   visibility: hidden;
   transition: all ease 0.8s;
 }

 .offcanvas-wrapper .closeButton {
   display: inline-block;
   position: absolute;
   top: 20px;
   right: 20px;
   width: 50px;
   height: 50px;
   line-height: 50px;
   font-size: 24px;
   padding: 0;
   background-color: var(--theme-color);
   color: var(--white-color);
   border: none;
   border-radius: 50%;
   transform: rotate(0);
   transition: all ease 0.4s;
   z-index: 33;
 }

 .offcanvas-wrapper .closeButton i {
   line-height: inherit;
 }

 .offcanvas-wrapper .closeButton:hover {
   color: var(--white-color);
   border-color: transparent;
   transform: rotate(90deg);
   background-color: var(--theme-color);
 }

 .offcanvas-wrapper .sidemenu-content {
   background-color: var(--white-color);
   width: 450px;
   margin-left: auto;
   padding: 50px 30px;
   height: 100%;
   overflow: scroll;
   position: relative;
   right: -500px;
   cursor: auto;
   transition-delay: 1s;
   transition: right ease 1s;
 }

 .offcanvas-wrapper .sidemenu-content::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1);
   box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1);
   background-color: #F5F5F5;
 }

 .offcanvas-wrapper .sidemenu-content::-webkit-scrollbar {
   width: 2px;
   background-color: #F5F5F5;
 }

 .offcanvas-wrapper .widget {
   padding: 0;
   border: none;
   background-color: transparent;
   margin-bottom: 50px;
 }

 .offcanvas-wrapper .footer-text {
   max-width: 100%;
 }

 .offcanvas-wrapper.show {
   opacity: 1;
   visibility: visible;
   width: 100%;
   transition: all ease 0.8s;
 }

 .offcanvas-wrapper.show .sidemenu-content {
   right: 0;
   opacity: 1;
   visibility: visible;
 }

 /*------------------- 4.28. Popup Side Menu  -------------------*/
 /*=================================
    05. Spacing
==================================*/
 .pb-30 {
   padding-bottom: 30px;
 }

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

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

 .mt-n1 {
   margin-top: -0.25rem;
 }

 .mt-n2 {
   margin-top: -0.5rem;
 }

 .mt-n3 {
   margin-top: -1rem;
 }

 .mt-n4 {
   margin-top: -1.5rem;
 }

 .mt-n5 {
   margin-top: -3rem;
 }

 .mb-n1 {
   margin-bottom: -0.25rem;
 }

 .mb-n2 {
   margin-bottom: -0.5rem;
 }

 .mb-n3 {
   margin-bottom: -1rem;
 }

 .mb-n4 {
   margin-bottom: -1.5rem;
 }

 .mb-n5 {
   margin-bottom: -3rem;
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 .space,
 .space-top {
   padding-top: var(--section-space);
 }

 .space,
 .space-bottom {
   padding-bottom: var(--section-space);
 }

 .space-extra,
 .space-extra-top {
   padding-top: calc(var(--section-space) - 30px);
 }

 .space-extra,
 .space-extra-bottom {
   padding-bottom: calc(var(--section-space) - 30px);
 }

 .section-title-top {
   padding-top: var(--section-title-space);
 }

 .space-mobile {
   padding-top: var(--section-space-mobile);
   padding-bottom: var(--section-space-mobile);
 }

 .space-mobile-bottom {
   padding-bottom: var(--section-space-mobile);
 }

 .extra-space-bottom {
   padding-bottom: 310px;
 }

 .gap-x-0 {
   --bs-gutter-x: 30px !important;
 }

 /* Medium Large devices */
 @media (max-width: 1299px) {
   .extra-space-bottom {
     padding-bottom: 120px;
   }
 }

 /* Large devices */
 @media (max-width: 1199px) {
   .gap-x-0 {
     --bs-gutter-x: 0 !important;
   }
 }

 /* Medium devices */
 @media (max-width: 991px) {

   .space,
   .space-top {
     padding-top: var(--section-space-mobile);
   }

   .space,
   .space-bottom {
     padding-bottom: var(--section-space-mobile);
   }

   .space-extra,
   .space-extra-top {
     padding-top: calc(var(--section-space-mobile) - 30px);
   }

   .space-extra,
   .space-extra-bottom {
     padding-bottom: calc(var(--section-space-mobile) - 30px);
   }

   .space-top-md-none {
     padding-top: 0;
   }

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

   .space-mobile {
     padding-top: 60px;
     padding-bottom: 60px;
   }

   .space-mobile-bottom {
     padding-bottom: 40px;
   }

   .extra-space-bottom {
     padding-bottom: 80px;
   }
 }
 .pb-50 {
   padding-bottom: 50px;
 }

    /* =========================
   Breadcumb Responsive CSS
========================= */

.breadcumb-wrapper {
    position: relative;
    padding: 100px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.breadcumb-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.z-index-common {
    position: relative;
    z-index: 2;
}

.breadcumb-content {
    text-align: center;
}

.breadcumb-title {
    color: #fff;
    font-size: 35px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.breadcumb-title span {
    color: var(--theme-color);
}

.breadcumb-menu-wrap {
    display: flex;
    /* justify-content: center; */
}

.breadcumb-menu {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
    flex-wrap: wrap;
}

.breadcumb-menu li {
    color: #fff;
    font-size: 16px;
}

.breadcumb-menu li a {
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}

.breadcumb-menu li a:hover {
    color: #ff6b4a;
}

/* =========================
   Tablet Responsive
========================= */
@media (max-width: 991px) {

    .breadcumb-wrapper {
        padding: 80px 0;
    }

    .breadcumb-title {
        font-size: 40px;
    }

    .breadcumb-menu li {
        font-size: 15px;
    }
}

/* =========================
   Mobile Responsive
========================= */
@media (max-width: 767px) {

    .breadcumb-wrapper {
        padding: 60px 0;
    }

    .breadcumb-title {
        font-size: 30px;
        margin-bottom: 15px;
    }

    .breadcumb-menu {
        justify-content: center;
        gap: 8px;
    }

    .breadcumb-menu li {
        font-size: 14px;
    }
}

/* =========================
   Small Mobile Responsive
========================= */
@media (max-width: 480px) {

    .breadcumb-wrapper {
        padding: 50px 0;
    }

    .breadcumb-title {
        font-size: 24px;
    }

    .breadcumb-menu li {
        font-size: 13px;
    }
}

.tea{
  background: linear-gradient(90deg, #942e40 0%, #dc7354 50%, #f9bf1f 100%) !important;
  color: white;
}

.section{
  background: linear-gradient(90deg, #867340 0%, #b57349 50%, #f9bf1f 100%) !important;
   color: white;
}

span{
  color: #942e40;
  font-weight: bold;
}