/* Variables */
:root {
  --txt-xs: 14px;
  --txt-sm: 16px;
  --txt-md: 18px;
  --txt-lg: 22px;
  --txt-xl: 24px;
  --hdln-sm: 28px;
  --hdln-md: 36px;
  --hdln-lg: 44px;
  --hdln-xl: 52px;
  --hdln-xxl: 70px;
  --txt-white: white;
  --txt-black: #3d3d3d;
  --txt-orange: #fb5607;
  --clr-orange-1: #fb5607;
  --clr-orange-2: #ff6e0e;
  --clr-orange-3: #fb56071c;
  --clr-orange-4: #fff7ec;
  --clr-white-1: #d1d1d145;
  --clr-white-2: #fffffc;
}

/* Reset some default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: all 0.5s ease-in-out;
}

/* Basic styles */
body {
  font-family: "Lato", sans-serif;
  font-size: var(--txt-sm);
  color: var(  --txt-black);
  background-color: white;
  line-height: 1.6;
}

a:hover {
  color: var(--clr-orange-1) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Playfair", serif;
}

/* Override */


/* Reusable */

.font-play-fair {
  font-family: "Playfair", serif;
}
.text-xs {
  font-size: var(--txt-xs);
}
.text-sm {
  font-size: var(--txt-xs);
}
.text-md {
  font-size: var(--txt-md);
}
.text-lg {
  font-size: var(--txt-lg);
}
.text-xl {
  font-size: var(--txt-xl);
}

.headline-sm {
  font-size: var(--hdln-sm);
}
.headline-md {
  font-size: var(--hdln-md);
}
.headline-lg {
  font-size: var(--hdln-lg);
}
.headline-xl {
  font-size: var(--hdln-xl);
}

.txt-white {
  color: var(--txt-white);
}

.txt-black {
  color: var(--txt-black);
}

.txt-orange {
  color: var(--txt-orange);
}

.bg-white-1 {
  background-color: var(--clr-white-1);
}

.bg-white-2 {
  background-color: var(--clr-white-2);
}

.bg-orange-1 {
  background-color: var(--clr-orange-3);
}

.bg-orange-2 {
  background-color: var(--clr-orange-4);
}

.text-link {
  color: var(--txt-orange);
  text-decoration: none;
}

 .text-link:hover,
  .text-link:focus {
      color: var(--txt-orange-1);
      text-decoration: underline;
  }

/* Bootstrap */
.position-sticky {
  top: 16px;
}

/* Styles */

.navbar:not(.other-page) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  z-index: 100;
}

.other-page  {
background-color: #000000;
}

.navbar-brand {
  pointer-events: none;
}

.navbar-toggler {
  filter: invert(1);
}

.navbar-toggler:focus,
.navbar-toggler:hover {
  box-shadow: none !important;
  background-color: #00000059;
  color: white;
}

.navbar .navbar-collapse {
  background-color: black;
}

.btn {
  font-size: var(--txt-md);
  padding: 15px 30px;
  border: none !important;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: fit-content;
}

.btn:disabled {
  background-color: var(--txt-orange) !important;
}

.btn-orange {
  background-color: var(--clr-orange-1) ;
  color: var(--txt-white) !important;
}

.btn-white {
  background-color: var(--clr-white-1);
  color: var(--txt-white) !important;
}

.btn-white-2 {
  background-color: white;
  color: var(--txt-orange) !important;
}

.btn-orange:hover {
  background-color: var(--clr-orange-2);
  color: var(--txt-white) !important;
}

.btn-white:hover {
  background-color: var(--clr-orange-1);
  color: var(--txt-white) !important;
}

.btn-white-2:hover {
  background-color: white;
  color: var(--txt-orange) !important;
}

.hero-section {
  background-image: url("../images/hero-bg-img.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

.btn-play {
  color: var(--txt-white);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--txt-xl);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background-color: black;
  opacity: 0.5;
}

.service-card {
  position: relative;
  overflow: hidden;
}

.service-card * {
  transition: all 0.5s ease-in-out;
}

.service-card img {
  aspect-ratio: 16/9;
  object-fit: contain;
}

.service-content h3 {
  color: #000;
}

.why-us {
  position: relative;
}
.why-us .bg-img {
  background-image: url("../images/why-us-bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  filter: brightness(0.5);
  height: 75%;
}

.contact {
  background-color: var(--clr-orange-2);
}

@media (min-width: 992px) {
  /* Override */
  /* Reusable */
  .headline-sm {
    font-size: var(--hdln-md);
  }
  .headline-md {
    font-size: var(--hdln-lg);
  }
  .headline-lg {
    font-size: var(--hdln-xl);
  }
  .headline-xl {
    font-size: var(--hdln-xxl);
  }

  /* Styles */
  .navbar .navbar-collapse {
    background-color: transparent;
  }

  .service-card {
    position: relative;
    overflow: hidden;
  }

  .service-card * {
    transition: all 0.5s ease-in-out;
  }

  .service-content {
    background-color: rgba(255, 255, 255, 0.9);
    position: absolute;
    bottom: 0;
  }

  .service-content h3 {
    color: #000;
  }

  .service-content p {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
  }

  .service-card img {
    aspect-ratio: unset;
    object-fit: cover;
  }

  .service-card-2 {
    background-image: url("../images/service-2.png");
  }

  .service-card-3 {
    background-image: url("../images/service-3.png");
  }

  .service-card-4 {
    background-image: url("../images/service-4.png");
  }

  .service-card-5 {
    background-image: url("../images/service-5.png");
  }

  .service-card-2,
  .service-card-3,
  .service-card-4,
  .service-card-5 {
    height: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .service-card:hover .service-content {
    background-color: white;
  }

  .service-card:hover .service-content h3 {
    color: #000;
  }

  .service-card:hover .service-content p {
    max-height: 500px;
    opacity: 1;
  }

  .w-lg-auto {
    width: auto !important;
  }
}