*{
    margin: 0;
    padding: 0;
    border: none;
}

html{
    overflow-x: hidden;
}

body{
    display: flex;
    flex: 1;
    padding: 0;
    margin: 0;
    flex-direction: column;
    font-family: helvetica, arial;
    width: 100%;
    letter-spacing: 1px;
    background-color: #2b2d2d;
    color: whitesmoke;

}

/* Header */
#header{
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    position: fixed;
    top: 0;
    transition: 0.4s;
    border-bottom: 2px solid whitesmoke;
    background-color: black;
} 

#logoImg{
    transition: all .2s linear;
}


/* Screens higher than 1080p */
@media only screen and (min-width: 1921px) {
        /* main page */
        .craftsmanship{
            /* border: 2px solid blue; */
            width: 80%;
            align-items: center;
            margin: auto;
        }

        /* about page */
        .about{
            margin-top: 1%;
        }
        .mission-statment{
            
            /* border: 2px solid red; */
            font-size: xx-large;
            width: 70%;
        }

        .gunsmith-info{
            width: 80%;
        }

   
  }


/* NORMAL COMPUTER SCREEN */
@media (min-width: 1101px) {
    .banner{
        margin-top: 100px;
        padding: 90px;
    }

    .banner-name{
        padding: 30px;
    }

    .mobile-social, .mobile-header{
        border: 2px solid green;
        display: none;
    }

    .mobile-header-about{
        display: none;
    }

    .tablet-header, .tablet-social{
        display: none;
    }

    .craft-middle{
        flex-direction: row;
        width: 80%;
        /* text-align: justify; */
        padding: 20px;
        gap: 20px;
    }

    .para-header{
        text-decoration: underline;
    }

    .mobile-craft{
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 20px;
        align-items: center;
    }

    .craft-para{
        line-height: 50px;
        font-size: larger;
    }

    .craft-img{
        margin-right: 20px;
    }

    .craftsmanship{
        justify-content: flex-start;
        align-items: flex-start;
    }
    
    .review-container{
        display: flex; 
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        flex-shrink: 0;
        padding: 30px;
    }
    
    .review-col{
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: space-evenly;
        align-items: flex-start;
    }
    
    .review-card{
        display: flex;
        flex-direction: column;
        border: 2px solid black;
        align-items: center;
        background-color: rgb(119, 107, 98);
        padding: 15px;
        font-size: x-large;
        line-height: 50px;
        border-radius: 25px;
        width: 380px;
    }
    
    .review-card blockquote{
        color: black;
        text-wrap: wrap;
        font-weight: bold;
    }
    
    .review-card figcaption{
        display: flex;
        color: black;
        font-weight: bold;
    }

        /* footer */
.footer{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    gap: 20px;
    background-color: rgb(36, 37, 37);
    font-family: helvetica, arial;
    letter-spacing: 1px;
}

.site-links,.social-links{
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* text-decoration: none; */
    color: white;
    /* border: 2px solid red; */
    height: 100%;
    flex-grow: 1;
    justify-content: space-evenly;
}

.site-col, .social-col{
    display: flex;
    flex-direction: column;
    /* border: 2px solid purple; */
    width: 200px;
    height: 180px;
    padding: 10px;
    text-decoration: none;
    font-family: helvetica, arial;
    letter-spacing: 1px;
    color: rgb(52, 199, 235);
    align-items: flex-start;
    justify-content: flex-start;
    
}

.footer-info{
    display: flex;
    flex-direction: column;
    /* border: 2px solid green; */
    width: auto;
    height: auto;
    padding: 10px;
}

.footer-contact{
    display: flex;
    flex-direction: column;
    flex: auto;
    align-items: flex-start;
    justify-content: space-between;
}

.footer-hours{
    /* border: 2px solid khaki; */
    display: flex;
    flex-direction: column;
    width: 100%;
}

.footer-header {
    /* border: 2px solid red; */
    display: flex;
    flex: auto;
    height: 100%;
    flex-direction: column;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    /* gap: 5px; */
    padding: 3px;
}

.footer-header p{
    /* border: 2px solid white; */
    flex-direction: row;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    width: 100%;
    height: auto;
}

.footer-header h2{
    /* border: 2px solid yellow; */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
}

.footer-store{
    /* border: 2px solid blue; */
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: space-evenly;
}

.footer-contact p{
    /* border: 2px solid yellow; */
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    /* margin-top: 10px; */
   /* padding: 10px; */
}

.footer-info h2{
    color: rgb(52, 199, 235);
}

.footer h2, .footer-info h2{
    letter-spacing: 2px;
    font-size: small;
}

.footer a{
    text-decoration: none;
    color: whitesmoke;
    /* border: 2px solid yellow; */
    /* width: 40%; */
    /* text-underline-offset: 8px; */

}

.all-cols{
    display: flex;
    flex-direction: row;
}

.site-col a:hover, .social-col a:hover{
    color: rgb(237, 67, 103);
    text-decoration: underline;
    text-underline-offset: 8px;
}
}

.left-links, .right-links{
    display: flex;
    flex: auto;
    justify-content: center;
    align-items: center;
    margin: 30px;
}

.left-links{
    justify-content: flex-end;
    /* border: 2px solid lime; */
}

.right-links{
    justify-content: flex-start;
}

.left-links a{
    margin: 15px;
    padding: 5px;
    font-size: 20px;
    /* width: 25px; */
    text-decoration: none;
    color: whitesmoke;
    /* border: 2px solid lime; */
}


.right-links a{
    margin: 15px;
    padding: 5px;
    font-size: 22px;
    width: 25px;
    text-decoration: none;
    color: whitesmoke;

}

.left-links a:hover, .right-links a:hover{
    text-decoration: underline;
    text-underline-offset: 8px;
    color: rgba(112, 201, 201, 0.781);
}

.teleNum{
    /* border: 5px solid yellow; */
    width: 50px;
    text-decoration: none;
    color: whitesmoke;
}

.teleNum:hover{
    /* text-decoration: underline; */
    /* text-underline-offset: 8px; */
    color: rgba(112, 201, 201, 0.541);
}

.logo{
    /* border: 1px solid blue; */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Home Page */
.banner{
    display: flex;
    flex-direction: column;
    background: no-repeat; 
    background-size: 100% 100%; 
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    border-top: 2px solid whitesmoke;
    border-bottom: 2px solid whitesmoke;
    background-color: 55,68,64,0.98;
    /* margin-bottom: 30px; */
    /* padding: 10px; */
    
}

.banner-name{
    display: flex;
    /* margin: 70px; */
    margin-top: 20px;
    margin-bottom: 20px;
    flex-direction: column;
    background-color: rgba(0,0,0, 0.8);
    /* padding: 40px; */
    font-weight: bolder;
    font-size: large;
    border: 2px solid whitesmoke;
    /* height: auto; */
    gap: 10px;
    /* width: 80%; */
    
}

/* craftmanship section */
.craftsmanship{
    display: flex;
    flex-direction: column;
    /* border: 2px solid yellow; */
    /* align-items: flex-start; */
    justify-content: space-between;
    align-items: center;
    /* padding: 20px; */
    text-wrap: wrap;
    /* padding: 30px; */
    font-size: 20px;
    text-align: start;
    /* padding-left: 175px; */
    /* margin-top: 10px; */
}

.craft-middle{
    display: flex;
    height: auto;
    justify-content: center;
}

.craft-middle p{
    /* border: 3px solid yellow; */
    padding: 10px;
    font-size: xx-large;
}

.service-container{
    width: 80%;
}

@media screen and (max-width: 1375px) {
        .craft-middle p{
            font-size: x-large;
        }

        .craft-middle{
            width: 90%;
        }

        .para-header{
            font-size: xx-large;
        }
}

.craft-para{
    display: flex;
    /* flex: auto; */
    flex-direction: column;
    text-wrap: wrap;
    justify-content: space-evenly;
}

.craft-img{
    display: flex;
   
    /* background-image: url(../GunSmith/images/228089_508857458981_9620_n.jpg); */
    
    width: auto;
    height: auto;
    /* margin: 0; */
    /* padding: 50px; */
    background-repeat: no-repeat;
    /* align-content: center; */
}

.reviews{
    display: flex;
    flex-direction: column;
    display: inline-flex;
    flex-shrink: 0;
    background-color: rgba(55,68,64,0.98);
    width: 100%; 
    /* height: 500px; */
    justify-content: center;
    align-items: center;
    color: white;
}

.review-container{
    /* border: 2px solid red; */
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
}

.review-col{
    display: flex;
    /* border: 2px solid blue; */
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-evenly;
    align-items: flex-start;

}

.review-card{
    display: flex;
    flex-direction: column;
    border: 2px solid black;
    align-items: center;
    background-color: rgb(103, 93, 83);
    padding: 15px;
    font-size: x-large;
    line-height: 50px;
    border-radius: 25px;
    /* width: 400px; */
    /* max-width: 400px; */
}

.review-card blockquote{
    /* border: 2px solid white; */
    color: black;
    text-wrap: wrap;
    font-weight: bold;
}

.review-card figcaption{
    /* border: 2px solid greenyellow; */
    display: flex;
    /* justify-content: flex-end; */
    /* margin-left: 180px; */
    /* margin-right: 50px; */
    color: black;
    font-weight: bold;
}

/*about us page*/
.about{
    display: flex;
    flex-direction: column;
    /* flex: 1; */
    /* border:2px solid green; */
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 5%;
    /* gap: 10px; */
}

.bizLogo{
    /* border: 200px solid blue; */
    width: 90%;
    margin-left: 10%;
}

hr{
    border: 3px solid rgb(235 , 81, 96);
    width: 50%;
    margin-top: 5%;
}

.about-logo{
    /* border: 1px solid red; */
    /* margin: 10px; */
    margin-top: 8%;
}


.about-header{
    /* border: 2px solid red; */
    /* margin: 20px; */
    height: 50%;
    /* padding-top: 30px; */
    margin-top: 3%;
}

.mission-statment{
    display: flex;
    text-wrap: wrap;
    font-size: xx-large;
    /* width: 65%; */
    padding: 20px;
    justify-content: center;
    align-items: center;
    
}

.mission-statment p{
    /* border: 2px solid blue; */
    width: 80%;
    text-align: initial;
}

.gunsmith{
    display: flex;
    flex-direction: column-reverse;
    /* margin-left: 100px;
    margin-right: 100px; */
    /* width: 60%; */
    text-align: justify;
    font-size: 1.7vw;
    /* padding: 20px; */
    /* justify-content: space-evenly; */
    align-items: center;
    justify-content: center;
    /* align-items: flex-start; */
    gap: 20px;
    /* border: 2px solid yellow; */
    margin-top: 20px;
    background-color: rgba(55,68,64,0.98);
    border-radius: 5px;
    width: 80%;
    /* height: 600px; */
}

.gunsmith img{
    /* border: 2px solid red; */
    width: 70%;
    /* height: auto; */
}

.gunsmith-info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* gap: 30px;
    padding: 10px; */
    padding-top: 0px;
    /* border: 2px solid greenyellow; */
    background-color: rgba(55,68,64,0.98);
}

.gunsmith-name{
    /* border: 3px solid slateblue; */
    padding: 3%;
    font-size: xxx-large;
}

.gunsmith-info p{
    /* border: 2px solid red; */
    font-size: xx-large;
    /* height: 50%; */
    width: 90%;
    letter-spacing: normal;
    text-align: initial;
}


 
@media screen and (min-width: 1200px){
    .gunsmith{
        /* display: inline; */
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
    }
    img{
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    /* .bizLogo{
        margin-left: 5%;
    } */
}

/* Services Page */
.service-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* border: 2px solid yellow; */
    flex-wrap: wrap;
    /* width: 80%; */
    margin: auto;
    gap: 20px;
   
}

.services-quote{
    display: flex;
    font-size: xx-large;
    /* height: 250px; */
    height: 10%;
    margin-top: 5%;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: rgba(55,68,64,0.98);
}

.services-quote h1{
    /* border: 2px solid red; */
    width: 60%;
    margin-top: 2%;
    font-size: xx-large;
    padding: 3%;
}

@media screen and (max-width: 1080px)
{
    .services-quote h1{
        margin-top: 2%;
        /* border: 2px solid red; */
        font-size: large;
    }
}

@media screen and (max-width: 1423px)
{
    .services-quote h1{
        margin-top: 5%;
        /* border: 2px solid yellow; */
        font-size: x-large;
    }

}




.cerakote, .repair, .custom, .restore{
    border: 2px solid rgb(237, 67, 103)
    /* display: flex;
    flex-direction: column; */
}

.cleanOil{
    border: 2px solid whitesmoke;
    box-sizing: border-box;
    width: 400px;
    height: auto;
}

.cleanOilList{
    display: none; 
    /* border: 2px solid limegreen;  */
}

.cleanOil:hover {
    /* background-color: black; */
    border: 2px solid rgb(52, 199, 235); 
}

.cleanOil:active{
    display: block;
    border: 2px solid red;
    /* color: white; */
    text-wrap: wrap;

}


.serv-link{
    border: 2px solid whitesmoke;
    position: relative;
    text-align: center;
    color: white;
    width: 396px;
    height: 400px;
}

.cleanList{
    display: none;
}

.serv-link h2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid whitesmoke;
    padding: 5px;
    text-align: center;
    background-color: #2b2d2d;
    opacity: 0.50;
}

.serv-link:hover{
    border: 2px solid rgb(52, 199, 235); 
    text-decoration: none;
    cursor: pointer;
    opacity: 0.90;
    /* visibility: none; */
}

.serv-link:active{
    border: 2px solid red;
    width: 500px;
    height: 500px;
    background-color: rgb(36, 37, 37);
    
}

.services-card{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    /* border: 2px solid blue; */
    width: 60%;
    width: 400px;
}

/* css for buttons to see services offered */
.expandServBTN{
    width: 100%;
    height: 100px;
    cursor: pointer;
    font-size: x-large;
    color: whitesmoke;
    font-weight: 500;
    background-color: black;
    /* background-image: url(./images/wood1.png); */
    background-size: cover;
    border-radius: 5px 5px 0 0;

}

.expandServBTN:hover{
    border: 2px solid whitesmoke;
    /* font-weight: bolder; */
}

#metalFinish{
    background-image: url(./images/wood2.jpg);
}

#cleanOil{
    background-image: url(./images/wood1.jpg);
}

#sight{
    background-image: url(./images/wood3.jpg);
}

#muzzle{
    background-image: url(./images/wood4.jpg);
}

#stock{
    background-image: url(./images/wood5.jpg);
}

#generalAction{
    background-image: url(./images/wood6.jpg);
}

#handGun{
    background-image: url(./images/wood7.jpg);
}

#ar{
    background-image: url(./images/wood8.jpg);
}

#shotgun{
    background-image: url(./images/wood9.jpg);
}


.servicesContent{
    /* padding: 0 10px; */
    text-wrap: wrap;
    /* margin-left: 10px; */
    width: 400px;
    max-height: 0;
    overflow: hidden;
    /* width: 400px; */
    background-color: rgba(55,68,64,0.98);
    /* background-color: whitesmoke; */
    /* color: black; */
    color: whitesmoke;


}

.servicesContent ul{
    padding: 25px;
    font-size: larger;
    margin-left: 10px;
    /* border: 2px solid purple; */
}

.cerakote h2, .repair h2, .custom h2, .restore h2, .cleanOil h2{
    display: flex;
    /* border: 2px solid green; */
    padding: 20px;
    justify-content: center;
    background-color: black;
}


/* CSS for the contact page */
.contactInfo{
    display: flex;
    /* flex: 1; */
    flex-direction: column;
    border-left: 2px solid whitesmoke;
    /* border: 2px solid red; */
    /* width: 60%; */
    padding: 20px;
    /* width: 60%; */
     justify-content: center; 
    align-items: center; 
    flex-grow: 1;
}

.navLink, .emailLink{
    /* border: 2px solid blue; */
    color: whitesmoke;
    text-decoration: none;
    
}

.navLink a{
    color: whitesmoke;
    text-decoration: none;
}

.navLink:hover, .emailLink:hover, .navLink a:hover{
   color: rgba(112, 201, 201, 0.541);
}


.contactBox{
    border: 2px solid whitesmoke;
    display: flex;
    /* flex-direction: column; */
    /* gap: 5px; */
    justify-content: center;
    /* width: 67%; */
    align-self: center;
    background-color: rgba(55,68,64,0.98);
    border-radius: 20px;

    /* margin-top: 10%; */

}

.contact-header{
    margin-top: 12%;
    /* border: 2px solid blue; */
}

/* contact info half with that gets user input */
.fields{
    /* border: 2px solid red; */
    display: flex;
    /* flex-direction: row; */
    gap: 20px;
    /* margin: 20px; */
    justify-content: space-evenly;
    align-items: center;
    /* flex: auto; */
    /* padding: 50px; */
    padding-top: 25px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 5%;
    /* font-size: xx-large; */
}

#name, #eMail, #phoneNum{
    /* border: 2px solid pink; */
    /* height: 1.5rem; */
    padding: 12px;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0.0375em;
    line-height: 2;
    width: 300px;
}

#messageArea{
    /* border:2px solid lime; */
    resize: vertical;
    width: 90%;
    max-width: 90%;
    height: 400px;
    margin: 0 auto;
    padding: 5px;
    min-height: 5em;
    overflow: auto;
    font-size: larger;
    flex-shrink: 1;
    padding: 12px;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0.0375em;
    font-family: helvetica, arial;
    /* margin-top: 3%; */
}

.messageWithBtn{
    /* border: 2px solid slateblue; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* width: 110%; */
    gap: 10px;

}

.twoBtns{
    display: flex;
    gap: 18px;
}



.subBtn, .resetBtn{
    /* border: 2px solid orangered; */
    /* display: flex; */
    font-size: 12px;
    font-weight: 600;
    /* height: 3rem; */
    border-radius: 25px;
    padding: 10px;
    text-align: center;
    /* width: 150px; */
    width: auto;
    height: auto;
    text-transform: uppercase;
    color: black;
    background-color: white;
    outline-color: rgb(52, 199, 235);
    
}


.subBtn:hover{   
    cursor: pointer;
    background-color: rgb(52, 199, 235);
    color: white;
    outline-color: rgb(52, 199, 235);
    border: none;
}

.resetBtn:hover{   
    cursor: pointer;
    background-color: rgb(235 , 81, 96);
    color: white;
    /* outline-color: rgb(52, 199, 235); */
    border: none;
}


/* contact info that just shows the smith's info */
.other_contact{
    border-radius: 20px;
    background-color: rgba(55,68,64,0.98);
    display: flex;
    flex-direction: column;
    font-size: larger;
    padding: 20px;
    /* width: %; */
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
}

.other_contact h4{
    text-decoration: underline;
    text-underline-offset: 5px;
    color: rgb(52, 199, 235);;
    
    
}

.smith_specific{
    /* border: 5px solid blueviolet; */
    display: flex;
    text-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
    /* width: 400px; */
    gap: 10px;
}

.smith_specific h3{
    margin-bottom: 2px;
}

.smith-hours{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

 .smith_address{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.smith_specific_social{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100px;
    
}

.smith_socials a{
    /* border: 2px solid rebeccapurple; */
    padding: 5px;
    gap: 30px;
    margin: 15px;
    font-size: large;
}

.smith_socials a{
    /* border: 1px solid red; */
    color: whitesmoke;
    text-decoration: none;
}

.smith_socials a:hover{
    /* text-decoration: underline;
    text-underline-offset: 8px; */
    color: rgb(52, 199, 235);
    color: rgba(112, 201, 201, 0.541);
}


/* Gallery page */
.image-container{
    margin-top: 10%;
    border: 2px solid blue;
}

.photo-gallery{
    display: flex;
    gap: 20px;
    padding: 10px;
    justify-content: center;
    flex-wrap: wrap;
    /* margin-bottom: 5%; */
    border: 8px solid yellow;
    
}

.photo-col{
    display: flex;
    flex-direction: row;
    /* justify-content: center; */
    /* align-items: center; */
    /* gap: 200px; */
    border: 2px solid red;
}

.photo img{
    width: 500px;
    height: auto;
    border-radius: 5px;
    object-fit: cover;
    border: 2px solid lime;
    /* height: 40vh; */
    /* flex-grow: 1; */
    /* gap: 30px; */

    max-height: 100%;
    min-width: 100%;
    /* object-fit: cover; */
    /* vertical-align: bottom; */
}



/* photo gallery using lists */
.photo-ul{
    display: flex;
    flex-wrap: wrap;
    /* border: 2px solid yellow; */
    justify-content: center;
    /* align-items: center; */
    gap: 20px;
    padding: 40px;
    margin-top: 10%;
    list-style: none;
}

.photo-li{
    display: flex;
    height: auto;
    flex-grow: 1;
    /* border: 2px solid red; */
    object-fit: cover;
}

.photo-img{
    max-height: 100%;
    min-width: 100%;
    object-fit:contain; 
    background-color: black;
    width: 500px;
    height: auto;
    border-radius: 5px;
}

#topBtn{
    /* border: 2px solid whitesmoke;
    color: whitesmoke;
    background-color: black;
    padding: 10px;
    width: 150px;
    margin: auto;
    font-size: x-large; */

    /* display: none; */
    position: fixed;
    bottom: 5px;
    right: 10px;
    z-index: 99;
    font-size: 20px;
    font-weight: bolder;
    border: 2px solid whitesmoke;
    width: 30px;
    height: 30px;
    text-decoration: none;
    text-align: center;
    background-color: rgba(0,0,0, 0.8);;
    color: whitesmoke;
    cursor: pointer;
    padding: 2px;
    border-radius: 25px;
    
}

#topBtn:hover{
    background-color: rgb(52, 199, 235);
}

/* footer */
.footer{
    /* width: 800px; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 2px solid blue; */
    flex-wrap: wrap;
    /* padding: 20px; */
    gap: 20px;
    background-color: rgb(36, 37, 37);
    font-family: helvetica, arial;
    letter-spacing: 1px;
}

.site-links,.social-links{
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* text-decoration: none; */
    color: white;
    /* border: 2px solid red; */
    /* height: 100%; */
    flex-grow: 1;
    justify-content: space-evenly;
}

.site-col, .social-col{
    display: flex;
    flex-direction: column;
    text-decoration: none;
    font-family: helvetica, arial;
    letter-spacing: 1px;
    color: rgb(52, 199, 235);
    gap: 10px;
    /* justify-content: flex-start; */
}

.footer-info{
    display: flex;
    flex-direction: column;
}


.footer-hours{
    /* border: 2px solid khaki; */
    display: flex;
    flex-direction: column;
    width: 100%;
}

.footer-header {
    /* border: 2px solid red; */
    display: flex;
    flex: auto;
    height: 100%;
    flex-direction: column;
    width: 90%;
    justify-content: flex-start;
    align-items: center;
    /* gap: 5px; */
    padding: 3px;
    margin: auto;
    margin-top: 5px;
    margin-bottom: 10px;
}

.footer-header p{
    /* border: 2px solid white; */
    flex-direction: row;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    width: 100%;
    height: auto;
}

.footer-header h2{
    /* border: 2px solid yellow; */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
}

.footer-store{
    /* border: 2px solid blue; */
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: space-evenly;
}

.footer-contact p{
    /* border: 2px solid yellow; */
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.footer-contact a{
    /* border: 2px solid yellow; */
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.footer-info h2{
    color: rgb(52, 199, 235);
}

.footer h2, .footer-info h2{
    letter-spacing: 2px;
    font-size: small;
}

.footer a{
    text-decoration: none;
    color: whitesmoke;
    /* border: 2px solid yellow; */
    /* width: 40%; */
    /* text-underline-offset: 8px; */

}

.site-col a:hover, .social-col a:hover{
    color: rgb(237, 67, 103);
    color: rgba(112, 201, 201, 0.781);
    text-decoration: underline;
    text-underline-offset: 8px;
}

.backTop{
    border: 2px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
}



/* TABLET */
@media (min-width: 426px) and (max-width: 1100px)
{
        .mobile-header, .mobile-social, .mobile-body-about
        {
            display: none;
        }
    #header
    {
        display: none;
    }

    .banner{
        margin-top: 60px;
    }

    /* .body{
        margin: 0;
        margin-top: 50%;
    } */

    .tablet-body
    {
            /* border: 2px solid yellow; */
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            background-color: black;
            align-items: center;
            position: fixed;
            width: 100%;
            border-bottom: 2px solid whitesmoke;
    }

    .contact-header{
        /* border: 2px solid blue; */
        /* margin-top: 2%; */
    }

    .bizLogo{
        
        width: 80%;
        margin-left: 8%;
    }

  
   /* .banner{
    margin-top: 6%;
   } */

   .para-header{
    /* border: 2px solid blue; */
    font-size: larger;
   }

   

    .tablet-header
    {
        display: flex;
        width: auto;
        /* border: 2px solid blue; */
        /* position: fixed; */
        align-items: center;
        gap: 40px;
        padding: 20px;
    }

    .tablet-social
    {
        display: flex;
        /* border: 2px solid red; */
        align-items: center;
        gap: 40px;
        padding: 20px;
    }

    .tablet-header a{
        text-decoration: none;
        color: whitesmoke;
    }

    .tablet-header a:hover{
        color: rgba(112, 201, 201, 0.541);
    }

    .tablet-social a{
        text-decoration: none;
        color: whitesmoke;
    }

    .tablet-social a:hover{
        color: rgba(112, 201, 201, 0.541);
    }

    .banner-name h1{
        padding: 10px;
        /* border: 2px solid yellow; */
        font-size: xx-large;
    }
    .banner-name p{
        font-size: large;
        /* border: 2px solid purple; */
        padding: 10px;
    }
    .banner-name{
        padding: 10px;
        
        /* border: 2px solid blue; */
    }

    .craft-header{
        /* border:2px solid red; */
        /* padding: 20px; */
        width: auto;
        font-size: 25px;
    }
   
    .craft-middle{
        /* padding: 20px; */
        gap: 10px;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        /* margin-top: 20px; */
    }

    .craft-img{
        /* width: 80%; */
    }

    .craft-img img{
        width: 90%;
        height: auto;
        
        margin: auto;
        margin-top: 4%;
    }

    .craft-para {
        margin-top: 20px;
        /* width: 70%; */
        /* margin-left: 5%; */
        /* padding: 20px; */
        /* padding: 40px */
        justify-content: center;
        align-items: center;
    }

    .craft-para h2{
        /* font-size: x-large; */
        justify-content: center;
        align-items: center;
        /* margin-left: 50%;; */
    }

    .craft-para p{
        /* border: 2px solid red; */
        /* text-align: center; */
        /* width: 80%; */
        padding: 2%;
        /* font-size: larger; */
    }

    .review-container h1{
        font-size: x-large;
    }

    .reviews{
        padding-top: 30px;
    }

    .review-col{
        padding: 20px;
        /* border: 2px solid blue; */
        width: 80%;
    }

    blockquote{
        /* border: 2px solid blue; */
        font-size: large;
    }

    figcaption{
        /* border: 2px solid yellow; */
        font-size: large;
    }

    .footer{
        padding: 20px;
        /* border: 2px solid purple; */
    }

    .all-cols{
        /* gap: 10%; */
        display: flex;
        gap: 60px;
        /* gap: 90%; */
        justify-content: center;
        align-items: center;
        /* padding: 40px; */

    }
    .site-col{
        justify-content: space-evenly;
        /* align-items: end; */
        /* border: 2px solid blue; */
    }

    /* TABLET ABOUT PAGE */
    .about{
        margin-top: 3%;;
    }

    .about-logo{
        /* border: 2px solid blue; */
        padding: 10px;
        display: flex;
        /* width: 65%; */
        height: auto;
        justify-content: center;
        align-items: center;
        /* margin-top: 0; */
    }

    .about-hr{
        border: 1px solid;
        width: 60%;
    }

    .about-header{
        /* border: 2px solid yellow; */
        margin-top: 10px;
        font-size: xx-large;
    }

    .mission-statment{
        /* border: 2px solid red; */
        width: 80%;
        padding: 20px;

    }

    .mission-statment p{
        font-size: x-large;
        /* line-height: 30px; */
        /* justify-content: left; */
        /* text-align:justify; */
        width: 100%;
        letter-spacing: normal;
        text-align: initial;
    }

    .gunsmith img{
        /* border: 2px solid lime; */
        width: 80%;
        /* height: auto; */
    }

    .gunsmith-name{
        font-size: x-large;
        text-align: center;
        /* padding-top: 5px; */
        /* border: 2px solid yellow; */
    }

    .gunsmith h2{
        /* border: 2px solid red; */
        font-size: x-large;
    }

    .gunsmith-info p{
        font-size: x-large;
        /* line-height: 30px; */
        /* padding: 10px; */
        justify-content: center;
        text-align: justify;
        /* letter-spacing: normal; */
    }

    /* tablet GALLERY */
    .photo-gallery{
        /* border: 2px solid blue; */
        display: flex;
        flex-direction: column;
        width: 80%;
        margin: auto;
        justify-content: center;
        align-items: center;
    }

    .image-container{
        justify-content: center;
        align-items: center;
    }

    .photo img{
        /* width: 80%; */
        height: auto;
        margin: auto;
        justify-content: center;
        align-items: center;
    }


    .photo-ul{
        /* margin-top: 20%; */
    }

    .photo-img{
        width: 330px;
    }

    @media (max-width: 760px) 
    {
        .photo-img{
            width: 250px;
        }
    }

    /* tablet services page */

    .services-quote{
        /* margin-top: 350px; */
        /* padding: 600px; */
        justify-content: center;
        align-items: center;
        /* margin-top: 0; */
        /* border: 2px solid blue; */
    }
    .services-quote h1{
        /* padding: 15px; */
        font-size: large;
        /* border: 2px solid red; */
        margin-bottom: 50px;
        width: 85%;
        margin-top: 2%;
        margin-bottom: 2%;
    }

    .expandServBTN{
        /* border: 2px solid purple; */
        /* width: 400px; */
        width: 100%;
   
    }

    .services-card{
        /* border: 2px solid blue; */
        width: 90%;
        height: 20%;
        /* padding: 5%; */
    }

    .servicesContent{
        /* border: 2px solid blue; */
        width: 100%;
        /* padding: 70px; */
        height: 700px;
        /* margin-top: 4%; */
    }

    .servicesContent li{
        font-size: large;
    }
    /* tablet services page end */

    /* tablet contact page */
    .contact-header,.messageHeader{
        /* border: 2px solid yellow; */
        font-size: x-large;
        /* padding-top: 3%; */
        /* margin-top: 10%; */
        padding: 2%;
    }


    .contact-header{
        margin-top: 10%;
    }

    .contactBox{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 90%;
        /* margin-top: 10%; */
        /* border: 2px solid red; */
    }

    .other_contact{
        justify-content: center;
        align-items: center;
        text-wrap: wrap;
        gap: 18px;
        margin-top: 10px;
        padding-top: 10px;
        /* border: 2px solid red; */
        width: 83%;
        /* font-size: large; */
    }
    .smith_specific p{
        display: flex;
        width: auto;
        /* border: 2px solid blue; */
        font-size: large;
        text-wrap: wrap;
        text-align: center;
        
    }

    .contactInfo{
        /* border: 2px solid whitesmoke; */
        /* border-radius: 20px; */
        flex-shrink: 1;
        justify-content: center;
        align-items: center;
        text-wrap: wrap;
        /* gap: 25px; */
        margin-top: 10px;
        padding-top: 10px;
        /* border: 2px solid red; */
        width: 90%;
        flex: auto;
        font-size: medium;
        border-left: none;
        border-top: 2px solid whitesmoke;
    }

    #messageArea{
        height: 200px;
        width: 575px;
    }

    .contactInfo h1{
        font-size: x-large;
        /* border: 2px solid blue; */
        text-align: center;
    }

    .contactInput{
        display: flex;
        width: 80%;
        justify-content: center;
        align-items: center;
        /* border: 2px solid lime; */
      
    }

    .subBtn{
        margin: auto;
    }

    .contact-header{
        margin-top: 10%;
        font-size: xx-large;
    }

    .messageField{
        /* border: 2px solid lawngreen; */
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        /* width: 100%;
        height: 100%; */
        
    }

    .messageWithBtn{
        /* resize: both; */
        width: 100%;
        margin: auto;
        /* border: 2px solid red; */
    }

    .fields{
        flex-direction: column;
    }

    .subBtn{
        display: flex;
    }

    .footer{
        padding: 10px;
        /* padding-top: 10px; */
    }

    .all-cols{
        /* border: 2px solid red; */
        /* margin-bottom: 100px; */
        padding: 20px;
        width: auto;
    }

    .site-links{
        justify-content: flex-start;
        /* border: 2px solid blue; */
    }

    @media  screen and (max-width: 660px){
        #messageArea{
            width: 350px;
        }
    }
        
    

    @media screen and (max-width: 709px) 
    {
        .contact-header
        {
            margin-top: 28%;
        }

        .banner{
            margin-top: 125px;
        }
        .banner-name{
            padding: 10px;
            /* width: 90%; */
        }
        .about-logo{
            margin-top: 125px;
        }

        .mission-statment p{
            font-size: large;
            text-align: justify;
        }
        .gunsmith-info p{
            font-size: large;
        }

        .services-quote{
            margin-top: 120px;
        }

        .photo-ul{
            /* border: 2px solid blue; */
            margin-top: 20%;
        }

        .craft-para p{
            /* border: 2px solid yellow; */
            font-size: large;
        }
    } 
} 


/* MOBILE PHONE */
@media screen and (max-width: 425px)
{
    #header, .banner, .tablet-body{
        display: none;
    }

    body{
        /* border: 2px solid lime; */
        margin: 0;
        /* margin-top: 15%; */
    }

    .mobile-body{
        /* border: 2px solid blue; */
        background-color: black;
        position: fixed;
        top: 0;
        width: 100%;
        border-bottom: 2px solid whitesmoke;
    }

    .craft-img{
        margin-top: 15%;
    }

    .mobile-body-about{
        /* border:2px solid lime; */
        background-color: black;
        position: sticky;
        top: 0;
        /* width: 100%; */
        /* height: 40px; */
        z-index: 100;
        border-bottom: 2px solid whitesmoke;
    }

    .mobile-body-about a{
        text-decoration: none;
        color: whitesmoke;
        padding: 5px;
    }

    .mobile-header{
        display: flex;
        /* border: 2px solid red; */
        justify-content: space-evenly;
        align-items: center;
        /* width: 95%; */


        display: flex;
        justify-content: space-evenly;
        /* border: 2px solid pink; */
        /* padding: 5px; */
        padding-top: 5px;
        padding-bottom: 5px;
        color: whitesmoke;
        align-items: center;
        /* width: 100%; */
    }

    .mobile-header-about{
        display: flex;
        justify-content: space-evenly;
        /* border: 2px solid lime; */
        /* padding: 5px; */
        padding-top: 5px;
        padding-bottom: 5px;
        color: whitesmoke;
        align-items: center;
        /* width: 100%;
        position: sticky;
        top: 0px; */
    }

    .mobile-header-about a:hover{
        color: rgba(112, 201, 201, 0.541);
    }



    .mobile-header a{
        /* border: 2px solid whitesmoke; */
        text-decoration: none;
        color: whitesmoke;
        padding: 5px;
        /* width: 95%; */
        
    }

    .mobile-header a:hover{
        color: rgba(112, 201, 201, 0.541);
    }

    .mobile-social{
        display: flex;
        justify-content: space-evenly;
        /* border: 2px solid pink; */
        /* padding: 5px; */
        padding-top: 5px;
        padding-bottom: 5px;
        color: whitesmoke;
        align-items: center;
        /* width: 100%; */
    }

    .mobile-social a{
        /* border: 2px solid whitesmoke; */
        text-decoration: none;
        color: whitesmoke;
        padding: 5px;
    }

    .mobile-social a:hover{
        color: rgba(112, 201, 201, 0.541);
    }

    .banner-name h1{
        /* background-image: none; */
        /* border: 4px solid lime; */
        font-size: large;
        padding-top: 5px;
    }

    .banner{
        /* border: 2px solid blue; */
        /* margin-bottom: 50px; */
        padding: 10px;
    }

    .banner-name p{
        /* border: 2px solid red; */
        font-size: small;
        width: auto;
        padding: 5px;
        /* text-align: center; */
    }

    .craft-middle{
        /* border: 2px solid blue; */
        flex-direction: column-reverse;
        /* padding: 10px; */
        width: 100%;
        /* gap: 10px; */
        justify-content: center;
        align-items: center;

    }

    .craft-para{
        /* border: 3px solid aqua; */
        font-size: medium;
        /* width: 400px; */
        width: 90%;
        padding: none;
        /* flex-direction: column; */
        /* text-align: center; */
    }

    .craft-para p{
        /* margin-left: 10px; */
        /* text-align: center; */
        font-size: medium;
    }


    .craft-para h2{
        text-align: center;
        font-size: large;
        padding: 10px;
    }

    .mobile-craft{
        display: flex;
        flex-direction: column;
        /* border: 2px solid red; */
        /* width: 100%; */
        text-align: center;
        font-size: medium;
        gap: 10px;
    }

    .mobile-craft img{
        /* border: 2px solid lime; */
        /* height: auto; */
        margin: auto;
        max-width: 80%;
        max-height: 100%;
        margin-top: 40px;
    }

    .reviews h1{
        /* border: 2px solid blue; */
        font-size: large;
    }
    .review-col{
        width: 100%;
        font-size: small;
        /* border: 2px solid white; */
    }

    .reviews{
        margin-top: 5px;
    }

    .review-container{
        /* border: 2px solid yellow; */
        padding-top: 20px;
        padding-bottom: 20px;
        /* margin-top: 50px; */
    }

    figure.review-card{
        /* border: 2px solid lime; */
        border-radius: 0;
        width: 90%;
        height: auto;
        justify-content: center;
        align-items: center;
    }

    .review-card blockquote{
        font-size: medium;
        /* border: 2px solid red; */
        line-height: normal;
    }

    .review-card figcaption{
        /* display: flex; */
        /* border: 2px solid blue; */
        font-size: medium;
        text-align: center;
        width: auto;
        /* margin-left: 0; */
        line-height: normal;
        margin-right: 40px;
        
    }

    .footer{
        /* border: 2px solid red; */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    .footer p{
        /* border: 2px solid yellow; */
        width: 100%;
        font-size: medium;
    }

    .all-cols{
        /* border: 2px solid blue; */
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 80px;
        padding-top: 10px;
    }

      /* MOBILE ABOUT PAGE */
    .about{
        margin-top: 5%;
    }

      .about-logo{
        /* border: 2px solid blue; */
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 8%;
        /* margin-top: 4%; */
    }

    .about-hr{
        border: 1px solid;
        width: 60%;
    }

    .about-header{
        /* border: 2px solid yellow; */
        margin-top: 10px;
        font-size: large;
    }

    .mission-statment{
        /* border: 2px solid purple; */
        /* width: 100%; */
    }
    .mission-statment p{
        /* border: 2px solid red; */
        font-size: medium;
        justify-content: center;
        text-align: initial;
        width: 90%;
        letter-spacing: initial;
    }

    .gunsmith img{
        /* border: 2px solid lime; */
        width: 90%;
        height: auto;
    }

    .gunsmith-name{
        font-size: large;
        text-align: center;
        margin-top: 3%;
        /* padding-top: 5px; */
        /* border: 2px solid red; */
    }

    .gunsmith{
        width: 90%;
    }

    .gunsmith-info p{
        font-size: medium;
        /* padding: 5px; */
        width: 90%;
        letter-spacing: normal;
    }

    /* MOBILE GALLERY */
    .photo-gallery{
        /* border: 2px solid red; */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .photo img{
        width: 100%;
        /* border: 2px solid yellow; */
    }

    .photo-img{
        width: 200px;
    }

    .photo-ul{
        margin-top: 20%;
    }

    /* MOBILE SERVICES */
    .services-quote{
        /* border: 2px solid yellow; */
        /* margin-top: 0; */
    }

    .servicesContent{
        /* border: 2px solid purple; */
        width: 80%;
    }

    .servicesContent{
        width: 100%;
    }

    .services-card{
        /* border: 2px solid red; */
        width: 100%;
    }

/* MOBILE CONTACT */
.contact-header,.messageHeader{
    /* border: 2px solid rebeccapurple; */
    font-size: x-large;
    /* padding-top: 2%; */
    margin-top: 28%;
}

.services-quote h1{
    font-size: medium;
    width: 85%;
    margin-top: 80px;
}

.contactBox{
    flex-direction: column;
    /* border: 2px solid red; */
    width: 90%;
    /* border: none; */
}

.other_contact{
    justify-content: center;
    align-items: center;
    text-wrap: wrap;
    gap: 25px;
    margin-top: 10px;
    padding-top: 10px;
    padding: 10px;
    /* border: 2px solid yellow; */
    /* width: 83%; */
    font-size: medium;
    /* border-bottom: blue; */
}
.smith_specific p{
    display: flex;
    width: auto;
    /* border: 2px solid blue; */
    /* font-size: small; */
    text-wrap: wrap;
    text-align: center;
    
}

.contactInfo{
    margin-top: 10px;
    padding-top: 10px;
    font-size: large;
    border-left: none;
    border-top: 2px solid whitesmoke;
}

.contactInfo h1{
    font-size: large;
    text-align: center;
    
}

.contactInput{
    display: flex;
    width: 60%;
    /* width: %; */
    padding: 20px;
    justify-content: center;
    align-items: center;
    /* border: 2px solid blue; */
  
}

.messageField{
    /* border: 2px solid blue; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.fields{
    flex-direction: column;
    width: 65%;
    margin: auto;
    /* width: 90%; */
    /* border: 2px solid blue; */
    /* margin-left: 5%; */
    
}

#name{
    width: 230px;
}

#eMail{
    width: 230px;
}

#messageArea{
    width: 250px;
    height: 200px;
}

.messageWithBtn{
    /* border: 2px solid lime; */
    /* width: 65%; */
    /* height: 200px; */
    margin: auto;
} 
}
/* MOBILE END */