style.css

/*############# Default style ############*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'sparton',sans-serif;
}

body{
    width: 100%;
    
}

h1{
font-size: 50px;
line-height: 64px;
color: #222;

}

h2{
    font-size: 46px;
    line-height: 54px;
    color: #222;
}

h4{
    font-size: 20px;
    color: #222;
}

h6{
    font-weight: 700;
    font-size: 12px;
}

p{ 
    font-size: 16px;
    color: #465b52;
    margin: 15px 0 20px 0;

}

.section-p1{
    padding: 40px 80px;
}

.section-m1{
    margin:40px 80px;
}

button.normal{
    font-size: 14px;
    font-weight: 600;
    padding: 15px 30px;
    color: #000;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    outline: none;
    transition: 0.25;
    
}

button.white{
    font-size: 13px;
    font-weight: 600;
    padding: 15px 30px;
    color: #fff;
    background: transparent;
    cursor: pointer;
    border: 1px solid #fff;
    outline: none;
    transition: 0.25;
    
}

/*########## navbar ########*/

#header{
    display:flex;
    justify-content: space-between;
    padding:20px 80px;
    background: #E3E6F3;
    box-shadow: 0 5px 15px rgba(0,0,0,0.6);
    z-index: 999;
    position: sticky;
    left:0;
    top: 0;
}

#navbar{

    display:flex;
    align-items: center;
    justify-content: center;
}

#navbar li{

    padding: 0 20px;
    list-style-type: none;
    position: relative;
}

#navbar li a {

    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    transition:0.36 ease ;
}

#navbar li a:hover,#navbar li a.active{
    color: #088178;

}

#navbar li a.active::after,#navbar li a:hover::after{
    content: "";
    width:30%;
    height:2px;
    background: #088178;
    position: absolute;
    bottom: -4px;
    left: 20px;
}

/*############### Hero div ##################*/

#hero{
    background-image: url(image1@2x.png);
    height: 90vh;
    width: 100%;
    background-size: cover;
    background-position: top 25% right 0;
    background-repeat: no-repeat;
    padding:0 80px;
    display: flex;
    align-items:flex-start ;
    justify-content: center ;
    flex-direction: column;
}

#hero h4{
    padding-bottom: 15px;
}

#hero h1{

    color: #088178;
}

#hero button{
    background-image: url(image-background-card3.jpg);
    background-color: transparent;
    color: #088178;
    border: 0;
    padding: 14px 80 14px 65px;
    background-repeat: no-repeat ;
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
}

/*############# Feature style #################*/
.fe-box img{
    height: 100%;
    width: 100%;
    margin-bottom: 10px;
}

#feature .fe-box{
width: 180px;
text-align: center;
padding: 25px 15px;
box-shadow: 20px 20px 34px rgba(0,0,0,0.03);
border: 1px solid #cce7d0;
border-radius: 4px;
margin: 15px 0;
}

#feature .fe-box:hover{
    box-shadow: 10px 10px  54px rgba(74,62,221,0.1);

}

#feature .fe-box h6{
    display: inline-block;
    padding: 9px 8px 6px 8px;
    line-height: 1;
    border-radius: 4px;
    color: #088178;
    background-color: #fddde4;
}

#feature{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
button.normal{
    font-size: 14px;
    font-weight: 600;
    padding: 15px 30px;
    color: #000;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    outline: none;
    transition: 0.25;
    
}
#feature .fe-box:nth-child(2) h6{
    background-color: antiquewhite;
}
#feature .fe-box:nth-child(3) h6{
    background-color: cadetblue;
}
#feature .fe-box:nth-child(4) h6{
    background-color: fuchsia;
}
#feature .fe-box:nth-child(5) h6{
    background-color: chartreuse;
}

/*############### Featured products #################*/
#product1{
    text-align: center;
        font-size: 14px;
        font-weight: 600;
        padding: 15px 30px;
        color: #000;
        background: #fff;
        border-radius: 4px;
        cursor: pointer;
        border: none;
        outline: none;
        transition: 0.25;
        
}

#product1 .pro{
    width: 23%;
    min-width: 250px;
    padding: 10px 12px;
    border: 1px solid;
    border-radius: 25px;
    cursor: pointer;
    box-shadow: 20px 20px 30px rgba(0,0,0,0.02);
    margin: 15px 0;
        font-size: 14px;
        font-weight: 600;
        padding: 15px 30px;
        color: #000;
        background: #fff;
        border-radius: 4px;
        cursor: pointer;
        border: none;
        outline: none;
        transition: 0.25;
      
        

}

#product1 .pro img{
    width: 100%;
    border-radius: 20px;
}

#product1 .pro:hover{
    box-shadow: 20px 20px 30px rgba(0,0,0,0.6);
}

#product1 .pro .description{
    text-align: start;
        font-size: 14px;
        font-weight: 600;
        padding: 15px 30px;
        color: #000;
        background: #fff;
        border-radius: 4px;
        cursor: pointer;
        border: none;
        outline: none;
        transition: 0.25;
        
        
    
}

#product1 .pro .description h5{
    padding-top: 7px;
    color: #1a1a1a;
    font-size: 14px;
}

#product1 .pro .description i{
    font-size: 12px;
    color: rgb(243,181,25);
}

#product1 .pro .description h4{
    padding-top: 7px;
    font-size: 15px;
    font-weight: 700;
    color: #088178;
}
#product1 .pro-container{
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    flex-wrap: wrap;

}

/*########## call to action banner ############*/
#banner{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image: url(background-adare-restaurant.jpg);
    width: 100%;
    height: 40vh;
    background-size: cover;
    background-position: center;
}
#banner h4{
    color: #fff;
    font-size: 16px;

}
#banner h2{
    color: #fff;
    font-size: 30px;
    padding: 10px 0 ;
}
#banner h2 span{
    color: red;
}

#banner button:hover{
    background-color: #088178;
    color: #fff;
}

/*########## small banner ###########*/
#sm-banner .banner-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image: url(background-adare-restaurant.jpg);
    min-width: 508px;
    height: 50vh;
    background-size: cover;
    background-position: center;
}

#sm-banner{
    display: flex;
    justify-content: space-between;
    flex-wrap: wra;
}

#sm-banner h4{
    color: #fff;
    font-size: 20px;
    font-weight: 300;

}

#sm-banner h2{
    color: #fff;
    font-size: 28px;
    font-weight: 500;
}

#sm-banner span{
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding-bottom: 50px;
}

#sm-banner .banner-box:hover button{
    background: #088178;
    border: 1px solid #088178;
}

#sm-banner .banner-box2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image: url(image-background-card1.jpg);
    min-width: 508px;
    height: 50vh;
    background-size: cover;
    background-position: center;
}

/*############## Banner 3 ###########*/
#banner3 .banner-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background-image:url(image-background-card3.jpg);
    min-width: 30%;
    height: 30vh;
    background-size: cover;
    background-position: center;
    padding: 20px;
    margin-bottom: 20px;
}

#banner3 h2{
    color: #fff;
    font-weight: 900;
    font-size: 22px;
}

#banner3 h3{
    color:#ec544e;
    font-weight: 800 #ec544e;
    font-size: 15px;
}

#banner3{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 80px;
}

#banner3 .banner-box3{
    background-image: url(image-background-card2.jpg);
}

#banner3 .banner-box4{
    background-image: url(image-bike-repair-service.jpg);
}
/*############ Newletter  ###############*/
#newletter{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    background-image: url(background-adare-restaurant.jpg);
    background-repeat: no-repeat;
    background-position: 20% 30%;
    background-color: #041042;
}

#newletter h4{
    font-size: 22px;
    font-weight: 700;
    color: #fff;

}

#newletter p{
    font-size: 14px;
    font-weight: 600;
    color: #818ea0;
}

#newletter p span{
    color: #ffbd27;
}

#newletter input{
    height: 4.135rem;
    padding: 0 1.25em;
    font-size: 14px;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 4px;
    outline: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    
}
#newletter .form{
    display: flex;
    width: 40%;
}

#newletter button{ 
    background-color: #088178;
    color: #fff;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

}

/*########## footer #########*/
footer{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

footer .col{
    display:flex;
    flex-direction: column;
    margin-bottom: 20px;
    align-items: flex-start;
}

footer h4{
    font-size: 14px;
    padding-bottom: 20px;
}

footer p{
    font-size: 13px;
    margin: 0 0 8px 0;
}

footer a{
    font-size: 13px;
    text-decoration: none;
    color: #222;
    margin-bottom: 10px;

}