@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {  font-family:'Aeonik', system-ui, sans-serif; width:100%; height:100%; --webkit-font-smoothing: antialiased;

text-rendering: optimizeLegibility;}
ol, ul {list-style: none;}
*{ margin:0; padding:0;}
a{ text-decoration:none; outline:none;}
h6,h5,h4,h3,h2,h1{ margin:0; font-family:'Fredoka SemiBold', system-ui, sans-serif;
 font-weight:normal;}
img{ border:none;}
div{display:flow-root; box-sizing: border-box;}
.clear{ clear:both;}
.container{position:relative; margin:0 auto; width:1250px;}
:root{--text-color:#282828; --default-fontsize:16px; --white-color:#ffffff; --heading-color:#1a1a1a; --bold-font:font-family: 'Fredoka SemiBold'; --green-color:#77852b; --footer-color:#888e6d; --footer-bg:#f0f9ca;}
/*------Header Section-------*/

.top-bar {
  background:url(../images/header.jpg);
  background-size: cover;
  color: #fff;
  padding: 15px 0;
  justify-content: space-between;
  font-size: 14px;
  height: 66px; 
}
#logo img, .book-img img, .image-row img, .person img, .user img, .books-video iframe, .inn_gal_img img{ width: 100%; height: 100%;}
.top-bar .container{ display: flex; flex-direction: row; justify-content: space-between; }
.top-bar .container div{ display: flex; flex-direction: row; margin: 0 0 0 144px;}
.top-left{ display: flex; flex-direction: row; align-items: center; color: #f1f3c3; margin: 0 125px 0 0;}
.top-left h4{ color: #f1f3c3; font-size: 18px;}
.top-left a{ color: #f1f3c3; font-size: var(--default-fontsize);}
.top-left img{ margin: 0 10px 0 0;}
.top-left i{ margin: 0 8px 0 0;}
#socials { float: right; display: flex; flex-direction: row; gap: 7px;}
 #socials a{ width: 32px; height: 29px; background: url(../images/socialshape.png) no-repeat; display: flex; align-items: center; justify-content: center; color: #f1f3c3;}
header .container{ display: flex; flex-direction: row; align-items: center; justify-content: space-between;}
/* Header */


#logo {
 width: 254px; height: 146px; margin: -50px 0 28px 0;
}



/* Hero */

.hero-content {
  position: absolute;
  color: #fff;
  left: 0; top: 0; background: url(../images/bannerbg.png) repeat-y;
   width: 750px; height: 100%;
   display: flex; justify-content:center;
   flex-direction: column; padding: 0 0 0 50px;
}

.hero-content h4{ font-size: 28px; background: url(../images/captiontop.png) no-repeat top left; padding: 102px 0 0 0 ; margin: 0 0 20px 0;}

.hero-content h1 {
  font-size: 80px;
  line-height: 88px;
}

.highlight {
  color: #fdf855;
}

#mobile_menu, #mobile_drop{display:none;}
#mobile_menu i{ color: var(--green-color);}
.mtoggle{cursor:pointer;float:right;}

ul.dropdown{ z-index:500; position:relative; display: flex; gap: 24px; } 
ul.dropdown li{display:inline-block; zoom: 1;list-style:none; position:relative;}
ul.dropdown li a{ color:var( --text-color);font-size: 17px;text-decoration: none;line-height: 32px;display:block; font-family: var(--bold-font); }
ul.dropdown li a:hover{ color:var(--green-color);}

/*****LEVEL TWO*****/
ul.dropdown ul{ width:177px; visibility: hidden; position: absolute; top: 100%; left: 0; text-align:left; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); background:#FFF;  border-radius:10px; padding: 18px; box-sizing:border-box;}
ul.dropdown ul li{ float: none;list-style:none; text-transform:none; letter-spacing:0; margin-bottom: 8px; display:block;}
/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a{ border-right: none; width: 100%; display:block; color: #333;height:auto;text-shadow:none!important;background:none; font-weight:normal; line-height:23px; text-transform:capitalize; font-size:15px; padding:0;}
ul.dropdown ul li:hover{ color:var(--yellow-text);}
/*****LEVEL THREE******/
ul.dropdown ul ul{ left: 100%; top:0; }
ul.dropdown ul ul li a{line-height:20px;}
ul.dropdown li:hover > ul{ visibility: visible;}

/*------Header Section End-----*/


/*banner section*/
#banner{ position:relative;  margin-bottom: 15px;   box-shadow: 0px 21px 25px 0px rgba(0, 0, 0, 0.3);
}
.rslides {position: relative;list-style: none;overflow: hidden;width: 100%; padding: 0;z-index: 0;}
.rslides li {position: relative;display: none;width: 100%;left: 0;top: 0;}
.rslides img {display: block; height: 100%;width: auto;border: 0;width: 100%;}
/*banner section end*/

/*content part*/

.books-section:after{
  width: 100%;
  height: 73px;
  background: #1f3f99;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.books-section {
  position: relative;
  background: #193898;
  color: #fff;
   margin: 380px 0 0 0;
}

.books-section:after{
  width: 100%;
  height: 153px;
  background: #193898;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  content: ""; position: absolute; left: 0; top: -153px;
}



.books-section:before{
  width: 100%;
  height: 112px;
  background: #193898;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  content: ""; position: absolute; left: 0; bottom: -112px;
}
/* Curved top */


/* Girl illustration */
.girl {
  position: absolute;
  top: -280px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

/* Title */
.section-title {
  text-align: center;
  font-size: 50px;
  margin: -73px 0 0 0; background: url(../images/shape.png) no-repeat left top; position: relative; padding: 24px 0; z-index: 50;
}


.section-title::after {
  width: 60px; /* adjust to control the size */
  height: 55px; background: url(../images/square.png);
  content: ""; position: absolute; right: 150px; top: 0;
}

/* Grid */
.books-grid {
  display: flex;
  flex-direction: row; flex-wrap: wrap; margin: 60px 0 0 0;
  gap: 23px;
}

/* Book Card */
.book-card {
  text-align: center; transition: 1s; position: relative; z-index: 6000;
}
.box {
	height:339px;
	position: relative; 
  box-shadow: 0px 13px 13px 0px rgba(0, 0, 0, 0.3);
}
.book-cover{ width: 295px; display: flex; justify-content: center; align-items: center; background:url(../images/bookbg.png); height: 426px;}
.book-img{ width: 247px; height: 350px; overflow: hidden; border-radius: 20px;   box-shadow: 0px 13px 13px 0px rgba(0, 0, 0, 0.1);
}

.book-card figcaption {
  display: flex; justify-content: center; align-items: center;
  font-size: 16px;
  color: #fff; text-transform: capitalize;
  background: url(../images/booktitle.png) no-repeat; width: 255px; height: 69px; box-sizing: border-box; margin: -11px 0 61px 17px; padding: 0 11px;
}

.book-card:hover{ transform: translateY(-30px);}
.book-card:hover h6{ text-decoration: underline;}

#who-we-are {
  text-align: center;
  margin: 260px 0 0 0;

}

/* Pill */
.pill {
  display: inline-block;
  background: #a6b63f;
  color: #fff;
  padding: 16px 80px;
  border-radius: 30px;
  font-size: 20px;
  margin-bottom: 30px;
}

/* Heading */
#who-we-are h2 {
  font-size: 68px;
  line-height: 1.2;
  margin: 35px 0 60px 0;
  color: var(--heading-color);
  position: relative;
}


#aboutdesc{ display: flex; flex-direction: row; text-align: left; justify-content: space-between; padding: 0 70px; margin: 44px 0 0 0; align-items: center;}


/* Text */
#aboutdesc p {
  max-width: 750px;
  font-size: 19px;
  color:var(--text-color);
  line-height: 35px;
}

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #9DAF41;
background: linear-gradient(266deg,rgba(157, 175, 65, 1) 0%, rgba(106, 117, 49, 1) 100%);
  color: #fff;
  padding: 20px 48px;
  border-radius: 200px;
  text-decoration: none;
  font-size: 18px;
  position: relative; transition: 500ms;
}

.btn:hover{ background: #9DAF41;
background: linear-gradient(90deg,rgba(157, 175, 65, 1) 0%, rgba(106, 117, 49, 1) 100%);}

.btn::after {
   background: #9DAF41;
background: linear-gradient(266deg,rgba(157, 175, 65, 1) 0%, rgba(106, 117, 49, 1) 100%);
  width: 50px;
  height: 50px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  content: "↗";
  position: absolute; right: -30px; top: 5px;
  font-size: 24px;
}

.counter-wrap {
  margin: 130px 0 0 0;
  padding: 68px 0;
  background: url(../images/counterbg.jpg) no-repeat top left;
 
  border-radius: 32px; overflow: hidden;
}

/* Blue overlay */


/* Grid */
.counter-grid {
  position: relative;
  display: flex;
flex-direction: row;
justify-content: space-around;

  text-align: center;
  color: #fff;
}

/* Item */
.counter-item h3 {
  font-size: 49px;
  margin: -21px 0 0;
  position: relative; z-index: 50;
}

.counter-item p {
  font-size: 19px;

}

/* Diamond icons */
.icon {
  width: 104px;
  height: 123px;
  margin: auto;
  transform: rotate(45deg);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon img {
  
  transform: rotate(-45deg);
}

/* Colors */
.orange { background: #F04213;
background: linear-gradient(333deg,rgba(240, 66, 19, 1) 0%, rgba(240, 119, 59, 1) 100%); }
.green  { background: #9DAF41;
background: linear-gradient(154deg,rgba(157, 175, 65, 1) 0%, rgba(106, 117, 49, 1) 100%); }
.blue   {background: #32AAF6;
background: linear-gradient(154deg,rgba(50, 170, 246, 1) 0%, rgba(12, 109, 155, 1) 100%); }



#message-section {
  text-align: center;
  padding: 130px 0 100px 0;
  background: #fff;
}

#message-section h2 {
  font-size: 44px;
  margin-bottom: 40px;
  color:var(--heading-color);
}

/* Card */
.message-card {
  position: relative;
  padding: 70px 100px;
  background: #fff;
  border-radius: 36px;
    border-top:#a1ad61 solid thin;
     border-bottom:#a1ad61 solid thin;
  border-width: 4px;
  
}

/* Green borders */
.message-card::before,
.message-card::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 26px;
background: var(--white-color);
}

.message-card::before {
  top: -4px;
  left: 0;

}

.message-card::after {
  bottom: -4px;
  right: 0;

}

/* Quotes */
.quote {
  position: absolute;
  font-size: 49px;
  color: #9fab5f;
}

.quote.left {
  top: 30px;
  left: 40px;
}

.quote.right {
  bottom: 30px;
  right: 40px;
}

/* Text */
.message-card p {
  font-size: 22px;
  font-style: italic;
  color: var(--text-color);
  line-height: 1.6;
  margin-bottom: 40px;
}

/* Author */
.author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.person {
  width: 87px;
  height: 87px;
  border-radius: 100%;
  overflow: hidden;
  object-fit: cover;
}

.author span {
  font-size: 16px;
  font-weight: bold;
  color:var(--text-color); text-transform: uppercase;
  
}
#quotes{ width: 900px; margin:0 auto;}
#quotes li{ margin: 0 30px 0 0; height: auto !important;}



#highlights {
  display: flex;
  align-items: center;
  position: relative;
  background: var(--green-color);
   margin: 60px 0 0 0;
}
#highlights::after{ background: url(../images/curvebg.jpg) repeat-x; width: 100%; height: 40px; content: ""; position: absolute; left: 0; top: -40px; z-index: -1;}
#highlights1{ position: absolute; left: -60px; top: -100px;}


#highlights .container{ display: flex; flex-direction: row; justify-content: space-around;}
#hightilesimg{ display: flex; align-items: flex-end;}
#cloud{ float: right;}
/* CONTENT */
.content {
  color: #fff; margin: 90px 0;
}
#letter{ position: absolute; left: 40%; top: 20%;}
.content h2 {
  font-size: 54px;
  margin-bottom: 39px;
}

.content ul {
  list-style: none;
}

.content li {
  position: relative;
  margin-bottom: 18px;
  font-size: 19px;
  line-height: 1.6;
  display: flex; flex-direction: row; gap: 20px; align-items: center;
}
.content li i{ color: #eaff3a;}

#eventtitle{ font-size: 44px; color: var(--heading-color); text-align: center; margin: 133px 0 50px 0;}




#card-wrapper {
  display: flex;
  gap: 30px;
  justify-content: space-between; flex-wrap: wrap;
}

/* outer green shape */
.card {
  width: 289px;
height: 311px;
  border-radius: 
    31% 27% 15% 23% /
    21% 28% 47% 36%;
    overflow: hidden; position: relative;
    transition: 0.8s;
     

}
.topborder{ box-shadow: -8px -10px 0px 0px #b1bd32;}
.bottomborder{   box-shadow: 6px 10px 0px 0px #6a7531;
}
/* inner image */
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.8s;
}
.card::nth-child(odd) { border: #193898 solid 5px;}
.card:hover img{ transform: scale(1.1);}
.card:hover{ border-radius: 10px; box-shadow: none;}
/* dark overlay */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 42%);
}

/* text */
.card h5 {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
text-align: center;
  font-size: 20px;
  z-index: 2;
}

#iconsbox{ display: flex; justify-content: space-around; margin: 80px 0 0 0;}




/* SECTION */
.testimonial-section {
  position: relative;
  padding: 127px 0;
  text-align: center;
  background: #dfe9ff;
  border-radius: 92% / 20%;
}

.testimonial-section span {
  color: #3c4a6c;
  margin-bottom: 14px; display: block;
  font-size: 24px;
}

.testimonial-section h2 {
  font-size: 49px;
  color: #3c4a6c;
}

/* SLIDER */
#testimonials{ width: 1024px !important; margin: 63px auto 0 auto;  border-radius: 18px; height: auto !important;}
#testimonials li{ height: auto !important; border-radius: 18px; margin: 0 15px 0 0;}
/* CARD */
.testimonial-card {
  background: #fff;
  display: flex;
 
  gap: 34px;
  padding: 66px 74px; 
}


.user {
  width: 140px;
  height: 160px;
overflow: hidden;

  border-radius:
    60% 40% 55% 45% /
    55% 60% 40% 45%;
}


/* CONTENT */
.testi {
  display: flex; gap: 35px; text-align: left;
}

.testi  i{ color: #d6e293; font-size: 65px;}
.testicnt{ display: flex; flex-direction: column; color: #2f2f2f; font-size: 18px; width: 600px; line-height: 28px;}

.name{ display: flex; flex-direction: column; margin: 30px 0 0 0; font-size: 15px;}
.name h6{ font-size: 18px; color: var(--heading-color);}
/* NAV BUTTONS */
.next,.prev{ position: absolute; top: 60%; color: #5f6c8b; font-size: 35px;}
.next{ right: 5%;}
.prev{ left: 5%;}



#features-section {
  padding: 153px 0;
  background:url(../images/featursbg.jpg) repeat;
}

#features-section .container {
  display: flex;
  align-items: center; justify-content: space-between;
  gap: 40px;
}

/* Left text */
.features-text {
  max-width: 420px; display: flex; flex-direction: column;
}

.features-text h2 {
  font-size: 42px;
  margin: 40px 0 30px 0;
}

.features-text p {
  font-size: 19px;
  line-height: 1.7;
  color: var(--text-color);
}

/* Circles layout */
.units-wrapper {
  position: relative;
  width: 771px; height: 509px;
}

.unit {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  color: #fff;
  text-align: center;
  padding: 22px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.unit-no {
  font-size: 19px;
  margin: 6px 0; display: flex; justify-content: center; gap: 9px; align-items: center;
}

.unit-no h4 {
  font-size: 36px;
}

.unit small {
  font-size: 16px;
  line-height: 1.4; text-transform: uppercase;
}

/* Colors */
.red { background: #f54a1c; top: 0; left: 0; width: 264px; height: 264px; }
.blue2 { background: #12a7e5; top: 53px; left: 38%; width: 220px; height: 220px; }
.purple { background: #b84be8; top: 60px; right: 0; width: 229px; height: 229px; }
.green2 { background: #7a8b2f; bottom: 0; left: 130px; width: 229px; height: 229px; }
.yellow { background: #ffb703; bottom: 20px; right: 190px;  width: 204px; height: 204px;}
.cursor2{position: fixed; width: 10px; height: 10px; background:var(--green-color); border-radius:100%;
 left: 0; top: 0; pointer-events: none; transform: translate(-50%, -50%);transition: .15s;}
/*content part end*/

/*innerpage content*/

#hero {
  position: relative;
  height: 344px;
  background:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
    #626c2c;
  background-size: 40px 40px;

}

.page-title {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
   margin: 87px 0 0 0;
}

.breadcrumb {

  color: #fff;
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 15px;
  margin: 15px 0; text-transform: capitalize;
}

.breadcrumb a{ color: var(--white-color);}

#hero h1 {
  color: #fff;
  font-size: 46px;
  text-transform: capitalize;
 
}

/* Decorative icons */
 .icon2 {
  position: absolute;
  z-index: 1;
}

.sun {
  top: 30px;
  left: 40px;
  width: 70px;
}

.rainbow {
  left: 120px;
  top: 160px;
  width: 90px;
}

.balloon {
  right: 60px;
  top: 60px;
  width: 80px;
}

.tree {
  right: 120px;
  bottom: -120px;
  width: 90px; opacity: 0.6;
}

/* Wave bottom */

#hero::before {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 100%;
  height: 98px;
  background:url(../images/footer-sea.jpg);
   background-size: cover;
}


#contents{ margin: 136px 0 150px 0; font-size: 17px; color: var(--text-color); line-height: 32px;}

/* Heading */
.title {
  font-size: 52px;
  line-height: 1.2;
  margin-bottom: 20px; text-align: center;
}

/* Paragraph */
.subtitle {
  max-width: 960px;
  margin: 0 auto;
  line-height: 32px; text-align: center;
}

/* Images */


.image-card {
  margin: 60px 0;
}


.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#contents  .books-grid{ gap: 27px;}
#contents .book-card{ border-radius: 47% 25% 27% 29% /
    19% 26% 24% 39%; background: #e9e9e9; display: flex; flex-direction: column; width: 291px; padding: 56px 25px 10px 26px;}
#contents .book-card .book-img{ width: 240px; height: 340px; border-radius: 0;}
#contents .book-card figcaption{ margin: 15px 0; background-image: none; color: var(--green-color); line-height: 20px;}
#contents .book-card figcaption a{ color: var(--green-color); font-size: 16px;}

#pagination{ clear:both; margin-top:55px; width:100%; float:left;}
ul.pagination{width:auto;text-align:center;margin:0px auto; font-size:12px; clear:both; display:table;}
.pagination li{float:left}
.pagination a{text-decoration:none;color:#666;background:#fff;padding:0px 13px;display:inline-table;border:solid 1px #ccc;margin:0 2px 0 0;}
.pagination a:hover{background:var(--green-color);color:#fff; border:solid 1px var(--green-color); }
.pagination .active a{ background:var(--green-color); color:#FFF; border:solid 1px var(--green-color);}



.rg-image-wrapper{position:relative;min-height:20px;display:flow-root;}
.rg-image{position:relative;text-align:center;line-height:0px;background:#FFFFFF; border-radius:10px; overflow:hidden;}
.rg-image img{max-height:100%;max-width:100%;}
.rg-image-nav a{display:none}
.rg-caption {text-align:center;position:relative; color:#000000; clear:both; font-size:16px; margin:10px 0 15px 0; font-weight:bold; text-transform: uppercase;}
.es-carousel-wrapper{padding:0 26px 40px 34px;position:relative;}
.es-carousel{overflow:hidden;}
.es-carousel ul{display:none; margin:0;}
 .es-carousel ul li, #contents .es-carousel ul li{height:100%;float:left;display:block; padding-left:0;}
.es-carousel ul li:after, #fixed-box .es-carousel ul li:after, #fixed-box3 .es-carousel ul li:after { display:none;}
.es-carousel ul li a{display:block;border-style:solid;border-color:#dfdfdf;opacity:0.8;-webkit-touch-callout:none;-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.es-carousel ul li.selected a{border-color:var(--green-color);opacity:1.0;}
.es-carousel ul li a img{display:block;border:none;max-height:100%;max-width:100%;}
.es-nav span{position:absolute;top:38%;left:0;background:transparent url(../images/nav_thumbs.png) no-repeat top left;width:19px;height:26px;
margin-top:-13px;text-indent:-9000px;cursor:pointer;opacity:0.8;}
.es-nav span.es-nav-next{right:0;left:auto;background-position:top right;}
.es-nav span:hover{opacity:1.0;}

#productimg-main{ float:left; width:500px; margin:0 82px 0 0; overflow: hidden; border-radius: 15px;}
#book-details h1{ font-size: 32px; text-transform: uppercase;  margin: 0 0 67px 0;}
#book-details h2{ font-size: 24px; margin: 40px 0 20px 0;}
#book-videos{ display: flex; flex-wrap: wrap; gap: 20px; margin: 80px 0 0 0;}
.books-video{ width: 100%; height: 225px;}
#book-videos div{ width: 403px;}
#book-videos figcaption{ display: flex; justify-content: center; align-items: center; height: 60px; line-height: 17px; font-size: 16px; background: #6d7833; border-radius: 0% 0% 27% 29% /
    19% 26% 24% 39%; color: var(--white-color); padding: 0 20px; text-align: center;}
    #book-details ul{ display: table;}
#book-details ul li{ padding: 0 0 0 20px; position: relative;}
#book-details ul li::after{ width: 6px; height: 6px; background: #626c2c; border-radius: 100%; content: ""; position: absolute; left: 0; top: 16px;}

.career-form {
  padding: 60px 45px; max-width: 890px; margin: 0 auto;   box-shadow: 0px 0px 19px 0px rgba(183, 183, 183, 0.3); box-sizing: border-box; border-radius: 15px;

}



.intro {
  margin-bottom: 30px;
  font-size: 16px;
  color: #333;
}

.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 25px;
}

.field {
  display: flex;
  flex-direction: column; 
  width: 387px
}
.field  span{ color: #f10404; font-size: 14px;}
.field.full {
width: 100%;
}

label {
  margin-bottom: 8px;
  font-size: 14px;
  color: #111;
}

input,
textarea {
  padding: 14px 15px;
  border: 1px solid #dbe1ff;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  font-family: 'Aeonik';
}

textarea {
  min-height: 100px;
  resize: none;
}

input::placeholder,
textarea::placeholder {
  color: #b3b7c6;
}



.field  small {
  margin-top: 6px;
  color: #ff3b3b;
  font-size: 12px;
}

.submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 19px 110px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(90deg, #6a7531, #9e9d36);
  color: #fff;
  font-size: 15px; letter-spacing: 1px;
   font-family: 'Fredoka SemiBold'; text-transform: uppercase;
  cursor: pointer; 
}
.submit-btn:hover{ background:#6a7531; transition: 1s;}



ul.tabs {list-style:none;width:100%; display: flex; justify-content: center; gap: 80px;}
ul.tabs li {float:left;overflow:hidden;position:relative; border-top:2px solid var(--white-color);}
ul.tabs li a {text-decoration:none; color: #747474;display:block;font-size:16px;outline:none;padding:15px 0; text-align: center; text-transform: uppercase; }
ul.tabs li a:hover{ color:#193898;}
 html ul.tabs li.active {background:#fff;border-top:2px solid #193898; border-bottom:2px solid #193898;}
 html ul.tabs li.active a:hover{ color:#193898;}
  html ul.tabs li.active a{ color: #193898;}
.tabContainer {overflow:hidden;clear:both;width:100%;background:#fff; margin: 86px 0 0 0;}
.tabContent {font-size:16px;}



.gal_listed{margin:0px 0 0 0;padding:0; display: flex; flex-direction: row;  flex-wrap: wrap; gap: 20px;}
.gal_listed li{list-style:none;float:left;width:403px;position:relative; overflow: hidden; border-radius: 15px; border-radius: 21% 27% 15% 12% /
    25% 35% 47% 46%; 
}



.inn_gal_img{width:403px;height:261px; }
.inn_gal_txt{display:none;height: 100%;position: absolute;top: 0;width: 100%;z-index:999; left:0;}
.gal_listed li:hover .inn_gal_txt{ background: url(../images/zoom.png) no-repeat center 60px; background-size:45px;display:block;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);-moz-opacity: 0.9;-khtml-opacity: 0.9;opacity: 0.9;color:#fff; text-align:center; padding:130px 0 0 0; box-sizing:border-box; line-height:24px; font-size: 17px;}
[class^='imghvr-'],
[class*=' imghvr-'] {position: relative;display: inline-block;margin: 0px;max-width: 100%;color: #fff;overflow: hidden;-webkit-backface-visibility: hidden;backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;-webkit-transform: translateZ(0);transform: translateZ(0);}
[class^='imghvr-'] > img,
[class*=' imghvr-'] > img {vertical-align: top;max-width: 100%;}
[class^='imghvr-'] figcaption,
[class*=' imghvr-'] figcaption { background:var(--green-color); padding: 30px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;color: #ffffff; margin-top: 0; }
[class^='imghvr-'] a,
[class*=' imghvr-'] a {position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 1; }
[class^='imghvr-push-']:hover figcaption,
[class*=' imghvr-push-']:hover figcaption {-webkit-transform: translate(0, 0);transform: translate(0, 0);}
[class^='imghvr-'],
[class*=' imghvr-'],
[class^='imghvr-']:before,
[class^='imghvr-']:after,
[class*=' imghvr-']:before,
[class*=' imghvr-']:after,
[class^='imghvr-'] *,
[class*=' imghvr-'] *,
[class^='imghvr-'] *:before,
[class^='imghvr-'] *:after,
[class*=' imghvr-'] *:before,
[class*=' imghvr-'] *:after {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-transition: all 0.35s ease;transition: all 0.35s ease;}
/* imghvr-fade-*
   ----------------------------- */
[class^='imghvr-fade'] figcaption,
[class*=' imghvr-fade'] figcaption {opacity: 0;}
[class^='imghvr-fade']:hover > img,
[class*=' imghvr-fade']:hover > img {opacity: 0;}
[class^='imghvr-fade']:hover figcaption,
[class*=' imghvr-fade']:hover figcaption {opacity: 1;}
[class^='imghvr-fade']:hover > img,
[class*=' imghvr-fade']:hover > img,
[class^='imghvr-fade']:hover figcaption,
[class*=' imghvr-fade']:hover figcaption {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px);}
/* imghvr-push-up
   ----------------------------- */
.imghvr-push-up figcaption {-webkit-transform: translateY(100%);transform: translateY(100%);}
.imghvr-push-up:hover > .inn_gal_img {-webkit-transform: translateY(-100%);transform: translateY(-100%);}
.tabContent #book-videos{ margin: 0;}
#contents #testimonials{ width: 100% !important; margin: 0; }
#contents #testimonials ul{ display: flex; flex-wrap: wrap; gap: 30px;}
#contents #testimonials li{ width: 610px; margin: 0; }
#contents .testimonial-card{ flex-direction: column; background: #fcffe9; padding: 58px 42px; border-radius: 15px;   box-shadow: 6px -8px 0px 0px #ebf1c9;
}
#contents .testi{ flex-direction: column; gap: 14px;}
#contents .testicnt{ width: 100%;}
#contents .name{ flex-direction: row; gap: 20px; align-items: center;}
#contents .user{ width: 90px; height: 105px;}
#catalog{ display: flex; gap: 20px; flex-wrap: wrap;}
#catalog div{ width: 403px; display: flex; flex-direction: row;   box-shadow: -2px 5px 23px 0px rgba(205, 205, 205, 0.3); padding: 25px; gap: 20px;}
#catalog div > div{ display: flex; flex-direction: column; box-shadow: none; padding: 0; gap: 5px;}
#catalog div h4{ height: 61px; display: flex; align-items: center; line-height: 21px; font-size: 17px;}
#catalog div i{ font-size: 27px; margin-top: 14px; color: #bfbfbf;}
#catalog div a{ background: var(--green-color); border-radius: 50px; width: 80px; text-align: center; font-size: 12px; color: var(--white-color); }
#catalog div a:hover{ background: #94a343;}
.input-container { width: 319px; position: relative; height: 73px;}
.textarea-container{ width: 100%; position: relative;}
.contact-frm{display:flex; flex-direction: row;  width: 658px; box-sizing: border-box;  flex-wrap: wrap; gap: 20px; float: left;}
#learning{ float: right;}
.inputform-cover{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content:space-between;}
.contact-frm input{ width:100%;padding:22px 25px; box-sizing:border-box; outline:none; color:var(--text-color);font-size:14px; border-radius: 10px; border: #c3c3c3 solid thin; font-family: 'Aeonik';}
.contact-frm span{ color: rgb(255, 0, 0); font-size: 13px;}
.contact-frm textarea{ width:100%; padding:27px 30px; box-sizing:border-box; outline:none; color:var(--text-color); height:142px;  overflow:hidden; resize:none; font-size:14px; font-family: 'Aeonik';   border-radius:16px;  border: #c3c3c3 solid thin;}
.contactfrm-cover{ width:313px; height:87px; text-align:left;}
.contact-frm .captha{ width:170px; float:right; margin-top:0;}
.contact-frm #frmsubmit{ background: #9DAF41;
background: linear-gradient(266deg,rgba(157, 175, 65, 1) 0%, rgba(106, 117, 49, 1) 100%); color:var(--white-color);  cursor:pointer; font-size:16px;   font-family: 'Fredoka SemiBold'; border: none; }
.contact-frm #frmsubmit:hover{ background: #9DAF41; color: var(--white-color);}
#rc-imageselect, .g-recaptcha {transform:scale(0.78);-webkit-transform:scale(0.78);transform-origin:0 0;-webkit-transform-origin:0 0;}
.cnticon{ width: 53px; height: 53px; border-radius: 100%; display: flex; justify-content: center; align-items: center; background:#193898; transition: 0.6s;}
#address-cover{ display: flex; flex-direction: row; justify-content: space-around; margin: 30px 0; clear: both;}
#address-cover .contact-detailmain{ text-align: center; width: 395px; margin: 110px 0; padding: 40px ; font-size: 17px; color: var(--heading-color); display: flex; flex-direction: column; border: #cbcbcb solid thin; border-radius: 16px; align-items: center; line-height: 28px; transition: 1s;}
#address-cover .contact-detailmain a{ font-size: 17px; color: var(--text-color); }
#address-cover .contact-detailmain i{ font-size: 17px; color:#ffffff}
#address-cover .contact-detailmain h4{ margin: 14px 0; font-size:19px; color: #282727;}
#enquire{ font-size: 31px; margin-bottom: 35px;}
#mapcnt{ width:100%; height:500px; -webkit-filter: grayscale(80%); /* Safari 6.0 - 9.0 */
   filter: grayscale(80%); clear: both;}
#mapcnt iframe{ width:100%; height:100%;}
#address-cover .contact-detailmain:hover { border: var(--green-color) solid thin;}
#address-cover .contact-detailmain:hover .cnticon{ background: var(--green-color);}


@-webkit-keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-18px);
    transform: translateY(-18px);
  }

  50% {
    -webkit-transform: translateY(-14px);
    transform: translateY(-14px);
  }

  100% {
    -webkit-transform: translateY(-18px);
    transform: translateY(-18px);
  }
}

@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-18px);
    transform: translateY(-18px);
  }

  50% {
    -webkit-transform: translateY(-14px);
    transform: translateY(-14px);
  }

  100% {
    -webkit-transform: translateY(-18px);
    transform: translateY(-18px);
  }
}

@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-18px);
    transform: translateY(-18px);
  }
}

@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-18px);
    transform: translateY(-18px);
  }
}

.hvr-bob {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}

#who-we-are h2::after{ content: ""; width: 46px; height: 41px; background: url(../images/star1.jpg); position: absolute; right: 70px; top: -70px;}
#who-we-are h2::before{ content: ""; width: 38px; height: 34px; background: url(../images/star2.jpg); position: absolute; left: 70px; bottom: 0;}

#who-we-are h2::after, #who-we-are h2::before, #cloud, #iconsbox {
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .1s;
  animation-delay: 0s, .1000s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}

.box-content {
	display:flex;
  align-items: center;
	padding:29px;
	width: 100%;
	height: 100%;
	background: var(--green-color);
	color:#ffffff; font-size: 15px; line-height: 24px;
}

.box-overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	z-index:1000;
}

a.link {
	display:block;
	width: 100%;
	height: 100%;		
	position: absolute;
	top:0;
	left:0;
	z-index:1005;		
}

/* custom css styling */
#md-cover{ display: flex; flex-direction: row; justify-content: space-between; gap: 56px;}
#md-cover strong{ color: var(--green-color);}
.mission-box{ display: flex; flex-direction: row; gap: 45px; margin: 0 0 54px 0;}
.mission-box h2{ font-size: 30px; margin: 10px 0 20px 0;}
.mission-box ul li{ line-height: 28px; margin: 0 0 20px 0; position: relative; padding: 0 0 0 20px;}
.mission-box ul li::after{ content: ""; width: 6px; height: 6px; background: var(--green-color); border-radius: 100%; position: absolute; left: 0; top: 12px;}
/*innerpage content end*/



/*footer section*/

footer {
  background: #f0f9ca;
  padding: 60px 0 33px 0;
  color: #5b5b4a;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-brand  {
   margin-bottom: -120px; margin-top: -50px;
}
.footer-contact h3 {
  font-size: 30px;
  margin-bottom: 5px;
}
.footer-contact a{ color: #5c6242;}
hr {
  border: none;
  border-top: 1px solid #cdda98;
  margin: 46px 0;
}
/* Links section */
.footer-links {
  display: flex;
  justify-content: space-between;
  gap: 40px; margin: 80px 0 0 0;
}
.footer-links h4 {
  font-size: 25px;
  margin-bottom: 24px;
  color: #6a6a45;
}
.footer-links ul {
  list-style: none;
  padding: 0;
}
#links{ display: flex; flex-direction: row; flex-wrap: wrap; width: 600px;}
#links li{ width: 200px;}
#links li a, .footer-links li a{ color: var(--footer-color); font-size: 16px;}
.footer-links li {
  font-size: 15px;
  margin-bottom: 10px;
  cursor: pointer;
}
.footer-links li:hover {
  text-decoration: underline;
}
.location p {
  font-size: 15px;
  line-height: 1.6; color: var(--footer-color);
}
#isbn{ display:block}

/* Bottom */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: var(--footer-color);
}
.footer-bottom  a{ color: #5d682d;}
.footer-bottom  a:hover{ text-decoration: underline;}
/*footer section end*/

@media (max-width:1250px){
.container{ width:992px;}
nav, #quote, #innovation-img, .features-text img, #learning, .footer-brand{ display: none;}
.bannercaption h1, .bannercaption h1 span{ font-size:6vw;}
.bannercaption h1{ line-height: 6vw;}
.features-text{ max-width: 100%;}
#mobile_menu{display:block; color: var(--green-color); font-size: 25px;}
#mobile_drop{display:block;position:relative;background:var(--green-color); margin: 30px 0 0 0;}
#mobile_drop_fix{display:block;padding:20px 0px;}
#mobile_drop_fix ul li{list-style:none;display:block}
#booking{ margin:42px 60px;}
#mobile_drop_fix ul li ul li{margin:0 0 0 25px;}
#mobile_drop_fix ul li ul li a{border-bottom:0!important}
#mobile_drop_fix a{display:block;color:#fff;display:block;-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;text-decoration:none;padding:7px 0; font-size:16px; text-transform:capitalize;}
#mobile_drop_fix a:hover{-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;}
.top-bar .container div{ margin: 0 0 0 80px;}
.books-grid{gap: 53px;}
#aboutdesc p{ width: 570px;}
#testimonials{ width: 904px !important;}
.prev{ left: 0;}
.next{ right: 0;}
.testicnt{ width: 497px;}
#features-section .container{ flex-direction: column;}
#book-videos div{ width: 486px;}
.books-video{ height: 265px;}
.gal_listed li, .inn_gal_img{ width: 317px;}
.inn_gal_img{ height: 206px;}
#contents #testimonials li{ width: 100%;}
#catalog div{ width: 483px;}
#address-cover .contact-detailmain{ width: 305px;}
}



@media (max-width:992px){
.container{ width:768px;}
#socials, #who-we-are h2::before, #who-we-are h2::after, #hightilesimg, #highlights1, .footer-brand, #isbn{ display: none;}
#aboutdesc p, .message-card, #quotes, #catalog div, .contact-frm{ width: 100%;}
.hero-content h4{ font-size: 20px; background: none; padding: 0;}
.hero-content h1{ font-size: 50px; line-height: 57px;}
.section-title{ background: none;}
.book-cover{ width: 353px; background-position: center; background-repeat: no-repeat;}
.book-card figcaption{ margin-left: 47px; margin-bottom: 0;}
#who-we-are h2{ font-size: 55px;}
#aboutdesc, #address-cover, .mission-box{ padding: 0; flex-direction: column; align-items: flex-start;}
.btn{ margin: 30px 0 0 0;}
.pill{ margin-bottom: 18px;}
#quotes li, #productimg-main, #address-cover .contact-detailmain{ margin-right: 0; width: 100%;}
#card-wrapper{ gap: 50px;}
#testimonials{ width: 700px !important;}
.testicnt{ width: 297px;}
.testimonial-section h2{ font-size: 44px;}
#links{ width: 440px;}
#links li{ width: 146px;}
#contents .book-card{ width: 361px; align-items: center;}
#productimg-main{ float: none; margin-bottom: 50px;}
#book-videos div{ width: 374px;}
.books-video{ height: 205px;}
.field{ width: 326px;}
.gal_listed li, .inn_gal_img{ width: 374px;}
.inn_gal_img{ height: 243px;}
.input-container{ width: 373px;}
#address-cover{ gap: 30px; margin: 60px 0;}
.contact-frm{ float: none;}
#address-cover .contact-detailmain{ margin: 0;}
#contents .book-card .book-img{ width: 310px; height: 439px;}
.box{ height: 438px;}
.mission-box{ gap: 15px;}
}



@media (max-width:768px){
.container{ width:448px;}
#mailnone, .section-title::after, #iconsbox img, .testi i, .icon2 { display: none;}
.top-bar .container{ justify-content: flex-end;}
#isbn{ display:block}
.hero-content h1{ font-size: 36px; line-height: 45px;}
.hero-content h4{ font-size: 17px;}
.testicnt, .units-wrapper, #book-videos div, .field, .submit-btn, .input-container{ width: 100%;}
.hero-content{ width: 380px; background-size: contain;}
.books-grid{ justify-content: center;}
#who-we-are h2{ font-size: 48px;}
.counter-grid{ flex-direction: column; gap: 52px;}
.counter-wrap{  background: #0b2c6a; background-image: none;}
.quote.left{ left: 0;}
.quote{ font-size: 39px;}
.message-card{ padding: 70px 50px;}
.quote.right{ right: 0;}
.message-card p{ font-size: 19px;}
.person{ width: 60px; height: 60px;}
.author, .footer-top, .footer-links, ul.tabs, #md-cover{ flex-direction: column;}
ul.tabs{ gap: 0;}
#card-wrapper{ justify-content: center;}
#testimonials{ width: 85% !important;}
.testimonial-card{ flex-direction: column; padding: 62px 28px;}
.unit{ position: static;}
.units-wrapper{ height: auto; display: flex; align-items: center; flex-direction: column; gap: 20px;}

.red,
.blue2, 
.purple, 
.green2, 
.yellow
{ width: 250px; height: 250px;}
.footer-top{ align-items: flex-start; gap: 30px;}
#hero{ height: 324px;}
#hero h1, .title{ font-size: 46px;}
#contents .book-card .book-img, .gal_listed li, .inn_gal_img{ width: 100%; height: auto; line-height: 0;}
.books-video{ height: 245px;}
.inn_gal_img{ height: auto;}
#contents .book-card figcaption{ width: 100%; padding: 0 32px;}

}


@media (max-width:448px){
.container{ width:100%; padding: 0 25px; box-sizing: border-box;}
.hero-content h4{ display: none;}
#logo{ width: 182px; height: 105px;}
.top-bar .container div{ justify-content: flex-end; margin: 0;}
.top-left h4{ font-size: 16px;}
.hero-content{ background-size: contain; width: 360px; padding-left: 30px;}
.hero-content h1, .testimonial-section span{ font-size: 20px; line-height: 25px;}
.section-title, #message-section h2{ font-size: 34px;}
.girl{ width: 39%; top: -240px;}
.books-section{ margin: 310px 0 0 0;}
#who-we-are h2, .counter-item h3, .content h2, .testimonial-section h2{ font-size: 37px;}
.pill{ font-size: 17px; padding: 16px 53px;}
#aboutdesc p{ font-size: 17px;}
.author span{ font-size: 14px;}
#cloud{ width: 30%;}
#testimonials, #links{ width: 100% !important;}
#testimonials li{ margin-right: 0;}
.next, .prev{ position: static;}
.red,
.blue2, 
.purple, 
.green2, 
.yellow
{ width: 230px; height: 230px;}
.footer-contact h3{ font-size: 22px;}
.footer-bottom, #contents .name{ flex-direction: column; gap: 20px;}
#hero{ height: 274px;}
#hero h1, .title{ font-size: 34px;}
.books-video{ height: 208px;}
#contents .testicnt{ text-align: center;}
#book-details h1{ font-size: 26px;}
.box{ height: 438px;}
.mission-img img{ width: 100%;}
}