body {
    background-color: #000107;
}

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

body:before {
    content: "";
    position: fixed;
    top: 15px;
    left: 50%;
    background-color: #1F2B8F;
    opacity: 0.6;
    box-shadow: 
    0 0 30px #1F2B8F, 0 0 10px #1F2B8F, 
    0 0 30px #1F2B8F, 0 0 30px #1F2B8F, 
    0 0 60px #1F2B8F, 0 0 70px #1F2B8F, 
    0 0 1000px #1F2B8F, 0 0 1000px #1F2B8F, 
    0 0 700px #1F2B8F, 0 0 700px #1F2B8F, 
    0 0 500px #1F2B8F, 0 0 500px #1F2B8F, 
    0 0 300px #1F2B8F, 0 0 300px #1F2B8F, 
    0 0 300px #1F2B8F, 0 0 300px #1F2B8F; 
    /* 0 0 1000px #1F2B8F, 0 0 1000px #1F2B8F, 0 0 1000px #1F2B8F; */
    border-radius: 30%;
    width: 90%;
    transform: translateX(-50%);
    height: 87px;
    z-index: -1;
}

.logo {
    background-color: transparent;
    mix-blend-mode: normal;
    opacity: 1;
    display: block;
    margin: 0 auto;
    width: 100px;
}

main {
    padding: 20px;
    width: 80%;
    margin: 0 auto;
    font-family: 'Tinos', serif;
}

main section p{
    font-family: 'Comic Relief', cursive;
    font-style: italic;
}

/* Lato Font Classes */
.lato-thin {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.lato-thin-italic {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.lato-light-italic {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.lato-black-italic {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: italic;
}

/* Quicksand Font Classes */
.quicksand-light {
  font-family: "Quicksand", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.quicksand-regular {
  font-family: "Quicksand", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.quicksand-medium {
  font-family: "Quicksand", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.quicksand-semibold {
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.quicksand-bold {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* Set Lato as default font */
body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Animation helpers for not-famous cards */
.not-famous-card {
  transition-property: opacity, transform;
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.not-famous-card.opacity-0 {
  opacity: 0;
}
.not-famous-card.translate-y-8 {
  transform: translateY(2rem);
}
.not-famous-card.!opacity-100 {
  opacity: 1 !important;
}
.not-famous-card.!translate-y-0 {
  transform: translateY(0) !important;
}

/* Animation helpers for service cards */
.service-card {
  transition-property: opacity, transform, box-shadow, border-color;
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card.opacity-0 {
  opacity: 0;
}
.service-card.translate-y-8 {
  transform: translateY(2rem);
}
.service-card.!opacity-100 {
  opacity: 1 !important;
}
.service-card.!translate-y-0 {
  transform: translateY(0) !important;
}

/* Service card hover effects */
.service-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 20px 40px rgba(255, 215, 0, 0.2);
}

/* Service icon animations */
.service-icon {
  transition: transform 0.3s ease-in-out;
}

.service-icon:hover {
  transform: scale(1.1) rotate(5deg);
}

/* Hero Title Animations */
.hero-title {
  transition-property: opacity, transform;
  transition-duration: 1000ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-title.opacity-0 { opacity: 0; }
.hero-title.translate-y-8 { transform: translateY(2rem); }

.hero-subtitle {
  transition-property: opacity, transform;
  transition-duration: 1000ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 300ms;
}

.hero-subtitle.opacity-0 { opacity: 0; }
.hero-subtitle.translate-y-8 { transform: translateY(2rem); }

.hero-highlight {
  transition: all 0.5s ease-in-out;
}

.hero-highlight:hover {
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
  transform: scale(1.05);
}

/* Animation helpers for "Why Choose Us?" cards */
.why-choose-card {
  transition-property: opacity, transform, box-shadow, border-color;
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.why-choose-card.opacity-0 {
  opacity: 0;
}

.why-choose-card.translate-y-8 {
  transform: translateY(2rem);
}

/* "Why Choose Us?" card hover effects */
.why-choose-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 20px 40px rgba(255, 215, 0, 0.2);
}