@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Gujarati:wght@100..900&display=swap');

/* font-family: "Inter", serif; */
/* COLOR
-----------------------*/
:root {
    --lightgreen: #629B1C;
    --green: #163F34;
    --bg: #E8FFC3;
}

/* MAIN STYLESHEET
----------------------*/
html{ scroll-behavior: smooth; }
body,html{ overflow-x: hidden; }
body{
    font-family: "Noto Sans Gujarati", serif;
    background:#E8FFC3;
}

.app-layout-main{max-width: 768px; margin: 0 auto;  height: 100%;}
.app-layout-main.homescreen{background: var(--bg);}
.side-menu-block{background: #fff; position: fixed; top: 0px; left: -400px; width: 260px; height: 100vh; overflow: scroll; z-index: 10; -webkit-box-shadow: 40px 0px 32px 0px rgba(0,0,0,0.14); -moz-box-shadow: 40px 0px 32px 0px rgba(0,0,0,0.14); box-shadow: 40px 0px 32px 0px rgba(0,0,0,0.14); transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease;}
.side-menu-block.open{transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; left: 0px;}
.side-menu-block .banner-part{background: url(../images/menu-banner.jpg) center center no-repeat; padding: 15px 15px 25px 15px; background-size: cover; border-radius: 0 0 30px 30px; position: relative; overflow: hidden; margin-bottom: 30px;}
.side-menu-block .banner-part .logo{width: 120px; height: 120px; margin: 0 auto; position: relative; z-index: 1;}
.side-menu-block .banner-part .logo img{width: 100%;}
.side-menu-block .banner-part .appname{color: #fff; text-align: center; font-size: 20px; font-weight: 700; margin-top: 20px; position: relative; z-index: 1;}
.side-menu-block .banner-part::before{content: ''; background: var(--green); opacity: 0.5; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;}
.side-menu-block .menu-close{background: #fff; border-radius: 8px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: none; -webkit-box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.15); -moz-box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.15); box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.15); position: absolute; top: 190px; left: 50%; margin-left: -20px;}
.side-menu-block .menu-close img{width: 24px; height: 24px;}
.side-menu-block ul.menu-link{margin: 0px; padding: 0px 15px; list-style: none;}
.side-menu-block ul.menu-link li a{color: var(--green); text-decoration: none; display: flex; align-items: center; font-size: 16px; line-height: 17px; border-bottom: #eaeaea 1px solid; padding: 15px 0 12px 34px; font-weight: 500; position: relative;}
.side-menu-block ul.menu-link li a .icon{width: 20px; height: 20px; position: absolute; top: 10px; left: 0px;}
.side-menu-block ul.menu-link li a .icon img{width: 100%; height: 100%; vertical-align: top;}
.side-menu-block ul.menu-link li:last-child a{border-bottom: none;}

.home-titlebar{position: absolute; top: 0px; left: 0px; z-index: 2; width: 100%; padding: 12px 16px;}
.home-titlebar .btn-menu{background: #fff; border-radius: 8px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: none; -webkit-box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.15); -moz-box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.15); box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.15);}
.home-titlebar .btn-menu img{width: 24px; height: 24px;}

.inner-titlebar{position: fixed; top: 0px; left: 0px; z-index: 1; width: 100%; padding: 12px 16px; background: var(--lightgreen); border-radius: 0 0 15px 15px; display: flex; justify-content: space-between; align-items: center;}
.inner-titlebar .btn-menu{background: #fff; border-radius: 8px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: none; -webkit-box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.15); -moz-box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.15); box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.15);}
.inner-titlebar .btn-menu img{width: 24px; height: 24px;}
.inner-titlebar .leftside{display: flex; align-items: center;}
.inner-titlebar .leftside h1{margin: 5px 0px 0px 15px; color: #fff; font-size: 20px; font-weight: 700; line-height: 2  m0px; }
.inner-titlebar .btn-add{width: 24px; height: 24px; display: flex; align-items: center;}
.inner-titlebar .btn-add img{width: 100%;}

.top-photo-area{width: 100%; min-height: 235px; position: relative; overflow: hidden;}
.top-photo-area img{width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; object-fit: cover;}
.top-photo-area::before{content: ''; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 200px; background: rgb(232,255,195); background: linear-gradient(0deg, rgba(232,255,195,1) 0%, rgba(232,255,195,0) 100%); z-index: 1;}

.chairman-photo{margin: -116px auto 0 auto; width: 180px; height: 180px; border: #fff 5px solid; border-radius: 50%; position: relative; overflow: hidden; z-index: 2;}
.chairman-photo img{width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; object-fit: cover;}
.chairman-name{text-align: center; font-weight: 700; font-size: 25px; line-height: 30px; color: var(--green); margin: 25px 0;} 
.chairman-name span{display: block; font-size: 18px; line-height: 18px; font-weight: 400; margin: 6px 0 0 0;}

.main-content-area{padding: 0 16px; width: 100%; background: var(--bg);}
ul.quick-link{margin: 0px -6px; padding: 0px; display: flex; flex-wrap: wrap; list-style: none;}
ul.quick-link li{padding: 0 6px 12px 6px; width: 50%;}
ul.quick-link li a{background: var(--lightgreen); color: #fff; display: block; border-radius: 15px; padding: 16px 16px 10px 16px; text-decoration: none; font-size: 17px; line-height: 18px; font-weight: 700; height: 80px; display: flex; flex-direction: column; justify-content: space-between; position: relative;}
ul.quick-link li a::before{content: ''; position: absolute; top: 16px; right: 16px; background: url(../images/arrow-up-right.png) center center no-repeat; width: 20px; height: 20px;}

.inside-content-screen{padding: 80px 16px 16px 16px;}
.form-area .form-group{margin-bottom: 14px; position: relative;}
.form-area .form-group .form-control{border-radius: 0px; height: auto; color: #000; font-size: 14px; line-height: 28px; padding: 10px 16px; font-weight: 400; border-radius: 10px;}
.form-area .form-group label{position: absolute; top: 18px;  left: 12px; text-align: left; display: inline-block; padding: 0 4px; height: 16px; line-height: 14px; font-size: 17px; font-weight: 400; background: #fff; color: var(--green); margin: 0px auto; cursor: text; transition: all .15s ease-in-out;}
.form-area .form-group .form-control:hover, 
.form-area .form-group .form-control:focus { border: 1px solid var(--lightgreen); box-shadow: none;}
.form-area .form-group .form-control:valid + label, 
.form-area .form-group .form-control:focus + label {top: -5px; color: var(--lightgreen); font-size: 12px;}
.form-area .btn-submit{background:var(--green); border: var(--green) 1px solid; font-size: 16px; line-height: 16px; color: #fff; font-weight: 400; width: 100%; padding: 16px; border-radius: 10px;}
.form-area .btn-submit:hover{background: #00104E;}

ul.gallery-list{margin: 0px -5px; padding: 0px; list-style: none; display: flex; flex-wrap: wrap;}
ul.gallery-list li{width: 50%; padding: 0 5px; margin-bottom: 10px;}
ul.gallery-list li .photo-gallery{width: 100%; border-radius: 10px; position: relative; overflow: hidden;}
ul.gallery-list li .photo-gallery img{width: 100%;}
ul.gallery-list li .photo-gallery .title-bottom{position: absolute; bottom: 0px; left: 0px; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); font-size: 13px; line-height: 16px; color: #fff; padding: 10px; width: 100%;}

.member-block{background: #fff; border-radius: 10px; padding: 10px 10px 10px 100px; position: relative; min-height: 100px; -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.07); -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.07); box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.07); margin-bottom: 10px;}
.member-block .user-img{position: absolute; width: 80px; height: 80px; border-radius: 10px; overflow: hidden; left: 10px; top: 10px;}
.member-block .user-img img{width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; object-fit: cover;}
.member-block h2{font-size: 18px; font-weight: 700; color: var(--green); margin: 0px;}
.member-block .info{font-size: 14px; line-height: 20px; color: #000; font-weight: 500; display: flex; align-items:flex-start; margin-top: 5px;}
.member-block .info img{width: 16px; height: 16px; margin-right: 8px;}

a{text-decoration: none;}
.video-block{background: #fff; border-radius: 10px; padding: 10px 10px 10px 140px; position: relative; min-height: 100px; -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.07); -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.07); box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.07); margin-bottom: 10px; display: block;}
.video-block .video-img{position: absolute; width: 120px; height: 80px; border-radius: 10px; overflow: hidden; left: 10px; top: 10px;}
.video-block .video-img img{width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; object-fit: cover;}
.video-block h2{font-size: 16px; font-weight: 700; color: var(--green); margin: 5px 0px 5px 0px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-decoration: none;}
.video-block p{font-size: 12px; line-height: 16px; margin: 0px; color: #000; opacity: 0.7;}

.video-content-screen{padding: 64px 0px 0px 0px;}
.video-content-screen iframe{width: 100%; }
.video-content-screen .white-block{padding: 16px;}
.video-content-screen .white-block h2{font-size: 18px; font-weight: 700; color: var(--green); margin: 5px 0px 5px 0px; }
.video-content-screen .white-block p{font-size: 14px; line-height: 18px; margin: 0px; color: #000; opacity: 0.7;}


.rate-block{background: #fff; border-radius: 10px; padding: 12px 0px 10px 0px;  position: relative; -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.07); -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.07); box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.07); margin-bottom: 10px; display: flex}
.rate-block .text-block{font-size: 16px; font-weight: 700; line-height: 16px;}
.rate-block .text-block span{display: block; font-weight: 400; font-size: 12px; line-height: 12px; margin-bottom: 5px;}
.rate-block .text-block.high-text{text-align: center; color: #B50003; width: 24%; border-left: #D8D8D8 1px solid;}
.rate-block .text-block.low-text{text-align: center; color: #208542; width: 24%; border-left: #D8D8D8 1px solid;}
.rate-block .text-block.incoming-text{text-align: center; color: #1E5631; width: 24%; border-left: #D8D8D8 1px solid;}
.rate-block .text-block.name-block{color: #1E5631; width: 28%; padding: 0 10px;}

.inside-tab{background: #fff; border-radius: 10px; padding: 10px;  position: relative; -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.07); -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.07); box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.07); margin-bottom: 10px; display: flex}
.inside-tab li{width: 50%;}
.inside-tab li .nav-link{background: #fff; display: block;  width: 100%; padding: 5px 10px; color: #629B1C; border-radius: 10px; border: none;}
.inside-tab li .nav-link.active{background: #629B1C; color: #fff;}

/*** Start Contact CSS 28-12-2024 ***/
.clear{clear:both;}
.contact-block .contacts{color: #232323;font-size: 15px; vertical-align: top; margin-bottom: 20px;}
.contact-block .contacts i { float: left; color: #fff; width: 32px; height: 32px; text-align: center; font-size: 16px; background-color: #afca0f; border-radius: 30px; padding: 7px 0; margin-right: 10px; margin-bottom: 40px;
}
.contact-block .contacts span{font-weight: bold;}
.contact-block h3{margin: 30px 0; padding-bottom: 15px; border-bottom: 1px solid #429228;}
/*** End Contact CSS 28-12-2024 ***/

/*** Start Facility/Suvidhao CSS 28-12-2024 ***/
.facility_title { font-size: 26px; color: #256b21; line-height: 26px; margin: 0 0 15px; }
.main-area .nav-tabs { display: block; }
.main-area .nav-tabs li { display: inline-block; width: 49%; text-align: center; color: #fff; }
.main-area .nav-tabs li a { color: #fff; font-size: 18px; text-transform: uppercase; display: block; background-color: #aaa; padding: 5px 0; font-weight: 700; text-decoration: none; }
.main-area .nav-tabs li a.active { background-color: #429228; }
.main-area .tab-content { margin-top: 1rem; }
/*** End Facility/Suvidhao CSS 28-12-2024 ***/

.news-list .news_item { display: inline-block; width: 100%; background-color: #fff; padding: 10px; border-radius: 7px; box-shadow: 1px 2px 7px #999; margin-bottom: 20px; }
.news-list .news_item h3 img { width: 35px; }
.news-list .news_item h3 { font-size: 18px; font-weight: bold;}
.news-list .news_item h3 span { font-size: 12px; color: #555; }
.news-list .news_item .news_info p { font-size: 14px; line-height: 20px; margin-bottom: 10px; }
.gallery-list .card.card-warning { margin-bottom: 15px; }


.inward-block{background: #fff; border-radius: 10px; padding: 12px 0px 10px 0px;  position: relative; -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.07); -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.07); box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.07); margin-bottom: 10px; display: flex}
.inward-block .text-block{font-size: 16px; font-weight: 700; line-height: 16px;}
.inward-block .text-block span{display: block; font-weight: 400; font-size: 12px; line-height: 12px; margin-bottom: 5px;}
.inward-block .text-block.quantity-text{text-align: center; color: #208542; width: 30%; border-left: #D8D8D8 1px solid;}
.inward-block .text-block.incoming-text{text-align: center; color: #1E5631; width: 30%; border-left: #D8D8D8 1px solid;}
.inward-block .text-block.name-block{color: #1E5631; width: 40%; padding: 0 10px;}