@import '../style/constant.css';

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html{
scroll-behavior: smooth;
scroll-padding-top: 80px; /* Header height */
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements */
ul,
ol {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
   font-size: 1rem; /* 16px*/
    font-family: "TitilliumWeb-Regular", sans-serif;
    line-height: 1.6rem; /* 25.6px */
    margin: 0;
    padding: 0;
    background-color: #0e0f11;
    color: var(--white-color);
  min-height: 100vh;
  text-rendering: optimizeSpeed;
    position: relative;
    /* Vertical lines pattern */
    background-image: linear-gradient(90deg, rgba(113, 77, 79,.03), rgba(248, 170, 34,.1) 1px, transparent 1px);
    background-size: 15rem 100%; /* Adjust line spacing (40px between lines) */
    background-position: center top;
    background-repeat: repeat;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
  height: auto;
  object-fit: cover;        /* Crop if needed */
  transition: opacity 0.3s; /* Smooth loading */
}
/* Fade-in effect for lazy load */
img[loading="lazy"] {
  opacity: 0;
  will-change: opacity;
}
img[loading="lazy"].loaded {
  opacity: 1;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions, and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

a, .footer-column ul li a{
  color: var(--white-color);
  text-decoration: none;
}
.container {
    width: 100%;
    max-width: 1200px; /* Adjust as needed */
    margin: 0 auto; /* Center the container */
    padding: 0 1rem; /* Add padding on the sides */
}
.purple-color{
background-color: var(--purple-color);
}
.rose-color{
background-color: var(--rose-color);
}
.brown-color{
background-color: var(--brown-color);
}
.green-color{
background-color: var(--green-color);
}
.lightblu-color{
background-color: var(--lightblu-color);
}
.drkred-color{
background-color: var(--drkred-color);
}
.drkblu-color{
background-color: var(--drkblu-color);
}
.margin-bottom{
  margin-bottom: 3rem;
}
.margin-bottom-zero{
  margin-bottom: 0;
}
.margin-top{
   margin-top: 5rem;
}
hr{
  border-image-source:  linear-gradient(to right, #714d4f, #f8aa22, #266c78, #89301e, #969253);
    border-image-slice: 1;
}
.list-style{
    margin-left: 2rem;
    list-style: unset;
    margin-bottom: 1rem;
}
.badge{
  background-color: #ffffff;
  border-radius: 1rem;
  padding: .2rem 1rem;
  text-align: center;
}
.big-text {
	font-size: 1rem;
	letter-spacing: .02rem;
  color: transparent;
  background-image: linear-gradient(to right ,#714d4f, #f8aa22, #266c78, #89301e, #969253);
  -webkit-background-clip: text;
  background-clip: text;    
  background-size: 200%;
  background-position: -200%;
  animation: animated-gradient 2s infinite alternate-reverse;      
  text-transform: uppercase;
}
@keyframes animated-gradient{
  to{
    background-position: 200%;
  }
}

/* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) {
    .container {
      max-width: 720px; /* Adjust for tablets */
    }
    body{
      background-size: 150px 100%; 
    }
  }
  
  /* Large devices (laptops, 992px and up) */
  @media (min-width: 992px) {
    .container {
      max-width: 960px; /* Adjust for laptops */
    }
    body{
      background-size: 200px 100%; 
    }
  }
  
  /* Extra large devices (desktops, 1200px and up) */
  @media (min-width: 1200px) {
    .container {
      max-width: 1140px; /* Adjust for desktops */
    }
  }
  
  /* Very large devices (large desktops, 1400px and up) */
  @media (min-width: 1400px) {
    .container {
      max-width: 1320px; /* Adjust for very large screens */
    }
  }
/* Skip Link for Accessibility */
.skip-link {
  position: absolute;
  top: -50px;
  left: 0;
  background: #333;
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 1003;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}
 
  h1, h2, h3, h4, h5,.big-text {
    font-family: "Oswald-Bold", sans-serif;
  }
 /* Mobile First: Default font sizes for small devices (phones) */
h1 {
  font-size: 2rem; /* 32px */
  line-height: 1.2; /* 38.4px */
  margin-bottom: 1.5rem; /* 24px */
}

h2 {
  font-size: 1.75rem; /* 28px */
  line-height: 1.3; /* 36.4px */
  margin-bottom: 1.25rem; /* 20px */
}

h3 {
  font-size: 1.5rem; /* 24px */
  line-height: 1.4; /* 33.6px */
  margin-bottom: 1rem; /* 16px */
}

h4 {
  font-size: 1.25rem; /* 20px */
  line-height: 1.5; /* 30px */
  margin-bottom: 0.75rem; /* 12px */
}

h5 {
  font-size: 1rem; /* 16px */
  line-height: 1.6; /* 25.6px */
  margin-bottom: 0.5rem; /* 8px */
}

h6 {
  font-size: 0.875rem; /* 14px */
  line-height: 1.6; /* 22.4px */
  margin-bottom: 0.5rem; /* 8px */
}

/* Tablet: Medium devices (768px and up) */
@media (min-width: 768px) {
  h1 {
    font-size: 4rem; /* 40px */
    line-height: 1.2; /* 48px */
    margin-bottom: 2rem; /* 32px */
  }

  h2 {
    font-size: 2rem; /* 32px */
    line-height: 1.3; /* 41.6px */
    margin-bottom: 1.5rem; /* 24px */
  }

  h3 {
    font-size: 1.75rem; /* 28px */
    line-height: 1.4; /* 39.2px */
    margin-bottom: 1.25rem; /* 20px */
  }

  h4 {
    font-size: 1.5rem; /* 24px */
    line-height: 1.5; /* 36px */
    margin-bottom: 1rem; /* 16px */
  }

  h5 {
    font-size: 1.25rem; /* 20px */
    line-height: 1.6; /* 32px */
    margin-bottom: 0.75rem; /* 12px */
  }

  h6 {
    font-size: 1rem; /* 16px */
    line-height: 1.6; /* 25.6px */
    margin-bottom: 0.5rem; /* 8px */
  }
}

/* Desktop: Large devices (1024px and up) */
@media (min-width: 1024px) {
  h1 {
    font-size: 5rem; /* 48px */
    line-height: 1.2; /* 57.6px */
    margin-bottom: 2.5rem; /* 40px */
  }

  h2 {
    font-size: 3.5rem; /* 40px */
    line-height: 1.3; /* 52px */
    margin-bottom: 2rem; /* 32px */
  }

  h3 {
    font-size: 2rem; /* 32px */
    line-height: 1.4; /* 44.8px */
    margin-bottom: 1.5rem; /* 24px */
  }

  h4 {
    font-size: 1.75rem; /* 28px */
    line-height: 1.5; /* 42px */
    margin-bottom: 1.25rem; /* 20px */
  }

  h5 {
    font-size: 1.5rem; /* 24px */
    line-height: 1.6; /* 38.4px */
    margin-bottom: 1rem; /* 16px */
  }

  h6 {
    font-size: 1.25rem; /* 20px */
    line-height: 1.6; /* 32px */
    margin-bottom: 0.75rem; /* 12px */
  }
}
  
  p {
    font-size: 1rem; /* 16px */
    line-height: 1.6rem; /* 25.6px */
    margin-bottom: 1rem; /* 16px */
  }
  .text-clr-orange{
    color: var(--orange-color);
  }
  .text-clr-red{
    color: var(--drkred-color);
  }
  .text-clr-white{
    color: var(--white-color);
  }
  .section-bg-clr{
    background-color: #16181a;
    padding: 1rem;
    border-radius: 1rem;
    border: 3px solid;
   border-image-source:  linear-gradient(to right, #714d4f, #f8aa22, #266c78, #89301e, #969253);
    border-image-slice: 1;
  }
  .txt-clr-whiteshade{
    color: rgba(255, 255, 255, .5);
  }
  .mark{
    text-shadow: 5px 10px 4px #000;
  }
  .text-center{
    text-align: center;
  }
  .lg-p-text{
    font-size: 1.2rem;
    line-height: 1.5;
  }
  .txt-gradient{
    background-image: linear-gradient(to right, #714d4f, #f8aa22, #266c78, #89301e, #969253);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  /* Section Spacing */
.section {
  margin-top: 8rem; /* 8-point grid: 64px */
}
.zero-margin{
  margin: 0;
}
.txt-bg-clr{
  padding: .2rem .5rem;
  background-color: #0e0f11;
}
.nav a.current,
.footer-links ul li a.current,
span[aria-current="page"],
.active-clr{
  color:#f8aa22;
}
@media (min-width: 999px) {
.para-max-width{
  max-width: 700px;
}
}
@media (min-width: 1199px) {
.section-bg-clr{
  padding: 2rem;
}
 .section {
    margin-top: 10rem; /* 8-point grid: 64px */
  }
}
  /*Header*/
  .hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.hero video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-bottom-left-radius: 5rem;
}
.hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0,.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--white-color);
  padding: 20px;
  border-bottom-left-radius: 5rem;
}
.overlay-inner-wrap{
  max-width: 800px;
  padding: 10rem 0 10rem;
  margin-top: 5rem;
}
.hero .overlay h1 {
  margin-bottom: 1rem;
  text-shadow: 5px 10px 10px #000;
}
.hero .overlay p {
  font-size: 1.2rem;
  margin: 0 auto 1.5rem auto;
  max-width: 600px;
}
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #fff;
  }

  header .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
.logo{
  display: block;
  z-index: 2;
}
.header-right{
  display: flex;
      max-width: 150px;
      gap: .5rem;
      align-items: center;
  z-index: 1001;
}
   /* Full-Screen Mobile Menu */
   .nav {
    position: fixed;
    top: 0;
    left: -100%; /* Hide menu off-screen by default */
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
    gap: 1.5rem;
    transition: left 0.3s ease-in-out; /* Slide animation */
    z-index: 1000; /* Ensure menu is above other content */
  
    background: radial-gradient(circle at 20% 30%, #714d4f, transparent),
                  radial-gradient(circle at 80% 20%, #89301e, transparent),
                  radial-gradient(circle at 50% 80%, #578470, transparent),
                  radial-gradient(circle at 65% 60%, #266c78, transparent),
                  radial-gradient(circle at 25% 70%, #969253, transparent);            
      background-blend-mode: overlay;
      height: 100vh;
      overflow: hidden;
    padding: 1em 2em;
  }
.logo{
  max-width: 10rem;
}
  .nav.active {
    left: 0; /* Slide menu into view */
  }

  .nav a {
    color: var(--white-color);
    text-decoration: none;
    font-size: 2rem;
    margin-bottom: .5rem;
  }
  .nav a:hover {
    text-decoration: underline;
  }
  .cta-button,.menu-button,.primary-button {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--lightblu-color);
    color: var(--white-color);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.3s ease;
  }
  .primary-button{
    background: var(--drkblu-color);
  }
  .menu-button {
    position: relative;
    background: var(--white-color);
    color: var(--black-color);
    /* z-index: 1001; */
  }
  .cta-button:hover {
    background: var(--rose-color);
  }
  .primary-button:hover {
    background: var(--drkred-color);
  }

.inspired {
  position: absolute;
  bottom: 8%;
  color: rgb(255, 255, 255);
  font-size: 12px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.inspired:hover {
  color: rgba(255, 255, 255, 1);
}

.years{
  display: inline-block;
  padding: .3rem .8rem;
  border-radius: .65rem;
  margin: .2rem;
  font-size: 1rem;

}
/* Add this to your CSS */
.container {
  position: relative; /* Needed for z-index context */
}
  /* Desktop Styles */
 @media (min-width: 1200px) {
    .menu-button {
      display: none; /* Hide menu button on larger screens */
    }
    .nav {
      display: flex; /* Show navigation on larger screens */
      top: 0;
    /* z-index: 9000; */
      flex-direction: row;
      position: sticky;
      backdrop-filter: blur(5px); /* Frosted glass effect */
      box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Subtle shadow */
      width: auto;
      height: auto;
      border-radius: 5rem;
    }
    .nav a {
      margin-bottom: 0;
      font-size: 1rem;
      letter-spacing: .04rem;
    }
    .cta-button {
      margin-left: 1rem; /* Add space between nav and CTA button */
    }
  }
  /* Main Title with Underline */
/* CSS */
.offset-section {
  position: relative;
  overflow: hidden; /* Ensures the pseudo-element stays contained */
}

.offset-section::before {
  content: '';
  position: absolute;
  background: url(../assets/images/modern-camera.png);
  width: 100%;
  height: 100%;
  bottom: -12rem;
  left: 0;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0; /* Start hidden */
  transform: translateY(24rem); /* Initial offset */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Animation when section is in view */
.offset-section.active::before {
  opacity: .4;
  transform: translateY(-11rem);
}
  /* Small Description */
  .small-description {
    margin-bottom: 2rem; /* 8-point grid: 32px */
  }

  /* Three Columns Layout */
  .offset-content {
    width: 100%; /* Full width on smaller screens */
  }
  .column {
    flex: 1;
  }
 
  /* Responsive Design */
  @media (min-width: 768px) {
    .offset-content {
      width: 100%; /* 8 columns out of 12 (2/3 of the container) */
      margin-left: auto; /* Align to the right */
    }
    .row {
      display: flex;
      gap: 2rem; /* 8-point grid: 32px */
    }
    .offset-section::before {
     
      left: 7rem;
    }
  }

  @media (min-width: 1024px) {
    .offset-content {
      width: 66.666%; /* 8 columns out of 12 (2/3 of the container) */
      margin-left: auto; /* Align to the right */
    }
  }

  /**/
   /* Section container */
   .bg-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 5rem 0;
    background-image: url('../assets/images/bg-img.jpg'); /* Replace with your image */
    background-size: cover;
    background-position: center;
    position: relative;
    color: white;
}

/* Overlay */
.bg-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7); /* Dark overlay */
    z-index: 1;
}
/* Content container */
.content {
    position: relative;
    z-index: 2;
}
.swiper-pagination{
  text-align: left;
}
.swiper-pagination-bullet-active{
  background: var(--drkred-color);
}
/* Bullet points */
.bullet-points {
    list-style-type: disc;
    padding-left: 20px;
    margin: 0;
}
.bullet-points li {
    margin-bottom: 0.25rem;
}
/* 2-Column Layout */
  .two-column-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* First Column: Title and Client Counter */
  .column-left,  .column-right {
    width: 100%;
    max-width: 100%;
}
  .client-counter {
    font-size: 3rem; /* 48px */
    font-weight: bold;
    color: var(--orange-color);
  }

  .testimonial-slide p {
    margin-bottom: 1rem; /* 8-point grid: 16px */
  }
  .swiper-pagination{
    position: relative;
    padding: 1rem 0 0;
  }
  .view-proof{
    background: var(--orange-color);
    border: none;
    padding: .25rem 1rem;
    border-radius: .5rem;
    cursor: pointer;
    margin-bottom: .5rem;
  }
  /* Tablet and Desktop Styles */
  @media (min-width: 768px) {
    .two-column-layout {
      flex-direction: row; /* Side-by-side columns on larger screens */
    }
    .column-left {
      flex: 1 1 40%;
      max-width: 40%;
    }

    .column-right {
      flex: 1 1 60%;
      max-width: 60%;
    }
 }

/* Intro Section */
.intro {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
  .intro {
      flex-direction: row;
      align-items: center;
      justify-content: space-evenly;
      text-align: left;
  }
  .intro .cta-button{
    min-width: 145px;
  }
  .title{
    min-width: 350px;
  }
}

.description {
  margin: 10px 0;
}

/* Grid Layout */
.grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* Default for mobile */
  gap: 1rem;
}
.grid-item h3{
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .grid {
      grid-template-columns: repeat(2, 1fr); /* 2 items per row for tablets */
  }
}

@media (min-width: 1024px) {
  .grid {
      grid-template-columns: repeat(3, 1fr); /* 3 items per row for desktops */
  }
}

/* Grid Items */
.grid-item, .narrow-grid-item {
  position: relative;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
}

.grid-item:hover {
  transform: scale(1.05);
}

/* Arrow Link */
.arrow-link {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
  border-radius: 50%;
  text-decoration: none;
  font-size: 18px;
  transition: background 0.3s;
}

.arrow-link:hover {
  background: rgba(0, 0, 0, 0.8);
}
/**/
.narrow-intro{
  display: flex;
  flex-direction: column;
  align-items: baseline;
  margin-bottom: 2rem;
  
}
.narrow-grid-wrapper {
  max-width: 800px;
  margin: 0 auto;
}
.narrow-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5rem;
}
@media (min-width: 768px) {
  .narrow-intro{
    justify-content: space-between;
  }
}
@media (min-width: 1024px) {
.narrow-title{
  max-width: 570px;
}
}

.narrow-grid{
  position: relative;
  padding: 2rem;
  background:
    linear-gradient(to right, #f8aa22 4px, transparent 4px) 0 0,
    linear-gradient(to right, #714d4f 4px, transparent 4px) 0 100%,
    linear-gradient(to left, #969253 4px, transparent 4px) 100% 0,
    linear-gradient(to left, #b56220 4px, transparent 4px) 100% 100%,
    linear-gradient(to bottom, #f8aa22 4px, transparent 4px) 0 0,
    linear-gradient(to bottom, #969253 4px, transparent 4px) 100% 0,
    linear-gradient(to top, #714d4f 4px, transparent 4px) 0 100%,
    linear-gradient(to top, #b56220 4px, transparent 4px) 100% 100%;
  background-repeat: no-repeat;
  background-size: 60px 40px;
}
.narrow-grid:before{
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  top: 45.5%;
  left: 50%;
  background: linear-gradient(to bottom, transparent 40%, #ffffff 40%, #ffffff 60%, transparent 60%), linear-gradient(to right, transparent 40%, #ffffff 40%, #ffffff 60%, transparent 60%);
  transform: translateX(-50%);
}
/* Products-Intro Section */
.products-intro {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* Grid Section */
.grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
}

.grid-item {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  text-align: center;
}

.arrow-link {
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
  text-decoration: none;
}

/* Desktop Layout */
@media (min-width: 1024px) {
  .intro,.footer-top,.products-intro,.narrow-intro {
    display: flex;
      flex-direction: row;
      /* justify-content: space-around; */
      text-align: left;
  }

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

/* Footer Section */
.footer {
  background-color: #16181a;
  padding-top: 5rem;
  border-top-right-radius: 5rem;

}

/* Footer Top Row */
.footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 3rem;
  gap: 1rem;
}
.footer-top h2 {
  margin-bottom: 0.5rem;
}
.footer-top a {
  
  color: white;
}
.footer-top .footer-image {
  max-width: 150px;
}

/* Footer Middle Row */
.footer-middle {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  text-align: center;
  margin-bottom: 1rem;
}
.footer-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer-column h3 {
  margin-bottom: 0.5rem;
}
.footer-column ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.footer-column ul li a {
 letter-spacing: .04rem;
}
.footer-column ul li a:hover,
.breadcrumb a:hover{
  color: var(--drkred-color);
  transition: color 0.3s ease;

}

/* Footer Bottom Row */
.footer-bottom {
  text-align: center;
  font-size: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, .5);
  padding: 1rem 0;
}
/* CSS */
.social-links {
  display: flex;
  flex-wrap: wrap;
  padding: 1rem 0;
}

.social-icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease;
  color: #555; /* Default color */
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.social-links a:hover {
  transform: translateY(-3px);
}

/* Platform-specific colors on hover */
.social-links a:hover .social-icon {
  color: white;
}
.social-links a:hover:nth-child(1) { background: #1877f2; } /* Facebook */
.social-links a:hover:nth-child(2) { background: #e4405f; } /* Instagram */
.social-links a:hover:nth-child(3) { background: #1ab7ea; } /* Vimeo */
.social-links a:hover:nth-child(4) { background: #ff0000; } /* YouTube */
.social-links a:hover:nth-child(5) { background: #000000; } /* X/Twitter */
.social-links a:hover:nth-child(6) { background: #25f4ee; } /* TikTok */
.social-links a:hover:nth-child(7) { background: #0a66c2; } /* LinkedIn */
.social-links a:hover:nth-child(8) { background: #e60023; } /* Pinterest */
.social-links a:hover:nth-child(9) { background: #25d366; }
/* Tablet View */
@media (min-width: 768px) {
  .footer-top, .footer-middle, .footer-bottom {
      text-align: center;
  }
  .footer-middle .footer-column ul {
      grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop View */
@media (min-width: 1024px) {
  .footer-top {
      flex-direction: column;
      
  }
  .footer-middle {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap:4rem;
      text-align: left;
  }
  .footer-column {
      align-items: flex-start;
      text-align: left;
  }
  .footer-bottom {
      display: flex;
      justify-content: space-between;
      text-align: left;
  }
}
@media (min-width: 1199px) {
  .footer-top {
      flex-direction: row;
      justify-content: space-between;
      text-align: left;
  }
}