body, html{margin:0; padding:0; font-size:14px; font-family:Arial;}
p {line-height:30px;}
.centerlised{width:90%; margin:0px auto;}
.text-center{text-align:center;}
.main_header{width:100%; background:#DE3163; color:#ffffff; padding:0.5%; display:block;}
#header-container{width:100%; margin:0; position:fixed; top:0px; left:0px; z-index:101;}
header{width:100%; background:#005984; padding:10px 0;  border-bottom:2px solid #FFCC00;}
.oval{ width: 20%;background:#6495ED; padding:20px 30px; border-radius:20px; box-shadow:5px 10px 12px #ccc; margin:0px auto;}
#super-one{margin-top:100px; width:100%;}
.btn {background:#3cb371; color:#002F5E; padding:5px 10px; border-radius:10px; font-family:Arial Unicode MS;cursor:pointer; }
.btn:hover {background:#ffa500; color:#ffffff;}
.btn {font-size:12px; }
.img {width:100%;}
.navbar {
  color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;    
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px; /* logo aur name me gap */
  font-size: 1rem;
  font-weight: bold;
}
.logo {
    width:35px; height:40px;
  font-size: 1.8rem; /* logo size */
}

.twenty{display:flex; gap: 20px; align-items: center; flex:1; }
.eighty{display:flex; align-items: center;  flex:3;}
.fifty{width:50%; float:left; display:inline-block;}
.thirty{width:30%; float:left; display:inline-block;}
.seventy{width:70%; float:left; display:inline-block;}
.head-twenty{width:20%; float:left; display:inline-block;}
.head-eighty{width:80%; float:left; display:inline-block;}
.white{color:#fff;}
/* Footer --------------------- items */
footer{background:#005984; width:100%; padding:1%; margin-top:0px; color:#fff;display:block;}
/* Nav menu --------------------- items */
nav {}
nav ul {display: flex; width:100%; gap: 15px; justify-content: sapce-between; list-style-type: none; margin: 0; padding: 0;}
nav ul li{}
nav ul li a{color:#fff; font-size:14px; text-decoration:none; font-family:Arial Narrow; font-weight:bold; display:block;}
nav ul li a:hover{color:#FFCC33;}
#menu{display:none; padding:0px 8px; background:#6a5acd; border-radius:8px;}
.clear {clear:both; display:block;}
#about_us{width:100%; background:#fff5ee;}
#contact_us {background:#f5f5f5;}
hr{}
.padd{padding:5%;}
.icon-images{width:180px; height:180px; margin:10px auto;}
h1{color:#0380B7; font-size:30px;}
h3{color:#DE3163;}
.shiny-box{border-radius:20px; background:#fff; box-shadow:5px 8px 28px 5px #DE3163; border:1px solid #DE3163; margin:20px; width:30%; min-height:430px; display:inline-block;float:left;}
.center{width:90%; margin:0 auto;}
.plantation-box{box-shadow:5px 8px 28px 5px #666; border:1px solid #444; margin:1%; width:30%; height:auto; display:inline-block; float:left; padding:1%;}
.thumbsnail{box-shadow:2px 4px 20px 2px #666; border:1px solid #444; margin:0.5%; width:10%; height:150px; display:inline-block; float:left; padding:0.25%;}
.thumbsnail-mask{position:absolute; top: 0; left:0; background:#222; opacity:0.7; width:100%; height:100%; z-index:3; cursor:pointer;}
.image-box:hover{opacity:1; z-index:4; width:200px; height:175px; background:#fff; position:relative; top:0; left:0;}
.image-box{position:relative; width:100%; height:100%;}
.thumbsnail-image{position:absolute; top:0; left:0; max-width:98%; margin:1%; display:block; max-height:98%; z-index:1;}
.plant-image{max-width:98%; margin:1%;}
.logo-img{border:thin solid #999; padding:10px; box-shadow:1px 1px 5px #666; margin:10px;}
/* line 1, ../sass/tinyslide.scss */
/* pop up window */
html, body { width: 100%; height: 100%; }
    #black-mask{position:fixed; top:0; left:0;  height:100%; width:100%; background:#444; opacity:0.9; z-index:1001; display:none;}
    .container{
        position:fixed;
        padding:20px;
        width:800px;
        height:700px;
        top:10%;
        left:30%;
        margin-right:auto;
        box-shadow: 4px 12px 5px #cfcfcf;
        border-radius:20px;
        background:#fff;
        z-index:1005;
        display:none;
    }
    .container img{width:100%;}
    #close{position:relative; 
    top:-10px; 
    right:0; 
    font-size:30px; 
    font-family:Arial Bold; 
    font-weight:bold; 
    float:right; 
    color:red; 
    cursor:pointer;
    line-height:25px;
    width:25px;
    height:25px;
    background:#cfcfcf;
    border-radius:50%;
    text-align:center;
    box-shadow:1px 2px 4px #666;
    }
/* line 6, ../sass/tinyslide.scss */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* line 12, ../sass/tinyslide.scss */
.tinyslide { width: 100%; height: 100%; position: relative; overflow: hidden; }
/* line 18, ../sass/tinyslide.scss */
.tinyslide .navigator { position: absolute; bottom: 2em; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
/* line 23, ../sass/tinyslide.scss */
.tinyslide .navigator ul { padding: 0; }
/* line 25, ../sass/tinyslide.scss */
.tinyslide .navigator ul li { float: left; list-style-type: none; margin: 0 1em 0 0; padding: 0; width: 15px; height: 15px; border: 1px solid white; border-radius: 100%; -webkit-transition: all 500ms linear; transition: all 500ms linear; }
/* line 35, ../sass/tinyslide.scss */
.tinyslide .navigator ul li span { display: none; }
/* line 38, ../sass/tinyslide.scss */
.tinyslide .navigator ul li:hover { background: white; }
/* line 41, ../sass/tinyslide.scss */
.tinyslide .navigator ul li.active { background: white; -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); }
/* line 51, ../sass/tinyslide.scss */
.tinyslide aside { height: 100%; width: 100%; -webkit-transition: -webkit-transform 800ms cubic-bezier(0.365, 0.84, 0.44, 1); transition: transform 800ms cubic-bezier(0.365, 0.84, 0.44, 1); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* line 57, ../sass/tinyslide.scss */
.tinyslide figure { height: 100%; float: left; position: relative; z-index: 1; }
/* line 63, ../sass/tinyslide.scss */
.tinyslide figure img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
/* line 69, ../sass/tinyslide.scss */
.tinyslide figure figcaption { position: absolute; font-size: 24px; font-weight:bold; color: white; bottom: 40px; left: 60px; z-index: 2; opacity: 0; }
/* line 79, ../sass/tinyslide.scss */
.tinyslide figure.active figcaption { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 2s; animation-duration: 2s; }

@-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); }
  100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } }

@keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); }
  100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } }
/* Donate radiobutton */
/* style sheet */
.radiobutton{display:block;}
.radiobutton input[type="radio"] {
  opacity: 0.01;
  z-index: 100;
  margin:10px;
}
.radiobutton input[type="radio"]:checked, input[type="radio"]:not(:checked){
 position: absolute;
 visibility: hidden;
 width: 0;
 height: 0;
}
.radiobutton input[type="radio"]:not(:checked) + label{
  background: #cdcdcd;
    background-image: linear-gradient(#cdcdcd, #fff, #c9c9c9);
}
.radiobutton input[type="radio"]:checked + label{
  background: #483D8B;
  background-image: linear-gradient(#6495ED, #fff, #6495ED);
}

.radiobutton label {
  padding: 10px;
  border: 1px solid #CCC;
  cursor: pointer;
  margin:20px 0px;
  color:#000;
  font-size:16px;
  display:inline-block;
  width:auto;
}

.radiobutton input[type="radio"]:not(:checked) + label:hover {
  background: #DDD;
  background-image: linear-gradient(#ddd, #fff, #777);
}
.radiobutton input[type="text"]{
  padding:10px;
  border:thin solid #6495ED;
  font-size:16px;
  margin:5px 0px;
}
.radiobutton input[type="password"]{
  padding:10px;
  border:thin solid #6495ED;
  font-size:16px;
  margin:5px 0px;
}
.radiobutton input[type="email"]{
  padding:10px;
  border:thin solid #6495ED;
  font-size:16px;
  margin:5px 0px;
}
.radiobutton input[type="phone"]{
  padding:10px;
  border:thin solid #6495ED;
  font-size:16px;
  margin:5px 0px;
}
/* Media Query --------------------- items */
@media screen and (max-width: 768px) {
body{font-size:120%;}
.padd{padding:2%;}
.main-header{width:98%; padding:0.5%;}
.centerlised{width:98%;  display:block;}    
.call-us{ font-size:16px;line-height:30px; }
#menu{display:block; font-size:22px; float:right; color:#fff; font-weight:bold; cursor:pointer;}
nav{display:none; float:left; width:100%;}
 nav{
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: #333;
        flex-direction: column;
        display: none;
        gap: 2px;
      }
  nav ul {flex-direction: column; gap:0}
  nav li { width: 100%; border: thin solid #fff; padding:0;}
  nav li a { padding: 5px 15px; }
.twenty {width:100%;display:block;}
.eighty {width:100%;display:block;}
.fifty{width:100%; display:block;}
.seventy {width:100%; float:left;display:block;}
nav ul li{display:block; width:100%;  padding:15px 10px; margin:0px auto; border-bottom:1px solid #FFCC00;}
nav ul li a{color:#fff; font-size:16px; text-decoration:none; display:block;}
header {padding:5px 0px;}
img {max-width:100%;}
.banner {width:98%;}
.call-now {font-size:14px;}
body {font-size:100%;}
.shiny-box{width:90%; display:block;}
.plantation-box{width:90%; display:block;}
.thumbsnail{width:40%; padding:2%; margin:5%;}
.image-box:hover{opacity:1; z-index:4; width:160px; height:140px; background:#fff; position:relative; top:0; left:0;}
.container{width:92%; height:400px;
        top:10%;
        left:3%;
}