@import url('https://fonts.googleapis.com/css2?family=Fira+Sans: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');


*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

:root{

  --color1: #f7b30b;
  --color2: #0e0707;
  --color3: #f1f1f1;
  --color4: #ACA22E;
  --color8: #040404;
  --color10: #234848;
  --color11: #c1b7b7;
  --color12: #7648f8;

 
  --main-clr: #009500;
}

body{
    direction: ltr;
    font-family: 'Fira Sans', sans-serif !important;
    font-size: 16px;
    margin: 0;
    padding: 0px;
    line-height: 1.4;
    direction: ltr !important;
}

img{
    max-width: 100%;
}

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

li, p{
  padding: 10px 0;
}

a {
    text-decoration: none;
}

.container{
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}


nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  width: 100%;
  background: #FFFFFE;
  flex-direction: row-reverse;
  z-index: 1;
  transition: background-color 0.3s;
}


nav .fxn-logo{
  padding: 14px 0;
}

nav .logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

nav .logo  img {
    width: 32px;
    height: 32px;
}

nav .logo  h2 {
  color: #060606;
  font-size: clamp(16px, 2.5vw, 18px);
  transition: .5s;
}

nav .logo  h2:hover {
  color: var(--color12);
}


nav ul {
  --padding: 20px;
  --font-size: 17px;

  list-style: none;
  display: flex;
  align-items: center;
  font-size: var(--font-size);
  overflow-y: hidden;
  transition: 1s cubic-bezier(.68,-0.55,.27,10.55);
}

nav ul li {
  padding: var(--padding);
}

nav ul li a {
  color: #060606;
  text-decoration: none;
  font-size: clamp(16px, 2.5vw, 18px);
  transition: .5s;
}

nav ul li a:hover {
  color: var(--color12);
}

nav .menu {
  width: 22px;
  height: 16px;
  cursor: pointer;
  display: none;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  margin: 15px;
}

nav .menu span {
  width: 100%;
  height: 2px;
  border-radius: 99px;
  background: #060606;
  transition: 0.3s ease;
  transform-origin: left;
}

nav .menu.active span {
  background: var(--main-clr);
}

nav .menu.active span:nth-child(1) {
  transform: rotate(40deg);
}

nav .menu span:nth-child(3) {
  transform-origin: left;
}

nav .menu.active span:nth-child(3) {
  transform: rotate(-40deg);
}

nav .menu.active span:nth-child(2) {
  transform: scale(0);
}


.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #FFFFFE;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  padding: 10px 0;
  list-style: none;
  min-width: 160px;
  z-index: 1;
}

.dropdown-menu li {
  padding: 10px 20px;
}

.dropdown-menu li a {
  color: #060606;
  text-decoration: none;
  display: block;
  font-size: 16px;
}

.dropdown-menu li a:hover {
  color: var(--color12);
}

.navigation__item:hover .dropdown-menu {
  display: block !important;
}


.osn-heros{
  background: url(uploads/2024-10/SoftBgOverlay_2024-10-10_19-00-530.png), #A951F6;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 103px 15px;
}

.osn-heros-main{
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}


.osn-heros-block, .osn-heros-block-two{
  flex: 1;
  margin: 46px;
}

.osn-heros-text h2{
  font-size: clamp(24px, 2.5vw, 30px);
  color: #fff;
  font-weight: 800;
}

.osn-heros-block-two img{
  width: 100%;
  height: 520px;
}

.osn-heros-btn{
  padding-top: 30px;
  display: flex;
  text-align: center;
}


.rn2{
  background: #FFFFFE;
  padding:  46px 15px;
}

.rn2-main{
  display: flex;
  flex-wrap: wrap;
}

.rn2-block{
  display: flex;
  flex: 1;
  padding: 15px;
  text-align: center;
  flex-direction: column;
  align-items: center;
}


.rn2-icon {
  background: var(--color3);
  padding: 15px;
}


.rn2-icon svg{
    width: 45;
    height: 45;
    fill: var(--color12);
}

.rn2-text p{
  font-size: clamp(16px, 2.5vw, 18px);
}

.rn2-text{
  position: relative;
  padding-top: 15px;
}

.rn2-text::after {
  position: absolute;
  top: 20px;
  content: " ";
  width: 50px;
  background: var(--color3);
  height: 2px;
  left: 50%;
  right: 50%;
  transform: translate(-25px, 50%);
}



.bnfe{
  background: #FFFFFE;
  padding:  46px 15px;
}


.bnfe-title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 46px;
}

.bnfe-title h5{
  text-align: center;
  margin-bottom:  30px;
  color: #060606;
  font-weight: 600;
  font-size: clamp(22px,5vw,35px);
  position: relative;
  font-weight: 800;
}

.bnfe-title h5::after{
  position: absolute;
  bottom: -5px;
  content: " ";
  width: 50px;
  background: var(--color12);
  height: 2px;
  left: 50%;
  right: 50%;
  transform: translate(-25px, 50%);
}


.bnfe-main{
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}


.bnfe-block-one, .bnfe-block-two{
  flex: 1;
  margin: 0 46px;
}


.bnfe-content-block p{
  font-size: clamp(16px, 2.5vw, 18px);
  position: relative;
}


.bnfe-content-block p::before {
  position: absolute;
  top: 22px;
  content: " ";
  width: 25px;
  background: var(--color12);
  height: 2px;
  left: -2%;
  transform: translate(-25px, 50%);
}


.slanted-background {
  width: 100%;
  height: 200px; 
  background: linear-gradient(to right, #f8f8f8, #f8f8f8);
  clip-path: polygon(0 100%, 100% 50%, 100% 100%, 0 100%);
}


.main-hub{
  background: #f8f8f8;
  padding:  46px 15px;
}


.main-hub-title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 46px;
}

.main-hub-title h5{
  text-align: center;
  margin-bottom:  30px;
  color: #060606;
  font-weight: 600;
  font-size: clamp(22px,5vw,35px);
  position: relative;
  font-weight: 800;
}

.main-hub-title h5::after{
  position: absolute;
  bottom: -5px;
  content: " ";
  width: 50px;
  background: var(--color12);
  height: 2px;
  left: 50%;
  right: 50%;
  transform: translate(-25px, 50%);
}

.main-hub-main{
  display: flex;
  align-items: center;
  flex-direction: column;
}

.main-hub-image, .main-hub-block-content{
  flex: 1;
  margin: 20px;
}


.main-hub-image img{
  width: 100%;
  object-fit: contain;
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  height: 520px;
}


.main-hub-block-content div{
  font-size: clamp(15px,2.5vw,18px) !important;
  color: #060606;
}

.main-hub-block-content div ul{
  list-style: disc !important;
  margin: 12px;
  text-align: left !important;
}

.main-hub .main-hub-block-price div{
  text-align: center;
  font-size: clamp(20px,5vw,25px);
  font-weight: 800;
  color: var(--color12);
  padding: 14px;
}





.our-help{
  background: url(uploads/2024-10/SoftBgOverlay_2024-10-10_19-00-530.png), #A951F6;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  padding: 103px 15px;
}


.our-help-title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 46px;
}

.our-help-title h5{
  text-align: center;
  margin-bottom:  30px;
  color: #fff;
  font-weight: 600;
  font-size: clamp(22px,5vw,35px);
  position: relative;
  font-weight: 800;
}

.our-help-title h5::after{
  position: absolute;
  bottom: -5px;
  content: " ";
  width: 50px;
  background: var(--color1);
  height: 2px;
  left: 50%;
  right: 50%;
  transform: translate(-25px, 50%);
}

.our-help-main{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.our-help-card{
  border-radius: 50px 0;
  transition: 0.5s;
  padding: 20px;
  background: rgb(68 66 64 / 50%);
  margin: 15px;
  border: 2px solid var(--color1);
}
  
  .our-help-image{
      background: #fff;
      width: 70px;
      height: 70px;
      border-radius: 50%;
      margin: 10px auto;
      display: flex;
    align-items: center;
    justify-content: center;
  }

  .our-help-image svg{ 
      margin: 17px;
      width: 32px;
      height: 32px;
      fill: var(--color1);
      animation:spin 4s linear infinite;
  }

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

   .our-help-text a .our-help-heading {
    font-size: clamp(18px, 2.5vw, 20px);
    font-weight: 700;
    margin: auto;
    text-align: center;
    color: #fff;
    transition: .5s;
  }

  .our-help-card:hover .our-help-text a .our-help-heading{
    color: var(--color2);
  }

  .our-help-card:hover .our-help-image svg{
    fill: var(--color3);
  }

  .our-help-card:hover .our-help-image{
    background: var(--color2);
  }

  .our-help-text p {
    font-size: clamp(16px, 2.5vw, 18px);
    text-align: center;
    color: #fff;
  }

  .our-help-btn-read{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
  }


  .writeup{
    background: url(uploads/2024-10/SoftBgOverlay_2024-10-10_19-00-530.png), #A951F6;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    padding: 103px 15px;
  }
  
  
  .writeup-title{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 46px;
  }
  
  .writeup-title h5{
    text-align: center;
    margin-bottom:  30px;
    color: #fff;
    font-weight: 600;
    font-size: clamp(22px,5vw,35px);
    position: relative;
    font-weight: 800;
  }
  
  .writeup-title h5::after{
    position: absolute;
    bottom: -5px;
    content: " ";
    width: 50px;
    background: var(--color1);
    height: 2px;
    left: 50%;
    right: 50%;
    transform: translate(-25px, 50%);
  }
  
  .writeup-main{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }


  .writeup-card {
    background: rgb(248 248 248 / 70%);
    border-radius: 10px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    margin: 10px;
    transition: .5s;
  }

  .writeup-card:hover a img{
    filter: grayscale(0.5);
  }

  .writeup-card:hover  .writeup-card-body a h4{
    color: var(--color3);
  }

  .writeup-card-header a img {
    width: 100%;
    height: 323px;
    object-fit: cover;
    transition: .5s;
  }
  .writeup-card-body {
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 20px;
  }
  .writeup-tag {
    background-color: var(--color12);
    color: #fff;
    border-radius: 50px;
    font-size: 12px;
    margin: 0;
    padding: 2px 10px;
    text-transform: uppercase;
  }

  .writeup-card-body a h4 {
    font-size: clamp(18px, 2.5vw, 20px);
    margin: 10px 0;
    transition: .5s;
  }

  .writeup-card-body p {
    font-size: clamp(16px, 2.5vw, 18px);
    margin: 0 0 40px 0;
    font-weight: 500;
    color: rgb(70, 68, 68);
  }

  .writeup-date {
    display: flex;
    margin-top: auto;
    align-items: center;
  }

  .writeup-date svg {
    width: 32px;
    height: 32px;
    border-radius: 0%;
    margin-right: 10px;
    object-fit: cover;
  }

  .writeup-date-info h5 {
    margin: 0;
  }


  
  .secSt-withAb{
    background: #1D1F2A;
    padding: 103px 15px;
  }
  
  
  .secSt-withAb-title{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 46px;
  }
  
  .secSt-withAb-title h5{
    text-align: center;
    margin-bottom:  30px;
    color: #fff;
    font-weight: 600;
    font-size: clamp(22px,5vw,35px);
    position: relative;
    font-weight: 800;
  }
  
  .secSt-withAb-title h5::after{
    position: absolute;
    bottom: -5px;
    content: " ";
    width: 50px;
    background: var(--color1);
    height: 2px;
    left: 50%;
    right: 50%;
    transform: translate(-25px, 50%);
  }


.secSt-withAb-main{
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

.secSt-withAb-block1, .secSt-withAb-bock2{
  flex: 1;
  margin: 20px;
}

.secSt-withAb-block1 img{
    width: 100%;
    object-fit: contain;
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    height: 323px;
}

.secSt-withAb-bock2-text{
  font-size: clamp(16px, 2.5vw, 18px);
  color: var(--color3);
}

.secSt-withAb-bock2-btn{
  text-align: left;
  padding-top: 30px;
}



.figures-main{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding-top: 46px;
  gap: 14px;
}

.figures-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 40px 20px;
  border-radius: 0px;
  background-color: #292A35;
  align-items: center;
  gap: 14px;
}

.figures-inner{
  background: #323440;
  padding: 20px;
  border-radius: 0px;
}


.figures-block svg {
  width: 45px;
  height: 45px;
  fill: var(--color1);
}
.figures-block .figures-number {
  font-size: clamp(22px, 2.5vw, 27px);
  font-weight: 800;
  color: var(--color12);
}

.figures-block .figures-text {
  color: var(--color3);
  font-size: 18px;
  text-align: center;
}

.nslAre{
  background: rgb(222,223,229);
  background: linear-gradient(90deg, rgba(222,223,229,1) 0%, rgba(114,65,213,1) 0%, rgba(228,123,116,1) 100%);
  padding: 46px 15px;
}

.nslAre-title{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nslAre-title h5{
  text-align: center;
  margin-bottom:  30px;
  color: #fff;
  font-weight: 600;
  font-size: clamp(22px,5vw,35px);
  position: relative;
  font-weight: 800;
}

.nslAre-title h5::after{
  position: absolute;
  bottom: -5px;
  content: " ";
  width: 50px;
  background: var(--color1);
  height: 2px;
  left: 50%;
  right: 50%;
  transform: translate(-25px, 50%);
}

.nslAre-main{
  display: flex;
  flex-direction: row-reverse;
}


.nslAre-b1, .nslAre-b2{
  flex: 1;
  margin: 20px;
}

.nslAre-b2-field input{
  display: block;
  width: 100%;
  appearance: none;
  background: none;
  box-shadow: none;
  font-family: inherit;
  padding: 20px;
  color: #fff;
  border: 0;
  border-color: var(--color1);
  background-color: rgba(255, 255, 255, 0.11);
}

.nslAre-b2-field input::placeholder{
  color: var(--color3);
  font-size: 16px;
}

.nslAre-b2-sub{
  padding-top: 30px;
}


.fees{
  background: #f8f8f8;
  padding:  46px 15px;
}


.fees-title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 46px;
}

.fees-title h5{
  text-align: center;
  margin-bottom:  30px;
  color: #060606;
  font-weight: 600;
  font-size: clamp(22px,5vw,35px);
  position: relative;
  font-weight: 800;
}

.fees-title h5::after{
  position: absolute;
  bottom: -5px;
  content: " ";
  width: 50px;
  background: var(--color12);
  height: 2px;
  left: 50%;
  right: 50%;
  transform: translate(-25px, 50%);
}

.fees-main{
  display: flex;
}

.fees-block{
  flex: 1;
  margin: 20px;
  background: #fff;
  padding: 30px 50px;
}

.fees-header h4{
  font-size: clamp(18px, 2.5vw, 20px);
  color: var(--color2);
}

.fees-price-month{
  padding: 10px 0;
}

.fees-price-month .fpm1{
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 800;
  color: var(--color12);
}

.fees-price-month .fpm2{
  font-weight: 600;
}


.fees-service ul li{
  position: relative;
}

.fees-service ul li::before{
  position: absolute;
  bottom: 23px;
  content: " ";
  width: 10px;
  background: var(--color12);
  height: 10px;
  left: 5px;
  transform: translate(-25px, 50%);
  border-radius: 100%;
}


.fees-btn{
  padding-top: 20px;
  display: flex;
  justify-content: center;
}



.purchaser{
  background: #FFFFFE;
  padding:  46px 15px;
}


.purchaser-title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 46px;
}

.purchaser-title h5{
  text-align: center;
  margin-bottom:  30px;
  color: #060606;
  font-weight: 600;
  font-size: clamp(22px,5vw,35px);
  position: relative;
  font-weight: 800;
}

.purchaser-title h5::after{
  position: absolute;
  bottom: -5px;
  content: " ";
  width: 50px;
  background: var(--color12);
  height: 2px;
  left: 50%;
  right: 50%;
  transform: translate(-25px, 50%);
}

.df {
  display: flex;
}

.slider-container {
  padding: 2rem 0;
  list-style: none;
  position: relative;
  background-color: rgba(255, 255, 255, 0.2);
  margin-left: auto;
  margin-right: auto;
  height: 20rem;
  width: 60%;
  top: 0;
  left: 0;
}

.slider {
  display: none;
  position: absolute;
}

.purchaser-main {
  height: 100%;
  position: relative;
}

.purchaser-block-img {
  width: 102px;
  height: 102px;
  border-radius: 0%;
  border: 2px solid var(--color12);
}

.purchaser-block-text {
  font-size: 1.4rem;
  line-height: 1.6;
  color: #4d4d4d;
}

.purchaser-block-customer {
  font-size: clamp(18px,2.5vw,20px);
  font-weight: 800;
  color: var(--color12);
}

.purchaser-block-customer {
  display: block;
  margin-top: 1.2rem;
}

.btn-slide {
  background-color: unset;
  border: none;
  color: var(--color12);
  top: 50%;
  position: absolute;
  transition: all 0.3s ease;
}

.btn-slide:hover {
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  color: var(--color12);
}

.purchaser-main svg {
  fill: var(--color12);
  width: 45px;
  height: 45px;
}

.btn-slide--next {
  left: 10%;
  z-index: 1;
}

.btn-slide--prev {
  right: 10%;
  z-index: 1;
}

.active-slide {
  display: list-item;
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.btn-dots {
  margin-top: 0.8rem;
  justify-content: center;
  gap: 0.8rem;
}

.active-dot {
  background-color: var(--color12) !important;
}

.btn-dot {
  border: 1px solid #fff;
  border-radius: 100px;
  height: 1.4rem;
  width: 1.4rem;
  background-color: #fdf2e9;
  transition: all 0.3s ease-out;
}

.btn-dot:hover {
  cursor: pointer;
  background-color: var(--color12) !important;
  transition: all delay 0.3s ease-in;
}


.akrd{
  background: #FFFFFE;
  padding:  46px 15px;
}


.akrd-title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 46px;
}

.akrd-title h5{
  text-align: center;
  margin-bottom:  30px;
  color: #060606;
  font-weight: 600;
  font-size: clamp(22px,5vw,35px);
  position: relative;
  font-weight: 800;
}

.akrd-title h5::after{
  position: absolute;
  bottom: -5px;
  content: " ";
  width: 50px;
  background: var(--color12);
  height: 2px;
  left: 50%;
  right: 50%;
  transform: translate(-25px, 50%);
}




.akrd-block {
  border-top: 1px solid #c5c5c5;
  color: #333;
}

.akrd-block h2 {
  padding: 15px;
  margin: 0;
  cursor: pointer;
  position: relative;
  font-size: clamp(20px,2.5vw,22px);
}


.akrd-block h2::before {
  content: "+";
  position: absolute;
  right: 10px; 
}

.akrd-block.active h2::before {
  content: "-";
}

.akrd-text {
  max-height: 0; 
  overflow: hidden; 
  transition: max-height 0.4s ease-out; 
  padding: 0 10px;
}

.akrd-text p {
  padding: 10px 0;
  margin: 0;
  font-size: clamp(16px,2.5vw,18px);
}

.akrd-text.active {
  max-height: auto; 
}



.lgtps{
  background: #f8f8f8;
  padding:  46px 15px;
}


.lgtps-title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 46px;
}

.lgtps-title h5{
  text-align: center;
  margin-bottom:  30px;
  color: #060606;
  font-weight: 600;
  font-size: clamp(22px,5vw,35px);
  position: relative;
  font-weight: 800;
}

.lgtps-title h5::after{
  position: absolute;
  bottom: -5px;
  content: " ";
  width: 50px;
  background: var(--color12);
  height: 2px;
  left: 50%;
  right: 50%;
  transform: translate(-25px, 50%);
}


.lgtps-main{
  display: flex;
  flex-direction: column;
}

.lgtps-block{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.lgtps-image{
  background: #292A35;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin: 15px;
}

.lgtps-image img{
  object-fit: contain;
  width: 102px;
  height: 102px;
}


.nfrmArea{
  background: url(uploads/2024-10/SoftBgOverlay_2024-10-10_19-00-533.png), #1C1E29;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  padding:  46px 15px;
}


.nfrmArea-title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 46px;
}

.nfrmArea-title h5{
  text-align: center;
  margin-bottom:  30px;
  color: #fff;
  font-weight: 600;
  font-size: clamp(22px,5vw,35px);
  position: relative;
  font-weight: 800;
}

.nfrmArea-title h5::after{
  position: absolute;
  bottom: -5px;
  content: " ";
  width: 50px;
  background: var(--color1);
  height: 2px;
  left: 50%;
  right: 50%;
  transform: translate(-25px, 50%);
}

.nfrmArea-block{
  display: flex;
  align-items: center;
  justify-content: center;
}


.nfrmArea-block{
  background: rgba(255, 255, 255, 0.05);
  padding: 30px;
}

.nfrmArea-main .form{
  width: 100%;
}


.nfrmArea label{
  color: #fff;
}

.nfrmArea .field{
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.nfrmArea .input-group--panel-control{
  display: block;
  width: 100%;
  appearance: none;
  background: none;
  box-shadow: none;
  font-family: inherit;
  padding: 10px;
  color: #fff;
  border: 0;
  background-color: rgba(255, 255, 255, 0.08);
}

.nfrmArea .input-group--panel-control::placeholder{
  color: var(--color3);
}

.nfrmArea .textarea-group--panel-control::placeholder{
  color: var(--color3);
}

.nfrmArea .textarea-group--panel-control{
  display: block;
  width: 100%;
  appearance: none;
  background: none;
  box-shadow: none;
  font-family: inherit;
  padding: 10px;
  color: #fff;
  border: 0;
  background-color: rgba(255, 255, 255, 0.08);
}

.nfrmArea .nfrmArea-check{
  align-items: center;
  padding: 15px 0;
  display: flex;
  gap: 8px;
}

.nfrmArea .nfrmArea-check a{
  text-decoration: underline;
  color: var(--color12);
}

.nfrmArea-btn{
  padding-top: 20px;
}




.nfter{
  background: #FAFAFA;
  padding:  30px 15px;
}


.nfter-main{
  display: flex;
  flex-direction: row-reverse;
}

.nfter-logo, .nfter-cnt, .nfter-vng, .nfter-adrsm{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  align-items: center;
}

.nfter-logo  a{
  display: flex;
  gap: 10px;
  align-items: center;
}

.nfter-logo  a img {
  width: 32px;
  height: 32px;
}

.nfter-logo a h2 {
  color: var(--color12);
  font-size: clamp(16px, 2.5vw, 18px);
  transition: .5s;
}

.nfter-logo a  h2:hover {
  color: var(--color12);
}

.nfter-cnt-title h3, .nfter-vng-title h3,.nfter-adrsm-title h3{
  font-size: clamp(17px, 2.5vw, 19px);
  font-weight: 800;
  color: var(--color12);
}


.nfter-cnt-inrs a , .nfter-vng-inrs a, .nfter-adrsm-text div{
  font-size: clamp(15px, 2.5vw, 17px);
  transition: .5s;
  word-break: break-all;
  color: #060606;
}

.nfter-cnt-inrs a:hover, .nfter-vng-inrs a:hover{
  color: var(--color12);
}

.nfter-vng-inrs{
  display: flex;
  flex-direction: column;
  gap: 5px;
}



.cprtes{
  background: #e1e1e1;
  padding:  20px 15px;
}

.cprtes-main{
  display: flex;
}

.cprtes-text, .cprtes-pl{
  flex: 1;
}

.cprtes-text{
  font-size: 18px;
  font-weight: 800;
  color: #060606;
}

.cprtes-pl a{
  font-size: clamp(15px, 2.5vw, 17px);
  transition: .5s;
  color: #060606;
}

.cprtes-pl a:hover{
  color: var(--color12);
}

.cprtes-pl{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}




.stranica-ons{
  background: #FFFFFE;
  padding:  46px 15px;
}


.stranica-ons-title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 46px;
}

.stranica-ons-title h5{
  text-align: center;
  margin-bottom:  30px;
  color: #060606;
  font-weight: 600;
  font-size: clamp(22px,5vw,35px);
  position: relative;
  font-weight: 800;
}

.stranica-ons-title h5::after{
  position: absolute;
  bottom: -5px;
  content: " ";
  width: 50px;
  background: var(--color12);
  height: 2px;
  left: 50%;
  right: 50%;
  transform: translate(-25px, 50%);
}

.stranica-ons-main{
  display: flex;
  flex-direction: column;
}

.stranica-ons-text, .stranica-ons-block{
  flex: 1;
  margin: 15px;
}

.stranica-ons-text div{
  font-size: clamp(16px,2.5vw,18px);
  font-weight: 400;
  color: #060606;
}


.stranica-ons-block video {
  width: 100%;
  height: 323px;
  object-fit: cover;
  border: 8px solid var(--color12);
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}


.principal-section{
  background: #FFFFFE;
  padding:  46px 15px;
}


.principal-section-title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 46px;
}

.principal-section-title h5{
  text-align: center;
  margin-bottom:  30px;
  color: #060606;
  font-weight: 600;
  font-size: clamp(22px,5vw,35px);
  position: relative;
  font-weight: 800;
}

.principal-section-title h5::after{
  position: absolute;
  bottom: -5px;
  content: " ";
  width: 50px;
  background: var(--color12);
  height: 2px;
  left: 50%;
  right: 50%;
  transform: translate(-25px, 50%);
}


.principal-section-main {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 49px;
  padding: 53px 0;
}

.principal-section-main-inner{
  position: relative;
}

.principal-section-main-inner img{
  position: relative;
  z-index: 2;
  border-radius: 15px;
  width: 40%;
  margin: 49px;
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

.principal-section-content {
  color: var(--color2);
  opacity: 0.8;
  font-size: 16px;
}

.principal-rating{
  display: flex;
  justify-content: center;
  gap: 10px;
}

.principal-rating svg{
  fill: var(--color1);
  width: 32px;
  height: 32px;
}

.help-and-support{
  background: #FFFFFE;
  padding:  46px 15px;
}


.help-and-support-title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 46px;
}

.help-and-support-title h5{
  text-align: center;
  margin-bottom:  30px;
  color: #060606;
  font-weight: 600;
  font-size: clamp(22px,5vw,35px);
  position: relative;
  font-weight: 800;
}

.help-and-support-title h5::after{
  position: absolute;
  bottom: -5px;
  content: " ";
  width: 50px;
  background: var(--color12);
  height: 2px;
  left: 50%;
  right: 50%;
  transform: translate(-25px, 50%);
}

.help-and-support-main{
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  gap: 49px;
  margin: 49px 0;
  justify-content: space-between;
}


.help-and-support-main .form {
  width: 100%;
  padding: 49px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.help-and-support-field input {
  background-color: #f6f6f6;
  padding: 1rem;
  padding-right: 3rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-radius: 2.1rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  width: 100%;
  border: 0;
  margin: 10px 0;
}


.help-and-support-fields textarea {
  background-color: #f6f6f6;
  padding: 1rem;
  padding-right: 3rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-radius: 2.1rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  width: 100%;
  border: 0;
  margin: 10px 0;
}

 .help-and-support-field input::placeholder, .help-and-support-fields textarea::placeholder{
  font-size: 17px;
  color: var(--color2);
}

.help-and-support-chk {
  display: flex;
  flex-direction: row;
  gap: 14px;
  padding: 15px 0;
}

.help-and-support-chk input {
  margin-top: 0;
}

.help-and-support-chk-label {
  font-size: 17px;
  margin-left: 5px;
  color: var(--color2);
}

.help-and-support-chk-label a{
  font-weight: 800;
  color: var(--color12) !important;
}


.help-and-support-contact-adress{
  flex: 1;
  padding: 49px;
  display: flex;
  gap: 13px;
  flex-direction: column;
}

.help-and-support-contact-adress-inner {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 13px;
  flex-direction: row;
  justify-content: center;
  text-align: center;
}

.help-and-support-contact-adress-box{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}

.handSuppContact{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.help-and-support-contact-adress-box svg{
  width: 45px;
  height: 45px;
  fill: var(--color12);
}

.help-and-support-contact-adress-cont a, .help-and-support-contact-adress-cont  div{
    word-break: break-all;
  font-size: clamp(16px,2.5vw,18px);
    font-weight: 800;
    color: #060606;
    transition: .5s;
}

.help-and-support-contact-adress-cont a:hover{
  color: var(--color12) 
}


.privacy-settings{
  word-break: break-all;
    padding: 70px 70px;
    color: var(--color2);
    position: relative;
    background:  #FFFFFE;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 1;
  }

  .privacy-settings .container{
    position: relative;
    z-index: 1;
  }
  
  .privacy-settings h1.privacy-settings-title{
      font-size: 24px;
      font-weight: 800;
      color: var(--color2);
  }
  
  .privacy-settings h2,h3{
      font-size: 19px;
      font-weight: 800;
      color: var(--color2);
  }
  
  .privacy-settings  a{
      text-decoration: underline;
      color: var(--color2);
      word-break: break-all;
  }
  
  .privacy-settings ol li {
      color: var(--color2);
  }
  
  .privacy-settings ul{
      list-style: disc !important;
      text-align: left;
      margin: 14px;
  }


  
  .button-1 {
    background-color: var(--color1);
    color: #fff;
    padding: 8px 16px;
    border: 2px solid var(--color1);
    border-radius: 5px;
    transition: border-color 0.3s, color 0.3s;
  }
  
  .button-1:hover {
    border-color: var(--color2);
    color: var(--color2);
  }
  
  .button-2 {
    background-color: var(--color2);
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    transition: opacity 0.5s;
  }
  
  .button-2:hover {
    color: var(--color1);
  }

  .button-3 {
    background-color: var(--color2);
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    transition: transform 0.5s, color 0.5s;
  }
  
  .button-3:hover {
    transform: scale(1.1);
    color: var(--color1);
  }
  

  .button-4 {
    background-color: var(--color1);
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    transition: color  0.5s, border 0.5s;
  }
  
  .button-4:hover {
    color: var(--color2);
    border: 2px dashed var(--color12);
  }
  
  .button-5 {
    background-color: var(--color2);
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    transition: background-color 0.5s, color 0.5s;
  }
  
  .button-5:hover {
    background-color: var(--color1);
    color: #fff;
  }
  
 
  

  @media (max-width: 1200px) {
    .our-help-main, .writeup-main{
      grid-template-columns: 2fr 2fr !important;
    }
 
  }
 


  @media (max-width: 992px) {
    nav .menu {
      display: flex;
    }
  
    nav ul {
      --height: 0px;
  
      flex-direction: column;
      background: #fff;
      position: absolute;
      width: 100%;
      left: 0;
      top: 56px;
      height: var(--height);
      transition: 1s cubic-bezier(.68,-0.55,.27,1.55);
    }
    nav ul.active {
      height: auto;
      
      
      transition: 1s ease;
    }
  
    nav ul li {
      width: 100%;
      text-align: center;
    }
    nav ul li a {
      width: 100%;
      text-transform: capitalize;
    }



    .dropdown-menu {
      position: static;
      box-shadow: none;
      width: 100%;
      height: auto;
    }
  
    .dropdown-menu li {
      text-align: center;
    }

   
    .osn-heros-main {
      flex-direction: column;
    }

    .bnfe-main{
      flex-direction: column;
    }

    .main-hub-main{
      flex-direction: column;
    }

    .secSt-withAb-main{
      flex-direction: column;
    }

    .figures-main{
      grid-template-columns: 2fr 2fr !important;
    }

    .nslAre-main{
      flex-direction: column;
    }

    .fees-main{
      flex-direction: column;
    }

    .slider-container{
      height: 25rem;
    }

    .lgtps-block {
        grid-template-columns: 2fr 2fr !important;
    }

    .nfter-main {
        flex-direction: column;
        gap: 10px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .nfter-logo a {
        flex-direction: column;
        align-items: center;
    }

    .cprtes-main{
      flex-direction: column;
    }

    .cprtes-text{
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
    }

    .cprtes-pl{
      flex-direction: column;
    }

    .help-and-support-main{
      flex-direction: column;
    }

    .rn2-main{
      flex-direction: column;
    }

    .fees-block{
      margin: 7px;
    }

    .osn-heros-block, .osn-heros-block-two{
      margin: 15px;
    }

  }

@media(max-width: 768px){
  .our-help-main, .writeup-main{
    grid-template-columns: 1fr !important;
  }

  .figures-main{
    grid-template-columns: 1fr !important;
  }

  .btn-slide--next, .btn-slide--prev{
    display: none;
  }

  .slider-container{
    width: 90%;
  }

  .lgtps-block {
      grid-template-columns: 1fr !important;
  }

  .principal-section-main-inner img{
    width: 100%;
    margin: 0;
    margin-bottom:  30px;
    height: auto;
  }

}



@media(max-width: 600px){
  
    .privacy-settings{
        padding: 46px 46px;
    }
  
}

@media (max-width: 575px){
    button{
        width: 100%;
    }

    .main-hub-image img{
      height: auto;
    }
   
    .secSt-withAb-block1 img{
      height: auto;
    }

    .osn-heros-block-two img{
      height: auto;
    }

    .stranica-ons-block video{
      height: auto;
    }
}


@media (max-width: 425px){
  .btn-dots{
    margin-top: 3.8rem;
  }

  .purchaser-block-text{
    line-height: inherit;
  }
}