/* ==================== Variables ==================== */
:root {
   /* Fonts */
   --biggest-font-size: 3.5rem;
   --big-font-size: 2.3rem;
   --normal-font-size: 1.5rem;

   /* Colors */
   --primaryColor: #f2ca55;
   --secondaryColor: #002448;
   --paddingBetweenSection: 50px 0 50px;

   /* Spaces */
   --header-height: 3.5rem;
   --main-padding: calc(var(--header-height) + 1rem);

   /* Z-Index */
   --z-normal: 1;
   --z-tooltip: 10;
   --z-fixed: 100;
}
/* Large */
@media (max-width: 992px) {
   :root {
      /* Fonts */
      --biggest-font-size: 2.5rem;
      --normal-font-size: 1.2rem;
   }
}

/* ==================== Base ==================== */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   direction: rtl;
   font-family: "Cairo", sans-serif;
}
*::before,
*::after {
   box-sizing: border-box;
}
html {
   scroll-behavior: smooth;
   direction: rtl;
}
body {
   font-family: system-ui;
}
h1,
h2,
h3,
h4,
h5,
h6 {
   margin: 0;
}
a {
   text-decoration: none;
}
ul {
   list-style-type: none;
}
img {
   max-width: 100%;
   height: auto;
}
button {
   cursor: pointer;
}
button,
input,
textarea {
   border: none;
}
input:focus,
textarea:focus {
   outline: none;
}

/* ==================== Reusable Classes ==================== */
.container {
   padding: 0 1.5rem;
   margin: auto;
}
@media (min-width: 768px) {
   .container {
      width: 750px;
   }
}
@media (min-width: 992px) {
   .container {
      width: 970px;
   }
}
@media (min-width: 1200px) {
   .container {
      width: 1170px;
   }
}
.flex {
   display: flex;
   align-items: center;
}
.flex-center {
   display: flex;
   justify-content: center;
   align-items: center;
}
.flex-between {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

/* ==================== Component ==================== */
.overlay {
   background-color: #000000aa;
   position: absolute;
   inset: 0;
   z-index: -1;
}
.scroll-up {
   position: fixed;
   background: var(--secondaryColor);
   right: 1.5rem;
   bottom: 1.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 50px;
   height: 50px;
   text-align: center;
   padding: 0.5rem;
   border-radius: 50%;
   z-index: 50;
   opacity: 0.8;
   transition: 0.4s;
}
.scroll-up:hover {
   opacity: 1;
}
.scroll-up .icon {
   fill: #fff;
}
.toggle-mobile {
   width: 40px;
   display: flex;
   flex-direction: column;
   gap: 5px;
   cursor: pointer;
   display: none;
}
.toggle-mobile__span {
   display: block;
   height: 5px;
   border-radius: 2px;
   background-color: #fff;
   transition: transform 0.3s;
}
.toggle-mobile.close .toggle-mobile__span:nth-of-type(2) {
   display: none;
}
.toggle-mobile.close .toggle-mobile__span:nth-of-type(1) {
   transform: translateY(10px) rotate(45deg);
}
.toggle-mobile.close .toggle-mobile__span:nth-of-type(3) {
   transform: rotate(-45deg);
}
.title-container {
   position: relative;
   width: fit-content;
   margin-inline: auto;
   margin-bottom: 4rem;
   padding-inline: 1rem;
}
.services .section-title {
   font-size: 2rem;
   color: var(--primaryColor);
}
.title-container::after,
.title-container::before {
   content: "";
   display: block;
   position: absolute;
   bottom: 70%;
   width: 3rem;
   height: 0.2rem;
   background-color: var(--primaryColor);
}
.title-container::before {
   left: 100%;
}
.title-container::after {
   right: 100%;
}
.title-container .l-title,
.title-container .r-title {
   position: absolute;
   top: 70%;
   display: block;
   width: 5rem;
   height: 0.2rem;
   background-color: var(--primaryColor);
}
.title-container .l-title {
   left: 100%;
}
.title-container .r-title {
   right: 100%;
}
/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar {
   width: 0.6rem;
   border-radius: 0.5rem;
   background-color: hsl(45deg, 4%, 85%);
}
::-webkit-scrollbar-thumb {
   background-color: hsl(45deg, 4%, 75%);
   border-radius: 0.5rem;
}
::-webkit-scrollbar-thumb:hover {
   background-color: hsl(45deg, 4%, 65%);
}

/* ==================== Header ==================== */
.header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   background-color: transparent;
   z-index: var(--z-fixed);
   transition: all 0.6s;
}
.header.scroll-header {
   background-image: linear-gradient(to left, #002448, #003e77);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.nav .logo {
   display: block;
   padding-block: 0.5rem;
}
.nav .logo img {
   width: 4rem;
}
.nav {
   min-height: var(--header-height);
}
.nav .menu {
   gap: 2rem;
}
.nav .links li .link {
   padding: 0.8rem 1rem;
   font-weight: bold;
   font-size: 1.1rem;
   color: #fff;
   transition: border 0.3s;
}
.nav .links li .link:hover {
   border-bottom: 1px solid var(--primaryColor);
}
.nav .social {
   gap: 0.25rem;
}
.nav .social .social-link {
   display: block;
   transition: transform 0.3s;
}
.nav .social .social-link:hover {
   transform: scale(1.1);
}
/*=============== BREAKPOINTS ===============*/
/* Medium */
@media (max-width: 768px) {
   .toggle-mobile {
      display: flex;
   }
   .toggle-mobile.close {
      display: none;
   }
   .nav {
      position: relative;
   }
   .nav .menu {
      position: absolute;
      top: 105%;
      left: 1.5rem;
      width: 18rem;
      display: none;
      flex-direction: column;
      gap: 1rem;
      padding-block: 1rem;
      background-color: #fafafa;
      border-radius: 0.5rem;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
   }
   .nav .menu.show {
      display: flex;
   }
   .nav .menu .links {
      flex-direction: column;
   }
   .nav .menu .links .link {
      display: block;
      color: #000;
      padding-block: 0.5rem;
   }
}
/* ==================== Hero ==================== */
.hero {
   min-height: 100vh;
   position: relative;
   /* background-image: url("../assets/imgs/hero_section.jpg"); */
   background-repeat: no-repeat;
   background-size: cover;
   flex-direction: column;
   z-index: 1;
   color: white;
   overflow: hidden;
   /* margin-top: var(--header-height); */
}
.hero video {
   position: absolute;
   top: 50%;
   left: 50%;
   min-width: 100%;
   min-height: 100%;
   width: auto;
   height: auto;
   z-index: -2;
   -ms-transform: translateX(-50%) translateY(-50%);
   -moz-transform: translateX(-50%) translateY(-50%);
   -webkit-transform: translateX(-50%) translateY(-50%);
   transform: translateX(-50%) translateY(-50%);
}
.hero .container {
   height: 100%;
}

.hero .title .company-name {
   color: var(--primaryColor);
   width: fit-content;
   font-weight: bold;
}
.hero .text {
   font-size: 1.1rem;
   line-height: 1.5;
   max-width: 25rem;
   margin-top: 1.5rem;
}

/* ==================== Services ==================== */
.services {
   padding-top: var(--main-padding);
   padding-bottom: 4rem;
   background-color: #fafafa;
}
.services .container {
   display: grid;
   grid-template-columns: repeat(3, minmax(30px, 1fr));
   gap: 1rem;
}
.services .service {
   min-height: 20rem;
   border-bottom: 3px solid var(--secondaryColor);
   border-radius: 0.4rem;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
   padding: 1.5rem;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   flex-direction: column;
   gap: 1rem;
   background-color: #fff;
   transition: all 0.4s;
}
.services .service:hover {
   background-color: var(--secondaryColor);
   color: #fff;
}
.services .service .icon {
   width: 5rem;
   height: 5rem;
   border-radius: 50%;
   background-color: var(--secondaryColor);
   color: #fff;
   font-size: 3rem;
   transition: all 0.4s;
}
.services .service:hover .icon {
   background-color: #fff;
   color: var(--secondaryColor);
}
.services .service .title {
   font-weight: bold;
   margin-bottom: 1rem;
}
.services .service .text {
   line-height: 1.5;
   text-align: center;
   font-size: 0.9rem;
}
/*=============== BREAKPOINTS ===============*/
@media (max-width: 992px) {
   .services .service {
      min-height: 24rem;
   }
}
@media (max-width: 710px) {
   .services .container {
      grid-template-columns: repeat(2, minmax(30px, 1fr));
   }
}
@media (max-width: 500px) {
   .services .container {
      grid-template-columns: repeat(1, minmax(30px, 1fr));
   }
   .services .service {
      min-height: auto;
   }
}

/* ==================== Offers ==================== */
.offers {
   padding-block: 4rem;
}
.offers .container {
   align-items: start;
   gap: 2rem;
}
.offers .image-frame {
   position: relative;
   align-self: center;
   z-index: 1;
}
.offers .image-frame img {
   height: 25rem;
   min-width: 20rem;
}
.offers .image-frame::before {
   content: "";
   position: absolute;
   top: -1.5rem;
   right: -1.5rem;
   display: block;
   border: 0.4rem solid var(--primaryColor);
   width: 50%;
   height: 100%;
   z-index: -1;
}
.offers .content {
   align-self: center;
   line-height: 1.5;
}
.offers .content .title {
   text-align: center;
   font-weight: bold;
   font-size: 1.5rem;
   color: var(--primaryColor);
   margin-bottom: 2rem;
}
.offers .content .box {
   gap: 1rem;
   padding-bottom: 1rem;
   margin-bottom: 1.5rem;
   border-bottom: 1px solid #ddd;
   font-size: 0.9rem;
}
.offers .content .box i {
   font-size: 1.5rem;
   color: var(--secondaryColor);
}
.offers .content .special {
   color: var(--secondaryColor);
   font-weight: bold;
}

/* ==================== BREAKPOINTS ==================== */

@media (max-width: 768px) {
   .offers .container {
      flex-direction: column;
   }
   .offers .image-frame::before {
      display: none;
   }
   .offers .image-frame {
      max-width: 100%;
   }
   .offers .image-frame img {
      height: 24rem;
   }
}

/* ==================== sports ==================== */
.sports {
   padding-top: 2rem;
   padding-bottom: 4rem;
}
.sports .container {
   flex-direction: column;
}
.sports .content {
   line-height: 1.5;
   text-align: center;
}
.sports .content .title {
   text-align: center;
   font-weight: bold;
   font-size: 1.5rem;
   color: var(--primaryColor);
   margin-bottom: 2rem;
}
.sports .content .special {
   color: var(--secondaryColor);
   font-weight: bold;
}
.sports .gallery {
   display: grid;
   grid-template-columns: repeat(4, minmax(200px, 1fr));
   gap: 1.5rem;
   margin-top: 1rem;
}
.sports .gallery .box {
   padding: 0.5rem;
   margin-top: 2rem;
   background-color: var(--primaryColor);
}
.sports .gallery .box .image {
   position: relative;
   overflow: hidden;
}
.sports .gallery .box .image::before {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 0;
   height: 0;
   opacity: 0;
   background-color: rgb(255 255 255 / 40%);
   z-index: 1;
}
.sports .gallery .box .image:hover::before {
   animation: flashing 0.5s linear;
}
.sports .gallery .box .image img {
   max-width: 100%;
   transition: 0.5s;
}
.sports .gallery .box .image:hover img {
   transform: rotate(5deg) scale(1.2);
}
/* ==================== BREAKPOINTS ==================== */
@media (max-width: 992px) {
   .sports .gallery {
      display: grid;
      grid-template-columns: repeat(2, minmax(350px, 1fr));
      gap: 1.5rem;
      margin-top: 1rem;
   }
}
@media (max-width: 768px) {
   .sports .gallery {
      display: grid;
      grid-template-columns: repeat(1, minmax(300px, 1fr));
      gap: 1.5rem;
      margin-top: 1rem;
   }
}

/* ==================== Footer ==================== */
.footer {
   padding-top: 2rem;
   border-top: 4px solid var(--primaryColor);
   background-color: var(--secondaryColor);
}
.footer .container {
   display: flex;
   align-items: start;
   justify-content: space-between;
   gap: 2rem;
}
.footer .company-info .logo img {
   width: 6rem;
}
.footer .company-info .text {
   line-height: 1.5;
   font-size: 0.9rem;
   margin-block: 1rem 2rem;
   color: #fff;
}
.footer .company-info .text {
   max-width: 16rem;
}
.footer .links > h3 {
   font-weight: bold;
   color: #fff;
   margin-bottom: 1rem;
}
.footer .links-container li:not(:last-of-type) {
   border-bottom: 1px solid #fff;
}

.footer .links-container li .link {
   display: block;
   padding-block: 0.5rem;
   width: 11rem;
   color: #fff;
   font-size: 1.1rem;
   transition: transform 0.4s;
}
.footer .links-container li .link:hover {
   transform: translateX(-0.7rem);
}
.footer .links-container li .link i {
   font-size: 1.3rem;
   color: var(--primaryColor);
   margin-inline-end: 1rem;
}
.footer .contact {
   color: #fff;
}
.footer .contact > h3 {
   font-weight: bold;
   margin-bottom: 1rem;
}
.footer .boxes {
   border-inline-start: 0.2rem solid var(--primaryColor);
   padding-inline-start: 1rem;
}
.footer .contact .box {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   margin-bottom: 0.3rem;
   text-transform: uppercase;
}
.footer .contact .box h3 {
   font-size: 1rem;
   font-weight: normal;
}
.footer .contact .box i {
   font-size: 1.7rem;
   color: var(--primaryColor);
}
.footer-text {
   text-align: center;
   padding-block: 2rem;
   color: #fff;
}
.footer-text .company-name {
   color: var(--primaryColor);
   font-weight: bold;
}
/*=============== BREAKPOINTS ===============*/
/* MEDIUM */
@media (max-width: 992px) {
   .footer .container {
      flex-wrap: wrap;
   }
   .footer .company-info {
      width: 45%;
   }
   .footer .links {
      width: 45%;
      align-self: center;
   }
}
@media (max-width: 650px) {
   .footer .container {
      flex-direction: column;
      align-items: start;
   }
   .footer .company-info {
      width: 100%;
   }
   .footer .company-info .text {
      max-width: 28rem;
   }
   .footer .links {
      align-self: flex-start;
   }
}