/* Reset default margin and padding */
    html, body { 
        margin: 0;
        padding: 0;
    }

    /* ====== Header ====== */
    header {
        align-items: center;
        justify-content: center;
        padding: 60px; /* bigger padding for better height */
        gap: 30px;
        background-image: url('../images/stove.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
    }


    #logo {
        width: auto;          /* reset flexible width */
        max-width: 250px;     /* max width it can grow to */
        min-width: 150px;     /* minimum size so it doesn’t get too small */
        height: auto;         /* maintain aspect ratio */
        margin: 0 auto;       /* center horizontally */
        position: static;
        display: block;
    }


    #gas_safe {
        width: 100px;
        position: fixed;
        top: 20px;   /* distance from top of viewport */
        right: 20px; /* distance from right of viewport */
        z-index: 1000; /* ensures it stays above other content */
    }

    #strapline {
        background-color: red;
        margin: 0;
        padding: 10px;
    }

    #strapline h4 {
        color: rgb(252, 252, 252);
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        font-size: 30px;
        font-style: italic;
    }

    /* ====== Navigation ====== */
    nav { 
        background-color: red;
        font-size: 80%;
        padding: 0 10%;
        text-align: center;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        position: relative;
        bottom: 0;
    }

    nav ul {
        list-style: none;
        width: 90%;
        padding: 1%;
        margin: 0;
    }

    nav li {
        display: inline;
        border-right: 2px solid black;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
    }

    nav li:last-of-type {
        border-right: none;
    }

    nav a { 
        color: white;
        text-decoration: none;
        padding: 1%;
        text-align: center;
    }

    nav a:hover {
        color: #b4111e;
    }

    /* ====== Main Content ====== */

    /* Contact / About Section */
    #about-contents {
        background-color: #fff;
        color: #000;
        font-family: Arial, Helvetica, sans-serif;
        padding: 60px 20px;
        margin: 100px auto; /* top margin increased */
        width: 90%;
        max-width: 1100px;
        text-align: center;
        border-radius: 15px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        border: 2px solid black;
    }

    #about-contents h2 {
        font-size: 3rem;
        margin-bottom: 30px;
        font-weight: bold;
        color: #b4111e;
    }

    #about-contents p {
        font-size: 1.5rem;
        line-height: 1.8;
        max-width: 900px;
        margin: 0 auto 20px;
        color: #333;
    }

    #about-info {
        font-size: 1.1rem;
        color: #666;
        margin-top: 20px;
    }

    #about-contents a {
        text-decoration: none;
        color: #b4111e;
        font-weight: bold;
    }

    #about-contents a:hover {
        text-decoration: underline;
    }

    /* Images around about */
    #about-images {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px;
        padding: 40px 20px;
    }

    .about-image {
        width: 100%;
        max-width: 400px;
        height: auto;
        border-radius: 20px;
        border: 10px solid rgb(219, 0, 0);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s;
    }

    .about-image:hover {
        transform: scale(1.03);
    }

    /* Map and location */
    #map-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 40px 0 20px 0;
        /* No positioning offsets here */
    }

    #map {
        width: 600px;
        height: 500px;
        border: 7px solid black;
        border-radius: 20px;
        margin: 0 auto;
        position: static; /* reset offsets */
        bottom: auto;
        left: auto;
    }

    /* Location content */
    #location-contents {
        position: relative;
        bottom: 1500px;
        left: 1250px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        border: 7px solid black;
        border-radius: 40px;
    }

    /* Divider */
    .divider {
        background-color: red;
        color: white;
        text-align: center;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        font-style: italic;
        font-size: 2rem;
    }

    /* ====== Footer ====== */
    #index_footer {
        background-color: red;
        margin: 0;
        padding: 30px;
        position: relative;
        top: 200px;
    }


    #services_footer {
        background-color: red;
        margin: 0;
        padding: 30px;
        position: relative;
        top: 200px;
    }

    #footer_email, #footer_text {
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 30px;
        color: white;
        font-style: italic;
        position: relative;
    }

    #footer_email {
        bottom: 60px;
    }

    #footer_text {
        bottom: 55px;
    }

    /* ====== Services Page ====== */
    main {
        position: relative;
    }

    #boiler {
        width: 600px;
        position: relative;
        left: 2px;
        bottom: 25px;
        height: auto;
    }

    #services_main {
        font-family: Arial, Helvetica, sans-serif;
        color: #000;
        font-weight: bold;
        padding: 50px 5%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 50px;
    }

    .service {
        background: #f3f0f0;
        border-radius: 15px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        overflow: hidden;
        width: 45%;
        min-width: 320px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        transition: transform 0.3s;
        border: 2px solid black;
    }

    .service:hover {
        transform: translateY(-10px);
    }

    .service-image, #service-image-pipe {
        width: 100%;
        max-height: 300px;
        object-fit: cover;
        margin-bottom: 20px;
        border-radius: 40px;
    }

    #service-image-pipe {
        width: 90%;
    }

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

    .service-content h2 {
        font-size: 40px;
        margin-bottom: 20px;
        color: #b4111e;
    }

    .service-content ul {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 20px;
    }

    .service-content ul li {
        margin-bottom: 10px;
    }

    .service-title {
        color: #000;
    }

    #estimate-info {
        font-size: 30px;
        color: #000;
    }

    .service-number {
        border-radius: 10px;
        max-width: 600px;
    }

    #service-whatsapp {
        width: 180px; 
    }

    /* Gas engineer list and plumbing maintenance */
    #gas_eng_list {
        position: relative;
        left: 600px;
        bottom: 350px;
        font-size: 25px;
    }

    #gas_eng_title {
        font-size: 50px;
        position: relative;
        left: 100px;
        font-weight: bold;
    }

    #plumbing_maint_list {
        position: relative;
        left: 2040px;
        bottom: 1370px;
        font-size: 25px;
    }

    #plumbing_maint_title {
        font-size: 50px;
        position: relative;
        left: 1600px;
        bottom: 730px;
        font-weight: bold;
    }

    #tap {
        position: relative;
        width: 400px;
        bottom: 750px;
        left: 1600px;
    }

    /* ====== Miscellaneous ====== */

    #number {
        position: relative;
        left: 625px;
        top: 50px;
    }

    #insta {
        width: 350px;
        position: relative;
        top: 5px;
        left: 50px;
    }

    #yell {
        position: relative;
        top: 60px;
        left: 1200px;
        width: 350px;
    }

    /* ====== Contact Page ====== */
    #contact-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 100px auto;
        padding: 40px 20px;
        max-width: 1200px;
        background-color: #f9f9f9;
        border-radius: 20px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        font-family: Arial, Helvetica, sans-serif;
        border: 3px solid #b4111e;
    }

    #contact-section h1 {
        color: #b4111e;
        font-size: 2.8rem;
        margin-bottom: 20px;
        text-align: center;
    }

    #contact-details {
        text-align: center;
        font-size: 1.3rem;
        margin-bottom: 40px;
        line-height: 1.6;
        color: #333;
    }

    .contact-iframe {
    width: 100%;
    max-width: 1200px; /* max width you want */
    height: 1380px;
    border: none;
    border-radius: 20px;
    margin: 0 auto;
    display: block;
    background-color: rgb(253, 190, 190);
    }

    #location-title {
        font-size: 2.2rem;
        font-weight: bold;
        margin: 40px 0 20px 0;
        color: #b4111e;
        text-align: center;
    }

    /* Images container for icons (optional) */
    #images-container img {
        max-width: 50px;
        height: auto;
    }

    .contact-main {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    padding: 60px 20px;
    }

    .contact-title {
    font-size: 3rem;
    color: #b4111e;
    margin-bottom: 20px;
    }

    .contact-intro {
    font-size: 1.5rem;
    margin-bottom: 30px;
    }

    #map {
    height: 500px;
    width: 1000px;
    border-radius: 20px;
    margin: 0 auto;
    }


    .social-icons {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
        margin: 20px auto;
        max-width: 100%;
    }

    .social-icons img {
        width: 400px;
        height: auto;
        transition: transform 0.3s ease;
    }

    .social-icons img:hover {
        transform: scale(1.1);
    }

    #gal-images {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
        gap: 15px; /* space between images */
        max-width: 1000px; /* optional max width */
        margin: 0 auto; /* center the gallery */
        margin-top: 20px;
    }

    #gal-images img {
        width: 100%;
        height: 300px;
        border-radius: 8px; /* optional rounding */
        object-fit: cover;
    }

    /* ====== Responsive ====== */

    @media screen and (max-width: 1600px) {
        .service-number {
            width: 600px;
        }
    }

    @media screen and (max-width: 1300px) {
        .service-number {
            width: 400px;
        }
        
    }

    @media screen and (max-width: 768px) {
        header {
            flex-direction: column;
            text-align: center;
        }

        nav li {
            display: block;
            border: none;
            padding: 10px 0;
        }

        #logo {
            width: 80%;
            position: static;
            margin-bottom: 80px;
        }

        #gas_safe {
            width: 50px;
        }

        #strapline h4 {
            width: 400px;
    }

        .service {
            width: 100%;
        }

        #strapline h4 {
            font-size: 20px;
        }

        .service-number {
            width: 400px;
        }
        
    }

#logo_index {
  max-width: 790px;  /* increased from 200px */
  width: 100%;
  height: auto;
  transition: transform 0.5s ease, filter 0.3s ease;
}


#logo_index:hover {
  transform: scale(1.2) rotate(3deg);
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
}

/* Optional Keyframe (for advanced effects if needed) */
@keyframes logoHoverPop {
  0% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.2) rotate(3deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

#index-nav {
    background-color: white;
}

#index-body {
  margin: 0;
  padding: 0;
  background-color: white; /* White background for index */
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 40px solid red; /* Add this line */
  box-sizing: border-box; /* Ensures the border doesn't affect layout */
}



/* Logo click animation */
#logo_index.animate-click {
  animation: logoClickAnim 0.7s ease forwards;
}

@keyframes logoClickAnim {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(0.6) rotate(-10deg);
    opacity: 0;
  }
}



    /* ====== Social Icons ====== */
    @media screen and (max-width: 1200px) {
        .social-icons img {
            width: 230px;
        }

        #strapline h4 {
            font-size: 12px;
            text-align: left;   
        }

        .line-break {
            display: block;
        }
      
      	.services_footer {
          	margin-bottom: 200px
      	}

		.index_footer {
          	margin-bottom: 200px
      }

        #footer_text {
            font-size: 15px;
        }
      

        #footer_email {
            font-size: 25px;
        }

        #about-contents {
            width: 300px;
        }

        .divider h2 {
            font-size: 26px;
        }
        
        #map-wrapper {
            width: 350px;
            margin-left: 8px;
        }

        .service {
            width: 200px;
            font-size: 400px;
        }

        #num-service {
            width: 200px;
        }
    }

    @media screen and (min-width: 413px) and (max-width: 420px) {
        #map-wrapper {
            width: 400px;
        }
    }

    @media screen and (min-width: 600px) and (max-width: 1024px) {
        #strapline h4 {
            margin-left: 116px;
        }

        #strapline h4 {
            font-size: 25px;
            text-align: left;   
        }

        .line-break{
            display: block;
        }

        #gas_safe {
            width: 70px;
        }
    }