body{
    margin: 0 auto;
    background-color: gainsboro;
}
.container{
    width: 1000px;
    background-color: rosybrown;
    height: auto;
    margin: auto;
    /* margin auto will make centre of all */ 
}
.logo{
    float: left;
    padding: 15px;
}
.search{
    padding: 15px;
    float: right;
    padding: 15px;
    /* flot it to the right side */
}
.clearfix{
    clear: both;
} /* here the cf will clear all other contents moving up to the upper level */

.main-menu{
    background-color: wheat;
}
.main-menu > ul{
    margin: 0px;
    padding: 0px;
    list-style-type:none;
}
.main-menu > ul >li{
    display: inline-block;
}
.main-menu > ul >li >a{
    color: black;
    text-decoration: none;
    display: block;
    padding: 15px;
    font-family: sans-serif;
    font-size: small;
}
.main-menu > ul >li >a:hover{
    background-color: white;
}
/* here list style none is so it will not show the bullet point bcz of padding 0 it will come out so none, inline block it will show straight line */

/* here the service all items will go inside the service heading */

.dropdown{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    position: absolute;
    display: none;
    z-index: 999; 
    /* even cycle will not effect for the dropdown by z index */
}
.dropdown >li >a{
    color: white;
    text-decoration: none;
    display: block;
    padding: 15px;
    font-family: sans-serif;
    font-size: small;
    background-color: gray;
}
.dropdown >li >a:hover{
    background-color: rosybrown;
}
.main-menu > ul >li:hover .dropdown{
    display: block;
}
/* here .main-menu > ul >li:hover .dropdown" that . should have space to get result
    display none will not show any field, display block is for to show the dropdown.  */
.banner{
    width: 1000px;
    height: 416.66px;
    /* here when height is updated as per its original height by seeing it in inspect after that it will overflow other words to all over the
    image so add overflow hidden to hide that and later u can do slide */
    overflow: hidden;

}
.banner img{
    width: 100%;
}
/* content-holder */
.content-holder{
    background-color: rosybrown;
}
.content{
    width: 700px;
    height: auto;
    padding: 25px;
    background-color: wheat;
    float: left;
}
.content h1{
    font-size: 1.5rem;
    font-family: sans-serif;
}
.content p{
    font-family: sans-serif;
    font-size: small;
}
.sidebar{
    float: left;
    padding: 25px;
}
.sidebar{
    font-family: sans-serif;
    color: white;
}
.sidebar ul{
    margin: 0px;
    padding: 0px;
    list-style-type:none;
}
.sidebar ul > li> a{
    display: block;
    margin-bottom: 5px;
    color: white;
    font-family: serif;
    font-style: italic;
    text-decoration: none;
}
/* footer */
.main-footer{
    background-color:teal;
    color: white;
    width: 950px;
    height: auto;
    padding: 25px;
}
.footer-box{
    width: 237.5px;
    height: auto;
    float: left;
    font-family: sans-serif;
}
.footer-box > ul{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
.footer-box > ul >li>a{
    color: white;
    display: block;
    font-size: small;
    margin-bottom: 5px;
    text-decoration: none;
}
address p{
    font-size: small;
    font-family: sans-serif;
}
.footer-box address a{
    color: teal;
    font-size: small;
}
.copy{
    font-family: sans-serif;
    padding: 25px;
    text-align: center;
    background-color: wheat;
    color: black;
}
.copy > p{
    margin: 0px;
}
/* page about */
.content img{
    max-width: 100%;
}
/* product */
/* here divide main 700/3 menu width to 3 bcz we need 3 colom in the page. so as we added border and margin,pdng you have to consider that as well */
.product{
    width: 211.33px;
    float: left;
    height: auto;
    border: 1px solid rosybrown;
    margin: 5px;
    padding: 5px;
}
.product-caption p{
    font-weight: bold;
}
.product-caption p del{
    color: red;
}
.product-caption p ins{
    color: green;
}
.product-caption a{
    display: block;
    background-color: rosybrown;
    padding: 8px;
    text-align: center;
    font-family: sans-serif;
    text-decoration: none;
    color: white;
    font-size: small;
}
.product-caption a:hover{
    background-color: red;
}
/* contact me */
.banner iframe{
    width: 100%;
    height: 500px;
}