/* font import */
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Lobster+Two&display=swap');

/* body */

body {font-family: 'Montserrat', sans-serif;
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

/* ===============Navbar links============== */
 
a:hover {
    background-color: #558303;
    color:white;   
}

a:focus {
    background-color: #55971e; 
}

a:active {
    background-color: #92bb32;
}

.navhome {
    border: 1px solid rgb(240, 161, 14);
    transition: background-color 0.3s, color 0.3s;
}


.navhome {
  color:  #eef467;
}

.navhome:active {
    background-color: #558303;
    color: #eef467;
} 


/* ===========Alert========= */

.top-alert {
    display: none; /* Initially hidden */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1050; /* Above navbar */
}


/* ==================   Navbar    ======================= */

.navbar-toggler {
    width: 20px;
    height: 20px;
    position: relative;
    transition: 0.5s ease-in-out;
 }
 
 .navbar-toggler,
 .navbar-toggler:focus,
 .navbar-toggler:active,
 .navbar-toggler-icon:focus {
    outline: none; 
    box-shadow: none;
    border: 0;
 }
 .navbar-toggler span {
    margin:0;
    padding:0;
 }
 .toggler-icon {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background:#558303;
    border-radius: 1px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: 0.25s ease-in-out;  
}
.middle-bar {
    margin-top: 0px;
}
 
/* changes for the nabar after click */

.navbar-toggler .top-bar {
    margin-top:0px;
    transform: rotate(135deg);
}
.navbar-toggler .middle-bar {
    opacity: 0;
    filter: alpha(opacity=0);
}
.navbar-toggler .bottom-bar {
    margin-top: 0px;
    transform: rotate(-135deg);
}

/* Navbar collapsed appearance  */

 .navbar-toggler.collapsed .top-bar {
    margin-top: -20px;
    transform: rotate(0deg);
}
.navbar-toggler.collapsed .middle-bar { 
    opacity: 1;
    filter: alpha(opacity=100);
}
.navbar-toggler.collapsed .bottom-bar {
    margin-top: 20px;
    transform: rotate(0deg);
} 
 /* media querries  */

 @media (max-width: 990px) {
    .navbar-content {
      display: none;
    }
  }
  
  @media (min-width: 982px) {
    .navbar-toggler {
      display: none;
    }
  } 

/* ===============USED RESOURCES=========================
-------------------------------------------------- */


.txtcolor {
    color:#558303;
}
.bgcolor {
    background-color: #63a034;
}


.navspace {
    margin-top: 130px;
}

/* ===============BANNER=========================
-------------------------------------------------- */
  a {
    color: #333 !important;
}



/* ===============BANNER=========================
-------------------------------------------------- */

.carousel {
    margin-top: 8.2rem;
    margin-bottom: 1.2rem;
  }
  .carousel-caption {
    bottom: 3rem;
    z-index: 10;
  }
  .carousel-item {
    height: 32rem;
  }
  .carousel-item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 32rem;
  }
  
  .banner {
    background-size: cover;
    background-position: center;
    width:100%;
}
.banner_1 {
    background-image: url(./img/banner.jpg);
    background-blend-mode: soft-light;
}
/* .banner_2 {
    background-image: url(./img/trial12.jpg);
    background-blend-mode: soft-light;
}
.banner_3 {
    background-image: url(./img/triall11.jpg);
    background-blend-mode: soft-light;
}
.banner_4 {
    background-image: url(./img/trial10.jpg);
    background-blend-mode: soft-light;
}
.banner_5 {
    background-image: url(./img/ban.jpeg);
    background-blend-mode: soft-light;
} */


/* ====After and Before Slider========== */


.post-slider, .right-side {
    cursor: pointer;
}
.right-side {
    padding-right: 4%;
}
.post-slider, .left-side { 
    cursor: pointer;
}
.left-side {
    padding-left: 4%;
}
.post-slider .post-wrapper {
    width: 86%;
    height: auto;
    margin: 0px auto;
    overflow: hidden;
}

.post-slider .post-wrapper .post {
    height: 350px;
    width:300px;
    margin: 0 10px;
    display: inline-block;
}


/* ================== Our Latest News ====================  */


.news-research {
   width: 50%;
}

.news {
    width: 40%;
}

@media(max-width: 768px) {
    .news-research {
        width: 100%;
    }

    .news {
        width: 100%;
    }
}

/* ======================SERVICE HTML ====== */

.service a:hover {
    background-color:#caf467;
    text-decoration: none;
}

.ranenaschool img {
    width: 100%;
    height: auto;
}

@media (min-width: 1000px) {
    .ranenaschool img {
        width: 98%;
        height: 28em;
    }
 }
 
/* =====================Statistics =================== */

.stats a:hover {
    background-color:#caf467;
    color:#333;
}


/* ========================Testimonials=========== */


.wrappa {
    background: linear-gradient(75.7deg, rgb(34, 126, 34) 3.8%, rgb(99, 162, 17) 87.1%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.wrappa h2 {
    font-size: 60px;
    font-weight: 500;
    margin-bottom: 20px; 
    font-weight:300;
}
.wrappa h5 {
    font-size: 20px;
    text-align: center;
    font-weight: 300;
    margin-bottom: 80px;
}
.card1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin: 0 auto;
    padding-bottom: 30px;
}
.card2 {
    width:95%;
    height:300px;
    border-radius: 15px;
    margin: 7px; 
    padding: 20px 30px;
    position: relative;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 10px 20px 25px rgba(0,0,0,0.2);
    transition: 0.5s;
}
.card2 img {
    height: 90px;
    width: 90px;
    border: 2px solid #f2f2f2;
    border-radius: 50%;
    position: absolute;
    top: -40px; 
    left: 10px;
}
 
.card2 h4 {
    color: #333;
    font-weight: 20px;
    font-size: 16px;

} 
.card2 p {
    font-size: 14px;
}
.quote {
font-size: 60px;
position: absolute;
bottom: 20px;
right: 25px;
color: #b2bec3
}

.card2:hover {
    transform: scale(1.4);
    color:#333;
    background: #fff;
    z-index: 1000;
}

/* Resposiveness */

@media(max-width: 768px) {
    .card1 {
        width:76%;
        flex-direction: column;
        justify-content: center;
        flex-wrap: wrap;
    }
    .card2 {
        margin: 10px;
        margin-bottom: 40px 0;
    }
}

@media(max-width: 320px) {
    .card1 {
        width:86%;
        flex-direction: column;
        justify-content: center;
        flex-wrap: wrap;
    }
    .card2 {
        width: 220px;
        margin: 10px;
        margin-bottom: 40px 0;
    }
}


@media (min-width: 768px) {
    .card2 h4 {
        color: #333;
        font-weight: 25px;
        font-size: 18px;
    
    } 
    .card2 p {
        font-size: 18px;
    }
 }

@media (min-width: 1000px) {
   .card1 {
    padding-bottom: 50px;
   }
   .card2 h4 {
        color: #333;
        font-weight: 25px;
        font-size: 18px;
    
    } 
    .card2 p {
        font-size: 18px;
    }
}

/* ======== Font for staff section ========  */

.lobster-regular {
    font-family: "Lobster", sans-serif;
    font-weight: 400;
    font-style: normal;
  }



/*================ Styles for Terms of service ================ */


.termsflex {
    display: flex;
    justify-content: center;
    align-items: center; 
}
.termswrapper {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    background: linear-gradient(75.7deg, rgb(34, 126, 34) 3.8%, rgb(99, 162, 17) 87.1%);
    color: rgb(0, 61, 0);
    min-height: 100vh;
    padding: 0 20px;
}
.termsrw {
    width: 750px;
    max-width: 100%;
    height: 460px;
    background: #fff;
    display: flex;
    border-radius: 3px;
    overflow: hidden;
}
.termsrw .tabs_list {
    width: 200px;
    background: #dfc8fd;
    height: 100%;
}
.termsrw .termscontent {
    width: calc(100% - 150px);
    padding: 0 10px 0 20px;
    height: 100%;
}
.termsrw .termscontent .terms_h,
.termsrw .termscontent .termsfootr {
 color: #55971e;
 padding-top: 5px;
}
.termsrw .termscontent .termsfootr {
    padding-top: 20px;
}
.termsrw .termscontent .terms_h {
    text-align: center;
}
.termsrw .termscontent .termsbody {
    height: calc(100% - 140px);
    overflow: auto;
}
.termsrw .tabs_list ul {
    padding: 70px 20px;
    text-align: right;
}
.termsrw .tabs_list ul li {
    list-style: none;
    padding: 10px 0; 
    position: relative;
    cursor: pointer;
    margin-bottom: 3px;
    font-weight: bold;
    transition: all 0.5s ease;
}
.termsrw .tabs_list ul li:before {
    content: "";
    position: absolute;
    top: 0;
    right: -20px; 
    width: 2px;
    height: 100%;
    background: #55971e;
    opacity: 0; 
    transition: all 0.5s ease; 
}
.termsrw .tabs_list ul li.active,
.termsrw .tabs_list ul li.hover {
 color: #55971e;
}
.termsrw .tabs_list ul li.active:before {
    opacity: 1; 
}
.termsrw .termscontent .termsbody .tab_item h3 {
    padding-top: 10px;
    margin-bottom: 10px;
    color: #55971e;
}
.termsrw .termscontent .termsbody .tab_item p {
    margin-bottom: 20px; 
}
.termsrw .termscontent .termsbody .tab_item.active {
    display: block !important;
}
.termsrw .termscontent .termsfootr button {
    width: 125px; 
    padding: 5px 10px;
    background: transparent;
    border: 1px solid;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.5s ease;
}
.termsrw .termscontent .termsfootr button.decline {
    margin-right: 15px;
    border-color: #dfc8fd;
    color: #dfc8fd;
}
.termsrw .termscontent .termsfootr button.agree {
    color:#fff;
    background-color:#55971e;
    border-color: #55971e; 
}
.termsrw .termscontent .termsfootr button.decline:hover { 
    background: #dfc8fd;
    color: #fff;
}
.termsrw .termscontent .termsfootr button.agree:hover {
    background:  #69da0d;
    border-color:  #69da0d;
}  



/* ======== animations ===========  */ 


.transition{
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.sliding-transition {
    width: calc(250px * 6);
    animation: scroll 40s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}