* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* overflow-x: hidden; */
}

/* this is header */
header {
    background-color: white;
    /* border: 2px solid red; */
    width: auto;
    /* height: 0px; */
    margin: 1px;
    padding: 45px;
}

body {
    background-color: #f2f2f2a1;

}

/* This is for Left Tag and we can say for logo */

.left {
    /* border: 2px solid black; */
    width: 50%;
    margin: -29px;
    padding: 13px;



}

.left img {
    width: 103px;
    height: 50px;
    margin-bottom: 10px;
    margin-top: 1px;

}

/* THIS IS FOR MID TAG and we can say nav bar  */


.navbar li a {

    display: inline-block;
    text-decoration: none;
    /* background-color: white; */
    color: black;
    margin: 10px;
    padding: 8px 0px;


}

.navbar li a:hover {
    cursor: pointer;
    /* background-color: rgba(128, 128, 128, 0.381); */
    color: rgba(173, 49, 49, 0.682);
    margin: 1px;
    padding: 5px;
}

.navbar {
    display: inline-block;
    list-style: none;
    /* text-decoration: none; */
    /* margin: 10px;
    padding: 100px; */


}

.navbar li {
    display: inline-block;
    font-size: 15px;
}

.mid {
    display: block;
    text-align: center;
    /* border: 2px solid red; */
    display: block;
    width: 900px;
    margin: -88px 236px;
    /* font-family: 'Balsamiq Sans', cursive; */
    font-family: 'Gabarito', cursive;

    /* width: 20px; */
    /* list-style: none; */
    /* text-decoration: none; */

}

/* THIS IS FOR RIGHT TAG and we can say search icon and for shopping bag icon */

.search {
    /* border: 2px solid green; */
    /* margin: 33px 0px; */
    padding: 5px 22px;
    width: 17px;
    float: right;
    margin-top: 38px;
    margin-right: 10px;
}

.material-symbols-outline {


    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.search span:hover {
    cursor: pointer;
    margin: 2px;
    padding: 1px;
    /* background-image: url('icons8-search.gif'); */
    width: 15px;
    height: 15px;
}

.cart {
    /* border: 2px solid green; */
    /* margin: 33px 0px; */
    padding: 5px 11px;
    width: 17px;
    float: right;
    margin-top: 38px;
    margin-right: 10px;
}

.cart span:hover {
    cursor: pointer;
    margin: 2px;
    padding: 1px;
}

.img img {
    width: 100%;
}

/* This is for Select Brand name  */

.brand h1 {
    text-align: center;
    font-size: 40px;

}

.brand_logo img {
    height: 130px;
    width: 130px;
    border: 2px solid black;
    border-radius: 50%;
    margin: 15px;
    padding: 0;
    display: inline-block;

}

.brand_logo {
    display: flex;
    /* flex-wrap: wrap; */

}

.scrolling-container {
    width: 100%;
    /* Adjust the width as needed */
    overflow-x: auto;
    /* Enable horizontal scrolling */
    white-space: nowrap;
    /* Prevent logos from wrapping to the next line */
    /* scrollbar-width: none; */
    /* Hide the scrollbar in Firefox */
    -ms-overflow-style: none;
    /* Hide the scrollbar in Internet Explorer and Edge */
}

.scrolling-container::-webkit-scrollbar {
    display: none;
    /* Hide the scrollbar in WebKit-based browsers (Chrome, Safari, etc.) */
}

.logo {
    text-align: center;
    margin: 0;
}

.brand_name {
    font-size: 20px;
    /* Set the font size for the brand names */
    /* margin-top: 10px; */
    text-align: center;


}

.brand {
    border: 4px solid rgba(240, 240, 236, 0.278);
}

/* This is for Select your design  */

.design h1 {
    text-align: center;
    font-size: 40px;
}

.original_design img {

    width: 378px;
    /*  Set the desired width */
    height: auto;
    /* Maintain aspect ratio */
    /* flex-wrap: wrap; */
}

.original_design {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.design_name {
    text-align: center;
    font-size: 20px;
    /* position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color:black; */

}

.phone_design img:hover {
    background-color: black;
    /* border-radius: 2px solid black; */
    cursor: pointer;
    /* color: rgb(209, 22, 22); */
    /* margin: 1px; */
    padding: 3px;
    /* opacity: 0.5; */

}

.price {
    font-size: 20px;
    font-weight: 300;
}

/* This is for Best selling mobile skins */

#mobile_heading {
    text-align: center;
    font-size: 40px;
}

.best_skins img {

    width: 378px;
    /*  Set the desired width */
    height: auto;
    /* Maintain aspect ratio */
    /* flex-wrap: wrap; */
}

.best_skins {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.skins_name {
    text-align: center;
    font-size: 20px;
}

.mobile_skins img:hover {
    background-color: black;
    /* border-radius: 2px solid black; */
    cursor: pointer;
    /* color: rgb(209, 22, 22); */
    /* margin: 1px; */
    padding: 3px;
    /* opacity: 0.5; */

}

/*  This is for Best Selling Laptop Skins */

#laptop_heading {
    text-align: center;
    font-size: 40px;
}

.best_laptop_skins img {

    width: 378px;
    /*  Set the desired width */
    height: auto;
    /* Maintain aspect ratio */
    /* flex-wrap: wrap; */
}

.best_laptop_skins {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.laptop_skins_name {
    text-align: center;
    font-size: 20px;
}

.laptop_skins img:hover {
    background-color: black;
    /* border-radius: 2px solid black; */
    cursor: pointer;
    /* color: rgb(209, 22, 22); */
    /* margin: 1px; */
    padding: 3px;
    /* opacity: 0.5; */

}

/* This is for social media */

#instagram_heading {
    text-align: center;
    font-size: 40px;
}

.social_instagram img {

    width: 473px;
    /*  Set the desired width */
    height: auto;
    /* Maintain aspect ratio */
    /* flex-wrap: wrap; */
}

.social_instagram {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* .laptop_skins_name {
    text-align: center;
    font-size: 20px;
} */

.instagram img:hover {
    background-color: black;
    /* border-radius: 2px solid black; */
    cursor: pointer;
    /* color: rgb(209, 22, 22); */
    /* margin: 1px; */
    padding: 3px;
    /* opacity: 0.5; */

}

.order_skin {
    /* text-align: center; */
    display: flex;
    border: 2px solid black;
}

.orders {
    border: 2px solid red;
    width: 0px;
    height: 127px;
    margin: 26px;
    padding: 65px;
    margin-left: 245px;
    margin-right: 132px;
}

.order_skin h2 {
    text-align: center;
    margin-left: 160px;
}

#delivery {
    margin-left: 172px;
}

/*p{
    text-align: center;
    display: block;
    text-indent: 12em;
   width: 300px; 
    white-space: rap;
}  */
/* .order_skin p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
} */
.monday {
    width: 331px;

    text-align: center;
    display: flex;
    border: 2px solid rgb(0, 36, 128);
}

.metro {

    border: 2px solid purple;
}

.easy {
    border: 2px solid purple;
}

/*  This is for footer  */

footer {
    background-color: gray;
    border: 2px solid red;
    width: auto;
    height: 446px;
    margin: 0px;
    padding: 0px;
}

.order {
    border: 2px solid blue;
}