/* ROOT */

:root {
   /* COLORS */
   --primary-black: #000000;
   --primary-white: #ffffff;
   --primary-green: #65b079;
   --black-300: rgba(0, 0, 0, 0.3);
   --blue: #3c6de9;
   --dark: #0a1024;
   --gray-light: #e6e4df;
   --gray-dark-1: #2f3029;
   --gray-dark-2: #212121;
   --orange: #ed6d2d;
   /* FONT-WEIGHT */
   --font-weight-300: 300;
   --font-weight-400: 400;
   --font-weight-500: 500;
   --font-weight-600: 600;
   --font-weight-700: 700;
   --font-weight-800: 800;
   /* NAV */
   --nav-container-height: 70px;
   /* SECTION-HEADING */
   --section-heading-font-size: 40px;
   --section-heading-line-height: 40px;
   --section-heading-margin-bottom: 33px;
}

@media (min-width: 360px) {
   :root {
      --section-heading-font-size: 45px;
      --section-heading-line-height: 45px;
   }
}

@media (min-width: 375px) {
   :root {
      --section-heading-font-size: 50px;
      --section-heading-line-height: 50px;
   }
}

@media (min-width: 480px) {
   :root {
      --section-heading-font-size: 60px;
      --section-heading-line-height: 60px;
      --section-heading-margin-bottom: 62px;
   }
}

@media (min-width: 576px) {
   :root {
      --section-heading-font-size: 75px;
      --section-heading-line-height: 75px;
   }
}

@media (min-width: 768px) {
   :root {
      --section-heading-font-size: 105px;
      --section-heading-line-height: 105px;
   }
}

@media (min-width: 992px) {
   :root {
      --section-heading-font-size: 140px;
      --section-heading-line-height: 140px;
      --section-heading-margin-bottom: 100px;
   }
}

@media (min-width: 1200px) {
   :root {
      --section-heading-font-size: 160px;
      --section-heading-line-height: 160px;
   }
}

@media (min-width: 1300px) {
   :root {
      --section-heading-font-size: 180px;
      --section-heading-line-height: 180px;
   }
}

/* BODY */

body {
   font-family: "Manrope", sans-serif;
   padding-top: var(--nav-container-height);
}

/* MAIN-NAVIGATION  */

.main-navigation {
   background-color: var(--primary-white);
   --nav-link-font-size: 16px;
   --nav-link-padding-inline: 17.5px;
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
   z-index: 999;
}

.main-navigation [class^="container-"] {
   min-height: var(--nav-container-height);
}

.main-navigation .header-logo {
   height: 31px;
}

.menu-list-items .nav-link {
   font-size: var(--nav-link-font-size);
   font-weight: var(--font-weight-500);
   color: var(--primary-black);
   padding-right: var(--nav-link-padding-inline);
   padding-left: var(--nav-link-padding-inline);
}

.menu-list-items .nav-link .dot {
   display: inline-block;
   background-color: #000000;
   width: 5px;
   height: 5px;
   border-radius: 100%;
   vertical-align: middle;
}

/* BANNER */

.banner {
   --banner-padding-top: 33px;
   --banner-title-font-size: 38px;
   --banner-title-line-height: 1.05;
   --banner-title-letter-spacing: -1.2px;
   --banner-title-margin-bottom: 46px;
   --banner-content-line-width: 30%;
   --banner-content-text-width: 70%;
   --banner-content-text-font-size: 16px;
   padding-top: var(--banner-padding-top);
   padding-bottom: var(--banner-padding-bottom);
}

@media (min-width: 360px) {
   .banner {
      --banner-title-font-size: 48px;
   }
}

@media (min-width: 414px) {
   .banner {
      --banner-title-font-size: 56px;
   }
}

@media (min-width: 480px) {
   .banner {
      --banner-padding-top: 50px;
      --banner-title-font-size: 67px;
      --banner-title-letter-spacing: -2.2px;
      --banner-title-margin-bottom: 78px;
      --banner-content-text-width: 50%;
      --banner-content-line-width: 50%;
      --banner-content-text-font-size: 18px;
   }
}

@media (min-width: 576px) {
   .banner {
      --banner-title-font-size: 53px;
   }
}

@media (min-width: 768px) {
   .banner {
      --banner-title-font-size: 73px;
      --banner-title-letter-spacing: -4.2px;
   }
}

@media (min-width: 992px) {
   .banner {
      --banner-padding-top: 105px;
      --banner-title-font-size: 85px;
      --banner-content-text-font-size: 23px;
      --banner-title-margin-bottom: 82px;
   }
}

@media (min-width: 1200px) {
   .banner {
      --banner-title-font-size: 107px;
   }
}

@media (min-width: 1400px) {
   .banner {
      --banner-title-font-size: 123px;
   }
}

.banner h1 {
   font-size: var(--banner-title-font-size);
   font-weight: var(--font-weight-700);
   color: var(--primary-black);
   line-height: var(--banner-title-line-height);
   letter-spacing: var(--banner-title-letter-spacing);
   margin-bottom: var(--banner-title-margin-bottom);
}

.banner h1>span {
   color: var(--blue);
}

.banner-content>* {
   flex: 0 0 auto;
}

.banner-content .banner-content-line {
   width: var(--banner-content-line-width);
}

.banner-content .banner-content-text {
   width: var(--banner-content-text-width);
}

.banner-content-line img {
   margin-top: 5px;
}

.banner-content .banner-content-text p {
   font-size: var(--banner-content-text-font-size);
   font-weight: var(--font-weight-500);
   color: var(--primary-black);
   margin-bottom: 0;
}

/* SECTION-HEADING */

.section-heading {
   position: relative;
   font-size: var(--section-heading-font-size);
   font-weight: var(--font-weight-800);
   color: var(--primary-black);
   line-height: var(--section-heading-line-height);
   padding-top: 15px;
   margin-bottom: var(--section-heading-margin-bottom);
}

.section-heading::before {
   display: block;
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   width: 100%;
   height: 1px;
   border-top: 1px solid var(--primary-black);
}

@media (min-width: 480px) {
   .section-heading {
      padding-top: 13px;
   }
}

/* CUSTOMERS */

.customers {
   --customers-padding-top: 85px;
   --customer-logo-height: 175px;
   --customer-logo-padding-inline: 50px;
   --heading-3-font-size: 20px;
   padding-top: var(--customers-padding-top);
}

@media (min-width: 480px) {
   .customers {
      --customer-logo-height: 207px;
      --customers-padding-top: 75px;
      --heading-3-font-size: 24px;
   }
}

@media (min-width: 576px) {
   .customer-row .col:nth-child(-n + 2) {
      margin-bottom: 63px;
   }
}

@media (min-width: 992px) {
   .customers {
      --customer-logo-height: 300px;
      --customers-padding-top: 142px;
      --heading-3-font-size: 35px;
   }

   .customer-row .col:nth-child(-n + 2) {
      margin-bottom: 103px;
   }
}

@media (max-width: 575.98px) {
   .customer-row .col:not(:last-child) {
      margin-bottom: 48px;
   }
}

.customer .customer-logo {
   min-height: var(--customer-logo-height);
   padding-right: var(--customer-logo-padding-inline);
   padding-left: var(--customer-logo-padding-inline);
   margin-bottom: 18px;
}

.customer .customer-logo-1 {
   background-color: var(--gray-light);
}

.customer .customer-logo-2 {
   background-color: var(--dark);
}

.customer .customer-logo-3 {
   background-color: var(--orange);
}

.customer .customer-logo-4 {
   background-color: var(--gray-dark-1);
}

.customer .customer-info h5 {
   font-size: 16px;
   font-weight: var(--font-weight-500);
   margin-bottom: 18px;
}

.customer .customer-info h5 a {
   color: var(--gray-dark-2);
   text-decoration: none;
}

.customer .customer-info h3 {
   font-size: var(--heading-3-font-size);
   font-weight: var(--font-weight-700);
   line-height: 1.2;
}

.customer .customer-info h3 a {
   color: var(--primary-black);
   text-decoration: none;
}

/* INDUSTRIES */

.industries {
   --industries-padding-top: 85px;
   padding-top: var(--industries-padding-top);
}

@media (min-width: 480px) {
   .industries {
      --industries-padding-top: 174px;
   }
}

@media (min-width: 992px) {
   .industries {
      --industries-padding-top: 168px;
   }
}

.swiper-heading {
   height: var(--section-heading-line-height);
   margin-bottom: var(--section-heading-margin-bottom);
}

.swiper-heading .section-heading {
   padding-top: 0;
   margin-bottom: 0;
}

.swiper-heading .section-heading::before {
   content: none;
}

.swiper-heading .swiper-wrapper .swiper-slide:nth-child(1) h2 {
   color: #65b079;
}

.swiper-heading .swiper-wrapper .swiper-slide:nth-child(2) h2 {
   color: #3c6de9;
}

.swiper-heading .swiper-wrapper .swiper-slide:nth-child(3) h2 {
   color: #a0b2cb;
}

.swiper-heading .swiper-wrapper .swiper-slide:nth-child(4) h2 {
   color: #6c5ba1;
}

.swiper-heading .swiper-wrapper .swiper-slide:nth-child(5) h2 {
   color: #f5c25c;
}

.swiper-heading .swiper-wrapper .swiper-slide:nth-child(6) h2 {
   color: #dd5e8b;
}

.swiper-heading .swiper-wrapper .swiper-slide:nth-child(7) h2 {
   color: #54b8b7;
}

/* HEADING-LINE */

.heading-line {
   --heading-line-margin-bottom: 24px;
   --heading-line-padding-top: 20px;
   --heading-3-font-size: 20px;
   position: relative;
   margin-bottom: var(--heading-line-margin-bottom);
   padding-top: var(--heading-line-padding-top);
}

@media (min-width: 480px) {
   .heading-line {
      --heading-line-margin-bottom: 73px;
      --heading-3-font-size: 24px;
   }
}

@media (min-width: 992px) {
   .heading-line {
      --heading-line-margin-bottom: 93px;
      --heading-line-padding-top: 25px;
      --heading-3-font-size: 35px;
   }
}

.heading-line::before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   width: 100%;
   height: 1px;
   border-top: 1px solid var(--primary-black);
}

.heading-line h3 {
   position: relative;
   font-size: var(--heading-3-font-size);
   font-weight: var(--font-weight-700);
   color: var(--primary-black);
   line-height: 1.2;
   transform: translateY(0);
   transition: transform 0.4s ease-in-out;
}

.heading-line:hover h3 {
   transform: translateY(-7px);
}

/* BG-BLACK */

.black-bg {
   position: relative;
   overflow: hidden;
}

.black-bg .slideout-bg {
   background-color: #000000;
   position: absolute;
   width: 0;
   height: 0;
   left: 0;
   bottom: 0;
   border-top-left-radius: 30%;
   border-top-right-radius: 1000px;
   border-bottom-right-radius: 1000px;
   transition: all 0.5s 0.5s ease-in-out;
}

.black-bg .slideout-bg.active {
   width: 100%;
   height: 100%;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
}

.black-bg section.widget {
   position: relative;
   z-index: 3;
   opacity: 0;
}

.section-heading.text-white {
   color: var(--primary-white);
   margin-bottom: var(--section-heading-margin-bottom);
}

.section-heading.text-white::before {
   border-top-color: var(--primary-white);
}

/* SERVICES */

.services {
   --services-padding-top: 54px;
   --heading-3-font-size: 20px;
   --stroke-block-margin-bottom: 52px;
   --circle-size: 9px;
   --circle-postion: 10px;
   --stroke-block-1-width: 49px;
   --stroke-block-1-height: 50px;
   --stroke-margin-bottom: 20px;
   --stroke-block-2-width: 66px;
   --stroke-block-2-height: 50px;
   --stroke-block-2-padding-top: 9px;
   --stroke-block-2-padding-left: 9px;
   --stroke-block-3-img-height: 61px;
   --strokes-block-2-circle-top: 5px;
   --section-heading-margin-bottom: 54px;
   padding-top: var(--services-padding-top);
   z-index: 1;
   position: relative;
}

@media (min-width: 480px) {
   .services {
      --services-padding-top: 97px;
      --heading-3-font-size: 24px;
      --stroke-block-margin-bottom: 42px;
      --circle-size: 16px;
      --circle-postion: 16px;
      --stroke-block-1-width: 81px;
      --stroke-block-1-height: 84px;
      --stroke-margin-bottom: 32px;
      --stroke-block-2-width: 106px;
      --stroke-block-2-height: 81px;
      --stroke-block-2-padding-top: 16px;
      --stroke-block-2-padding-left: 16px;
      --stroke-block-3-img-height: 82px;
      --strokes-block-2-circle-top: 8px;
      --section-heading-margin-bottom: 100px;
   }
}

@media (min-width: 992px) {
   .services {
      --services-padding-top: 141px;
      --heading-3-font-size: 35px;
      --stroke-block-margin-bottom: 72px;
      --circle-size: 24px;
      --circle-postion: 26px;
      --stroke-block-1-width: 119px;
      --stroke-block-1-height: 122px;
      --stroke-margin-bottom: 50px;
      --stroke-block-2-width: 159px;
      --stroke-block-2-height: 121px;
      --stroke-block-2-padding-top: 24px;
      --stroke-block-2-padding-left: 25px;
      --stroke-block-3-img-height: 123px;
      --strokes-block-2-circle-top: 12px;
      --section-heading-margin-bottom: 200px;
   }
}

.service-box {
   padding-left: 90px;
   margin-bottom: var(--stroke-block-margin-bottom);
}

.stroke-block {
   position: absolute;
   top: 5px;
   left: 0;
   margin-bottom: var(--stroke-block-margin-bottom);
}

@media (min-width: 480px) {
   .service-box {
      padding-left: 120px;
   }
}

@media (min-width: 576px) {
   .service-box {
      padding-left: 0;
      margin-bottom: 0;
   }

   .stroke-block {
      position: relative;
      margin-bottom: var(--stroke-block-margin-bottom);
   }
}

.stroke-block .circle {
   background-color: var(--primary-black);
   border-radius: 100%;
   border: 1px solid var(--primary-white);
   width: var(--circle-size);
   height: var(--circle-size);
   transition: all 0.4s ease-in-out;
}

.stroke-block:hover .circle {
   background-color: var(--primary-white);
}

.stroke-block-1 {
   width: var(--stroke-block-1-width);
   height: var(--stroke-block-1-height);
}

.stroke-block-1 .stroke {
   width: 100%;
   height: 1px;
   border-top: 1px solid var(--primary-white);
}

.stroke-block-1 .stroke:not(:last-child) {
   margin-bottom: var(--stroke-margin-bottom);
}

.stroke-block-1 .stroke .circle {
   top: calc(-1 * (var(--circle-size) / 2));
}

.stroke-block-1 .stroke .circle-right {
   right: var(--circle-postion);
}

.stroke-block-1 .stroke .circle-left {
   left: var(--circle-postion);
}

.stroke-block-2 {
   width: var(--stroke-block-2-width);
   height: var(--stroke-block-2-height);
   border-top: 1px solid var(--primary-white);
   border-left: 1px solid var(--primary-white);
   border-top-left-radius: 10px;
   padding-top: var(--stroke-block-2-padding-top);
   padding-left: var(--stroke-block-2-padding-left);
}

.stroke-block-2 .circles .circle:not(:last-child) {
   margin-right: 14px;
}

.stroke-block-3 img {
   height: var(--stroke-block-3-img-height);
}

.stroke-block-3 .circles {
   top: 12px;
}

.stroke-block-3 .circles .circle:not(:last-child) {
   margin-right: 17px;
}

.service-box h3 {
   position: relative;
   font-size: var(--heading-3-font-size);
   font-weight: var(--font-weight-700);
   color: var(--primary-white);
   transform: translateY(0);
   transition: transform 0.4s ease-in-out;
   margin-bottom: 0;
}

.stroke-block:hover+h3 {
   transform: translateY(-8px);
}

/* FRAMEWORKS */

.frameworks {
   --frameworks-padding-top: 54px;
   --frameworks-padding-bottom: 128px;
   --section-heading-margin-bottom: 43px;
   padding-top: var(--frameworks-padding-top);
}

@media (min-width: 480px) {
   .frameworks {
      --frameworks-padding-top: 124px;
      --frameworks-padding-bottom: 162px;
      --section-heading-margin-bottom: 62px;
   }
}

@media (min-width: 992px) {
   .frameworks {
      --frameworks-padding-top: 232px;
      --frameworks-padding-bottom: 234px;
      --section-heading-margin-bottom: 95px;
   }
}

.frameworks .section-heading {
   margin-bottom: var(--section-heading-margin-bottom);
}

.frameworks-row [class^="col"] {
   flex: 0 0 auto;
   width: 16.666666%;
   padding-top: 12px;
   padding-bottom: 12px;
}

@media (min-width: 576px) {
   .frameworks-row [class^="col"] {
      width: 12.5%;
      padding-top: 20px;
      padding-bottom: 20px;
   }
}

@media (min-width: 992px) {
   .frameworks-row [class^="col"] {
      width: 8.333333%;
      padding-top: 35px;
      padding-bottom: 35px;
   }
}

.frameworks-row .fw-box {
   display: block;
   width: 24px;
   height: 24px;
   position: relative;
   margin-right: auto;
   margin-left: auto;
}

@media (min-width: 480px) {
   .frameworks-row .fw-box {
      width: 30px;
      height: 30px;
   }
}

@media (min-width: 992px) {
   .frameworks-row .fw-box {
      width: 40px;
      height: 40px;
   }
}

.frameworks-row .fw-box::before {
   display: block;
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   border-radius: 100%;
   border: 2px solid rgba(255, 255, 255, 0.3);
   top: 0;
   left: 0;
   opacity: 0;
   visibility: hidden;
}

.frameworks-row .fw-box:hover::before {
   animation: animateIcon 0.4s ease-in-out;
   animation-fill-mode: both;
}

@keyframes animateIcon {
   0% {
      visibility: hidden;
      opacity: 0;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
   }

   100% {
      visibility: visible;
      opacity: 1;
      top: -10px;
      left: -10px;
      height: calc(100% + 20px);
      width: calc(100% + 20px);
   }
}

@media (min-width: 480px) {
   @keyframes animateIcon {
      0% {
         visibility: hidden;
         opacity: 0;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
      }

      100% {
         visibility: visible;
         opacity: 1;
         top: -15px;
         left: -15px;
         height: calc(100% + 30px);
         width: calc(100% + 30px);
      }
   }
}

@media (min-width: 992px) {
   @keyframes animateIcon {
      0% {
         visibility: hidden;
         opacity: 0;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
      }

      100% {
         visibility: visible;
         opacity: 1;
         top: -30px;
         left: -30px;
         height: calc(100% + 60px);
         width: calc(100% + 60px);
      }
   }
}

@media (min-width: 1200px) {
   @keyframes animateIcon {
      0% {
         visibility: hidden;
         opacity: 0;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
      }

      100% {
         visibility: visible;
         opacity: 1;
         top: -35px;
         left: -35px;
         height: calc(100% + 70px);
         width: calc(100% + 70px);
      }
   }
}

.frameworks-row .fw-box a {
   position: relative;
}

.frameworks-row .fw-box img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.frameworks .tool-info h3 {
   font-size: 20px;
   font-weight: var(--font-weight-700);
   color: var(--primary-white);
   margin-bottom: 29px;
}

@media (min-width: 480px) {
   .frameworks .tool-info h3 {
      font-size: 24px;
      margin-bottom: 95px;
   }
}

@media (min-width: 992px) {
   .frameworks .tool-info h3 {
      font-size: 35px;
      margin-bottom: 131px;
   }
}

@media (min-width: 576px) and (max-width: 991.98px) {
   .frameworks [class^="col"]:nth-child(-n + 8) {
      padding-top: 0;
   }
}

@media (min-width: 992px) {
   .frameworks [class^="col"]:nth-child(-n + 12) {
      padding-top: 0;
   }
}

@media (max-width: 575.98px) {
   .frameworks [class^="col"]:nth-child(-n + 6) {
      padding-top: 0;
   }
}

.frameworks-row .fw-box:hover #bg {
   fill: red;
}

#bg {
   fill: red;
}

/* NEXT-STEPS */

.next-steps {
   --next-steps-padding-top: 200px;
   --steps-list-font-size: 20px;
   padding-top: var(--next-steps-padding-top);
   padding-bottom: 50px;
   z-index: 1;
   position: relative;
}

.next-steps .section-heading {
   margin-bottom: 12px;
}

@media(min-width: 480px) {
   .next-steps {
      --steps-list-font-size: 24px;
      padding-bottom: 79px;
   }

   .next-steps .section-heading {
      margin-bottom: 14px;
   }
}

@media(min-width: 992px) {
   .next-steps {
      --steps-list-font-size: 35px;
      padding-bottom: 98px;
   }

   .next-steps .section-heading {
      margin-bottom: 14px;
   }
}

.steps-list {
   padding-left: 0;
   list-style: none;
}

.steps-list li {
   position: relative;
   font-size: var(--steps-list-font-size);
   font-weight: var(--font-weight-800);
   color: var(--primary-white);
   line-height: 1.2;
   border-bottom: 1px solid var(--primary-white);
   padding-top: 25px;
   padding-bottom: 25px;
}

.steps-list li span {
   display: inline-block;
   transform: translateX(0);
   transition: transform 0.4s ease-in-out;
}

.steps-list li:hover span {
   transform: translateX(10px);
}

.steps-list li:last-child {
   border-bottom: 0;
}

@media(min-width: 480px) {
   .steps-list {
      padding-left: 39px;
   }

   .steps-list li {
      padding-top: 29px;
      padding-bottom: 29px;
   }

   .steps-list li::before {
      content: "";
      width: 24px;
      height: 24px;
      border-radius: 100%;
      background-color: var(--primary-white);
      position: absolute;
      width: 13px;
      height: 13px;
      top: 36px;
      left: -39px;
   }
}

@media(min-width: 992px) {
   .steps-list {
      padding-left: 60px;
   }

   .steps-list li {
      padding-top: 48px;
      padding-bottom: 48px;
   }

   .steps-list li::before {
      width: 24px;
      height: 24px;
      top: 55px;
      left: -60px;
   }
}

/* PARTNERS */
.partners {
   z-index: 1;
   position: relative;
}

/* TEAM  */

.widget.personels {
   padding-top: 41px;
   padding-bottom: 61px;
   z-index: 1;
   position: relative;
}
@media (min-width:480px) {
   .widget.personels {
      padding-top: 65px;
      padding-bottom: 103px;
   }
}

@media (min-width:992px) {
   .widget.personels {
      padding-top: 85px;
      padding-bottom: 145px;
   }
}
.widget.personels .swiper {
   padding: 0 20px;
}
.widget.personels .swiper-slide {
   text-align: center;
}
.widget.personels .swiper-slide .inner {
   padding: 40px;
  
}
.widget.personels .swiper-slide img {
   border-radius: 50%;
   width: 100%;
   margin-bottom: 30px;
}
.widget.personels .swiper-slide h3,
.personel h3 {
   font-weight: bold;
}
.widget.personels .swiper-slide h5,
.personel h5 {
   font-size: 1.0rem;
}

.widget.personels .swiper-button-next, 
.widget.personels .swiper-button-prev {
   top: 36%;
   color: black;
}
/* CONTACT */
#contact section.widget {
   opacity: 1;
}

section.footer {
   position: relative;
   z-index: 1;
}

.contact {
   padding-top: 41px;
   padding-bottom: 61px;
   z-index: 1;
   position: relative;
}

@media (min-width:480px) {
   .contact {
      padding-top: 65px;
      padding-bottom: 103px;
   }
}

@media (min-width:992px) {
   .contact {
      padding-top: 85px;
      padding-bottom: 145px;
   }
}

.contact .section-heading::before {
   content: none;
}

.message-form label {
   font-size: 20px;
   font-weight: var(--font-weight-700);
   color: rgba(0, 0, 0, 0.3);
   padding-right: 0;
   padding-left: 0;
}

@media(min-width: 480px) {
   .message-form label {
      font-size: 24px;
   }
}

@media(min-width: 992px) {
   .message-form label {
      font-size: 35px;
   }
}

.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
   opacity: 1;
   transform: scale(.4) translateY(-0.5rem) translateX(0.15rem);
   transition: all 0.4s ease-in-out;
}

@media(min-width: 992px) {
   .message-form .form-floating {
      margin-bottom: 36px;
   }
}

.message-form .form-control {
   height: calc(3.5rem + 5px);
   border-radius: 0;
   border-top: 0;
   border-right: 0;
   border-left: 0;
   border-bottom-color: rgba(0, 0, 0, 0.3);
   font-size: 20px;
   font-weight: var(--font-weight-700);
   color: var(--primary-black);
   transition: all 0.4s ease-in-out;
   padding-left: 0;
   padding-right: 0;
}

@media(min-width: 480px) {
   .message-form .form-control {
      font-size: 24px;
      height: calc(3.5rem + 8px);
   }
}

@media(min-width: 992px) {
   .message-form .form-control {
      font-size: 35px;
      height: calc(3.5rem + 20px);
   }
}

.message-form .form-control:focus {
   box-shadow: none;
   border-bottom-color: rgba(0, 0, 0, 1);
}

.message-form .btn-dark {
   background-color: var(--primary-black);
   border-color: var(--primary-black);
   font-size: 19px;
   width: 100%;
   min-height: 73px;
   transition: all 0.4s ease-in-out;
   margin-top: 42px;
}

@media(min-width: 480px) {
   .message-form .btn-dark {
      font-size: 18px;
   }
}

@media(min-width: 576px) {
   .message-form .btn-dark {
      width: 193px;
   }
}

@media(min-width: 992px) {
   .message-form .btn-dark {
      margin-top: 0;
   }
}

.message-form .btn-dark:hover {
   background-color: rgba(0, 0, 0, 0.8);
}

.message-form .btn-dark+p {
   font-size: 16px;
   font-weight: var(--font-weight-500);
   color: var(--primary-black);
   margin-top: 18px;
   margin-bottom: 57px;
   line-height: 1.4;
}

@media(min-width: 576px) {
   .message-form .btn-dark+p {
      margin-top: 0;
      margin-left: 26px;
   }
}

@media(min-width: 768px) {
   .message-form .btn-dark+p {
      margin-bottom: 0;
   }
}

.contact-list dt {
   font-size: 16px;
   font-weight: var(--font-weight-500);
   color: rgba(0, 0, 0, 0.3);
   line-height: 1;
}

.contact-list dd {
   font-size: 20px;
   font-weight: var(--font-weight-700);
   color: var(--primary-black);
   margin-bottom: 10px;
   transition: all 0.4s ease-in-out;
}

@media(min-width: 480px) {
   .contact-list dd {
      font-size: 24px;
      margin-bottom: 15px;
   }
}

@media(min-width: 992px) {
   .contact-list dd {
      font-size: 35px;
      margin-bottom: 20px;
   }
}

.contact-list dd a {
   color: var(--primary-black);
   transition: all 0.4s ease-in-out;
}

.contact-list dd a:not(:last-child) {
   margin-right: 23px;
}

.contact-list dd:hover,
.contact-list dd a:hover {
   color: rgba(0, 0, 0, 0.3);
}

.copyright {
   font-size: 16px;
   font-weight: var(--font-weight-500);
   color: var(--primary-black);
   margin-bottom: 0;
}

.copyright img {
   height: 16px;
   vertical-align: -2px;
}

/* NAVIGATION */

ul.nav-menu,
ul.nav-menu li,
ul.nav-menu li a {
   float: left;
}

ul.nav-menu {
   padding-left: 10px;
}

ul.nav-menu li a {
   height: 50px;
   line-height: 50px;
   padding: 0 10px;
   color: #ffffff;
   text-decoration: none;
   -webkit-transition-duration: 0.3s;
   -o-transition-duration: 0.3s;
   transition-duration: 0.3s;
}

.nav-toggle {
   display: none;

   position: absolute;
   top: 0;
   right: 0;
   width: 50px;
   height: 50px;
   cursor: pointer;
}

span.icon-bar {
   position: absolute;
   right: 12px;
   display: block;
   width: 26px;
   height: 2px;
   background-color: #000;
   -webkit-transition-duration: 0.3s;
   -o-transition-duration: 0.3s;
   transition-duration: 0.3s;
}

.icon-bar:nth-child(1) {
   top: 17px;
}

.icon-bar:nth-child(2) {
   top: 24px;
}

.icon-bar:nth-child(3) {
   top: 31px;
}

.nav-overlay {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 1;
   opacity: 0;
   visibility: hidden;
   -webkit-transition-duration: 0.3s;
   -o-transition-duration: 0.3s;
   transition-duration: 0.3s;
}

.nav-overlay.active {
   opacity: 1;
   visibility: visible;
}

/* ICON BARS ANIMATION */

.nav-toggle.active .icon-bar:nth-child(1) {
   top: 24px;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   transform: rotate(45deg);
}

.nav-toggle.active .icon-bar:nth-child(2) {
   width: 0;
}

.nav-toggle.active .icon-bar:nth-child(3) {
   top: 24px;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   transform: rotate(-45deg);
}


/* MEDIAQUERIES */

@media screen and (max-width:767px) {
   ul.nav-menu {
      position: absolute;
      top: 70px;
      width: auto;
      height: 0;
      padding: 0;
      overflow: hidden;
      margin-right: 10px;
   }

   ul.nav-menu.active {
      height: auto;
   }

   ul.nav-menu li {
      width: 100%;
   }

   ul.nav-menu li a {
      width: 100%;
      padding: 0;
      text-align: center;
      background-color: #f1f1f1;
   }

   ul.nav-menu li a:hover {
      background-color: #f1f1f1;
   }

   .nav-toggle {
      display: block;
   }
}

@media screen and (min-width:768px) {
   .nav-overlay.active {
      visibility: hidden;
      opacity: 0;
   }
}

/* BACKGROUND */

.background-black {
   height: 4rem;
   width: 4rem;
   border-radius: 50%;
   position: fixed;
   bottom: -4rem;
   left: -4rem;
   background-image: radial-gradient(black, black);
   z-index: 0;

   transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}

.black-bg.active>.background-black {
   transform: scale(80);
}

.background-white {
   height: 4rem;
   width: 4rem;
   border-radius: 50%;
   position: fixed;
   bottom: -4rem;
   left: -4rem;
   background-image: radial-gradient(white, white);
   z-index: 0;

   transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}

#contact.active>.background-white {
   transform: scale(80);
}


/* PRIVACY-POLICY */

.privacy-policy {
   position: fixed;
   left: 0;
   bottom: 15px;
   z-index: 555555555555 !important;
}

@media (min-width: 576px) {
   .privacy-policy {
      max-width: 350px;
   }
}

.privacy-policy .alert {
   background-color: #000;
   border-radius: 0;
   margin-bottom: 0;
   text-align: right;
}

.alert-dismissible .close {
   position: relative;
   left: none;
   top: none;
   float: none;
}

.privacy-policy .alert p {
   color: #fff;
   text-align: left;
}

.privacy-policy .alert p:last-of-type {
   font-size: 10px;
   font-weight: 300;
   color: #fff;
   line-height: 20px;
   margin-bottom: 0;
   width: 100%;
}

.privacy-policy .alert a {
   color: #fff;
   text-decoration: underline;
}

.privacy-policy .alert .close {
   margin-top: 10px;
   font-size: 14px;
   font-weight: 300;
   color: #fff;
   text-shadow: none;
   opacity: 1;
   padding: 5px 15px;
   background: #363a35;
}

.privacy-policy button {
   border: 0;
}

.alert-dismissible {
   padding: 20px;
}

/* MODAL */
.modal {
  gap: 0.4rem;
  width: 100%;
  padding: 1.3rem;
  min-height: 100%;
  display: block;
  position: fixed;
  z-index: 1000;
  top: 20%;
  left: 0;
  right: 0;
  bottom: 20%;
  background-color: white;
  border-radius: 0;
}


.modal p {
  font-size: 0.9rem;
  color: #777;
  margin: 0.4rem 0 0.2rem;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 1;
}

.hidden {
  display: none;
}
.text-right {
   text-align: right;
}

.modal .container-xl {
   display: flex;
}
.modal .col-left {
   width: 30%;
   padding: 20px 0;
   text-align: center;
}
.modal .col-right {
   width: 69%;
   padding: 20px 0;
}

.personel img {
   border-radius: 50%;
   margin-bottom: 30px;
}

@media (max-width: 640px) {
   .modal .container-xl {
      display: block;
      overflow-x: 0;
   }
   .modal {
      top: 0;
      bottom: 0;
   }
   .modal .col-left {
      width: 100%;
      padding: 0 0 20px 0;
      text-align: center;
   }
   .modal .col-right {
      width: 100%;
      padding: 0;
   }
   .personel img {
      width: 120px;
      border-radius: 50%;
      margin-bottom: 30px;
   }
}