:root {
  --banner-color: #e6edec;
  --bg-color: #f6f6f6;
  --grey-color: #666666;
  --green-color: #00424a;
  --btn-hover-color: #424649;
  --input-bg-color: #f3f3f5;
  --black-color: #111111;
  --medium-font-size: clamp(12px, 0.94vw, 18px);
  --lg-font-size: clamp(14px, 1.6vw, 30px);
}
* {
  margin: 0;
  padding: 0;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/lora-regular.woff2) format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/poppins-regular.woff2) format("woff2");
}
html {
  scroll-behavior: smooth !important;
}
body {
  font-family: "Lora", serif;
  overflow-x: hidden;
  
}
a {
  text-decoration: none;
}
p {
  margin-bottom: 0;
}
.text-grey {
  color: var(--grey-color);
}

.ff-poppins {
  font-family: "Poppins", sans-serif;
}
.black-color {
  color: var(--black-color);
}

.btn {
  border-radius: 5px !important;
  font-size: var(--medium-font-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.btn-dark {
  --bs-btn-bg: var(--black-color);
}
.btn-arrow-img {
  margin-left: clamp(5px, 0.7vw, 10px);
}
.transparent-btn:hover {
  background-color: transparent !important;
  color: var(--green-color);
  font-weight: 600 !important;
}
.btn-type-bg:active,
.btn-check:checked + .btn-type-bg {
  background-color: var(--btn-hover-color) !important;
  color: white !important;
  border-color: transparent !important;

}
.btn-type-color:active,
.btn-check:checked + .btn-type-color {
  color: var(--green-color) !important;
  background-color: transparent !important;
  border-color: var(--black-color) !important;

}
.btn-type-none:active,
.btn-type-none.active,
.btn-type-none.show,
.btn-check:checked + .btn-type-none,
.btn-type-none:first-child:active
.btn-check:checked + .btn-type-none {
  background-color: transparent !important;
  color: var(--black-color) !important;
  border-color: inherit !important;

}
.reveal {
  transform: translateY(20px);
  opacity: 0;
}

.zoom-in-left{ 
  /* transition-duration: 1s; */
  /* transition-timing-function: cubic-bezier(.25, .46, .45, .94);  */
  /* transition-timing-function: ease-in; */
  transform: translateX(40px) scale(0.85);
  opacity: 0; 
  /* transition-property: opacity, transform;  */
  transition: all 1.5s ease-in;
}
.zoom-in-left.visible{
  opacity: 1;
  transform: translateX(0) scale(1);
}

.speed {
  transition:all 0.5s ease-in;
}
.medium {
  transition:all  0.7s ease-in;
}
.slow {
  transition:all 1s ease-in;
}
.extra-slow {
  transition: all 1.2s ease-in;
}

.dead-slow {
  transition:  all 1.3s ease-in;
}
.slowest{
  transition:all  1.5s ease-in;
}

.delay-1{
  transition-delay: 0.1s;
}
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.reveal.visible {
  transform: translateY(0);
  opacity: 1;
}

.reveal-card-text{
  opacity: 0;
  transform: translateY(20px);
}
.reveal-card-text.visible {
  transform: translateY(0);
  opacity: 1;
}

.reveal-opacity {
  opacity: 0;
  transition: opacity 1s ease-in;
}

.reveal-opacity.visible {
  opacity: 1;
}

.reveal-card {
  transform: scale(0);
  
}

.reveal-card.visible {
  transform: scale(1);
  transition: all 0.8s ease-in;
  transition-delay: 0.3s;
}

.reveal-left {
  transform: translateX(-20px);
  opacity: 0;
  transition: all 0.8s ease-in;
}
.reveal-left.extra-slow{
  transition: all 1.1s ease-in;
}
.reveal-right.extra-slow{
  transition: all 1.1s ease-in;
}
.reveal-left.visible {
  transform: translateX(0);
  opacity: 1;
}

.reveal-right {
  transform: translateX(20px);
  opacity: 0;
  transition: all 0.8s ease-in;
}

.reveal-right.visible {
  transform: translateX(0);
  opacity: 1;
}

.reveal-text {
  transform: translateY(40px);
  transition: transform 0.6s ease-in;
}

.reveal-text.visible {
  transform: translateY(0);
}

.reveal-header {
  overflow-y: hidden; 
  line-height: 1.3;
}

.reveal-header span {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-in;
  will-change: opacity, transform;

}

.reveal-header.visible span {
  opacity: 1;
  transform: translateY(0);
}


.reveal-header.visible span:nth-child(1) { transition-delay: 0.1s; }
.reveal-header.visible span:nth-child(2) { transition-delay: 0.2s; }
.reveal-header.visible span:nth-child(3) { transition-delay: 0.3s; }
.reveal-header.visible span:nth-child(4) { transition-delay: 0.4s; }
.reveal-header.visible span:nth-child(5) { transition-delay: 0.5s; }
.reveal-header.visible span:nth-child(6) { transition-delay: 0.6s; }
.reveal-header.visible span:nth-child(7) { transition-delay: 0.7s; }
.reveal-header.visible span:nth-child(8) { transition-delay: 0.8s; }
.reveal-header.visible span:nth-child(9) { transition-delay: 0.9s; }
.reveal-header.visible span:nth-child(10) { transition-delay: 1s; }
.reveal-header.visible span:nth-child(11) { transition-delay: 1.1s;}
.reveal-header.visible span:nth-child(12) { transition-delay: 1.2s;}


.header {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 20;
}
.header.scrolled {
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.header.shadowed {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.header .navbar {
  padding: 11px clamp(10px, 2.5vw, 48px) 10px;
}
.navbar .navbar-nav {
  gap: clamp(10px, 1.85vw, 35px);
}
.navbar .navbar-nav li{
  justify-content: space-around;
}
.header .navbar .navbar-nav .nav-item .nav-link {
  color: black;
  font-weight: 500;
  font-size: clamp(13px, 0.97vw, 18px);
  /* transition: color 0.3s ease, font-weight 0.3s ease; */
  position: relative;
  color: #000;
  background-image: linear-gradient(
    to right,
    var(--green-color) 0%,
    var(--green-color) 50%,
    #000 50%,
    #000 100%
  );
  background-size: 200% 100%;
  background-position: 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; 
  transition: background-position 1s ease-in, font-weight 0.5s ease-in;


}
.header .navbar .navbar-nav .nav-item .nav-link:hover,
.header .navbar .navbar-nav .nav-item .nav-link.active {
  background-position: 0%;
  font-weight: 600 !important;
}


/* .header .navbar .navbar-nav .nav-item .nav-link:hover,
.header .navbar .navbar-nav .nav-item .nav-link.active {
  color: var(--green-color);
  font-weight: 600 !important;
} */
.header .navbar .dropdown-menu {
  border-radius: 0;
  border: none;
  width: clamp(120px, 17vw, 324px);
  padding: clamp(10px, 1.6vw, 30px);
  border-bottom: 3px solid var(--green-color);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.header .navbar .dropdown-menu[data-bs-popper] {
  margin-top: 0;
}
.header .navbar .dropdown-toggle::after {
  display: none;
}
.header .navbar .dropdown-item {
  padding: 10px 16px;
  font-size: clamp(11px, 0.84vw, 16px);
  white-space: wrap;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: clamp(7px, 0.84vw, 16px) 0;
  color: var(--black-color);
  line-height: clamp(13.5px, 1.2vw, 22px);
}
.header .navbar .dropdown-menu li:not(:last-child) .dropdown-item {
  border-bottom: 1px solid rgba(102, 102, 102, 0.2);
}

.header .navbar .dropdown-menu li:first-child .dropdown-item {
  padding-top: 0;
}

.header .navbar .dropdown-menu li:last-child .dropdown-item {
  padding-bottom: 0;
}

.header .navbar .dropdown-item:hover {
  color: var(--green-color);
  background-color: transparent !important;
}

.header .navbar .contact-btn {
  padding: clamp(3px, 0.38vw, 7px) clamp(9px, 2vw, 37.45px);
}

/*Footer */
footer {
  padding: clamp(15px, 1.61vw, 31px) clamp(20px, 6.25vw, 120px)
    clamp(15px, 1.61vw, 31px);
  margin: 0 auto;
}
.footer-content-container {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(102, 102, 102, 0.2);
  padding-bottom: clamp(20px, 2vw, 2vw);
}
.footer-logo-container {
  width: 45.8%;
}
.footer-logo-container .footer-logo {
  width: 9.3233vw;
}
.footer-logo-container p {
  font-size: clamp(12px, 0.88vw, 1rem);
  margin-top: clamp(10px, 1.3vw, 1.3vw);
  width: 19.48vw;
}
footer h3 {
  font-size: var(--medium-font-size);
  margin-bottom: clamp(12px, 0.88vw, 1rem);
  color: var(--black-color);
}

footer ul {
  list-style-type: none;
  padding-left: 0;
}
footer ul li {
  margin-bottom: 10px;
}
footer ul li a{
  font-size: clamp(11px, 0.88vw, 1rem);
}
footer ul li a,
.privacy-policy {
  color: var(--black-color);
  position: relative;
}
footer ul li a::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--black-color);
  left: 0;
  bottom: -2px;
  transform: scale(0);
  transition: transform 0.3s ease;
}
footer ul li a:hover::after,
footer ul li a.active::after {
  transform: scale(1);
}
.footer-contact-form-wrapper{
  position: relative;
   z-index: 4;
}
.footer-contact-form-container {
  width: clamp(150px, 27vw, 510px);
 

}
.footer-contact-form-container form {
  display: flex;
  justify-content: space-between;
  padding: 6px 5px;
  background-color: var(--bg-color);
  border-radius: 5px;
  border: 1px solid #1111;
  /* position: relative; */
}
.footer-contact-form-container form input:focus{
  border: 1px solid var(--green-color);
}
.footer-contact-form-container h3 {
  line-height: 1.55;
  color: var(--black-color);
  margin-bottom: clamp(15px, 1.32vw, 25px);
  font-size: clamp(16px, 1.565vw, 22px);
}
.footer-contact-form-container form input {
  width: 19.4vw;
  padding-inline: 15px;
  border: none;
  outline: none;
  background-color: transparent;
  font-size: clamp(12px, 0.8vw, 14px);
  margin-right: 5px;
}
  .footer-contact-form-container
  form
  input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  box-shadow: 0 0 0px 1000px transparent inset;
  -webkit-text-fill-color: var(--black-color);
  transition: background-color 5000s ease-in-out 0s;
}
.footer-contact-form-container form button {
  padding: clamp(6px, 0.63vw, 12px) clamp(10px, 1.75vw, 33px);
  background-color: var(--black-color);
  border: none;
}
.footer-contact-form-container form button:disabled{
  opacity: 1;
  background-color: var(--btn-hover-color);
  border-color:transparent;
}
.footer-contact-form-container form button:hover {
  background-color: var(--btn-hover-color);
}
:not(.btn-check) + .btn:active{
  background-color: var(--btn-hover-color);
}
.footer-contact-form-wrapper .footer-input-error {
  color: red;
  font-size: clamp(12px, 0.8vw, 0.95rem);
  margin-top: clamp(6px, 0.54vw, 10px);
  visibility: hidden;
  font-weight: 500;
  height: clamp(36px, 2.38vw, 45.6px);
  position: absolute;
  text-wrap: nowrap;
}
.footer-contact-form-wrapper .footer-input-error.success {
  color: var(--green-color);
}
.footer-contact-form-wrapper .footer-input-error.show {
  visibility: visible;
}
.copyright-container {
  display: flex;
  justify-content: space-between;
  font-size: clamp(11px, 0.8vw, 14px);
}
.copyright-container div {
  display: flex;
  align-items: center;
}
.copyright-container div p {
  border-right: 1px solid rgb(102, 102, 102, 0.38);
  padding-right: clamp(10px, 1.1vw, 20px);
  color: var(--black-color);
}
.copyright-container div a.privacy-policy:hover, .copyright-container div a.privacy-policy.active{
  color: var(--green-color);
  font-weight: 600;
}
.copyright-container div a {
  margin-left: clamp(8px, 1.1vw, 20px);
}
.copyright-container .follow-icons {
  gap: 5px;
}
.copyright-container .follow-icons a {
  transition: transform 0.5s ease;
}
.copyright-container .follow-icons a:hover {
  transform: scale(1.12);
}
.go-top-btn {
  display: none;
  position: fixed;
  width: clamp(25px, 2.72vw, 52px);
  height: clamp(25px, 2.72vw, 52px);
  right: clamp(15px, 1.8vw, 34px);
  bottom: 65px;
  z-index: 4;
  align-items: center;
  justify-content: center;
  background-color: var(--black-color);
  border-radius: 50%;
  border: none;
}
.go-top-btn.active {
  display: flex;
}
.go-top-btn.not-active {
  display: none;
}
.go-top-btn:hover {
  opacity: 0.9;
}
.go-top-btn img {
  width: clamp(16px, 1.77vw, 34px);
}
@media screen and (max-width: 1600px) {
  .btn-arrow-img {
    width: 26px;
  }
  .header .navbar {
    padding: 9px clamp(9px, 2.48vw, 48px) 8px;
  }
  .header .navbar .navbar-brand .logo {
    width: 5.05vw;
  }

  .footer-logo-container p {
    width: 22vw;
  }
  footer ul li {
    margin-bottom: 5px;
  }
  footer h3 {
    font-size: 15px;
  }

  footer a {
    font-size: clamp(11px, 0.8vw, 1rem);
  }
  .footer-contact-form-container  h3{
    font-size: 15px;
  }
  /* .footer-contact-form-container {
    width: clamp(120px, 24vw, 502px);
  } */
   .footer-contact-form-container form {
    padding: 5px;
  }
  .footer-contact-form-container form input {
    padding-inline: 12px;
  }
  .go-top-btn {
    bottom: 55px;
  }
  .copyright-container .follow-icons img {
    gap: 3px;
    
  }
  .copyright-container .follow-icons .linkedin{
    width: 24px;
  }
  .copyright-container .follow-icons .twitter{
    width: 22px;
  }

}

@media screen and (max-width: 1400px) {
  .btn {
    border-radius: 4px !important;
  }
  .btn-arrow-img {
    width: 23px;
  }
  .header .navbar {
    padding: 8px clamp(9px, 2.2vw, 48px) 8px;
  }
  .header .navbar .navbar-brand .logo {
    width: 5.1vw;
  }

  footer ul li {
    margin-bottom: 3px;
  }
  footer a {
    font-size: clamp(11px, 0.8vw, 1rem);
  }
  .footer-content-container .footer-contact-form-container form input {
    padding-inline: 10px;
  }
  .go-top-btn {
    bottom: 48px;
  }
  .copyright-container .follow-icons img {
    gap: 0px;
  }
  .copyright-container .follow-icons .linkedin{
    width: 20px;
  }
  .copyright-container .follow-icons .twitter{
    width: 18px;
  }
}

@media screen and (max-width:1280px){
  .header .navbar .dropdown-menu{
    display: none;
  }

}
@media screen and (max-width: 1024px) {
  .btn {
    border-radius: 3px !important;
  }
  .btn-arrow-img {
    width: 19px;
  }
  .header .navbar {
    padding: 7px clamp(12px, 2.2vw, 48px) 7px;
  }

  .header .navbar .navbar-brand .logo {
    width: 52px;
  }
  .header .nav-link {
    font-size: 11px;
  }
  .footer-content-container {
    gap: 20px;
  }
  footer ul li {
    margin-bottom: 0px;
  }
  footer h3 {
    font-size: 12px;
  }
  footer a {
    font-size: clamp(11px, 0.8vw, 1rem);
  }
  .footer-contact-form-container {
    width: clamp(275px, 27vw, 502px);
  }
  .footer-contact-form-container form {
    padding: 4px;
  }
  .footer-contact-form-container form input {
    padding-inline: 8px;
    border-radius: 3px;
    width: 100%;
  }
  .footer-logo-container {
    width: 35%;
  } 
  .footer-logo-container p {
    width: clamp(220px, 25vw, 25vw);
  }
  .footer-contact-form-container h3 {
    width: 100%;
  }
  .copyright-container .follow-icons .linkedin{
    width: 17px;
  }
  .copyright-container .follow-icons .twitter{
    width: 15px;
  }
  .footer-contact-form-container h3 {
    font-size: 14px;
  }
  .footer-contact-form-wrapper .footer-input-error {
    font-size: 11px;
  }
  .go-top-btn {
    bottom: 40px;
  }
}

@media screen and (max-width: 768px) {
  .btn-arrow-img {
    width: 17px;
  }
  .reveal-text {
  transform: translateY(20px);
  transition: transform 0.6s ease-in;
}
.header .navbar {
    padding: 8px clamp(12px, 2.2vw, 48px) 8px;
  }
  .header .navbar .navbar-toggler-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    
  }

  .header .navbar-toggler {
    border-radius: 0;
    padding: 0;
    border: none;
  }

  .navbar-toggler:focus {
    box-shadow: none !important;
  }
  .navbar-toggler:focus .navbar-toggler-icon {
    border: none;
  }
  .navbar-toggler-icon {
    display: none;
  }
  .header .navbar-nav {
    align-items: center;
  }
  .footer-content-container {
    flex-wrap: wrap;
    justify-content: start;
  }
  footer {
    padding: 15px clamp(20px, 5vw, 120px) 15px;
  }
  .footer-logo-container {
    width: 60%;
  }
  .footer-logo-container p {
    width: 100%;
    margin-top: 15px;
  }
  .footer-content-container .quick-links {
    flex: 1;
  }
  .footer-content-container .quick-links h3 {
    text-align: center;
  }
  footer ul li {
    width: 57px;
    margin-inline: auto;
  }
  .footer-contact-form-wrapper {
   margin: 0 auto; 
  }
  .footer-contact-form-container h3{
    text-align: center;
  }
  .footer-contact-form-container {
    width: 100%;
    margin: 0 auto;
  }
  .footer-contact-form-container h3{
    font-size: 15px;
    width: 80%;
    margin: 0 auto 15px;
  }
  .footer-contact-form-container form{
    width: 410px;
    margin: 0 auto;
  }

  .footer-contact-form-wrapper .footer-input-error {
    font-size: 12px;
    left: 0;
    width: 410px;
    margin: 10px auto 0;
    right: 0;
    text-align: left;
  }
  .go-top-btn {
    bottom: 45px;
  }
}

@media screen and (max-width: 576px) {
  footer a {
    font-size: 11px;
  }
   .footer-contact-form-container form input {
    width: 90%;
  }
  .go-top-btn img {
    width: 13px;
  }
}

@media screen and (max-width: 480px) {
  .header .navbar-brand {
    margin: 0;
  }

  .copyright-container .follow-icons .linkedin{
    width: 15px;
  }
  .copyright-container .follow-icons .twitter{
    width: 11px;
  }
  .footer-logo-container,
  .footer-content-container div,
  .footer-content-container .footer-contact-form-container {
    width: 80%;
  }
  .footer-logo-container .footer-logo {
    width: 55px;
  }
  .footer-logo-container p {
    width: 100%;
  }
  .footer-content-container .quick-links h3 {
    text-align: left;
  }
  .footer-content-container .quick-links ul li {
    margin-inline: 0;
  }
  .footer-content-container {
    flex-direction: column;
    padding-bottom: 30px;
  }
    .footer-contact-form-container form{
    width: clamp(280px, 87.5%, 87.5%);
    margin: 0 auto;
  }
  .footer-contact-form-container h3 {
    width: 90%;
  }
  .footer-contact-form-wrapper .footer-input-error {
    font-size: 12px;
    left: 0;
    width: clamp(280px, 87.5%, 87.5%);
    margin: 10px auto 0;
    right: 0
  }
}

@media screen and (max-width: 390px) {
  .header .container-fluid {
    --bs-gutter-x: 15px;
  }
  .header .navbar .contact-btn {
    font-size: 11px;
    padding: 4px 6px 3px;
  }
  .header .navbar .navbar-brand .logo {
    width: 48px;
  }
  footer h3 {
    font-size: 13px;
  }
  .footer-logo-container,
  .footer-content-container div,
  .footer-contact-form-container {
    width: 100%;
  }
  .footer-contact-form-container h3 {
    width: 100%;
  }
  .go-top-btn {
    bottom: 45px;
  }
}