:root {
--dark-blue: #1a2e45; /* var(--dark-blue); */
--navy-blue: #204663; /* var(--navy-blue); */
--turk-blue: #20affe; /* var(--turk-blue); */
--light-blue:#b7d7e4; /* var(--light-blue); */
--peacock-blue: #0d528e; /* var(--peacock-blue); */
--yellow: #ffc83d; /* var(--yellow); */
--green: #4caf50; /* var(--green); */ /*#4CAF50;*/
--soft-green: #d1e7dd; /* var(--soft-green); */
--grey: #f4f4f5; /* var(--grey); */
--dark-grey :#c9c9c9; /* var(--dark-grey); bebec1, dcdcdd */
--warm-white:#f4f4f5; /* var(--warm-white); */
/* other colors that are complimentary
 */ 
}

html, body {padding:0px;margin:auto;scroll-behavior:smooth;font-family: 'Inter', 'Arial Rounded MT Bold', Arial, Helvetica, sans-serif;
letter-spacing: 0.2px; line-height: 1.68; font-size:1rem;font-size:16.5px;
background-image: linear-gradient(to bottom,#132338,#253f59,#046f99, #026287 70%, #132338 /*#bb87ae */);
background-repeat: no-repeat;background-color: #132338;height:100vh;/* or 100vh; to make it consistent*/}
.hidden {visibility: hidden;}
/* Hide the default arrow/marker on summary */
details.ripyll-composer > summary::-webkit-details-marker { display: none; } /* Chrome/Safari */
details.ripyll-composer > summary::marker { content: ""; }                  /* Firefox */
/* Make summary behave like a normal clickable header */
details.ripyll-composer > summary {list-style: none;cursor:pointer;}

  /* EMAILS ############################################ */
.email-signup-form{display:flex;align-items:center;gap:10px;width:100%;max-width:520px;margin-top:40px; }
.email-signup-input,.email-signup-btn{height:46px;box-sizing:border-box;border-radius:10px;}
.email-signup-input{flex: 1 1 auto;min-width:75%;display:block;}
.email-signup-input::placeholder{color:var(--dark-blue);}
.email-signup-btn{flex: 0 0 auto;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;
width: 180px;margin-bottom:8px;background:var(--turk-blue);}
.email-signup-btn:hover{background:var(--yellow);}
@media screen and (max-width:800px) {.email-signup-form{flex-direction:column;gap:5px;}.email-signup-input,
.email-signup-btn{width:100%;max-width:100%;}}
.email-count{display:block;text-align:center;margin-top:15px;font-size:12px;opacity:0.8;}

/* OVERLAY & TOP MESSAGE BOX ############################################ */
.loading-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
display: flex;align-items: center;justify-content: center;z-index: 1000;}
.spinner {border: 4px solid rgba(0, 0, 0, 0.1);width: 36px;height: 36px;border-radius: 50%;border-top-color: var(--turk-blue);animation: spin 1s ease infinite;margin-right:25px;}
@keyframes spin {to {transform: rotate(360deg);}}
.message-box {position: fixed;top: -100px;left: 50%;transform: translateX(-50%);background-color: var(--green);color: white;width:300px;height:50px;
padding: 15px 20px;border-radius: 5px;font-size: 16px;opacity: 0;transition: top 0.5s ease, opacity 0.5s ease;z-index: 9999;}
.message-box.show {top:0; opacity: 1;}

/* FONTS & HEADERS ###################################### */
h1{color: #003366;line-height:35px;}
h2{margin: 10px 0 10px 0;color: #003366;} h2.course{margin:15px 0 35px 0;}h3{color:#003366;font-size:14px;}h4{margin:0;}
a {color:var(--turk-blue);}.error{color:red;}
hr{border-top: 1px solid var(--dark-grey);border-bottom: 0px;margin: 30px 0 30px 0;}.center-text{text-align:center;}
.small-text{font-size:11px;}
/* INPUTS & BUTTONS ###################################### */
input[type=text], input[type=password], input[type=email], select{box-sizing: border-box;border: 1px solid #dbdbdb;border-radius: 5px;
background-color: #ffffff;padding: 12px 0 12px 5px;margin: 8px 0;width:85%;font-size:14px;font-family: 'Inter', 'Arial Rounded MT Bold', Arial, Helvetica, sans-serif;} 
button, button:disabled, .cancel-button, .next-button, .submit-button {cursor: pointer;color:#fff;border: 1px solid #fff;border-radius:999px;
background-color: var(--turk-blue);padding:10px;line-height:10px;text-decoration: none;display: inline-block;margin:0 2px;} 
.cancel-button{padding-top:10px;height:10px;} button:hover, .cancel-button:hover{background-color:var(--yellow);}
button:disabled {cursor: not-allowed;pointer-events: none;}
textarea {font-size: 16px;padding: 10px;border-radius: 8px;border: 1px solid #ccc;font-family: inherit;line-height:25px;}
textarea::placeholder {font-size: 14px;color: #999;}
/* BUTTONS AT PAGE BOTTOM, COURSES AND PROFILE AREAS ######################################### */
.blue-buttons, .top-buttons {display:flex;flex-wrap: wrap;align-items:center;justify-content: center;gap: 5px;}
.top-buttons{background-color:#eeedee;padding:20px;border-radius:8px;}
.blue-button, .blue-button a, .blue-button-disabled, .blue-button-disabled a, .top-button, .top-button a{
flex: 1 1 calc(20% - 10px);padding: 12px;text-align:center;font-size: 12px;cursor: pointer; color:#fff;background-color:var(--turk-blue);
border-radius: 8px;text-decoration:none;transition: all 0.2s ease-in-out;}
.blue-button:hover, .blue-button:hover a{background-color:var(--yellow);}.top-button{background-color:var(--navy-blue);padding:5px;}
.top-button:hover{background-color:var(--turk-blue);}.disabled{cursor:default;}.disabled:hover{background-color:var(--navy-blue);}.lock{font-size:12px;}
.blue-button-icon{font-size:16px;}.blue-button-disabled, .blue-button-disabled a {cursor: default;background-color:#c1c1c1;}

/*########### TOP HEADER BAR  ###################*/
.wrapperHeader {width:100%; height:75px; background-color: var(--dark-blue);position:fixed;top:0;z-index: 1000!important;}
.header {width:100%; height: 75px; padding: 5px 15px 0 0;justify-content:right;}.logo-nav{float:left;}
.navbar{margin:0 20px 40px 0;height:65px;display:flex;align-items:center;float:right;}
.dropdown .dropbtn{border-color:#1b3047;background-color:#1b3047;margin:8px 0 0 0;}
.dropdown:hover .dropbtn {background-color:var(--yellow);border-color:#fff;}
.profile-icon-header{border-radius:50%;height:34px;width:34px;margin:9px 15px 0 8px;outline:2px solid #fff;outline-offset:-1px;}
.mob-hash {display:none;  position: relative;margin-top:13px;}
.mob-hash::after {content: "";position: absolute;top: 100%;left: 0;width: 100%;height: 20px; /* buffer for dropdown adjust if needed */}
.hamburger-img {width: 24px;height: 24px;cursor: pointer;background:var(--turk-blue);padding: 6px;border-radius: 14px;
transition: background 0.2s ease, transform 0.1s ease;}
.hash-dropdown {display:none;position:absolute;right:0;margin-top:0;background:#fff;border-radius:8px;min-width:180px;
box-shadow:0 6px 16px rgba(0,0,0,0.15);z-index: 999;}
.mob-hash:hover .hash-dropdown {display: block;}
.hash-dropdown a {display: block;padding: 10px 14px;border-radius: 8px;text-decoration: none;color:var(--dark-blue);font-size: 15px;}
.hash-dropdown a:hover {background:var(--turk-blue);color:#fff;}
@media screen and (max-width: 875px) {.mob-hide{display:none;}.mob-hash{display: inline-block;}.profile-icon-header{height:28px;width:28px;margin-top:15px;}}

/* PAGE LAYOUT ########################################################################################## */
.logo{width:120px;margin:18px 0 0 25px;}.page{width:100%;display:flex;flex-direction: column;align-items: center;}

/*############### THREE COLUMNS THAT ALIGN ###############*/
.homePage{width:100%;margin-top:91px;}
.mainPage {display: flex;justify-content: center;}
.mainPage > div {margin:91px 3px 50px 3px;padding: 8px 8px 2px 8px;}
.center{flex-basis:50%;} /* was 675px or 775px  */
.left,.right{background-color:#fff;border-radius:8px;width:230px;position: -webkit-sticky;
position:sticky;top:99px;height:100%;} /* was 280px width */
.mainPage .right{width:230px;background:none;top:92px;padding-left:1px;}
@media screen and (max-width:1200px) {.left,.right{display:none;}.center{flex-basis:90%;}}

/* ############### HOME PAGE ###############  */
.hero-inner, .hero-inner-pillars, .hero-inner-growth, .hero-inner-green, .hero-inner-benefits-icons, .hero-inner-how-to-icons, .hero-inner-features,
.hero-inner-compare, .hero-inner-faq, .hero-inner-action{
  padding:45px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 5px;
  background-color:#fff;
  height:100%;
  flex-wrap: nowrap;
}

.hero-inner-pillars{padding:48px 25px;background-color:var(--turk-blue);height:100%;padding:100px 20px 150px 20px;}
.hero-inner-growth{padding:68px 25px;text-align:center;}
.hero-inner-green{padding:48px 25px;background-color:var(--green);align-items: flex-start;}
.hero-inner-benefits{padding:20px;background-color:#fff;text-align:center;}
.hero-inner-benefits-icons{background-color:#fff;padding:0 20px 40px 20px;}
.hero-inner-how-to{padding:20px;background-color:var(--turk-blue);text-align:center;}
.hero-inner-how-to-icons{padding:0 20px 40px 20px;background-color:var(--turk-blue);flex-wrap: wrap;}
.hero-inner-features{padding:50px;background-color:var(--grey);text-align:center;}
.hero-inner-compare{padding:50px;background-color:#fff;text-align:center;}
.hero-inner-faq{padding:50px;background-color:var(--grey);text-align:center;}
.hero-inner-action{padding:50px;background-color:var(--yellow);text-align:center;}


@media screen and (max-width:875px) {.hero-inner, .hero-inner-pillars, .hero-inner-growth, .hero-inner-benefits-icons 
{flex-wrap: wrap;}.hero-inner{padding:50px 20px;gap:35px;}.hero-inner-pillars{gap:120px;}
.hero-inner-features, .hero-inner-compare{padding:50px 10px;}}

.hero-left{max-width:520px;}
.hero-inner-green .hero-left{max-width:40%;margin-right:50px;}
.hero-inner-green .hero-right{max-width:50%;margin-top:10px;}
.hero-inner-growth .hero-left, .hero-inner-features .hero-left, .hero-inner-compare .hero-left{max-width:90%;}
.hero-inner h1, .hero-inner h2, .hero-inner-growth h2, .hero-inner-green h2, .hero-inner-features h2, .hero-inner-compare h2{
margin:0 0 14px 0;font-size: 38px;line-height: 1.3;color:#0d588c;font-weight: 600;}
.hero-inner h2{font-size:30px;line-height: 1.2;}
.hero-inner-green h2{font-size:30px;line-height: 1.2;color:#fff;}
.hero-inner-benefits h2{font-size:40px;}
.hero-inner-how-to h2{font-size:40px;color:#fff;}
.hero-sub, .hero-sub-smaller, .hero-sub-white{margin:0 0 22px 0;font-size: 20px;line-height: 1.5;color:#2c4059;opacity: 0.9;}
.hero-sub-smaller{font-size: 17px;}
.hero-sub-white{font-size: 16px;color:#fff;opacity:1;}
.hero-sub-white-ul{color:#fff;font-size:16px;}
.hero-actions{display:flex;gap:14px;align-items:center;}

.btn-primary{background:var(--yellow);color:var(--dark-blue);padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:700;}
.btn-secondary{background:var(--turk-blue);color:#fff;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:700;}

@media screen and (max-width:875px) {.hero-left{text-align:center;}.hero-actions{justify-content:center;padding:15px 0;}}
@media screen and (max-width:700px) {.hero-sub{font-size:18px;}.hero-inner h1{font-size:33px;}}

.hero-art{max-width:520px;width: 100%;height: auto;}
.hero-art-white-spiral{max-width:420px;width:100%;opacity:20%;}

.home-box, .benefits-box, .how-to-box{position:relative;display:flex;flex:1 0 25%;flex-direction:column;align-items:center;justify-content:center;
background-color:#fff;margin:10px;border-radius:10px;cursor:pointer;height:100%;max-width:350px;min-width:250px;}
.home-flex-img{position:absolute;top:-40px;}
.home-flex-img img{width:180px;border-radius:50%;}
.benefits-box{background-color:#fff;cursor:default;max-width:300px;min-width:250px;}
.benefits-flex-img img{width:80px;height:80px;}

.how-to-box{background-color:#fff;cursor:default;display:flex;flex: 1 1 calc(50%);flex-direction:column;height:250px;max-width:200px;min-width:130px;}
.how-to-arrow-box{background-color:var(--turk-blue);cursor:default;flex:0 0 40px;display:flex;justify-content:center;}
.how-to-flex-img{position:absolute;top:20px;width:60px;height:60px;border-radius:50%;background-color:var(--turk-blue);color:#fff;font-size:26px;
display:flex;align-items:center;justify-content:center;font-weight:700;line-height:1;}
.how-to-arrow-img{width:20px;height:20px;background-color:var(--turk-blue);color:#fff;}


.home-box-title, .home-box-ul{width:100%;line-height:29px;text-align:center;
color:var(--dark-blue);font-size:clamp(11px, 2vw, 15px);position:absolute;top:125px;padding-top:5px;font-weight:bold;}
.home-box-ul{top:150px;width:100%;border-radius:8px;line-height:20px;font-weight:100;
background-color:#fff;font-size:clamp(12px, 2vw, 14px);color:var(--dark-blue);}
.home-ul-list{text-align:left;}
.benefits-box-title{line-height:29px;text-align:center;font-size:clamp(11px, 2vw, 15px);color:var(--dark-blue);font-weight:bold;}
.benefits-box-sub-title{line-height:25px;text-align:center;font-size:clamp(11px, 2vw, 15px);color:var(--dark-blue);width:250px;}
.how-to-box-title{font-size:clamp(11px, 2vw, 15px);color:var(--dark-blue);font-weight:bold;margin-top:45px;}
.how-to-box-sub-title{line-height:20px;text-align:center;font-size:clamp(11px, 2vw, 13px);color:var(--dark-blue);padding:10px;}

@media screen and (max-width:875px) {.home-box{max-width:450px;min-width:60%;}.home-ul-list{width:fit-content;margin:0 auto;}
.how-to-box{flex: 1 1 calc(50%);}}

/* 80% width, centered, navy styling, no alternating row colors */
.ripyll-table-wrap{
  border: 1px solid rgba(32, 70, 99, 0.25);
  border-radius: 10px;
  overflow: hidden;   
  background: #fff; 
  margin: 40px auto 10px auto;
}

.ripyll-features-table{
  width: 100%;
  border-collapse: separate; 
  border-spacing: 0; 
  color: var(--navy-blue);
}

.ripyll-features-table th,
.ripyll-features-table td{
  padding: 12px 14px;
  border-right: 1px solid rgba(32, 70, 99, 0.25);
  border-bottom: 1px solid rgba(32, 70, 99, 0.25);
  text-align: left;
  vertical-align: top;
}

/* Header styling */
.ripyll-features-table thead th{
  background:var(--grey);
  color: var(--navy-blue);
  font-weight: 700;
}

.ripyll-features-table tr > *:last-child{
  border-right: none;
}

/* remove bottom border on last row */
.ripyll-features-table tbody tr:last-child > *{
  border-bottom: none;
}

/* IMPORTANT: no zebra striping */
.ripyll-features-table tbody tr{
  background: #fff;
}

/* Optional hover (subtle, still not alternating) */
.ripyll-features-table tbody tr:hover{
  background: rgba(32, 70, 99, 0.04);
}
.faq-section{
  width:100%;
  margin: 30px auto;
  color: var(--navy-blue);
}

.faq-intro{
  max-width:100%;
  margin-bottom: 24px;
  opacity: 0.85;
}

.faq-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item{
  border: 1px solid rgba(32, 70, 99, 0.25);
  border-radius: 10px;
  padding: 14px 18px;
  background: #fff;
}

.faq-item summary{
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  position: relative;
}

.faq-item summary::-webkit-details-marker{
  display: none;
}

.faq-item summary::after{
  content: "+";
  position: absolute;
  right: 0;
  font-size: 20px;
  opacity: 0.7;
}

.faq-item[open] summary::after{
  content: "–";
}

.faq-item p{
  margin-top: 10px;
  line-height: 1.5;
  opacity: 0.9;
}
.cta-final{
  margin-top: 70px;
  padding: 60px 0;
  background: var(--navy-blue);   /* navy */
  color: #fff;
}

.cta-inner{
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

.cta-inner h2{
  font-size: 34px;
  margin: 0 0 12px 0;
}

.cta-inner p{
  max-width: 720px;
  margin: 0 auto 22px auto;
  font-size: 16px;
  opacity: 0.92;
  line-height: 1.5;
}

.cta-buttons{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cta-btn{
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: transform 120ms ease, opacity 120ms ease;
}

.cta-btn:hover{
  transform: translateY(-1px);
}

.cta-primary{
  background: var(--yellow);
  color: var(--navy-blue);
}

.cta-secondary{
  border: 2px solid rgba(255,255,255,0.85);
  color: #fff;
}

@media (max-width: 600px){
  .cta-inner{ width: 90%; }
  .cta-inner h2{ font-size: 28px; }
}


/*############### CONTAINERS & SIDE NAV BOXES ###############*/
.new-post-container, .message-container, .default-container, .post, .discussion, .login-container, .detail-container, .container-top, 
.container-bottom, .profile-container {margin-bottom: 12px; padding:8px 8px; border: 1px solid #fff;border-radius:10px; 
background-color:#fff;}.container-top-modal{margin:5px;}
.message-container, .message-container a{background-color:var(--turk-blue);color:#fff;text-align:center;border:none;text-decoration:none;}
.container-top{background-color:#fff;border-radius:8px 8px 0 0;margin-bottom:0;padding-bottom:0;}
.container-bottom{border-radius:0 0 8px 8px;margin-top:none;padding-top:0;}
@media screen and (max-width: 1000px) {.new-post-container, .message-container, .default-container, .post, .login-container, .detail-container, .container-top, 
.container-bottom, .profile-container,.message-container{min-width:90%;}}

/*############### LEFT NAV ###############*/
.nav-container, .nav-container-green{margin-bottom:8px; padding:10px 10px; border: 1px solid var(--warm-white); border-radius: 8px; background-color:var(--warm-white);} 
.nav-container h3, .nav-container a{line-height:10px;font-size:14px;color: #253f59;text-decoration: none;}
.nav-container-green{background-color:var(--green);}
.nav-container-green a{color:var(--warm-white);line-height:10px;font-size:14px;text-decoration: none;}
.nav-container-green-header{height:10px;border-radius:8px 8px 0 0;font-size:14px;color: #253f59;padding:10px 0 5px 15px;
font-weight:bold;margin-bottom:10px;}.nav-container-green-header a{color: #253f59;}
.infin-scroll-button{background-color:var(--turk-blue);text-align:center;margin-bottom:8px; padding: 10px 0; border:none;
width:100%;height:50px;border-radius: 8px;} .infin-scroll-button:hover{background-color:var(--yellow);}
.nav_icon{width:18px;height:18px;padding:4px 0;}
.nav-link {display: flex;align-items: center;gap:6px;text-decoration:none;color: white;}
.nav-link-text{padding-top:3px;}


/*############### LEFT NAV ACCORDIAN ###############*/
.accordion-menu{padding:0 0 15px 0;}.hr_nav{padding:0;margin:4px;}.menu-title {cursor: pointer;}.menu-item{margin:0 0 0 10px;}
.submenu {padding-left: 10px;}.submenu a {display: block;padding: 7px 5px;text-decoration: none;font-size:13px;}
.submenu a:hover {background-color: #dcebe4;margin-right:30px;border-radius:8px;color: #253f59;}

/*############### RIGHT NAV ###############*/
.right_nav_button, a.right_nav_button{display:inline-block;width:100%;Height:26px;padding:2px 0 0 15px;background-color:var(--warm-white);
color: #253f59;font-size:13px;text-decoration: none;font-weight:bold;border: 1px solid #253f59;margin-bottom:7px;cursor: pointer;border-radius: 8px;}
.right_nav_button:hover{background-color:var(--green);color:#fff;}
.colorful_boxes {display: flex;height: 200px;flex-wrap: wrap;align-content: space-between;justify-content: center;}
.colorful_boxes  > div {width:44%;margin: 5px;text-align: center;height:30px;line-height:30px;font-size: 20px;
color:#ffffff;border: 1px solid #fff;border-radius: 5px;background-color: var(--turk-blue);}



/*############### POSTS ###############*/
.post {padding:10px 12px;margin-bottom: 15px;}.discussion{padding:0 5px;border: 1px solid var(--dark-grey);}
.post-header, .discussion-header {color:#000;display:flex;border: 1px solid #dbdbdb; border-radius: 8px;margin:0 0 15px 0; width:100%;
padding:0 0 0 2px;} .discussion-header{border:none;}
.post-header a, .discussion-header a{color:#000;text-decoration: none;}
.post-content {text-decoration:none;color:#000000;line-height: 1.5;padding:0 10px;margin-bottom:15px;}
.post-content a {color:var(--turk-blue);} .post-content br {line-height: 1.1;}
.poster_info{color:#afadad;font-size:15px;margin:20px 5px 2px 5px;line-height:18px;}.poster_name{font-size:16px;}
.reposter{margin-bottom:5px;} .dots{margin:25px 5px 0 auto;} 
.ripyll_points img{height:30px; width:30px;color:#000;font-size:10px;font-weight:bold;}
.post_more_options{cursor: pointer;width:25px;height:25px;float:right;}
.post-icon img{border:2px solid #fff;border-radius:50%;object-fit:cover;height:55px;width:55px;margin:5px 5px 0 5px;}
.post-icon .default-img{border:1px solid #dbdbdb;}

/*############### POSTS CLICKABLE BUTTONS - SHARE SAVE HEART ETC ###############*/
.comments-section {margin-top: 15px;}
.comment-box {border: 1px solid #ccc;border-radius: 5px;padding: 10px;margin-bottom: 10px;background-color: #fff}
.comment-box p {margin: 5px 0;}
.red{color:#c9060f;font-weight: bold;}
.post-footer {border-top: 1px solid #dbdbdb; margin:20px 0;padding:15px 0 15px 10px;color:#afadad;font-size:13px;}
.post-footer-icons-right{float:right;margin-right:10px;display:flex;} .post-footer-icons-right a {color:#000;}.post-footer-icons-left{float:left;padding:5px 0;}
.footer-icon{padding:5px 12px;border-radius:10px;} .footer-icon a{text-decoration:none;} .footer-icon:hover {background-color: #dfedfb;}
.love-icon, .retweet-icon, .bookmark-icon, .comment-icon, .share-icon{cursor:pointer;width:18px;height:18px;padding-bottom:3px;
fill: none;stroke:currentColor;stroke-width:1;vertical-align:middle;}
.bookmark-count, .like-count{color: #000;}
.bookmark-btn.is-bookmarked .bookmark-icon, .like-btn.is-liked .love-icon{fill: currentColor;stroke: currentColor;}
.bookmark-btn.is-bookmarked{ color:var(--dark-blue);}
.like-btn.is-liked{color: #da1010;}

/*############### CREATE NEW POSTS ###############*/
.default-container button:hover {background-color:var(--turk-blue);}
.default-container button {background-color: #253f59;color: white;border: none;padding: 10px 20px;
margin:10px 18px;cursor: pointer;border-radius: 8px;float:right;}
.new-post-buttons{display:flex;justify-content:space-between;margin:5px 10px 0 8px;}
.new-post-buttons .icons {display: flex;align-items:top;gap:10px;}
.new_post_icon{cursor: pointer;display: flex; justify-content: center;align-items: center;width: 25px;height: 25px;margin: 0;}
.tooltip {display:none;position:relative;overflow: visible !important;z-index:9999;}.tooltip.shown {display:inline-block !important;}
emoji-picker {position: absolute;top: 100%;/* directly under button */left: 0;z-index: 9999;}

.img_wrap {position:relative;cursor: pointer;}.img_wrap_flex{display:flex;width:100%;align-items:center;gap:8px; justify-content: space-between;}
.img_wrap_flex img {padding-bottom:4px;}.left_content {display: flex;align-items: center;gap: 8px;}.right_button {margin-left: auto;margin-right:15px;}
.text_wrap {font-size: 14px;color: #333;padding-bottom:3px;}
.img_desc {position:absolute;top:25px;left:0;background-color:#c2c2c2;border-radius: 3px;color: #fff;display:none;width:auto;padding: 0 5px;}
.img_wrap:hover .img_desc {display:inline-block;}
/*############### Post Images and their containers ###############*/
.image-preview-container {display: flex;flex-flow:row wrap;gap:6px;width:100%;max-height:800px;align-content:space-between;
justify-content:center;margin-top:5px;}
.image-preview-container > div  {border:1px solid #dbdbdb;background-color:#fff;margin-top:0px;border-radius:8px;}
.con-div-1-3{width:95%;height:350px;border-radius:8px;}
.con-div-2-4{width:47.5%;height:300px;border-radius:8px;}
.con-div-2{width:47.5%;height:300px;border-radius:8px;}
.image-preview-container > div img {object-fit:cover;}
.img-div-1-3{width:100%;height:350px;border-radius:8px;}
.img-div-2-4{width:100%;height:300px;border-radius:8px;}
.img-div-2{width:100%;height:300px;border-radius:8px;}
.video-bg{background-color:#132338;border-radius:8px;}
.delete-button_x{position:absolute;top:8px;right:8px;background-color:var(--turk-blue);color:#fff;border-radius:50%;width:23px;height:23px;cursor:pointer;
padding:0;font-size:18px;text-align: center;line-height:20px;}

/*############### PROFILE AREA ###############*/
.profile-container{background-color:#fff;border-radius: 8px;border: 1px solid #fff;}
.profile-header-container{position:relative;height:270px;}
.profile-header-picture{width:700px;height:auto;position: absolute;width:100%;z-index:5;height:270px;border-radius:8px 8px 0 0;}
@media screen and (max-width: 750px) {.profile-header-picture{min-width:490px;}}
.header-container-overlay{position: absolute;display:block;background-color: rgba(0,0,0,0.5);;z-index:200;cursor:pointer;
width:50px;height:50px;top:5px;right:5px;border-radius:50%;}
.header-container-icon img{display:block;position: absolute;top:17px;right:17px;width:25px;height:25px;z-index:300;border:none;
cursor:pointer;}
.clip-me { clip-path: url(#svgPath);}
.profile-bio-picture {position: relative;}
.profile-bio-picture img{position: absolute; top:170px; left:30px;border:6px solid #fff;background-color:#fff;
border-radius:50%;object-fit:cover;width:150px;height:150px;margin-left:10px;z-index:100;}
.bio-picture-icon img{display:block;position:absolute;top:230px; left:96px;width:30px;height:30px;
border:none;cursor:pointer;z-index:400;}
.bio-picture-overlay {display:block;position:absolute;top:175px; left:46px;background-color: rgba(0,0,0,0.5);cursor:pointer;z-index:200;
border-radius:50%;object-fit:cover;width:150px;height:150px;}
.profile-bio-picture:hover .bio-picture-overlay{display:block;}
.bio-picture-icon:hover .bio-picture-icon img{display:block;}
.profile-bio-container{display:flex;flex-direction:row wrap;margin:25px 20px 25px 40px;border-radius:0 0 8px 8px;}
.bio-container-left{width:60%;margin-right:10%;}.bio-container-right{text-align:right;}.profile-tabs{padding:20px;}
.bio-box{background:#f5f4f2;padding: 5px 20px 10px 20px;margin:10px 18px 20px 18px;border-radius: 8px;}
.bio-stats{background:#f5f4f2;padding: 20px 20px;margin:20px 18px;border-radius: 8px;}
/*############### BADGE DISPLAY ###############*/
.badge-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);  
        gap: 10px;
        margin-top: 20px;
      }
      
      .badge-card {
        width: 145px;
        height: 190px;
        text-align: center;
        padding: 10px;
        border-radius: 12px;
        background-color:var(--grey);
        transition: all 0.3s ease;
        display:inline-block;
      }
      
      .badge-card img {
        width: 125px;
        height: 125px;
        object-fit: contain;
        margin-bottom: 0;
      }
      
      /* Greyed-out style for locked badges */
      .badge-card.locked img {
        filter: grayscale(100%) brightness(80%);
        opacity: 0.5;
      }
      
      /* Optional: Hover effect on earned badges */
      .badge-card.earned:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        cursor:pointer;
      }
      
      .badge-card h3 {
        font-size: 0.9rem;
        margin: 1px 0;
        line-height:10px;
      }
      
      .badge-card p {
        font-size: 0.75rem;
        color: #555;
        line-height:16px;
      }
      .badge-filter-label {
        margin:5px 5px;
        padding: 8px 12px;
      }
      .badge-filter-select {
        margin:10px 10px;
        padding: 8px 12px;
        font-size: 1rem;
        background-color: #f4f4f5;
        border: 1px solid #ccc;
        border-radius: 10px;
        width:95%;
        cursor: pointer;
        transition: background-color 0.2s ease;
      }

/*############### MODAL CONTAINERS ###############*/
.modal {display:none;position:fixed;z-index:1000;inset: 0;background-color: rgba(0, 0, 0, 0.5);justify-content: center;align-items:flex-start;
overflow-y:auto;padding:80px 0;}.modal.show {display: flex;}
.modal-content {background-color: #fefefe;width:655px;max-width:90%;margin-left:20px;padding:20px;border: 1px solid #888;
border-radius:8px;overflow-y:auto;position:relative;overflow: visible !important;}.img-upload{width:900px;}
.modal-button a, .modal-button, .crop-container button {height:35px;width:300px;background-color: var(--turk-blue);color: #fff;
font-size:15px;cursor: pointer;margin:0 0 5px 0;border-radius: 8px;text-align:center;text-decoration:none;}
.submit-modal{width:100%;height:40px;margin-top:25px;}
span.label-button label, span .modal-button{display:inline-block; padding-top:5px;height:30px;width:300px;background-color: var(--turk-blue);color: #fff;
font-size:15px;cursor: pointer;border-radius: 8px;margin-bottom:5px;text-align:center;text-decoration:none;}
.modal-content form{padding:0;margin:0;}
.crop-container{display:flex;gap:20px;}.crop-container-new-img{min-width:450px;margin-left:5px;}.crop-container button{line-height:10px;}
.bio-image-edit{max-width: 285px; height: auto; border: 1px solid #000; padding:5px;}
.header-image-edit{max-width: 350px; height: auto; border: 1px solid #000; padding:5px;}
.crop_header_image, .crop_bio_image{max-width:450px;display:none;}
.close {position: absolute;color:var(--navy-blue);top:5px;right:10px;height:32px;width:32px;border-radius:50%;background-color: #fefefe;border: 1px solid #ccc; 
font-size:22px;font-weight: bold;z-index: 2000;line-height: 32px;text-align: center;cursor: pointer;}
.close:hover,.close:focus {text-decoration: none;cursor: pointer;}
.modalCheckboxesWithEmoji {display: flex;justify-content: space-between;align-items: center;margin: 2px 2% 0 0;font-size: 14px;}
.modalTextAreaCheckboxes{display:flex;justify-content:flex-end;gap:10px;align-items:center;font-size: 14px;}
.modalCheckboxEmoji{display:flex;align-items: center;gap:5px;background:var(--grey);border-radius:8px;margin:5px 10px;padding:5px 10px;}
.emoji_icon{cursor: pointer;width: 25px;height: 25px;}.modal-completed{margin-left:15px;}
.numbered-list-modal{padding: 0;margin:0 15px 0 0;}
.numbered-list-modal li {margin:0 0 20px 0;}

/*############### SEARCH / HASHTAG AREA ###############*/
input:-webkit-autofill {background-color: #ffffff !important;-webkit-box-shadow: 0 0 0 30px white inset !important;}
.search-container {position: relative;width: 100%;}
input[type=text].search{width: 100%;padding: 12px 0 12px 35px;margin: 8px 0;}
.search-icon {position: absolute;top: 50%;left: 10px;transform: translateY(-50%);width: 20px;
height: 20px;pointer-events: none;}
.blue_text{color:var(--turk-blue);font-weight: bold;}

/* ################# LARGE DIVS USED IN ONBOARDING TOPICS, NONPROFIT FAVORITES & DONATIONS ################ */
.main-topic-container, .main-filter-container {display: flex;flex-wrap: wrap;flex-direction:row;gap:10px;margin-top:20px;
margin-bottom:30px;width:100%;}.main-filter-container{margin-top:5px;margin-bottom:5px;}
.interest-box, .interest-box a, .interest-box-disabled, .interest-box-disabled a .interest-box-donation, .daily-lesson-hover-box 
{position: relative;flex: 1 0 25%;height:75px;background-color:var(--turk-blue);color: white;display:flex;
align-items: center;justify-content: center;text-align: center;border-radius: 10px;cursor: pointer;
padding:10px;text-decoration:none;font-size:16px;line-height:20px;}
.daily-lesson-hover-box{background-color:#fff;flex: 0 0 calc(46% - 10px);height:20px;text-align:left;align-items:flex-start;justify-content:flex-start;
font-size:13px;color:#7a7a7a;border:1px solid var(--dark-grey);}
.daily-lesson-hover-box:hover{background-color:var(--yellow);color:#fff;}
.interest-box-donation{width: 98%;align-items:left;background-color:#eeedee;height:80px;margin-bottom:10px;}
.box-header{display: flex;width:100%;height:25px;align-items:center;gap:10px;justify-content:center;border-radius: 10px;
background-color:var(--turk-blue);padding:10px 0;color: white;}.taupe{background-color:#eeedee;color:var(--dark-blue);}
.taupe:hover{background-color:var(--turk-blue);color:#fff;cursor:pointer;}.no-hover:hover{background-color:#eeedee;cursor: default;color:var(--dark-blue);}
.interest-box-disabled, .interest-box-disabled a {background-color:var(--soft-green);color:#003366;
opacity: 0.7;pointer-events: none;cursor: not-allowed;}
.circle-box{position:relative;display:flex;flex: 0 0 calc((100% - 2*16px) / 3);flex-direction:column;align-items:flex-start;justify-content:flex-start;
border:1px solid var(--dark-grey);height:auto;background-color:#fff;padding:0;border-radius:8px;cursor:pointer;}

.larger-box, .larger-box-donation{border:1px solid #000;
height:140px;padding:0;flex-direction:column;gap:30px;align-items:flex-start;justify-content:flex-end;}
.larger-box-donation{height:242px;gap:0px;align-items:center;justify-content:flex-start;background-color:#fff;}
.home-box{height:242px;padding:0;flex-direction:column;gap:0px;align-items:center;justify-content:flex-start;background-color:#fff;}

/* ################# NONPROFIT, CIRCLE & DONATION AREAS ########################### */
.np-logo, .np-logo-wide, .np-logo-sm{width:100%;border-radius:8px 8px 0 0;padding-top:5px;}
.np-logo-wide{width:20%;padding-bottom:2px;padding-top:10px;}
.np-logo img {width:120px;border-radius:50%;object-fit:cover;margin:5px;}
.np-logo-sm img {width:80px;border-radius:50%;margin:5px 0;}
.np-logo-wide img {width:45px;border-radius:50%;object-fit:cover;}
.circle-photo-search{padding:5px;} .circle-photo-search img {width:100%;margin:0;border-radius:8px;}
.members-search{color:var(--navy-blue);font-size:clamp(11px, 2vw, 14px);}
.search-circle-desc{font-size:13px;padding-top:8px;}
.np-name, .np-name-wide{height:50px;width:100%;line-height:49px;background-color:var(--grey);
color:var(--dark-blue);font-size:clamp(11px, 2vw, 15px);}
.np-slogan{color:var(--navy-blue);font-size:clamp(11px, 2vw, 14px);padding-top:4px;}
.np-name-wide{width:100%;border-bottom:none;border-radius:8px 0 0 8px;text-align:left;padding:10px 5px 0 10px;line-height:20px;height:70px;}
.circle-box-name{background-color:#fff;padding:1px 5px 0 10px;margin-bottom:4px;}
.np-button-bar,.np-button-bar-wide{width:100%;display:flex;flex-direction:row wrap;background-color:var(--grey);border-radius:0 0 10px 10px;
height:51px;line-height:56px;position:relative;font-size:19px;border-width: 1px 1px 0 1px;border-style: solid;border-color:var(--navy-blue);}
.np-button-bar-wide{width:35%;background-color:none;border:none;height:80px;font-size:15px;line-height:50px;}
.larger-box-donation .np-button-donate{flex:1;border-right: 1px solid var(--navy-blue);padding:6px;}.interest-box-donation .np-button-donate{flex:1;padding:17px 10px;border-left: 5px solid #eeedee;}
.np-button-profile{flex:1;padding:6px;}.np-button-donate img,.np-button-profile img{width:30px;margin-top:6px;}
.larger-box-donation .np-button-favorite{flex:1;border-left: 1px solid var(--navy-blue);}.interest-box-donation .np-button-favorite{flex:1;padding:15px 10px;border-left:5px solid #eeedee;} 
.np-rollover-donate, .np-rollover-profile, .np-rollover-favorite{position: absolute;width:100%;color: #333;font-size:clamp(9px, 2vw, 12px);
top: 50px;left:-4px;opacity: 0; visibility: hidden;padding: 7px;transition: opacity 0.2s ease-in-out, visibility 0.2s;}
.np-rollover-color{width:80px;height:20px;line-height:20px;border-radius:10px;background-color:var(--turk-blue);
border: 1px solid #fff;z-index:5;font-size:clamp(9px, 2vw, 12px);}.np-donate-link{text-decoration:underline;color:var(--turk-blue);}
.np-button-donate:hover .np-rollover-donate {opacity: 1;visibility: visible;}
.np-button-profile:hover .np-rollover-profile {opacity: 1;visibility: visible;}
.np-button-favorite:hover .np-rollover-favorite {opacity: 1;visibility: visible;}
.favorite-heart{background:none;border:none;font-size:16px;}.favorite-heart:hover{background:none;}
.my-donations{font-size:clamp(9px, 2vw, 14px);line-height:15px;flex: 1 1 calc(18% - 10px);padding:0 15px;}
.np-radio {accent-color:var(--navy-blue);width: 16px;height: 16px;border-radius:10px;color:#fff;}
.legend {list-style: none;padding:0;}
.legend li {display: flex;align-items: center;margin-bottom: 8px;}
.legend-icon {width: 20px;height: 20px;margin-right: 8px;display: inline-block;}
.category-header{cursor:pointer;}

/* ################# FORMS CREATE CIRCLE / ADD EVENTS / LOG ############################# */
form{max-width:800px;margin:auto;font-family:'Inter', Arial,sans-serif;}
.form-row{margin-bottom:15px;}
fieldset{border:1px solid var(--dark-grey);padding:15px 25px;margin-bottom:20px;border-radius:5px;background-color: var(--grey);}
legend{font-size:1.5em;font-weight:bold;padding:010px;color:var(--navy-blue);}
label{font-weight:bold;}
input[type=text],input[type=email],input[type=date],input[type=time],input[type=number],select,textarea{
width:100%;padding:8px;margin-top:5px;border:1pxsolid#ccc;border-radius:8px;box-sizing:border-box;}
textarea{resize:vertical;min-height:100px;}
.textarea-wrap{width: 100%;}.textarea-wrap textarea{width: 100%;}
.char-count{display:block;text-align:right;margin-top:4px;font-size:12px;opacity:0.8;}
.two-columns{display:flex;gap:15px;}
.column{width:50%;}
select[multiple]{height:100px;}.theme-select option:checked {font-weight: 700;background: #fbd140;color: #2c4059;}
.form-row .checkbox-group{display:flex;width:50%;align-items:center;justify-content:left;gap:5px;white-space:nowrap;}
.form-row .checkbox-group input[type="checkbox"]{margin-top:10px;width:auto;}
.form-row .checkbox-group label{flex-grow:0;white-space:nowrap;}
.highlight-check{margin-bottom:40px;background-color:#e3e2e2;padding:5px 5px 15px 10px;border-radius:8px;}
#map{width:100%;height:300px;border-radius:8px;}
button{width:100%;height:35px;margin-top:5px;border:none;cursor:pointer;}
.signup-btn{background-color:var(--yellow);color:var(--navy-blue);margin:25px 0;width:330px;height:45px;}
.user{display:flex;margin:5px 0 5px 0; width:100%;padding:0 0 0 2px;}
.user-icon img{border:2px solid #fff;width:40px;height:40px;border-radius:50%;margin-top:10px 0 0 0;}
.user_info{padding:5px 0 0 6px;line-height:18px;font-size:13px;}.user_info a{text-decoration:none;color:#000;}
.members-grid{display:flex;flex-wrap:wrap;gap:0;margin:6px 0 0 0;max-height: 130px;overflow:hidden;}
.member{width:45px;text-decoration:none;color:#000;display:flex;flex-direction:column;align-items:center;margin:0 8px 8px 0;}
.member-icon{display:flex;align-items:center;justify-content:center;}
.member-icon img{border:4px solid #fff;width:35px;height:35px;border-radius:50%;object-fit:cover;}
.member + .member{margin-left:-25px;/* overlap amount */}/* overlap: every member after the first shifts left */
.member{position:relative;}.member-icon{position:relative; z-index:1;}
.member-username{font-size:10px;line-height:13px;margin:2px 0 0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:90%;}
.members-footer{margin-top:6px;}
.members-footer a{text-decoration:none;color:#2451ba;font-size:13px;}

/* ################# EVENT ITEMS AREA / EVENT DETAILS / NP DESCRIPTION PAGE  ############################# */
.card-row {background-color:#fff;padding:10px 15px;margin-bottom:10px;border-radius:10px;}
.top-row, .top-row-img-left{display:flex;justify-content:space-between;align-items: flex-start;}
.top-row-img-left{justify-content:flex-start;}
.card-info-right{margin-top:5px;}
.event-title a{color: var(--turk-blue);font-size: 20px;text-decoration:none;font-weight:bold;}
.card-img-right {width: 20%;text-align: right;font-size:18px;line-height:1;}
.card-img-left {width:40%;margin-right:30px;}
.card-img-left img {width:100%;border-radius:10px;}
.card-flex{display:flex;flex-wrap:wrap;align-items: flex-start;flex-direction:row;flex-wrap: nowrap;gap: 8px;margin-top: 6px;}
.card-flex > div:first-child {
  flex: 0 0 70%;   /* fixed at 70% width */
  box-sizing: border-box;
}

/* right side */
.card-flex > div:last-child {
  flex: 0 0 30%;   /* fixed at 30% width */
  box-sizing: border-box;
}

.event-date {font-size: 14px;color: #555;}
.link-row {text-align: center;display:flex;justify-content:left;align-items:center;height:80px;}
.np-link {text-decoration: none;color: #0077cc;font-size: 16px;}
.card-img-right .favorite-btn{font-size:18px;background:none;border:none;}
.signup-container{background-color: var(--turk-blue);color: white;}
.themes-list {display: flex;flex-wrap: wrap;gap: 8px;margin-top: 6px;}
.theme-pill {background-color: #fff; border:1px solid var(--navy-blue);color:var(--navy-blue);padding: 6px 14px;
border-radius: 999px;font-size: 0.9em;font-weight: 500;white-space: nowrap;transition: background 0.4s ease;}
.theme-pill:hover {background-color:var(--turk-blue);border:1px solid #fff; color:#fff;  cursor:pointer;}

/* #################### HEADERS SITE-WIDE ################################## */
.hero_title{width:55%;position:relative;color:#fff;font-size:clamp(45px, 2vw, 45px);top:-22px;left:-23%;line-height:1em;
font-weight:bold;text-align:left;letter-spacing: -1px;}
.hero_sub_title{width:55%;position:relative;color:#fff;font-size:clamp(13px, 2vw, 16px);top:-15px;left:-22.5%;text-align:left;}
.hero-blue-bar, .hero-blue-bar-sm{text-align:left;background-color:var(--navy-blue);color:#fff;padding:10px;
height:25px;}
.hero-blue-bar-sm{height:3px;padding:5px;}
.hero-green-bar, .hero-green-bar-sm, .hero-green-bar-med{text-align:center;background-color:var(--green);color:#FFF;padding:15px 0 30px 0;
height:65px;font-size:16px;border-radius:0 0 8px 8px;}.hero-green-bar-sm a{color:#fff;text-decoration:none;}
.hero-green-bar-med{padding-top:15px;height:30px;font-size:16px;} 
.hero-green-bar-sm{height:20px;padding:10px 10px 12px 10px;font-size:13px;font-weight:100;text-align:right;}
.icon-grid{display:flex;align-items:center;justify-content:left;gap:5px;}
.icon-grid img{width:16px;height:16px;margin-top:8px;background-color:var(--turk-blue);border-radius:8px;padding:4px;}
.hero-quote{font-size:15px;font-style:italic;}
.hero_course_link {color:#fff;text-decoration:none;padding:0 5px;}
.course-quote{text-align: center;font-size:15px;font-weight:200;line-height:1.5em;padding-top:10px;}
.hero,.hero-modal{text-align:center;border-radius: 8px 8px 0 0;position:relative;padding:20px;height:250px;
display:flex;flex-direction:column;justify-content:center;align-items:center;}.hero-modal{height:200px;width:94%;}
.hero h1 {font-size: 2.5rem;color: #003366;}
.hero .quote {font-style: italic;margin-top: 10px;color: #666;}
.hero-challenge .quote {font-style: italic;}

.hero-test {
  position: relative;
  height: 290px;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

/* Background structure */
.hero-bg {
  position: absolute;
  inset: 0;
  background-color:var(--turk-blue);
}

/* Navy oval (left side) */
.navy-oval {
  position: absolute;
  right: 54%;
  top: -15%;
  width: 500px;
  height: 350px;
  background-color:#162a42;
  padding: 20px 60px; 
  border-radius: 9999px; 

}

/* White circle (right side) */
.white-circle {
  position: absolute;
  left: 47%;
  top: 50%;
  transform: translateY(-50%);
  width: 480px;
  height: 480px;
  background: #fffff6;
  border: 9px solid var(--green); /* green border */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Image inside the circle */
.circle-photo {
  width: 100%;
  height: 100%;
  object-fit:contain;
  border-radius: 50%;
}

/* Text content */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: left;
  color: #fff;
  width: 35%;
  left:-55px;
  top:45px;
  padding-left: 10%;
}

.hero_title_test {
  font-size: clamp(40px, 2vw, 35px);
  font-weight: bold;
  line-height: 1.1em;
  letter-spacing: -1px;
  padding-bottom:10px;
  
}

.hero_sub_title_test {
  font-size: clamp(14px, 2vw, 14px);
  line-height: 1.5em;
}






/* ######################### SECTION STYLES WITHIN PAGES ################################ */
main section, .grey {margin: 20px 0 20px 0;padding:10px 20px 20px 20px;background: #fff;border-radius: 8px;border:1px solid var(--dark-grey);}
.grey {background-color: var(--grey);box-shadow:none;border:1px solid var(--dark-grey);}main section.top{margin-top:15px;}
.ripyll-points {margin:0;text-align:left;background-color: var(--green);color:#fff;border-radius:0 0 8px 8px;
padding:10px;height:25px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}.ripyll-points-text,.ripyll-points-text a{font-size:13px;text-decoration:none;
  color:#fff;padding-left:5px;}
main section h2 {margin-bottom:10px;color: #003366;font-size:19px;}.top-h2-profile{padding:20px 0 0 0;margin-bottom:5px;}
/*######## DAILY PROMPTS & CHALLENGES ############ */
.overview .content {display: flex;flex-direction:row;align-items: flex-start;align-items:left;justify-content: flex-start;gap: 20px;margin-bottom:5px;}
.overview-left{width:67%;margin:0;}.overview-right{text-align:left;margin:20px 0 0 5%;}
.overview-text{padding-bottom:30px;}
.overview-image {width: 100%;border-radius: 8px;margin-top:35px;}
.overview .profile-content{margin-bottom:40px;}
.objective{font-size:14px;}
.challenge-icon-bg{background-color:var(--navy-blue);border-radius:50%;margin-right:10px;height:27px;width:27px;}
.challenge-icon-img{height:15px;width:15px;margin-top:5px;margin-left:6px;}
.modalNotes{line-height:1.3;padding:20px 0 50px 0;}
.modalLearn ul, .modalReflection ul {margin:20px 20px 0 40px;padding:0 20px 0 0;} 
.modalSteps ol ul {margin:5px 20px 0 40px;padding:10px 20px 0 0;} 
.modalLearn li, .modalSteps li{font-size:15px;line-height:1.6;}
.modalOverview ul, .overview ul {margin:-20px 20px -40px 40px;padding:0 20px 0 0;} 
.modalOverview li, .overview li {font-size:15px;line-height:1.6;}
table {font-size: 15px;margin-top:0; }
th, td { text-align: left; padding: 12px 15px; vertical-align: top; }
tr:nth-child(even) { background-color: #f5f5f5; }
tr:nth-child(odd) { background-color: #ffffff; }
td:first-child { width:28%; font-weight: 600; }
table, td { border: none; }
.content-float {overflow: hidden; /* ensures container expands to fit floated content */}

.float-image {
  float: right;
  width: 250px;
  margin-left: 20px;
  border-radius: 8px;
}

@media screen and (max-width: 750px) {.overview-left{width:55%;}}
/* ################# COURSE / CHALLENGE AREA ############################# */
.course_title{width:80% !important;margin-left:25px;position: absolute;top: 0;margin-top:30px;}
.course_percentage{width:100%;height:20px;}
.course_progress_bar{background-color:#f3f3f3;width:100%;height:30px;border-radius:0 10px 10px 10px;}
.course_progress_percent{background-color:var(--green);height:30px;border-radius:0 10px 10px 10px;}
.completion-icon{position: absolute;top: 7px;left:96%;transform: translate(-50%, -50%);font-size: 14px;color: #333;background:var(--grey);
padding:7px;border-radius: 50%;width: 20px;height:20px;display: flex;align-items: center;justify-content: center;}
.completion-icon a{text-decoration:none;}.star-icon{position: absolute;top: 7px;left:3%;font-size: 16px;}
.course-side-by-side{display:flex;gap:12px;margin:0 0 20px 0;}
.course-panel{margin:0;}
.one-third{flex: 0 0 27.5%;text-align:center;}
.two-thirds{padding-left:20px;}
@media screen and (max-width:800px) {.course-side-by-side{flex-direction:column;}}
/* ######################### MORE STYLES FOR PAGE FORMATTING ################################ */
.instructions ol,.reflection-prompts ul {margin-left: 20px;padding-left: 20px;}
.resources ul {list-style-type: square;}
.completed{text-align:center;padding:15px 0 5px 0;}
.grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;justify-items: center;}
.grid-item {width:90%;text-align: center;}
.grid-item img {width:100%;height:auto;object-fit: cover;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);margin-bottom: 10px;}
.grid-item p {font-size: 0.9rem;color: #333;}
.visual {display: block;max-width: 100%;margin: 20px auto;border-radius: 8px;}
.numbered-list, .ordered-list {list-style: none;padding: 0;margin:0 15px 0 0;}
.numbered-list li {display: flex;font-size: 15px;gap:15px;margin:0 0 20px 0;}
.num-icon {display: flex;justify-content: center;align-items: center;padding:1px 1px 0 0;width: 20px; height: 20px;min-width: 20px;
min-height: 20px;margin-top: 7px; font-weight: bold;font-size: 13px;border-radius: 50%;flex-shrink: 0;color: white;
background-color: var(--turk-blue);}
.step-text{padding-top:6px;}
.hidden {display: none;}
.level{display:flex;align-items: center; gap:7px;}
.level-header, .challenge-arrow-icon {cursor: pointer;font-weight: bold;margin: 10px 0 10px 5px;}
.challenge-arrow-icon{margin-left:0;}
.challenge-arrow-icon img {width:22px;height:22px;padding-top:7px;}

/* ######################### CHALLENGE BUTTONS AND MESSAGES ################################ */
.challenge-instructions{margin-bottom:0;padding-bottom:25px;}
.encouragement{margin-top:0;}
.challenge-start-button, .challenge-completed-button{background-color:var(--turk-blue) !important;width:100%;padding:15px !important;
margin:8px 0 0 0 !important;font-size:16px;color:#fff;font-weight:bold;}
.challenge-start-button:hover, .challenge-completed-button:hover{background-color:var(--yellow)!important;}
.challenge-completed-button{cursor: default;background-color:#c1c1c1 !important;margin:8px 0 0 0 !important;}
.challenge-completion-message{text-align:center;padding:10px 0 !important;}
.challenge-completion-no-message{margin:0;padding:0;}

/* #################### PROGRESS BAR ######################################### */
.progress-bar {background-color: #f3f3f3; border-radius: 8px;padding: 10px 8px;margin-bottom:0;}
.progress {width: 20%;height: 25px;background-color: var(--green);border-radius: 5px;transition: width 0.4s ease-in-out;}
.progress-bar p {text-align: center;margin-top: 5px;font-size: 14px;color: #333;}

/* #################### FOOTER ######################################### */
footer {border-radius: 8px;text-align: center;margin-top: 8px;padding: 10px 0;background: #003366;color: #fff;}
.nav-link-right, .nav-link-left, .nav-link-center {font-size:13px;color: #89CFF0;text-decoration: none;}
.nav-link-right, .nav-link-right-disabled{margin: 0 0 0 10px;}
.nav-link-right-disabled, .nav-link-left-disabled{cursor:default;text-decoration:none;font-size:14px;}
.nav-link-left{margin: 0 5px 0 0;}.nav-link-center{margin:0;}
.nav-link-arrow-right{margin:0 0 0 5px;color: #89CFF0;}
.nav-link-arrow-left{margin:0 5px 0 0;color: #89CFF0;}

/* #################### LESSON, LESSON_DAY FORMATTING ######################################### */
.grid-container {display: grid;grid-template-rows: repeat(4, auto);grid-auto-flow: column;gap: 10px;margin-top:20px;margin-bottom:10px;width:100%;}
.lesson-overview h2{font-size:22px;}
.overview ul.bullets {list-style: none;margin: 0;;padding: 0;}
.overview ul.bullets > li {display: flex;align-items: flex-start;gap: 0.9em;line-height:1.7;font-size:16px;}
.overview ul.bullets > li::before { content: "✅";font-size: 1.1em;}
.overview ul.bullets > li .li-text{min-width: 0;flex: 1;}
.overview ul.bullets a {overflow-wrap: anywhere;word-break: break-word;}
/* #################### CHECK THESE FOR REMOVAL ######################################### */
.lesson-overview ul {list-style: none;}
.lesson-overview li {
    display: flex;
    align-items: flex-start;
    gap: 0.7em;
     margin: 0 !important;
  padding: 0 !important;
}
.lesson-overview li::before {
    content: "🌀";
    font-size: 1.3em; 
    flex-shrink: 0;
}

.lesson-overview hr {
    border-top: 1px solid var(--navy-blue);
    /* background: linear-gradient(to right, var(--navy-blue), var(--turk-blue), var(--green), var(--turk-blue), var(--navy-blue)); */
    margin: 40px 0;
}
.lesson-overview li.hand::before { 
    content: "👉"; 
}
.lesson-overview li.question::before { 
    content: "😃"; 
}
.lesson-overview li.check::before { 
    content: "✅";
    font-size: 1em;
}
.lesson-overview li.journal::before { 
    content: "📝";
    margin:0;
    font-size: 1em;
}
.toggle-container {
    display: flex;
    align-items: center; 
    gap: 8px;
    margin-bottom:10px;
}
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}
.slider-text {
    display: inline-flex; 
    align-items: center; 
    font-size: 16px;
    height: 20px; 
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--green);
}

input:checked + .slider:before {
    transform: translateX(20px);
}

.box-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap:5px;
  }
  
  .box {
    width: 32%;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    border-radius:8px;
  }
  
  .overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
  }
  
  .overlay-text {
    color: white;
    font-size:clamp(16px, 2vw, 22px);
    font-weight: bold;
    margin: 0;
    line-height:1;
  }
  .overlay-sub-text{font-size:clamp(13px, 2vw, 17px);}
  .overlay-icon {
    align-self: flex-end;
    width:70%;
    height:auto;
  }
.article-grid {display: flex;flex-wrap: wrap;gap: 8px;}
.article-card {padding: 5px 13px;background: var(--turk-blue);border-radius: 12px;border: 2px solid #2451ba22;color: #fff;text-decoration: none;
display: inline-block;white-space: nowrap;transition: 0.2s ease;}
.article-card:hover {background: var(--yellow);color: white;border-color:var(--yellow);}
.article-type {font-size:11px;opacity: 0.6;}
.article-title {font-size: 14px;margin-top: 4px;}
.article-main-title {font-size: 1.4rem;font-weight: 700;color: #2c4059;margin: 20px 10px 20px 0;line-height:2rem;width:80%;
padding-left: 16px;border-left: 5px solid var(--turk-blue);}
.article-body{ font-family: 'Inter', sans-serif;font-size: 16.5px;line-height: 1.68;letter-spacing: 0.2px;}
.article-body p {margin-bottom: 1.8em;}
.article-body blockquote {max-width: 600px;margin:40px auto 40px auto;padding: 10px 23px 5px 18px;background: var(--grey);
border-left: 6px solid var(--turk-blue);border-radius: 12px;font-size: 1.2rem;font-style: italic;color: #2c4059;line-height: 1.6;box-shadow: 6px 6px 6px rgba(0,0,0,0.15);}
.ck-content table,.article-body table {
    width: 100%;
    margin: 2rem 0;
    font-size: 14px;
    border: 1px solid var(--dark-grey) !important; /* FORCE outer border */
    border-collapse: separate !important; /* critical for showing outer border */
    border-radius: 8px;
    border-spacing: 0; /* prevent gaps */
    overflow: hidden;
    background: #fffff6;
}
.article-body table td:first-child {
    width:40%;
}
/* Table cells */
.article-body table td {
    padding: 12px 14px;
    border-bottom: 1px solid #e5e5e5;
}

/* Alternating rows */
.article-body table tr:nth-child(even) td {
    background: #f5faff; /* soft, almost-white blue */
}

.article-body table tr:nth-child(odd) td {
    background: #ffffff;
}

/* Hover effect */
.article-body table tr:hover td {
    background: #eaf4ff;
}