/*External Fonts*/
@font-face{
    src: url("../fonts/coco/Coco-Regular.otf");
    font-family: "coco";
}
@font-face{
    src: url("../fonts/quicksand/Quicksand_Book.otf");
    font-family: "Quicksand_Book";
}
@font-face{
    src: url("../fonts/quicksand/Quicksand_Dash.otf");
    font-family: "Quicksand_Dash";
}
@font-face{
    src: url("../fonts/quicksand/Quicksand_Bold.otf");
    font-family: "Quicksand_Bold";
}
@font-face{     
    src: url("../fonts/myriadpro/MYRIADPRO-REGULAR.otf");
    font-family: "MYRIADPRO-REGULAR";
}

/*css variable*/
:root{
    --primary: #000000;
    --dark: #221E1D;
    --light: #FFFFFF;
    --light-ash: #B6B4B4;
    --light-green: #78958E;
}
/*basic css*/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html{
    font-size: 62.5%;
    scroll-behavior: smooth;
}
body{
    font-family: "Quicksand_Book";
    font-size: 1.6rem;
    text-rendering: optimizeLegibility;
    background-color: var(--light);
    color: var(--primary);
}
.container{
    max-width: 110rem;
    margin: 0 auto;
}
/*reusable component*/
/*Heading*/
h2{
   font-size: 2.4rem;
}
h3{
    font-size: 2rem;
    padding: 2rem 0;
}
/*Nav Section*/
.nav-section{
    overflow: hidden;
}
.nav-section a.logo{
    width: auto;
    float: left;
    font-family: "coco";
    font-size: 3.6rem;
    color: var(--primary);
    margin-top: 2rem; 
    text-decoration: none;
    text-transform: lowercase;
}
ul.main-nav{
    float: right;
    margin-top: 2.5rem
}
 ul.main-nav li{
    display: inline-block;

}
ul.main-nav li a{
    text-decoration: none;
    font-size: 1.2rem;
    color: var(--primary);
    margin: 1rem;
    padding: .5rem 0;
    text-transform: lowercase;
}
ul.main-nav li a:hover{
    cursor: pointer;
    color: var(--light-ash);
}
ul.main-nav li:first-child a{
    margin-left: 0;
}
ul.main-nav li:last-child a{
    margin-right: 0;
}

/*Header Section*/
.head-section{
    margin-top: 3rem;
}
.slider{
    width: 100%;
    height: 42rem;
    animation-name: animate;
    animation-duration: 16s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    background-size: cover;
}
@keyframes animate{
    0%{
        background-image: url(../images/slider4.jpg);
    }
    25%{
        background-image: url(../images/slider5.jpg);
    }
    50%{
        background-image: url(../images/slider6.jpg);
    }
    75%{
        background-image: url(../images/slider7.jpg);
    }
    100%{
        background-image: url(../images/slider8.jpg);
    }
}
.details{
    width: 46rem;
    position: absolute;
    top: 45%;
    color: var(--light);
    margin-left: 3rem;
}
.details h1{
    font-size: 4.3rem;
}
.details p{
    font-size: 1.4rem;
}
.slider .btn{
    float: right;
    margin-top: 38rem;
    margin-right: 2rem;
}
.btn a{
    text-decoration: none;
    color: var(--light);
    font-size: 1.6rem;
    padding: .3rem 1rem;
    background-color: var(--primary);
}

/*feature section*/
.feature-section{
   overflow: hidden;
}
.features{
    margin-top: 3rem;
}
.box{
    padding: .8rem;
    text-align: center;
}
.box p{
    font-size: 1.2rem;
    line-height: 20px;
}

/*blog section*/
.blog-section{
    overflow: hidden;
}
.blog-section .blog-title h2{
    text-align: center;
    padding: 3rem;
}

.blog-des .box img{
    height: 14.4rem;
    width: 100%;
}
.blog-des span{
    font-size: 1.3rem;
    color: var(--light-ash);
    padding-bottom: 2rem;
}
.blog-des p{
    margin-top: 2rem;
    margin-bottom: 5rem;
}
.blog-des .box a.read{
    text-decoration: none;
    color: var(--light-green);
    font-size: 1.2rem;
}

/*footer section*/
.footer{
    border-top: 2px solid var(--dark);
    padding: 4rem 0 10rem;
}
.link{
    float: left;
    line-height: 2rem;
}
.link ul.nav{
    float: left;
}
.link ul.nav li{
    display: inline-block;
}
.link ul.nav li a{
    text-decoration: none;
    font-size: 1.2rem;
    color: var(--primary);
    margin: 1rem;
}
.link ul.nav li:first-child a{
    margin-left: 0;
}
.link .social-link{
    margin-bottom: 3rem;
}
.social-link a{
    color: var(--primary);
    padding: .3rem;
}
.social-link a:first-child{
    padding-left: 0;
}
.social-link a:hover{
    color: var(--light-green);
    cursor: pointer;
}
.footer .copyright{
    float: right;
}
.copyright{
    line-height: 2rem;
    font-size: 1.2;
}
.copyright p:first-child span{
    font-family: "Quicksand_Bold";
}

.copyright p:last-child{
    color: var(--light-ash);
}
.copyright p:last-child span{
    color: var(--light-green);
}
.