/* --- Reset --- */
* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   padding: 0px;
   margin: 0px;
}

html,
body {
   height: 100%;
   width: 100%;
}

body {
   font-family: "Montserrat", sans-serif;
   font-weight: 300;
   background-color: #ebebee;
   color: #151F43;
}

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
   color: #999;
   font-family: "Montserrat", sans-serif;
   font-weight: 300;
}

p {
   font-size: 18px;
}

a:hover,
input,
textarea,
select,
button {
   -o-transition: 0.5s;
   -ms-transition: 0.5s;
   -moz-transition: 0.5s;
   -webkit-transition: 0.5s;
   transition: 0.5s;
   -webkit-appearance: none;
   appearance: none;
   border-radius: 0px;
   font-family: "Montserrat", sans-serif;
}

/* --- Variables --- */
:root {
   --main-bg-color: #000;
   --main-bg-color-hov: #666;
   --main-bg-text-color: #fff;
   --main-bg-text-color-hov: #fff;
}

/* --- Main styles --- */
.inner {
   max-width: 1400px;
   width: 100%;
   display: block;
   margin: 0 auto;
}

.main {
   padding: 100px 0;
}

.main h1 {
   font-size: 50px;
   font-weight: bold;
}

.btn {
   margin-top: 30px;
   padding: 20px;
   font-size: 20px;
   background-color: var(--main-bg-color);
   color: var(--main-bg-text-color);
   border: none;
   outline: none;
   border-radius: 3px;
   cursor: pointer;
   display: inline-block;
   text-decoration: none;
}

.btn:hover {
   background-color: var(--main-bg-color-hov);
   color: var(--main-bg-text-color-hov);
}

.light {
   background-color: white !important;
   color: black !important;
}

.dark {
   background-color: #ebebee !important;
   color: black !important;
}

section {
   padding: 150px 0;
}

.hero {
   background-color: var(--main-bg-color);
   color: var(--main-bg-text-color);
   background-image: image-set(url('assets/hero.webp') type('image/webp'),
         url('assets/hero.png') type('image/png'));
   background-size: cover;
   background-position: center;
   padding: 0 0 !important;
}

.hero .cover {
   background: rgba(21, 31, 67, 0.8);
   backdrop-filter: blur(2px);
   -webkit-backdrop-filter: blur(2px);
}

.hero nav {
   padding: 20px 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.hero nav ul {
   list-style-type: none;
   display: flex;
   gap: 25px;
}

.hero nav ul li a {
   color: white;
   text-decoration: none;
   font-size: 20px;
   text-transform: uppercase;
   font-weight: bold;
}

.hero nav ul li a:hover {
   text-decoration: underline;
}


.hero nav img {
   width: 50px;
   height: 50px;
}

.hero .text {
   padding: 350px 0;
   padding-top: 150px;
}

.hero h1 {
   font-size: 60px;
   margin-bottom: 50px;
}

.hero h1 strong {
   color: #6F9DFF;
   display: block;
   font-size: 40px;
}

.hero p {
   font-size: 20px;
}


.about {
   margin-top: -150px;
   z-index: 3;
   position: relative;
   color: #151F43;
   background-color: #ACC7FF;
   border-top-left-radius: 100px;
   border-top-right-radius: 100px;
}

.about .inner {
   display: flex;
   flex-direction: column;
   gap: 50px;
}

.about h2 {
   font-size: 40px;
   margin-bottom: 20px;
}

.about p {
   font-size: 20px;
}


.reviews {
   background-color: white;
}

.reviewHolder {
   max-width: 800px;
   width: 100%;
   display: block;
   margin: 0 auto;
   position: relative;
}

.reviewHolder .review {
   text-wrap: balance;
   font-size: 24px;
   text-align: center;
   color: #151F43;
}

.slick-prev {
   left: -50px !important;
}

.slick-next {
   right: -50px !important;
}

.slick-prev,
.slick-next {
   width: 30px !important;
   height: 30px !important;
   min-width: 0 !important;
   z-index: 10;
}

.slick-prev:before,
.slick-next:before {
   font-size: 30px !important;
   color: #666 !important;
}



.values {
   background-color: #fff;
   text-align: center;
}

section h2 {
   font-size: 40px;
   text-transform: uppercase;
}

.values .valuesHolder {
   display: flex;
   gap: 50px;
   margin-top: 50px;
}

.values .valuesHolder .value {
   padding: 50px;
   background-color: transparent;
   flex: 1;
}

.values .valuesHolder .value:not(:last-child) {
   border-right: 4px solid #ACC7FF;
}

.values .valuesHolder .value:not(:first-child) {
   padding-left: 0;
}

.value img {
   margin-bottom: 20px;
   aspect-ratio: 21 / 15;
   width: 100%;
   height: auto;
}

.value h3 {
   font-size: 30px;
}

.value p {
   font-size: 20px;
   margin-top: 30px;
}


.ourProjects {
   background-color: #ACC7FF;
   text-align: center;
}

.ourProjects .projectsHolder {
   margin-top: 50px;
}

.ourProjects .project {
   text-align: center;
   padding: 50px;
}

.project h3 {
   font-size: 30px;
   margin-top: 30px;
   margin-bottom: 30px;
   text-transform: uppercase;
}

.project img {
   border-radius: 30px;
   width: 100%;
   height: auto;
   aspect-ratio: 6 / 4;
}

footer {
   background-color: #151F43;
   color: white;
}

footer .logo {
   padding: 30px 0;
}

footer .cols {
   display: flex;
   padding: 50px 0;
   gap: 50px;
}

footer .cols .col {
   flex: 1;
}

footer .col h4 {
   font-size: 22px;
}

footer .col p {
   font-size: 18px;
}

footer .bottom {
   padding: 20px 0;
   font-size: 16px;
}

.turnstile {
   height: 69px;
   margin: 30px 0;
}

.contact {
   text-align: center;
}

.contactForm {
   max-width: 400px;
   text-align: center;
   display: inline-block;
   width: 100%;
}

.contactForm label {
   text-align: left;
}

.disabledBtn {
   background-color: #666 !important;
   cursor: not-allowed !important;
}

.gridLayout {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
   gap: 20px;
}

.item img {
   max-width: 100%;
   height: auto;
   display: block;
   margin: 0 auto;
   border-radius: 5px;
}

.grid {
   text-align: center;
   background-color: #ACC7FF;
}

.grid h2 {
   margin-bottom: 20px;
}


footer .socLinks {
   display: flex;
   flex-flow: row wrap;
   width: 100%;
   margin-top: 10px;
   gap: 5px;
}

footer .socLinks .soci-link {
   text-decoration: none;
   display: inline-block;
   flex-basis: 50px;
   font-size: 40px;
} 

footer a {
   color: white;
}

.barclay {
   max-width: 400px;
   width: 100%;
   margin-top: 30px;
}

ul {
   display: flex;
   flex-direction: column;
   gap: 10px;
   justify-items: flex-start;
   align-items: flex-start;
   text-align: left;
}


















.together {
   display: flex;
   gap: 100px;
   flex-direction: row;
   align-items: center;
}

.together .image {
   flex: 1;
}

.together .image img  {
   border-radius: 30px;
   aspect-ratio: 1 / 1;
   width: 100%;
   height: auto;
}

.together .text {
   flex: 1.5;
}

.touchBottom {
   padding-bottom: 0 !important;
}

.touchBottom .inner .text {
   padding-bottom: 150px !important;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea {
   border: solid 1px #ccc;
   padding: 20px;
   font-size: 20px;
   width: 100%;
   max-width: 400px;
   border-radius: 3px;
}

textarea {
   height: 180px;
}

label {
   display: block;
   margin-top: 20px;
   margin-bottom: 3px;
}

button,
input[type="submit"] {
   padding: 20px;
   background-color: var(--main-bg-color);
   color: var(--main-bg-text-color);
   cursor: pointer;
   border-radius: 3px;
   font-weight: bold;
   border: none;
   min-width: 180px;
   padding: 20px;
   font-size: 20px;
}

button:hover,
input[type="submit"]:hover {
   background-color: var(--main-bg-color-hov);
   color: var(--main-bg-text-color-hov);
}

video {
   width: 100%;
   aspect-ratio: 16 / 9;
}

/* --- Animation --- */
.animate-in {
   opacity: 0;
   transform: translateY(150px);
   transition: opacity 1s ease, transform 1s ease;
}

.animate {
   opacity: 1;
   transform: none;
}


/* Small desktop sizing issues --- */
@media only screen and (max-width: 1410px) {
   .inner {
      max-width: 85%;
      padding: 0;
   }
}

@media only screen and (max-width: 1350px) {

   .values {
      background-color: #ebebee;
   }

   .valuesHolder {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
   }

   .valuesHolder .value {
      border-right: none !important;
      background-color: white !important;
      border-radius: 30px;
      padding: 30px !important;
      box-shadow: 0 2px 4px 0 rgb(0 0 0 / 8%);
   }

   .valuesHolder .value img {
      max-width: 200px;
   }

}

@media only screen and (max-width: 900px) {
   .valuesHolder {
      display: grid !important;
      grid-template-columns: repeat(1, 1fr);
      gap: 16px;
   }
}



/* --- Mobile styles --- */
@media only screen and (max-width: 800px) {
   .inner {
      max-width: 1400px;
      padding: 20px;
   }

   body {
      padding-top: 0;
   }

   section {
      padding: 50px 0;
   }

   .together .inner {
      flex-direction: column;
   }

   .hero h1 strong {
      font-size: calc(5px + 2.6vw);
   }

   .hero h1 {
      font-size: calc(20px + 2.6vw);
      margin-bottom: 20px;
   }

   .together, .values .valuesHolder, .ourProjects .projectsHolder, footer .cols {
      flex-direction: column;
      gap: 20px;
   }


   .gridLayout {
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
   }

   .project img {
      aspect-ratio: 6 / 4;
      height: auto !important;
      width: 100% !important;
   }

   .together img {
      aspect-ratio: 1 / 1;
      height: auto !important;
      width: 100% !important;
   }

   .about {
      border-top-left-radius: 30px;
      border-top-right-radius: 30px;
   }

   .reviewHolder, .projectsHolder {
      margin: 0 auto;
   }

   .slick-list {
      overflow: hidden !important;
      /* Ensures Slick's internal list is contained */
   }

   .reviewHolder {
      overflow: hidden;
   }

   .reviewHolder .review {
      font-size: 16px !important;
   }

   .ourProjects .project {
      padding: 20px !important;
   }

   .slick-initialized {
      overflow: hidden;
   }

}