bms.css

*{
    margin: 0px;
    font-family: sans-serif;
}

header{
    display: flex;
    justify-content: space-between;
    padding: 0px 60px;  /*to give the distance from it*/
    align-items: center;
    height: 60px;
    background-color: gainsboro;
}
.search>input{
    height: 30px;
    width: 750px;
    border-radius: 5px;
    padding: 0px 30px;
    border: 1px solid gray;
}
.search>img{
    position: relative;
    top: 5px;
    left: 30px;
    height: 20px;
}

.account select{
    border: none;
    background-color: inherit;
    width: 120px;
    margin-right: 20px;
}
.account>button{
    background-color: crimson;
    color: white;
    border-radius: 5px;
    border: none;
    font-size: 15px;
    padding: 5px 10px;
}



/* Navigation Bar  */
nav{
    display: flex;
    justify-content: space-between;
    padding: 0px 40px;

    height: 40px;
    background-color: #F5F5F5;  
    /*background color for our understanding */

    align-items: center;
}
nav a{
    /* descendent cominator  */
    color: black;
    text-decoration: none;
    padding: 0px 20px;
}

/* 1 rem = 14 px  */
/*One more logic can be ....
for nav1 & nav2 ...use display flex separately...and give widht separately...and the justify-content: spac-between*/




marquee img{
    height: 300px;
    border-radius: 10px;
    margin: 8px;
}

.section1{
    display: flex;
    justify-content: space-between;
    padding: 0px 40px;
    font-family: sans-serif;
}

.section1 a{
    text-decoration: none;
    color: red;
}


.section2 {
    display: flex;
    justify-content: space-evenly;

    margin-top: 15px;
}

.section2 img{
    width: 260px;
    border-radius: 10px;


    position: relative;
    top: 60px;
    transition: .8s;




    /* z-index: +1;   To use Z-index, We need to use position:relative, then only we can use it.....since, z-index move it front or back, how it will know from which referece it should move...so for that case, we need to first tell position relative
    +1,+2 -- front
    -1,-3 -- back
    0 -- by default */
}

article img:hover{
    top: 0px;
}

article span{
    color: gray;
}
.card1{
    width: 260px;
}


.section3 {
    /* margin: 50px 0px; */
    margin-top: 110px;
    margin-bottom: 50px;
    text-align: center;
    display: flex;
    justify-content: center;
    /* padding: 0px 40px; */
}
.section3 img{
    width: 1430px;

}














.section4{
    display: flex;
    justify-content: space-between;
    padding: 0px 40px;
    font-family: sans-serif;
}




.section5 {
    display: flex;
    justify-content: space-evenly;

    margin-top: 15px;
}

.section5 img{
    width: 260px;
    border-radius: 10px;
    margin-top: 20px;

    position: relative;
    top: 10px;
    transition: 0.8s;

}

.card1{
    width: 260px;
}

.section4 h2{
    margin-top: 10px;
}






.section6{
    background-color: #2B3149;
    width: 100%;
    height: 700px;
    margin-top: 50px;
}

.section6 .imgsection6{
 margin-left: 40px;
 height: 100px;
 margin-top: 20px;

    
}

.section7{
    color: white;
    margin-left: 40px;
    margin-top: 20px;

  
}

.section8{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 40px;

    margin-top: 20px;



}
.section8 .card2 img:hover{

    top: 0px;
}


.section8 .card2{
    color: white;
}

.section8 .card2 img{
    height: 350px;
    /* width: 200px; */

    
    position: relative;
    top: 10px;
    transition: .8s;

}



.card2 h2{
    font-size: 18px;
    margin-top: 15px;
    margin-bottom: 10px;
}






.section10 h2{
    margin-top: 40px;
    padding: 0 40px;
}

.section10 .card1 img{
    position: relative;
    top: 0px;
}











.section11 {
    display: flex;
    justify-content: space-evenly;

    margin-top: 15px;
}

.section11 img{
    width: 260px;
    border-radius: 10px;

    margin-top: 20px;
    margin-bottom: 10px;
}



.section11 .card4 span{
    color: gray;
}
.card4{
    width: 260px;
}


.card4 h4{
    margin-top: 10px;
}
.card4 span{
    margin-top: 10px;
    /* border: 2px solid black; */
    /* padding: 20px; */
    /* margin: 20px; */
}



.section14{
    padding: 0px 40px;
}


.section14 h2{
    /* padding: 0px 40px; */
    margin-top: 60px;
    margin-bottom: 20px;
}


.box1{
    /* padding: 30px; */
    background-color: #F5F5F5;
    width: 240px;
    height: 70px;
    margin-top: 10px;
    text-align: center;

    margin-top: 20px;
    padding-top: 30px;


}

.red{
    color: red;
    padding-bottom: 5px;
}

.fullbox{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    
}



.section15{
    width: 100%;
    height: 1400px;
    background-color: rgb(49,48,53);
    margin-top: 70px;

    /* margin-top: 40px; */
    padding-top: 40px;

    
}


.section16 {
    display: flex;
    justify-content: space-between;
    padding: 0px 80px;

    color: white;

   
}





.inner{
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 900px;

    /* padding: 0px 20px; */
}

.section16 button{
    background-color: #EC5E71;
    color: white;
    padding: 10px 20px  ;

}
.section17 {
    color: #A5A5A5;
    display: flex;
    justify-content: space-between;
    padding: 0 80px;

    margin-top: 50px;


}


.section17 .logo1{
    width: 60px;
    /* color: white; */
    /* background-color: white; */
}

.banner_logo1,.banner_logo2,.banner_logo3{
    text-align: center;
}


.links{
    color: #A5A5A5;
    padding: 0px 80px;
}
.links h4{
    margin-bottom: 9px;
}


footer{
    padding-top: 48px;
    text-align: center;
    /* border: 2px solid black; */
}

.social svg {
    width: 35px;
    margin-top: 20px;
    color: #A5A5A5;
    /* background-color: red;
    why not becoming the same color what it have */
}

.social svg:hover{
    background-color: white;
    color: white;
}

.copyright{
    margin-top: 40px;
    font-size: 14px;
}