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

:root {
    --primary: white;
    --dark: grey;
    --light: white;
    --shadow: 0 1px 5px rgba(130, 119, 119, 0.8);
 }

 html {
    scroll-behavior: smooth;
 }

@font-face {
    font-family: "futura";
    src: url(fonts/futura/Futura\ Book\ font.ttf);
 }

body a:hover {
    color: red;
}

body {
    display: grid;
    width: 100%;
    font-family: futura;
    background-color: rgb(255, 255, 255); 
    

    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-rows: ;
    grid-template-areas: 
                "header header header header"
                "nav nav nav nav"
                "slider slider slider slider"


                "nd_head nd_head nd_head nd_head"
                "Hardware_services Hardware_services Hardware_services Hardware_services"

                "explained_text explained_text explained_text explained_text"
                "explained_image explained_image explained_image explained_image"

                "hardware hardware hardware hardware"

                "footer footer footer footer"
}


header {
    grid-area: header;
    text-align: center;
    box-shadow: var(--shadow);
}


nav {
    grid-area: nav;
    display: flex;

    align-items: center;
    justify-content: start;
    box-shadow: var(--shadow);
}

nav .logo {
    margin-left: 2rem;
}


nav img {
    max-width: 60%;
    width: 100%;
    padding: .7rem 0;
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li a {
    list-style: none;
    text-decoration: none;
    color: rgb(0, 0, 0);
    padding: 0 1rem;
    margin: .3rem;
    box-shadow: var(--shadow);
    font-size: .9rem;
}





/* DROP DOWN MENU */

nav ul li ul {
    display: none;
    position: absolute;
    border-radius: .1rem;
}

nav ul li ul li {
    width: 120px;
    display: grid;
    justify-content: center;
    margin-top: .5rem;
    margin-bottom: 1rem;
}

nav ul li ul li a {
    box-shadow: none;
    padding: rem 1rem;
    border-bottom: .6px white solid;
}

nav ul li ul li a:hover {
    box-shadow: var(--shadow);
}

nav ul li:hover ul {
    display: block;
}


            /* Button Styling */
            .back-to-top {
                position: fixed;
                bottom: 20px;
                right: 20px;
                display: none;
                box-shadow: var(--shadow);
                background-color: rgba(255, 255, 255, 0.655);
                color: white;
                padding: 10px 15px;
                border-radius: 5px;
                text-decoration: none;
                font-size: 14px;
                font-weight: bold;
                transition: 0.3s;
            }
    
          
    
            /* Show button when page is scrolled */
            html:has(:target) .back-to-top {
                display: block;
            }
    
            .back-to-top a {
                color: black;
            }
    
    
            /* CALL TO ACTION BUTTON */
            .cta-button {
                position: fixed;
                bottom: 60px;
                right: 20px;
                box-shadow: var();
                background-color: rgba(255, 255, 255, 0.521);
                color: white;
                padding: 12px 20px;
                font-size: 16px;
                font-weight: bold;
                border-radius: 5px;
                text-decoration: none;
                box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
                transition: background-color 0.3s, transform 0.2s;
            }







.slider {
    grid-area: slider;

     position: relative;
    text-align: center;
    color: rgb(255, 255, 255);
}


.swiper {
    width: 100%;
    height: fit-content;
}

.swiper-slide img {
    width: 100%;
    height: auto;
}

.swiper .swiper-button-prev {
    color: white;
}

.swiper .swiper-button-next {
    color: white;
}

.swiper .swiper-pagination-bullet-active {
    background-color: white;
}





.main_text {
    grid-area: main_text;
    background-color: rgb(21, 0, 63);
}

.main_text h1 {
    display: grid;

    padding: 1rem;
    color: white;
    font-size: 1rem;
}

.main_text p {
    padding: 1rem;
    color: white;
}

.main_image {
    grid-area: main_image;
    background-color: rgb(21, 0, 63);
}

.main_image img {
    width: 100%;
}


.nd_head {
    grid-area: nd_head;
    background-color: white;
    box-shadow: var(--shadow);
    margin: 3rem 0;
    text-align: center;
    padding: 1rem 0;
}

.nd_head a {
    text-decoration: none;
    color: black;
}




.Hardware_services {
    grid-area: Hardware_services;
    display: flex;
    justify-content: center;
}


.Hardware_services article {
    padding: 2rem 4rem;
    margin: 1rem;
    border: 2px solid rgb(0, 0, 0);
    border-radius: 7px;
}

.Hardware_services a {
    text-decoration: none;
    color: black;
}



.explained_image {
    grid-area: explained_image;
    margin: 3rem 0;
}

.explained_image img {
    width: 100%;
}


.explained_text {
    grid-area: explained_text;
    margin: 2rem;
}




/* THE HARDWARE STORE */

.hardware {
    grid-area: hardware;
}



.hardware h2 { 
    text-align: center;
    box-shadow: var(--shadow);
    padding: 1rem 0;
}

.hardware h3 {
    padding: 1rem;
    margin: 1rem 0;
}

.hardware .hardware_materials {
    display: flex;
   align-items: center;
    padding: 1rem;
}

.hardware .hardware_materials img {
    width: ;
}


.hardware .Building_materials {
    display: grid;
    justify-content: center;
   align-items: center;
    margin: 1rem;
}

.hardware .Building_materials img {
    width: 100%;
}





/* FOOTER SECTION */
footer {
    display: grid;
    grid-area: footer;
    box-shadow: var(--shadow);
    margin: 2rem 0;
    padding: 2rem 0;
    
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-rows: ;
    grid-template-areas:
                            "footer_social_links footer_info footer_info foot_logo"

    ;
}

footer ul li {
    list-style: none;
}


.footer_social_links {
    grid-area: footer_social_links;
    margin: 0rem 2rem;
    
}

.footer_social_links ul li a {
    display: flex;
    color: rgb(0, 0, 0);
    list-style: none;
    text-decoration: none;
    padding: 1rem;
}

.footer_social_links a:hover {
    color: royalblue;
}

.footer_info {
    grid-area: footer_info;
    display: grid;
    justify-content: center;
    padding: 1rem 1rem;
}

.footer_info ul li a {
    display: flex;
    color: rgb(0, 0, 0);
    list-style: none;
    text-decoration: none;
    padding: .5rem;
}

.footer_info a:hover {
    color: royalblue;
}

.foot_logo {
    grid-area: foot_logo;
    display: grid;
    justify-content: start;
    align-items: center;
}

.foot_logo img {
    max-width: 70%;
}













@media screen and (max-width: 768px) {

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    :root {
        --primary: white;
        --dark: grey;
        --light: white;
        --shadow: 0 1px 5px rgba(130, 119, 119, 0.8);
     }
    
     html {
        scroll-behavior: smooth;
     }
    
    @font-face {
        font-family: "futura";
        src: url(fonts/futura/Futura\ Book\ font.ttf);
     }
    
    body a:hover {
        color: red;
    }
    
    body {
        display: grid;
        width: 100%;
        font-family: futura;
        background-color: rgb(255, 255, 255); 
        
    
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-auto-rows: ;
        grid-template-areas: 
                    "header header header header"
                    "nav nav nav nav"
                    "slider slider slider slider"
    
    
                    "nd_head nd_head nd_head nd_head"
                    "Hardware_services Hardware_services Hardware_services Hardware_services"
    
                    "explained_text explained_text explained_text explained_text"
                    "explained_image explained_image explained_image explained_image"
    
                    "hardware hardware hardware hardware"
    
                    "footer footer footer footer"
    }
    
    
    header {
        grid-area: header;
        text-align: center;
        box-shadow: var(--shadow);
        margin-bottom: 0rem;
        font-size: .8rem;
    }
    
    
    nav {
        grid-area: nav;
        display: grid;
    
        align-items: center;
        justify-content: center;
        box-shadow: none;
        margin-bottom: 1rem;
    }
    
    nav .logo {
        margin-left: 4rem;
        display: grid;
        justify-content: center;
    }
    
    
    nav img {
        max-width: 60%;
        width: 100%;
        padding: .7rem 0;
    }
    
    nav ul {
        display: flex;
        list-style: none;
    }
    
    nav ul li a {
        list-style: none;
        text-decoration: none;
        color: rgb(0, 0, 0);
        padding: 0 .4rem;
        margin: .3rem;
        box-shadow: var(--shadow);
        font-size: .8rem;
    }
    
    




  
    
    
    
    
    .slider {
        grid-area: slider;
    
         position: relative;
        text-align: center;
        color: rgb(255, 255, 255);
    }
    
    
    .swiper {
        width: 100%;
        height: fit-content;
    }
    
    .swiper-slide img {
        width: 100%;
        height: auto;
    }
    
    .swiper .swiper-button-prev {
        color: white;
    }
    
    .swiper .swiper-button-next {
        color: white;
    }
    
    .swiper .swiper-pagination-bullet-active {
        background-color: white;
    }
    
    
    
    
    
    .main_text {
        grid-area: main_text;
        background-color: rgb(21, 0, 63);
    }
    
    .main_text h1 {
        display: grid;
    
        padding: 1rem;
        color: white;
        font-size: 1rem;
    }
    
    .main_text p {
        padding: 1rem;
        color: white;
    }
    
    .main_image {
        grid-area: main_image;
        background-color: rgb(21, 0, 63);
    }
    
    .main_image img {
        width: 100%;
    }
    
    
    .nd_head {
        grid-area: nd_head;
        background-color: white;
        box-shadow: var(--shadow);
        margin: 0rem 0;
        text-align: center;
        padding: 1rem 0;
    }
    
    .nd_head a {
        text-decoration: none;
        color: black;
        font-size: 1rem;
    }
    
    
    
    
    .Hardware_services {
        grid-area: Hardware_services;
        display: flex;
        justify-content: center;
    }
    
    
    .Hardware_services article {
        padding: 1rem 1rem;
        margin: 1rem .3rem;
        border: 2px solid rgb(0, 0, 0);
        border-radius: 7px;
    }
    
    .Hardware_services a {
        text-decoration: none;
        color: black;
        font-size: .7rem;
    }
    
    
    
    .explained_image {
        grid-area: explained_image;
        margin: .5rem 0;
    }
    
    .explained_image img {
        width: 100%;
    }
    
    
    .explained_text {
        grid-area: explained_text;
        margin: .5rem;
        font-size: 1rem;
    }
    
    
    
    
    /* THE HARDWARE STORE */
    
    .hardware {
        grid-area: hardware;
    }
    
    
    
    .hardware h2 { 
        text-align: center;
        box-shadow: var(--shadow);
        padding: 1rem 0;
        font-size: 1rem;
    }
    
    .hardware h3 {
        padding: 1rem;
        font-size: .8rem;
    }

    .hardware figcaption {
        font-size: 1rem;
    }

    .hardware p {
        font-size: .8rem;
    }
    
    .hardware .hardware_materials {
        display: grid;
       align-items: center;
        padding: 1rem;
    }
    
    .hardware .hardware_materials img {
        width: 100%;
        max-width: ;
    }
    
    .hardware .Building_materials {
        display: grid;
        justify-content: center;
       align-items: center;
        margin: 1rem;
    }
    
    .hardware .Building_materials img {
        width: 100%;
    }
    
    
    
    
    
    
    /* FOOTER SECTION */
    
    footer {
        display: grid;
        grid-area: footer;
        box-shadow: var(--shadow);
        margin: 0rem 0;
        padding: 2rem 0;
        
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-auto-rows: ;
        grid-template-areas:
                                "foot_logo foot_logo foot_logo foot_logo"
                                "footer_social_links footer_social_links footer_info footer_info"
    
        ;
    }
    
    footer ul li {
        list-style: none;
    }
    
    
    .footer_social_links {
        grid-area: footer_social_links;
        margin: 0rem .5rem;
        
    }
    
    .footer_social_links ul li a {
        display: flex;
        color: rgb(0, 0, 0);
        list-style: none;
        text-decoration: none;
        padding: 1rem .2rem;
        font-size: .7rem;
    }
    
    .footer_social_links a:hover {
        color: royalblue;
    }
    
    .footer_info {
        grid-area: footer_info;
        display: grid;
        justify-content: center;
        padding: 1rem .1rem;
    }
    
    .footer_info ul li a {
        display: flex;
        color: rgb(0, 0, 0);
        list-style: none;
        text-decoration: none;
        padding: .5rem 0;
        font-size: .7rem;
    }
    
    .footer_info a:hover {
        color: royalblue;
    }
    
    .foot_logo {
        grid-area: foot_logo;
        display: grid;
        justify-content: start;
        align-items: center;
    }
    
    .foot_logo img {
        max-width: 70%;
    }

}