/* =========================
   1. BASIC RESET
   ========================= */
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, strong, 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;
    }

/* Set default box-sizing for all elements */
*, *::before, *::after {
    box-sizing: border-box;
}

    /* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block; }
body {
    line-height: 1; }
ol, ul {
    margin: 0 0 1.5em 1.5em;
    padding: 0;
}
ol {  list-style: decimal;}
ul { list-style: disc;}
    
blockquote, q {
    quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;}
table {
    border-collapse: collapse;
    border-spacing: 0; }
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clearfix
{ display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */ 

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
:-moz-placeholder{
	color:#aaa !important;
	font-style:italic;
	line-height:20px;
}

::-webkit-input-placeholder{
	color:#aaa !important;
	font-style:normal;
	line-height:20px;
}

/* =========================
   2. GLOBAL ELEMENTS
   ========================= */

body {
    background-color: #f7fafc;
    color: #363636;
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 15px;
    line-height: 1.6;
}

/* Make images responsive */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

blockquote{
	border-radius: 10px;
    background: #eee;
    padding: 15px;
    margin: 30px auto;
    border: 1px solid #c8d0c8;
    font-size: 16px;
    font-style: italic;
    color: #000;
    position: relative;

}
blockquote p{
	margin:0;
	padding:0;
}

button::-moz-focus-inner {
    border:0;
    padding:0;
}
form, fieldset{
	padding:0;
	margin:0;
	border:none;
}


/* =========================
   3. TYPOGRAPHY
   ========================= */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 7px;
    line-height: 1.5;
}

h1 {
	font-weight:500;
	position:relative;
	font-size: 2em;
	color:#1a202c;
	text-decoration: none;
}
h2 {
	font-size:28px;
	color:#111;
	clear:both;
	font-weight:500;
}

h3 {
    font-weight: 500;
    font-size: 24px;
    margin:0 0 10px 0;
	color:#111;
}

h4 {
    font-weight: 500;
    font-size: 22px;
    color: #2d3748;
}

.fl{float: left;}
.fr{float: right;}

p { margin-bottom: 1.5em;}

b, strong { font-weight: bold;}

a {
    color: #2A3829;
    text-decoration: none;
}

a:visited {
	text-decoration:none;
}
a:hover, a:active{
	text-decoration:none;
}

ul.left {}
 
ul.right {
text-align: right ;
}

/* =========================
   7. FORMS, BUTTONS
   ========================= */

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {
    -webkit-appearance: none;
    color: var(--global-palette5);
    border: 1px solid var(--global-gray-400);
    border-radius: 3px;
    padding: 0.4em 0.5em;
    max-width: 100%;
    background: var(--global-palette9);
    box-shadow: 0px 0px 0px -7px rgba(0, 0, 0, 0);
}
input, select, optgroup, textarea, button {
    font-weight: 400;
    font-size: 17px;
    line-height: 1.6;
    margin: 0em 0;
}

button, .button, input[type="button"], input[type="reset"], input[type="submit"] {
    border-radius: 3px;
    background: #1a8917;
    color: #ffffff;
    padding: 0.4em 1em;
    border: 0;
    font-size: 1.1rem;
    line-height: 1.3;
    display: inline-block;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
}

button:visited, .button:visited, input[type="button"]:visited, input[type="reset"]:visited, input[type="submit"]:visited {
    background: #0E5F0C;
    color: #ffffff;
}

button:hover, input[type="submit"]:hover {
    background-color: #0E5F0C;
}


/* =========================
   4. HEADER, FOOTER, & CONTAINER
   ========================= */
.site-header, .site-footer {
    background: #f6f6f6;
    padding: 1em 0;
}

.container {
    max-width: 1140px; /* May be overridden dynamically in your customizer CSS */
    margin: 0 auto;
    padding: 0 1em;
}

.header{
	background-color: #fff;
	height: 10%;
}
.header-wrapper{
	width: 998px;
	margin: 0 auto;
	background-color: #fff;
}

.site-main-header{
	display: grid;
	grid-template-columns: auto auto;
}

.header-section { display:flex;     align-items: center;}
.site-header-section-right {justify-content: flex-end;}
.site-title {font-size: 1.5em;}
.logo{width:200px;margin-top: 10px;}
.search{margin-top: 10px;}
.nav{height: 10%;background-color: #00AEEC;}
.nav-wrapper{margin: 0 auto;width: 998px;}

.nav ul,.header ul,.sidebar ul,    .main-navigation .menu {
	list-style: none;
	list-style-type: none ;
	margin: 0;
	padding: 0;
}
.nav ul li,.header ul li{
	display: inline ;
	padding: 0px 10px 0px 10px ;
}
.nav ul li{
	padding: 0 20px;
}

.header-widget-area {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.widget_block.widget_search,
.header-widget-area .header-widget {
	box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
    margin-bottom: 0px;
    padding: 0px 0px;
}

.breadcrumbs {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.breadcrumbs a {
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.footer-layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-right ul {
  display: inline-flex;
  list-style: none;
  margin: 0 0 0em 0;
  font-size: 14px;
}

.footer-left p {
  margin-bottom: 0em;
  font-size: 14px;
}

.home.blog .breadcrumbs{
    background: #ddd;
    margin-bottom: 10px;
    padding: 5px 10px 0px;
}
.single-post .breadcrumbs{
	margin-bottom: 0.5rem;
}
#footer-menu a{ padding:5px 10px; }

/* =========================
   5. MAIN CONTENT AREA
   ========================= */
.site-content {
	margin: 0rem auto;
    background: #fff;
	padding: 1em;
}


/* Article (post) styling */
article {
    margin-bottom: 2em;
}
.entry-meta, .related-post-meta { font-size: 14px;}
/* =========================
   12. NAVIGATION DROPDOWNS
   ========================= */

.main-navigation ul li.menu-item>a {
    font-weight: 600;
    font-size: 15.6px;
	color: #dbd9d9;
	padding: 0.6em 1em;}

.main-navigation {display: inline-flex; }
.mobile-navigation { display: none;}
.mobile-menu-toggle { display: none;}
.main-navigation .menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation li.menu-item>a {
    display: block; 
    width: 100%; 
    text-decoration: none;
}

.submenu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 0.8rem;
  cursor: pointer;
}

.sub-menu {
  display: none;
  position: absolute;
  background: #fff;
  padding: 0.5rem;
  margin: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 100;
  list-style: none;
}

li:hover > .sub-menu,
li:focus-within > .sub-menu {
  display: block;
}

/* Mega menu styling */
.megamenu-parent > .sub-menu {
  width: 100%;
  left: 0;
  top: 100%;
  display: none;
}
.megamenu-parent:hover > .sub-menu,
.megamenu-parent:focus-within > .sub-menu {
  display: block;
}

.menu-item-has-children a {
  cursor: default;
}
.menu-item-has-children li a {
  cursor: pointer;
}


/* =========================
   6. SIDEBAR
   ========================= */
.sidebar {
    background: #fafafa;
    padding: 1em;
}

.widget_block{
  padding: 20px 12px;
  margin-bottom:25px;
  background: #fff;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .1);}
.related-posts h2,
.widget_block h2 {
    font-size: 21px;
}

.wp-block-latest-posts.wp-block-latest-posts__list li {
    padding: 5px 0px;
}



/* =========================
   8. COMMENTS AREA
   ========================= */
.comments-area {
    margin-top: 3em;
}
.comment-list {
    list-style: none;
    padding: 0;
}
.comment-list li {
    margin: 1.5em 0;
}

.comment-form-author,
.comment-form-url,
.comment-form-email,
.comment-form-comment{
	padding: 10px;
    border: 1px solid #eee8e8;
}
.comment-form-comment textarea{
	width: 100%;
    border: 1px solid #EEE;
}

/* =========================
   9. PAGE & POST NAV
   ========================= */
.pagination, .navigation {
    margin-top: 2em;
    text-align: center;
}
.pagination a, .navigation a {
    margin: 0 0.3em;
    text-decoration: none;
}
.pagination a:hover {
    text-decoration: underline;
}


.pagination .nav-links {
  border: 1px solid #efeeee;
  border-radius: 50rem;
  display: inline-block;
  padding: 5px 7px;
}

.page-numbers.current {
  display: inline-block;
  height: 2rem;
  width: 2rem;
  background: rgb(242, 241, 237);
  border-radius: 9999px;
}

.next.page-numbers,
.prev.page-numbers {
  font-size: 17px;
  text-decoration: overline;
  text-transform: uppercase;
}

.pagination .nav-links a.next:hover,
.pagination .nav-links a.prev:hover {
  text-decoration: overline;
}

.post-navigation .nav-links {
  border: 1px solid #efeeee;
  border-radius: 50rem;
  display: flex;
  justify-content: space-between;
}

.nav-next,
.nav-previous {
  border-radius: 21px;
  background: rgb(236, 240, 241);
  padding: 5px 25px;
  font-size: 15px;
}

.tag-links a {
  display: inline-block;
  background: rgb(240, 248, 255);
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  color: dodgerblue;
  font-size: 15.5px;
  font-weight: 600;
  margin-right: 8px;
  padding: 5px 6px 3px;
}



/* =========================
   10. UTILITY CLASSES
   ========================= */
.wp-block-table td, .wp-block-table th {
    border: 1px solid #dfdbdb;
}


/* -------------------------
   Additional Components
------------------------- */
.posted-on,
.updated-on,
.byline,
.cat-links {
  padding-right: 8px;
}



/* -------------------------
   Blog & Related Posts
------------------------- */
.frontpage-posts.list-view article,
.frontpage-posts.grid-view.columns-1 article,
.frontpage-posts.grid-view.columns-2 article,
.frontpage-posts.grid-view.columns-3 article,
.archive-layout-list article,
.archive-layout-grid.columns-1 article,
.archive-layout-grid.columns-2 article,
.archive-layout-grid.columns-3 article,
.blog-layout-list article,
.blog-layout-grid.columns-1 article,
.blog-layout-grid.columns-2 article,
.blog-layout-grid.columns-3 article,
.related-posts-wrapper.list-view article,
.related-posts-wrapper.grid-view.columns-1 article,
.related-posts-wrapper.grid-view.columns-2 article,
.related-posts-wrapper.grid-view.columns-3 article{
overflow: hidden;
background: #fff;
box-shadow:0 2px 15px -1px rgb(0 0 0 / 24%);
border-radius: 10px;}

.frontpage-posts.grid-view.columns-2,
.frontpage-posts.grid-view.columns-3,
.related-posts-wrapper.grid-view.columns-2,
.related-posts-wrapper.grid-view.columns-3,
.archive-layout-grid.columns-2,
.archive-layout-grid.columns-3,
.blog-layout-grid.columns-2,
.blog-layout-grid.columns-3 {
  display: flex;
  flex-wrap: wrap;
  gap: 1%;
}

.frontpage-posts.list-view .content,
.frontpage-posts.grid-view.columns-1 .content,
.frontpage-posts.grid-view.columns-2 .content,
.frontpage-posts.grid-view.columns-3 .content,
.related-posts-wrapper.list-view .content,
.related-posts-wrapper.grid-view.columns-1 .content,
.related-posts-wrapper.grid-view.columns-2 .content,
.related-posts-wrapper.grid-view.columns-3 .content,
.archive-layout-list .content,
.archive-layout-grid.columns-1 .content,
.archive-layout-grid.columns-2 .content,
.archive-layout-grid.columns-3 .content,
.blog-layout-list .content,
.blog-layout-grid.columns-1 .content,
.blog-layout-grid.columns-2 .content,
.blog-layout-grid.columns-3 .content {
  padding: 15px;
}

.frontpage-posts.list-view .wp-block-columns {
  padding: 0px 12px 0px 0px;
  margin-bottom: 25px;
  background: #f2f2f2;
  border-radius: 5px;
  align-items: center !important;
  border: 1px solid #ddd;
}

.frontpage-posts.list-view .wp-block-columns:hover{
  box-shadow: 0 2px 10px rgb(0 0 0 / 29%);
}

:where(.wp-block-columns) {
  margin-bottom: 1.75em;
  gap: 1rem;
}

.frontpage-posts.grid-view.columns-2 article,
.related-posts-wrapper.grid-view.columns-2 article,
.archive-layout-grid.columns-2 article,
.blog-layout-grid.columns-2 article {
  width: 49%;
}


.frontpage-posts.grid-view.columns-3 article,
.related-posts-wrapper.grid-view.columns-3 article,
.archive-layout-grid.columns-3 article,
.blog-layout-grid.columns-3 article {
  width: 32.63%;
}

.archive-layout-list article,
.frontpage-posts.list-view article,
.related-posts-wrapper.list-view article,
.blog-layout-list article {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1%;
}

.archive-layout-list article .post-featured-image,
.related-posts-wrapper.list-view .related-post-thumbnail,
.frontpage-posts.list-view article .post-featured-image,
.blog-layout-list article .post-featured-image {
  width: 40%;
  margin-bottom: 0;
}

.archive-layout-list .content,
.related-posts-wrapper.list-view .content,
.frontpage-posts.list-view article .content,
.blog-layout-list article .content {
  width: 59%;
}

.related-posts-wrapper.grid-view.columns-1 article,
.blog-layout-grid.columns-1 article {
  max-width: 850px;
  margin: 0 auto 2em;
}

.related-posts{
	background: rgb(236 240 241 / 29%);
	padding: 10px;
	margin: 20px 0px;
	border: 1px solid #efeeee;
	border-radius: 1rem;}

.related-post-title {
	line-height: 1.3;
    font-weight: 500;
    font-size: 23px;
    margin: 0 0 7px 0;
}

.related-post-thumbnail,
.post-featured-image {
  display: flex;
  margin-bottom: 15px;
  overflow: hidden;
  align-items: center;
  justify-content: space-around;
}

.frontpage-posts.list-view .related-post-thumbnail, 
.frontpage-posts.list-view .post-featured-image, 
.frontpage-posts.list-view p {
    margin-bottom: 0px;
}


.archive-layout-grid.columns-1 .post-featured-image, 
.blog-layout-grid.columns-1 .post-featured-image {
  height: 400px;
}

.archive-layout-grid.columns-2 .post-featured-image,
.blog-layout-grid.columns-2 .post-featured-image {
  height: 300px;
}

.archive-layout-grid.columns-3 .post-featured-image,
.blog-layout-grid.columns-3 .post-featured-image {
  height: 200px;
}

.archive .entry-title,
.blog .entry-title {
  font-size: 22px;
  font-weight: 500;
}

.cat-links {
  border-radius: 5px;
  padding: 3px 15px;
  background: rgb(243 255 240);
}

.cat-links a {
  color: #043D03;
  font-weight: 600;
  letter-spacing: 1px;
}

.archive .entry-summary,
.blog .entry-summary {
  padding-top: 11px;
}

.post-featured-image img {
	width: 100%;
    aspect-ratio: 16 / 14;
    object-fit: cover;
    height: auto;
}

.load-more-container {
  text-align: center;
}

.margin_top {
  margin-top: 20px;
}

.box1, .box2, .box3 {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.box-button span {
  border-radius: 23px;
  color: #fff;
  background: rgb(26, 188, 156);
  margin-right: 7px;
  padding: 13px 18px;
}

.box-button p {
  border-radius: 21px;
  padding: 20px;
  background: rgb(236, 240, 241);
  margin-bottom: 0;
}

/* Single post typography */
.single-post h1,
.single-post h2,
.single-post h3 {
  color: #2f4552;
}

.single-post .entry-title {
  line-height: 2.4rem;
  font-size: 30px;
  font-weight: 500;
}

.single-post article p,
.single-post article summary,
.single-post article li {
  font-size: 18px;
}

.single-post article li {
  margin-bottom: 10px;
}
.single-post .entry-meta
{
	display: inline-block;
    padding: 0px 5px;
    background: rgb(240, 248, 255);
    border-bottom: 1px solid rgb(195 198 201);
    margin-bottom: 10px;
}
.single-post .post-featured-image img{
    border-radius: 10px;
	aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* =========================
   11. COLLAPSIBLE & DETAILS
   ========================= */
.content_collapse details {
  margin-bottom: 0;
  border-top: 2px solid rgb(242, 242, 242);
  border-radius: 0;
  padding: 0;
}
.content_collapse details ul {
  margin: 0 0 1.5em 2.8em;
}

.add_box ul {
  margin-left: 1.5em;
}

.faq, .para_box {
  background: rgb(240, 248, 255);
  padding: 1.8rem 2.4rem;
  border-radius: 1.2rem;
  margin-bottom: 10px;
}

.faq summary strong {
  font-weight: normal;
}

.wp-block-details {
  border-radius: 15px;
  margin-bottom: 8px;
  background: #fff;
}

.content_collapse .wp-block-details summary {
  font-size: 17px;
  padding: 15px 20px;
  cursor: pointer;
}

.wp-block-details p {
  padding: 0 20px 13px;
}

.wp-block-image :where(figcaption) {
  border-bottom: 1px solid rgb(242, 242, 242);
  text-align: center;
}

.add_box_last,
.add_box {
  padding: 5px 0;
  border-top: 2px solid rgb(242, 242, 242);
  display: flex;
  align-items: center !important;
  gap: 0.5em;
  margin: 0 auto;
}




@media screen and (max-width: 719px) {
    .site-content {
        width: auto;
    }
}


/* =========================
   13. RESPONSIVE & MOBILE STYLES
   ========================= */
@media screen and (max-width: 768px) {
  /* Hide primary nav & show mobile toggle */

  .main-navigation {
    display: none;
  }
  .mobile-menu-toggle {
	height: 45px;
    display: inline-block;
    background-color: #0e4a25;
    color: #fff;
    padding: 0.5rem 1rem;
    border: none;
    cursor: pointer;
  }
 .mobile-menu-toggle:hover {background-color: #0e4a25;}
	
  .mobile-navigation {
    display: none;
    background-color: #eee;
    padding: 0rem;
  }
  .mobile-navigation.is-open {
    display: block;
	background-color: rgba(33, 33, 33, .46);
    height: 100vh;
    margin-top: 8px;
    position: fixed;
    width: 100vw;
    z-index: 97;
  }
  .hamb-line {
    background: #fff;
    display: block;
    height: 2px;
    position: relative;
    width: 16px;
  }
  .hamb-line::before,
  .hamb-line::after {
    background: #fff;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all 0.2s ease-out;
    width: 100%;
  }
  .hamb-line::before {
    top: 7px;
  }
  .hamb-line::after {
    top: -7px;
  }
  .mobile-menu-toggle.is-open .hamb-line {
    background: transparent;
  }
  .mobile-menu-toggle.is-open .hamb-line::before {
    transform: rotate(-45deg);
    top: 0;
  }
  .mobile-menu-toggle.is-open .hamb-line::after {
    transform: rotate(45deg);
    top: 0;
  }
  #mobile-menu {
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    left: 0;
    opacity: 1;
    overflow-y: scroll;
    position: absolute;
    width: 100vw;
  }
  .mobile-navigation ul {
    margin: 0;
    list-style: none;
  }
  .mobile-navigation ul li {
    border-bottom: 1px solid #d3dbe2;
  }
  .mobile-navigation ul li a {
    padding: 8px 20px;
    display: inline-block;
    width: 100%;
  }
  .mobile-navigation .sub-menu {
    box-shadow: none;
    background: #f8f9fa;
    padding: 0rem;
    border-top: 2px solid #53a5df;
  }
  .mobile-navigation .sub-menu li {
    border-bottom: none;
  }
  li:hover > .sub-menu,
  li:focus-within > .sub-menu {
    position: relative;
  }
  .header-widget-area {
    display: none;
}
}





/* On mobile, stack the footer content */
@media (max-width: 768px) {
	.footer-right ul {
    display: block;
	}
    .footer-layout {
        flex-direction: column;
        gap: 10px;
    }
    .footer-right { text-align: center; }
}


/* Basic example for desktop with right sidebar */
    .layout-sidebar-right {
        display: flex;
        gap: 20px;
    }
    .layout-sidebar-right #primary {
        width: 70%;
    }
    .layout-sidebar-right .widget-area {
        width: 30%;
    }

/* Mobile Navigation (hamburger) */
@media screen and (max-width: 768px) {

  .layout-sidebar-right {
    display: block;
  }
  .layout-sidebar-right #primary,
  .layout-sidebar-right .widget-area {
    width: 100%;
  }
  
  :where(.wp-block-columns.is-layout-flex) {
    gap: 1em;
  }
  
  .related-posts-wrapper.grid-view.columns-2 article,
  .related-posts-wrapper.grid-view.columns-3 article,
  .blog-layout-grid.columns-2 article,
  .blog-layout-grid.columns-3 article {
    width: 100%;
  }
  .blog-layout-grid.columns-2,
  .blog-layout-grid.columns-3 {
    display: inline-grid;
    gap: 9px;
  }
	
  .related-posts-wrapper.list-view .related-post-thumbnail,
  .blog-layout-list article .post-featured-image {
    width: 100%;
    margin-bottom: 0;
    max-height: 230px;
  }
  
  .related-posts-wrapper.list-view .content,
  .blog-layout-list article .content {
    width: 100%;
  }
  
  .single-post .entry-header {
    padding: 20px 0;
  }
  .single-post .entry-title {
    padding-bottom: 10px;
  }
  .single-post .post-featured-image {
    border: 1px solid #efefef;
    box-shadow: 0 2px 15px -1px rgba(0, 0, 0, 0.06);
    border-radius: 10px;
	width: 100%;
	float: none;
	padding-left: 0px;
  }
}