/*
Theme Name: Cargo V3
Theme URI: https://example.com/
Author: metalheadcoder
Author URI: https://example.com/
Description: A custom theme for Cargo.
Version: 1.0

/* Import Google Font Raleway */
/* @import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"); */

:root {
  --green-primary: rgb(209, 250, 148);
  --title-color: rgb(42, 60, 75);
  --highlight-color: rgba(
    255,
    255,
    0,
    0.6
  ); /* Light yellow, like a highlighter */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Raleway", sans-serif;
  overflow: hidden;
  position: relative;
}

main {
  overflow: auto;
  scroll-snap-type: y mandatory;
  height: 100vh;
  z-index: 2;
  position: relative;
}

/* BACKGROUND IMAGE */
.background-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
}

.background-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

section {
  width: 100%;
  height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
  position: sticky;
  top: 0;
}

/* SECTION ONE */
.section-one {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 100px;
}

.section-one-title h1 {
  font-weight: 900 !important;
  font-size: 9em;
  color: white;
  line-height: 100%;
  opacity: 1; /* For GSAP animation */
}

/* --------- SECTION TWO START HERE --------- */
.section-two {
  display: flex;
  flex-wrap: nowrap;
  top: 0;
}

.section-two-left-section {
  position: relative;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.section-two-right-section {
  position: relative;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.section-two-left-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 0%;
  background-color: var(--green-primary);
  z-index: 1;
}

.section-two-highlight-text-left,
.section-two-highlight-text-right,
.char {
  color: white;
  line-height: 140%;
}

.section-two-right-bg {
  position: absolute;
  bottom: 0; /* Start from the bottom */
  right: 0;
  width: 50%;
  height: 0%; /* Initially 0% height */
  background: white;
  z-index: 1; /* Behind the content */
}
.section-two-white-bg {
  position: absolute;
  top: 0; /* Start from the bottom */
  left: 0;
  width: 100%;
  height: 0%; /* Initially 0% height */
  background: white;
  z-index: 1; /* Behind the content */
}

#circle-one,
#circle-two {
  position: relative;
  z-index: 3; /* Circles stay above the animated background */
}

#circle-one {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60vh;
  height: 60vh;
  z-index: 10;
  border-radius: 100%;
}

#circle-two {
  position: absolute;
  top: 100%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 50vh;
  height: 50vh;
  background-color: white;
  z-index: 10;
  border-radius: 100%;
}

.right-section {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.content {
  margin-top: 100px;
  margin-bottom: 100px;
  padding-left: 100px;
  padding-right: 100px;
  position: relative;
  z-index: 20;
}

#section-two-title {
  /* font-weight: 800; */
  /* font-size: 3.2rem; */
  max-width: 30vw;
  color: var(--title-color);
}

.content p {
  /* font-size: 2rem;
  font-weight: 300; */
  max-width: 30vw;
  margin-top: 20px;
}
.image-masker {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  height: 90vh;
  width: 55vh;
  z-index: 23;
}

#animated-megaphone {
  object-fit: cover;
  height: 100%;
  width: auto;
  position: absolute;
  transform-origin: bottom;
}

/* --------- SECTION TWO END HERE --------- */

/* --------- SECTION THREE START HERE --------- */

.section-three {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

.section-three-images {
  position: relative;
  height: 30vh;
  width: 30vh;
}
.section-three-image {
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: auto;
  opacity: 0; /* Ensure images are initially hidden */
}
.moving-xox {
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  height: 300px;
  width: auto;
}
/* --------- SECTION THREE END HERE --------- */

/* --------- SECTION FOUR START HERE --------- */
.section-four {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}
#section-four-content {
  margin-left: auto;
  margin-right: auto;
  width: 60vw;
  height: auto;
}
#section-four-content h1,
#section-four-content p {
  text-align: center;
}

#section-four-content .title {
  font-size: 3rem;
  width: 50vw;
  margin: auto;
}

#section-four-content .description {
  font-size: 1.5rem;
  margin: 50px auto auto auto;
}

#section-four-images {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  z-index: 100;
}

.section-four-image {
  height: 25vh;
  width: auto;
}

/* --------- SECTION FOUR END HERE --------- */

/* --------- SECTION FIVE START HERE --------- */
.section-five {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
}

#section-five-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

#section-five-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

#section-five-image img {
  height: 40vh;
  width: auto;
  z-index: 20;
  position: relative;
}

#circle-bg {
  height: 30vw;
  width: 30vw;
  background: var(--green-primary);
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.description {
  position: relative;
  z-index: 30;
  text-align: center;
  margin-top: 20px;
  width: 53vw;
  font-size: 2.7rem;
  font-weight: 300;
}
/* --------- SECTION FIVE END HERE --------- */

/* --------- SECTION SIX START HERE --------- */
.section-six {
  background-color: white;
}

.slider-container {
  overflow: auto;
  width: 100vw;
  display: flex;
}

.slider-item {
  flex: none;
  width: 100vw;
  height: 100vh;
}

#section-six-image {
  height: 100vh;
}

#section-six-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#section-six-client {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

#section-six-client span {
  font-size: 5rem;
  color: white;
  font-weight: 800;
}

#section-six-content-one {
  position: relative;
  width: 50vw;
  height: 100vh;
  background-color: var(--green-primary);
  padding: 100px;
  overflow: hidden;
}

#section-six-content-text {
  width: 60%;
}

#section-six-content-text h1 {
  font-size: 4rem;
  font-weight: 800;
}

#section-six-content-text p {
  font-size: 1.5rem;
  margin-top: 40px;
}

#section-six-content-text {
  position: relative;
  z-index: 10;
}

#section-six-circle-white {
  height: 60vh;
  width: 60vh;
  background-color: white;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 20%;
  left: 80%;
  z-index: 5;
}

/* --------- SECTION SIX END HERE --------- */

/* --------- SECTION SEVEN START HERE --------- */
.section-seven {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background-color: white;
}

#section-seven-image {
  height: 100vh;
}

#section-seven-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#section-seven-client {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

#section-seven-client span {
  font-size: 5rem;
  color: white;
  font-weight: 800;
}

#section-seven-content-one {
  position: relative;
  width: 50vw;
  height: 100vh;
  background-color: var(--green-primary);
  padding: 100px;
}

#section-seven-content-text {
  width: 60%;
}

#section-seven-content-text h1 {
  font-size: 4rem;
  font-weight: 800;
}

#section-seven-content-text p {
  font-size: 1.5rem;
  margin-top: 40px;
}

#section-seven-content-text {
  position: relative;
  z-index: 10;
}

#section-seven-circle-white {
  height: 100vh;
  width: 100vh;
  background-color: white;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 80%;
  left: 20%;
  z-index: 5;
}

/* --------- SECTION SEVEN END HERE --------- */

/* --------- SECTION EIGHT START HERE --------- */
.section-eight {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  background-color: white;
}

#section-eight-image {
  height: 100vh;
}

#section-eight-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#section-eight-client {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

#section-eight-client span {
  font-size: 5rem;
  color: white;
  font-weight: 800;
}

#section-eight-content-one {
  position: relative;
  width: 50vw;
  height: 100vh;
  background-color: var(--green-primary);
  padding: 100px;
}

#section-eight-content-text {
  width: 60%;
}

#section-eight-content-text h1 {
  font-size: 4rem;
  font-weight: 800;
}

#section-eight-content-text p {
  font-size: 1.5rem;
  margin-top: 40px;
}

#section-eight-content-text {
  position: relative;
  z-index: 10;
}

#section-eight-circle-white {
  height: 60vh;
  width: 60vh;
  background-color: white;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 20%;
  left: 80%;
  z-index: 5;
}

/* --------- SECTION EIGHT END HERE --------- */

/* --------- SECTION NINE START HERE --------- */
.section-nine {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
}

#section-nine-content {
  margin-left: auto;
  margin-right: auto;
  width: 60vw;
  height: auto;
}

#section-nine-content h1 {
  text-align: center;
  font-size: 5rem;
  font-weight: 800;
  color: var(--title-color);
}

.section-nine img {
  width: 100vw;
  height: auto;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
/* --------- SECTION NINE END HERE --------- */

/* --------- SECTION TEN START HERE --------- */
.section-ten {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

#expendable-bg {
  height: 200vw;
  width: 200vw;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  background-color: var(--green-primary);
  z-index: 10;
}

.section-ten .clients {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 equal columns */
  grid-template-rows: repeat(3, 1fr); /* 3 equal rows */
  row-gap: 50px;
  column-gap: 50px;

  position: relative;
  z-index: 20;
}

.section-ten .client {
  height: 8.5vw;
  width: 8.5vw;
  display: block;
  margin: auto; /* Center the image within each client block */
}

.section-ten .client img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
/* --------- SECTION TEN END HERE --------- */

/* --------- SECTION ELEVEN START HERE --------- */
.section-eleven {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 50px;
  padding: 100px;
  background-color: white;
}

.section-eleven-left {
  width: 50%;
}
.section-eleven-right {
  width: 50%;
  position: relative;
}

.section-eleven-logo {
  position: absolute;
  bottom: 0;
  right: 0;
}
.section-eleven-logo svg {
  height: 50px;
  width: auto;
}

.section-eleven-big-title h1 {
  font-weight: 800;
  font-size: 3rem;
  line-height: 130%;
}
.section-eleven-big-title mark {
  background-color: var(--title-color);
  color: white;
}
.section-eleven-big-title svg {
  height: 40px;
}

.section-eleven-form p {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.section-eleven-form {
  margin-top: 50px;
}

.section-eleven-addresses-contacts-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.section-eleven-address h1,
.section-eleven-contact h1 {
  font-weight: 800;
  margin-bottom: 20px;
}
.section-eleven-address p,
.section-eleven-contact p {
  font-size: 1.2rem;
}

.social-media svg {
  height: 50px;
}

/* --------- SECTION ELEVEN END HERE --------- */

/* --------- SECTION TWELVE START HERE --------- */
.section-twelve {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 50px;
  padding: 100px;
  background-color: white;
}

.section-twelve-left {
  width: 50%;
}
.section-twelve-right {
  width: 50%;
  position: relative;
}

.section-twelve-logo {
  position: absolute;
  top: 0;
  right: 0;
}
.section-twelve-logo svg {
  height: 50px;
  width: auto;
}

.section-twelve-big-title h1 {
  font-weight: 800;
  font-size: 3rem;
  color: var(--title-color);
}

.section-twelve-form p {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.section-twelve-form {
  margin-top: 50px;
}

/* FORM LOOKS START HERE */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-grid input[type="text"],
.form-grid input[type="email"],
.form-grid textarea,
.form-grid button {
  font-family: inherit; /* Inherit the font from body */
  font-size: 16px; /* Adjust as needed */
  padding: 10px;
  border-radius: 4px;
  width: 100%;
}

.form-grid input[type="text"],
.form-grid input[type="email"],
.form-grid textarea {
  background-color: #0000000c;
  border: 1px solid #00000011;
}

.form-grid textarea {
  grid-column: span 2;
  resize: vertical;
}

/* Full width elements span two columns */
.form-grid .full-width {
  grid-column: span 2;
}

/* Placeholder styling */
.form-grid input::placeholder,
.form-grid textarea::placeholder {
  color: #aaa; /* Light grey placeholder color */
}

/* Checkbox styling */
.form-grid input[type="checkbox"] + label {
  font-family: inherit; /* Inherit the font for the checkbox label */
  font-size: 16px;
}

/* Submit button */
.form-grid button {
  padding: 15px 20px;
  background-color: var(--title-color);
  color: #fff; /* White text */
  border: none;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s ease;
  font-weight: 800;
  font-size: 1.3rem;
}

.form-grid button:hover {
  background-color: #555; /* Dark grey hover state */
}
/* --------- SECTION TWELVE END HERE --------- */

/* Mobile (up to 480px) */
@media (max-width: 480px) {
}

/* Tablet (481px to 768px) */
@media (min-width: 481px) and (max-width: 768px) {
}

/* Desktop (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
}

/* Large Desktop (1025px and above) */
@media (min-width: 1025px) {
}