/* ============================================================

   FONTS
============================================================ */

@font-face {
	font-family: 'Font';
	src: url('assets/Font.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('assets/Inter.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

*,s
*::before,
*::after {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	line-height: 1;
	font-family: 'Font';
}

body {
	background-color: white;
	font-optical-sizing: auto;
	font-kerning: normal;
	max-width: 100vw;
	overflow-x: hidden;
	font-synthesis: none;
	font-variant-ligatures: common-ligatures;
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* ============================================================
   VARIABLES
============================================================ */

:root {
	--ch: calc((100% - 840px) / 2);

	--gmultiplier: 1;
	--g60: round(calc(60px * var(--gmultiplier)), 1px);
	--g40: round(calc(40px * var(--gmultiplier)), 1px);
	--g36: round(calc(36px * var(--gmultiplier)), 1px);
	--g20: round(calc(20px * var(--gmultiplier)), 1px);
	--g14: round(calc(14px * var(--gmultiplier)), 1px);
}

.g40 {
     gap: var(--g40);
}

.g36 {
     gap: var(--g36);
}

.g20 {
     gap: var(--g20);
}

.c {
     padding-left:var(--ch) !important;
     padding-right: var(--ch) !important;
}

.fr {
     display: flex;
     align-items: center;
}

.fc {
     display: flex;
     flex-direction: column;
}

a {
     text-decoration: none;
}

a,button {
     transition: all ease .25s;
}

/* ============================================================
   VARIABLES
============================================================ */

section {
     position: relative;
     z-index: 5;
}

nav{
     position: fixed;
     z-index: 10;
     top: 0;
     background-color: white;
     width: 100%;
     left: 0;
     
     padding: var(--g14);

     .logo {
          height: 15px;
          color: #1A1A1A;
          margin-right: auto;
          
          svg {
               height: 100%;
          }
     }

     .nav-link {
          font-size: 13.5px;
          color: #4D4D4D;
          letter-spacing: .04em;
     }

     .nav-link:hover {
          color: #050505;
     }

     .main-button {
          font-size: 13.5px;
     }

     .menu-button {
          display: none;
     }

     
}

.main-button {
     background-color: #212121;
     font-size: 14px;
     color: white;
     letter-spacing: .04em;
     padding: 7px 14px 7px 14px;
     border-radius: 4px;
}

.main-button:hover {
          background-color: #383838;
     }

/* ============================================================
   MAIN
============================================================ */

main {
     padding-top: 120px;
     
     video {
          width: calc(100% + 20%);
          margin-left: -10%;
          border-radius: 5px;
     }
}

svg {
     overflow: visible;
}

/* ============================================================
   WHAT WE OFFER
============================================================ */

#what-we-offer {
     padding: 132px;
     h2 {
          margin-bottom: var(--g18);
     }

     .first {
          p {
               flex: 1;
               font-size: 13px;
               line-height: 1.5;
               font-family: 'Inter';
               font-variation-settings: 'wght' 520;
               color: #787878;
          }
     }

     .what-we-offer-grid {
          position: relative;
          padding: var(--g32) 0;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: var(--g36);
          margin-top: var(--g64);

          svg {
               position: absolute;
               opacity: .9;
               width: 100%;
               left: 0;
          }

          .one {
               top: 0;
          }

          .two {
               bottom: 0;
          }

          .block {
               h3 {
                    font-size: 15px;
                    margin-bottom: var(--g10);
                    letter-spacing: .02em;
               }

               p {
                    color: #7D7D7D;
                    font-family: 'Inter';
                    font-size: 12.5px;
                    font-variation-settings: 'wght' 510;
                    line-height: 1.5;
               }
          }
     }
}

/* ============================================================
   WHAT WE OFFER
============================================================ */

#how-it-works {
     padding: 132px;
     align-items: start;
     gap: var(--g140);

     .how-it-works-wrap {
          display: grid;
          grid-template-columns: auto 1fr;
          column-gap: var(--g36);

          .num {
               font-size: 11px;
               color: #595959;
               height: 22px;
               border-radius: 4px;
               background-color: hsl(0, 0%, 0%, .07);
               width: 22px;
               min-height: 22px;
          }

          .stroke {
               background-image: repeating-linear-gradient(
               to bottom,
               #000 0px,
               #000 4px,
               transparent 4px,
               transparent 9px
          );
               opacity: .18;
               height: 100%;
               align-self: center;
               width: 1px;
          }

          .block {
               padding-bottom: var(--g36);

               h3 {
                    color: #212121;
                    font-size: 17px;
                    letter-spacing: .02em;
                    margin-bottom: var(--g10);
               }

               p {
                    font-family: 'Inter';
                    font-size: 13px;
                    font-variation-settings: 'wght' 520;
                    line-height: 1.5;
                    color: #7A7A7A;
               }
          }
     }

     h2 {
          white-space: nowrap;
     }
}

/* ============================================================
   CTA
============================================================ */

#cta {
     padding: 132px;

     h2 {
          color: #0D0D0D;
          font-size: 32px;
          letter-spacing: .02em;
     }

     p {
          font-size: 13px;
          font-variation-settings: 'wght' 510;
          font-family: 'Inter';
          color: #7A7A7A;
          max-width: 350px;
          line-height: 1.5;
          margin-top: var(--g12);
          margin-bottom: var(--g26);
          text-align: center;
     }
}

.main-button.grey {
     color: #666666;
     background-color: #EBEBEB;
}

.main-button.grey:hover {
     background-color: #E0E0E0;
     color: #404040;
}

/* ============================================================
   TEAM
============================================================ */

#team {
     .team-member {
          min-width: 25vh;
          pointer-events: none;
          padding-right: var(--g28);
          img {
               margin-bottom: var(--g10);
               width: 100%;
               aspect-ratio: 2 / 2.5;
               object-fit: cover;
               object-position: center;
          }

          h3 {
               font-size: 15px;
               letter-spacing: .02em;
               color: #0D0D0D;
          }

          p {
               font-size: 14px;
               letter-spacing: .02em;
               color: #7A7A7A;
          }
     }
}

/* ============================================================
   FOOTER
============================================================ */

footer {
     padding-bottom: var(--g36);
     gap: var(--g28);

     p {
          font-size: 11.5px;
          font-variation-settings: 'wght' 510;
          font-family: 'Inter';
          color: #9E9E9E;
     }

     p.mr {
          margin-right: auto;
     }

     div.fr {
          gap: var(--g10);
     }

     .sep {
          height: 18px;
          width: 1px;
     }
}

.ac {
     align-items: center;
}

h2 {
     font-size: 23px;
     color: #0D0D0D;
     letter-spacing: .002em;
}

.g10 {
     gap: var(--g10);
}

:root {
	--g140: round(calc(140px * var(--gmultiplier)), 1px);
	--g64: round(calc(64px * var(--gmultiplier)), 1px);
	--g52: round(calc(52px * var(--gmultiplier)), 1px);
	--g36: round(calc(36px * var(--gmultiplier)), 1px);
	--g32: round(calc(32px * var(--gmultiplier)), 1px);
	--g28: round(calc(28px * var(--gmultiplier)), 1px);
	--g26: round(calc(26px * var(--gmultiplier)), 1px);
	--g18: round(calc(18px * var(--gmultiplier)), 1px);
	--g12: round(calc(12px * var(--gmultiplier)), 1px);
	--g10: round(calc(10px * var(--gmultiplier)), 1px);
}

html {
     scroll-behavior: smooth;
}

.g28 {
     gap: var(--g28);
}
.jc {
     justify-content: center;
}

.jsb {
     justify-content: space-between;
}

section {
     max-width: 100svw;
     overflow-x: hidden;
}

body {
     max-width: 100svw;
     overflow-x: hidden;
}

#team {
  overflow: hidden;
}

#teamSlider {
  transition: transform 0.35s ease;
  will-change: transform;
}

#teamSlider.is-dragging {
  transition: none;
  cursor: grabbing;
}
     
.slider-indicator {
	background-color: #F2F2F2;
	padding: 5px;
     margin: -12px auto 0 auto;
     justify-self: center;
     align-self: center;
     gap: 5px;
	border-radius: 50px;
	transition-duration: .5s;
	margin: calc(var(--g8) * -1) auto;
     transition-duration: .3s;

	div {
		background-color: #BDBDBD;
		transition: inherit;
		width: 4px;
		position: relative;
		cursor: pointer;
		height: 4px;
		border-radius: 50px;
	}

	div.active {
		width: 20px;
	}

	div::before {
		content: "";
		display: block;
		background-color: #111;
		border-radius: 50px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
}

.slider-indicator div.active::before {
	animation: fillProgress var(--autoplay-ms, 3000ms) ease forwards;
}

.slider-indicator.is-paused div.active::before {
	animation-play-state: paused;
}

.slider-indicator div.past::before {
	width: 100%;
}

@keyframes fillProgress {
	from { width: 0%; }
	to   { width: 100%; }
}
@media (max-width: 1100px) {
     /* ============================================================
          VARIABLES
     ============================================================ */

     :root {
          --ch: 5%;
          --gmultiplier: .85;
     }

     nav{
          .logo {
               height: 12px;
          }

          .nav-link {
               display: none;
          }

          .main-button {
     }

     }

     

     /* ============================================================
     MAIN
     ============================================================ */

     main {
          padding-top: 110px;

          video {
               width: calc(100% + 10%);
               margin-left: -5%;
          }
     }

     /* ============================================================
     WHAT WE OFFER
     ============================================================ */

     #what-we-offer {
          padding: 126px;

          .first {
               p {
                    font-size: 12px;
               }
          }

     .what-we-offer-grid {
          .block {
               h3 {
                    font-size: 14px;
               }

               p {
                    font-size: 11.5px;
               }
          }
     }
     }

     /* ============================================================
     WHAT WE OFFER
     ============================================================ */

     #how-it-works {
          padding: 126px;

          .how-it-works-wrap {
               .num {
                    font-size: 10px;
                    height: 20px;
                    width: 20px;
                    min-height: 20px;
               }

               .block {
                    padding-bottom: var(--g36);

                    h3 {
                         font-size: 16px;
                    }

                    p {
                         font-size: 12px;
                    }
               }
          }
     }

     /* ============================================================
     CTA
     ============================================================ */

     #cta {
          padding: 126px;

     h2 {
          font-size: 30px;
     }

     p {
          font-size: 12px;
     }
     }

     /* ============================================================
     TEAM
     ============================================================ */

     #team {
     .team-member {
          img {
               margin-bottom: var(--g10);
          }

          h3 {
               font-size: 14px;
          }

          p {
               font-size: 13px;
          }
     }
     }

     /* ============================================================
     FOOTER
     ============================================================ */

     footer {

     p {
          font-size: 11px;
     }


     .sep {
          height: 16px;
     }
     }

     h2 {
     font-size: 21px;
     }

}

@media (max-width: 700px) {
     :root {
          --ch: 8%;
          --gmultiplier: .93;
     }

     nav {
          .logo {
               height: 13px;
          }

          .nav-link {
               font-size: 12.5px;
          }

          .main-button {
               font-size: 11.5px;
          }
     }

     .main-button {
          font-size: 13px;
     }

     main {
          padding-top: 60px;

          video {
               width: 100%;
               margin-left: 0;
          }
     }

     #what-we-offer {
          padding: 90px;

          .first {
               gap: 12px !important;
               flex-direction: column !important;

               p {
                    font-size: 12px;
               }
          }

          .what-we-offer-grid {
               margin-top: var(--g52);
               grid-template-columns: repeat(1, 1fr);
          }

          .block {
               h3 {
                    font-size: 18px !important;
               }

               p {
                    font-size: 12.5px;
               }
          }
     }

     #how-it-works {
          padding: 126px;
          flex-direction: column;
          gap: var(--g52);

          .how-it-works-wrap {
               column-gap: var(--g28);

               .num {
                    font-size: 10px;
                    height: 20px;
                    width: 20px;
                    min-height: 20px;
               }

               .block {
                    padding-bottom: var(--g36);

                    h3 {
                         font-size: 18px;
                    }

                    p {
                         font-size: 12px;
                    }
               }
          }
     }

     #cta {
          padding: 80px;

          h2 {
               font-size: 24px;
          }

          p {
               font-size: 12px;
               max-width: 310px;
          }

          a {
               font-size: 13px;
          }
     }

     #team {
          .team-member {
               width: 300px;
               min-width: 300px;
               img {
                    margin-bottom: var(--g10);
               }

               h3 {
                    font-size: 13px;
               }

               p {
                    font-size: 12px;
               }
          }
     }

     footer {
          svg {
               max-width: 100%;
          }

          p {
               font-size: 11px;
               line-height: 1.6;
               text-align: left;
          }

          div {
               align-items: start !important;
               flex-direction: column;
          }

          .sep {
               display: none;
          }
     }

     h2 {
          font-size: 24px;
     }
}