/* RAW Group - Premium Corporate Website Styles */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.cdnfonts.com/css/deltha');
/* Import Deltha Font */

p {
  line-height: 1.8;
}

:root {
  /* Brand Colors */
  --color-black: #050505;
  --color-silver: #CFCFCF;
  --color-gold: #D4AF37;
  --color-gold-hover: #F2D06B;
  --color-white: #FAFAFA;
  --color-dark-grey: #121212;
  --color-medium-grey: #2d2d2d;

  /* Premium Gradients */
  --gradient-gold: linear-gradient(135deg, #BF953F 0%, #FCF6BA 50%, #B38728 100%);
  --gradient-silver: linear-gradient(135deg, #E0E0E0 0%, #F5F5F5 50%, #C0C0C0 100%);
  --gradient-dark: linear-gradient(to bottom, #000000, #161616);

  /* Spacing */
  --spacing-container: 1200px;
  --spacing-section: 100px;

  /* Transitions */
  --transition-smooth: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-black);
}

::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold);
}

/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--color-black);
  color: var(--color-white);
  line-height: 1.6;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-smooth);
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

/* Utilities */
/* Utilities */
.container {
  width: min(var(--spacing-container), 92%);
  margin: 0 auto;
  /* Restores centering */
  padding: 0 40px;
  /* Increased side padding */
}

.text-gold {
  color: var(--color-gold);
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.text-silver {
  color: var(--color-silver);
}

.text-center {
  text-align: center;
}

.section-padding {
  padding: var(--spacing-section) 0;
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}

/* Buttons - Premium Feel */
.btn {
  display: inline-block;
  padding: 14px 36px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 0;
  letter-spacing: 2px;
  cursor: pointer;
  transition: var(--transition-smooth);
  font-size: 0.85rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn-primary {
  background: linear-gradient(90deg, #D4AF37, #F2D06B);
  color: #000;
  border: none;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #F2D06B, #D4AF37);
  z-index: -1;
  transition: opacity 0.4s;
  opacity: 0;
}

.btn-primary:hover::before {
  opacity: 1;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2);
}

.btn-outline {
  background: transparent;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
}

.btn-outline:hover {
  background: rgba(212, 175, 55, 0.1);
  letter-spacing: 3px;
}

/* Navigation */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: var(--transition-smooth);
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-white);
}

.logo span {
  color: var(--color-gold);
}

.logo img {
  height: 70px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 40px;
  align-items: center;
  /* Ensure li items are vertically centered */
}

.nav-links a {
  display: flex;
  /* Make all links flex containers for consistent alignment */
  align-items: center;
  /* Vertically center text/icon inside */
  height: 100%;
  font-size: 0.95rem;
  font-weight: 500;
  /* Montserrat Medium */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  padding: 5px 0;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-gold);
  transition: width 0.3s ease;
}

.nav-links a:hover,
.nav-links a.text-gold {
  /* Add underline for active link */
  color: var(--color-gold);
}

.nav-links a:hover::after,
.nav-links a.text-gold::after {
  /* Add underline for active link */
  width: 100%;
}

/* Dropdown Menu */
.nav-links li {
  position: relative;
}

.dropdown {
  position: relative;
}

.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.dropdown-toggle i {
  font-size: 0.7rem;
  transition: transform 0.3s ease;
}

.dropdown:hover .dropdown-toggle i {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 10, 10, 0.98);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-top: 2px solid var(--color-gold);
  min-width: 280px;
  padding: 20px 0;
  margin-top: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1000;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  margin-top: 10px;
}

.dropdown-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dropdown-menu li {
  margin: 0;
}

.dropdown-menu a {
  display: block;
  padding: 12px 30px;
  color: #ddd;
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}

.dropdown-menu a::after {
  display: none;
}

.dropdown-menu a:hover {
  background: rgba(212, 175, 55, 0.1);
  color: var(--color-gold);
  border-left-color: var(--color-gold);
  padding-left: 35px;
}

.dropdown-category {
  padding: 15px 30px 8px;
  color: var(--color-gold);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 5px;
}

.dropdown-category:not(:first-child) {
  margin-top: 10px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-menu-btn {
  display: none;
  font-size: 1.5rem;
  color: var(--color-white);
  cursor: pointer;
}

/* Hero Section */
.hero {
  height: auto;
  min-height: clamp(560px, 85vh, 900px);
  padding-top: 200px;
  /* Increased gap from header */
  /* accounts for fixed navbar height */
  padding-bottom: 40px;
}

.hero-content {
  max-width: 800px;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.hero-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.9) 100%);
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: scaleSlow 20s infinite alternate;
}

@keyframes scaleSlow {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.1);
  }
}

.hero-content.hero-left {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.hero-content.hero-left h1,
.hero-content.hero-left h2 {
  text-align: left;
}

.hero-content.hero-left p {
  text-align: justify;
  text-justify: inter-word;
}

/* Specific utility for Deltha font */
.font-deltha {
  font-family: 'Deltha', 'Montserrat', sans-serif !important;
}

.hero h1 {
  /* Revert to default font stack, removed Deltha */
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5rem;
  /* Decreased from 3.5rem */
  line-height: 1.2;
  margin-bottom: 24px;
  background: var(--gradient-silver);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.hero p {
  font-size: 1.2rem;
  color: #e0e0e0;
  margin-bottom: 40px;

  max-width: 62ch;

}

.hero-btns {
  display: flex;
  gap: 20px;
}

/* Animated Cards Section (Services) */
.services-section {
  background: var(--color-black);
}

.section-title {
  text-align: center;
  margin-bottom: 60px;
}

.section-title h2 {
  font-size: 2.5rem;
  color: var(--color-gold);
  margin-bottom: 16px;
  display: inline-block;
  position: relative;
}

.section-title h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--color-gold);
  margin: 10px auto 0;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Widen cards by using 2 columns instead of 4 */
  gap: 30px;
  align-items: stretch;
}

.service-card {
  background: var(--color-dark-grey);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 40px 30px 20px;
  /* Reduced bottom padding */
  border-radius: 4px;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  align-items: flex-start;
  /* left align inside card */
  text-align: left;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.service-card:hover {
  transform: translateY(-10px);
  background: linear-gradient(145deg, #1f1f1f, #151515);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.service-card:hover::before {
  transform: scaleX(1);
}

.service-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
  margin-left: 0;
  margin-right: 0;
  background: none !important;
  /* Force remove any background */
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.service-card h3 {
  width: 100%;
  margin-bottom: 14px;
  line-height: 1.25;
  min-height: auto;
  /* Remove fixed height constraint as wider cards need less height */
}

/* Description: left align to fix gaps */
.service-card p {
  width: 100%;
  text-align: left;
  /* Removed justify to fix gaps */
  margin-bottom: 18px;
  flex-grow: 1;
}

.service-card .service-link {
  align-self: flex-start;
  margin-top: auto;
  /* key: sticks to bottom */
}

.service-link {
  color: var(--color-gold);
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.service-link:hover {
  gap: 10px;
}

/* Brand Promise / Values */
.promise-section {
  background: linear-gradient(to right, #0a0a0a, #151515);
  position: relative;
}

.promise-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
  align-items: center;
}

.promise-content h2 {
  color: var(--color-gold);
  font-size: 2.5rem;
  /* Match section-title size */
  margin-bottom: 24px;
}

.feature-list {
  margin-top: 30px;
}

.feature-item {
  display: flex;
  align-items: center;
  /* Changed from start to center */
  margin-bottom: 24px;
}

.feature-icon {
  color: var(--color-gold);
  margin-right: 20px;
  font-size: 1.4rem;
  /* Slightly larger for better visibility */
  margin-top: 0;
  width: 40px;
  /* Fixed width for alignment */
  text-align: center;
  /* Center icon within fixed width */
  flex-shrink: 0;
  /* Prevent shrinking */
  display: flex;
  justify-content: center;
}

.feature-text h4 {
  color: var(--color-white);
  margin-bottom: 0;
  /* Removed margin since no description follows */
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 400 !important;
  letter-spacing: 0.5px;
}

.feature-text p {
  color: #aaa;
  font-size: 0.95rem;
}

/* Footer */
footer {
  background: #050505;
  border-top: 1px solid rgba(212, 175, 55, 0.1);
  padding: 80px 0 30px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
}

.footer-brand .logo img {
  margin-top: 0;
  margin-bottom: 20px;
  margin-left: 0;
  width: 70%;
  max-width: 350px;
  height: auto;
}

.footer-brand p {
  color: var(--color-white);
  /* Changed from #888 to white */
  font-family: 'Montserrat', sans-serif;
  /* Explicitly set font */
  font-weight: 500;
  /* Match typical body weight */
  margin-top: -5px;
  max-width: 300px;
}

.footer-col h4 {
  color: var(--color-gold);
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 1.1rem;
}

.footer-links li {
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.footer-links li i {
  width: 20px;
  flex-shrink: 0;
  text-align: center;
  margin-top: 4px;
}

.footer-links a {
  color: var(--color-white);
  /* Changed from #aaa to white */
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  transition: color 0.3s;
}

/* Footer Services Dropdown */
.footer-services-item {
  position: relative;
  display: block !important;
  /* Override flex from li */
}

.footer-services-label {
  color: var(--color-white);
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  cursor: default;
  display: inline-block;
  margin-bottom: 0;
}

.footer-services-list {
  display: none;
  list-style: none;
  margin-left: 15px;
  margin-top: 5px;
  padding: 0;
}

.footer-services-item:hover .footer-services-list {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.footer-links a:hover {
  color: var(--color-gold);
  padding-left: 5px;
}

.social-icons {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.social-icons a {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-silver);
  transition: all 0.3s;
}

.social-icons a:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  background: rgba(212, 175, 55, 0.1);
}

.footer-bottom {
  text-align: center;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: #666;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
}

.follow-us-col {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.follow-us-col h4 {
  width: 150px;
  text-align: left;
  margin-bottom: 24px;
}

.follow-us-col .social-icons {
  justify-content: flex-start;
  width: 150px;
  margin-top: 0;
}

/* Simple Animation Classes */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0. 8s cubic-bezier(0.5, 0, 0, 1);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.stagger-1 {
  transition-delay: 0.1s;
}

.stagger-2 {
  transition-delay: 0.2s;
}

.stagger-3 {
  transition-delay: 0.3s;
}

.stagger-4 {
  transition-delay: 0.4s;
}

/* Responsive */
/* Responsive */
@media (max-width: 1024px) {
  .hero-content h1 {
    font-size: 3rem;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .hero h1 {
    font-size: 2.5rem;
  }

  .promise-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 90px;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.95);
    flex-direction: column;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Ensure hero stays left aligned on mobile per user request */
  .hero-content.hero-left {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    padding-right: 20px;
  }

  .hero-content.hero-left h1,
  .hero-content.hero-left h2 {
    text-align: left;
  }

  .hero-content.hero-left p {
    text-align: left;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .nav-links.active {
    display: flex;
  }

  .mobile-menu-btn {
    display: block;
  }

  .dropdown-menu {
    position: static;
    transform: none;
    margin-top: 10px;
    opacity: 1;
    visibility: visible;
    display: none;
    border: 1px solid rgba(212, 175, 55, 0.3);
    background: transparent;
    box-shadow: none;
  }

  .dropdown-menu a {
    padding-left: 0;
    text-align: center;
  }

  .dropdown.active .dropdown-menu {
    display: block;
  }

  .dropdown-toggle {
    justify-content: center;
  }

  .dropdown-toggle i {
    margin-left: 5px;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-brand p {
    max-width: 100%;
  }
}

/* Service Pages Shared Styles */
.service-category {
  margin-bottom: 60px;
}

.service-category h2 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.category-description {
  color: #bbb;
  font-size: 1.1rem;
  margin-bottom: 30px;
  font-style: italic;
}

.services-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Enforce 3 columns for desktop */
  gap: 25px;
}

@media (max-width: 900px) {
  .services-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .services-list {
    grid-template-columns: 1fr;
  }
}

.service-item {
  display: flex;
  flex-direction: column;
  /* Stack vertically for card look */
  gap: 15px;
  align-items: center;
  /* Center horizontally */
  justify-content: center;
  text-align: center;
  /* Center text */
  padding: 35px 20px;
  background: #151515;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 3px solid var(--color-gold);
  /* Keep accent? Or move to top? Keeping side for now */
  transition: all 0.3s ease;
  min-height: 140px;
  /* Increased height for stacking */
  border-radius: 4px;
  /* Slight roundness */
}

/* Adjust accent border if column layout looks weird with left border? 
   Usually left border implies "list". Top border implies "card". 
   User didn't specify, but center aligned usually goes with top border or no border.
   I'll change border-left to border-top for centered cards?
   Actually, let's keep it left for continuity or change to bottom?
   I'll switch to border-bottom for a nice underline effect? 
   Or just keep it left. Left border on centered card is okay.
   I'll stick to left to minimize 'surprise' changes unless it looks bad.
   Actually, I'll switch to 'border-top' as it fits centered cards better.
   "border-top: 3px solid var(--color-gold);"
   and "border-left: 1px..." 
*/
.service-item {
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  border-top: 3px solid var(--color-gold);
}

.service-item:hover {
  transform: translateY(-5px);
  background: #1a1a1a;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  /* Enhanced shadow */
}

.service-item i {
  font-size: 2.5rem;
  /* Slightly larger icon */
  color: var(--color-gold);
  margin-bottom: 5px;
  display: inline-block;
}

.service-item h3 {
  color: var(--color-white);
  font-size: 1.25rem;
  margin-bottom: 0;
  font-family: 'Inter', sans-serif;
  line-height: 1.4;
  font-weight: 600;
}

/* Additional Responsive Fixes */
@media (max-width: 600px) {
  .container {
    padding: 0 20px;
    width: 100%;
  }

  /* Prevent overlapping content under fixed header */
  .hero {
    padding-top: 110px;
    height: auto !important;
    min-height: auto !important;
  }

  /* Ensure hero text doesn't overlap */
  .hero-content {
    margin-top: 30px !important;
    text-align: left;
    /* Keep left align as per user preference earlier, or center? User said "check all pages... getting overlapped" */
  }

  /* Reduce font sizes for mobile to prevent overflow */
  h1 {
    font-size: 2rem !important;
  }

  h2 {
    font-size: 1.5rem !important;
  }

  .hero-content h2 {
    font-size: 1.15rem !important;
    letter-spacing: 1px !important;
  }

  .promise-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 400px) {
  .container {
    padding: 0 15px;
  }

  .hero h1 {
    font-size: 1.75rem !important;
  }
}

/* Additional Responsive Fixes */
@media (max-width: 600px) {
  .container {
    padding: 0 20px;
    width: 100%;
  }

  /* Prevent overlapping content under fixed header */
  .hero {
    padding-top: 110px;
    height: auto !important;
    min-height: auto !important;
  }

  /* Ensure hero text doesn't overlap */
  .hero-content {
    margin-top: 30px !important;
    text-align: left;
  }

  /* Reduce font sizes for mobile to prevent overflow */
  h1 {
    font-size: 2rem !important;
  }

  h2 {
    font-size: 1.5rem !important;
  }

  .hero-content h2 {
    font-size: 1.15rem !important;
    letter-spacing: 1px !important;
  }

  .promise-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 400px) {
  .container {
    padding: 0 15px;
  }

  .hero h1 {
    font-size: 1.75rem !important;
  }
}

/* Slideshow Animation for Promise Section */
.slideshow {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.slideshow .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: fadeSlide 10s infinite;
}

.slideshow .slide:nth-child(1) {
  animation-delay: 0s;
}

.slideshow .slide:nth-child(2) {
  animation-delay: 2s;
}

.slideshow .slide:nth-child(3) {
  animation-delay: 4s;
}

.slideshow .slide:nth-child(4) {
  animation-delay: 6s;
}

.slideshow .slide:nth-child(5) {
  animation-delay: 8s;
}

@keyframes fadeSlide {
  0% {
    opacity: 0;
    transform: scale(1);
  }

  5% {
    opacity: 1;
    transform: scale(1.01);
  }

  20% {
    opacity: 1;
    transform: scale(1.04);
  }

  25% {
    opacity: 0;
    transform: scale(1.05);
  }

  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}