@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
a, a:hover {
  text-decoration: none;
}

body{
   font-family: "Poppins" !important;
}

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

h2, p {
  margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0;
}

input, textarea {
  background: none;
  border: none;
  outline: none;
}

img {
  max-width: 100%;
  max-height: 100%;
}

.space6 {
  height: 6px;
}

.space8 {
  height: 8px;
}

.space10 {
  height: 10px;
}

.space12 {
  height: 12px;
}

.space14 {
  height: 14px;
}

.space16 {
  height: 16px;
}

.space18 {
  height: 18px;
}

.space20 {
  height: 20px;
}

.space22 {
  height: 22px;
}

.space24 {
  height: 24px;
}

.space26 {
  height: 26px;
}

.space28 {
  height: 28px;
}

.space30 {
  height: 30px;
}

.space32 {
  height: 32px;
}

.space34 {
  height: 34px;
}

.space36 {
  height: 36px;
}

.space38 {
  height: 38px;
}

.space40 {
  height: 40px;
}

.space42 {
  height: 42px;
}

.space44 {
  height: 44px;
}

.space46 {
  height: 46px;
}

.space48 {
  height: 48px;
}

.space50 {
  height: 50px;
}

.space52 {
  height: 52px;
}

.space54 {
  height: 54px;
}

.space56 {
  height: 56px;
}

.space58 {
  height: 58px;
}

.space60 {
  height: 60px;
}

.space62 {
  height: 62px;
}

.space64 {
  height: 64px;
}

.space66 {
  height: 66px;
}

.space68 {
  height: 68px;
}

.space70 {
  height: 70px;
}

.space72 {
  height: 72px;
}

.space74 {
  height: 74px;
}

.space76 {
  height: 76px;
}

.space78 {
  height: 78px;
}

.space80 {
  height: 80px;
}

.space82 {
  height: 82px;
}

.space84 {
  height: 84px;
}

.space86 {
  height: 86px;
}

.space {
  height: 88px;
}

.space90 {
  height: 90px;
}

.space92 {
  height: 92px;
}

.space94 {
  height: 94px;
}

.space96 {
  height: 96px;
}

.space98 {
  height: 98px;
}

.space100 {
  height: 100px;
}

@keyframes animation-1 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(30px);
  }
}
.aniamtion-key-1 {
  position: relative;
  animation-name: animation-1;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes animation-2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(50px);
  }
}
.aniamtion-key-2 {
  position: relative;
  animation-name: animation-2;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes animation-3 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(60px);
  }
}
.aniamtion-key-3 {
  position: relative;
  animation-name: animation-3;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes animation-4 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(40px);
  }
}
.aniamtion-key-4 {
  position: relative;
  animation-name: animation-4;
  animation-duration: 1.6s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes animation-5 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
.aniamtion-key-5 {
  position: relative;
  animation-name: animation-5;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transition: all 0.4s ease-in-out;
}

@keyframes animation-6 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(50px);
  }
}
.aniamtion-key-6 {
  position: relative;
  animation-name: animation-6;
  animation-duration: 1.9s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes animation-7 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-1000deg);
  }
}
.keyframe5 {
  position: relative;
  animation-name: animation-7;
  animation-duration: 90s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(0.59, 0.59, 1, 1);
}

@keyframes animation-8 {
  0% {
    padding-left: 0px;
  }
  100% {
    padding-left: 50px;
  }
}
.aniamtion-key-7 {
  position: relative;
  animation-name: animation-8;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes fade-in-down {
  0% {
    transform: translate3d(0, -50px, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}
.pulse-border {
  position: relative;
  animation-name: pulse-border;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translatex(-100%);
  }
}
@keyframes marquee-2 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translatex(0);
  }
}
:root {
  --ztc-text-text-1: #fff;
  --ztc-text-text-2: #061D19;
  --ztc-text-text-3: #333535;
  --ztc-text-text-4: #6E9419;
  --ztc-text-text-5: #0C3A30;
  --ztc-text-text-6: #9EDD05;
  --ztc-text-text-7: #50514E;
  --ztc-text-text-8: #032530;
  --ztc-text-text-9: #F4D445;
  --ztc-text-text-10: #484F51;
  --ztc-text-text-11: #100235;
  --ztc-text-text-12: #3D3D42;
  --ztc-text-text-13: #2E0797;
  --ztc-text-text-14: #0D0E1F;
  --ztc-text-text-15: #5A5B5B;
  --ztc-text-text-16: #FB8500;
  --ztc-bg-bg-1: #fff;
  --ztc-bg-bg-2: #061D19;
  --ztc-bg-bg-3: #6E9419;
  --ztc-bg-bg-4: #0C3A30;
  --ztc-bg-bg-5: #9EDD05;
  --ztc-bg-bg-6: #032530;
  --ztc-bg-bg-7: #F4D445;
  --ztc-bg-bg-8: #100235;
  --ztc-bg-bg-9: var(--04-home-page-maincolors, linear-gradient(90deg, #2E0797 0%, #726EFC 100%));
  --ztc-bg-bg-10: #0D0E1F;
  --ztc-bg-bg-11: #FB8500;
  --ztc-border-border-1: #E5E7EB;
  --ztc-border-border-2: #dfdcdc;
  --ztc-font-size-font-s10: 10px;
  --ztc-font-size-font-s12: 12px;
  --ztc-font-size-font-s14: 14px;
  --ztc-font-size-font-s16: 16px;
  --ztc-font-size-font-s18: 18px;
  --ztc-font-size-font-s20: 20px;
  --ztc-font-size-font-s22: 22px;
  --ztc-font-size-font-s24: 24px;
  --ztc-font-size-font-s26: 26px;
  --ztc-font-size-font-s28: 28px;
  --ztc-font-size-font-s30: 30px;
  --ztc-font-size-font-s32: 32px;
  --ztc-font-size-font-s34: 34px;
  --ztc-font-size-font-s36: 36px;
  --ztc-font-size-font-s38: 38px;
  --ztc-font-size-font-s40: 40px;
  --ztc-font-size-font-s42: 42px;
  --ztc-font-size-font-s44: 44px;
  --ztc-font-size-font-s46: 46px;
  --ztc-font-size-font-s48: 48px;
  --ztc-font-size-font-s50: 50px;
  --ztc-font-size-font-s52: 52px;
  --ztc-font-size-font-s54: 54px;
  --ztc-font-size-font-s56: 56px;
  --ztc-font-size-font-s58: 58px;
  --ztc-font-size-font-s60: 60px;
  --ztc-font-size-font-s62: 62px;
  --ztc-font-size-font-s64: 64px;
  --ztc-font-size-font-s66: 66px;
  --ztc-font-size-font-s68: 68px;
  --ztc-font-size-font-s70: 70px;
  --ztc-font-size-font-s10: 10px;
  --ztc-font-size-font-s12: 12px;
  --ztc-font-size-font-s14: 14px;
  --ztc-font-size-font-s16: 16px;
  --ztc-font-size-font-s18: 18px;
  --ztc-font-size-font-s20: 20px;
  --ztc-font-size-font-s22: 22px;
  --ztc-font-size-font-s24: 24px;
  --ztc-font-size-font-s26: 26px;
  --ztc-font-size-font-s28: 28px;
  --ztc-font-size-font-s30: 30px;
  --ztc-font-size-font-s32: 32px;
  --ztc-font-size-font-s34: 34px;
  --ztc-font-size-font-s36: 36px;
  --ztc-font-size-font-s38: 38px;
  --ztc-font-size-font-s40: 40px;
  --ztc-font-size-font-s42: 42px;
  --ztc-font-size-font-s44: 44px;
  --ztc-font-size-font-s46: 46px;
  --ztc-font-size-font-s48: 48px;
  --ztc-font-size-font-s50: 50px;
  --ztc-font-size-font-s52: 52px;
  --ztc-font-size-font-s54: 54px;
  --ztc-font-size-font-s56: 56px;
  --ztc-font-size-font-s58: 58px;
  --ztc-font-size-font-s60: 60px;
  --ztc-font-size-font-s62: 62px;
  --ztc-font-size-font-s64: 64px;
  --ztc-font-size-font-s66: 66px;
  --ztc-font-size-font-s68: 68px;
  --ztc-font-size-font-s70: 70px;
  --ztc-specing-height6: 6px;
  --ztc-specing-height8: 8px;
  --ztc-specing-height10: 10px;
  --ztc-specing-height12: 12px;
  --ztc-specing-height14: 114px;
  --ztc-specing-height16: 16px;
  --ztc-specing-height18: 18px;
  --ztc-specing-height20: 20px;
  --ztc-specing-height22: 22px;
  --ztc-specing-height24: 24px;
  --ztc-specing-height26: 26px;
  --ztc-specing-height28: 28px;
  --ztc-specing-height30: 30px;
  --ztc-specing-height32: 32px;
  --ztc-specing-height34: 34px;
  --ztc-specing-height36: 36px;
  --ztc-specing-height38: 38px;
  --ztc-specing-height40: 40px;
  --ztc-specing-height42: 42px;
  --ztc-specing-height44: 44px;
  --ztc-specing-height46: 46px;
  --ztc-specing-height48: 48px;
  --ztc-specing-height50: 50px;
  --ztc-specing-height52: 52px;
  --ztc-specing-height54: 54px;
  --ztc-specing-height56: 56px;
  --ztc-specing-height58: 58px;
  --ztc-specing-height60: 60px;
  --ztc-specing-height70: 70px;
  --ztc-specing-height80: 80px;
  --ztc-specing-height90: 90px;
  --ztc-specing-height100: 100px;
  --ztc-specing-height110: 110px;
  --ztc-specing-height120: 120px;
  --ztc-specing-height130: 130px;
  --ztc-weight-regular: 400;
  --ztc-weight-medium: 500;
  --ztc-weight-semibold: 600;
  --ztc-weight-bold: 700;
  --ztc-weight-black: 800;
  --ztc-family-font1: 'Outfit', serif;
  --ztc-family-font2: 'Outfit', sans-serif;
}

/*
============================
Name:  Finazze - Business & Finance  HTML Templete
Version: 1.0.0
Description: Finazze - Business & Finance  HTML Templete
Author: Unifato
Author URI: https://themeforest.net/user/unifato/portfolio
Location:
============================
*/
/*============= HEDAER CSS AREA ===============*/
/*============= HERO CSS AREA ===============*/
/*============= MOBILE-MENU CSS AREA ===============*/
/*============= ABOUT CSS AREA ===============*/
/*============= SERVICE CSS AREA ===============*/
/*============= WORK CSS AREA ===============*/
/*============= TESTIMONIAL CSS AREA ===============*/
/*============= BLOG CSS AREA ===============*/
/*============= CONTACT CSS AREA ===============*/
/*============= PROJECT CSS AREA ===============*/
/*============= TEAM CSS AREA ===============*/
/*============= FAQ CSS AREA ===============*/
/*============= CASE CSS AREA ===============*/
/*============= CTA CSS AREA ===============*/
/*============= OTHERS CSS AREA ===============*/
/*============= FOOTER CSS AREA ===============*/
/*============= COMMON CSS AREA ===============*/
/*.heading1 h5 {
  border-radius: 8px;
  background: rgba(110, 148, 25, 0.1);
  display: inline-block;
  color: var(--ztc-text-text-4);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  font-style: normal;
  font-weight: var(--ztc-weight-semibold);
  line-height: 16px;
  text-transform: uppercase;
  padding: 10px 14px;
}
.heading1 h2 {
  color: var(--ztc-text-text-2);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s44);
  font-style: normal;
  font-weight: var(--ztc-weight-semibold);
  line-height: 54px;
  display: inline-block;
  transition: all 0.4s;
}
@media (max-width: 767px) {
  .heading1 h2 {
    font-size: var(--ztc-font-size-font-s32);
    line-height: 40px;
  }
}
.heading1 p {
  color: var(--ztc-text-text-3);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  font-style: normal;
  font-weight: var(--regular);
  line-height: 24px;
}

.heading2 h5 {
  border-radius: 8px;
  background: rgba(12, 58, 48, 0.1);
  color: var(--ztc-text-text-5);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s18);
  font-style: normal;
  font-weight: var(--ztc-weight-regular);
  line-height: 18px;
  padding: 8px 10px;
  display: inline-block;
}
.heading2 h2 {
  color: var(--ztc-text-text-5);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s44);
  font-style: normal;
  font-weight: var(--ztc-weight-semibold);
  line-height: 54px;
  display: inline-block;
  transition: all 0.4s;
}
@media (max-width: 767px) {
  .heading2 h2 {
    font-size: var(--ztc-font-size-font-s32);
    line-height: 40px;
  }
}
.heading2 p {
  color: var(--ztc-text-text-7);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  font-style: normal;
  font-weight: var(--regular);
  line-height: 24px;
}

.heading3 h5 {
  border-radius: 8px;
  background: rgba(3, 37, 48, 0.1);
  color: var(--ztc-text-text-8);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  font-style: normal;
  font-weight: var(--ztc-weight-semibold);
  line-height: 16px;
  padding: 8px 10px;
  display: inline-block;
  text-transform: uppercase;
}
.heading3 h2 {
  color: var(--ztc-text-text-8);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s44);
  font-style: normal;
  font-weight: var(--ztc-weight-semibold);
  line-height: 54px;
  display: inline-block;
  transition: all 0.4s;
}
@media (max-width: 767px) {
  .heading3 h2 {
    font-size: var(--ztc-font-size-font-s32);
    line-height: 40px;
  }
}
.heading3 p {
  color: var(--ztc-text-text-10);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  font-style: normal;
  font-weight: var(--regular);
  line-height: 24px;
}

.heading4 h5 {
  background: linear-gradient(90deg, #2E0797 0%, #726EFC 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ztc-text-text-8);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  font-style: normal;
  font-weight: var(--ztc-weight-semibold);
  line-height: 16px;
  padding: 8px 10px;
  display: inline-block;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  padding: 10px 14px;
}
.heading4 h5::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  border-radius: 80px;
  background: rgba(114, 110, 252, 0.1);
  transition: all 0.4s;
}
.heading4 h2 {
  color: var(--ztc-text-text-11);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s44);
  font-style: normal;
  font-weight: var(--ztc-weight-semibold);
  line-height: 54px;
  display: inline-block;
  transition: all 0.4s;
}
@media (max-width: 767px) {
  .heading4 h2 {
    font-size: var(--ztc-font-size-font-s32);
    line-height: 40px;
  }
}
.heading4 p {
  color: var(--ztc-text-text-12);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  font-style: normal;
  font-weight: var(--regular);
  line-height: 24px;
}

.heading5 h5 {
  border-radius: 8px;
  background: rgba(251, 133, 0, 0.1);
  color: var(--ztc-text-text-16);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  font-style: normal;
  font-weight: var(--ztc-weight-medium);
  line-height: 16px;
  padding: 8px 10px;
  display: inline-block;
  text-transform: uppercase;
}
.heading5 h2 {
  color: var(--ztc-text-text-14);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s44);
  font-style: normal;
  font-weight: var(--ztc-weight-semibold);
  line-height: 54px;
  display: inline-block;
  transition: all 0.4s;
}
@media (max-width: 767px) {
  .heading5 h2 {
    font-size: var(--ztc-font-size-font-s32);
    line-height: 40px;
  }
}
.heading5 p {
  color: var(--ztc-text-text-15);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  font-style: normal;
  font-weight: var(--regular);
  line-height: 24px;
}

.vl-btn1 {
  position: relative;
  display: inline-block;
  padding: 18px 24px;
  border-radius: 8px;
  color: var(--ztc-text-text-1);
  background: var(--ztc-bg-bg-3);
  z-index: 1;
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  line-height: 16px;
  font-weight: var(--ztc-weight-semibold);
  transition: all 0.4s;
  text-transform: uppercase;
  z-index: 1;
}
.vl-btn1:hover {
  color: var(--ztc-text-text-1);
  transition: all 0.4s;
}
.vl-btn1:hover::after {
  visibility: visible;
  opacity: 1;
  transition: all 0.4s;
  width: 100%;
  left: 0;
}
.vl-btn1:hover::before {
  background: var(--ztc-bg-bg-1);
  opacity: 10%;
  transition: all 0.4s;
}
.vl-btn1::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 10px;
  background: var(--ztc-bg-bg-2);
  transition: all 0.4s;
  top: 0;
  left: 50%;
  border-radius: 8px;
  z-index: -2;
  visibility: hidden;
  opacity: 0;
}
.vl-btn1::before {
  position: absolute;
  content: "";
  height: 36px;
  width: 36px;
  display: inline-block;
  transition: all 0.4s;
  background: #7C9F37;
  border-radius: 50%;
  left: 10px;
  top: 8px;
  z-index: -1;
}

.vl-btn2 {
  color: var(--ztc-text-text-5);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s18);
  font-style: normal;
  font-weight: var(--ztc-weight-semibold);
  line-height: 18px;
  display: inline-block;
  transition: all 0.4s;
  border-radius: 8px;
  padding: 16px 20px;
  position: relative;
  right: 0;
  top: 0;
  z-index: 1;
  background: var(--ztc-bg-bg-5);
  border: none;
  outline: none;
}
.vl-btn2:hover {
  transform: translateY(-5px);
  transition: all 0.4s;
  color: var(--ztc-text-text-1);
}
.vl-btn2:hover::after {
  left: 0;
  top: 0;
  transition: all 0.4s;
  visibility: visible;
  opacity: 1;
  width: 100%;
}
.vl-btn2 i {
  padding-left: 4px;
}
.vl-btn2::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 10px;
  left: 50%;
  transition: all 0.4s;
  color: var(--ztc-text-text-1);
  background: var(--ztc-bg-bg-4);
  top: 0;
  z-index: -2;
  border-radius: 8px;
  visibility: hidden;
  opacity: 0;
}

.vl-btn3 {
  color: var(--ztc-text-text-8);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s18);
  font-style: normal;
  font-weight: var(--ztc-weight-semibold);
  line-height: 18px;
  display: inline-block;
  transition: all 0.4s;
  border-radius: 8px;
  padding: 18px 32px;
  position: relative;
  z-index: 1;
  background: var(--ztc-bg-bg-7);
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .vl-btn3 {
    padding: 16px;
  }
}
.vl-btn3:hover {
  transform: translateY(-5px);
  transition: all 0.4s;
  color: var(--ztc-text-text-1);
}
.vl-btn3:hover::after {
  left: 0;
  top: 0;
  transition: all 0.4s;
  visibility: visible;
  opacity: 1;
  width: 100%;
}
.vl-btn3::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 10px;
  left: 50%;
  transition: all 0.4s;
  color: var(--ztc-text-text-1);
  background: var(--ztc-bg-bg-6);
  top: 0;
  z-index: -2;
  border-radius: 8px;
  visibility: hidden;
  opacity: 0;
}

.vl-btn4 {
  color: var(--ztc-text-text-1);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  font-style: normal;
  font-weight: var(--ztc-weight-semibold);
  line-height: 16px;
  text-transform: uppercase;
  display: inline-block;
  transition: all 0.4s;
  padding: 8px 8px 8px 20px;
  position: relative;
  z-index: 1;
}
.vl-btn4 span {
  color: #2E0797;
}
.vl-btn4:hover {
  color: var(--ztc-text-text-1);
  transition: all 0.4s;
}
.vl-btn4:hover::before {
  visibility: visible;
  opacity: 1;
  left: 0;
  width: 100%;
  transition: all 0.4s;
}
.vl-btn4:hover span {
  color: #2E0797;
  transition: all 0.4s;
  transform: rotate(0);
}
.vl-btn4::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: var(--04-home-page-maincolors, linear-gradient(90deg, #2E0797 0%, #726EFC 100%));
  border-radius: 100px;
  transition: all 0.4s;
  z-index: -2;
}
.vl-btn4::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 10px;
  left: 50%;
  top: 0;
  transition: all 0.4s;
  border-radius: 90px;
  background: var(--04-home-page-maincolors, linear-gradient(90deg, #726EFC 0%, #2E0797 100%));
  z-index: -1;
  visibility: hidden;
  opacity: 0;
}
.vl-btn4 span {
  height: 36px;
  width: 36px;
  text-align: center;
  line-height: 36px;
  display: inline-block;
  transition: all 0.4s;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  transform: rotate(-45deg);
  margin-left: 4px;
}
.vl-btn4 span::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: #EDEBF9;
  z-index: -1;
  border-radius: 50%;
}

.vl-btn5:hover .arrow {
  margin-left: 4px;
  transition: all 0.4s;
  transform: rotate(0);
}
.vl-btn5 .text {
  color: var(--ztc-text-text-1);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s20);
  font-style: normal;
  font-weight: var(--ztc-weight-semibold);
  line-height: 20px;
  display: inline-block;
  transition: all 0.4s;
  text-transform: uppercase;
  padding: 20px 26px;
  border-radius: 70px;
  background: var(--ztc-bg-bg-11);
}
.vl-btn5 .arrow {
  height: 60px;
  width: 60px;
  text-align: center;
  line-height: 60px;
  border-radius: 50%;
  transition: all 0.4s;
  background: var(--ztc-bg-bg-11);
  color: var(--ztc-text-text-1);
  transform: rotate(-45deg);
  display: inline-block;
  font-size: var(--ztc-font-size-font-s24);
}
*/
/*=========================header=====================*/

/* Navbar container */
    
    nav {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 15px 0px;
      background: #fff;
      border-bottom: 1px solid #eee;
    }

    
    /* Menu */
    .nav-links {
      display: flex;
      align-items: center;
      gap: 32px;
    }

  .nav-links a {
    /* font-family: Poppins, sans-serif; */
    text-decoration: none;
    color: #111;
    font-size: 17px;
    transition: color 0.3s;
    text-transform: uppercase;
}

    .nav-links a:hover {
      color: #f0870f;
    }

    /* CTA Button */
    .cta {
      background:#fce7cf;
     padding: 5px 50px;
      border: 2px solid #f7931e;
      border-radius: 25px;
      color: #f7931e;
     font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    }

    .cta:hover {
      background:#f0870f;
      color: #fff;
    }
    a.cta{
      color: #794c31;
    }
    a.cta:hover{
      color:#ffff
    }

    /* Mobile Menu */
    .menu-toggle {
      display: none;
      font-size: 26px;
      cursor: pointer;
    }

   @media(max-width: 768px) {
  nav {
    flex-wrap: wrap;
    padding: 15px 20px;
    justify-content: space-between;
  }

  

  .nav-links {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 20px 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
        display: none;
 z-index: 1;
  }

  .nav-links a {
    padding: 12px 0;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #eee;
  }

  .nav-links a:last-child {
    display: none;
    border-bottom: none;
  }

  .nav-links.active {
    max-height: 500px; /* enough to show all links */
    display: contents;
  }

  .menu-toggle {
    display: block;
  }
}



/*============= ABOUT CSS AREA ===============*/
   /* ===== Global Reset ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* ===== Container ===== */
    

#about {
    position: relative;
    overflow: hidden;
    margin-top: 4rem;
    background-color: #fce7cf;
    background-image: radial-gradient(#ccc 1.05px, #fce7cf 1.05px);
    background-size: 20px 20px; /* Adjust dot size */
}

        .about-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }

        /* ===== Left Content ===== */
        .about-content {
            position: relative;
            z-index: 10;
            padding: 2rem;
            flex: 1 1 50%;
        }

        .about-content h2 {
            margin-bottom: 1rem;
            font-size: 2rem;
            font-weight: 800;
            color: #1f2937;
            letter-spacing: -0.5px;
        }

        .about-content p {
            font-size: 1rem;
            line-height: 1.7;
            color: #111827;
            text-align: justify;
        }

        /* ===== Right Image ===== */
        .about-image {
            flex: 1 1 50%;
            position: relative;
        }

        .about-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top;
            display: block;
        }

        /* ===== Responsive Design ===== */
        @media (max-width: 1024px) {
            .about-container {
                flex-direction: column;
            }

            .about-content {
                flex: 1 1 100%;
                padding: 1.5rem;
                text-align: center;
            }

            .about-content h2 {
                font-size: 1.8rem;
            }

            .about-content p {
                font-size: 1rem;
            }

            .about-image {
                flex: 1 1 100%;
                height: 300px;
            }

            .about-image img {
                height: 100%;
            }
        }

/*============= ABOUT CSS AREA ENDS ===============*/
/*============= SERVICE CSS AREA ===============*/

 :root{
    --card-bg: #e6eddc;          /* soft sage like the screenshot */
    --title: #0f172a;            /* near-black */
    --text: #334155;             /* slate */
    --dot: rgba(0,0,0,.12);      /* perforation dots */
    --accent: #111;              /* checklist icon */
  }

  /** { box-sizing: border-box; }*/
/*  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
    color: var(--text);
    background:#fff;
  }*/

  /* ---------- Section shell ---------- */
  .feature-section{
    max-width: 1200px;
    margin: 80px auto;
    padding-inline: 20px;
    text-align: center;
  }
  .feature-section h2{
    font-size: clamp(28px, 3.2vw, 42px);
    line-height: 1.1;
    color: var(--title);
    font-weight: 800;
    margin: 0 0 36px;
  }

  /* ---------- Tilted rainbow card ---------- */
  .tilt-wrap{
    position: relative;
    perspective: 1200px;
  }

  /* the colorful “paper stack” behind */
  .tilt-wrap::before,
  .tilt-wrap::after{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:28px;
    z-index:0;
    transform: rotate(-2.5deg);
    filter: blur(.2px);
  }
  /* wide pastel stripes (like the edges in the screenshot) */
  .tilt-wrap::before{
    background:
      linear-gradient(90deg,
        #ffd77a, #ffd77a 16.6%,
        #ffb7b7 16.6%, #ffb7b7 33.3%,
        #c6b7ff 33.3%, #c6b7ff 50%,
        #a8e3ff 50%, #a8e3ff 66.6%,
        #b8f7c2 66.6%, #b8f7c2 83.3%,
        #ffe3a3 83.3%, #ffe3a3 100%
      );
    opacity:.9;
  }
  /* a subtle shadow layer to separate from page */
  .tilt-wrap::after{
    background: transparent;
    box-shadow: 0 30px 80px rgba(0,0,0,.15);
    opacity:.7;
    pointer-events:none;
  }

  .tilt-card{
    position: relative;
    z-index:1;
    border-radius:26px;
    background: var(--card-bg);
    transform: rotate(-2.5deg);
  }

  /* keep inner content upright */
  .tilt-inner{
    transform: rotate(2.5deg);
    border-radius:26px;
    padding: clamp(20px, 4vw, 40px);
  }

  /* ---------- Grid layout ---------- */
  .feature-grid{
    display:grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(16px, 3vw, 32px);
    align-items:center;
  }
  @media (max-width: 900px){
    .feature-grid{ grid-template-columns: 1fr; }
  }

  /* ---------- Left text block ---------- */
  .kicker{
    display:inline-block;
    font-weight: 700;
    letter-spacing:.02em;
    color: var(--title);
    background: #fff;
    border-radius:999px;
    padding:6px 12px;
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
    margin-bottom: 12px;
  }
  .headline{
    font-size: clamp(22px, 2.2vw, 28px);
    color: var(--title);
    font-weight: 800;
    margin: 6px 0 10px;
    text-align:left;
  }
  .subcopy{
    text-align:left;
    line-height:1.6;
    margin-bottom: 18px;
  }

  .checks{
    display:grid;
    gap:10px;
    text-align:left;
    margin-top:18px;
  }
  .check{
    display:flex;
    gap:10px;
    align-items:flex-start;
  }
  .check svg{
    flex:0 0 22px;
  }

  /* ---------- Right media block ---------- */
  .media{
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: 18px;
    background: #111;
    overflow: hidden;
    box-shadow:
      0 18px 30px rgba(0,0,0,.2),
      0 4px 10px rgba(0,0,0,.08);
  }

  /* perforated dotted mask behind the media (top-right & bottom-left) */
  .media::before,
  .media::after{
    content:"";
    position:absolute;
    width: 190px; height: 140px;
    background:
      radial-gradient(var(--dot) 1px, transparent 1.5px) 0 0/8px 8px;
    z-index: -1;
  }
  .media::before{
    top:-18px; right:-18px;
    border-radius: 18px;
  }
  .media::after{
    bottom:-18px; left:-18px;
    border-radius: 18px;
  }

  /* mock “video” */
  .media img{
    width:100%; height:100%;
    object-fit: cover;
    display:block;
    filter: saturate(1.02) contrast(1.02);
  }

  /* small floating badge like a “live / join” element */
  .badge{
    position:absolute;
    left: 14px;
    bottom: 14px;
    background:#fff;
    color:#0f172a;
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
  }
  .badge b{ font-weight:800; }

  .py3 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.px8 {
    padding-left: 80px;
    padding-right: 80px;
}


/*============= SERVICE CSS AREA ENDS===============*/



/*============= FOOTER CSS AREA ===============*/
    footer {
      background: #fde7ce;
      padding: 50px 80px 30px;
      position: relative;
      overflow: hidden;
    }

.footer-section{
  display: flex;

}

    /* Left Logo + Arrow */
    .footer-left {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
    }

    .footer-left img.logo {
      width: 360px; !!important
      margin-bottom: 20px;
    }

    .footer-left img.arrow {
      width: 243px;
      margin-top: 20px;
    }

    /* Columns */
    .footer-container {
      display: flex;
      /*flex-wrap: wrap;
      justify-content: space-between;
      gap: 40px;*/
      max-width: 1420px;
      margin: auto;
    }

    .footer-column {
      flex: 1;
      min-width: 200px;
    }

    .footer-column h4 {
      font-weight: 600;
      margin-bottom: 15px;
    }

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

    .footer-column ul li {
      margin: 8px 0;
    }

    .footer-column ul li a {
      text-decoration: none;
      color: #000;
      font-size: 15px;
      transition: 0.3s;
    }

    .footer-column ul li a:hover {
      color: #f38b2a;
    }

 

    /* Social Icons */
    .social-links {
      margin-top: 30px;
      display: flex;
      gap: 15px;
    }

    .social-links a {
      text-decoration: none;
      color: #000;
      font-size: 20px;
      transition: 0.3s;
    }

    .social-links a:hover {
      color: #f38b2a;
    }

    /* Bottom Bar */
    .footer-bottom {
      text-align: center;
      font-size: 14px;
      margin-top: 40px;
      color: #555;
    }

    /* Responsive */
    @media(max-width: 768px) {
      .footer-container {
        flex-direction: column;
        align-items: flex-start;
      }
        /* Left Logo + Arrow */
   

    .footer-left img.arrow {
     display: none;
    }

 .footer-column {
             padding-top: 20px;
            padding-left: 39px;
    }

    }

/*============= FOOTER CSS AREA ===============*/

/*============= WORK CSS AREA ===============*/
/* Container */
.yugta-features {
    background-color: #fce7cf;
    padding: 70px 20px;
    text-align: center;
}

/* Title */
.yugta-features .section-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 40px;
    color: #222;
}

.yugta-features .section-title span {
    color: #e63946;
}

/* Grid Layout */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: auto;
}

/* Feature Box */
.feature-box {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.feature-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Icon */
.feature-icon {
    font-size: 36px;
    margin-bottom: 15px;
}

/* Title */
.feature-title {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin-bottom: 10px;
}

/* Description */
.feature-desc {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}


/*============= WORK CSS AREA ===============*/

/*============= faqs CSS AREA ===============*/
   
  .faq-section {
    padding: 3rem 1rem;
    background: #fff;
  }

.faq-header {
  text-align: center;
  margin-bottom: 2rem;
  font-family: 'Poppins', sans-serif; /* clean modern font */
}

.faq-header h2 {
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.faq-header h2 span.dark {
  color: #222; /* dark gray like 'tag' */
}

.faq-header h2 span.orange {
  background: linear-gradient(90deg, #f15a29, #f7931e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.faq-header h2 span.yellow {
  background: linear-gradient(90deg, #fbb034, #ffdd00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.faq-header p {
  font-size: 1.1rem;
  color: #555;
}

  .container-one {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 1200px;
    margin: auto;
    padding: 1rem;
  }

  /* Left Section */
  .left-section-faq {
    flex: 1 1 40%;
    min-width: 280px;
  }

  .left-section-faq h2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
  }

  .left-section-faq p {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #555;
  }

 .btn-faq {
  position: relative;
  padding: 0.8rem 1.8rem;
  border: 2px solid #000;
  background: #fff;
  color: #000;
  font-weight: 600;
  border-radius: 50px; /* fully rounded */
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 6px 6px 0px #ff9800; /* orange offset shadow */
}

.btn-faq:hover {
  box-shadow: 2px 2px 0px #ff9800;
  transform: translateY(-2px);
}

  /* Accordion */
  .accordion {
    flex: 1 1 55%;
    min-width: 300px;
  }

  .accordion-item {
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
  }

  .accordion-header {
    font-weight: bold;
    cursor: pointer;
    padding: 0.8rem;
    background: #f8f8f8;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .accordion-header.active {
    background: #e6f0ff;
  }

  .accordion-header span {
    font-size: 1.2rem;
  }

  .accordion-content {
    display: none;
    padding: 0.8rem;
    background: #fafafa;
    font-size: 0.95rem;
    color: #444;
  }

  /* Responsive */
  @media (max-width: 768px) {
    .container-one {
      flex-direction: column;
      text-align: center;
    }

    .left-section-faq,
    .accordion {
      flex: 1 1 100%;
    }
  }



/*============= FAQS CSS AREA ===============*/



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

/* ========== GENERAL RESET ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*font-family: "Poppins", sans-serif;*/
}

/*body {
    background: #fff;
    color: #333;
}*/

/* ========== HEADER AREA ========== */
.vl-header-area {
    background: #fff;
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* ========== LOGO ========== */
.vl-logo img {
    /*max-height: 55px;*/
    height: 92px;
}

/* ========== NAVIGATION ========== */
.vl-main-menu .nav-menu {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 25px;
}

.vl-main-menu .nav-menu li {
    position: relative;
}

.vl-main-menu .nav-menu li a {
    text-decoration: none;
    color: #222;
    font-weight: 600;
    padding: 8px 14px;
    transition: 0.3s;
}

.vl-main-menu .nav-menu li a:hover {
    color: #ff6a00;
}

/* ========== SOCIAL ICONS ========== */
.social-icons {
    list-style: none;
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.social-icons li a {
    color: #333;
    font-size: 16px;
    transition: 0.3s;
}

.social-icons li a:hover {
    color: #ff6a00;
}

/* ========== SEARCH ICON ========== */
.search-icon a {
    color: #333;
    font-size: 18px;
    margin-right: 15px;
    transition: 0.3s;
}

.search-icon a:hover {
    color: #ff6a00;
}

/* ========== MOBILE MENU BUTTON ========== */
.vl-offcanvas-toggle {
    background: transparent;
    border: none;
    font-size: 22px;
    color: #222;
    cursor: pointer;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 991px) {
    .vl-main-menu {
        display: none;
    }

    .vl-offcanvas-toggle {
        display: block;
    }
}

/* ========== About-php-Page ========== */


    /* About Section */
    .yugta-about-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      align-items: center;
      padding: 60px 20px;
      /*max-width: 1100px;*/
      max-width: 1507px;
      margin: auto;
    }

    .yugta-about-text {
      flex: 1;
      min-width: 300px;
    }

    .yugta-about-text h2 {
      font-size: 2rem;
      margin-bottom: 20px;
    }

    .yugta-about-text p {
      margin-bottom: 15px;
      line-height: 1.6;
      color: #333;
    }

    .yugta-about-image {
      flex: 1;
      text-align: center;
    }

    .yugta-about-image img {
      max-width: 100%;
      border-radius: 10px;
    }

    /* Mission & Vision */
    .yugta-mission-vision {
      padding: 60px 20px;
      text-align: center;
      /*background: #f9f9f9;*/
       max-width: 1100px;
      margin: 0 auto;
    }

    .yugta-mission-vision h2 {
      font-size: 2rem;
      margin-bottom: 20px;
      color: #ff7f32;
    }

   .yugta-mission-vision p {
      font-size: 1.05rem;
      color: #222222;
    }
    .yugta-mv-grid {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 20px;
      margin-top: 30px;
    }

    .yugta-mv-item {
       background: #E6EDDC;
    /*#5c544b*/
    padding: 73px;
    border-radius: 10px;
    width: 646px;
    transition: 0.3s;

    }

       .yugta-mv-item:hover {
      background: #E6EDDC;
      transform: translateY(-5px);
    }

   .yugta-mv-item h3 {
      color: #ff7f32;
      margin-bottom: 10px;
    }

    /* Testimonials (optional) */
   /* .yugta-testimonials {
      padding: 60px 20px;
      background: #1a1a1a;
      color: #fff;
      text-align: center;
    }

    .yugta-testimonials h2 {
      font-size: 2rem;
      margin-bottom: 30px;
    }

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

    .yugta-testimonial-card {
      background: #2a2a2a;
      padding: 20px;
      border-radius: 10px;
      width: 300px;
      text-align: left;
    }

    .yugta-testimonial-card p {
      margin-bottom: 10px;
      font-style: italic;
    }*/

    /* ---------------- RESPONSIVE ---------------- */
    @media (max-width: 992px) {
      .yugta-hero h1 {
        font-size: 2.2rem;
      }
      .yugta-hero p {
        font-size: 1rem;
      }
    }

    @media (max-width: 768px) {
      .yugta-about-wrapper {
        flex-direction: column;
        text-align: center;
      }
      .yugta-about-text {
        order: 2;
      }
      .yugta-about-image {
        order: 1;
      }
      .yugta-about-text h2 {
        font-size: 1.8rem;
      }
    }

    @media (max-width: 576px) {
      .yugta-hero h1 {
        font-size: 1.8rem;
      }
      .yugta-hero p {
        font-size: 0.95rem;
      }
      .yugta-about-text h2 {
        font-size: 1.5rem;
      }
      .yugta-mv-item {
        min-width: 100%;
      }
      .yugta-testimonial-card {
        width: 100%;
      }
    }