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

 body {
    font-family: Arial, sans-serif;
    font-weight: 500;
} 
 
/* NAVBAR */

.navbar {
    
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;

    padding: 25px 50px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    z-index: 100;
}

/* LOGO */

.logo-container {
    display: flex;
    align-items: center;
}

.logo {
    width: auto;

    /* Adjust these values if needed */
    height: clamp(55px, 6vw, 90px);

    display: block;

    object-fit: contain;
}

/* RIGHT SIDE */

.nav-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* SOCIALS */

.social-links {
    display: flex;
    align-items: center;
    gap: 16px;
}

.social-links a img {
    width: 22px;
    height: 22px;

    transition: transform .3s ease;
}

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

/* HERO SECTION */
.hero-section {
  min-height: 100vh;
  background: white;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  padding: 120px 20px 40px;
}

/* HERO CONTENT */
.hero-content {
  text-align: center;
  max-width: 900px;
  margin: auto;
}

.hero-content h1 {
  font-size: 5rem;
  line-height: 1.1;
  margin-bottom: 20px;

  
  font-family: "Oleo Script", system-ui;
  
}

.hero-content p {
  font-size: 1.2rem;
  color: black;
  line-height: 1.7;
  max-width: 700px;
  margin: auto auto 35px;
  font-family: var(--low);
  font-weight: 500;
    font-family: "Neuton", serif; 
   
}

/* BUTTON */
.hero-btn {
  display: inline-block;
  padding: 14px 34px;
  outline: 2px solid rgb(43, 40, 40);
  color: black;
  text-decoration: none;
  border-radius: 40px;
  font-weight: 600;
  transition: 0.3s ease;
  text-transform:uppercase ;
  
   font-family: sans-serif;
}

.hero-btn:hover {
  transform: translateY(-3px);
}

/* INSURANCE SECTION */
.insurance-section {
  width: 100%;
  margin-top: 80px;
}

.insurance-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 1.2rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #aaa;

  
     font-family: sans-serif;
     font-weight: 900;
}

/* LOGO CAROUSEL */
.scrolling-text {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.rail {
  display: flex;
  align-items: center;
  gap: 70px;
  width: max-content;
  animation: scroll 70s linear infinite;
}

/* ALL LOGOS SAME SIZE */
.rail img {
  width: 140px;
  height: 70px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.9;
  transition: 0.3s ease;
}

.rail img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* SLOW INFINITE SCROLL */
@keyframes scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {

  .hero-section {
    padding-top: 100px;
  }

  .hero-content h1 {
    font-size: 2.8rem;
  }

  .hero-content p {
    font-size: 1rem;
  }

  .rail {
    gap: 40px;
    animation-duration: 35s;
  }

  .rail img {
    width: 100px;
    height: 50px;
  }

  .insurance-title {
    font-size: 1rem;
  }
}

/* BUTTON */
.hero-btn {
  display: inline-block;
  padding: 14px 34px;
  outline: 2px solid rgb(43, 40, 40);
  color: rgb(40, 38, 38);
  text-decoration: none;
  border-radius: 40px;
  font-weight: 600;
  transition: 0.3s ease;
  text-transform:uppercase ;

}

.hero-btn:hover {
  transform: translateY(-3px);
}

/* CONTACT BUTTON */

.contact-btn {
    text-decoration: none;

    padding: 12px 24px;

    border: 2px solid rgb(40, 38, 38);

    color: rgb(40, 38, 38);

    border-radius: 999px;

    transition: .3s ease;
    
}

.contact-btn:hover {
    background: #da4a10;
    color: rgb(40, 38, 38);
}

@media (max-width: 768px) {

    .navbar {
        justify-content: center;
        padding: 20px;
    }

    .nav-right {
        display: none;
    }

    .logo {
        height: 70px;
    }

}
/* SECTIONS */

.section {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 80px 20px;

    background-color: #f5f5f1;
/* 
    background-image:
        linear-gradient(
            rgba(255,255,255,0.05) 2px,
            transparent 2px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.05) 2px,
            transparent 2px
        ),
        linear-gradient(
            rgba(255,255,255,0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.04) 1px,
            transparent 1px
        ); */

    background-size:
        100px 100px,
        100px 100px,
        20px 20px,
        20px 20px;

    background-position:
        -2px -2px,
        -2px -2px,
        -1px -1px,
        -1px -1px;
}

.container {
    max-width: 1000px;
    text-align: center;
}

.hero h1 {
    font-size: clamp(3rem, 8vw, 6rem);
    margin-bottom: 20px;
    font-family: Arial, sans-serif;
}

.section h2 {
    font-size: 3rem;
    margin-bottom: 20px;
    
     font-family: "Oleo Script", system-ui;
}

.section p {
    line-height: 1.8;
    color: #666;
    font-family: Arial, sans-serif;
}

/* FOOTER */

.footer {
    background-color: #d7c47d;
    border-top: 3px solid rgb(215, 47, 10);
    color: rgb(40, 38, 38);
   padding: 70px 40px 30px;
    font-family: sans-serif;
}

/* CONTAINER */
.footer-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 50px;
  max-width: 1400px;
  margin: auto;

  font-weight: 800;
  
}

/* COLUMNS */
.footer-column h3 {
  font-size: 1.1rem;
  margin-bottom: 20px;
  letter-spacing: 1px;
  
}

.footer-column p,
.footer-column a {
  color: #666;
  line-height: 1.8;
  text-decoration: none;
  transition: 0.3s ease;
}

/* LINKS */
.footer-column a:hover {
  color: #da4a10;
}

/* SOCIAL LINKS */
.footer-socials {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* BOTTOM */
.footer-bottom {
  border-top: 1px solid white;
  margin-top: 50px;
  padding-top: 25px;
  text-align: center;
}

.footer-bottom p {
  color: black;
  font-size: 0.9rem;
}


.hours-list {
  list-style: none;
  padding: 0;
  margin-right: 250px;
  color: #666;
  
}

.hours-list li {
  display: flex;
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 4px;
  

}

.hours-list li span:first-child {
  width: 85px;
  font-weight: 600;
}

/* Base Layout */
.hours-container {
  max-width: 100%;
  padding: 1rem;
  
  border-radius: 8px;
  font-family: sans-serif;
}

.hours-title {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  text-align: center;
}


/* Status Badge Styles */
.status-badge {
  text-align: center;
  font-weight: bold;
  padding: 0.5rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.status-badge.open {
  background-color: #d4edda;
  color: #155724;
}

.status-badge.closed {
  background-color: #f8d7da;
  color: #721c24;
}

.status-badge.checking {
  background-color: #e2e3e5;
  color: #383d41;
}

/* List Formatting */
.hours-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hours-item {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid #666;
}

.hours-item:last-child {
  border-bottom: none;
}

/* Dynamic Highlight for Current Day */
.hours-item.current-day {
  background-color: #e8f4fd;
  font-weight: bold;
  border-radius: 4px;
}

.hours-item.closed .time {
  color: #d9534f;
}




/* MOBILE */

@media (max-width: 768px) {

    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .section h2 {
        font-size: 2.2rem;
    }

}
.rental-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 200px 40px;

  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;

  align-items:flex-start;
} 


/* LABEL */
.rental-label {
  display: block;
  letter-spacing: 2px;
  font-size: 0.9rem;
  color: #777;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-family: sans-serif;
}

/* BIG HEADING */
.rental-left h2 {
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1.1;
  font-weight: 700;
  margin: 0;
 text-align: left;
 font-family: "Oleo Script", system-ui;
}

.rental-left p{
  line-height: 1.8;
  color: #666;
  max-width: 550px;
  font-weight: 500;
  font-size: 20px;
  font-family: sans-serif;
}

.rental-right {
  position: relative;
  width: 100%;
  height: 600px;

  overflow: hidden;
  border-radius: 24px;
}

.rental-right img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  display: block;
}

/* SHOWCASE SERVICES */

.services-rental {
    max-width: 1400px;
    margin: 0 auto;

    padding: 100px 40px;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    gap: 40px;
    align-items: center;
    
}

.services-column {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.info-card {
    display: flex;
    flex-direction: column;

    height: 100%;

    padding: 1.5rem;

    border-bottom: 2px solid #d35400;
}

.info-card p {
    flex-grow: 1;
    line-height: 1.7;
    color: #666;
}
.info-card h3 {
    margin-bottom: 10px;
    font-size: 1.2rem;
     font-family: "Oleo Script", system-ui;
}



/* SHOWCASE */

.hero-showcase {
    position: relative;
}

.showcase-tag {
    text-align: center;
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: 2px;
    
}

.showcase-gallery {
    position: relative;
    height: 600px;
    overflow: hidden;
    border-radius: 24px;
}

.showcase-image_service {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0;
    transition: opacity 1s ease;
}

.showcase-image_service.active {
    opacity: 1;
}


/* INSURANCE SECTION */
.insurance-section {
  width: 100%;
  margin-top: 80px;
}

.insurance-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 1.2rem;
  letter-spacing: 2px;
 
  color: rgb(40, 38, 38);

  
}

/* LOGO CAROUSEL */
.scrolling-text {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.rail {
  display: flex;
  align-items: center;
  gap: 70px;
  width: max-content;
  animation: scroll 70s linear infinite;
}

/* ALL LOGOS SAME SIZE */
.rail img {
  width: 140px;
  height: 70px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.9;
  transition: 0.3s ease;
}

.rail img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* SLOW INFINITE SCROLL */
@keyframes scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}


@media (max-width: 768px) {

    .services-grid {

        grid-template-columns: 1fr;

        grid-template-areas:
            "showcase"
            "left"
            "right";

        gap: 50px;

        padding: 80px 20px;
    }

    .hero-showcase {
        grid-area: showcase;
    }

    .services-column:first-child {
        grid-area: left;
    }

    .services-column:last-child {
        grid-area: right;
    }

    .showcase-gallery {
        height: 350px;
    }


    rail {
    gap: 40px;
    animation-duration: 35s;
  }

  .rail img {
    width: 100px;
    height: 50px;
  }

  .insurance-title {
    font-size: 1rem;
  }

  
  /* Rental Section */
  .rental-section {
    grid-template-columns: 1fr;
    gap: 40px;

    padding: 150px 20px;
  }

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

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

  .rental-left h2 {
    font-size: 2.5rem;
    text-align: center;
  }

  .rental-left p {
    max-width: 100%;
    margin: 0 auto;
    font-size: 1rem;
  }

  .rental-right {
    height: 350px;
  }

  /* Rental Services Cards */
  .services-rental {
    grid-template-columns: 1fr;
    gap: 25px;

    padding: 60px 20px;
  }

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

}

/* SHOWCASE WORK */
.services-grid {
  display: grid;

  grid-template-columns:
      repeat(auto-fit, minmax(250px, 1fr));

  gap: 2rem;

  max-width: 1200px;
  margin: 0 auto;
}



.info-card {
  padding: 1.5rem;
}

.info-card h3 {
  margin-bottom: .75rem;
}



.info-card p {
  line-height: 1.6;
  color: rgb(40, 38, 38);
}

/* SHOWCASE SECTION */
.showcase-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 100px 40px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;

  align-items: center;
}

/* LEFT */

.showcase-label {
  letter-spacing: 2px;
  color: rgb(40, 38, 38);
  font-size: .9rem;
}

.showcase-content h2 {
  font-size: 3.5rem;
  margin: 15px 0 25px;
  line-height: 1.1;
}

.showcase-content p {
  line-height: 1.8;
  color: rgb(40, 38, 38);
  max-width: 550px;
}

/* RIGHT */

.showcase-gallery {
  position: relative;
  width: 100%;
  height: 600px;

  overflow: hidden;
  border-radius: 24px;
}

.showcase-image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  opacity: 0;
  transition: opacity 1s ease;
}

.showcase-image.active {
  opacity: 1;
}

/* MOBILE */

@media (max-width: 768px) {

  .showcase-section {
      grid-template-columns: 1fr;
      gap: 40px;
      padding: 80px 20px;
  }

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

  .showcase-content h2 {
      font-size: 2.3rem;
  }

  .showcase-content p {
      margin: auto;
  }

  .showcase-gallery {
      height: 350px;
  }
}


/* CONTACT SECTION */
.contact-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;

  padding: 100px 60px;
 
  color: rgb(40, 38, 38);
}

/* LEFT SIDE */
.contact-label {
  color: rgb(40, 38, 38);
  letter-spacing: 2px;
  margin-bottom: 20px ;
  font-size: 0.9rem;
   
}

.contact-info h2 {
  font-size: 3.5rem;
  line-height: 1.1;
  margin-bottom: 25px;
  
}

.contact-description {
  color: rgb(40, 38, 38);
  line-height: 1.8;
  margin-bottom: 50px;
  max-width: 500px;
}

/* CONTACT ITEMS */
.contact-item {
  margin-bottom: 30px;
}

.contact-item span {
  display: block;
  color: rgb(40, 38, 38);
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.contact-item a {
  color: rgb(40, 38, 38);
  text-decoration: none;
  font-size: 1.3rem;
  transition: 0.3s ease;
}

.contact-item a:hover {
  opacity: 0.7;
}

/* FAQ SECTION */
.faq-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* FAQ ITEM */
.faq-item {
  border-bottom: 2px solid rgba(232, 91, 10, 0.856);
  padding-bottom: 20px;
}

/* QUESTION */
.faq-question {
  width: 100%;
  background: none;
  border: none;

  color: rgb(40, 38, 38);
  font-size: 1.1rem;
  font-weight: 600;

  text-align: left;
  cursor: pointer;

  padding: 15px 0;
}

/* ANSWER */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq-answer p {
  color: rgb(40, 38, 38);
  line-height: 1.7;
  padding-bottom: 10px;
}

/* ACTIVE FAQ */
.faq-item.active .faq-answer {
  max-height: 300px;
}

/* MOBILE */
@media (max-width: 900px) {

  .contact-section {
    grid-template-columns: 1fr;
    padding: 70px 25px;
    gap: 50px;
  }

  .contact-info h2 {
    font-size: 2.5rem;
  }

}