/* ---------- RESET ---------- */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   list-style: none;
   text-decoration: none;
}

/* ---------- Global Styles Start ---------- */
body {
   font-family: 'Poppins', Arial, sans-serif;
   background-color: #f5f5f5;
   line-height: 1.6;
   font-size: 100%;
   min-width: 350px;
   min-height: 100vh;
   width: 100%;
}

img {
   width: 100%;
}

/* ---------- Color Palette Start ---------- */
:root {
   /* Primary Colors */
   --black_100: hsla(0, 0%, 5%, 100%);
   --gold_100: hsla(39, 38%, 67%, 100%);
   --white_100: hsla(0, 0%, 95%, 100%);
   --light_gray_100: hsla(0, 0%, 90%, 100%);
   --dark_gray_100: hsla(0, 0%, 27%, 100%);

   /* Secondary Colors */
   --black_95: hsla(0, 0%, 5%, 95%);
   --black_90: hsla(0, 0%, 5%, 90%);
   --dark_gold_100: hsla(39, 38%, 47%, 100%);

   /* Hover Colors */
   --black_hover_90: hsla(0, 0%, 10%, 90%);
   --gold_hover_100: hsla(39, 38%, 57%, 100%);
   --dark_gold_hover_100: hsla(39, 38%, 42%, 100%);
   --light_gray_hover_100: hsla(0, 0%, 80%, 100%);

   /* Box Shaddows */
   --bs_dark_gray: 0 4px 8px 0 hsla(0, 0%, 0%, 50%),
      0 6px 20px 0 hsla(0, 0%, 0%, 20%);
}

/* ---------- NAVBAR ---------- */
nav {
   position: sticky;
   top: 0;
   z-index: 1000;
   background-color: #111;
   color: #fff;
   transition: box-shadow 0.3s ease;
}

nav.scrolled {
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.navbar {
   max-width: 1200px;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0.8rem 1rem;
}

/* .logo {
   font-size: 1.4rem;
   font-weight: 600;
   color: #4ea8de;
   letter-spacing: 1px;
} */

/* Logo Styles Start */
.logo {
   /* background: var(--light_gray_100); */
   background-color: var(--black_100);
   /* border: 2px solid var(--gold_100); */
   /* border-radius: 5px; */
}

.logo:hover {
   background-color: var(--gold_100);
}

.logo .logo-link {
   color: var(--light_gray_100);
   display: block;
   padding: 15px 20px;
   font-size: 24px;
   border: 2px solid var(--gold_100);
   border-radius: 10px;
   /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
}

.logo .logo-link:hover {
   background-color: var(--black_100);
   border-color: var(--black_100);
   color: var(--gold_100);
   transition: 1s;
}

.logo .kda {
   color: var(--gold_100);
   background: var(--dark_gray_100);
   padding: 8px;
   border-radius: 50%;
   font-family: georgia;
}

/* ---------- MENU ---------- */
.nav-links {
   list-style: none;
   display: flex;
   align-items: center;
   transition: max-height 0.3s ease;
}

.nav-links li {
   position: relative;
}

.nav-links a {
   color: var(--light_gray_100);
   text-decoration: none;
   padding: 0.75rem 1rem;
   display: block;
   transition: background 0.3s, color 0.3s;
}

.nav-links a:hover {
   background-color: #222;
   color: var(--gold_100);
}

/* ---------- DROPDOWN ---------- */
.dropdown {
   position: absolute;
   left: 0;
   top: 100%;
   background-color: var(--dark_gray_100);
   min-width: 180px;
   border-radius: 0 0 8px 8px;
   overflow: hidden;
   max-height: 0;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
}

.dropdown a {
   padding: 0.7rem 1rem;
   color: var(--light_gray_100);
}

.dropdown a:hover {
   /* background-color: #333; */
   background-color: var(--black_100);
   color: var(--gold_100);
}

/* Desktop hover dropdown */
@media (min-width: 769px) {
   .nav-links li:hover .dropdown {
      max-height: 500px;
      opacity: 1;
      visibility: visible;
   }
}

/* ---------- HAMBURGER ---------- */
.menu-toggle {
   display: none;
   flex-direction: column;
   justify-content: center;
   cursor: pointer;
}

.menu-toggle span {
   height: 3px;
   width: 25px;
   background: white;
   margin: 4px 0;
   border-radius: 3px;
   transition: all 0.3s ease;
}

.menu-toggle.active span:nth-child(1) {
   transform: rotate(45deg) translateY(8px);
}

.menu-toggle.active span:nth-child(2) {
   opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
   transform: rotate(-45deg) translateY(-8px);
}

/* -------- HERO SECTION -------- */
.hero {
   position: relative;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   overflow: hidden;
}

/* Background layers for crossfade */
.hero-bg {
   position: absolute;
   inset: 0;
   background-size: 100%;
   background-position: center;
   background-repeat: no-repeat;
   opacity: 0;
   transition: opacity 1.5s ease-in-out;
}

.hero-bg.active {
   opacity: 1;
}

/* Gradient Overlay */
/* .hero::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(
      45deg,
      rgba(78, 168, 222, 0.35),
      rgba(231, 76, 60, 0.35),
      rgba(241, 196, 15, 0.35)
   );
   background-size: 300% 300%;
   animation: gradientShift 12s ease infinite;
   z-index: 1;
} */

.hero::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(45deg, rgba(0, 0, 0, 0.4));
   background-size: 300% 300%;
   animation: gradientShift 12s ease infinite;
   z-index: 1;
}

/* Hero Content */
.hero-content {
   position: relative;
   z-index: 2;
   padding: 2rem;
   max-width: 800px;
   animation: fadeIn 1s ease-out;
}

.hero h1 {
   font-size: 3rem;
   margin-bottom: 1rem;
   font-weight: 700;
}

.typing {
   display: inline-block;
   border-right: 2px solid var(--gold_100);
   padding-right: 4px;
   animation: blink 0.8s steps(1) infinite;
}

.hero-caption {
   font-size: 1.2rem;
   color: var(--light_gray_100);
   opacity: 0;
   transition: opacity 1.5s ease;
   margin-bottom: 2rem;
   min-height: 1.2em;
}

.hero-caption.show {
   opacity: 1;
}

.hero button {
   padding: 0.8rem 2rem;
   border: none;
   border-radius: 30px;
   background-color: var(--dark_gold_100);
   color: #fff;
   font-size: 1rem;
   cursor: pointer;
   transition: background 0.3s ease;
}

.hero button:hover {
   background-color: var(--black_100);
}

/* Scroll Arrow */
.scroll-arrow {
   position: absolute;
   bottom: 10px;
   left: 50%;
   transform: translateX(-50%);
   font-size: 2rem;
   color: var(--light_gray_100);
   opacity: 0.8;
   animation: bounce 1.5s infinite;
   cursor: pointer;
   z-index: 3;
}

/* Navigation Dots & Arrows */
.nav-controls {
   position: absolute;
   bottom: 70px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   align-items: center;
   gap: 15px;
   z-index: 3;
}

.nav-arrow {
   font-size: 1.5rem;
   cursor: pointer;
   opacity: 0.8;
   user-select: none;
   transition: transform 0.3s ease;
}

.nav-arrow:hover {
   transform: scale(1.2);
}

.nav-dots {
   display: flex;
   gap: 10px;
}

.nav-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #aaa;
   cursor: pointer;
   transition: all 0.3s ease;
}

.nav-dot.active {
   background: var(--light_gray_100);
   transform: scale(1.3);
}

/* Animations */
@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(20px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes blink {
   0%,
   100% {
      border-color: transparent;
   }
   50% {
      border-color: #4ea8de;
   }
}

@keyframes gradientShift {
   0% {
      background-position: 0% 50%;
   }
   50% {
      background-position: 100% 50%;
   }
   100% {
      background-position: 0% 50%;
   }
}

@keyframes bounce {
   0%,
   20%,
   50%,
   80%,
   100% {
      transform: translate(-50%, 0);
   }
   40% {
      transform: translate(-50%, -10px);
   }
   60% {
      transform: translate(-50%, -5px);
   }
}

/* Services Styles Start */
.services {
   background: var(--light_gray_100);
   padding: 100px 20px 100px;
}

/* Services Headings Styles Start */
.services .services-headings {
   text-align: center;
}

.services .services-headings h2 {
   color: var(--dark_gold_100);
   font-size: 40px;
   padding: 0 0 10px;
}

.services .services-headings h3 {
   font-size: 24px;
   padding: 10px 0 20px;
   color: var(--dark_gray_100);
}
/* Services Headings Styles End */

/* Services Types Styles Start */
.services .services-types-wrapper {
   display: flex;
   gap: 20px;
}

.services .services-types {
   /* max-width: 28.3333%; */
   max-width: 25%;
   background: var(--black_90);
   text-align: center;
   padding: 20px; 
   /* margin-left: 3.75025%; */
   border-radius: 5%;
   box-shadow: var(--bs_dark_gray);
}

.services .services-types .icons {
   display: block;
   background: var(--gold_100);
   text-align: center;
   width: 100px;
   font-size: 64px;
   padding: 20px 0;
   margin: auto;
   border-radius: 50%;
   color: var(--dark_gold_100);
   box-shadow: var(--bs_dark_gray);
}

.services .services-types h4 {
   font-size: 24px;
   color: var(--white_100);
   padding: 20px 0 10px 0;
}

.services .services-types p {
   padding: 10px 0 20px;
   color: var(--white_100);
}

.services .services-types a {
   display: block;
   padding: 10px;
   background: var(--dark_gold_100);
   max-width: 150px;
   text-align: center;
   margin: auto;
   border-radius: 5px;
   color: var(--white_100);
   box-shadow: var(--bs_dark_gray);
}

.services .services-types a:hover {
   background: var(--dark_gold_hover_100);
}
/* Services Types Styles End */
/* Services Styles End */

/* Footer Styles Start */
.footer {
   background: linear-gradient(
      to bottom right,
      var(--gold_100) 0%,
      var(--dark_gold_100) 100%
   );
   padding: 100px 5% 0;
   position: relative;
}

.footer .footer-info {
   display: flex;
   justify-content: space-between;
   color: var(--white_100);
}

.footer .footer-info div {
   width: 23%;
   text-align: center;
}

.footer .footer-info h3 {
   font-size: 24px;
   background: var(--black_90);
   padding: 10px;
   border-radius: 10px;
   box-shadow: var(--bs_dark_gray);
   margin-bottom: 10px;
   min-width: 150px;
}

.footer .footer-info .footer-logo a {
   color: var(--white_100);
   font-size: 18px;
   display: block;
   padding: 8px 0;
   border-radius: 10px;
   box-shadow: var(--bs_dark_gray);
   background: var(--black_90);
}

.footer .footer-info .footer-logo a:hover {
   background: var(--black_hover_90);
   color: var(--gold_100);
   transition: 0.5s;
}

.footer .footer-info .footer-logo span {
   background: var(--dark_gray_100);
   color: var(--gold_100);
   padding: 8px;
   border-radius: 50%;
   font-family: georgia;
   display: inline-block;
}

.footer .footer-info .footer-services a {
   display: block;
   color: var(--white_100);
   font-size: 18px;
   padding: 10px 0;
}

.footer .footer-info .footer-company a {
   display: block;
   color: var(--white_100);
   font-size: 18px;
   padding: 10px 0;
}

.footer .footer-info a:hover {
   color: var(--black_hover_90);
}

.footer .footer-info .footer-contact {
   font-size: 18px;
}

.footer .footer-info .footer-contact h3 {
   font-size: 24px;
}

.footer .footer-info .footer-contact span {
   display: inline-block;
   padding: 0 10px;
}

.footer .footer-info .footer-contact p {
   padding: 10px 0 10px;
}

.footer .footer-copyright {
   color: var(--white_100);
   padding: 80px 0;
   text-align: center;
   font-size: 18px;
}

.footer .fa-circle-arrow-up {
   position: absolute;
   bottom: 20px;
   right: 20px;
   color: var(--white_100);
   font-size: 40px;
}
/* Footer Styles End */

/* Link Strip Styles Start */
.link-strip {
   padding: 50px;
   background: linear-gradient(
      to bottom right,
      var(--dark_gray_100) 30%,
      var(--black_100) 100%
   );
}

.link-strip h1 {
   text-align: center;
   margin-bottom: 10px;
   color: var(--dark_gold_100);
}

.link-strip a:hover {
   color: var(--dark_gray_100);
}

.link-strip p {
   background-color: var(--dark_gold_100);
   color: var(--white_100);
   width: 300px;
   text-align: center;
   margin: 0 auto;
   border-radius: 5px;
   padding: 5px 0;
}

.link-strip a {
   color: var(--white_100);
}
/* Link Strip Styles End */

/* ---------- MOBILE ---------- */
/* Media Queries 768px start */
@media (max-width: 768px) {
   /* ---------- NAVBAR ---------- */
   .menu-toggle {
      display: flex;
   }

   .nav-links {
      position: absolute;
      top: 64px;
      left: 0;
      right: 0;
      flex-direction: column;
      background-color: #111;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
   }

   .nav-links.show {
      max-height: 1000px; /* enough for menu */
   }

   .nav-links li {
      width: 100%;
   }

   .dropdown {
      position: static;
      max-height: 0;
      opacity: 0;
      visibility: hidden;
      overflow: hidden;
      transition: all 0.3s ease;
      background-color: #1a1a1a;
   }

   .dropdown.show {
      max-height: 500px;
      opacity: 1;
      visibility: visible;
   }

   .nav-links a {
      padding: 1rem;
   }
}

/* SMOOTH ANIMATION */
.slide {
   transition: all 0.3s ease;
}

/* HERO SECTION */
.hero h1 {
   font-size: 2.2rem;
}
.hero-caption {
   font-size: 1rem;
}
.hero button {
   font-size: 0.9rem;
   padding: 0.7rem 1.5rem;
}
.nav-controls {
   bottom: 60px;
}

/* Media Queries 920px start */
@media screen and (max-width: 920px) {
   .footer .footer-info .footer-logo {
      display: none;
   }

   .footer .footer-info div {
      width: 31%;
   }
}

/* Media Queries 800px start */
@media screen and (max-width: 800px) {
   .services .services-types-wrapper {
      flex-direction: column;
   }

   .services div.services-types {
      max-width: 60%;
      margin: 20px auto;
   }

   .footer .footer-info {
      flex-direction: column;
      align-items: center;
   }

   .footer .footer-info div {
      width: 50%;
   }

   .footer .footer-info h3 {
      margin-top: 20px;
   }
}

/* Media Queries 600px start */
@media screen and (max-width: 600px) {
   .testimonials-description p {
      padding: 10px 50px;
      width: 100%;
      margin: auto;
   }
}

/* Media Queries 400px start */
@media screen and (max-width: 400px) {
   .footer .footer-info div {
      width: 90%;
   }
}
/* Media Queries End */