@font-face {
  font-family: "Regular";
  src: url("../fonts/Gilroy-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Bold";
  src: url("../fonts/Gilroy-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "ExtraBold";
  src: url("../fonts/Gilroy-ExtraBold.ttf") format("truetype");
}

html {
  scroll-behavior: smooth;
}
body {
  font-family: "Regular";
}

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

/* ╔════════════════════════════════╗
   ║          hero-section          ║
   ╚════════════════════════════════╝ */
.hero-section {
  font-family: "Bold";
  width: 100%;
  height: 55vh;
  background-size: cover;
  background-position: center;
  color: white;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}

/* ╔══════════════════════════════════════╗
   ║          content-section(s)          ║
   ╚══════════════════════════════════════╝ */
.content-header {
  font-family: "Bold";
}
.content-matter {
  font-family: "Regular";
  font-size: 17px;
  line-height: 1.2;
}
/* ---------- */
.content-light {
  max-width: 700px;
  color: white;
}
.content-dark {
  max-width: 700px;
  color: black;
}
.content-last {
  color: white;
}
/* ---------- */
.content-section-1 {
  font-family: "Regular";
  width: 100%;
  height: 600px;
  background-size: cover;
  background-position: center;
  color: white;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  clip-path: polygon(0% 40%, 100% 0%, 100% 100%, 0% 100%);
  margin-top: -245px;
}
.content-section-2 {
  font-family: "Regular";
  width: 100%;
  height: 600px;
  background-size: cover;
  background-position: center;
  color: white;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  clip-path: polygon(0% 0%, 100% 40%, 100% 100%, 0% 100%);
  margin-top: -245px;
}
.content-section-3 {
  font-family: "Regular";
  width: 100%;
  height: 600px;
  background-size: cover;
  background-position: center;
  color: white;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  clip-path: polygon(0% 40%, 100% 0%, 100% 100%, 0% 100%);
  margin-top: -245px;
}

.content-section-4-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-section-5 {
  font-family: "Bold";
}
.content-section-5-card {
  backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.1);
  height: 70px;
  /* for hover effect */
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border 0.3s ease;
  border: 2px solid transparent;
}
.content-section-5-card:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.2);
  border: 2px solid white;
}

.content-section-6-video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* 07-Dec-24: for mobile & tablets START */
@media (max-width: 767px) {
  .content-section-1 {
    clip-path: polygon(0% 30%, 100% 0%, 100% 100%, 0% 100%);
  }
  .content-section-2 {
    clip-path: polygon(0% 0%, 100% 30%, 100% 100%, 0% 100%);
    margin-top: -220px;
  }
  .content-section-3 {
    clip-path: polygon(0% 30%, 100% 0%, 100% 100%, 0% 100%);
    margin-top: -180px;
  }
  /* ----------------------------- */
  .content-header {
    font-size: 32px !important;
  }
  .content-matter {
    font-size: 15px !important;
  }
  .content-light {
    max-width: 90% !important;
  }
}
/* 07-Dec-24: for mobile & tablets END */

/* ----------------------------- */

/* .content-section-4 {
  font-family: "Regular";
  background-color: black;
  width: 100%;
  height: 600px;
  color: white;
  padding: 20px;
  box-sizing: border-box;
  margin-top: -120px;
} */