@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');


* {
   box-sizing: border-box;
   font-family: 'Poppins', sans-serif;
}

:root {
   --clr-white: #fff;
   --clr-dark: #101418;
   --clr-primary: #687454;
   --clr-primary-dark: #2B3A0F;
}

body {
   overflow-x: hidden;
   font-size: 14px;
   line-height: 1.4;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   letter-spacing: 1px;
}

a {
   transition: all 0.3s ease-in-out;
   text-decoration: none;
   color: var(--sb-red);
}

a:hover {
   text-decoration: none;
   color: var(--sb-darkRed);
}

ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
}

/* form input  */

.form-group {
   margin: 0 0 15px;
}

.form-control {
   border-radius: 0;
   padding: 10px 25px;
   font-size: 14px;
   min-height: 60px;
   border-color: var(--clr-primary);
   transition: all 0.3s ease-in-out;
   font-weight: 500;
   position: relative;
   z-index: 9;
}

.form-control::placeholder {
   font-weight: normal;
}

.form-control:focus {
   box-shadow: none;
   border-color: var(--sb-red);
}

/* form input end */

/* Buttons */

.ThemeBtn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   width: fit-content;
   min-width: 100px;
   padding: 8px 20px;
   border-radius: 0;
   color: var(--clr-white);
   border: 1px solid var(--clr-dark);
   background: var(--clr-dark);
   position: relative;
   font-size: 16px;
   font-family: 'Poppins', sans-serif;
   text-transform: uppercase;
   font-weight: 500;
   line-height: 24px;
   letter-spacing: 0.02em;
   overflow: hidden;
   transition: all 0.3s ease-in-out;
}

.ThemeBtn img {
   width: 24px;
}

.ThemeBtn-outline {
   padding: 8px 20px;
   border-radius: 0;
   color: var(--clr-dark);
   position: relative;
   min-width: 100px;
   background: transparent;
   border: 1px solid var(--clr-dark);
   font-size: 16px;
   font-family: 'Poppins', sans-serif;
   text-transform: uppercase;
   font-weight: 500;
   line-height: 24px;
   letter-spacing: 0.02em;
   transition: all 0.3s ease-in-out;
}

.ThemeBtn:hover,
.ThemeBtn-outline:hover {
   background: var(--clr-primary);
   color: var(--clr-white);
   border-color: var(--clr-primary);
}

.ThemeBtn-white:hover {
   color: var(--clr-white);
   background: var(--clr-dark);
   border-color: var(--clr-dark);
}

/* Buttons end */

/* Header */

header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 999;
   will-change: transform;
   transition: transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1), background 0.3s;
   transform: translateY(0);
   min-height: 80px;
   animation-duration: .5s;
   animation-fill-mode: both;
   will-change: transform, opacity
}

header.headroom--not-top {
   background: #d2d6cc;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

header.whiteHeader {
   box-shadow: none;
   background-color: #fff;
   border-bottom: 1px solid #efefef;
}

header.headerDown {
   animation-name: headerDown
}

@keyframes headerDown {
   0% {
      transform: translateY(-100%)
   }

   100% {
      transform: translateY(0)
   }
}

header.headerUp {
   animation-name: headerUp
}

@keyframes headerUp {
   0% {
      transform: translateY(0)
   }

   100% {
      transform: translateY(-100%)
   }
}

.navbar-brand {
   display: block;
   text-align: center;
   width: 100%;
}

.nav-item .nav-link {
   font-size: 16px;
   font-weight: 400;
   line-height: 24px;
   color: var(--clr-dark);
   padding: 0 !important;
}

.navbar-nav {
   gap: 40px;
   flex-direction: row;
}

.UserAccess {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 20px;
   height: 100%;
}

/* Header end */

.custom-space {
   padding: 60px 0;
}

.center-head {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
}

.secHead h2 {
   font-size: 40px;
   line-height: 60px;
   font-weight: 600;
   margin: 0;
}

.secHead h4 {
   font-size: 16px;
   line-height: 24px;
   color: var(--clr-dark);
   font-weight: 500;
   margin: 0;
}

.secHead p {
   font-size: 16px;
   line-height: 26px;
   font-weight: 200;
   margin: 0;
}


.HighLightColor {
   color: var(--clr-primary);
}

.dividerBlock {
   display: flex;
   gap: 5px;
   margin: 15px 0px 25px;
}

.dividerCenter {
   justify-content: center;
}

.dividerBlock span {
   display: block;
   height: 4px;
   width: 4px;
   background: var(--clr-dark);
}

.dividerBlock span:first-child {
   width: 50px;
}

.dividerBlock span:last-child {
   width: 20px;
   background: linear-gradient(89.71deg, var(--clr-dark) 0.19%, rgba(16, 20, 24, 0) 99.75%);
}

/********************************************/

/* modal */


.modal-md {
   max-width: 600px;
}

.modal {
   backdrop-filter: blur(5px);
}

.modal-dialog {
   padding: 0 10px;
}

.modal-content {
   border: 0;
   border-radius: 10px;
   overflow: hidden;
}

.modal-content .btn-close {
   width: 30px;
   height: 30px;
   opacity: 1 !important;
   border-radius: 100%;
   position: absolute;
   top: 10px;
   right: 10px;
   background: black;
   box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
}

.modal-content .btn-close i {
   color: white;
   font-size: 18px;
}

/* modal end */

/* ComingSoon */

.ComingSoon {
   height: calc(100vh - 85px);
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
}

.waviy {
   position: relative;
   -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0, 0, 0, 0.2));
   font-size: 60px;
}

.waviy span {
   font-weight: 500;
   position: relative;
   display: inline-block;
   color: var(--text-dark);
   text-transform: uppercase;
   -webkit-animation: waviy 1s infinite;
   animation: waviy 1s infinite;
   -webkit-animation-delay: calc(0.1s * var(--i));
   animation-delay: calc(0.1s * var(--i));
}

@keyframes waviy {

   0%,
   40%,
   100% {
      transform: translateY(0)
   }

   20% {
      transform: translateY(-20px)
   }
}

/* ComingSoon end */

/* swiper */

.swiper {
   width: 100%;
}

.swiper-button-next {
   width: 35px;
   height: 35px;
   display: flex;
   background-color: var(--clr-white);
   border-radius: 55px;
   justify-content: center;
   align-items: center;
   transition: all 0.2s ease-in-out;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
   background-color: #c0c0c0;
}

.swiper-button-next::after {
   width: auto;
   display: block;
   font-size: 15px;
   color: #000;
   font-weight: bold;
}

.swiper-button-prev {
   width: 35px;
   height: 35px;
   display: flex;
   background-color: var(--clr-white);
   border-radius: 55px;
   justify-content: center;
   align-items: center;
   transition: all 0.2s ease-in-out;
}

.swiper-button-prev::after {
   width: auto;
   display: block;
   font-size: 15px;
   color: #000;
   font-weight: bold;
}

/* swiper end */


/* snake animation */

.snack-animation {
   position: relative;
   overflow: hidden;
}


.snack-animation .snack:nth-child(1) {
   position: absolute;
   top: 0;
   right: 0;
   width: 100%;
   height: 1px;
   background: linear-gradient(to right, rgba(43, 58, 15, 0), var(--clr-primary));
   animation: animate1 2s linear infinite;
}

@keyframes animate1 {
   0% {
      transform: translateX(-100%);
   }

   100% {
      transform: translateX(100%);
   }
}

.snack-animation .snack:nth-child(2) {
   position: absolute;
   top: 0;
   right: 0;
   height: 100%;
   width: 1px;
   background: linear-gradient(to bottom, rgba(43, 58, 15, 0), var(--clr-primary));
   animation: animate2 2s linear infinite;
   animation-delay: 1s;
}

@keyframes animate2 {
   0% {
      transform: translateY(-100%);
   }

   100% {
      transform: translateY(100%);
   }
}

.snack-animation .snack:nth-child(3) {
   position: absolute;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 1px;
   background: linear-gradient(to left, rgba(43, 58, 15, 0), var(--clr-primary));
   animation: animate3 2s linear infinite;
}

@keyframes animate3 {
   0% {
      transform: translateX(100%);
   }

   100% {
      transform: translateX(-100%);
   }
}

.snack-animation .snack:nth-child(4) {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 1px;
   background: linear-gradient(to top, rgba(43, 58, 15, 0), var(--clr-primary));
   animation: animate4 2s linear infinite;
   animation-delay: 1s;
}

@keyframes animate4 {
   0% {
      transform: translateY(100%);
   }

   100% {
      transform: translateY(-100%);
   }
}

.rotate-animation {
   animation: rotate-animation 10s infinite linear;
}

@keyframes rotate-animation {
   0% {
      transform: rotate(0deg);
   }

   50% {
      transform: rotate(180deg);
   }

   100% {
      transform: rotate(360deg);
   }
}

/* snake animation end */