/* --------------------------------------------------
FONTS
-------------------------------------------------- */
@font-face {
   font-family: "Outfit";
   src: url("assets/fonts/Outfit-VariableFont_wght.ttf");
}

/* --------------------------------------------------
ROOT
-------------------------------------------------- */
:root {
   /* BASE COLORS */
   --clr-base-primary-100: hsl(0, 0%, 100%);
   --clr-base-primary-200: hsl(0, 0%, 95%);
   --clr-base-primary-300: hsl(0, 0%, 90%);

   /* ACCENT COLORS */
   --clr-primary-400: hsl(202, 85%, 55%);
   --clr-primary-500: hsl(202, 85%, 45%);
   --clr-primary-600: hsl(202, 85%, 35%);

   /* FONT WEIGHTS */
   --f-wght-thin: 100;
   --f-wght-light: 300;
   --f-wght-normal: 500;
   --f-wght-medium: 700;
   --f-wght-bold: 900;

   /* CONT COLORS */
   --clr-f-100: hsl(0, 0%, 100%);
   --clr-f-300: hsl(0, 0%, 75%);
   --clr-f-500: hsl(0, 0%, 50%);
   --clr-f-700: hsl(0, 0%, 25%);
   --clr-f-900: hsl(0, 0%, 5%);
}

/* --------------------------------------------------
BASE STYLING
-------------------------------------------------- */
*,
*::before,
*::after {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   -webkit-tap-highlight-color: transparent;
}
input,
select,
textarea,
button,
area {
   outline: solid 1px transparent;
   transition: outline 0.15s ease;
}
html {
   scroll-behavior: smooth;
}
body {
   font-family: "Outfit", "Gill Sans MT", Calibri;
   background-color: var(--clr-base-primary-100);
   overflow-x: hidden;
}

.main-section {
   display: flex;
   flex-direction: column;
   gap: 2.5rem;
}

.body-padding {
   padding: 3rem 7rem;
}
.section-title {
   padding: 0.6rem;
   font-size: 2rem;
   font-weight: var(--f-wght-light);
   background-color: var(--clr-primary-500);
   text-align: center;
   color: var(--clr-f-100);
   text-transform: uppercase;
}

/* --------------------------------------------------
HEADER
-------------------------------------------------- */
header {
   position: relative;
   overflow: hidden;
}
header .header-wrapper {
   padding-block: 0;
   background-color: color-mix(in srgb, var(--clr-primary-500), transparent 20%);
}
header .bg {
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}
header .top-bar {
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: color-mix(in srgb, var(--clr-primary-500), transparent 40%);
   padding-block: 0.6rem;
   color: white;
   font-size: 1rem;

   isolation: isolate;
}

header .top-bar .contact {
   display: flex;
   gap: 2ch;
}
header .top-bar .contact > div {
   display: flex;
   align-items: center;
   gap: 1ch;

   transition: 0.2s ease;
}
header .top-bar .contact > div:hover {
   color: color-mix(in srgb, var(--clr-primary-500), white 80%);
}

header .top-bar .socials {
   display: flex;
   gap: 0.5ch;
}
header .top-bar .socials a {
   color: var(--clr-primary-500);
   text-decoration: none;
   background-color: white;
   border-radius: 10vh;
   font-size: 0.6em;
   width: 2.2em;
   aspect-ratio: 1 / 1;

   display: grid;
   place-items: center;

   transition: 0.2s ease;
}
header .top-bar .socials a:hover {
   background-color: var(--clr-primary-600);
   color: white;
}

header .main {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-block: 1.5rem;
}
header .main img {
   height: 120px;
}

header .search {
   display: flex;
   align-items: center;
   background-color: var(--clr-primary-500);

   border: solid 1px white;
   color: white;
   font-size: 1rem;
}
header .search > * {
   font-size: 1.05em;
   padding: 0.5em 0.65em;
}

header .search input {
   color: var(--clr-primary-500);
   border: none;
}
header .search input:focus {
   outline-color: black;
}
header .search input::placeholder {
   color: var(--clr-primary-500);
}

header .search button {
   border: none;
   background-color: transparent;
   transition: background-color 0.25s ease;
   cursor: pointer;
   color: white;
}
header .search button:hover {
   background-color: var(--clr-primary-400);
}
header .search button:active {
   background-color: var(--clr-primary-500);
}

/* --------------------------------------------------
NAVBAR
-------------------------------------------------- */
nav {
   position: sticky;
   top: 0;
   width: 100%;
   height: 70px;
   padding-block: 0 !important;
   background-color: var(--clr-primary-500);
   z-index: 10;
   display: flex;
   align-items: center;
   justify-content: center;
}
nav .links {
   flex-basis: 100%;
   display: flex;
   justify-content: space-around;
   height: 100%;
   text-align: center;
   font-weight: var(--f-wght-light);
   font-size: 1rem;
}
nav .links a {
   font-size: 1em;
   color: white;
   text-decoration: none;
   cursor: pointer;
   padding: 0.8em 1.2em;
   text-transform: uppercase;
   flex-basis: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   transition: background-color 0.2s ease;
}
nav .links a:hover {
   background-color: var(--clr-primary-400);
}
nav .links a:active {
   background-color: var(--clr-primary-600);
}

nav .menu-tog {
   font-size: 1.3em;
   color: white;
   display: none;
   cursor: pointer;
}

nav > img {
   height: 100%;
   padding: 0.6em;
   display: none;
}

.mobile-menu {
   position: fixed;
   top: 0;
   bottom: 0;
   width: 100%;
   left: -100%;
   background-color: var(--clr-base-primary-200);
   z-index: 50;
   /* gap: 3rem; */

   display: inline-block;
   opacity: 0;
   transition: 0.2s ease;
}
.mobile-menu.show {
   opacity: 1;
   left: 0;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
}
.mobile-menu > .menu-tog {
   font-size: 1.4rem;
   cursor: pointer;
}
.mobile-menu .links {
   align-self: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
   gap: 2rem;
}
.mobile-menu .links a {
   text-decoration: none;
   color: var(--clr-primary-600);
}

body:has(.mobile-menu.show) {
   overflow: hidden;
}

/* --------------------------------------------------
HERO
-------------------------------------------------- */
.hero-video {
   font-size: 1rem;
   position: relative;
   overflow: hidden;
}
.hero-video video {
   display: block;
   width: 100%;
   max-height: 800px;
   object-fit: cover;
}
.video-controls-wrapper {
   position: absolute;
   inset: 0;
}
.video-controls {
   width: 100%;
   height: 100%;
   transition: 0.4s ease;
}
.video-controls.hidden {
   opacity: 0;
   display: none;
}

/* --------------------------------------------------
HERO-VIDEO CONTROLS
-------------------------------------------------- */
.hero-video .play-btn-wrapper {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: grid;
   place-items: center;

   transition: 0.2s ease;
}
.hero-video .play-btn {
   width: 2.5em;
   aspect-ratio: 1 / 1;

   text-align: center;
   vertical-align: middle;

   padding: 0.8em;
   font-size: 1.5em;
   background-color: hsla(0, 0%, 100%, 0.7);
   color: hsla(0, 0%, 0%, 0.8);
   border-radius: 50%;

   cursor: pointer;
   transition: 0.3s ease;
}
.hero-video .play-btn:hover {
   scale: 1.08;
}
.hero-video .play-btn:active {
   scale: 0.9;
}
.hero-video .play-btn-wrapper:has(.play-btn.fa-play),
.hero-video .play-btn-wrapper:has(.play-btn.fa-arrow-rotate-left) {
   background-color: hsla(0, 0%, 0%, 0.7);
}
@keyframes play-btn-fade {
   from {
      opacity: 0.2;
      scale: 0.5;
   }
   to {
      opacity: 1;
      scale: 1;
   }
}

.hero-video .progress-bar {
   position: absolute;
   display: block;
   bottom: 0;
   left: 0;
   right: 0;
   height: 7px;
   background: hsla(0, 0%, 0%, 0.6);

   transition: 0.2s ease;
   cursor: pointer;
}
.hero-video .progress-bar .progress {
   height: 100%;
   background: color-mix(in srgb, var(--clr-primary-500), transparent 20%);

   transition: 0.3s ease-out;
}

.hero-video .progress-bar:hover {
   background: hsla(0, 0%, 20%, 0.6);
   height: 12px;
}
.hero-video .progress-bar:hover .progress {
   background: color-mix(in srgb, var(--clr-primary-400), transparent 10%);
}

/* --------------------------------------------------
FEATURES-SECTION
-------------------------------------------------- */
.feature-card-container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
}
.feature-card-container > * {
   flex-basis: 100%;
}

.feature-card {
   font-size: 0.9rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: justify;
   text-align-last: center;
   gap: 1em;
}
.feature-card:nth-child(odd) {
   background-color: var(--clr-base-primary-200);
}
.feature-card img {
   width: 100%;
}

.feature-card .desc {
   display: flex;
   flex-direction: inherit;
   gap: inherit;
   color: var(--clr-f-700);

   padding: 1.5em;
}
.feature-card .title {
   font-size: 1.7em;
   color: var(--clr-primary-500);
   font-weight: var(--f-wght-normal);
}

/* --------------------------------------------------
BEST-SELLER SECTION
-------------------------------------------------- */
.best-seller-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: inherit;
   font-size: 1rem;
}
.best-seller-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   gap: 1rem;
}
.best-seller-thumb {
   border: solid 1px var(--clr-f-300);
   padding: 1.5em;
   box-shadow: 0 7px 13px hsla(0, 0%, 20%, 0.1);
   transition: 0.5s ease;
   cursor: move;
   overflow: hidden;
}
.best-seller-card p {
   font-size: 1.5em;
   text-transform: uppercase;
   color: var(--clr-primary-500);
   font-weight: var(--f-wght-normal);
   cursor: pointer;
}
.best-seller-thumb img {
   pointer-events: none;
   transition: 0.45s ease;
   width: 100%;
}
.best-seller-thumb:hover img {
   scale: 2.2;
   transition: 0.3s ease;
}

/* --------------------------------------------------
INDUSTRY SECTION
-------------------------------------------------- */
.main-section#industry-sectors {
   background-color: var(--clr-base-primary-200);
}
.industry-container {
   display: grid;
   grid-template-columns: 1fr 2fr;
   font-size: 1rem;
   background-color: var(--clr-base-primary-100);
}
.industry-container li {
   list-style: none;
}
.industry-list .header {
   background-color: var(--clr-primary-400);
   color: var(--clr-f-100);
   padding: 0.8em;
}
.industry-list ul {
   padding: 0.8em 1.2em;
   display: flex;
   flex-direction: column;
   color: var(--clr-primary-500);
   gap: 1.5em;
}
.industry-information {
   position: relative;
   background-image: url("images/industry.png");
   background-size: cover;
   background-position: center;
}
.industry-info-content {
   width: 55%;
   height: 100%;
   background-color: hsla(0, 0%, 0%, 0.8);
   color: var(--clr-f-100);
   padding: 3em 2em;
   font-weight: var(--f-wght-light);
}
.industry-information li {
   list-style: disc;
   margin-left: 2em;
}

/* --------------------------------------------------
ABOUT SECTION
-------------------------------------------------- */
section#about {
   position: relative;
}
section#about .bg {
   position: absolute;
   width: 100%;
   height: 100%;
   object-fit: cover;
   inset: 0;
   z-index: -1;
}
.about-container {
   background-color: color-mix(in srgb, var(--clr-primary-500), transparent 20%);
   height: 100%;
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   gap: 2rem;
   font-size: 1em;
   padding-block: 5rem;
   color: var(--clr-f-100);
}
.about-container .title {
   font-size: 2em;
   font-weight: var(--f-wght-normal);
   text-transform: uppercase;
}
.about-buttons {
   display: flex;
   justify-content: center;
   width: 100%;
   gap: 2ch;
}
.about-buttons .button {
   border: none;
   padding: 0.8em 2.2em;
   color: var(--clr-primary-500);
   font-weight: var(--f-wght-medium);
   border: solid 2px transparent;
   font-size: 0.9em;
   cursor: pointer;
   transition: 0.3s ease;
   flex-basis: 100%;
   max-width: 250px;
   text-transform: uppercase;
}
.about-buttons .button:hover {
   background-color: transparent;
   color: var(--clr-f-100);
   border-color: var(--clr-f-100);
}
.about-buttons .button:active {
   background-color: var(--clr-primary-600);
}

/* --------------------------------------------------
CONTACT SECTION
-------------------------------------------------- */
.contact-wrapper {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   font-size: 1rem;
   gap: 1.5em;
   row-gap: 3em;
   color: var(--clr-primary-500);
   text-align: justify;
}
.contact-wrapper .col {
   display: flex;
   flex-direction: column;
   gap: 2em;
}
.contact-wrapper .header {
   font-size: 1.4em;
   color: var(--clr-primary-600);
}
.contact-wrapper .content {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.6em;
}

.contact-wrapper a {
   text-decoration: none;
   color: var(--clr-primary-400);
   transition: 0.3s ease;
}
.contact-wrapper a:hover {
   text-decoration: underline;
   color: var(--clr-primary-600);
}

/* CONTACT */
.contact-wrapper .contact .content {
   display: flex;
   flex-direction: column;
   text-align: left;
   gap: 1em;
}
.contact-wrapper .contact .content div {
   display: flex;
   gap: 1ch;
}
.contact-wrapper .contact .content i {
   flex-basis: 5%;
}

/* CONNECT */
.contact-wrapper .contact .links {
   margin-top: 0.5em;
   display: flex;
   gap: 1ch;
}
.contact-wrapper .contact .links a {
   text-decoration: none;
   background-color: var(--clr-primary-500);
   border: solid 2px transparent;
   color: var(--clr-f-100);
   border-radius: 50%;
   padding: 0.5rem;

   width: 38px;
   display: grid;
   place-items: center;
   aspect-ratio: 1 / 1;
}
.contact-wrapper .contact .links a:hover {
   color: var(--clr-primary-500);
   border: solid 2px var(--clr-primary-500);
   background-color: transparent;
}

.contact-wrapper .about img {
   max-width: 270px;
}
.contact-wrapper .about img[src*="payments"] {
   max-width: 150px;
}

footer {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   gap: 1rem;
   color: var(--clr-f-300);
   font-size: 1.1rem;
   background-color: var(--clr-base-primary-200);
}

.footer-links {
   display: flex;
   align-items: center;
   gap: 2ch;
}
.footer-links a {
   font-size: 1.4em;
   color: var(--clr-f-500);
   text-decoration: none;

   transition: 0.07s ease;
}
.footer-links a:hover {
   color: var(--clr-primary-600);
   transform-origin: center;
   scale: 1.2;
}

@media only screen and (max-width: 850px) {
   .body-padding {
      padding: 2rem 3rem;
   }
   .section-title {
      font-size: 1.6rem;
   }
   .best-seller-container {
      font-size: 0.8rem;
   }
   .feature-card {
      font-size: 0.75rem;
   }
}

@media only screen and (max-width: 700px) {
   nav .links {
      font-size: 0.8rem;
   }
   nav .links a {
      padding: 0.5em;
   }
   .body-padding {
      padding: 2rem;
   }
   .section-title {
      font-size: 1.5rem;
   }
   .best-seller-container {
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      gap: 2rem;
   }
   .feature-card-container {
      grid-template-columns: repeat(2, 1fr);
   }
   .industry-container {
      grid-template-columns: 1fr;
   }
   .feature-card {
      font-size: 0.7rem;
   }
   .best-seller-container {
      font-size: 0.7rem;
   }
   header .main img {
      height: 80px;
   }
   header .main .search {
      font-size: 0.8rem;
   }
}
@media only screen and (max-width: 550px) {
   .body-padding {
      padding: 2rem 1.5rem;
   }
   .industry-information .industry-info-content {
      width: 100%;
   }
   .about-container {
      font-size: 0.8rem;
   }
   header .main {
      justify-content: center;
      padding: 1rem;
   }
   header .main img {
      display: none;
   }
   nav .links {
      display: none;
   }
   nav .menu-tog {
      display: inline;
   }
   nav {
      justify-content: space-between;
   }

   nav > img {
      display: block;
   }
   header .top-bar {
      flex-direction: column;
      gap: 1ch;
   }
}

@media only screen and (max-width: 450px) {
   .body-padding {
      padding: 2rem 1.2rem;
   }
   header .top-bar {
      font-size: 0.9rem;
   }
   header .top-bar .contact > div {
      gap: 0.5ch;
   }
   .video-controls {
      font-size: 0.7rem;
   }
   .best-seller-container {
      gap: 1.2rem;
   }
}