/* Make Footer Sticky */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures the body takes full height */
}

footer {
    margin-top: auto; /* Pushes footer to the bottom */
    background-color: #8B0000;
    color: white;
    text-align: center;
    padding: 20px 0;
}

/* Responsive Footer Layout */
@media (max-width: 768px) {
    footer .container {
        height: auto; /* Adjust height dynamically */
        padding: 20px;
    }

    footer .row {
        flex-direction: column;
        text-align: center;
    }

    footer .col-md-4 {
        margin-bottom: 20px;
    }
}


    html {
      scroll-behavior: smooth;
    }



    :root {
      --font-primary: "Playfair Display", serif;
      --font-secondary: "Inter", sans-serif;
      --color-dark: #222;
      --color-light: #f5f5f5;
      --color-accent: #a39e9a;
    }

    body {
      font-family: var(--font-secondary);
      color: var(--color-dark);
      background-color: var(--color-light);
    }

    .navbar-brand {
      font-family: var(--font-primary);
      font-size: 1.4rem;
      text-transform: uppercase;
      letter-spacing: 0.1rem;
    }

    /* .hero {
      text-align: center;
      padding: 8rem 2rem;
      background: url("media/hero/redcouch-min.jpg") no-repeat center center/cover;
      color: var(--color-light);
    }



    .hero h1 {
      font-family: var(--font-primary);
      font-size: 4rem;
      text-transform: uppercase;
      letter-spacing: 0.05rem;
      margin-bottom: 1rem;
    } */

    .hero {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 8rem 2rem;
      background: url("../media/hero/redcouch-min.jpg") no-repeat center center/cover;
      color: var(--color-light);
      min-height: 100vh;
      /* Ensure full screen height */
      width: 100%;
      overflow: hidden;
    }

    .hero h1 {
      font-family: var(--font-primary);
      font-size: 3.5rem;
      text-transform: uppercase;
      letter-spacing: 0.05rem;
      margin-bottom: 1rem;
    }

    .hero p {
      font-size: 1.2rem;
      max-width: 80%;
      margin: 0 auto;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      .hero {
        padding: 8rem 2rem;
        /* Reduce padding for small screens */
        min-height: auto;
        /* Prevent overflow issues */
      }

      .hero h1 {
        font-size: 2rem;
        /* Reduce heading size for mobile */
      }

      .hero p {
        font-size: 1rem;
        max-width: 90%;
      }
    }

    .section-title {
      font-family: var(--font-primary);
      font-size: 2.2rem;
      text-transform: uppercase;
      text-align: center;
      margin-bottom: 2rem;
    }

    .svcpic {
      max-width: 300px;
      text-align: center;
    }

    .card {
      height: 400px;

    }

    .carda {
      background-color: #8B0000;
      padding: 20px;
    }

    .cardb {
      background-color: silver;
      padding: 20px;
      text-align: right;
    }

    .cardc {
      background-color: #000;
      padding: 20px;
    }

    .cardd {
      background-color: rgb(53, 53, 53);
      padding: 20px;
    }

    .carda,
    .cardb,
    .cardc,
    .cardd {
      display: flex;
      align-items: center;
      /* Center vertically */
      justify-content: center;
      /* Center text horizontally */

      height: 500px;
      color: #fff;
    }

    #services {
      width: 100%;
      /* Full viewport width */
      margin: 0;
      /* Remove default margins */
    }

    #services .container {
      max-width: 100%;
      /* Ensures the container takes full width */
    }

    #appointment {
      position: relative;
      background: url('../media/images/beauty.jpg') no-repeat center center !important;
      background-size: cover !important;
      color: #fff;
    }


    .servtext {
      width: 70%;
      text-align: left;
    }

    @media (max-width: 1142px) {
      .servtext {
        width: 95%;
        text-align: left;
      }

    }

    h3 {
      font-family: "Playfair Display", serif;
    }

    .about-text {
      text-align: left !important;
    }

    .custom-btn2 {
      background: transparent;
      color: #000;
      border: 1px solid #000;
      padding: 10px 20px;
      font-weight: 400;
      border-radius: 0;
      transition: all 0.3s ease-in-out;
    }

    .custom-btn2:hover {
      background: #000;
      color: #fff;
    }

    .custom-btn {
      background: transparent;
      color: white;
      border: 1px solid white;
      padding: 10px 20px;
      font-weight: 400;
      border-radius: 0;
      transition: all 0.3s ease-in-out;
    }

    .custom-btn:hover {
      background: white;
      color: black;
    }

    .accordion-button:not(.collapsed) {
      background-color: #8B0000;
      color: #fff;
    }

    .accordion-button:focus {

      border-color: #000 !important;
    }

    .accordion-button:not(.collapsed) {

      box-shadow: inset 0 -16 0 #8B0000 !important;
    }

    .down-button {
      display: inline-block;
      font-size: 2rem;
      color: white;
      text-decoration: none;
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      transition: transform 0.3s ease-in-out;
      animation: bounce 1.5s infinite;
    }

    /* Hover Effect */
    .down-button:hover {
      transform: translateX(-50%) translateY(5px);
    }

    /* Bounce Animation */
    @keyframes bounce {

      0%,
      100% {
        transform: translateX(-50%) translateY(0);
      }

      50% {
        transform: translateX(-50%) translateY(10px);
      }
    }

    /* Adjust for mobile screens */
    @media (max-width: 768px) {
      .down-button {
        font-size: 1.5rem;
      }
    }
    .shadow-text {
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.7);
}

/* Adjust for mobile */
@media (max-width: 768px) {
    .shadow-text {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    }
    
}


  
.contact-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    padding: 50px;
    background: white;
    width: 100%;
    margin: auto;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.contact-info {
    width: 40%;
}

.contact-info h2, .contact-form h2 {
    font-size: 24px;
    color: #333;
}

.contact-info p {
    color: #555;
    line-height: 1.6;
}

.contact-info a {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

.contact-form {
    width: 100%;
    background: #ffffff;
    /* padding: 0px 20px 20px 0px;  */
    border-radius: 8px;
}

.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

.contact-form textarea {
    height: 100px;
    resize: none;
}

.contact-form button {
    width: 100%;
    padding: 12px;
    font-size: 18px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}


/* Mobile responsiveness */
@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
        padding: 20px;
    }

    .contact-info, .contact-form {
        width: 100%;
    }
}

.outreach {
    height: 300px; 
    border-radius: 8px;

}

.outreachdiv {
    text-align: right;
}

@media (max-width: 768px) {
    .outreach {
    height: 100%;
    max-width: 300px;

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

#contact {
    min-height: 400px;
}


@media (max-width: 768px) {
    #contact {
        min-height: unset;
    }
}