/* ========== CSS Code for nav, hero and footer of each page ========== */

/* Global default css start */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
a{
    text-decoration: none;
}
img{
    vertical-align: middle;
}
section{
    padding: var(--ls-section);
}
.section_header h3{
    font-family: var(--ff-secondary);
    font-size: var(--fs-h3);
    letter-spacing: var(--ls-letter);
    line-height: var(--ln-h3);
    color: var(--clr-dark);
    font-weight: var(--fw-secondary);
    margin-bottom: var(--ls-item-gap);
}
/* Global default css end */

/* body start */
body{
    text-transform: var(--tt-transform) !important;
    background-color: var(--clr-light) !important;
}
/* body end */

/* nav start */
nav{
    position: fixed !important;
    width: 100%;
    height: 100px;
    top: 0;
    background-color: var(--clr-light);
    z-index: 999;
}
.navbar-collapse{
    background-color: var(--clr-light);
}
#navbar .navbar-brand, #navbarNav ul{
    line-height: 100px;
}
#navbar .navbar-brand a{
    font-family: var(--ff-secondary);
    font-size: var(--fs-h4-a);
    color: var(--clr-dark);
}
.navbar-toggler{
    border: none !important;
}
.navbar-toggler:focus{
    border: none !important;
    box-shadow: none !important;
}
#navbarNav ul li a{
    font-family: var(--ff-primary);
    font-size: var(--fs-h4-a);
    line-height: var(--ln-h4-a-p);
    color: var(--clr-dark-muted);
    margin: 0 20px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative;
    transition: var(--tt-transition);
}
#navbarNav ul li a:hover{
    color: var(--clr-dark);
}
#navbarNav ul li .active{
    color: var(--clr-dark);
}
#navbarNav ul li .active::after{
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--clr-dark);
    bottom: 10px;
    left: 0;
}
/* nav end */


/* hero start */
#hero_id{
    padding: 200px 0 100px 0;
}
.hero_content{
    padding-right: 40px;
}
.hero_content h1{
    font-size: var(--fs-h1);
    line-height: var(--ln-h1);
    color: var(--clr-dark);
    letter-spacing: var(--ls-letter);
}
.hero_content p{
    font-family: var(--ff-primary);
    font-size: var(--fs-p);
    color: var(--clr-dark-muted);
    letter-spacing: var(--ls-letter);
    padding-top: 40px;
}
.hero_links ul{
    text-align: end;
    
}
.hero_links ul li{
    list-style: none;
    padding: 10px 0;
}
.hero_links ul li a{
    text-decoration: none;
    color: var(--clr-dark-muted);
    font-family: var(--ff-secondary);
    font-size: var(--fs-h4-a);
    position: relative;
    transition: var(--tt-transition);
}
.hero_links ul li a:hover{
    color: var(--clr-dark);
}
.hero_links ul li .active{
    color: var(--clr-dark);
}
.hero_links ul li .active::after{
    position: absolute;
    bottom: 0px;
    left: 0;
    content: "";
    width: 100%;
    height: 1px;
    background-color: var(--clr-dark);
}
/* hero end */

/* footer start */
footer{
    padding: var(--ls-section);
}
footer .copyrights p{
    color: var(--clr-dark-semi-muted);
    font-size: var(--fs-p);
}
footer .footer_link ul{
    list-style: none;
    display: flex;
    justify-content: end;

}
footer .footer_link ul li{
    margin: 0 24px;
}
footer .footer_link ul li a{
    text-decoration: none;
    color: var(--clr-dark-semi-muted);
    font-size: var(--fs-h4-a);
    transition: var(--tt-transition);
    display: block;
}
footer .footer_link ul li a:hover{
    color: var(--clr-dark);
}
/* footer end */