@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body{
    background-color: black;
}

#topImgBanner{
    width: 100%;
    height: 80vh;
}

#topImgBanner img{
    width: 100%;
    height: 100%;
    filter: brightness(0.8);
}

#headerLinks{
    color: #fff;
    background-color: #212121;
    box-sizing: border-box;
    padding: 20px;
}

#headerLinks h2{
    text-align: left;
    padding-left: 15px;
    font-family: 'Open-sans', sans-serif;
}

.smallimage{
    display: none;
}

#divheader{
    background-color: #212121;
    height: 60px;
    box-sizing: border-box;
    padding: 15px;
}

.collection{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: auto;
    overflow: hidden;
}
h2{
    color: white;
    text-align: center;
}

.collection > div > div:hover{
    /* overflow: hidden; */
    transform: scale(1.1);
    transition: all ease 2s;
}
.glove{
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),url(https://www.royalenfield.com/content/dam/royal-enfield/india/apparel/collections/gloves.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    /* height: 460px; */
    color: black; 
}
.all{
    color: #F0F0F0;
    padding: 20px 25px;
    box-sizing: border-box;
    margin: 170px 0;
    text-align: center;
}

.all >h2{
    margin-bottom: 20px;
}
.all > a{
    color: white;
    border: 1px white solid;
    padding: 10px 35px 10px 15px;
    height: 14px;
    text-decoration: none;
    font-weight: bold;
}
.all > a:hover{
    background-color: white;
    color: black;
}
.all2{
    color: #F0F0F0;
    padding: 20px 25px;
    box-sizing: border-box;
    margin: 230px 0;
    text-align: center;
}
.all2 >h2{
    margin-bottom: 20px;
}
.all2 > a{
    color: white;
    border: 1px white solid;
    padding: 10px 35px 10px 15px;
    height: 14px;
    text-decoration: none;
    font-weight: bold;
}

.all2 > a:hover{
    background-color: white;
    color: black;
}

.helmet{
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(https://www.royalenfield.com/content/dam/royal-enfield/india/apparel/collections/helmet.jpg);
}
.boot{
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(https://www.royalenfield.com/content/dam/royal-enfield/india/apparel/collections/boots.jpg);
}
.jacket{
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(https://www.royalenfield.com/content/dam/royal-enfield/india/apparel/collections/protective-jackets.JPG);
    height: 470px;
}
.mlg{
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(https://www.royalenfield.com/content/dam/royal-enfield/india/apparel/collections/mlag.jpg);
}
.tshirt{
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(https://www.royalenfield.com/content/dam/royal-enfield/india/apparel/collections/t-shirts.JPG);
}
.shirt{
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(https://www.royalenfield.com/content/dam/royal-enfield/india/apparel/collections/shirts.jpg);
    height: 640px;
}
.mask{
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(https://www.royalenfield.com/content/dam/royal-enfield/india/apparel/collections/royal-enfield-apparel-mask.png);
}

.bag{
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(https://www.royalenfield.com/content/dam/royal-enfield/india/apparel/collections/bags.jpg);
}



@media all and (max-width: 400px){
    #footerIconsDiv{
        display: none;
    }

    .smallimage{
        display: block;
    }

    .bigimage{
        display: none;
    }

    .collection{
        grid-template-columns: 1fr;
    }
}


@media all and (min-width: 401px) and (max-width: 700px){
    #footerIconsDiv{
        display: none;
    }

    .smallimage{
        display: block;
    }

    .bigimage{
        display: none;
    }

    .collection{
        grid-template-columns: repeat(2, 1fr);
    }
}