/* This bit of stylesheet contains the main style for various webpages */

/* colors */
:root{
    --background-color: #b4f33e;
    --default-color: rgb(27, 9, 9);
    --gray-color: rgb(152, 152, 152);
    --accent-color: #2b5d1d;
    
}

/* Fonts */
:root{
    --default-font: ruberoidi;
    --alt-font: m-barlow;
    --font-size: 12px;
    --huge-font-size: 60px;
}

 @media screen and (max-width: 900px) {
    :root{
        --huge-font-size: 40px;
    }
 }

body{
    font-family: var(--default-font);
    color: var(--default-color);
    overflow-x: hidden;
}

.header-container{ 
    padding: 40px; display: flex; justify-content: space-between; align-items: center;
     font-family: var(--default-font); font-size: var(--font-size);
}

header{border-bottom: 1px solid var(--accent-color);}

.sub-header-left{
  display: flex; justify-content: space-between; align-items: center;
}

/* NAVIGATION MENU ON WIDE SCREEN */

@media screen and (min-width: 900px) {
    .m-nav-menu{display: flex; gap: 20px; list-style: none; align-items: center; padding-top: 10px;
    }
    .m-nav-item{position: relative;}
    .m-nav-link{text-decoration: none; color: var(--default-color); text-transform: uppercase; font-weight: bold;}
    .m-nav-link:hover{text-decoration: none; color: color-mix(in srgb, var(--accent-color), transparent 10%);}

    

    .m-nav-item .active{color: var(--accent-color); position: relative;}
    .m-nav-item .active::before{content: ""; position: absolute; right: -10px; bottom: 0; width: 5px;
    height: 5px; background-color: var(--accent-color);}

    .m-nav-item.drop-down i{display: none;}

    .m-nav-submenu{margin: 0; padding: 0; position: absolute; background-color: white; padding: 20px; list-style: none;
    border: 1px solid var(--accent-color); left: 0; width: 250px; display: none; z-index: 100;}

    .m-nav-item.drop-down:hover .m-nav-submenu{display: block;}

    .m-nav-submenu li{width: inherit; margin-top: 10px;}
    .m-nav-submenu li a{text-decoration: none; color: var(--default-color); text-transform: uppercase; font-weight: bold;
    width: calc(100% - 40px); display: block;}
    .m-nav-submenu li a:hover{background-color: color-mix(in srgb, var(--gray-color), transparent 90%); color: var(--accent-color);}

    
}

/* NAVIGATION MENU ON WIDE SCREEN ENDS HERE */

/* NAVIGATION MENU ON MOBILE SCREEN */
@media screen and (max-width: 900px) {
  .m-nav-menu{top: 0; left: -100%; height: 100%; background-color: var(--accent-color); list-style: none;
position: fixed; margin: 0; padding: 0; padding: 40px; z-index: 100; width: 300px; transition: 0.4s;}
.m-nav-menu::before{content: ""; position: absolute; width: 800px; top: 0; left: 0; height: 100%; background-color: rgba(0, 0, 0, 0.545);
z-index: -100; display: none;}

.m-nav-menu.show{left: 0;}

.m-nav-item{position: relative; margin-bottom: 10px;}
.m-nav-link{text-decoration: none; color: white; text-transform: uppercase; font-weight: bold;}
.m-nav-link:hover{text-decoration: none; color: color-mix(in srgb, var(--background-color), transparent 10%);}

.m-nav-item.drop-down {justify-content: space-between;}
.m-nav-item.drop-down i{color: white; float: right;}


.m-nav-item .active{color: var(--background-color); position: relative;}
.m-nav-item .active::before{content: ""; position: absolute; right: -10px; bottom: 0; width: 5px;
height: 5px; background-color: var(--background-color);}

.m-nav-submenu{ list-style: none; padding: 0; padding: 10px; padding-left: 20px; background-color: white;
overflow: hidden; height: 0px; display: none; transition: 0.5s;}
.m-nav-submenu li{margin-bottom: 10px;}
.m-nav-submenu li a{text-decoration: none; color: var(--accent-color); text-transform: uppercase; font-weight: bold;}

.m-nav-item .show{display: block; height: max-content; transition: 1s;}

}

/* NAVIGATION MENU ON MOBILE ENDS HERE */


/* HERO SECTION BEGINS HERE */
.hero-section{height: 40vh; display: flex; align-items: center;  position: relative;}
.hero-section .bg{position: absolute; left: 0; top: 0; filter: brightness(30%); width: 100%; height: 100%; background-size: cover; background-position: 0 60%;}
.hero-text{font-size: var(--huge-font-size); font-family: var(--default-font); font-weight: bolder; color: white; z-index: 1;}

/* HERO SECTION ENDS HERE */

/* BANNER SECTION STARTS HERE */
.banner-section{font-family: var(--default-font);
 height: 70vh; }

.banner-section-inner{min-width:400px; backdrop-filter: blur(10px); color: white; padding: 30px;}
.banner-section-inner h1{font-weight: bolder; font-size: var(--huge-font-size);}

/* BANNER SECTION ENDS HERE */


/* HOUSING PROJECT STARTS HERE */
.housing-project{font-family: var(--default-font);}

/* HOUSING PROJECT ENDS HERE */

/* HIGHLIGHT SECTION */
.highlight-container{font-family: var(--default-font);}
.highlight-container ul{list-style-type: circle; font-family: var(--alt-font);}
.highlight-container li{margin-bottom: 10px;}
.highlight-container p{font-family: var(--alt-font);}

/* HIGHLIGHT SECTION ENDS HERE */

/* ASSISTANCE SECTION */
.assistance{font-family: var(--default-font);}
.assistance form input{background: none; outline: none; border-radius: 0; border: 1px solid var(--accent-color);
padding-top: 20px; padding-bottom: 20px;}
.assistance form textarea{background: none;  border-radius: 0; border: 1px solid var(--accent-color);}
.assistance form{font-family: var(--alt-font);}
.assistance form button{font-family: var(--default-font);}
/* ASSISTANCE SECTION ENDS HERE */

/* QUICK PROPERTIES BEGINS HERE */
.quick-properties{font-family: var(--alt-font); font-size: var(--font-size);}
.quick-properties button{font-family: var(--default-font);}
/* QUICK PROPERTIES ENDS HERE */


/* NEWS SECTION BEGINS HERE */
.news-section{font-family: var(--default-color);}
.news-section .custom-card{font-family: var(--alt-font);}
.news-section .news-tag{position: absolute; top: 0; transform: translate(0,-50%);}
/* NEWS SECTION ENDS HERE */


/* ADVERT SECTION BEGINS HERE */
.advert-section{height: 50vh; display: flex; align-items: center; justify-content: center;  position: relative; font-family: var(--default-font);}
.advert-section .bg{position: absolute; left: 0; top: 0; filter: brightness(60%); width: 100%; height: 100%; background-size: cover; background-position: 0 60%;}
.advert-text{ color: white; z-index: 1; text-align: center;}

/* ADVERT SECTION ENDS HERE */


/* AWARD STARTS HERE */
.award-item{width:20em; height:20em; position: relative; overflow: hidden;}
.award-item img{width:100%; height:100%; object-fit:cover; transition: 0.4s;}
.award-item-desc{position: absolute; background-color: white;
left: 50%; bottom: -10px; padding: 30px; transform: translate(-50%,50%); transition: 0.4s;
font-family: var(--default-font);}

.award-item:hover .award-item-desc{bottom: 50%;}
.award-item:hover img{transform: scale(1.1,1.1); filter: brightness(60%);}
/* AWARD ENDS HERE */



.stat-grid{display: flex; height: 10em; flex-wrap: wrap; flex-direction: column; gap: 20px;}
.stat-card{background-color: var(--background-color); padding: 10px; display: flex; gap: 10px;}
/* stat grid ends here */


/* FOOTER BEGINS HERE */
footer{font-family: var(--alt-font); background-color: var(--accent-color); color: white; }
@media screen and (min-width: 768px){
    .footer-section:nth-child(2){border-left: 1px solid white; border-right: 1px solid white;}
}
@media screen and (max-width: 768px){
    .footer-section:nth-child(2){border-top: 1px solid white; border-bottom: 1px solid white;}
}
footer ul{list-style:circle;}
footer ul li a{text-decoration: none; color: white;}
footer ul li a:hover{text-decoration: none; color: var(--background-color);}
.footer-socials a{text-decoration: none; color: white; font-size: 30px;}
.footer-socials a:hover{text-decoration: none; color: var(--background-color);}
/* FOOTER ENDS HERE */