/* ==========================================================================
    CUSTOM CSS styles for Lingvista
   ========================================================================== */

html {
  /* Syntax: <thumb-color> <track-color> */
  scrollbar-color: #6b2d3e transparent;
  scrollbar-width: thin;
  /* Creates a clean, slim native bar */
}


/* Make track transparent so it doesn't create a visual gap */
::-webkit-scrollbar-track {
  background: #ffffff;
}

/* Float thumb cleanly against edge */
::-webkit-scrollbar-thumb {
  background: #6b2d3e;
  border-radius: 10px;
}


body,
button {
  color: #272c30;
  font-family: "Open Sans", sans-serif !important;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 3%;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.comment-navigation a {
  background: #0072e5;
  border: none;
  border-radius: 3px;
  color: #fff;
  font-family: "Open Sans", sans-serif !important;
  font-size: 18px;
  font-weight: 600;
  padding: 14px 20px;
  -webkit-appearance: none;
  appearance: none;
  transition: 0.2s ease-in-out;
}

.site-header .menu-item-has-children>a::after,
.site-header .page_item_has_children>a::after {
  content: "\e907";
  font-family: gbicons !important;
  /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
  font-weight: 400;
  padding-left: 5px;
  right: 0;
  font-size: 13px;
}

.sub-menu .menu-item-has-children>a::after,
.sub-menu .page_item_has_children>a::after {
  content: "\e906";
  font-family: gbicons !important;
  /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
  float: right;
}

.pagination .next::after,
.pagination .prev::after {
  font-family: gbicons !important;
  /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
  font-size: 18px;
}

.comment-navigation .nav-previous a::before {
  content: "\e904";
  font-family: gbicons !important;
  /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
  margin-right: 10px;
}

.comment-navigation .nav-next a::after {
  content: "\e903";
  font-family: gbicons !important;
  /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
  margin-left: 10px;
}

.comment-time,
.comment-edit-link {
  color: #62707c;
  font-family: "Open Sans", sans-serif !important;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  font-size: 11px;
  vertical-align: top;
  line-height: 1;
}

.logged-in-as,
.comment-notes {
  margin-bottom: 2%;
  display: none;
  color: #62707c;
  font-family: "Open Sans", sans-serif !important;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
}

.comment-awaiting-moderation::before {
  content: "\e90a";
  font-family: gbicons !important;
  /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
  margin-right: 10px;
}

/* ==========================================================================
    CUSTOM CSS
   ========================================================================== */
#wpadminbar {
  /*display: none !important;*/
}

.js {
  margin-top: 0px !important;
}

#menu-main-menu-1 .menu-item-has-children>a::after {
  transform: rotate(0deg) !important;
  /* If this makes it upside down, try 90deg or 0deg */
  display: inline-block;
  font-size: 2rem !important;
}

/* Hide the default theme page title ONLY on search result pages */
body.search #masthead .page-titles {
  display: none !important;
}

.site-footer .container {
  margin: 0px auto !important;
  padding: 0px !important;
}

.site-footer .container .footer-widgets {
  max-width: 1120px !important;
  margin: 0px auto !important;
}

.site-footer .container .footer-widgets .footer-column #block-73>div {
  margin-left: 0px !important;
  margin-right: 0px !important;
}




.hfeed.site.container {
  padding: 0 !important;
}

.wp-block-button__link.has-text-color.has-background.has-custom-font-size.wp-element-button {
  background-color: #8B1E2D !important;
}

.wp-block-button__link.has-text-color.has-background.wp-element-button {
  background-color: #8B1E2D !important;
  color: white;
  transition: 0.3s ease;
}

.wp-block-button__link.has-text-color.has-background.wp-element-button:hover {
  transform: translateY(-5px);
}

.meta-list {
  display: none !important;
}

.footer-widgets .footer-column {
  float: none !important;
  width: auto !important;
  max-width: none !important;
}

.menu .sub-menu {
  margin-top: 20px !important;
  border: none !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  color: black !important;
  background-color: #ffffff !important;
  font-weight: 500 !important;
  /* min-width: 210% !important; */
}

.menu {
  font-size: 18px !important;
}

.sub-menu li a {
  color: black !important;
  font-size: 20px !important;
}

.sub-menu::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -100px !important;
  /* Fills the empty gap above the dropdown */
  left: 0 !important;
  width: 100% !important;
  height: 100px !important;
  background: transparent !important;
  /* Makes it completely invisible */
  border: none !important;
  /* Removes the black arrow triangle */
}

.widgettitle {
  font-size: 22px !important;
}

.toggle-sub {
  position: absolute !important;
  z-index: 99;
  /* Keeps the button clickable above the sub-menu */
  top: 2px !important;
  color: black !important;
  background-color: rgb(255, 255, 255) !important;
}

.footer-widgets {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0px;
}

.footer-widgets .footer-column {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  margin-left: 20px !important;
}

@media (max-width: 1040px) and (min-width: 960px) {
  .widget.widget_nav_menu .menu #menu-item-174 {
    font-size: 16px !important;
  }
}

@media (max-width: 960px) and (min-width: 782px) {
  .widget.widget_nav_menu .menu #menu-item-174 {
    font-size: 13.9px !important;
  }

  .widget.widget_nav_menu .menu #menu-item-175 {
    font-size: 16px !important;
  }
}

@media (max-width: 640px) {
  .footer-widgets {
    flex-direction: column !important;
  }
}

.footer-tagline {
  background-color: #F5EFE7 !important;
  color: #8B1E2D !important;
  font-weight: 700 !important;
  padding: 20px !important;
  min-height: 64px !important;
}

header#masthead.site-header,
.site-header {
  position: fixed !important;
  top: 0 !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 4rem !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  z-index: 9999 !important;
  pointer-events: none !important;
}

header#masthead.site-header>* {
  pointer-events: auto !important;
}

header#masthead.site-header::before,
header#masthead.site-header::after,
.site-header::before,
.site-header::after {
  display: none !important;
  content: none !important;
  background: none !important;
  height: 0 !important;
  width: 0 !important;
  border: none !important;
}

/* Only zero out structural wrapper spacing, NOT content block padding */
.site-inner,
.site-content,
#content,
#main,
.site-container {
  margin-top: 0 !important;
}

/* Restore the hero's original 15% padding AND add the space the 
   collapsed masthead used to provide so the image isn't cropped */
.gb-layout-hero-1,
.wp-block-genesis-blocks-gb-container.gb-layout-hero-1 {
  padding-top: calc(15% + 110px) !important;

}

/* Tablet */
@media screen and (min-width: 706px) and (max-width: 1024px) {

  .gb-layout-hero-1,
  .wp-block-genesis-blocks-gb-container.gb-layout-hero-1 {
    padding-top: calc(15% + 100px) !important;
    height: auto;
  }
}

/* Mobile */
@media screen and (max-width: 705px) {

  .gb-layout-hero-1,
  .wp-block-genesis-blocks-gb-container.gb-layout-hero-1 {
    padding-top: calc(15% + 80px) !important;
    height: auto;
  }
}

.gb-container-image-wrap {
  background-color: #ffffff;
  height: auto;
}

.gb-container-image.has-background-dim {
  opacity: 1 !important;
  max-width: 100% !important;
  border: none !important;
  object-fit: cover;
}

@media (max-width: 240px) {
  .wp-block-genesis-blocks-gb-container {
    min-width: 240px !important;
    margin-left: 0px !important;
  }
}

/* 1. The outer box holding all the results */
.searchwp-live-search-results {
  background: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  border-radius: 4px !important;
  z-index: 999999 !important;
  /* Ensures it stays on top of header elements */
}

/* 2. Individual list rows for each page found */
.searchwp-live-search-results {
  position: fixed !important;
  padding: 10px 15px !important;
  border-bottom: 1px solid #eeeeee !important;

}

@media (min-width: 0px) and (max-width: 370px) {
  .searchwp-live-search-results {
    left: 5% !important;
    top: 125px !important;
    width: 70% !important;
  }
}

/* 1. MOBILE STYLE (Under 768px screen width) */
@media (min-width: 370px) and (max-width: 706px) {
  .searchwp-live-search-results {
    left: 5% !important;
    top: 125px !important;
    width: 90% !important;
  }
}

@media (min-width: 706px) and (max-width: 768px) {
  .searchwp-live-search-results {
    left: 5% !important;
    top: 145px !important;
    width: 90% !important;
  }
}

/* 2. THE IN-BETWEEN STYLES (Tablets, Laptops, and Small Desktops) */
@media (min-width: 768px) and (max-width: 1900px) {
  .searchwp-live-search-results {
    /* This pushes the box to the right side, leaving a 40px gap from the screen edge */
    left: calc(100vw - 490px) !important;
    top: 140px !important;
    width: 450px !important;
    /* Slightly narrower so it fits mid-sized screens perfectly */
  }
}

/* 3. YOUR EXACT LARGE DESKTOP STYLE (1400px screen width and up) */
@media (min-width: 1900px) {
  .searchwp-live-search-results {
    left: 1270px !important;
    top: 140px !important;
    width: 600px !important;
  }
}

.searchwp-live-search-results:last-child {
  border-bottom: none !important;
}

/* 3. The clickable page title links inside the rows */
.searchwp-live-search-results a {
  color: #222222 !important;
  text-decoration: none !important;
  font-size: 18px !important;
  display: block !important;
}

.searchwp-live-search-result {
  position: relative !important;
}

/* 2. Stretch the link's clickable area over the entire card (including the image) */
.searchwp-live-search-result a::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;

}

/* 4. The link behavior when someone hovers their mouse over a title */
.searchwp-live-search-results a:hover {
  color: #8B1E2D !important;
}

/* 5. The styling for the box when zero matches are found */
.searchwp-live-search-no-results {
  padding: 15px !important;
  color: #777777 !important;
  font-size: 14px !important;
  text-align: center !important;
}

/* ==========================================================================
   DESKTOP NAVIGATION (Screens 1250px+) WITH SEPARATED SEARCH
   ========================================================================== */

@media screen and (min-width: 1250px) {

  .menu-item-231 .sub-menu li a {
    max-width: 220px;
  }

  .menu-item-406 .sub-menu li a {
    max-width: 240px;
  }

  .menu-item-232 .sub-menu li a {
    max-width: 190px;
  }

  header#masthead ul.menu .sub-menu ul.sub-menu {
    left: 95% !important;
    /* Adjust this value (e.g., 85% or 90%) to move it further left or right */
    margin-left: 0 !important;
    top: -5px !important;
  }

  .menu .sub-menu {
    padding-top: 5px;
    padding-bottom: 10px;
    min-width: 215% !important;
    margin-left: 0 !important;

  }

  header#masthead .top-navigation {
    width: calc(100% - 70px);
    max-width: 1250px;
    overflow: visible !important;
    margin: 10px auto;
    padding: 0 35px;
    min-height: 70px;
    background: #fff;
    border: none;
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 0px !important;
    z-index: 9999 !important;

    /* FIX: Enable layout matching across the container and search wrapper */
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  header#masthead .top-navigation .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Layout alignment for your new outer search block */
  .header-search-container {
    flex: 1 1 0% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-shrink: 0;
  }

  header#masthead .top-navigation-right {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
  }

  header#masthead .main-navigation {
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }

  header#masthead .main-navigation ul.menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  header#masthead .main-navigation ul.menu li {
    margin: 0 20px;
  }

  header#masthead .main-navigation ul.menu li a {
    margin: 0px;
  }

  header#masthead .main-navigation ul.menu a {
    display: block;
    padding: 4px 0;
    white-space: nowrap;
    font-weight: normal !important;
  }

  header#masthead .site-identity {
    flex: 1 1 0% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    float: none;
    margin: 0;
    padding: 0;
  }

  header#masthead .site-identity .site-title-wrap {
    position: relative;
    align-items: left !important;
    left: 0;
  }

  header#masthead .site-identity img.custom-logo {
    max-width: 120px;
    height: auto;
    display: block;
  }

  /* SEARCH SUB-ELEMENT RESET & ALIGNMENT */
  .header-search {
    position: relative;
    margin: 0 0 0 20px;
    /* Removed 15px bottom margin causing icon to drop */
  }

  form.header-search button.search-toggle img.custom-search-icon,
  form.header-search .search-popup button[type="submit"] img.custom-search-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }

  form.header-search button.search-toggle,
  form.header-search .search-popup button[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border: none;
  }

  .search-toggle {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all .25s ease;
  }

  .search-toggle:hover {
    background: #f5f6f8;
  }

  .search-popup {
    position: absolute;
    top: 100%;
    right: 0;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #d6d5d5;
    border-radius: 8px;
    padding: 6px;
    padding-left: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.25s ease;
  }

  .header-search.open .search-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(4px);
  }

  .search-popup input[type="search"] {
    border: 1px solid #e2b2b2;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    color: #5a0d1a;
    outline: none;
    width: 200px;
    transition: border-color 0.2s ease;
  }

  .search-popup input[type="search"]:focus {
    border-color: #5a0d1a;
  }

  .search-popup button[type="submit"] {
    width: 46px;
    height: 46px;
    cursor: pointer;
  }

  .wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-8f761849.wp-block-columns-is-layout-flex {
    max-width: 1120px !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 20px;
    margin-right: 20px;
  }

  /* Hide nested sub-menus by default on desktop */
  header#masthead ul.menu .sub-menu ul.sub-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* Only show nested sub-menu when hovering its DIRECT parent */
  header#masthead ul.menu .sub-menu li:hover>ul.sub-menu {
    min-width: 250px !important;
    max-width: 250px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #menu-main-menu-1>li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-has-children.menu-item-231>ul>li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-has-children.menu-item-1230>ul>li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-has-children.menu-item-1243>ul,
  #menu-main-menu-1>li.menu-item.menu-item-type-custom.menu-item-object-custom.current-menu-ancestor.menu-item-has-children.menu-item-231>ul>li.menu-item.menu-item-type-custom.menu-item-object-custom.current-menu-ancestor.current-menu-parent.menu-item-has-children.menu-item-1230>ul>li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-has-children.menu-item-1243>ul {
    min-width: 260px !important;
    max-width: 400px !important;
    display: block !important;
  }

  header#masthead ul.menu .sub-menu li:nth-child(3):hover>ul.sub-menu {
    min-width: 400px !important;
    max-width: 400px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  header#masthead ul.menu .sub-menu li:nth-child(5):hover>ul.sub-menu {
    min-width: 280px !important;
    max-width: 400px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  header#masthead .main-navigation ul.sub-menu>li.menu-item-has-children>a::after {
    display: inline-block !important;
    transform-origin: center !important;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding-left: -10px !important;
  }

  header#masthead .main-navigation ul.menu>li.menu-item-has-children>a::after {
    display: inline-block !important;
    transform-origin: center !important;
    transition: transform 0s;
  }


  header#masthead .main-navigation ul.menu>li.menu-item-has-children:hover>a::after,
  header#masthead .main-navigation ul.menu>li.menu-item-has-children.focus>a::after {
    transform: rotate(-180deg) !important;
    padding-left: 0px;
    margin-left: 5px;
  }

  header#masthead .main-navigation ul.sub-menu>li.menu-item-has-children:hover>a::after,
  header#masthead .main-navigation ul.sub-menu>li.menu-item-has-children.focus>a::after {
    transform: rotate(90deg) !important;
  }
}



/* ==========================================================================
   TABLET NAVIGATION (Screens 800px to 1250px) CLEAN FIXED VERSION
   ========================================================================== */

@media screen and (min-width: 800px) and (max-width: 1250px) {
  header#masthead .top-navigation {
    width: calc(100% - 70px);
    max-width: 1300px;
    margin: 10px auto !important;
    display: flex !important;
    flex-direction: row !important;
    /* Fixed back to standard row orientation */
    justify-content: space-between !important;
    align-items: center !important;
    padding: 5px 40px !important;
    background: #ffffff !important;
    position: fixed !important;
    z-index: 9999 !important;
    border: none;
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    min-height: 80px !important;
    top: 0px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  header#masthead .top-navigation:not(:has(.toggle-active)) {
    overflow: visible !important;
  }

  header#masthead .top-navigation .container {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: flex !important;
    justify-content: space-between !important;
    /* Sends Logo left, controls right side elements */
    align-items: center !important;
  }

  header#masthead .site-identity {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 5px 0 !important;
    height: auto !important;
  }

  header#masthead .site-identity img.custom-logo {
    max-width: 105px !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
  }

  /* Right Side Controls (Holds Hamburger + Search side-by-side) */
  header#masthead .top-navigation-right {
    display: flex !important;
    flex-direction: row-reverse !important;
    /* Puts hamburger menu on the far edge */
    align-items: center !important;
    gap: 15px !important;
  }

  /* CRITICAL FIX: Hide the desktop text links completely on tablet so they don't break lines */
  header#masthead ul#menu-main-menu-1.menu {
    display: none !important;
  }

  header#masthead .mobile-navigation {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    float: none !important;
  }

  header#masthead .mobile-navigation button,
  header#masthead .nav-toggle {
    background: transparent !important;
    color: #333333 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  header#masthead .mobile-navigation button {
    font-size: 0 !important;
    /* Safely hides text nodes */
  }

  header#masthead .mobile-navigation button::before,
  header#masthead .mobile-navigation button svg,
  header#masthead .mobile-navigation button i {
    font-size: 20px !important;
  }

  /* ------------------------------------------------------------------------
     TABLET SEARCH BAR FIXED STYLES
     ------------------------------------------------------------------------ */

  form.header-search {
    position: relative;
    margin-left: 0px !important;
    margin-bottom: 0;
  }

  form.header-search button.search-toggle img.custom-search-icon,
  form.header-search .search-popup button[type="submit"] img.custom-search-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }

  form.header-search button.search-toggle,
  form.header-search .search-popup button[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
  }

  .search-toggle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    transition: all .25s ease;
    margin-left: 0 !important;
    /* FIX: Removed the disruptive 20em margin */
  }

  .search-toggle:hover {
    background: #f5f6f8;
  }

  .search-popup button[type="submit"] {
    width: 46px;
    height: 46px;
  }

  form.header-search .search-popup {
    position: absolute;
    top: 100%;
    right: -10px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.25s ease;
  }

  .header-search.open .search-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(4px);
  }

  .search-popup input[type="search"] {
    border: 1px solid #e2b2b2;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    color: #2d3748;
    outline: none;
    width: 180px;
    transition: border-color 0.2s ease;
  }

  .search-popup input[type="search"]:focus {
    border-color: #5a0d1a;
  }

  /* ------------------------------------------------------------------------
     DRAWER CONTENT OVERLAY (WHILE MOBILE MENU OPEN)
     ------------------------------------------------------------------------ */

  header#masthead .drawer-wrap {
    display: none !important;
  }

  header#masthead .top-navigation .mobile-navigation.toggle-active+.drawer-wrap,
  header#masthead .top-navigation:has(.toggle-active) .drawer-wrap {
    display: block !important;
    position: absolute !important;
    top: 90px !important;
    left: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    z-index: 9990 !important;
    padding: 20px 20px !important;
    box-sizing: border-box !important;
    margin: 0px auto 20px auto !important;
    border: none !important;
    border-radius: 22px !important;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, .08);
    max-height: calc(100vh - 150px) !important;
    overflow-y: scroll !important;
    /* Force scroll instead of auto */
    -webkit-overflow-scrolling: touch !important;
    /* Critical for mobile touch scrolling */
    overscroll-behavior: contain !important;
    /* Prevents scrolling the background page */
  }

  header#masthead .drawer-wrap .drawer,
  header#masthead .drawer-wrap .main-navigation,
  header#masthead .drawer-wrap ul.menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    background: transparent !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  header#masthead .drawer-wrap ul.menu li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  header#masthead .drawer-wrap ul.menu a {
    display: block !important;
    width: 100% !important;
    padding: 18px 0 !important;
    color: #111111 !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    border-top: 1px solid #eeeeee !important;
  }


  header#masthead .drawer-wrap ul.menu li.menu-item-has-children {
    position: relative !important;
  }

  /* Hide sub-menu when drop-open/drop-active are absent */
  .drawer-navigation ul.sub-menu {
    display: none !important;
  }

  /* Show sub-menu when drop-open is active on parent <li> */
  .drawer-navigation li.drop-open>ul.sub-menu,
  .drawer-navigation ul.sub-menu.drop-active {
    display: block !important;
  }

  header#masthead .drawer-wrap ul.menu ul.sub-menu {
    display: none !important;
    flex-direction: column !important;
    width: 100% !important;
    padding-left: 20px !important;
    margin: 0 !important;
  }


  header#masthead .drawer-wrap ul.menu li:has(> .toggle-sub[aria-expanded="true"])>ul.sub-menu,
  header#masthead .drawer-wrap ul.menu ul.sub-menu.is-open {
    display: flex !important;
  }

  header#masthead .drawer-wrap ul.menu li.menu-item>a {
    padding-left: 20px !important;
  }

  header#masthead .drawer-wrap ul.menu li.menu-item-has-children>a {
    padding-right: 50px !important;
    box-sizing: border-box !important;
  }

  header#masthead .drawer-wrap ul.menu .toggle-sub i,
  header#masthead .drawer-wrap ul.menu .toggle-sub svg {
    color: #333333 !important;
    display: inline-block !important;
  }

  header#masthead .drawer-wrap ul.menu li.menu-item-has-children>a::after,
  header#masthead .drawer-wrap ul.menu li.menu-item-has-children>a::before {
    content: none !important;
    display: none !important;
  }
}






@media screen and (max-width: 1250px) {
  header#masthead .drawer-wrap ul.menu .toggle-sub {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 50px !important;
    height: 57px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
  }

  header#masthead .drawer-wrap ul.sub-menu .toggle-sub {
    position: absolute !important;
    right: 20px !important;
    top: 0 !important;
    width: 50px !important;
    height: 57px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
  }

  .menu .sub-menu {
    min-width: 102% !important;
    margin-left: 0 !important;
    border-right: none !important;
  }

  .menu .sub-menu .menu-item a {
    padding-left: 20px !important;

  }

  header#masthead .drawer-wrap ul.menu ul.sub-menu {
    display: none !important;
    flex-direction: column !important;
    width: 100% !important;
    padding-left: 15px !important;
    margin: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
  }

  /* 2. Show 1st-level OR nested sub-menu ONLY when its respective toggle button is expanded */
  header#masthead .drawer-wrap ul.menu li>.toggle-sub[aria-expanded="true"]~ul.sub-menu,
  header#masthead .drawer-wrap ul.menu li>.toggle-sub[aria-expanded="true"]+ul.sub-menu,
  header#masthead .drawer-wrap ul.menu ul.sub-menu.is-open,
  header#masthead .drawer-wrap ul.menu .sub-menu li>.toggle-sub[aria-expanded="true"]~ul.sub-menu,
  header#masthead .drawer-wrap ul.menu .sub-menu li>.toggle-sub[aria-expanded="true"]+ul.sub-menu {
    display: flex !important;
  }

  /* 3. Neutralize any lingering open classes that trap menus open */
  header#masthead .drawer-wrap ul.menu li.drop-open>ul.sub-menu,
  header#masthead .drawer-wrap ul.menu li.is-open>ul.sub-menu {
    display: none !important;
  }

  /* 4. Allow open state if class is present AND button is actively expanded */
  header#masthead .drawer-wrap ul.menu li.drop-open>.toggle-sub[aria-expanded="true"]~ul.sub-menu,
  header#masthead .drawer-wrap ul.menu li.is-open>.toggle-sub[aria-expanded="true"]~ul.sub-menu {
    display: flex !important;
  }

  /* Prevent native browser text selection and blue tap highlight on menu items */
  header#masthead .drawer-wrap * {
    -webkit-user-select: none !important;
    /* Safari / Chrome */
    -moz-user-select: none !important;
    /* Firefox */
    -ms-user-select: none !important;
    /* IE / Edge */
    user-select: none !important;
    /* Standard */
    -webkit-tap-highlight-color: transparent !important;
    /* Mobile touch highlight */
  }
}



/* ==========================================================================
   MOBILE NAVIGATION (Screens 800px and below)
   ========================================================================== */

@media screen and (max-width: 800px) {

  header#masthead .top-navigation {
    width: calc(100% - 70px);
    max-width: 1000px;
    margin: 10px auto;
    display: flex !important;
    flex-direction: row !important;
    /* Set standard direction: Menu left, Logo center, Search right */
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0px 20px !important;
    background: #fff;
    position: fixed !important;
    top: 0px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    min-height: 65px !important;
    border: none;
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  }

  header#masthead .top-navigation:not(:has(.toggle-active)) {
    overflow: visible !important;
  }

  /* Centers the middle container holding the main site identity */
  header#masthead .top-navigation .container {
    width: auto !important;
    margin: 0 auto !important;
    /* Locks layout to center space */
    padding: 0 !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  header#masthead .site-identity {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    height: auto !important;
  }

  header#masthead .site-identity img.custom-logo {
    max-width: 85px !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
  }

  header#masthead .mobile-navigation {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    float: none !important;
    flex-shrink: 0 !important;
  }

  header#masthead .mobile-navigation button,
  header#masthead .nav-toggle {
    background: transparent !important;
    color: #333333 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    font-size: 0 !important;
    /* Hides "Menu" text cleanly */
    display: inline-flex !important;
    align-items: center !important;
  }

  header#masthead .mobile-navigation button::before,
  header#masthead .mobile-navigation button svg,
  header#masthead .mobile-navigation button i {
    font-size: 22px !important;
    /* Keeps icon lines clean */
  }

  header#masthead .top-navigation-right {
    display: none !important;
    /* Hides desktop list container on mobile layouts */
  }

  /* CRITICAL FIXED MOBILE SEARCH OVERRIDES */
  .header-search-container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-shrink: 0 !important;
    width: auto !important;
  }

  form.header-search {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  .search-toggle {
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: transparent !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    margin: 0 !important;
  }

  form.header-search button.search-toggle img.custom-search-icon,
  form.header-search .search-popup button[type="submit"] img.custom-search-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Hide the gigantic input dropdown container by default */
  .search-popup {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    z-index: 999 !important;

    /* Closed default styling states */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.25s ease !important;
  }

  /* Toggled display view window style properties */
  .header-search.open .search-popup {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(4px) !important;
  }

  .search-popup input[type="search"] {
    border: 1px solid #e2b2b2 !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: 14px !important;
    color: #2d3748 !important;
    outline: none !important;
    width: 130px !important;
    /* Compact viewport form input text box size dimensions */
  }

  .search-popup button[type="submit"] {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
  }

  /* SLIDEOUT MENU DRAWER WRAP DETAILS */
  header#masthead .drawer-wrap {
    display: none !important;
  }

  header#masthead .top-navigation .mobile-navigation.toggle-active+.drawer-wrap,
  header#masthead .top-navigation:has(.toggle-active) .drawer-wrap {
    display: block !important;
    position: absolute !important;
    top: 60px !important;
    /* Adjusted slightly so it doesn't overlap the mobile header */
    left: 0 !important;
    width: 100%;
    background: #ffffff !important;
    z-index: 9990 !important;
    padding: 20px 15px !important;
    box-sizing: border-box !important;
    max-height: calc(100vh - 150px) !important;
    overflow-y: scroll !important;
    /* Force scroll instead of auto */
    -webkit-overflow-scrolling: touch !important;
    /* Critical for mobile touch scrolling */
    overscroll-behavior: contain !important;
    /* Prevents scrolling the background page */
    border-radius: 22px;
    margin: 10px auto;
    background: #fff;
  }

  header#masthead .drawer-wrap .drawer,
  header#masthead .drawer-wrap .main-navigation,
  header#masthead .drawer-wrap ul.menu {
    background: transparent !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  header#masthead .drawer-wrap ul.menu li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  header#masthead .drawer-wrap ul.menu a {
    display: block !important;
    width: 100% !important;
    padding: 16px 10px !important;
    color: #111111 !important;
    font-size: 19px !important;
    font-weight: 500 !important;
    border-top: 1px solid #eeeeee !important;
    white-space: normal;
  }

  header#masthead .drawer-wrap ul.menu li.menu-item-has-children {
    position: relative !important;
  }

  header#masthead .drawer-wrap ul.menu .toggle-sub {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 50px !important;
    height: 57px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
  }

  header#masthead .drawer-wrap ul.sub-menu .toggle-sub {
    position: absolute !important;
    right: 20px !important;
    top: 0 !important;
    width: 50px !important;
    height: 57px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
  }

  header#masthead .drawer-wrap ul.menu ul.sub-menu {
    display: none !important;
    flex-direction: column !important;
    width: 100% !important;
    padding-left: 20px !important;
    margin: 0 !important;
  }


  header#masthead .drawer-wrap ul.menu li:has(> .toggle-sub[aria-expanded="true"])>ul.sub-menu,
  header#masthead .drawer-wrap ul.menu ul.sub-menu.is-open {
    display: flex !important;
  }

  header#masthead .drawer-wrap ul.menu li.menu-item-has-children>a {
    padding-right: 50px !important;
    box-sizing: border-box !important;
  }

  header#masthead .drawer-wrap ul.menu .toggle-sub i,
  header#masthead .drawer-wrap ul.menu .toggle-sub svg {
    color: #333333 !important;
    display: inline-block !important;
  }

  header#masthead .drawer-wrap ul.menu li.menu-item-has-children>a::after,
  header#masthead .drawer-wrap ul.menu li.menu-item-has-children>a::before {
    content: none !important;
    display: none !important;
  }

  /* Prevent native browser text selection and blue tap highlight on menu items */
  header#masthead .drawer-wrap * {
    -webkit-user-select: none !important;
    /* Safari / Chrome */
    -moz-user-select: none !important;
    /* Firefox */
    -ms-user-select: none !important;
    /* IE / Edge */
    user-select: none !important;
    /* Standard */
    -webkit-tap-highlight-color: transparent !important;
    /* Mobile touch highlight */
  }
}

/* ===== SECTION - YOUR PATH ===== */

.rbx-course-section {
  width: 100%;
  background-color: #f5efe7 !important;
}

.rbx-wrapper {
  -webkit-tap-highlight-color: transparent !important;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-top: 30px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 0px;
}

/* ===== TITLE ===== */
.rbx-title {
  font-size: 50px;
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
  text-align: center;
}

@media screen and (max-width: 800px) {
  .rbx-title {
    font-size: 36px !important;
  }
}

.rbx-subtitle {
  color: #777;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 40px;
  text-align: center;
}

/* ===== FILTERS ===== */
.rbx-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  justify-content: center;
}

.rbx-filter {
  position: relative;
  border: none;
  background: #ffffff;
  color: #444;
  padding: 14px 24px;
  border-radius: 40px;
  cursor: pointer;
  font-weight: 500;
  overflow: hidden;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  transition:
    transform 0.35s cubic-bezier(.22, 1, .36, 1),
    background 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.rbx-filter:hover,
.rbx-filter:focus-visible,
.rbx-active {
  background: #8B1E2D;
  color: #fff;
  border-color: #8B1E2D;
  outline-color: #8B1E2D;

  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 12px 30px rgba(139, 30, 45, 0.25),
    0 0 0 5px rgba(139, 30, 45, 0.06);
}







/* Slower and smoother light sweep animation on hover */
.rbx-filter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
      transparent 20%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 80%);
  transform: translateX(-130%);
  /* Increased duration to 1s and smoothed the timing curve */
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.rbx-filter:hover::before {
  transform: translateX(130%);
}

/* Soft ambient glow on hover */
.rbx-filter::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(139, 30, 45, 0.25);
  filter: blur(20px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
  pointer-events: none;
}

.rbx-filter:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ===== GRID ===== */
.rbx-grid-wrapper {
  position: relative;
  transition: height .45s ease;
  overflow: hidden;
}

.rbx-grid-panel {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;

  /* FIX: Added padding at the top so hovered cards don't get cut off */
  padding-top: 15px;
  margin-top: 15px;
  padding-bottom: 50px;
  padding-left: 3px;
  padding-right: 3px;
}

.rbx-grid-panel.rbx-show {
  display: grid;
  animation: rbxFadeIn 0.4s ease forwards;
}

@keyframes rbxFadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== CARD ===== */
.rbx-card {
  transition: top 0.4s;
  position: relative;
  top: 0;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  display: block;
  /* FIX: Makes the link container behave like a block element */
  text-decoration: none;
  /* FIX: Removes default underline from text inside the card */
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease;
}

.rbx-card:hover {
  box-shadow: 0 3px 3px rgba(0, 0, 0, .15);
  top: -7px;
  transition: ease top 0.5s !important;
}

body {
  min-width: 240px;
}

.rbx-image {
  max-width: 450px;
  min-height: 250px !important;
  max-height: 250px !important;
  width: 100% !important;
  /* FIX: Ensures the image width is consistent across all cards */
  height: auto;
  /* Scales naturally depending on the image's original dimensions */
  display: block !important;
  /* Forces a clean 4:3 box shape */
  object-fit: cover;
  object-position: top !important;
}

@media screen and (min-width: 938px) and (max-width: 1023px) {
  .rbx-image {
    min-width: 490px !important;
    object-fit: stretch !important;
    object-position: top !important;
  }

  .rbx-grid-panel {
    margin-right: 10px;
  }

  .rbx-wrapper {
    margin-left: 10px;
  }
}

@media screen and (min-width: 470px) and (max-width: 768px) {

  .rbx-card,
  .rbx-image {
    width: 450px !important;
    object-position: top !important;
  }
}

@media screen and (min-width: 370px) and (max-width: 470px) {

  .rbx-card,
  .rbx-image {
    width: 350px !important;
    object-position: top !important;
  }
}

@media screen and (min-width: 270px) and (max-width: 370px) {

  .rbx-card,
  .rbx-image {
    width: 250px !important;
    object-position: top !important;
  }
}

#rbx-img-classroom {
  max-width: 520px !important;
  max-height: 300px !important;
  width: 100% !important;
  /* FIX: Ensures the image width is consistent across all cards */
  height: auto;
  /* Scales naturally depending on the image's original dimensions */
  display: block !important;
  object-fit: scale-down !important;
  object-position: center center !important;
}



/* ===== BODY ===== */
.rbx-body {
  padding: 20px;
}

.rbx-heading {
  font-size: 26px;
  margin-bottom: 10px;
  color: #333;
}

.rbx-text {
  color: #666;
  line-height: 1.55;
  font-size: 15px;
  margin-bottom: 18px;
}

/* ===== TAGS ===== */
.rbx-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 25px;
}

.rbx-tags span {
  background: #f4f4f4;
  padding: 7px 13px;
  border-radius: 40px;
  font-size: 13px;
  color: #666;
}

/* ===== FOOTER ===== */
.rbx-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* FIX: Targeted the span class instead of a nested 'a' tag */
.rbx-footer .rbx-more-link {
  color: #8B1E2D;
  font-weight: 700;
  transition: .3s;
}

.rbx-card:hover .rbx-more-link {
  letter-spacing: .5px;
}

.rbx-footer span {
  color: #8B1E2D;
  font-weight: 700;
}

/* ===== RESPONSIVE ===== */
@media(max-width: 1024px) {
  .rbx-grid-panel {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 768px) {
  .rbx-grid-panel {
    grid-template-columns: 1fr;
    place-items: center;
    /* Automatically centers vertically and horizontally */
    text-align: center;
    /* Ensures standard text inside lines up perfectly */

  }

  .rbx-title {
    font-size: 42px;
  }

  .rbx-card {
    max-width: 450px;

  }
}

/* Container for the whole section */
.custom-stats-section {
  position: relative;
  width: 100%;
  /* Reduced top and bottom padding per request */
  padding: 40px 20px;
  background-color: #ffffff;
  overflow: hidden;
  box-sizing: border-box;
  border: none !important;
}

.custom-stats-section * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Container Layout */
.stats-container {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
  position: relative;
  z-index: 2;
}

/* Left Column Styling */
.stats-left-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 40px;
}

.stats-huge-number {
  font-size: 110px;
  font-weight: 400;
  line-height: 1;
  color: #8B1E2D;
  /* Updated Accent Color */
  letter-spacing: -2px;
}

.stats-title-main {
  font-size: 22px;
  font-weight: 600;
  color: #2D2D2D;
  margin-top: 10px;
  margin-bottom: 8px;
}

.stats-desc-main {
  font-size: 16px;
  color: #6E6E6E;
  line-height: 1.5;
}

/* Right Column & Row Items Styling */
.stats-right-col {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.stats-row-item {
  border-left: 2px solid #8B1E2D;
  /* Updated Accent Color Line */
  padding-left: 25px;
}

.stats-row-number {
  font-size: 42px;
  font-weight: 400;
  line-height: 1.1;
  color: #8B1E2D;
  /* Updated Accent Color */
}

.stats-row-title {
  font-size: 18px;
  font-weight: 600;
  color: #2D2D2D;
  margin-top: 6px;
  margin-bottom: 4px;
}

.stats-row-desc {
  font-size: 14px;
  color: #6E6E6E;
  line-height: 1.5;
}



/* Responsive Stacking for Tablets and Mobile */
@media (max-width: 768px) {
  .stats-container {
    flex-direction: column;
    gap: 50px;
    align-items: flex-start;
  }

  .stats-left-col {
    padding-left: 0;
  }

  .stats-huge-number {
    font-size: 90px;
  }
}

/* Container for the whole section */
.wm-custom-testimonials-section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 20px;
  color: #333;
  border: none !important;
}

/* Main Heading */
.wm-custom-main-title {
  text-align: center;
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 40px;
  color: #111;
}

/* Grid layout for the cards */
.wm-custom-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 30px;
}

/* Responsive grid for tablets and desktops */
@media (min-width: 768px) {
  .wm-custom-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .wm-custom-testimonials-section {
    padding: 60px 20px;
    max-width: 500px;
  }
}

/* Individual Card */
.wm-custom-card {
  background-color: #f5efe7;
  border-radius: 60px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

/* Image Wrapper */
.wm-custom-image-wrapper {
  position: relative;
  border-radius: 60px;
  width: 100%;
  padding-top: 100%;
  /* 1:1 Aspect Ratio */
}

/* Image styling */
.wm-custom-img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 500px;
  max-height: 1000px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
}



/* Text Content Container */
.wm-custom-content {
  padding: 30px 20px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Stars */
/* Star Container */
.wm-custom-stars {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-bottom: 16px;
}

.wm-custom-star-icon {
  width: 32px;
  /* Slightly larger to emphasize the rounded geometry */
  height: 32px;
  color: #FFC107;
  /* Smooth, modern amber-gold */
}

/* Card Title */
.wm-custom-card-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 15px 0;
  line-height: 1.3;
}

/* Card Paragraph Text */
.wm-custom-card-text {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
  margin: 0 0 20px 0;
  flex-grow: 1;
}

/* Author Name */
.wm-custom-author {
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  margin: 0;
  color: #333;
}

/* ============================================
   SCROLL FADE-IN (Bulletproof Override)
   ============================================ */

/* Force initial hidden state with maximum specificity */
body .fade-in,
body .fade-up,
body .fade-down,
body .fade-left,
body .fade-right,
body .stagger-children>* {
  opacity: 0 !important;
  transition: opacity 1s ease-out, transform 1s ease-out !important;
  will-change: opacity, transform;
}

body .fade-up {
  transform: translateY(40px) !important;
}

body .fade-down {
  transform: translateY(-40px) !important;
}

body .fade-left {
  transform: translateX(-40px) !important;
}

body .fade-right {
  transform: translateX(40px) !important;
}

/* The visible state — must beat any theme opacity rules */
body .fade-in.visible,
body .fade-up.visible,
body .fade-down.visible,
body .fade-left.visible,
body .fade-right.visible,
body .stagger-children.visible>* {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}

/* Stagger delays */
body .stagger-children.visible>*:nth-child(1) {
  transition-delay: 0s;
}

body .stagger-children.visible>*:nth-child(2) {
  transition-delay: 0.15s;
}

body .stagger-children.visible>*:nth-child(3) {
  transition-delay: 0.30s;
}

body .stagger-children.visible>*:nth-child(4) {
  transition-delay: 0.45s;
}

body .stagger-children.visible>*:nth-child(5) {
  transition-delay: 0.60s;
}

body .stagger-children.visible>*:nth-child(6) {
  transition-delay: 0.75s;
}


/* All children start hidden */
.stagger-children>.wm-custom-card.fade-up,
.stagger-children>.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* When parent gets .visible from JS, each child animates with a delay */
.stagger-children.visible>.wm-custom-card.fade-up:nth-child(1),
.stagger-children.visible>.fade-up:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s !important;
}

.stagger-children.visible>.wm-custom-card.fade-up:nth-child(2),
.stagger-children.visible>.fade-up:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s !important;
}

.stagger-children.visible>.wm-custom-card.fade-up:nth-child(3),
.stagger-children.visible>.fade-up:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1s !important;
}


/* ============================================
                     Other
   ============================================ */


@media (min-width: 1200px) {
  .min-width {
    min-width: 1120px;
  }
}

@media (min-width: 1100px) and (max-width: 1200px) {
  .min-width {
    min-width: 1020px;
  }
}

@media (min-width: 1000px) and (max-width: 1100px) {
  .min-width {
    min-width: 920px;
  }
}

.wp-block-columns.min-width.is-layout-flex.wp-container-core-columns-is-layout-8f761849.wp-block-columns-is-layout-flex {
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-bottom: 60px !important;
  margin-left: 10px;
  margin-right: 10px;

}

@media (max-width: 1200px) {
  .wp-block-columns.min-width.is-layout-flex.wp-container-core-columns-is-layout-8f761849.wp-block-columns-is-layout-flex {
    width: 90%;
  }
}

@media (max-width: 1200px) {
  .wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-8f761849.wp-block-columns-is-layout-flex {
    position: relative !important;
    left: auto !important;
    transform: none !important;

  }

  .wp-block-columns {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
}

.alignfull,
.alignwide {
  width: auto !important;
}

.wpcf7-response-output {
  padding: 32px 28px !important;
  border-radius: 6px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  background-color: #f5efe7 !important;
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
}

form[data-status="invalid"] .wpcf7-response-output {
  border: 2px solid #d20000 !important;
  color: #d20000 !important;
  font-weight: bold !important;
}

.wpcf7 form.sent .wpcf7-response-output {
  color: #46b450 !important;
  font-weight: bold !important;
}


.wpcf7-form.init,
.wpcf7-form.sent,
.wpcf7-form.invalid,
.wpcf7-form.submitting {
  padding: 30px !important;
  background-color: #f5efe7 !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {

  border-radius: 5px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.wpcf7-form-control.wpcf7-tel.wpcf7-text.wpcf7-validates-as-tel {

  border-radius: 5px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required {

  border-radius: 5px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.wpcf7-form-control.wpcf7-textarea {
  resize: none !important;
  border-radius: 5px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

@media screen and (min-width: 1200px) {
  .wpcf7-form-control-wrap .wpcf7-form-control.wpcf7-tel.wpcf7-validates-as-required.wpcf7-text.wpcf7-validates-as-tel {
    width: 100% !important;
    /* min-width: 482px !important; */
  }
}

@media screen and (max-width: 1200px) {
  .wpcf7-form-control.wpcf7-tel.wpcf7-validates-as-required.wpcf7-text.wpcf7-validates-as-tel {
    width: 100% !important;

  }
}

.wp-block-separator.has-alpha-channel-opacity {
  width: 100% !important;
  opacity: 0.3 !important;
}

.wp-block-details.alignwide.is-layout-flow.wp-block-details-is-layout-flow {
  max-width: 650px !important;
  position: relative !important;
  margin: 30px auto !important;
  border-bottom: 1px solid #eaeaea;
}

.wp-block-details.alignwide.is-layout-flow.wp-block-details-is-layout-flow summary {
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  -webkit-tap-highlight-color: transparent !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 20px;
  font-weight: 500;
  color: #2b2b2b;
  padding-bottom: 24px !important;
  padding-right: 10px !important;
  padding-left: 10px !important;
}

.wp-block-details.alignwide.is-layout-flow.wp-block-details-is-layout-flow summary::after {
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  -webkit-tap-highlight-color: transparent !important;
  content: "+";
  font-size: 26px;
  font-weight: 700;
  color: #8B1E2D;
  /* Matches the sage green from your mockup */
  line-height: 1;
  display: inline-block;
  transform-origin: center;
  /* Ensures it spins perfectly on its axis */

  /* Controls the speed and smoothness of the spin */
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

details.wp-block-details.alignwide.is-layout-flow.wp-block-details-is-layout-flow[open] summary::after {
  transform: rotate(45deg);
}

/* Triggers a fluid slide-and-fade effect the moment the block opens */
details.wp-block-details[open] p.wp-block-paragraph {
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  -webkit-tap-highlight-color: transparent !important;
  animation: smoothReveal 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  overflow: hidden;
  margin-top: 0;
  padding-bottom: 24px;
  font-size: 15px;
  color: #555555;
  line-height: 1.6;
}



/* 5. The physics of the text dropdown expansion */
@keyframes smoothReveal {
  0% {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    /* Starts slightly tucked up */
  }

  100% {
    max-height: 1000px;
    /* Big enough to fit any length of answer text */
    opacity: 1;
    transform: translateY(0);
    /* Glides down into place */
  }
}

.wp-block-details summary {
  list-style: none;
  /* Standard browsers */
}

/* 1. The reverse animation for hiding */
@keyframes smoothHide {
  0% {
    max-height: 1000px;
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* 2. Apply the hiding animation when the JS adds the 'is-closing' class */
details.wp-block-details.is-closing p.wp-block-paragraph {
  animation: smoothHide 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 3. Ensure the plus/x icon spins back smoothly when closing */
details.wp-block-details.is-closing summary::after {
  transform: rotate(0deg);
}

.wp-block-details summary::-webkit-details-marker {
  display: none;
  /* Safari / older Chrome */
}

.wp-block-details.alignwide.is-layout-flow.wp-block-details-is-layout-flow .wp-block-paragraph {
  padding-top: 24px !important;
  font-size: 18px !important;

}

.arrow-align {
  clear: both !important;
  /* Prevents lower arrows from pushing down diagonally */
  display: flow-root !important;
  /* Contains internal float heights clean per item */
  overflow: visible !important;
  padding-top: 12px !important;
}

.arrow-align img {
  float: left !important;
  width: 50px !important;
  height: 40px !important;
  margin-top: -13px !important;
  margin-right: 1px !important;
}

.arrow-align span {
  min-width: 0;
  white-space: normal;
  word-break: normal;
}

.arrow-align>span,
.arrow-align>span>span {
  display: inline !important;
  flex: none !important;
}

.w-o-tick-align {
  overflow: visible !important;
  padding-top: 12px !important;
}

.w-o-tick-align img {
  float: left !important;
  width: 50px !important;
  /* Adjust tick size */
  height: 45px !important;
  margin-top: -20px !important;
  /* Pulls tick upward */
  margin-right: 0px !important;
}

.w-o-tick-align span {
  min-width: 0;
  white-space: normal;
  word-break: normal;
}

.w-o-tick-align>span,
.w-o-tick-align>span>span {
  display: inline !important;
  flex: none !important;
}


.tick-align {
  overflow: visible !important;
  padding-top: 12px !important;
}

.tick-align img {
  float: left !important;
  width: 34px !important;
  /* Adjust tick size */
  height: 45px !important;
  margin-top: -20px !important;
  /* Pulls tick upward */
  margin-right: 4px !important;
}

.tick-align span {
  min-width: 0;
  white-space: normal;
  word-break: normal;
}

.tick-align>span,
.tick-align>span>span {
  display: inline !important;
  flex: none !important;
}

.black-tick-align-1 {
  overflow: visible !important;
  padding-top: 12px !important;
}

.black-tick-align-1 img {
  float: left !important;
  width: 30px !important;
  /* Adjust tick size */
  height: 40px !important;
  margin-top: -15px !important;
  /* Pulls tick upward */
  margin-right: 4px !important;
}

.black-tick-align-1 span {
  min-width: 0;
  white-space: normal;
  word-break: normal;
}

.black-tick-align-1>span,
.black-tick-align-1>span>span {
  display: inline !important;
  flex: none !important;
}


.black-tick-align {
  overflow: visible !important;
  padding-top: 12px !important;
}

.black-tick-align img {
  float: left !important;
  width: 30px !important;
  /* Adjust tick size */
  height: 40px !important;
  margin-top: -10px !important;
  /* Pulls tick upward */
  margin-right: 4px !important;
}

.black-tick-align span {
  min-width: 0;
  white-space: normal;
  word-break: normal;
}

.black-tick-align>span,
.black-tick-align>span>span {
  display: inline !important;
  flex: none !important;
}

.b-tick-align {
  overflow: visible !important;
  padding-top: 12px !important;
  margin-left: -10px;
}

.b-tick-align img {
  float: left !important;
  width: 40px !important;
  /* Adjust tick size */
  height: 40px !important;
  margin-top: -10px !important;
  /* Pulls tick upward */
  margin-right: 4px !important;
}

.b-tick-align span {
  min-width: 0;
  white-space: normal;
  word-break: normal;
}

.b-tick-align>span,
.b-tick-align>span>span {
  display: inline !important;
  flex: none !important;
}

.o-tick-align {
  overflow: visible !important;
  padding-top: 4px !important;
}

.o-tick-align img {
  float: left !important;
  width: 45px !important;
  /* Adjust tick size */
  height: 40px !important;
  margin-top: 0px !important;
  /* Pulls tick upward */
  margin-right: 4px !important;
}

.o-tick-align span {
  min-width: 0;
  white-space: normal;
  word-break: normal;
}

.o-tick-align>span,
.o-tick-align>span>span {
  display: inline !important;
  flex: none !important;
}


.o-tick-align-2 {
  overflow: visible !important;
  padding-top: 4px !important;
}

.o-tick-align-2 img {
  float: left !important;
  width: 30px !important;
  /* Adjust tick size */
  height: 30px !important;
  margin-top: -5px !important;
  /* Pulls tick upward */
  margin-right: 4px !important;
}

.o-tick-align-2 span {
  min-width: 0;
  white-space: normal;
  word-break: normal;
}

.o-tick-align-2>span,
.o-tick-align-2>span>span {
  display: inline !important;
  flex: none !important;
}

/* 1. Reset your flex layout settings */



.icon-align {
  overflow: hidden;
}

.icon-align img {
  float: left;
  width: 25px;
  margin-right: 16px;
}

.icon-align span {
  min-width: 0;
  white-space: normal;
  word-break: normal;
}

.icon-align>span,
.icon-align>span>span {
  display: inline !important;
  flex: none !important;
}

.wp-block-group__inner-container.is-layout-constrained.wp-block-group-is-layout-constrained {
  width: 100% !important;
}

.wp-block-group.alignwide.aos-init.aos-animate {
  width: 100% !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Base color for the icons - matching the generated style */
.social-icon {
  fill: #000000;
  /* Initial dark color */
  transition: fill 0.3s ease;
  /* Smooth transition */
  width: 40px;
  /* Adjust size as needed */
  height: 50px;
}

.social-icon-classroom {
  fill: #000000;
  /* Initial dark color */
  transition: fill 0.3s ease;
  /* Smooth transition */
  width: 40px;
  /* Adjust size as needed */
  height: 50px;
}

.social-icon-classroom:hover {
  fill: #458500;
}

/* Color change on hover */
.social-icon:hover {
  fill: #8B1E2D;
  /* New hover color */
}

.wp-image-415 {
  max-width: 45px !important;
  min-height: 45px;
  min-width: 45px;
  aspect-ratio: 1 / 1;
}

.wp-image-416 {
  width: 70px;
  min-height: 45px;
  min-width: 55px;
  aspect-ratio: 1 / 1;
}

.wp-image-422 {
  width: 60px;
  min-height: 45px;
  min-width: 50px;
  aspect-ratio: 1 / 1;
}

@media screen and (min-width: 782px) and (max-width: 820px) {
  .follow-us-text {
    font-size: 22px !important;
  }
}

#block-74 {
  margin-top: 0px !important;
}

#block-25 .wp-block-image {
  margin-bottom: 0px !important;
}

#block-43 {
  margin-top: 10px !important;
}

#block-57 {
  margin-top: 10px !important;
}

#block-75 {
  margin-top: 0px !important;
}

#block-55 .wp-block-image {
  margin-bottom: 0px !important;
}

.drawer .drawer-navigation .drop-open ul.drop-active {
  margin: 0px !important;
}

.maps {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
  border-radius: 6px;
}

h1 {
  font-size: 60px !important;
}

h2 {
  font-size: 40px !important;
}

@media screen and (max-width: 440px) {
  h2 {
    font-size: 30px !important;
  }
}

ol.gpb-number-list li::before {
  background-color: #d4af37 !important;
  font-weight: bold;
}

.wp-image-616 {
  border-radius: 22px !important;
}


.add-map {
  justify-content: center !important;
  align-items: center;
  overflow: hidden;
  margin: 0px auto !important;
  width: 1120px;
  height: 840px;
  max-width: 100%;
}

@media screen and (max-width: 940px) and (min-width: 660px) {
  .icon-align-centre {
    font-size: 30px !important;
  }
}

@media screen and (max-width: 1200px) and (min-width: 1000px) {
  .icon-align-centre {
    font-size: 30px !important;
  }
}

@media screen and (max-width: 660px) {
  .icon-align-centre {
    font-size: 20px !important;
  }
}

.icon-align-centre {
  justify-content: center !important;
  align-items: center;
  overflow: hidden;
}

.icon-align-centre img {
  float: center;
  width: 25px;
  margin-right: 16px;
}

.icon-align-centre span {
  min-width: 0;
  white-space: normal;
  word-break: normal;
}

.icon-align-centre>span,
.icon-align-centre>span>span {
  display: inline !important;
  flex: none !important;
}

.add-min-width {
  min-width: 100%;
}


.round-hero .gb-container-inside .gb-container-image-wrap .gb-container-image {
  margin: 0px auto;
  border: none;
  border-bottom-right-radius: 22px !important;
  border-bottom-left-radius: 22px !important;
  max-width: 1400px !important;
  width: 100%;
  justify-content: center;
  /* Centers horizontally */
  align-items: center;
}

.back-box-1 {
  align-self: flex-start;
  padding: 30px !important;
  background-color: #f5efe7 !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.back-box-2 {
  padding: 30px !important;
  background-color: #f2f2f2 !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

@media screen and (min-width: 1024px) {
  .round-hero .gb-container-inside .gb-container-image-wrap .gb-container-image {
    min-height: 550px !important;
  }

  .round-hero {
    min-height: 550px !important;
  }
}

@media screen and (min-width: 0px) and (max-width: 1024px) {
  .round-hero .gb-container-inside .gb-container-image-wrap .gb-container-image {
    min-height: 450px !important;
  }

  .round-hero {
    min-height: 450px !important;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1300px) {
  .spacer-add {
    min-height: 200px !important;
  }
}

@media screen and (min-width: 815px) and (max-width: 1070px) {
  .text-size-change {
    font-size: 30px !important;
  }
}

@media screen and (min-width: 782px) and (max-width: 815px) {
  .text-size-change {
    font-size: 25px !important;
  }
}

@media screen and (min-width: 395px) and (max-width: 520px) {
  .text-size-change {
    font-size: 30px !important;
  }
}

@media screen and (min-width: 0px) and (max-width: 395px) {
  .text-size-change {
    font-size: 25px !important;
  }
}

/* ========================================================= */
/* DESKTOP STYLES (Screen widths 900px and wider)            */
/* ========================================================= */
.edu-schedule-container {
  color: #333333;
  width: 100%;
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 15px;
  box-sizing: border-box;
}

.edu-schedule-container * {
  box-sizing: border-box;
}

.edu-schedule-container table.edu-custom-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 18px;
  margin: 0;
  padding: 0;
  background: #FFFFFF;
  border: 1px solid #F5EFE7;
  /* Sandy Gray */
  border-radius: 8px;
  overflow: hidden;
}

/* Table Header styling */
.edu-schedule-container table.edu-custom-table thead {
  background-color: #C9A27E;
  /* Brand Ochre */
}

.edu-schedule-container table.edu-custom-table th {
  color: #FFFFFF;
  font-weight: 600;
  padding: 16px 20px;
  font-size: 18px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: none;
}

/* Alternating Desktop Rows */
.edu-schedule-container table.edu-custom-table tbody tr {
  border-bottom: 1px solid #F5EFE7;
  transition: background-color 0.2s ease;
}

.edu-schedule-container table.edu-custom-table tbody tr:nth-child(even) {
  background-color: #F9F3EC;
  /* Light Cream */
}

.edu-schedule-container table.edu-custom-table tbody tr:nth-child(odd) {
  background-color: #FFFFFF;
}


.edu-schedule-container table.edu-custom-table td {
  padding: 18px 20px;
  vertical-align: middle;
  color: #4a4a4a;
  line-height: 1.6;
  border: none;
}

/* Typography formatting */
.edu-schedule-container .edu-course-title {
  font-weight: 700;
  color: #2e2e2e;
  font-size: 20px;
  display: block;
  margin-bottom: 4px;
}

.edu-schedule-container .edu-course-subtext {
  color: #6d6d6d;
  font-size: 18px;
  font-weight: 400;
  display: block;
}

.edu-schedule-container .edu-date-highlight {
  font-weight: 600;
  color: #2e2e2e;
  display: block;
  font-size: 16px;
}

/* Form of Conduct Badges */
.edu-schedule-container .edu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 600;
}

.edu-schedule-container .edu-badge-distance {
  background-color: rgba(201, 162, 126, 0.15);
  /* Tinted Ochre */
  color: #987250;
  border: 1px solid rgba(201, 162, 126, 0.3);
}

.edu-schedule-container .edu-badge-present {
  background-color: #F2F2F2;
  /* Cool Gray */
  color: #555555;
  border: 1px solid #e0e0e0;
}

/* Status Tags */
.edu-schedule-container .edu-status-tag {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

.edu-schedule-container .edu-status-upcoming {
  background-color: rgba(69, 201, 80, 0.788);
  color: #000000;
  border: 1px solid rgba(94, 136, 92, 0.35);
}

.edu-schedule-container .edu-status-active {
  background-color: #ffa31a;
  color: #000000;
}

.edu-schedule-container .edu-status-completed {
  background-color: #ff0000;
  color: #000000;
}

.edu-schedule-container .edu-row-completed {
  opacity: 0.65;
}

/* ========================================================= */
/* MODERN BREAKPOINT: MOBILE CONVERSION (Under 900px Width) */
/* ========================================================= */
@media (max-width: 900px) {
  .edu-schedule-container {
    padding: 0 10px;
  }

  /* Prevent parent borders/shadows from wrapping the mobile grid cards uglily */
  .edu-schedule-container table.edu-custom-table {
    border: none !important;
    background: transparent !important;
  }

  /* Forces structure into neat, vertical card stacks */
  .edu-schedule-container tbody,
  .edu-schedule-container tr,
  .edu-schedule-container td {
    display: block !important;
    width: 100% !important;
  }

  /* Hide the tabletop desktop row */
  .edu-schedule-container thead {
    display: none !important;
  }

  /* Master Modern Card Wrapper */
  .edu-schedule-container table.edu-custom-table tbody tr {
    display: grid !important;
    grid-template-areas:
      "title badge"
      "location location"
      "period period";
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 12px;
    border: 1px solid #F5EFE7 !important;
    border-left: 4px solid #C9A27E !important;
    /* Premium Ochre Accent Stripe */
    box-shadow: 0 4px 16px rgba(201, 162, 126, 0.08);
    /* Sophisticated subtle brand shadow */
    transition: transform 0.2s ease;
  }

  /* Restores the alternating brand colors to the mobile cards */
  .edu-schedule-container table.edu-custom-table tbody tr:nth-child(even) {
    background-color: #F9F3EC !important;
    /* Premium Light Cream */
  }

  .edu-schedule-container table.edu-custom-table tbody tr:nth-child(odd) {
    background-color: #FFFFFF !important;
  }

  /* Card Cell Styling Reset */
  .edu-schedule-container table.edu-custom-table td {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  /* Row 1: Course Title Column */
  .edu-schedule-container table.edu-custom-table td:nth-child(1) {
    grid-area: title;
  }

  /* Row 1: Format Badge Column (Floated Right) */
  .edu-schedule-container table.edu-custom-table td:nth-child(2) {
    grid-area: badge;
    justify-self: end;
    align-self: start;
  }

  /* Row 2: Location Block with minimalist inline SVG Map-Pin icon */
  .edu-schedule-container table.edu-custom-table td:nth-child(3) {
    grid-area: location;
    padding-left: 24px !important;
    position: relative;
    font-size: 15px;
    color: #555555;
    margin-top: 6px;
    padding-top: 10px !important;
    border-top: 1px solid rgba(201, 162, 126, 0.15) !important;
    /* Clean inner border divider */
  }

  /* Inline SVG Location Pin */
  .edu-schedule-container table.edu-custom-table td:nth-child(3)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C9A27E'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
  }

  /* Row 3: Dates Block with minimalist inline SVG Calendar icon */
  .edu-schedule-container table.edu-custom-table td:nth-child(4) {
    grid-area: period;
    padding-left: 24px !important;
    position: relative;
    margin-top: 2px;
  }

  /* Inline SVG Calendar */
  .edu-schedule-container table.edu-custom-table td:nth-child(4)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C9A27E'><path d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
  }

  /* Spacing adjustments on inner typography tags on mobile */
  .edu-schedule-container .edu-course-title {
    font-size: 18px;
  }

  .edu-schedule-container .edu-course-subtext {
    font-size: 16px;
  }

  .edu-schedule-container .edu-date-highlight {
    font-size: 16px;
  }

  /* Styling for completed course cards */
  .edu-schedule-container .edu-row-completed {
    border-left-color: #7a7a7a !important;
    opacity: 0.7;
  }

  /* Gray out icons on completed courses for better understanding */
  .edu-schedule-container .edu-row-completed td:nth-child(3)::before,
  .edu-schedule-container .edu-row-completed td:nth-child(4)::before {
    filter: grayscale(1) opacity(0.5);
  }
}

/* ========================================================= */
/* ПРЕВОД */
/* ========================================================= */


/* Изолирани променливи */
.ling-lp-total-protection-shield {
  --ling-lp-cream-soft: #FFF6E5;
  --ling-lp-alabaster: #F5EFE7;
  --ling-lp-light-grey: #F2F2F2;
  --ling-lp-warm-grey: #D6D0C4;
  --ling-lp-mid-grey: #B7B7B7;
  --ling-lp-gold-accent: #D4AF37;
  --ling-lp-white: #ffffff;
  --ling-lp-text-dark: #2A2A2A;
  background-color: var(--ling-lp-cream-soft);
}

.ling-lp-total-protection-shield * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ХЕДЪР СЕКЦИЯ - ДЕКСТОП */
.ling-lp-header-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 100px 20px 40px 20px;
}

.ling-lp-main-container {
  width: 100%;
  max-width: 1400px;
  background: var(--ling-lp-white);
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(183, 183, 183, 0.2);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  overflow: hidden;
  border: 1px solid var(--ling-lp-alabaster);
}

.ling-lp-content-side {
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(135deg, var(--ling-lp-white) 0%, var(--ling-lp-light-grey) 100%);
}

.ling-lp-status-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 8px 18px;
  background-color: var(--ling-lp-alabaster);
  border: 1px solid var(--ling-lp-warm-grey);
  color: var(--ling-lp-text-dark);
  border-radius: 50px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.ling-lp-content-side h1 {
  font-size: 45px !important;
  line-height: 1.25;
  margin-bottom: 20px;
  font-weight: 700;
  color: var(--ling-lp-text-dark);
  word-break: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.ling-lp-content-side div,
h1 span {
  color: var(--ling-lp-gold-accent);
}

.ling-lp-content-side p {
  font-size: 20px;
  color: #444444;
  line-height: 1.6;
  margin-bottom: 35px;
  max-width: 540px;
}

.ling-lp-cta-group {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.ling-lp-btn-primary {
  background-color: var(--ling-lp-gold-accent);
  color: var(--ling-lp-white);
  border: none;
  padding: 16px 36px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.ling-lp-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
  filter: brightness(1.05);
}

.ling-lp-visual-side {
  background-color: var(--ling-lp-alabaster);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 40px;
  border-left: 1px solid var(--ling-lp-warm-grey);
}

.ling-lp-bg-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.35;
  pointer-events: none;
}

.ling-lp-col-grid {
  background-color: var(--ling-lp-alabaster);
  flex-direction: column;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
  display: flex;
  border-radius: 30px !important;
}

.ling-lp-grid-image-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 60%;
  max-height: 500px !important;

}

.ling-lp-grid-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  object-position: top;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

.ling-lp-image-wrapper {
  position: relative;
  width: 100%;
  max-width: 380px;
  z-index: 2;
  transition: transform 0.5s ease;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(183, 183, 183, 0.25);
}

@media screen and (min-width: 900px) {
  .ling-lp-image-wrapper {
    scale: 1;
  }
}

.ling-lp-main-container:hover .ling-lp-image-wrapper {
  transform: scale(1.05) rotate(0.5deg);
}

.ling-lp-header-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
}

/* ТЯЛО НА СТРАНИЦАТА - МАКСИМАЛНА ШИРИНА 1120px */
.ling-lp-body-container {
  width: 100%;
  background-color: var(--ling-lp-white);
  color: var(--ling-lp-text-dark);
  padding: 60px 20px;
}

.ling-lp-section-container {
  width: 100%;
  max-width: 1120px;
  padding: 0 20px;
  margin: 0 auto 80px auto;
}

.ling-lp-section-title {
  font-size: 2.4rem;
  text-align: center;
  margin-bottom: 15px;
  font-weight: 700;
}

.ling-lp-section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--ling-lp-gold-accent);
  margin: 12px auto 0 auto;
  border-radius: 2px;
}

.ling-lp-section-subtitle {
  font-size: 20px;
  text-align: center;
  color: #555;
  max-width: 750px;
  margin: 0 auto 45px auto;
  line-height: 1.6;
}

/* РЕШЕТКА ЗА УСЛУГИТЕ */
.ling-lp-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.ling-lp-service-card {
  background-color: #F2F2F2;
  border: 1px solid #D6D0C4;
  border-radius: 16px;
  padding: 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease !important;
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
}

.ling-lp-services-grid .ling-lp-service-card:hover {
  transform: translateY(-8px) !important;
  background-color: #FFF6E5;
  border-color: #D4AF37;
  box-shadow: 0 10px 25px rgba(183, 183, 183, 0.15);
}

.ling-lp-card-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
}

.ling-lp-service-card h3 {
  font-size: 22px;
  margin-bottom: 12px;
  font-weight: 600;
}

.ling-lp-service-card p {
  font-size: 18px;
  color: #555;
  line-height: 1.6;
}

/* УСТНИ ПРЕВОДИ */
.ling-lp-interpretation-box {
  background-color: var(--ling-lp-alabaster);
  padding: 30px 50px 50px 50px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
}

.icon-container-upper {
  width: 70px;
  height: 70px;
  margin-bottom: 20px;
}

.icon-container-upper svg {
  width: 100%;
  height: 100%;
  display: block;
}

.icon-container {
  width: 70px;
  height: 70px;
  margin-bottom: 20px;
}

/* Ensures the SVGs scale cleanly to fill the container */
.icon-container svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ling-lp-interp-col h3 {
  font-size: 22px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ling-lp-text-dark);
}

.ling-lp-interp-col p {
  font-size: 18px;
  color: #444;
  line-height: 1.6;
}

.ling-lp-tip-box {
  grid-column: span 3;
  background-color: var(--ling-lp-cream-soft);
  border-left: 4px solid var(--ling-lp-gold-accent);
  padding: 24px 28px;
  border-radius: 0 12px 12px 0;
  display: flex;
  gap: 15px;
  align-items: flex-start;
  margin-top: 20px;
}

.ling-lp-tip-box p {
  font-size: 18px;
  color: #444;
  line-height: 1.6;
}

/* ЗАЩО НИЕ */
.ling-lp-why-us-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.ling-lp-why-card {
  text-align: center;
  padding: 35px 22px;
  border-radius: 16px;
  border: 1px solid var(--ling-lp-light-grey);
  background: var(--ling-lp-white);
  transition: all 0.3s ease;
}

.ling-lp-why-card:hover {
  transform: translateY(-5px);
  border-color: var(--ling-lp-gold-accent);
  box-shadow: 0 10px 20px rgba(212, 175, 55, 0.15);
}

.ling-lp-why-card .ling-lp-why-num {
  font-size: 3.6rem;
  font-weight: 800;
  color: var(--ling-lp-gold-accent);
  margin-bottom: 10px;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.ling-lp-why-card:hover .ling-lp-why-num {
  opacity: 1;
  transform: scale(1.2);
}

.ling-lp-why-card h4 {
  font-size: 20px;
  margin-bottom: 12px;
  font-weight: 600;
}

.ling-lp-why-card p {
  font-size: 18px;
  color: #555;
  line-height: 1.5;
}

/* АДАПТИВНОСТ И РЕЛАКСИРАНИ СТИЛОВЕ ПРИ ЕКРАНИ ПОД 900px */
@media (max-width: 1024px) {
  .ling-lp-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ling-lp-why-us-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 900px) and (max-width: 1050px) {
  .ling-lp-content-side h1 {
    font-size: 45px !important;
    line-height: 1;
    margin-bottom: 16px;
  }
}

@media (max-width: 900px) {
  .ling-lp-main-container {
    grid-template-columns: 1fr;
    border-radius: 16px;
  }

  .ling-lp-content-side {
    padding: 40px 30px;
    text-align: left;
  }

  .ling-lp-status-tag {
    font-size: 15px;
    padding: 6px 14px;
    margin-bottom: 16px;
  }

  .ling-lp-content-side h1 {
    font-size: 60px;
    line-height: 1.3;
    margin-bottom: 16px;
  }

  .ling-lp-content-side p {
    font-size: 18px;
    margin-bottom: 28px;
    max-width: 100%;
  }

  .ling-lp-visual-side {
    height: auto;
    padding: 40px 30px;
    border-left: none;
    border-top: 1px solid var(--ling-lp-light-grey);
  }

  .ling-lp-image-wrapper {
    max-width: 480px;
    width: 100%;
  }

  .ling-lp-interpretation-box {
    grid-template-columns: 1fr;
    padding: 30px 20px;
  }

  .ling-lp-tip-box {
    grid-column: span 1;
  }
}

@media (max-width: 600px) {
  .ling-lp-services-grid {
    grid-template-columns: 1fr;
  }

  .ling-lp-why-us-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (min-width: 385px) and (max-width: 540px) {
  .ling-lp-content-side h1 {
    font-size: 45px !important;
    line-height: 1;
    margin-bottom: 16px;
  }
}

@media screen and (min-width: 300px) and (max-width: 385px) {
  .ling-lp-content-side h1 {
    font-size: 35px !important;
    line-height: 1;
    margin-bottom: 16px;
  }
}

@media screen and (min-width: 0px) and (max-width: 300px) {
  .ling-lp-content-side h1 {
    font-size: 25px !important;
    line-height: 1;
    margin-bottom: 16px;
  }

  .ling-lp-status-tag {
    font-size: 10px !important;
  }
}

/* ОПТИМИЗАЦИЯ ЗА МОБИЛНИ УСТРОЙСТВА ПОД 480px ШИРИНА */
@media (max-width: 480px) {
  .ling-lp-header-wrapper {
    padding: 100px 15px 20px 15px;
  }

  .ling-lp-main-container {
    border-radius: 14px;
  }

  .ling-lp-content-side {
    padding: 30px 16px;
  }


  .ling-lp-content-side p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 24px;
  }

  .ling-lp-cta-group .ling-lp-btn-primary {
    width: 100%;
    padding: 14px 24px;
    font-size: 17px;
  }

  .ling-lp-visual-side {
    padding: 24px 16px;
  }

  .ling-lp-section-title {
    font-size: 1.85rem;
  }

  .ling-lp-body-container {
    padding: 40px 12px;
  }
}

/* ДОПЪЛНИТЕЛНА ЗАЩИТА ЗА МНОГО ТЕСНИ ЕКРАНИ (ПОД 360px) */
@media (max-width: 360px) {
  .ling-lp-content-side h1 {
    font-size: 1.55rem;
  }
}

/* ========================================================= */
/* Легализация */
/* ========================================================= */

/* СПЕЦИФИЧНИ СТИЛОВЕ ЗА СТРАНИЦАТА С ФИКСИРАНИ ШИРИНИ */

.ll-spec-page-container {
  font-size: 18px;
  /* Минимален размер на текста */
  line-height: 1.6;
  color: #333333;
  background-color: #ffffff;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.ll-spec-page-container *,
.ll-spec-page-container *::before,
.ll-spec-page-container *::after {
  box-sizing: inherit;
}

/* --- ХЕРО СЕКЦИЯ (HEADER) --- */
.ll-spec-hero-section {
  background-color: #F5EFE7;
  padding: 60px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1400px;
  /* Фиксирана ширина за Херо секцията */
  margin: 100px auto 30px auto;
  border-radius: 16px;
}

.ll-spec-hero-content {
  flex: 1.2;
}

.ll-spec-badge {
  display: inline-block;
  background-color: #FFF6E5;
  color: #D4AF37;
  padding: 6px 16px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 20px;
  border: 1px solid #D6D0C4;
}

.ll-spec-main-title {
  font-size: 42px;
  line-height: 1.1;
  color: #222222;
  margin: 0 0 24px 0;
  font-weight: 700;
  word-break: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.ll-spec-lead-text {
  font-size: 20px;
  color: #555555;
  margin-bottom: 32px;
}

.ll-spec-cta-button {
  display: inline-block;
  background-color: #D4AF37;
  color: #ffffff;
  padding: 16px 32px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  font-size: 19px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 6px rgba(212, 175, 55, 0.2);
}

.ll-spec-cta-button:hover {
  background-color: #c39f2e;
  transform: translateY(-4px);
  color: #000;
}

/* Стилизиране на изображението в Херо секцията */
.ll-spec-hero-img-wrapper {
  flex: 0.8;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease;
}

.ani-img:hover .ll-spec-hero-img-wrapper {
  transform: scale(1.03) rotate(0.5deg);
}

.ll-spec-hero-img {
  max-width: 400px;
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: 55% 50%;
  border-radius: 20px;
}

/* --- ОБЩО ВЕРТИКАЛНО ПОДРАВНЯВАНЕ НА СЕКЦИИТЕ (1120px) --- */
.ll-spec-benefits-section,
.ll-spec-info-section,
.ll-spec-cta-section {
  max-width: 1120px;
  /* Фиксирано вертикално подравняване */
  margin: 0 auto 80px auto;
  padding: 0 20px;
}

/* Секция с предимства */
.ll-spec-section-header {
  text-align: center;
  margin-bottom: 48px;
}

.ll-spec-section-title {
  font-size: 32px;
  color: #222222;
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
}

.ll-spec-section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: #D4AF37;
  border-radius: 2px;
}

.ll-spec-grid-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.ll-spec-card {
  background-color: #F2F2F2;
  padding: 32px;
  border-radius: 12px;
  border: 1px solid #D6D0C4;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
}

.ll-spec-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  background-color: #FFF6E5;
  border-color: #D4AF37;
}

.ll-spec-icon-box {
  width: 60px;
  height: 60px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ll-spec-card h3 {
  font-size: 22px;
  margin: 0 0 16px 0;
  color: #222222;
}

.ll-spec-card p {
  font-size: 18px;
  color: #666666;
  margin: 0;
}

/* Информационна секция с две колони */
.ll-spec-info-section {
  width: 100%;
  max-width: 1120px;
  padding: 0 20px;
  margin: 0 auto 80px auto;
}

.ll-spec-col-grid-custom {
  background-color: #F5EFE7;
  flex-direction: column;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
  display: flex;
  border-radius: 30px !important;
}

.ll-spec-grid-image-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 60%;
  max-height: 500px !important;
}

.ll-spec-grid-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  object-position: top;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

.ll-spec-grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  padding: 30px 50px 50px 50px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
}

.ll-spec-info-block-left .ll-spec-section-title::after {
  left: 0;
  transform: none;
}

.ll-spec-info-block-left p {
  font-size: 19px;
  color: #555555;
  margin-top: 24px;
  margin-bottom: 32px;
}

.ll-spec-time-badge {
  display: inline-block;
  background-color: #ffffff;
  padding: 12px 24px;
  border-radius: 8px;
  border-left: 4px solid #D4AF37;
  font-size: 18px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Ховър ефекти за информационните карти */
.ll-spec-use-case {
  display: flex;
  gap: 20px;
  background-color: #ffffff;
  padding: 24px;
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid #D6D0C4;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
}

.ll-spec-use-case:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  background-color: #FFF6E5;
  border-color: #D4AF37;
}

.ll-spec-use-case-num {
  font-size: 28px;
  font-weight: 700;
  color: #d4af3788;
  line-height: 1;
  transition: color 0.3s ease;
  scale: 1.1;
}

.ll-spec-use-case:hover .ll-spec-use-case-num {
  color: #D4AF37;

}

.ll-spec-use-case h4 {
  font-size: 20px;
  margin: 0 0 8px 0;
  color: #222222;
}

.ll-spec-use-case p {
  font-size: 18px;
  color: #666666;
  margin: 0;
}

.ll-spec-use-case:last-child {
  margin-bottom: 0;
}

/* CTA Секция */
.ll-spec-cta-box {
  background-color: #ffffff;
  border: 2px solid #D4AF37;
  padding: 50px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(214, 208, 196, 0.2);
}

.ll-spec-cta-box h2 {
  font-size: 36px;
  margin: 0 0 16px 0;
  color: #222222;
}

.ll-spec-cta-box p {
  font-size: 20px;
  color: #555555;
  max-width: 700px;
  margin: 0 auto 32px auto;
}

.ll-spec-btn-group {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.ll-spec-btn-primary {
  display: inline-block;
  background-color: #D4AF37;
  color: #ffffff;
  padding: 16px 32px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  font-size: 18px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.ll-spec-btn-primary:hover {
  background-color: #c39f2e;
  color: #ffffff;
  transform: translateY(-4px);
}

.ll-spec-btn-secondary {
  display: inline-block;
  background-color: #F2F2F2;
  color: #222222;
  padding: 16px 32px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  font-size: 18px;
  border: 1px solid #D6D0C4;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.ll-spec-btn-secondary:hover {
  background-color: #D6D0C4;
  transform: translateY(-4px);
}

/* АДАПТИВНОСТ ЗА МОБИЛНИ УСТРОЙСТВА */
@media (max-width: 992px) {
  .ll-spec-hero-section {
    flex-direction: column;
    text-align: center;
    padding: 40px 20px;
  }

  .ll-spec-hero-img-wrapper {
    max-width: 400px;
  }

  .ll-spec-grid-three {
    grid-template-columns: 1fr;
  }

  .ll-spec-grid-two {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ll-spec-info-section {
    padding: 40px 20px;
  }

  .ll-spec-info-block-left {
    text-align: center;
  }

  .ll-spec-info-block-left .ll-spec-section-title::after {
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 600px) {
  .ll-spec-main-title {
    font-size: 30px;
  }

  .ll-spec-cta-box {
    padding: 30px 20px;
  }

  .ll-spec-cta-box h2 {
    font-size: 26px;
  }

  .ll-spec-btn-group {
    flex-direction: column;
    gap: 12px;
  }
}

/* ОПТИМИЗАЦИЯ ЗА ЕКРАНИ ПОД 480px И МАКСИМАЛНА ЗАЩИТА НА ХЕДЪРА */
@media (max-width: 480px) {
  .ll-spec-hero-section {
    padding: 30px 16px;
    margin-bottom: 40px;
  }

  .ll-spec-badge {
    font-size: 15px;
    padding: 4px 12px;
    margin-bottom: 16px;
  }

  .ll-spec-lead-text {
    font-size: 17px;
    line-height: 1.5;
    margin-bottom: 24px;
  }

  .ll-spec-cta-button {
    width: 100%;
    text-align: center;
    padding: 14px 20px;
    font-size: 17px;
  }

  .ll-spec-hero-img-wrapper {
    max-width: 350px;
    margin-top: 10px;
  }

  .ll-spec-benefits-section,
  .ll-spec-info-section,
  .ll-spec-cta-section {
    padding: 0 12px;
    margin-bottom: 50px;
  }

  .ll-spec-section-title {
    font-size: 24px;
  }

  .ll-spec-card {
    padding: 24px 16px;
  }

  .ll-spec-info-section {
    padding: 30px 16px;
  }

  .ll-spec-info-block-left p {
    font-size: 17px;
    margin-bottom: 24px;
  }

  .ll-spec-time-badge {
    font-size: 16px;
    padding: 10px 16px;
    width: 100%;
    text-align: center;
  }

  .ll-spec-use-case {
    padding: 18px 14px;
    gap: 14px;
  }

  .ll-spec-use-case h4 {
    font-size: 18px;
  }

  .ll-spec-use-case p {
    font-size: 16px;
  }

  .ll-spec-btn-group a {
    width: 100%;
    text-align: center;
  }
}

@media screen and (min-width: 425px) and (max-width: 500px) {
  .ll-spec-time-badge {
    font-size: 16px !important;
  }
}

@media screen and (min-width: 390px) and (max-width: 425px) {
  .ll-spec-time-badge {
    font-size: 14px !important;
  }
}

@media screen and (min-width: 0px) and (max-width: 390px) {
  .ll-spec-time-badge {
    font-size: 18px !important;
  }
}

@media screen and (min-width: 385px) and (max-width: 540px) {
  .ll-spec-main-title {
    font-size: 45px !important;
    margin-bottom: 16px;
  }
}

@media screen and (min-width: 300px) and (max-width: 385px) {
  .ll-spec-main-title {
    font-size: 35px !important;
    margin-bottom: 16px;
  }
}

@media screen and (min-width: 0px) and (max-width: 300px) {
  .ll-spec-main-title {
    font-size: 25px !important;
    margin-bottom: 16px;
  }
}


/* ========================================================= */
/* Computers */
/* ========================================================= */




/* СТИЛОВЕ С ИЗКЛЮЧИТЕЛНО СПЕЦИФИЧНИ КЛАСОВЕ ЗА ИЗБЯГВАНЕ НА КОНФЛИКТИ */

:root {
  --ucc-clr-dark-burgundy: #4B0E11;
  --ucc-clr-crimson: #7A1823;
  --ucc-clr-gold: #D4AF37;
  --ucc-clr-cream: #FFF6E5;
  --ucc-clr-text: #1A1A1A;
  --ucc-clr-white: #FFFFFF;
  --ucc-fs-base: 18px;
  /* Гарантиран минимален размер на текста */
}

.ucc-page-wrapper {
  font-size: var(--ucc-fs-base);
  line-height: 1.6;
  color: var(--ucc-clr-text);
  background-color: var(--ucc-clr-white);
  overflow-x: hidden;
}

.ucc-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 10px;
}

/* HERO */
.ucc-hero-section {
  background-color: var(--ucc-clr-cream);
  padding: 120px 0;
}

.ucc-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 991px) {
  .ucc-hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.ucc-badge-promo {
  display: block;
  background-color: var(--ucc-clr-crimson);
  color: var(--ucc-clr-white);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 18px;
  font-weight: 600;
  margin-top: 30px;
  margin-bottom: 10px;
  max-width: 358px;
}

@media (max-width: 930px) and (min-width: 730px) {
  .ucc-badge-promo {
    font-size: 16px;
    max-width: 324px;
  }
}

@media (max-width: 730px) and (min-width: 333px) {
  .ucc-badge-promo {
    font-size: 14px;
    max-width: 288px;
  }
}

@media (max-width: 333px) and (min-width: 0px) {
  .ucc-badge-promo {
    font-size: 12px;
    max-width: 254px;
  }
}

.ucc-main-title {
  color: var(--ucc-clr-dark-burgundy);
  font-weight: 800;
}

.ucc-main-title strong {
  color: var(--ucc-clr-dark-burgundy);
  font-weight: 800 !important;
}


.ucc-hero-lead {
  font-size: 20px;
  margin-bottom: 32px;
  opacity: 0.9;
}

.ucc-btn-primary {
  display: inline-block;
  background-color: var(--ucc-clr-dark-burgundy);
  color: var(--ucc-clr-white);
  padding: 16px 36px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  box-shadow: 0 4px 15px rgba(75, 14, 17, 0.2);
}

.ucc-btn-primary:hover {
  background-color: var(--ucc-clr-crimson);
  transform: translateY(-2px);
}

.ucc-hero-visual {
  display: flex;
  justify-content: center;
}

.ucc-svg-hero {
  width: 100%;
  max-width: 460px;
  height: auto;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.1));
}

/* БЕНЕФИТИ */
.ucc-benefits-section {
  padding: 80px 0;
}

.ucc-section-title {
  font-size: 32px;
  color: var(--ucc-clr-dark-burgundy);
  text-align: center;
  margin-bottom: 48px;
  font-weight: 700;
}

.ucc-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

@media screen and (max-width: 900px) and (min-width: 500px) {
  .ucc-benefits-grid {
    grid-template-columns: repeat(2, 2fr);
  }
}

.ucc-benefit-card {
  background: var(--ucc-clr-white);
  border: 1px solid rgba(75, 14, 17, 0.1);
  padding: 32px;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ucc-benefit-card:hover {
  transform: translateY(-5px);
  border-color: var(--ucc-clr-gold);
  box-shadow: 0 10px 25px rgba(75, 14, 17, 0.08);
}

.ucc-icon-wrapper {
  width: 60px;
  height: 60px;
  background-color: var(--ucc-clr-cream);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.ucc-icon-wrapper svg {
  width: 30px;
  height: 30px;
}

.ucc-benefit-card h3 {
  font-size: 20px;
  color: var(--ucc-clr-dark-burgundy);
  margin-bottom: 12px;
  font-weight: 600;
}

.ucc-benefit-card p {
  font-size: 18px;
  opacity: 0.8;
}

/* ПРОГРАМА */
.ucc-curriculum-section {
  background-color: #FAF8F5;
  padding: 80px 0;
}

.ucc-modules-stack {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ucc-module-item {
  background: var(--ucc-clr-white);
  border-left: 5px solid var(--ucc-clr-gold);
  border-radius: 0 12px 12px 0;
  padding: 24px 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}

.ucc-module-item:hover {
  background: var(--ucc-clr-white);
  border-left: 5px solid var(--ucc-clr-gold);
  border-radius: 0 12px 12px 0;
  padding: 24px 32px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.02);
  position: relative;
  transform: translateY(-7px);
}

.ucc-module-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.ucc-mod-number {
  font-size: 24px;
  font-weight: 800;
  color: var(--ucc-clr-gold);
  opacity: 0.5;
  transition: all 0.5s ease;
}

.ucc-module-item:hover .ucc-mod-number {
  font-size: 24px;
  font-weight: 800;
  color: var(--ucc-clr-gold);
  opacity: 1;
  transform: scale(1.4);
}

.ucc-module-header h3 {
  font-size: 26px;
  color: var(--ucc-clr-gold);
  margin: 0;
  font-weight: 400;
}

.ucc-module-body p {
  margin: 0;
  font-size: 18px;
  opacity: 0.85;
}

/* CTA СЕКЦИЯ */
.ucc-cta-section {
  padding: 80px 0;
  margin-left: 20px;
  margin-right: 20px;
  background-color: var(--ucc-clr-white);
}

.ucc-cta-inner {
  background-color: var(--ucc-clr-dark-burgundy);
  color: var(--ucc-clr-white);
  padding: 56px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 15px 35px rgba(75, 14, 17, 0.3);
}

@media (max-width: 576px) {
  .ucc-cta-inner {
    padding: 32px 20px;
  }
}

.ucc-cta-inner h2 {
  font-size: 36px;
  margin-bottom: 16px;
  color: var(--ucc-clr-white);
  font-weight: 700;
}

.ucc-cta-inner p {
  font-size: 20px;
  max-width: 700px;
  margin: 0 auto 32px auto;
  opacity: 0.9;
}

.ucc-action-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.ucc-btn-secondary {
  display: inline-block;
  background-color: var(--ucc-clr-gold);
  color: var(--ucc-clr-text);
  padding: 18px 44px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  font-size: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.ucc-btn-secondary:hover {
  background-color: var(--ucc-clr-white);
  color: var(--ucc-clr-dark-burgundy);
  transform: scale(1.03);
}

.borderless img {
  border-radius: 50px !important;
  max-width: auto !important;
  position: relative;
  width: 100%;
  max-height: auto;
}

.kid-section-container {
  width: 100%;
  max-width: 1120px;
  margin: 50px auto 50px auto;
  padding: 0 20px;
}

.kid-section-container figure {
  max-height: 700px !important;
}

.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-with-buttons.kids-page.gb-slate-section-hero-buttons.img-top.gb-layout-columns-1.one-column.gb-has-background-dim.gb-has-background-dim-20.gb-background-cover.gb-background-no-repeat.has-white-background-color.has-black-color.gb-columns-center.alignfull.aos-init.aos-animate {
  border-bottom-left-radius: 170px;
}

/* ==========================================================================
   BULLETPROOF SEARCH RESULT GRID
   ========================================================================== */

/* Center the search layout wrapper and restrict max width */
.search-wrap-custom,
.search-page-container-custom {
  max-width: 1120px !important;
  margin: 0 auto !important;
  float: none !important;
}

/* Grid layout: picture on left, text on right, vertically centered */
article.custom-search-item {
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
  gap: 30px !important;
  align-items: center !important;
  margin-bottom: 40px !important;
  border-bottom: 1px solid #eaeaea !important;
  padding-bottom: 30px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Thumbnail container */
.custom-search-thumb {
  width: 100% !important;
  margin: 0 !important;
}

/* Picture height set to exactly 250px */
.custom-search-thumb img {
  width: 100% !important;
  height: 250px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  display: block !important;
  max-width: none !important;
}

/* Text content area (All font styles left to native theme defaults) */
.custom-search-content {
  padding: 0 20px;
  width: 100% !important;
  min-width: 0 !important;
}

body.search-results .page-titles,
body.search-results .header-text {
  display: none !important;
}

@media (max-width: 530px) {
  article.custom-search-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    align-items: stretch !important;
  }

  .custom-search-thumb {
    width: 100% !important;
  }

  .custom-search-thumb img {
    width: 100% !important;
    height: 240px !important;
    /* Perfect mobile height */
  }
}




.search-results .navigation.pagination,
.search-results .nav-links {
  max-width: 1120px !important;
  margin: 40px auto 0 auto !important;
  background: transparent !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  box-shadow: none !important;
}

/* Style the individual pagination buttons and numbers */
.search-results .nav-links .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 16px !important;
  text-decoration: none !important;
}

/* ==========================================================================
        floating icons  
   ========================================================================== */

.icons-floating-group-kids {
  position: relative;
}

.floating {
  position: absolute;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  animation: roam 12s ease-in-out infinite;
}

.book {
  width: 200px;
  right: 15%;
  bottom: 0%;
  margin-bottom: -50px;
  animation-duration: 11s;
}

.pen {
  width: 120px;
  left: -32%;
  bottom: 18%;
  animation-duration: 14s;
  animation-delay: -5s;
}

.music {
  width: 140px;
  left: -15%;
  bottom: 0%;
  animation-duration: 14s;
  animation-delay: -3s;
  margin-bottom: 23%;
}

.sun {
  z-index: 999;
  width: 160px;
  right: 20%;
  bottom: 0%;
  animation-duration: 14s;
  animation-delay: 0s;
  margin-bottom: -260px;
}

.stars {
  width: 210px;
  right: -10%;
  bottom: 0%;
  animation-duration: 14s;
  animation-delay: 0s;
  margin-bottom: -90px;
}

.puzzle {

  width: 140px;
  left: 80%;
  bottom: 0%;
  animation-duration: 14s;
  animation-delay: -1s;
  margin-bottom: -120px;
}

.flower {
  width: 140px;
  left: -20%;
  bottom: 0%;
  animation-duration: 14s;
  animation-delay: -2s;
  margin-bottom: 0%;
}

.shapes {
  width: 150px;
  left: 85%;
  bottom: 0%;
  animation-duration: 14s;
  animation-delay: 0s;
  margin-bottom: -5%;
}

.clock {
  width: 150px;
  left: -30%;
  bottom: 0%;
  animation-duration: 10s;
  animation-delay: -6s;
  margin-bottom: -5%;
}

.plant {
  width: 150px;
  left: 115%;
  bottom: 0%;
  animation-duration: 14s;
  animation-delay: 0s;
  margin-bottom: 55%;
}

@keyframes roam {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(10px, -15px) rotate(3deg);
  }

  50% {
    transform: translate(-8px, -8px) rotate(-2deg);
  }

  75% {
    transform: translate(12px, 8px) rotate(2deg);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@media screen and (max-width:1590px) {
  .icons-floating-group-kids {
    display: none;
  }
}








/* ==========================================================
   1. MAIN FORM CONTAINER & HEADER
   ========================================================== */
.cp_cff_16 #fbuilder {
  background: rgba(250, 221, 94, 0.747) !important;
}

#fbuilder {
  padding: 0 0 35px 0 !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
  max-width: 1120px !important;
  margin-top: 30px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#fbuilder .cff-form-title {
  background-color: rgb(175, 94, 28) !important;
  color: #FFFFFF !important;
  padding: 20px 30px !important;
  font-size: 50px !important;
  font-weight: bold !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin: 0px 0 25px 0 !important;
}

#fbuilder #formheader_1 .fform {
  padding: 0px;
}

@media screen and (max-width:450px) {
  #fbuilder .cff-form-title {
    font-size: 40px !important;
  }
}

@media screen and (max-width:380px) {
  #fbuilder .cff-form-title {
    font-size: 30px !important;
  }
}

#fbuilder label,
#fbuilder .pb-label,
#fbuilder .fields label {
  color: rgb(0, 0, 0) !important;
  font-weight: bold !important;
  font-size: 15px !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* ==========================================================
   2. MAIN 60% / 40% SPLIT
   ========================================================== */
#fbuilder .fields_container,
#fbuilder .pbreak,
#fbuilder form {
  max-width: 1120px;
  display: flex !important;
  flex-direction: row !important;
  margin: 0 auto;
  gap: 5px;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#fbuilder .top_aligned {
  padding: 0 20px !important;
}

/* Left Main Area (60%) */
#fbuilder div.left-col {
  flex: 0 0 58% !important;
  width: 58% !important;
  max-width: 58% !important;
  margin: 10px 0 0 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
}

/* Right Summary Card (40%) */
#fbuilder div.right-col {
  height: 100% !important;
  flex: 0 0 38% !important;
  width: 38% !important;
  max-width: 38% !important;
  background-color: rgba(206, 179, 61, 0.39) !important;
  border-radius: 26px !important;
  padding: 25px !important;
  margin: 20px 0 0 0 !important;
  float: none !important;
  clear: none !important;
  box-shadow: inset 0 0 0 1px rgba(121, 50, 56, 0.15) !important;
  box-sizing: border-box !important;
}

/* ==========================================================
   3. INNER 2x2 GRID (.quad-grid)
   ========================================================== */
#fbuilder .left-col .quad-grid,
#fbuilder div.quad-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: 100%;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Each grid item gets half space (48%) */
#fbuilder .left-col .quad-grid>.fields,
#fbuilder .left-col .quad-grid>div[id*="field_"] {
  flex: 0 0 48% !important;
  width: 48% !important;
  max-width: 48% !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  box-sizing: border-box !important;
}

/* Full width elements outside quad-grid */
#fbuilder .left-col>.fields,
#fbuilder .left-col>div[id*="field_"]:not(.quad-grid) {
  width: 100% !important;
  margin-bottom: 16px !important;
}

/* Neutralize wrapper elements */
#fbuilder .left-col .dfield,
#fbuilder .left-col .dfield>div {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
}

#fbuilder .quad-grid>.fields,
#fbuilder .quad-grid>div[id*="field_"],
#fbuilder .quad-grid .dfield,
#fbuilder .quad-grid .cff-custom-wrapper,
#fbuilder .quad-grid .select2-container,
#fbuilder .quad-grid select,
#fbuilder .quad-grid input {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  box-sizing: border-box !important;
}

/* ==========================================================
   4. FORCE ALL INPUTS, SELECTS, CFF BOXES & SELECT2 TO 100%
   ========================================================== */
/* Native inputs & standard select */
#fbuilder .left-col select,
#fbuilder .left-col input[type="text"],
#fbuilder .left-col input[type="number"] {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 42px !important;
  background-color: #ffffff !important;
  border: 1px solid rgb(217, 208, 199) !important;
  border-radius: 5px !important;
  color: rgb(0, 0, 0) !important;
  font-size: 18px !important;
  padding: 0 30px 0 12px !important;
  box-sizing: border-box !important;
  outline: none !important;
}

/* CFF JS Custom Box (.cff-custom-box) */
#fbuilder .left-col .cff-custom-wrapper {
  width: 100% !important;
  min-width: 100% !important;
}

#fbuilder .cff-custom-box {
  position: relative !important;
  height: 56px;
  color: rgb(0, 0, 0) !important;
  box-sizing: border-box !important;
  border: 1px solid rgb(217, 208, 199) !important;
  border-radius: 4px !important;
  padding: 8px 12px;
  background: #ffffff;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none !important;
  max-width: 100%;
}

.cp_cff_16 #fbuilder .select2-results__option--highlighted {
  background: rgb(175, 94, 28) !important;
}

.cp_cff_16 #fbuilder input[type="search"]:hover,
.cp_cff_16 #fbuilder input[type="search"]:focus {
  border-color: rgb(175, 94, 28) !important;
}

#fbuilder .cff-custom-box span {
  font-weight: 400 !important;
  user-select: none !important;
}

/* 2. Ensure text doesn't overlap the arrow zone */
#fbuilder .cff-custom-box>span:first-child {
  padding-right: 35px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  width: 100% !important;
}

/* 3. Exact arrow styling matching your Select2 fields */
#fbuilder .cff-custom-box .cff-custom-arrow {
  position: absolute !important;
  top: 0 !important;
  height: 100% !important;
  right: 0 !important;
  width: 35px !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><polygon points="0,0 10,0 5,6" fill="%23666666"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  pointer-events: none !important;
}

/* Style the open dropdown options list container */
#fbuilder .cff-custom-list {
  position: absolute;
  border: 1px solid rgb(217, 208, 199) !important;
  border-radius: 4px !important;
  background: #ffffff;
  overflow: hidden !important;
  /* Keeps hover background inside the rounded corners */
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
  width: 100%;
  z-index: 99999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Style individual option items */
#fbuilder .cff-custom-item {
  margin: 5px;
  padding: 10px 12px;
  background-color: #ffffff !important;
  color: rgb(0, 0, 0) !important;
  cursor: pointer;
}

/* Your custom hover state */
#fbuilder .cff-custom-item:hover {
  background-color: rgb(175, 94, 28) !important;
  color: #ffffff !important;
}

ul.cff-custom-list {
  position: absolute;
  border: 1px solid rgb(217, 208, 199) !important;
  border-radius: 4px !important;
  background: #ffffff;
  overflow: hidden !important;
  /* Keeps hover background inside the rounded corners */
  list-style: none;
  padding: 0;
  margin: -5px 0 0 0;
  width: 100%;
  z-index: 99999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

ul.cff-custom-list li.cff-custom-item {
  margin: 5px;
  padding: 10px 12px;
  background-color: #ffffff !important;
  color: rgb(0, 0, 0) !important;
  cursor: pointer;
  font-weight: 300;
  font-size: 16px !important;
  line-height: 1.6;
}

/* Style the currently selected option with a gray background */
ul.cff-custom-list li.cff-custom-item[aria-selected="true"] {
  background-color: #e0e0e0 !important;
  /* Change this shade of gray if needed */
  color: rgb(0, 0, 0) !important;
  /* Text color for the selected item */
}

ul.cff-custom-list li.cff-custom-item:hover {
  background-color: rgb(175, 94, 28) !important;
  color: #ffffff !important;
}

/* Style for the currently selected custom dropdown item */
ul.cff-custom-list li.cff-custom-item.cff-selected {
  background-color: #e0e0e0 !important;
  /* Gray background matching Select2 */
  color: rgb(0, 0, 0) !important;
}

/* SELECT2 OVERRIDES (Fixes fixed 141px width issue) */
#fbuilder .left-col .select2-container,
#fbuilder .left-col .select2-container--default,
#fbuilder .left-col span.select2,
#fbuilder .left-col span.select2-selection {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

#fbuilder .left-col .select2-selection--single {
  position: relative !important;
  height: 56px;
  color: rgb(0, 0, 0) !important;
  box-sizing: border-box !important;
  border: 1px solid rgb(217, 208, 199) !important;
  border-radius: 4px !important;
  padding: 8px 12px;
  background: #ffffff;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none !important;
  max-width: 100%;
}

#fbuilder .left-col .select2-selection__rendered {
  color: rgb(0, 0, 0) !important;
  font-size: 15px;
  float: none !important;
  /* Removes Select2's default float */
  display: flex !important;
  align-items: center !important;
  /* Centers text vertically */
  height: 100% !important;
  line-height: normal !important;
  /* Overrides hardcoded line-height */
  padding-left: 0 !important;
  padding-right: 30px !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-weight: 400 !important;
  user-select: none !important;

}

#fbuilder::before {
  display: none;
}


#fbuilder .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  right: 0 !important;
  width: 35px !important;
  /* Същата плътна триъгълна стрелка, за да са 100% еднакви */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><polygon points="0,0 10,0 5,6" fill="%23666666"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Скрива се стандартната чупена линия на Select2, за да я заменим с нашето SVG */
#fbuilder .select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none !important;
}

/* ==========================================================
   5. RIGHT COLUMN PRICE CARD & SUMMARY
   ========================================================== */
#fbuilder .right-col label {
  font-size: 24px !important;
  font-weight: bold !important;
  color: rgb(0, 0, 0) !important;
  margin-bottom: 8px !important;
}

#fbuilder .right-col input.codepeoplecalculatedField,
#fbuilder .right-col .cff-calculated-field input[readonly],
#fbuilder .right-col .dfield input {
  width: 100% !important;
  max-width: 100% !important;
  color: rgb(0, 0, 0) !important;
  height: auto !important;
  font-size: 40px !important;
  line-height: 1.2 !important;
  padding: 4px 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.cff-summary-list {
  margin-top: 60px;
  padding-top: 15px;
  border-top: 1px solid rgba(121, 50, 56, 0.25);
}

.cff-summary-list p {
  color: rgb(0, 0, 0) !important;
  font-size: 15px;
  margin: 8px 0;
  font-style: italic;
  line-height: 1.4;
}

.cff-summary-list p strong {
  font-style: italic;
  font-weight: bold;
}

/* Hide submit buttons & structural clearers */
#fbuilder .pbSubmit,
#fbuilder .pbReset,
#fbuilder .clearer,
#fbuilder .column-cleared {
  display: none !important;
}

.banner-container {
  width: 100%;
  max-width: 1000px;
  min-height: 400px;
  margin: 0 auto;
  border-radius: 24px;
  /* Жълт фон за преглед - съобразен с вашия дизайн */
  background-color: #ffd700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.banner-content {
  text-align: center;
  z-index: 1;
}

/* Текст над заглавието - LINVISTA */
.brand-title {
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-weight: 900;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #0f172a;
  /* Тъмно синьо/черно за максимален контраст върху жълто */
  margin-bottom: 0.5rem;
}

/* Ярък текст "Очаквайте скоро" - Червено към Синьо */
.niche-heading {
  font-size: clamp(2.4rem, 7vw, 4.8rem);
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin: 0;

  /* Ярки и свежи червени и сини тонове */
  background: linear-gradient(120deg,
      #ff0044 0%,
      /* Ярко огнено червено */
      #ff2a5f 25%,
      /* Ярко коралово-червено */
      #0066ff 60%,
      /* Ярко електрик синьо */
      #00bfff 85%,
      /* Ярко небесно синьо */
      #ff0044 100%);
  background-size: 250% 250%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: brightRedToBlue 4s ease-in-out infinite alternate;

  /* Лека фина сянка за максимална яснота върху жълт фон */
  filter:
    drop-shadow(0 4px 8px rgba(15, 23, 42, 0.2)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

@keyframes brightRedToBlue {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

/* Текст под заглавието */
.banner-subtext {
  font-size: clamp(0.95rem, 2vw, 1.25rem);
  color: #0f172a;
  margin-top: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Адаптивност за мобилни устройства */
@media (max-width: 650px) {
  .banner-container {
    min-height: 280px;
    padding: 1.25rem;
    border-radius: 16px;
  }

  .brand-title {
    letter-spacing: 4px;
  }
}

@media (max-width: 430px) {
  .niche-heading {
    font-size: 34px !important;
    font-weight: 900;
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin: 0;
  }
}


/* Mobile Responsiveness */
@media screen and (max-width: 800px) {

  #fbuilder div.left-col,
  #fbuilder div.right-col {
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  #fbuilder .left-col .quad-grid>.fields,
  #fbuilder .left-col .quad-grid>div[id*="field_"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #fbuilder div.right-col {
    margin-top: 25px !important;
  }
}

/* Fix layout wrapping and text truncation on screens under 930px */
@media screen and (max-width: 965px) {

  #fbuilder .fields_container,
  #fbuilder form {
    flex-direction: column !important;
  }

  #fbuilder div.left-col,
  #fbuilder div.right-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  #fbuilder div.right-col {
    margin-top: 25px !important;
  }

  #fbuilder div.quad-grid>.fields,
  #fbuilder div.quad-grid>div,
  #fbuilder div.quad-grid>div[id*="field_"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* Direct override for CFF dropdown wrappers under 640px */
/* Force quad-grid containers and inner wrappers to fill 100% width below 640px */
@media screen and (max-width: 640px) {

  #fbuilder div.quad-grid,
  #fbuilder .left-col .quad-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #fbuilder div.quad-grid>div,
  #fbuilder div.quad-grid>.fields,
  #fbuilder div.quad-grid>div[id*="field_"],
  #fbuilder div.quad-grid .dfield,
  #fbuilder div.quad-grid .cff-custom-wrapper,
  #fbuilder div.quad-grid .select2-container,
  #fbuilder div.quad-grid span.select2 {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    box-sizing: border-box !important;
  }
}


/* Remove overflow clipping on the main container and field wrappers */
#fbuilder,
#fbuilder .fields_container,
#fbuilder div.left-col,
#fbuilder div.right-col,
#fbuilder .fields,
#fbuilder .dfield,
#fbuilder .cff-custom-wrapper {
  overflow: visible !important;
}

.select2-container .select2-results__option[role="group"] {
  padding: 0px !important;
}

.select2-results__group {
  padding-left: 0px !important;
}

.cp_cff_16 #fbuilder::before {
  background: #793238 !important;
  ;
}

/* ==========================================================================
   CUSTOM MODAL POPUP STYLES
   ========================================================================== */

/* Background overlay covering the screen */
.cff-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
}

/* The popup box card */
.cff-modal-card {
  background: #ffffff;
  padding: 32px 28px;
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  text-align: center;
  max-width: 400px;
  width: 85%;
  font-family: inherit;
}

/* Top icon/emoji */
.cff-modal-icon {
  font-size: 36px;
  margin-bottom: 12px;
}

/* Title heading */
.cff-modal-title {
  margin: 0 0 8px 0;
  color: #111827;
  font-size: 20px;
  font-weight: 700;
}

/* Text paragraph */
.cff-modal-text {
  margin: 0 0 24px 0;
  color: #4B5563;
  font-size: 15px;
  line-height: 1.5;
}

/* Action button */
.cff-modal-btn {
  background: #111827;
  color: #ffffff;
  border: none;
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.cff-modal-btn:hover {
  background: #374151;
}




/* ==========================================================================
   Voucher Hero Section
   ========================================================================== */
#post-135>div.wp-block-genesis-blocks-gb-container.header-bl-500.round-hero.size-smaller.voucher-pic.gb-block-container.alignfull.aos-init.aos-animate>div>div.gb-container-image-wrap>img {
  object-position: 30% 0% !important;
}

#post-135>div.wp-block-genesis-blocks-gb-container.round-hero.size-smaller.voucher-pic.header-ab-1230.gb-block-container.alignfull.aos-init.aos-animate>div>div.gb-container-image-wrap>img {
  object-position: 50% 5% !important;
}

#post-135>div.wp-block-genesis-blocks-gb-container.round-hero.size-smaller.voucher-pic.header-bl-1230.gb-block-container.alignfull.aos-init.aos-animate>div>div.gb-container-image-wrap>img {
  object-position: 50% 0% !important;
}




/* ==========================================================================
 CONtacts Hero Section
   ========================================================================== */
#post-117>div.wp-block-genesis-blocks-gb-container.round-hero.gb-block-container.alignfull.aos-init.aos-animate {
  height: calc(100% - 40px);
}

#post-117>div.wp-block-genesis-blocks-gb-container.round-hero.gb-block-container.alignfull.aos-init.aos-animate>div>div.gb-container-image-wrap {
  margin: 0px 20px !important;
}

/* ==========================================================================
 2-4 Kids Hero Section
   ========================================================================== */
#post-1231>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-with-buttons.gb-slate-section-hero-buttons.header-kids-page-2-4.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.has-white-background-color.gb-has-custom-text-color.gb-columns-center.alignfull {
  border-bottom-left-radius: 180px !important;
  width: 100% !important;
}

/* ==========================================================================
 First Grade Hero Section
   ========================================================================== */

@media screen and (min-width:460px) {
  #post-1262>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-with-buttons.gb-slate-section-hero-buttons.header-first-grade.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.has-white-background-color.gb-has-custom-text-color.gb-columns-center.alignfull.aos-init.aos-animate {
    border-bottom-left-radius: 180px !important;
    min-height: 700px !important;
    width: 100% !important;
  }
}

/* ==========================================================================
 8-12 Hero Section
   ========================================================================== */

@media screen and (min-width:460px) {
  #post-1233>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-with-buttons.gb-slate-section-hero-buttons.header-8-to-12-grade.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.has-white-background-color.gb-has-custom-text-color.gb-columns-center.alignfull.optml-bg-lazyloaded.aos-init.aos-animate {
    border-bottom-left-radius: 180px !important;
    min-height: 700px !important;
    width: 100% !important;
  }
}


/* ==========================================================================
 5-7 Hero Section
   ========================================================================== */

@media screen and (min-width:460px) {
  #post-1232>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-with-buttons.gb-slate-section-hero-buttons.header-kids-page-5-7.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.has-white-background-color.gb-has-custom-text-color.gb-columns-center.alignfull.optml-bg-lazyloaded.aos-init.aos-animate {
    border-bottom-left-radius: 180px !important;
    width: 100% !important;
  }
}



/* ==========================================================================
  PC Hero Section
   ========================================================================== */
#post-134>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-with-buttons.gb-slate-section-hero-buttons.gb-layout-columns-1.one-column.gb-has-background-dim.gb-has-background-dim-20.gb-background-cover.gb-background-no-repeat.has-white-background-color.has-black-color.gb-columns-center.alignfull.aos-init.aos-animate {
  border-bottom-left-radius: 180px !important;
}


/* ==========================================================================
  Kindergarden Hero Section
   ========================================================================== */
#post-130>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-with-buttons.gb-slate-section-hero-buttons.header-kindergarden.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.has-white-background-color.gb-has-custom-text-color.gb-columns-center.alignfull.aos-init.aos-animate {
  border-bottom-left-radius: 180px;
  padding-top: 9em !important;
  min-height: 750px;
  width: 100% !important;
  position: relative !important;
}

/* ==========================================================================
  Team
   ========================================================================== */

#post-1470>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-title.gpb-slate-section-hero-title.round-left.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.gb-has-custom-background-color.gb-has-custom-text-color.gb-columns-center.alignfull {
  border-bottom-left-radius: 180px !important;
}

@media screen and (max-width:700px) {
  #post-1470>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-title.gpb-slate-section-hero-title.round-left.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.gb-has-custom-background-color.gb-has-custom-text-color.gb-columns-center.alignfull {
    border-bottom-left-radius: 60px !important;
  }
}


/* ==========================================================================
                      MAIN
   ========================================================================== */


@media screen and (max-width:2100px) {
  #post-199>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-with-buttons.gb-slate-section-hero-buttons.header-main.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.gb-has-custom-background-color.gb-has-custom-text-color.gb-columns-center.alignfull.aos-init.aos-animate {
    max-height: calc(100vh - 160px);
    min-height: calc(100vh - 160px);
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
  }
}

@media screen and (min-width:2100px) {
  #post-199>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-with-buttons.gb-slate-section-hero-buttons.header-main.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.gb-has-custom-background-color.gb-has-custom-text-color.gb-columns-center.alignfull.aos-init.aos-animate {
    max-height: calc(100vh - 160px) !important;
    min-height: calc(100vh - 160px) !important;
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
  }
}










.kid-2-4-header-side-image img {
  width: 1400px ! important;
  height: 100% ! important;
  overflow: visible ! important;
  z-index: 5;
  min-height: auto !important;
  /* Ensure it expands naturally with content */
  padding-bottom: 120px !important;
}

.left-box-custom-1 {
  padding: 30px !important;
  background: linear-gradient(180deg,
      rgb(250, 244, 167) 0%,
      /* Top - slightly warmer pale yellow */
      rgb(252, 249, 195) 50%,
      /* Middle - bright cream yellow */
      rgb(250, 242, 137) 100%
      /* Bottom - slightly deeper yellow tint */
    );
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  align-self: flex-start !important;
}

.right-box-custom-2 {
  align-self: flex-start !important;
  max-height: 100% !important;
  padding: 30px !important;
  color: white !important;
  background: linear-gradient(135deg,
      #cc3d00 0%,
      /* Top-left (base shade) */
      #da4e00 45%,
      /* Middle transition */
      #ea5b0b 75%,
      /* Brightening... */
      #f87219 100%
      /* Bottom-right highlight */
    );
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.block-css>div {
  display: block !important;
}

.icons-floating-group {
  position: relative;
  z-index: 1;
}

.wondering-kid {
  width: 270px;
  left: -18%;
  top: 10%;
  animation-duration: 10s;
  animation-delay: -2s;
  margin-top: -0px;
}

.floating-container {
  position: relative;
  max-height: 50px !important;
}

.reading-kid {
  position: relative;
  width: 800px;
  left: 10%;
  top: 0%;
  animation-duration: 10s;
  animation-delay: -2s;
  margin-top: -380px;
}

@media screen and (max-width:800px) {
  .reading-kid {
    display: none;
    max-height: 0px !important;
  }
}

.first-grade-kid {
  width: 700px;
  left: -18%;
  top: 10%;
  animation-duration: 10s;
  animation-delay: -2s;
  margin-top: -40px;
}

.high-school-student-1-f {
  height: 700px;
  left: -18%;
  top: 10%;
  animation-duration: 10s;
  animation-delay: -2s;
  margin-top: -40px;
}

@media screen and (max-width:1260px) {
  .high-school-student-1-f {
    display: none !important;
  }
}

@media screen and (min-width:2100px) {
  .high-school-student {
    width: 1200px;
    right: 18%;
    top: 0%;
    animation-duration: 10s;
    animation-delay: -2s;
    margin-top: -1000px;
  }
}

@media screen and (max-width:2100px) and (min-width:1600px) {
  .high-school-student {
    width: 1200px;
    right: 8%;
    top: 0%;
    animation-duration: 10s;
    animation-delay: -2s;
    margin-top: -1000px;
  }
}

@media screen and (max-width:1600px) and (min-width:1330px) {
  .high-school-student {
    width: 1200px;
    right: 0px;
    top: 0%;
    animation-duration: 10s;
    animation-delay: -2s;
    margin-top: -1000px;
  }
}

@media screen and (max-width:1330px) and (min-width:1070px) {
  .high-school-student {
    width: 1000px;
    right: 0px;
    top: 0%;
    animation-duration: 10s;
    animation-delay: -2s;
    margin-top: -1000px;
  }
}

@media screen and (max-width:1070px) and (min-width:900px) {
  .high-school-student {
    width: 600px;
    right: 0px;
    top: 0%;
    animation-duration: 10s;
    animation-delay: -2s;
    margin-top: -1000px;
  }
}

@media screen and (max-width:900px) {
  .high-school-student {
    display: none;
  }
}



.kids {
  position: absolute;
  animation-duration: 13s;

}

.sun-2-4page {
  width: 270px;
  left: 51%;
  top: 10%;
  animation-duration: 13s;
  margin-top: -460px;
}

.books-2-4page {
  width: 270px;
  left: 58%;
  top: 10%;
  animation-duration: 18s;
  animation-delay: 3s;
  margin-top: -280px;
}

.backpack {
  width: 160px;
  left: 76%;
  top: 10%;
  animation-duration: 18s;
  animation-delay: 1s;
  margin-top: 230px;
}

.opened-book {
  width: 160px;
  left: 16%;
  top: 10%;
  animation-duration: 18s;
  animation-delay: 1s;
  margin-top: 50px;
}

.uni {
  z-index: 999;
  width: 160px;
  left: 16%;
  top: 10%;
  animation-duration: 18s;
  animation-delay: 1s;
  margin-top: 390px;
}

.uni-2-4page {
  width: 230px;
  left: 70%;
  top: 10%;
  animation-duration: 18s;
  animation-delay: 1s;
  margin-top: -420px;
}

.puzzle-2-4page {
  width: 230px;
  left: 69%;
  top: 16%;
  animation-duration: 8s;
  animation-delay: -1s;
  margin-top: -100px;
}

.icons-floating-group .kid-kindergarden-banner {
  overflow: hidden !important;
  z-index: 1;
}

@media screen and (max-width:650px) {
  .red-custom-box {
    padding: 20px !important;
  }

  .blue-custom-box {
    padding: 20px !important;
  }
}



/* ==========================================================================
 ICONS- 2-4-page
   ========================================================================== */
@media screen and (max-width: 1400px) {
  .uni-2-4page {
    display: none !important;
  }

  .puzzle-2-4page {
    display: none !important;
  }
}

@media screen and (max-width: 781px) {
  .sun-2-4page {
    display: none !important;
  }

  .books-2-4page {
    display: none !important;
  }

}

@media screen and (max-width: 450px) {
  div.block-css>div>div>div>h1 {
    font-size: 40px !important;
  }
}

@media screen and (max-width: 1100px) {
  .header-kindergarden>div>div>div>div>div>div>div>h1 {
    font-size: 50px !important;
  }


  .header-kids-page-2-4>div>div>div>div>div>div>div>h1 {
    font-size: 50px !important;
  }

  .header-kids-page-5-7>div>div>div>div>div>div>div>h1 {
    font-size: 50px !important;
  }

  .header-first-grade>div>div>div>div>div>div>div>h1 {
    font-size: 50px !important;
  }

  .header-8-to-12-grade>div>div>div>div>div>div>div>h1 {
    font-size: 50px !important;
  }

  div>div>div>div>div>div>div>div>h1.h1-smaller-for-mobile {
    font-size: 50px !important;
  }
}

@media screen and (max-width: 550px) {
  .header-kindergarden>div>div>div>div>div>div>div>h1 {
    font-size: 40px !important;
  }

  .header-kids-page-2-4>div>div>div>div>div>div>div>h1 {
    font-size: 40px !important;
  }

  .header-kids-page-5-7>div>div>div>div>div>div>div>h1 {
    font-size: 40px !important;
  }

  .header-kids-page-5-7>div>div>div>div>div>div>div>h2 {
    font-size: 30px !important;
  }

  .header-first-grade>div>div>div>div>div>div>div>h1 {
    font-size: 40px !important;
  }

  .header-8-to-12-grade>div>div>div>div>div>div>div>h1 {
    font-size: 40px !important;
  }

  div>div>div>div>div>div>div>div>h1.h1-smaller-for-mobile {
    font-size: 40px !important;
  }
}

@media screen and (max-width: 446px) {
  .header-kindergarden>div>div>div>div>div>div>div>h1 {
    font-size: 30px !important;
  }

  .header-kids-page-2-4>div>div>div>div>div>div>div>h1 {
    font-size: 30px !important;
  }

  .header-kids-page-5-7>div>div>div>div>div>div>div>h1 {
    font-size: 30px !important;
  }

  .header-kids-page-5-7>div>div>div>div>div>div>div>h2 {
    font-size: 25px !important;
  }

  .header-8-to-12-grade>div>div>div>div>div>div>div>h1 {
    font-size: 30px !important;
  }


  .header-first-grade>div>div>div>div>div>div>div>h1 {
    font-size: 30px !important;
  }

  div>div>div>div>div>div>div>div>h1.h1-smaller-for-mobile {
    font-size: 30px !important;
  }
}

@media screen and (min-width: 1600px) {
  .icons-floating-group {
    position: relative;
    margin-right: 150px;
  }

  .header-kids-page-5-7 {
    min-height: 750px !important;
    max-height: 750px !important;
  }

  #post-1231>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-with-buttons.gb-slate-section-hero-buttons.header-kids-page-2-4.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.has-white-background-color.gb-has-custom-text-color.gb-columns-center.alignfull {
    min-height: 750px !important;
  }

  .icons-floating-group .kid-kindergarden-banner {
    max-width: 960px;
    height: 760px;
    left: 55%;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -35%;
    width: calc(100% - 70px);
  }

  .icons-floating-group .kids-5-7 {
    max-width: 900px;
    left: 40%;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -400px;
    width: calc(100% - 270px);
  }

  .icons-floating-group .kids {

    max-width: 1200px;
    left: 30%;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -21%;
    width: calc(100% - 270px);
  }

  .icons-floating-group .grade-8-12-floating-desktop {
    max-width: 750px;
    left: 50%;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -350px;
    width: calc(100% - 270px);
  }

  .icons-floating-group .first-grade {
    max-width: 700px;
    left: 50%;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -360px;
    width: calc(100% - 270px);
  }
}

@media screen and (max-width: 1600px) and (min-width: 1470px) {
  .icons-floating-group .kid-kindergarden-banner {
    max-width: 880px;
    max-height: 720px;
    left: 50%;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -35%;
    width: calc(100% - 70px);
  }

  .icons-floating-group .kids-5-7 {
    max-width: 800px;
    left: 40%;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -300px;
    width: calc(100% - 270px);
  }
}

@media screen and (max-width: 1470px) and (min-width: 1200px) {
  .icons-floating-group .kid-kindergarden-banner {
    max-width: 780px;
    max-height: 920px;
    left: 30%;
    animation-duration: 13s;
    bottom: 0%;
    margin-bottom: -460px;
  }

  .icons-floating-group .kids-5-7 {
    max-width: 750px;
    left: 40%;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -350px;
    width: calc(100% - 270px);
  }
}

@media screen and (max-width: 1600px) and (min-width: 1430px) {

  .icons-floating-group .kids {
    max-width: 1100px;
    min-width: 1000px;
    left: 16%;
    bottom: 0%;
    margin-left: 20%;
    margin-bottom: -240px;
    width: 130% !important;

  }
}

@media screen and (max-width: 1430px) and (min-width: 1200px) {

  .icons-floating-group .kids {
    max-width: 1000px;
    min-width: 800px;
    left: 11%;
    bottom: 0%;
    margin-left: 20%;
    margin-bottom: -265px;
    width: 130% !important;

  }
}

@media screen and (max-width: 1600px) and (min-width: 0px) {
  #post-1231>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-with-buttons.gb-slate-section-hero-buttons.header-kids-page-2-4.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.has-white-background-color.gb-has-custom-text-color.gb-columns-center.alignfull {
    min-height: 700px !important;
    max-height: 700px !important;
  }

  .header-kids-page-5-7 {
    min-height: 700px !important;
    max-height: 700px !important;
  }
}

@media screen and (max-width: 1600px) and (min-width: 1200px) {

  .header-kindergarden {
    background-image: url('/wp-content/uploads/2026/08/kindergarten-banner-tablet-background.webp') !important;
  }

  .header-kids-page-2-4 {
    background-image: url('/wp-content/uploads/2026/08/2-4-banner-tablet-free-space.webp') !important;
  }


  .header-first-grade {
    background-image: url('/wp-content/uploads/2026/08/1-class-banner-tablet-background.webp') !important;
  }

  .icons-floating-group {

    position: relative;
    margin-right: 100px;
    margin-top: 50px;
  }

  .icons-floating-group .first-grade {
    max-width: 600px;
    left: 52%;
    margin-left: -10px;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -320px;
    width: calc(100% - 200px);
  }

  .icons-floating-group .grade-8-12-floating-desktop {
    max-width: 700px;
    left: 48%;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -320px;
    width: calc(100% - 270px);
  }
}

@media screen and (min-width: 1200px) {

  .grade-8-12-floating-tablet,
  .grade-8-12-floating-phone {
    display: none !important;
  }
}

@media screen and (max-width: 1200px) and (min-width: 700px) {

  .grade-8-12-floating-desktop,
  .grade-8-12-floating-phone {
    display: none !important;
  }
}

@media screen and (max-width: 700px) and (min-width: 460px) {

  .grade-8-12-floating-desktop,
  .grade-8-12-floating-tablet {
    display: none !important;
  }
}

@media screen and (max-width: 460px) and (min-width: 0px) {

  .grade-8-12-floating-phone,
  .grade-8-12-floating-tablet {
    display: none !important;
  }
}


@media screen and (max-width: 1200px) and (min-width: 870px) {
  .header-kids-page-2-4 {
    background-image: url('/wp-content/uploads/2026/08/2-4-banner-tablet-free-space.webp') !important;
  }

  .header-kids-page-5-7 {
    background-image: url('/wp-content/uploads/2026/08/5-7-banner-tablet-background.webp') !important;
  }

  .header-kindergarden {
    background-image: url('/wp-content/uploads/2026/08/kindergarten-banner-tablet-background.webp') !important;
  }

  .header-8-to-12-grade {
    background-image: url('/wp-content/uploads/2026/09/8-12-banner-tablet-background.webp') !important;
  }

  .icons-floating-group .first-grade {
    max-width: 460px;
    left: 40%;
    margin-left: -20px;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -330px;
    width: calc(100% - 200px);
  }

  .icons-floating-group {
    position: relative;
    margin-right: 100px;
    margin-top: 50px;
  }

  .icons-floating-group .kids {
    max-width: 750px;
    min-width: 600px;
    left: 40%;
    bottom: 0%;
    margin-left: -100px;
    margin-bottom: -270px;
    width: 160% !important;
  }

  .icons-floating-group .kids-5-7 {
    max-width: 700px;
    left: 40%;
    bottom: 0%;
    animation-duration: 13s;
    margin-left: -100px;
    margin-bottom: -365px;
    width: calc(100% - 90px);
  }

  .icons-floating-group .kid-kindergarden-banner {
    max-width: 780px;
    max-height: 920px;
    left: 29%;
    bottom: 0%;
    margin-bottom: -460px;
    animation-duration: 13s;
  }

  .icons-floating-group .grade-8-12-floating-tablet {
    max-width: 650px;
    left: 30%;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -407px;
    width: calc(100% - 100px);
  }
}

@media screen and (max-width: 870px) and (min-width: 800px) {
  .icons-floating-group .first-grade {
    max-width: 450px;
    left: 30%;
    margin-left: 0px;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -340px;
    width: calc(100% - 100px);
  }
}

@media screen and (max-width: 800px) and (min-width: 630px) {
  .icons-floating-group .first-grade {
    max-width: 430px;
    min-width: 400px !important;
    left: 10%;
    margin-left: 0px;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -300px;
    width: calc(100% - 10px);
  }
}

@media screen and (max-width: 870px) and (min-width: 851px) {
  .icons-floating-group .kids {
    max-width: 770px;
    min-width: 600px;
    left: 30%;
    bottom: 0%;
    margin-left: -100px;
    margin-bottom: -290px;
    width: 200% !important;
  }
}

@media screen and (max-width: 851px) and (min-width: 630px) {
  .icons-floating-group .kids {
    max-width: 770px;
    min-width: 600px;
    left: 30%;
    bottom: 0%;
    margin-left: -150px;
    margin-bottom: -290px;
    width: 200% !important;
  }
}

@media screen and (max-width: 870px) and (min-width: 667px) {
  .icons-floating-group .kids-5-7 {
    max-width: 600px;
    left: 15%;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -350px;
    width: calc(100%);
  }
}

@media screen and (max-width: 667px) and (min-width: 630px) {
  .icons-floating-group .kids-5-7 {
    max-width: 600px;
    left: 15%;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -320px;
    width: calc(100%);
  }
}

@media screen and (max-width: 870px) and (min-width: 700px) {
  .header-8-to-12-grade {
    background-image: url('/wp-content/uploads/2026/09/8-12-banner-tablet-background.webp') !important;
  }

  .icons-floating-group .grade-8-12-floating-tablet {
    max-width: 650px;
    left: 10%;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -407px;
    width: 100%;
  }
}

@media screen and (max-width: 700px) and (min-width: 693px) {
  .header-8-to-12-grade {
    background-image: url('/wp-content/uploads/2026/09/8-12-banner-phone-background.webp') !important;
  }

  .icons-floating-group .grade-8-12-floating-phone {
    max-width: 364px;
    left: 41%;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -500px;
    width: 100%;
  }
}

@media screen and (max-width: 693px) and (min-width: 630px) {
  .header-8-to-12-grade {
    background-image: url('/wp-content/uploads/2026/09/8-12-banner-phone-background.webp') !important;
  }

  .icons-floating-group .grade-8-12-floating-phone {
    max-width: 364px;
    left: 38%;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -455px;
    width: 100%;
  }
}

@media screen and (max-width: 630px) {
  .header-8-to-12-grade {
    background-image: url('/wp-content/uploads/2026/09/8-12-banner-phone-background.webp') !important;
  }
}

@media screen and (max-width: 870px) and (min-width: 630px) {
  .header-kids-page-2-4 {
    background-image: url('/wp-content/uploads/2026/08/2-4-banner-phone-free-space.webp') !important;
  }

  .header-kindergarden {
    background-image: url('/wp-content/uploads/2026/08/kindergarten-banner-tablet-background.webp') !important;
    border-bottom-left-radius: 0px !important;
  }

  .header-kids-page-5-7 {
    background-image: url('/wp-content/uploads/2026/08/5-7-banner-tablet-background.webp') !important;
  }



  .icons-floating-group {
    position: relative;
    margin-right: 100px;
    margin-top: 50px;
  }



  .icons-floating-group .kid-kindergarden-banner {
    max-width: 680px;
    max-height: 820px;
    left: 0%;
    bottom: -5%;
    margin-bottom: -400px;
    margin-left: 120px;
    animation-duration: 13s;
  }
}

@media screen and (max-width: 630px) and (min-width: 525px) {
  .header-kids-page-2-4 {
    background-image: url('/wp-content/uploads/2026/08/2-4-banner-phone-free-space.webp') !important;
  }

  .header-kids-page-5-7 {
    background-image: url('/wp-content/uploads/2026/08/5-7-banner-phone-background-.webp') !important;
  }

  .header-kindergarden {
    background-image: url('/wp-content/uploads/2026/08/kindergarten-banner-phone-2-background.webp') !important;
    border-bottom-left-radius: 0px !important;
  }

  .icons-floating-group .kids-5-7 {
    max-width: 1000px;
    left: -5%;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -290px;
    width: 160%;
  }

  .icons-floating-group .grade-8-12-floating-phone {
    max-width: 354px;
    left: 51%;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -400px;
    width: 100%;
  }

  .icons-floating-group {
    position: relative;
    margin-right: 200px;
    margin-top: 100px;
  }

  .icons-floating-group .kids {
    max-width: 700px;
    min-width: 500px;
    left: 15%;
    bottom: 0%;
    margin-left: -100px;
    margin-bottom: -170px;
    width: 240% !important;
  }

  .icons-floating-group .kid-kindergarden-banner {
    max-width: 780px;
    max-height: 780px;
    left: 0%;
    margin-left: 36px;
    bottom: 0%;
    margin-bottom: -360px;
    animation-duration: 13s;
  }

  .icons-floating-group .first-grade {
    max-width: 500px;
    min-width: 430px !important;
    left: 16%;
    margin-left: -20px;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -260px;
    width: calc(100%);
  }
}

@media screen and (max-width: 525px) and (min-width: 460px) {
  .header-kids-page-2-4 {
    background-image: url('/wp-content/uploads/2026/08/2-4-banner-phone-free-space.webp') !important;
  }

  .header-kids-page-5-7 {
    background-image: url('/wp-content/uploads/2026/08/5-7-banner-phone-background-.webp') !important;
  }

  .header-kindergarden {
    background-image: url('/wp-content/uploads/2026/08/kindergarten-banner-phone-2-background.webp') !important;
    border-bottom-left-radius: 0px !important;
    min-height: 950px !important;
  }

  .icons-floating-group .kids-5-7 {
    max-width: 550px;
    min-width: 550px;
    left: -15%;
    bottom: 0%;
    margin-left: -40px;
    animation-duration: 13s;
    margin-bottom: -320px;
  }

  .icons-floating-group .first-grade {
    max-width: 600px;
    min-width: 450px !important;
    left: 7%;
    margin-left: -20px;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -290px;
    width: calc(100%);
  }

  .icons-floating-group .grade-8-12-floating-phone {
    max-width: 311px;
    left: 59%;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -387px;
    width: 311px;
  }

  .icons-floating-group .kid-kindergarden-banner {
    max-width: 780px;
    max-height: 820px;
    left: 0%;
    margin-left: -90px;
    bottom: 0%;
    margin-bottom: -500px;
    animation-duration: 13s;
  }

  .icons-floating-group {
    position: relative;
    margin-right: 200px;
    margin-top: 100px;
  }

  .icons-floating-group .kids {
    max-width: 700px;
    min-width: 700px;
    left: -35%;
    bottom: 0%;
    margin-left: -50px;
    margin-bottom: -230px;
    width: 300% !important;

  }
}

@media screen and (max-width: 460px) and (min-width: 390px) {
  .header-kids-page-2-4 {
    background-image: url('/wp-content/uploads/2026/08/2-4-banner-phone-free-space.webp') !important;
  }

  .header-kids-page-5-7 {
    background-image: url('/wp-content/uploads/2026/08/5-7-banner-phone-background-.webp') !important;
  }

  .header-kindergarden {
    background-image: url('/wp-content/uploads/2026/08/kindergarten-banner-phone-2-background.webp') !important;
    border-bottom-left-radius: 0px !important;
    min-height: 750px !important;
  }

  .icons-floating-group .kids-5-7 {
    max-width: 500px;
    min-width: 500px;
    left: -10%;
    bottom: 0%;
    margin-left: -40px;
    animation-duration: 13s;
    margin-bottom: -300px;
  }

  .header-first-grade {
    min-height: 700px !important;
    border-bottom-left-radius: 0px !important;
  }

  .icons-floating-group .first-grade {
    max-width: 600px;
    min-width: 400px !important;
    left: 5%;
    margin-left: -28px;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -300px;
    width: calc(100%);
  }

  .icons-floating-group .grade-8-12-floating-desktop {
    max-width: 390px;
    left: -3%;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -201px;
    width: 390px;
  }

  .icons-floating-group .kid-kindergarden-banner {
    max-width: 580px;
    max-height: 720px;
    left: 0%;
    margin-left: -40px;
    bottom: 0%;
    margin-bottom: -375px;
    animation-duration: 13s;
  }

  .icons-floating-group {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    margin-top: 100px;
  }

  .icons-floating-group .kids {
    max-width: 610px;
    min-width: 0px;
    left: -34%;
    margin-bottom: -260px;
    bottom: 0px;
    width: 300% !important;

  }
}

@media screen and (max-width: 390px) and (min-width: 365px) {
  .header-kids-page-2-4 {
    background-image: url('/wp-content/uploads/2026/08/2-4-banner-phone-free-space.webp') !important;
  }

  .header-kids-page-5-7 {
    background-image: url('/wp-content/uploads/2026/08/5-7-banner-phone-background-.webp') !important;
  }

  .header-kindergarden {
    background-image: url('/wp-content/uploads/2026/08/kindergarten-banner-phone-2-background.webp') !important;
    border-bottom-left-radius: 0px !important;
    min-height: 560px !important;
  }

  .icons-floating-group .grade-8-12-floating-desktop {
    max-width: 390px;
    left: -7%;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -201px;
    width: 390px;
  }

  .icons-floating-group .kids-5-7 {
    max-width: 450px;
    min-width: 450px;
    left: -10%;
    bottom: 0%;
    margin-left: -40px;
    animation-duration: 13s;
    margin-bottom: -320px;
  }

  .header-first-grade {
    min-height: 700px !important;
    border-bottom-left-radius: 0px !important;
  }

  .icons-floating-group .kid-kindergarden-banner {
    max-width: 420px;
    ;
    max-height: 520px;
    left: 0%;
    margin-left: 95px;
    bottom: 0%;
    margin-bottom: -175px;
    animation-duration: 13s;
  }

  .icons-floating-group .first-grade {
    max-width: 600px;
    min-width: 400px !important;
    left: 0%;
    margin-left: -28px;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -340px;
    width: calc(100%);
  }

  .icons-floating-group {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    margin-top: 100px;
  }

  .icons-floating-group .kids {
    max-width: 600px;
    min-width: 0px;
    left: -37%;
    margin-top: -100px;
    top: 0px;
    width: 300% !important;

  }
}

@media screen and (max-width: 365px) and (min-width: 330px) {
  .header-kids-page-2-4 {
    background-image: url('/wp-content/uploads/2026/08/2-4-banner-phone-free-space.webp') !important;
  }

  .icons-floating-group .grade-8-12-floating-desktop {
    max-width: 390px;
    left: -10%;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -201px;
    width: 340px;
  }

  .header-kids-page-5-7 {
    background-image: url('/wp-content/uploads/2026/08/5-7-banner-phone-background-.webp') !important;
  }

  .header-kindergarden {
    background-image: url('/wp-content/uploads/2026/08/kindergarten-banner-phone-2-background.webp') !important;
    border-bottom-left-radius: 0px !important;
    min-height: 700px !important;
  }

  .icons-floating-group .kids-5-7 {
    max-width: 450px;
    min-width: 450px;
    left: -15%;
    bottom: 0%;
    margin-left: -40px;
    animation-duration: 13s;
    margin-bottom: -280px;
  }

  .header-first-grade {
    min-height: 700px !important;
    border-bottom-left-radius: 0px !important;
  }

  .icons-floating-group .first-grade {
    max-width: 600px;
    min-width: 350px !important;
    left: 4%;
    margin-left: -28px;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -255px;
    width: calc(100%);
  }

  .icons-floating-group .kid-kindergarden-banner {
    max-width: 480px;
    max-height: 620px;
    left: 0%;
    margin-left: -30px;
    bottom: 0%;
    margin-bottom: -300px;
    animation-duration: 13s;
  }

  .icons-floating-group {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    margin-top: 100px;
  }

  .icons-floating-group .kids {
    max-width: 550px;
    min-width: 0px;
    left: -45%;
    margin-top: -80px;
    top: 0px;
    width: 300% !important;

  }
}

@media screen and (max-width: 330px) and (min-width: 0px) {
  .header-kids-page-2-4 {
    background-image: url('/wp-content/uploads/2026/08/2-4-banner-phone-free-space.webp') !important;
  }

  .header-kids-page-5-7 {
    background-image: url('/wp-content/uploads/2026/08/5-7-banner-phone-background-.webp') !important;
  }

  .icons-floating-group .grade-8-12-floating-desktop {
    max-width: 390px;
    left: -5%;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -201px;
    width: calc(110% - 10px);
  }

  .icons-floating-group .kids-5-7 {
    max-width: 400px;
    min-width: 400px;
    left: -15%;
    bottom: 0%;
    margin-left: -40px;
    animation-duration: 13s;
    margin-bottom: -270px;
  }

  .header-kindergarden {
    background-image: url('/wp-content/uploads/2026/08/kindergarten-banner-phone-2-background.webp') !important;
    border-bottom-left-radius: 0px !important;
    min-height: 700px !important;
  }

  .header-first-grade {
    border-bottom-left-radius: 0px !important;
  }

  .icons-floating-group .first-grade {
    max-width: 600px;
    left: 2%;
    margin-left: 0px;
    bottom: 0%;
    animation-duration: 13s;
    margin-bottom: -200px;
    width: calc(100%);
  }

  .icons-floating-group .kid-kindergarden-banner {
    max-width: 480px;
    max-height: 620px;
    left: 0%;
    margin-left: -50px;
    bottom: 0%;
    margin-bottom: -300px;
    animation-duration: 13s;
    width: calc(240% - 30px);
  }

  .icons-floating-group {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    margin-top: 100px;
  }

  .icons-floating-group .kids {
    max-width: 500px;
    min-width: 0px;
    left: -40%;
    margin-top: -80px;
    top: 0px;
    width: calc(250% - 100px);

  }
}

.header-kids-page-2-4 {
  border-bottom-left-radius: 180px !important;
  min-height: 1000px !important;
}

.no-side-marg {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

@media screen and (max-width: 270px) {
  .entry-content>.alignfull {
    margin-left: auto !important;
  }
}

.more-left-marg-first {
  margin-left: 25% !important;
}

@media (max-width:1300px) {
  .first-grade-kid {
    display: none !important;
  }

  .elementary-student-1 {
    display: none !important;
  }
}

@media screen and (max-width:1300px) and (min-width:500px) {
  .more-left-marg-first {
    margin-left: 15% !important;
    margin-right: auto !important;
  }
}

@media screen and (max-width:500px) and (min-width:0px) {
  .more-left-marg-first {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


.red-custom-box {
  padding-top: 30px;
  padding-left: 80px;
  padding-right: 80px;
  padding-bottom: 50px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.blue-custom-box {
  padding-top: 40px;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.white-custom-box-1 {
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  margin: 0 auto !important;
}

.wp-block-column>.no-wrap-boxes {
  flex-wrap: nowrap !important;
}

.wp-block-column>.no-wrap-boxes-780px {
  flex-wrap: nowrap !important;
}

@media (max-width: 780px) {
  .no-wrap-boxes-780px>div:nth-of-type(2) {
    display: none;
  }

  .second-display-780>div:nth-of-type(2) {
    display: none;
  }

  .only-780 {
    display: block;
  }
}

@media (min-width: 780px) {
  .no-wrap-boxes-780px>div:nth-of-type(2) {
    display: block;
  }

  .second-display-780>div:nth-of-type(2) {
    display: block;
  }

  .only-780 {
    display: none !important;
  }
}

@media screen and (max-width:645px) and (min-width:510px) {
  .no-wrap-boxes-780px>div>h2.no-bot-marg {
    font-size: 30px !important;
  }
}

@media screen and (max-width:510px) and (min-width:450px) {
  .no-wrap-boxes-780px>div>h2.no-bot-marg {
    font-size: 25px !important;
  }
}

@media screen and (max-width:510px) and (min-width:450px) {
  .no-wrap-boxes-780px>div>h2.no-bot-marg {
    font-size: 25px !important;
  }

  .no-wrap-boxes-780px>div>h3.c-h {
    font-size: 20px !important;
  }
}

@media screen and (max-width:450px) and (min-width:0px) {
  .no-wrap-boxes-780px>div>h2.no-bot-marg {
    font-size: 18px !important;
  }

  .no-wrap-boxes-780px>div>h3.c-h {
    font-size: 16px !important;
  }
}




/* ==========================================================================
 Table on schedule for kindergarden
   ========================================================================== */


/* 1. WRAPPER - 20px Left/Right Margins & Center Alignment */
.lv-timeline-wrapper {
  max-width: 1120px !important;
  margin: 30px auto !important;
  /* Centers table on screen */
  padding: 0 !important;
  background-color: #fdf7a9 !important;
  /* Yellow background */
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
  font-family: inherit;
}

/* 2. TABLE GRID RESET */
.lv-activity-grid {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 auto !important;
  background-color: #fdf7a9 !important;
}

/* 3. CELL STYLING & INTERIOR WHITE LINES (DESKTOP) */
.lv-activity-grid th,
.lv-activity-grid td {
  background-color: #fdf7a9 !important;
  border: 3px solid #ffffff !important;
  /* Crisp white interior grid */
  padding: 18px 22px !important;
  vertical-align: middle;
  text-align: left;
  box-sizing: border-box;
}

/* 4. STRIP OUTER BORDERS (DESKTOP ONLY) */
@media screen and (min-width: 601px) {

  .lv-activity-grid tr:first-child th,
  .lv-activity-grid tr:first-child td {
    border-top: none !important;
  }

  .lv-activity-grid tr:last-child td {
    border-bottom: none !important;
  }

  .lv-activity-grid tr th:first-child,
  .lv-activity-grid tr td:first-child {
    border-left: none !important;
  }

  .lv-activity-grid tr th:last-child,
  .lv-activity-grid tr td:last-child {
    border-right: none !important;
  }
}

/* 5. DESKTOP FONT SIZES (IN PX) */
.lv-activity-grid th {
  color: #1a1a1a !important;
  font-size: 22px !important;
  font-weight: 700;
  line-height: 1.3;
}

.lv-activity-grid td.lv-accent-label {
  color: #e6511e !important;
  font-weight: 700;
  font-size: 20px !important;
  line-height: 1.4;
}

.lv-activity-grid td {
  color: #222222 !important;
  font-size: 18px !important;
  /* Strict minimum 18px font */
  font-weight: 500;
  line-height: 1.6;
}

/* DESKTOP COLUMN WIDTHS */
.lv-activity-grid th:nth-child(1),
.lv-activity-grid td:nth-child(1) {
  width: 18%;
}

.lv-activity-grid th:nth-child(2),
.lv-activity-grid td:nth-child(2) {
  width: 32%;
}

.lv-activity-grid th:nth-child(3),
.lv-activity-grid td:nth-child(3) {
  width: 50%;
}


/* ===================================================
   6. MOBILE RESPONSIVE LAYOUT (< 600px)
   =================================================== */
@media screen and (max-width: 600px) {

  /* Container becomes invisible wrapper without white edges or container shadows */
  .lv-timeline-wrapper {
    margin: 20px auto !important;
    background-color: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  .lv-activity-grid,
  .lv-activity-grid tbody {
    display: block !important;
    width: 100% !important;
    background-color: transparent !important;
  }

  /* Hide desktop header bar on mobile */
  .lv-activity-grid thead {
    display: none !important;
  }

  /* Each yellow card gets its own clean drop shadow */
  .lv-activity-grid tr {
    display: block !important;
    background-color: #fdf7a9 !important;
    margin-bottom: 16px !important;
    /* Space between yellow cards */
    border-radius: 14px !important;
    padding: 16px 18px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    /* Clean shadow attached directly to each yellow box */
    box-sizing: border-box !important;
  }

  /* Remove extra margin on last card */
  .lv-activity-grid tr:last-child {
    margin-bottom: 0 !important;
  }

  /* Mobile Cell Styles */
  .lv-activity-grid td {
    display: block !important;
    width: 100% !important;
    padding: 4px 0 !important;
    border: none !important;
  }

  /* Cell 1: Time badge */
  .lv-activity-grid td:nth-child(1) {
    font-size: 16px !important;
    opacity: 0.9;
  }

  /* Cell 2: Title + WHITE DIVIDER */
  .lv-activity-grid tr td:nth-child(2) {
    font-size: 20px !important;
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
    border-bottom: 2px solid #ffffff !important;
  }

  /* Cell 3: Description */
  .lv-activity-grid td:nth-child(3) {
    font-size: 18px !important;
    line-height: 1.5 !important;
    padding-top: 2px !important;
  }
}

/* ==========================================================================

   ========================================================================== */

.m-b {
  margin-bottom: 0px !important;
}

@media screen and (min-width:1050px) {
  .header-bl-1050 {
    display: none;
  }

  .header-ab-1050 {
    display: block;
  }

  .header-bl-480 {
    display: none;
  }
}

@media screen and (max-width:1050px) and (min-width:480px) {
  .header-ab-1050 {
    display: none;
  }

  .header-bl-1050 {
    display: block;
  }

  .header-bl-480 {
    display: none;
  }
}

@media screen and (max-width:480px) and (min-width:0px) {
  .header-ab-1050 {
    display: none;
  }

  .header-bl-1050 {
    display: none;
  }

  .header-bl-480 {
    display: block;
  }
}

@media screen and (min-width:1230px) {
  .header-bl-1230 {
    display: none;
  }

  .header-ab-1230 {
    display: block;
  }

  .header-bl-500 {
    display: none;
  }
}

@media screen and (max-width:1230px) and (min-width:500px) {
  .header-ab-1230 {
    display: none;
  }

  .header-bl-1230 {
    display: block;
  }

  .header-bl-500 {
    display: none;
  }
}

@media screen and (max-width:500px) and (min-width:0px) {
  .header-ab-1230 {
    display: none;
  }

  .header-bl-1230 {
    display: none;
  }

  .header-bl-500 {
    display: block;
  }
}

.left-box-custom-kinder {
  padding: 30px !important;
  background: linear-gradient(135deg, #fffbc8 0%, #fce372 100%) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.right-box-custom-kinder {
  max-height: 100% !important;
  padding: 30px !important;
  color: white !important;
  background: linear-gradient(to right, #f0a000, #da5900);
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

h2.smaller-h2 {
  font-size: 35px !important;
}

.custom-btn-kindergarden a {
  -webkit-tap-highlight-color: transparent !important;
  background: linear-gradient(to right, #f0a000, #da5900) !important;
}

.custom-btn-h-s-c a {
  -webkit-tap-highlight-color: transparent !important;
  color: #000000 !important;
  background: linear-gradient(to right, #fdf4fa 0%, #d9c1f4 100%) !important;
  transition: 0.3s ease;
}

.custom-btn-h-s-c a:hover {
  transform: translateY(-5px);
  background: linear-gradient(to right, #b95598 0%, #974cee 100%) !important;
  color: #ffffff !important;
}

.custom-btn-kid-banner a {
  -webkit-tap-highlight-color: transparent !important;
  background: linear-gradient(to right, #eb4949fd, #c71e1efd) !important;
}

.custom-btn-first-grade-banner a {
  -webkit-tap-highlight-color: transparent !important;
  background: linear-gradient(to right, #496febfd, #291ec7fd) !important;
}

.custom-btn-main a {
  -webkit-tap-highlight-color: transparent !important;
  background: #8B1E2D !important;
  border-radius: 40px !important;
}

@media screen and (max-width:1000px) {
  .t-m-b {
    margin-top: 30px;
  }
}





/* ==========================================================================
            TEstimony on kindergarden
   ========================================================================== */


/* Outer card box with drop shadow */
.wp-testimonial-card {
  max-width: 1120px;
  width: 100%;
  margin: 30px auto;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  /* Subtle drop shadow around the box */
  overflow: hidden;
  font-family: inherit;
}

/* Image styling */
.wp-testimonial-card .card-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Text content box */
.wp-testimonial-card .card-content {
  padding: 10px 14px 30px 14px;
  text-align: center;
}

/* Quote styling */
.wp-testimonial-card .quote-text {
  font-style: italic;
  font-size: 20px;
  line-height: 1.6;
  color: #000000;
  margin: 0 0 20px 0;
}

/* Author line styling */
.wp-testimonial-card .author-text {
  font-size: 20px;
  font-weight: 600 !important;
  color: #000000;
  margin: 0;
}

/* Responsive rule for screens under 780px */
@media (max-width: 780px) {
  .wp-testimonial-card .card-content {
    padding: 24px 16px;
  }
}



/* ==========================================================================
                  Team
   ========================================================================== */






/* Container for the whole section */
.team-section {

  padding: 60px 30px;
  background-color: #ffffff;
  /* Very light greenish-grey matching the original site */
}

/* The Grid System */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 4 columns on large screens */
  gap: 32px;
  /* Space between the profiles */
  max-width: 1120px;
  margin: 0 auto;
  /* Centers the grid on the page */
}

/* Individual Team Member Card */
.team-member {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Space between image and text */
}

.member-txt-bld {
  font-weight: bold;
}

.align-cntr {
  text-align: center;
  align-items: center;
}

.img-to-left {
  object-position: 20% 40% !important;
}

.img-to-top {
  object-position: 50% 0% !important;
}

.img-to-right {
  object-position: 100% 50% !important;
}

/* Image Styling */
.member-image {

  width: 100%;
  height: auto;
  object-position: 50% 60%;
  border-radius: 24px;
  /* Recreates the rounded corners */
  object-fit: cover;
  aspect-ratio: 4 / 4.9;
  /* Keeps the images uniformly sized */

  /* --- PREVENTS TEXT & ELEMENT HIGHLIGHTING --- */
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Standard */
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

/* Text Container */
.member-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Name Styling */
.member-name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #001f2e;
  /* Dark blue/black */
}

/* Title Styling */
.member-title {
  margin: 0;
  font-size: 16px;
  color: #5b737d;
  /* Muted grey/blue */
}

.t-m {
  margin-top: 15px;
}

@media screen and (min-width:1500px) {
  .btn-kids-1 {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    border-radius: 4px;
    color: #ffffff;
    height: 100%;
    font-weight: 600;
    /* ADDED font-size to the transition list so it doesn't snap instantly */
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease, font-size 0.45s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(0px);
    font-size: 20px;
    /* Make sure you have a starting font size set! */
  }

  .btn-kids-1:focus,
  .btn-kids-1:active,
  .btn-kids-1:hover {
    color: #ffffff !important;
    transform: translateY(-6px);
    box-shadow: 0 12px 20px rgba(63, 63, 63, 0.35);
    font-size: 22px;
    /* Now this will transition smoothly */
  }
}

@media screen and (max-width:1500px) {
  .btn-kids-1 {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    border-radius: 4px;
    color: #ffffff;
    height: 100%;
    font-weight: 600;
    /* ADDED font-size to the transition list so it doesn't snap instantly */
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease, font-size 0.45s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(0px);
    font-size: 16px;
    /* Make sure you have a starting font size set! */
  }

  .btn-kids-1:focus,
  .btn-kids-1:active,
  .btn-kids-1:hover {
    color: #ffffff !important;
    transform: translateY(-6px);
    box-shadow: 0 12px 20px rgba(63, 63, 63, 0.35);
    font-size: 18px;
    /* Now this will transition smoothly */
  }
}


.btn-main-1 {
  padding-top: calc(0.667em + 2px);
  padding-right: calc(1.333em + 2px);
  padding-bottom: calc(0.667em + 2px);
  padding-left: calc(1.333em + 2px);
  border-radius: 4px;
  color: #ffffff;
  height: 100%;
  font-weight: 600;
  /* ADDED font-size to the transition list so it doesn't snap instantly */
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease, font-size 0.45s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(0px);
  font-size: 16px;
  /* Make sure you have a starting font size set! */
}

.btn-main-1:focus,
.btn-main-1:active,
.btn-main-1:hover {
  color: #ffffff !important;
  transform: translateY(-6px);
  box-shadow: 0 12px 20px rgba(55, 56, 56, 0.35);
  font-size: 18px;
  /* Now this will transition smoothly */
}

.btn-for-contc {
  padding-top: calc(0.667em + 2px);
  padding-right: calc(1.333em + 2px);
  padding-bottom: calc(0.667em + 2px);
  padding-left: calc(1.333em + 2px);
  border-radius: 4px;
  color: #ffffff;
  height: 100%;
  font-weight: 600;
  /* ADDED font-size to the transition list so it doesn't snap instantly */
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease, font-size 0.45s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(0px);
  font-size: 16px;
  /* Make sure you have a starting font size set! */
}

.btn-for-contc:focus,
.btn-for-contc:active,
.btn-for-contc:hover {
  color: #ffffff !important;
  transform: translateY(-6px);
  box-shadow: 0 12px 20px rgba(0, 123, 255, 0.35);
  font-size: 18px;
  /* Now this will transition smoothly */
}

/* =========================================
   RESPONSIVE BREAKPOINTS
   ========================================= */

/* Tablets and small laptops: 3 Columns */
@media (max-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Large mobile phones and small tablets: 2 Columns */
@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small mobile phones: 1 Column */
@media (max-width: 480px) {
  .team-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    /* Gives a bit more vertical breathing room on mobile */
  }
}



/* ==========================================================================
                  Lingivsta metrics for team
   ========================================================================== */






/* Section & Typography Basics */
.metrics-section {
  padding: 60px 20px;
  text-align: center;
  background-color: #ffffff;
  /* Faint background tint if needed */
}

.metrics-header {
  margin-bottom: 50px;
}

.metrics-title {
  font-size: 48px;
  color: #2c3338;
  margin: 0 0 10px 0;
  font-weight: 500;
}

.metrics-subtitle {
  font-size: 20px;
  color: #555;
  margin: 0;
}

/* Grid Layout */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1000px;
  margin: 0 auto;
  align-items: center;
}

/* Individual Metric Blocks */
.metric-item {
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Adds the teal divider line to the right of every item */
  border-right: 2px solid #8B1E2D;
}

/* Removes the divider line from the very last item */
.metric-item:last-child {
  border-right: none;
}

/* The numbers */
.metric-number {
  font-size: 48px;
  color: #8B1E2D;
  line-height: 1.1;
  font-weight: 400;
}

.metric-add {
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  color: #8B1E2D;
  /* Updated Accent Color */
  letter-spacing: -2px;
}

/* The text under the numbers */
.metric-label {
  font-weight: 700;
  font-size: 20px;
  color: #444;
}

/* =========================================
   RESPONSIVE BREAKPOINTS
   ========================================= */

/* Tablets (Switch to 2 columns) */
@media (max-width: 768px) {
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }

  /* Reset borders for a 2x2 grid */
  .metric-item {
    border-right: none;
  }

  /* Only put borders on the left column */
  .metric-item:nth-child(odd) {
    border-right: 2px solid #8B1E2D;
  }
}

/* Mobile Phones (Switch to 1 column) */
@media (max-width: 480px) {
  .metrics-grid {
    grid-template-columns: 1fr;
    row-gap: 50px;
  }

  /* Remove all vertical borders on tiny screens */
  .metric-item:nth-child(odd) {
    border-right: none;
  }
}

/* ==========================================================================
   COMPANY HISTORY
   ========================================================================== */

.company-history-section {
  --content-width: 1200px;
  --page-padding: 20px;
  background: #f5f5f7;
  padding: 80px 0;
  color: #111;
  font-size: 18px;
  /*
    Prevents the timeline from creating page-level horizontal scrolling.
    The actual timeline has its own horizontal scroll.
  */
  overflow-x: clip;

  /* --- PREVENTS TEXT & ELEMENT HIGHLIGHTING --- */
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Standard */
}


/* ==========================================================================
   CONTAINER
   ========================================================================== */

.history-container {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  box-sizing: border-box;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.history-top-bar {
  display: flex;

  justify-content: space-between;
  align-items: flex-end;

  gap: 30px;

  margin-bottom: 25px;

  padding-left: max(var(--page-padding),
      calc((100vw - var(--content-width)) / 2));

  /*
    Normally keeps the navigation near the content area.
    Desktop rule below moves it farther left.
  */
  padding-right: var(--page-padding);

  box-sizing: border-box;

  flex-wrap: nowrap;
}


.history-title-area {
  max-width: 600px;
}


.history-eyebrow {
  display: block;

  margin-bottom: 10px;

  text-transform: uppercase;

  font-size: 18px;
  font-weight: 700;

  letter-spacing: 1px;

  color: #555;
}


.history-heading {
  margin: 0 0 15px;

  font-size: 2.5rem;
  line-height: 1.2;

  letter-spacing: -1px;
}


.history-heading em {
  color: rgb(139, 30, 45);
  font-style: normal;
}


.history-subtext {
  margin: 0;

  font-size: 20px;
  line-height: 1.5;

  color: #666;
}


/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.history-nav-arrows {
  display: flex;

  align-items: center;

  gap: 12px;

  /*
    Keep the navigation from shrinking.
  */
  flex-shrink: 0;
}


.nav-btn {
  position: relative;

  width: 68px;
  height: 68px;

  padding: 0;

  border: 1px solid rgba(17, 17, 17, 0.12);

  border-radius: 18px;

  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, 0.95),
      rgba(245, 245, 247, 0.8));

  color: #111;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  overflow: hidden;

  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);

  transition:
    transform 0.35s cubic-bezier(.22, 1, .36, 1),
    background 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}


/* Light sweep */
.nav-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg,
      transparent 20%,
      rgba(255, 255, 255, 0.9) 50%,
      transparent 80%);
  transform: translateX(-130%);
  transition:
    transform 0.6s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}


/* Glow */
.nav-btn::after {
  content: "";

  position: absolute;

  width: 80px;
  height: 80px;

  border-radius: 50%;

  background: rgba(0, 86, 255, 0.12);

  filter: blur(20px);

  opacity: 0;

  transform: scale(0.5);

  transition:
    opacity 0.35s ease,
    transform 0.35s ease;

  pointer-events: none;
}


.nav-btn:hover {
  transform: translateY(-5px) scale(1.04);

  background: #111;

  color: #fff;

  border-color: #111;

  box-shadow:
    0 14px 35px rgba(0, 0, 0, 0.16),
    0 0 0 6px rgba(0, 0, 0, 0.03);
}


.nav-btn:hover::before {
  transform: translateX(130%);
}


.nav-btn:hover::after {
  opacity: 1;
  transform: scale(1);
}


.nav-btn:active,
.nav-btn:focus {
  transform: translateY(-1px) scale(0.96);
  background-color: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  box-shadow: none;
  color: #111;
  transition-duration: 0.12s;
}


.nav-btn:focus-visible {
  outline: none;

  box-shadow:
    0 0 0 4px rgba(0, 86, 255, 0.18),
    0 12px 30px rgba(0, 0, 0, 0.12);
}


.nav-btn svg {
  position: relative;
  z-index: 2;

  width: 30px;
  height: 30px;

  stroke-width: 1.8;

  transition:
    transform 0.4s cubic-bezier(.22, 1, .36, 1);
}


.btn-prev:hover svg {
  transform: translateX(-4px);
}


.btn-next:hover svg {
  transform: translateX(4px);
}


/* ==========================================================================
   TIMELINE OUTER VIEWPORT
   ========================================================================== */

.history-slider-viewport {
  /*
    Align the timeline with the left edge of the
    centered 1200px content area.
  */
  margin-left: max(var(--page-padding),
      calc((100vw - var(--content-width)) / 2));

  /*
    From that new starting point, continue all the
    way to the right edge of the screen.
  */
  width: calc(100vw - max(var(--page-padding),
        calc((100vw - var(--content-width)) / 2)));

  position: relative;

  overflow: visible;

  box-sizing: border-box;

  padding-top: 30px;
  padding-bottom: 0px;
}


/* ==========================================================================
   ACTUAL HORIZONTAL SCROLLER
   ========================================================================== */

.history-slider {
  width: 100%;

  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;

  gap: 40px;

  /*
    Small breathing room so the first card isn't
    touching the left edge of the timeline.
  */
  padding-left: 60px;
  padding-bottom: 80px;

  /*
    Large right-side space so the final card can
    fully enter the viewport and its shadow isn't
    immediately against the edge.
  */
  padding-right: 140px;

  box-sizing: border-box;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;

  scroll-padding-left: 60px;
  scroll-padding-right: 140px;

  scrollbar-width: none;
  -ms-overflow-style: none;

  cursor: grab;
}

.history-slider img {
  pointer-events: none;
  -webkit-user-drag: none;
}

.history-slider::-webkit-scrollbar {
  display: none;
}

.history-slider:active {
  cursor: grabbing;
}


/* ==========================================================================
   SLIDE
   ========================================================================== */

.history-slide-item {
  position: relative;

  display: flex;
  flex-direction: column;

  flex: 0 0 450px;

  min-width: 450px;
  max-height: 610px;

  scroll-snap-align: start;

  /*
    Important: do not clip the card.
  */
  overflow: visible;
}


/* First item gets additional room */
.history-slide-item:first-child {
  margin-left: 50px;
}


/* Last item gets additional breathing room */
.history-slide-item:last-child {
  margin-right: 0;
}


/* ==========================================================================
   YEAR MARKER
   ========================================================================== */

.history-year-marker {
  display: flex;
  flex-direction: column;

  margin-bottom: 20px;
}


.year-text {
  font-size: 4rem !important;

  font-family: Libertinus Serif, Montserrat;

  font-style: italic;
  font-weight: bold;

  letter-spacing: -1px;

  color: #222;
}


.year-dot {
  position: relative;

  width: 12px;
  height: 12px;

  margin-top: 5px;

  background-color: rgb(139, 30, 45);

  border-radius: 3px;

  box-shadow:
    0 0 0 5px rgba(224, 124, 85, 0.479),
    0 0 20px rgba(224, 85, 85, 0.603);

  animation: dotPulse 3s ease-in-out infinite;
}


.year-dot::after {
  content: "";

  position: absolute;

  top: 15px;
  left: 5px;

  width: 1px;
  height: 60px;

  background:
    linear-gradient(to bottom,
      rgb(179, 76, 90),
      transparent);

  z-index: 0;
}


@keyframes dotPulse {

  0%,
  100% {
    box-shadow:
      0 0 0 5px rgba(224, 124, 85, 0.123),
      0 0 20px rgba(224, 85, 85, 0.014);
  }

  50% {
    box-shadow:
      0 0 0 5px rgba(224, 124, 85, 0.048),
      0 0 20px rgba(224, 85, 85, 0.603);
  }
}


/* ==========================================================================
   CARD
   ========================================================================== */

.history-card {
  position: relative;

  height: 600px;

  overflow: visible;
}


.history-card.mt-extend {
  margin-top: 72px;
}


/* ==========================================================================
   PHOTO FRAME
   ========================================================================== */

.photo-frame {
  position: absolute;

  /*
    Instead of left: 5%, the card has a controlled 20px inset.
    This makes its hover geometry predictable.
  */
  left: 10px;

  width: calc(100% - 20px);

  box-sizing: border-box;

  padding: 16px 16px 32px;

  background: #fff;

  border-radius: 12px;

  /*
    Large soft shadow.
  */
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.08),
    0 5px 15px rgba(0, 0, 0, 0.04);

  /*
    THIS is important.

    Scaling/rotation is anchored from the left side,
    so the card doesn't visually jump left when hovered.
  */
  transform-origin: left center;

  will-change: transform, box-shadow;

  transition:
    transform 0.55s cubic-bezier(.22, 1, .36, 1),
    box-shadow 0.4s ease;

  z-index: 1;

  /*
    Don't clip the shadow.
  */
  overflow: visible;
}


/* ==========================================================================
   DEFAULT TILTS
   ========================================================================== */

.history-slide-item:nth-child(odd) .photo-frame {
  transform: rotate(-5deg);
}


.history-slide-item:nth-child(even) .photo-frame {
  transform: rotate(4deg);
}


.history-slide-item:nth-child(3n) .photo-frame {
  transform: rotate(-3deg);
}


/* ==========================================================================
   HOVER
   ========================================================================== */

.history-slide-item .photo-frame:hover {
  /*
    The transform-origin above keeps the left edge anchored.
  */
  transform:
    translateY(-14px) rotate(0deg) scale(1.025);

  z-index: 100;

  box-shadow:
    0 35px 80px rgba(0, 0, 0, 0.16),
    0 12px 30px rgba(0, 0, 0, 0.08);
}


/* ==========================================================================
   IMAGES
   ========================================================================== */

.photo-frame img {
  display: block;

  width: 100%;
  height: 300px;

  object-fit: cover;

  border-radius: 8px;

  margin: 0 0 20px;
}


/* ==========================================================================
   CARD TEXT
   ========================================================================== */

.photo-frame p {
  margin: 0;

  font-size: 20px;

  font-family: sans-serif;

  font-weight: 700;

  line-height: 1.3;

  text-align: left;

  color: #111;
}


/* ==========================================================================
   CARD POSITIONS
   ========================================================================== */

.layout-top {
  top: 10px;
}


.layout-center {
  top: 10%;

  transform:
    translateY(calc(-50% - 14px)) rotate(-2deg);
}


/*
  Hover state for center card.
*/
.history-slide-item:nth-child(3) .photo-frame:hover {
  transform:
    rotate(0deg) scale(1.025);
}


.layout-bottom {
  bottom: 10px;
}


/* ==========================================================================
   DISABLED NAVIGATION
   ========================================================================== */

.nav-btn:disabled {
  opacity: 0.35;

  cursor: not-allowed;

  transform: none;

  background: rgba(255, 255, 255, 0.65);

  color: #111;

  box-shadow: none;
}


.nav-btn:disabled::before,
.nav-btn:disabled::after {
  display: none;
}


.nav-btn:disabled:hover {
  transform: none;

  background: rgba(255, 255, 255, 0.65);

  color: #111;

  border-color: rgba(17, 17, 17, 0.12);

  box-shadow: none;
}


/* ==========================================================================
   DESKTOP ARROW POSITION
   ========================================================================== */

/*
  This ONLY changes the position of the arrows.
  It does not alter their animation.

  Increase 120px to move them even farther left.
*/

@media (min-width: 769px) {

  .history-nav-arrows {
    position: relative;

    right: 300px;
  }

}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) and (min-width: 769px) {

  .history-nav-arrows {
    right: 60px;
  }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 860px) {


  .layout-top {
    top: 5px;
  }


  .layout-center {
    top: 15%;

    transform:
      translateY(calc(-50% - 14px)) rotate(-2deg);
  }

  .layout-bottom {
    bottom: 30px;
  }

  .company-history-section {
    padding: 50px 0;
  }


  .history-top-bar {

    flex-direction: column;

    align-items: flex-start;

    gap: 25px;

    padding-left: 20px;
    padding-right: 20px;

    margin-bottom: 15px;
  }


  .history-title-area {
    max-width: 100%;
  }


  .history-heading {
    font-size: 20px;
  }


  .history-subtext {
    font-size: 18px;
  }


  .history-nav-arrows {
    position: static;

    right: auto;
  }


  .history-slider-viewport {
    margin-left: 0;
    width: 100%;

    padding-top: 0px;
    padding-bottom: 0px;
  }


  .history-slider {
    width: 100%;

    padding-left: 50px;
    padding-right: 60px;

    scroll-padding-left: 50px;
    scroll-padding-right: 60px;
  }


  .history-slide-item {

    flex: 0 0 350px;

    min-width: 350px;
  }


  .photo-frame {
    left: 15px;

    width: calc(100% - 30px);
  }


  .year-text {
    font-size: 3rem;
  }


  .nav-btn {
    width: 52px;
    height: 52px;

    border-radius: 16px;
  }


  .photo-frame img {
    height: 260px;
  }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {

  .history-slider {

    padding-left: 50px;
    padding-right: 50px;

    scroll-padding-left: 50px;
    scroll-padding-right: 50px;
  }


  .history-slide-item {

    flex: 0 0 310px;

    min-width: 310px;
  }


  .photo-frame {

    left: 12px;

    width: calc(100% - 24px);
  }


  .photo-frame img {
    height: 230px;
  }


  .photo-frame p {
    font-size: 18px;
  }

}



/* ==========================================================================
   Voucher
   ========================================================================== */

/* Container & Global Base */
.vp-container {
  background: #ffffff;
  color: #333333;
  width: 100%;
  margin: 0 auto;
  font-size: 18px;
}

/* Header & Image Layouts */
.vp-header {
  display: block;
}

.vp-img-responsive {
  width: 100%;
  display: block;
}

.vp-img-centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.vp-hat-img {
  width: 177px;
}

/* Icons */
.vp-icon-sm {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  flex-shrink: 0;
}

.vp-icon-md {
  width: 18px;
  margin-top: 1px;
  flex-shrink: 0;
}

.vp-icon-lg {
  width: 22px;
}

/* Content Blocks & Backgrounds */
.vp-bg-section {
  background-color: #f0f0f0;
  background-image: url('/wp-content/uploads/2026/02/yellow_vaucher_background-fragment.webp');
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
}

.vp-section-padding-1 {
  margin: 0 auto;
  padding: 20px 22px 18px;
  max-width: 1120px;
}

.vp-section-padding-2 {
  margin: 0 auto;
  padding: 4px 22px 22px;
  max-width: 1120px;
}

.vp-section-padding-3 {
  margin: 0 auto;
  padding: 6px 22px 22px;
  max-width: 1120px;
}

.vp-section-padding-4 {
  margin: 0 auto;
  padding: 4px 22px 24px;
  max-width: 1120px;
}

/* Typography & Headings */
.vp-title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 12px;
  color: #222222;
  font-family: Arial, Helvetica, sans-serif;
}

.vp-font-calibri {
  font-family: Calibri, sans-serif;
}

.vp-text-lead {
  color: #444444;
  margin-bottom: 6px;
  line-height: 1.55;
}

.vp-text-subtitle {
  color: #444444;
  margin-bottom: 8px;
}

/* Containers & Flex/Grid Utility */
.vp-bordered-box {
  border: 2px solid #4caf50;
  border-radius: 6px;
  margin: 0 8px;
  padding: 14px 16px 16px;
}

.vp-grid-center {
  display: grid;
  place-items: center;
}

.vp-flex-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 10px;
}

.vp-flex-1 {
  flex: 1;
}

/* Lists & Items */
.vp-list-clean {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vp-list-dash {
  padding-left: 4px;
}

.vp-list-dash li {
  color: #444444;
  line-height: 1.75;
}

.vp-list-item-icon {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #444444;
  margin-bottom: 5px;
  line-height: 1.5;
}

.vp-schedule-details {
  padding-left: 21px;
  color: #444444;
  line-height: 1.65;
  margin-bottom: 6px;
}

.vp-notice-item {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  color: #333333;
  font-style: italic;
  font-weight: 600;
  line-height: 1.4;
}

/* Yellow Banners / Call-to-Actions */
.vp-yellow-banner {
  background-color: #f6c916;
  background-image: url('/wp-content/uploads/2026/02/yellow_vaucher_rectangle_under_form-fragment.webp');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 30px 18px;
  text-align: center;
}

.vp-yellow-banner-form {
  padding: 20px 18px 28px;
}

.vp-banner-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 3px;
}

.vp-banner-title {
  font-size: 24px;
  font-weight: bold;
  color: #2a2a2a;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

.vp-banner-subtitle {
  color: #444444;
  font-weight: bold;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.vp-btn {
  display: inline-block;
  background: #ffffff;
  color: #222222;
  font-weight: bold;
  padding: 14px 64px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  text-decoration: none;
}

.vp-form-wrapper {
  background: #ffffff;
  border-radius: 3px;
  padding: 12px 14px 8px;
  text-align: left;
  margin-bottom: 20px;
}

/* Reviews Section */
.vp-reviews-section {
  background: #efefef;
  padding: 24px 14px 30px;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}

.vp-reviews-title {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  color: #222222;
  margin-bottom: 25px;
}

.vp-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 450px), 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.vp-review-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.vp-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: #777777;
  margin: 0 auto 10px;
  flex-shrink: 0;
}

.vp-author {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #333333;
  margin-bottom: 2px;
}

.vp-stars {
  text-align: center;
  color: #f5a500;
  font-size: 14px;
  margin-bottom: 12px;
}

.vp-review-text {
  font-size: 15px;
  color: #555555;
  line-height: 1.6;
  text-align: center;
}



/* ==========================================================================
  
   ========================================================================== */


.modern-scroll-btn {
  position: fixed !important;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;

  /* Bolder red for high visibility, keeping a slight glass blur */
  background: rgba(220, 38, 38, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  /* Border removed completely */
  border: none !important;
  /* Stronger shadows so it pops off the white background */
  box-shadow:
    0 8px 24px rgba(220, 38, 38, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 50% !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  z-index: 99999 !important;
}

.modern-scroll-btn.show-btn {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.modern-scroll-btn:hover {
  /* Turns fully solid red on hover for an interactive feel */
  background: rgba(220, 38, 38, 1) !important;
  transform: translateY(-5px) scale(1.05) !important;
  box-shadow:
    0 12px 32px rgba(220, 38, 38, 0.6) !important,
    0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

/* ARROW STYLING */
.modern-scroll-btn svg {
  width: 28px;
  height: 28px;
  stroke: #ffffff;
  /* Made the arrow slightly thicker (2.5px) for better visibility */
  stroke-width: 4px;
  fill: none !important;
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4)) !important;
  transition: transform 0.3s ease !important;
}

.modern-scroll-btn:hover svg {
  transform: translateY(-4px) !important;
}

@media screen and (max-width:660px) {
  .modern-scroll-btn {
    bottom: 40px !important;
    right: 10px !important;
    width: 50px;
    height: 50px;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .modern-scroll-btn svg {
    width: 36px !important;
    height: 36px !important;
    stroke: #ffffff !important;
    /* Made the arrow slightly thicker (2.5px) for better visibility */
    stroke-width: 3px !important;
  }
}


/* ==========================================================================
  
   ========================================================================== */

.no-bot-marg-s {
  padding-top: 0px !important;
}

@media screen and (min-width:1600px) {
  #post-1262>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-title.\32 nd-banner-first-grade.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.has-white-background-color.gb-has-custom-text-color.gb-columns-center.alignfull.aos-init.aos-animate {
    min-height: 750px;
    height: 100%;
    padding-top: 50em !important;
  }
}

@media screen and (max-width:1600px) and (min-width:1100px) {
  #post-1262>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-title.\32 nd-banner-first-grade.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.has-white-background-color.gb-has-custom-text-color.gb-columns-center.alignfull.aos-init.aos-animate {
    min-height: 600px;
    height: 100%;
  }
}

@media screen and (max-width:1100px) and (min-width:750px) {
  #post-1262>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-title.\32 nd-banner-first-grade.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.has-white-background-color.gb-has-custom-text-color.gb-columns-center.alignfull.aos-init.aos-animate {
    min-height: 600px;
    height: 100%;
    background-position: 70% 50% !important;
  }
}

@media screen and (max-width:750px) and (min-width:460px) {
  #post-1262>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-title.\32 nd-banner-first-grade.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.has-white-background-color.gb-has-custom-text-color.gb-columns-center.alignfull.aos-init.aos-animate {
    min-height: 600px;
    height: 100%;
    background-position: 65% 50% !important;
  }

  #post-1262>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-title.\32 nd-banner-first-grade.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.has-white-background-color.gb-has-custom-text-color.gb-columns-center.alignfull.aos-init.aos-animate>div>div>div>div>div>div>div>div>div>h2 {
    font-size: 30px !important;
  }
}

@media screen and (max-width:460px) and (min-width:0px) {
  #post-1262>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-title.\32 nd-banner-first-grade.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.has-white-background-color.gb-has-custom-text-color.gb-columns-center.alignfull.aos-init.aos-animate {
    height: 100%;
    background-position: 60% 50% !important;
  }

  #post-1262>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-title.\32 nd-banner-first-grade.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.has-white-background-color.gb-has-custom-text-color.gb-columns-center.alignfull.aos-init.aos-animate>div>div>div>div>div>div>div>div>div>h2 {
    font-size: 30px !important;
  }
}

body.error404 .page-title {
  display: none;
}

/* --- Custom 404 Page Styles --- */

.custom-404-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8% 20px 0 20px;
  font-family: "Inter", sans-serif;
  /* Adjust to match your theme's font */
}

/* The giant 404 text */
.custom-404-code {
  /* clamp() makes the font shrink gracefully on mobile and grow on desktop */
  font-size: clamp(40px, 15vw, 15rem);
  font-weight: 800;
  color: #1a1a1a;
  margin: 0;
  line-height: 1;
  letter-spacing: -2px;
}

/* The gradient inside the "0" (Red Palette) */
.gradient-zero {
  background: linear-gradient(180deg, #ff416c 0%, #8b0000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* The main subtitle */
.custom-404-title {
  font-size: clamp(30px, 10vw, 10rem);
  font-weight: 700;
  color: #1a1a1a;
  margin: 10px 0;
  letter-spacing: -1px;
}

/* The gradient inside "not found" (Red Palette) */
.gradient-text {
  background: linear-gradient(90deg, #8b0000 0%, #ff0000 50%, #ff7f50 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* The small gray paragraph */
.custom-404-desc {
  color: #888;
  max-width: 800px;
  margin: 20px auto 40px auto;
  font-size: 20px;
  line-height: 1.6;
}

/* The rounded black button */
.custom-404-btn {
  background-color: #1a1a1a;
  color: #ffffff;
  padding: 15px 35px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(20px, 1vw, 5rem);
  transition: transform 0.2s ease, background-color 0.2s ease;
  border: none;
  display: inline-block;
}

/* Button hover effect */
.custom-404-btn:hover {
  background-color: #333333;
  transform: translateY(-3px);
  color: #ffffff;
  text-decoration: none;
}

@media screen and (max-width:1100px) {
  .custom-404-wrapper {
    padding-top: 150px !important;
  }

}

/* ==========================================================================
  
   ========================================================================== */
.info-cta {
  text-align: center !important;
  padding: 48px 24px !important;
  border-radius: 12px !important;
  margin: 20px 0 !important;
}

.info-cta_title {
  margin: 0 0 12px 0;
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
}

.info-cta_text {
  margin: 0 0 28px 0;
  color: #475569;
  font-size: 16px;
}

.info-cta_buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Base Button Styles */
.btn {
  position: relative;
  padding: 14px 32px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 18px;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s ease;
}

/* Light Sheen Overlay Effect */
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transition: left 0.5s ease-in-out;
}

.btn:hover::after {
  left: 100%;
}

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

.btn:active {
  transform: translateY(-1px) scale(0.97);
}

/* Primary Button */
.btn--primary {
  background: linear-gradient(135deg, #ffffff 0%, #d9a86c 100%);
  color: #2d1e0f;
  border: 1px solid #d4a56a;
  box-shadow: 0 4px 14px 0 rgba(190, 140, 80, 0.35);
}

.btn--primary:hover {
  box-shadow: 0 8px 22px 0 rgba(170, 120, 60, 0.45);
}

.btn--primary:active {
  box-shadow: 0 2px 8px 0 rgba(170, 120, 60, 0.25);
}

/* Secondary Button */
.btn--secondary {
  background: linear-gradient(135deg, #facc15 0%, #ca8a04 100%);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 14px 0 rgba(202, 138, 4, 0.35);
}

.btn--secondary:hover {
  box-shadow: 0 8px 22px 0 rgba(202, 138, 4, 0.45);
  color: #ffffff;
}

.btn--secondary:active {
  box-shadow: 0 2px 8px 0 rgba(202, 138, 4, 0.25);
  color: #ffffff;
}

/* ==========================================================================
  
   ========================================================================== */

.left-yellow-section {
  background: linear-gradient(to right, #ffffbe 0%, #fffa99 50%, #fff37a 100%);
  color: #1a1a1a;
  padding: 16px 24px;
  border-radius: 4px;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
}

.right-red-section {
  background: linear-gradient(135deg,
      #cc3d00 0%,
      /* Top-left (base shade) */
      #da4e00 45%,
      /* Middle transition */
      #ea5b0b 75%,
      /* Brightening... */
      #f87219 100%
      /* Bottom-right highlight */
    );
  color: #ffffff;
  padding: 16px 24px;
  border-radius: 4px;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
}

@media (min-width: 800px) {
  .responsive-grid-800 div.gb-layout-column-wrap {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
}

/* Stacks items vertically below 800px */
@media (max-width: 800px) {
  .responsive-grid-800>div.gb-layout-column-wrap {
    display: block !important;
  }
}

.margin-left-right-20 {
  margin-left: 20px;
  margin-right: 20px;
}

@media screen and (max-width:671px) and (min-width:600px) {
  .h-120-71-0 {
    min-height: 120px !important;
    height: 120px !important;
    max-height: 120px !important;
  }
}

@media screen and (max-width:662px) and (min-width:600px) {
  .h-120-62-0 {
    min-height: 120px !important;
    height: 120px !important;
    max-height: 120px !important;
  }
}

@media screen and (max-width:610px) and (min-width:600px) {
  .h-120-10-0 {
    min-height: 150px !important;
    height: 150px !important;
    max-height: 150px !important;
  }
}

@media screen and (max-width:818px) and (min-width:681px) {
  .h-120-10-0 {
    min-height: 120px !important;
    height: 120px !important;
    max-height: 120px !important;
  }
}

@media screen and (min-width:1112px) {
  .h-120-10-0 {
    min-height: 90px !important;
    height: 90px !important;
    max-height: 90px !important;
  }
}

@media screen and (max-width:891px) and (min-width:818px) {
  .h-120-91-18 {
    min-height: 90px !important;
    height: 90px !important;
    max-height: 90px !important;
  }
}

@media screen and (max-width:871px) and (min-width:850px) {
  .h-120-71-50 {
    min-height: 90px !important;
    height: 90px !important;
    max-height: 90px !important;
  }
}

@media screen and (max-width:978px) and (min-width:970px) {
  .h-120-78-70 {
    min-height: 90px !important;
    height: 90px !important;
    max-height: 90px !important;
  }
}

/* ==========================================================================
  
   ========================================================================== */

.roadmap-card {
  width: 100%;
  max-width: 900px;
  background: linear-gradient(135deg, #7da5f7 0%, #3362c6 100%);
  border-radius: 6px;
  padding: 40px 30px;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  box-sizing: border-box;
  margin: 20px auto !important;
}

.roadmap-card-red {
  width: 100%;
  max-width: 900px;
  background: linear-gradient(to right, #ffaa35 0%, #ef5c30 50%, #d84128 100%);
  border-radius: 6px;
  padding: 40px 30px;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  box-sizing: border-box;
  margin: 20px auto !important;
  z-index: 30;
}

.roadmap-card-purple {
  width: 100%;
  max-width: 600px;
  background: linear-gradient(to right, #fdf4fa 0%, #d9c1f4 100%);
  border-radius: 6px;
  padding: 40px 30px;
  color: #000000;
  text-align: center;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  box-sizing: border-box;
  margin: 20px auto !important;
}

.school-features {
  z-index: 3;
  display: flex;
  align-items: center;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 30px 20px;
  position: relative;
  box-sizing: border-box;
}

.school-features__media {
  flex: 0 0 46%;
  /* Expanded media width to fit full image aspect ratio */
  position: relative;
  z-index: 1;
}

.school-features__media img {
  width: 100%;
  height: 620px;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.school-features__body {
  flex: 0 0 58%;
  /* Reduced box width */
  margin-left: -4%;
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, #ffffff 0%, #e6effd 100%);
  border-radius: 8px;
  padding: 44px 36px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.school-features__item {
  margin-bottom: 20px;
}

.school-features__item:last-child {
  margin-bottom: 0;
}

.school-features__title {
  font-size: 20px;
  font-weight: 700;
  color: #000000;
  text-align: center;
  margin: 0 0 6px 0;
}

.school-features__text {
  font-size: 18px;
  line-height: 1.42;
  color: #1a1a1a;
  text-align: left;
  margin: 0;
}

/* Tablet & Mobile Responsiveness (< 770px) */
@media (max-width: 770px) {
  .school-features {
    flex-direction: column;
    padding: 20px 20px;
  }

  .school-features__media,
  .school-features__body {
    flex: none;
    width: 100%;
  }

  .school-features__media img {
    max-height: 600px;
    object-fit: cover;
    object-position: center 0%;
  }

  .school-features__body {
    margin-left: 0;
    margin-top: -30px;
    padding: 32px 20px;
  }
}


.padding-top-bot-none {
  padding: 0px !important;
}

/* ==========================================================================
          Информация за видовете обучения
   ========================================================================== */
.lv-futuristic-container {
  max-width: 1120px;
  margin: 40px auto;
  font-family: inherit;
  font-size: 18px;
}

.lv-title {
  text-align: center;
  font-size: 2.4rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #8A1C29;
  margin-bottom: 50px;
}

.lv-switcher-wrapper {
  -webkit-tap-highlight-color: transparent !important;
  /* Mobile touch highlight */
  background: rgba(251, 244, 238, 0.95);
  border-radius: 24px;
  padding: 40px;
  border: 1px solid rgba(138, 28, 41, 0.12);
  box-shadow: 0 20px 40px rgba(138, 28, 41, 0.05);
}

/* Sliding Tab Header Track */
.lv-tabs-header {
  position: relative;
  display: flex;
  background: #EFE6DF;
  padding: 8px;
  border-radius: 50px;
  margin-bottom: 35px;
}

/* Moving Pill Selector Animation */
.lv-glider {
  position: absolute;
  top: 8px;
  left: 0;
  /* Fixed: set to 0 so translateX matches targetBtn.offsetLeft precisely */
  height: calc(100% - 16px);
  background: linear-gradient(135deg, #8A1C29 0%, #A62B38 100%);
  border-radius: 40px;
  box-shadow: 0 6px 20px rgba(138, 28, 41, 0.35);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}

/* Tab Buttons */
.lv-tab-btn {
  position: relative;
  z-index: 2;
  flex: 1;
  padding: 16px 28px;
  border: none;
  border-radius: 40px;
  background: transparent !important;
  color: #8A1C29;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: transform 0.3s ease-in-out;
}

.lv-tab-btn:hover {
  background: #ffffff70 !important;
  color: #000000 !important;
}

.lv-tab-btn.active {
  color: #FFFFFF !important;
}

.lv-tab-btn.active:hover {
  background: #ffffff10 !important;
  color: #FFFFFF !important;
}

/* Content & Typography */
.lv-tab-content {
  display: none;
  color: #2C2C2C;
  line-height: 1.85;
  font-size: 18px;
}

.lv-tab-content.active {
  display: block;
  animation: lvSlideUp 0.35s ease-out forwards;
}

.lv-tab-content h3 {
  color: #8A1C29;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  margin-top: 0;
  margin-bottom: 25px;
  line-height: 1.3;
}

.lv-tab-content h4 {
  color: #1A1A1A;
  font-size: 22px;
  font-weight: 700;
  margin-top: 30px;
  margin-bottom: 12px;
}

.lv-tab-content p,
.lv-tab-content li {
  font-size: 18px;
  margin-bottom: 14px;
}

.lv-list,
.lv-numbered-list {
  list-style: none;
  padding-left: 0;
  margin: 20px 0;
}

.lv-list li,
.lv-numbered-list li {
  margin-bottom: 10px;
}

/* Animated CTA Button */
.lv-btn-wrapper {
  margin: 20px 0 25px 0;
}

.lv-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #8A1C29 0%, #B82E3D 100%);
  border-radius: 50px;
  text-decoration: none !important;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(138, 28, 41, 0.25);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.lv-cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.35),
      transparent);
  transition: 0.6s;
}

.lv-cta-btn:hover::before {
  left: 100%;
}

.lv-cta-btn:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 30px rgba(138, 28, 41, 0.4);
  background: linear-gradient(135deg, #9C2030 0%, #C93343 100%);
}

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

.lv-arrow {
  width: 22px;
  height: 22px;
  transition: transform 0.3s ease;
}

.lv-cta-btn:hover .lv-arrow {
  transform: translateX(6px);
}

@keyframes lvSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 600px) {
  .lv-tabs-header {
    flex-direction: column;
    border-radius: 20px;
  }

  .lv-glider {
    display: none;
  }

  .lv-tab-btn.active {
    background: linear-gradient(135deg, #8A1C29 0%, #A62B38 100%) !important;
  }

  .lv-cta-btn {
    width: 100%;
    justify-content: center;
  }

  .lv-switcher-wrapper {
    padding: 10px !important;
  }
}

@media screen and (max-width: 900px) and (min-width: 600px) {
  .lv-switcher-wrapper {
    padding: 20px !important;
  }
}

/* Mobile Animation Override (< 600px) */
@media (max-width: 600px) {
  .lv-tabs-header {
    flex-direction: column;
    gap: 8px;
    border-radius: 24px;
    padding: 8px;
  }

  /* Keep the glider active and animate both height and vertical translation */
  .lv-glider {
    display: block !important;
    left: 8px;
    top: 8px;
    width: calc(100% - 16px) !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
      height 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
  }

  /* Clear static background color so the glider handles the visual fill */
  .lv-tab-btn.active {
    background: transparent !important;
  }

  .lv-tab-btn {
    width: 100%;
    text-align: center;
  }
}

.icons-on-the-side {
  position: relative;
  height: 0px;
  pointer-events: none;
  user-select: none;
}

.e1 {
  width: 900px;
  right: 0%;
  bottom: 0%;
  margin-bottom: 300px;
  position: absolute;
  pointer-events: none;
  user-select: none;
}

@media (max-width:1000px) {
  .e1 {
    display: none !important;
  }
}

.e2 {
  width: 500px;
  left: 0%;
  bottom: 0%;
  margin-bottom: -100px;
  position: absolute;
  pointer-events: none;
  user-select: none;
}

@media (max-width:1500px) {
  .e2 {
    display: none !important;
  }
}

.e3 {
  width: 1000px;
  left: 0%;
  bottom: 0%;
  margin-bottom: -100px;
  position: absolute;
  pointer-events: none;
  user-select: none;
}

@media (max-width:1270px) {
  .e3 {
    display: none !important;
  }
}

.e4 {
  width: 1000px;
  right: 0%;
  bottom: 0%;
  margin-bottom: 00px;
  position: absolute;
  pointer-events: none;
  user-select: none;
}

@media (max-width:1170px) {
  .e4 {
    display: none !important;
  }
}

.e5 {
  width: 600px;
  right: 0%;
  bottom: 0%;
  margin-bottom: 300px;
  position: absolute;
  pointer-events: none;
  user-select: none;
}

@media (max-width:1110px) {
  .e5 {
    display: none !important;
  }
}

.e6 {
  min-width: 1800px;
  max-width: 1800px;
  left: 0%;
  right: 0%;
  bottom: 0%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: -2300px;
  position: absolute;
  pointer-events: none;
  user-select: none;
}

@media (max-width:1600px) {
  .e6 {
    display: none !important;
  }
}


.e8 {
  width: 900px;
  right: 0%;
  bottom: 0%;
  margin-bottom: 900px;
  position: absolute;
  pointer-events: none;
  user-select: none;
}

@media (max-width:1100px) {
  .e8 {
    display: none !important;
  }
}

.e7 {
  width: 1600px;
  left: 0%;
  bottom: 0%;
  margin-bottom: 600px;
  position: absolute;
  pointer-events: none;
  user-select: none;
}

@media (max-width:1460px) {
  .e7 {
    display: none !important;
  }
}

@media (max-width:800px) {
  .banner-3rd-f-g-a {
    display: none;
  }

  .banner-3rd-f-g-b {
    display: block;
  }
}

@media (max-width:415px) {
  .bl-415-px {
    display: block;
  }

  .ab-415-px {
    display: none;
  }
}

@media (min-width:800px) {
  .banner-3rd-f-g-a {
    display: block;

  }

  .banner-3rd-f-g-b {
    display: none;
  }
}

.pop-up-logo {
  transition:
    transform 0.35s cubic-bezier(.22, 1, .36, 1);
}

.pop-up-logo:hover {
  transform: translateY(-4px) scale(1.04);
}

.pop-up-tel-classroom img {
  transition:
    transform 0.35s cubic-bezier(.22, 1, .36, 1);
}

.pop-up-tel-classroom a {
  color: rgb(78, 145, 9) !important;
}

.pop-up-tel-classroom a:hover {
  color: #000000 !important;
  text-decoration: none !important;
}

.pop-up-tel-classroom:hover img {
  transform: scale(1.10);
}

.pop-up-tel-lingvista img {
  transition:
    transform 0.35s cubic-bezier(.22, 1, .36, 1);
}

.pop-up-tel-lingvista:hover img {
  transform: scale(1.10);
}

.pop-up-tel-lingvista a:hover {
  color: #000000 !important;
  text-decoration: none !important;
}

/* ========================================================= */
/* 5-7 клас */
/* ========================================================= */


.elementary-student-1 {
  height: 700px;
  left: -2%;
  top: 10%;
  animation-duration: 10s;
  animation-delay: -2s;
  margin-top: -40px;
}

.elementary-e13 {
  position: absolute;
  height: 700px;
  right: 0%;
  bottom: 0%;
  margin-bottom: -200px;
  z-index: 0;
}

.elementary-e14 {
  position: absolute;
  height: 700px;
  left: 0%;
  bottom: 0%;
  margin-bottom: 230px;
  z-index: 0;
}

@media screen and (max-width:850px) {

  .elementary-e14,
  .elementary-e13 {
    display: none;
  }
}

.elementary-e15 {
  position: absolute;
  height: 300px;
  right: 0%;
  bottom: 0%;
  margin-bottom: 0px;
}

.elementary-e16 {
  position: absolute;
  height: 300px;
  left: 0%;
  bottom: 0%;
  margin-bottom: 0px;
  z-index: 0;
}

@media screen and (max-width:1120px) {

  .elementary-e15,
  .elementary-e16 {
    display: none;
  }
}

.elementary-e6 {
  position: absolute;
  height: 700px;
  right: 0%;
  bottom: 0%;
  margin-bottom: 250px;
}

.elementary-e5 {
  position: absolute;
  height: 700px;
  left: 0%;
  bottom: 0%;
  margin-bottom: 50px;
  z-index: 0;
}

.opened-book-5-7 {
  height: 100px;
  right: 10%;
  bottom: 0%;
  margin-bottom: 50px;
  z-index: 20;
  animation-duration: 10s;
  animation-delay: 0s;
}

@media screen and (min-width:1720px) {
  .elementary-e2 {
    height: 150px;
    left: 10%;
    bottom: 0%;
    margin-bottom: -300px;
    animation-duration: 10s;
    animation-delay: -3s;
    z-index: 1000;
  }
}

@media screen and (max-width:1720px) and (min-width:1340px) {
  .elementary-e2 {
    height: 150px;
    left: 0%;
    bottom: 0%;
    margin-bottom: -300px;
    animation-duration: 10s;
    animation-delay: -3s;
    z-index: 1000;
  }
}

.elem-h-s-e8 {
  position: absolute;
  height: 900px;
  left: 0%;
  bottom: 0%;
  margin-bottom: -680px;
  z-index: 1;
}

@media screen and (max-width:1450px) {
  .elem-h-s-e8 {
    display: none;
  }
}

.elem-h-s-e6 {
  position: absolute;
  height: 900px;
  left: 0%;
  bottom: 0%;
  margin-bottom: -580px;
  z-index: 1;
}

@media screen and (max-width:1260px) {
  .elem-h-s-e6 {
    display: none;
  }
}

.elem-h-s-e7 {
  position: absolute;
  height: 900px;
  right: 0%;
  bottom: 0%;
  margin-bottom: -680px;
  z-index: 1;
}

@media screen and (max-width:1460px) {
  .elem-h-s-e7 {
    display: none;
  }
}

.elem-h-s-e5 {
  position: absolute;
  height: 700px;
  right: 0%;
  bottom: 0%;
  margin-bottom: -380px;
  z-index: 1;
}

@media screen and (max-width:1270px) {
  .elem-h-s-e5 {
    display: none;
  }
}

.elem-h-s-e4 {
  position: absolute;
  height: 700px;
  right: 0%;
  bottom: 0%;
  margin-bottom: -250px;
  z-index: 20;
}

.elem-h-s-e3 {
  position: absolute;
  height: 700px;
  left: 0%;
  bottom: 0%;
  margin-bottom: -650px;
  z-index: 1;
}

@media screen and (max-width:1000px) {

  .elem-h-s-e3,
  .elem-h-s-e4 {
    display: none;
  }
}

.elem-h-s-e2 {
  position: absolute;
  height: 700px;
  right: 0%;
  bottom: 0%;
  margin-bottom: -650px;
  z-index: 20;
}

@media screen and (max-width:1400px) {
  .elem-h-s-e2 {
    display: none;
  }
}

.elem-h-s-e1 {
  position: absolute;
  height: 700px;
  right: 0%;
  bottom: 0%;
  margin-bottom: -250px;
}

@media screen and (max-width:860px) {
  .elem-h-s-e1 {
    display: none;
  }
}


.elementary-e1 {
  position: absolute;
  height: 700px;
  right: 0%;
  bottom: 0%;
  margin-bottom: -150px;
}

@media (max-width:1250px) {
  .elementary-e1 {
    display: none;
  }
}

@media (max-width:1200px) {

  .elementary-e5,
  .opened-book-5-7 {
    display: none;
  }
}

@media (max-width:1150px) {
  .elementary-e6 {
    display: none;
  }
}


.promo-lingvista-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 50px;
  max-width: 1120px;
  /* Increased container width */
  margin: 0 auto;
  color: #000;
  line-height: 1.5;
  box-sizing: border-box;
}

/* Left Side: Jar & Text */
.promo-left-jar {
  position: relative;
  flex: 0 0 40%;
  max-width: 400px;
  /* Increased jar size */
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.promo-jar-img {
  width: auto;
  max-height: 650px;
  min-width: 340px;
  height: auto;
  display: block;
}

.promo-jar-img-p {
  width: auto;
  max-height: 600px;
  min-width: 340px;
  height: auto;
  display: block;
}

.promo-jar-text {
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 85%;
}

.promo-jar-text p {
  margin: 15px 0;
  font-size: 20px;
  /* Switched to px for forced larger size */
  line-height: 1.3;
  color: #000;
}

.promo-highlight {
  color: #f09a1a;
  font-weight: bold;
}

.promo-highlight-p {
  color: #7d77d7;
  font-weight: bold;
}

.promo-highlight.large {
  font-size: 26px;
  /* Larger highlight text */
}

.promo-highlight-p.large {
  font-size: 26px;
  /* Larger highlight text */
}

/* Right Side: Bonus List */
.promo-right-text {
  flex: 1;
}

.promo-title {
  font-size: 24px;
  /* Larger title */
  margin-bottom: 25px;
  color: #000;
}

.promo-list {
  list-style-type: none;
  padding: 0 !important;
  margin: 0;
}

.promo-list li {
  margin-bottom: 25px !important;
  font-size: 20px;
  /* Larger list text */
  line-height: 1.4;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .promo-lingvista-container {
    flex-direction: column;
    gap: 30px;
    padding: 15px;
  }

  .promo-left-jar {
    width: 100%;
    max-width: 320px;
  }

  .promo-jar-text p {
    font-size: 18px;
  }

  .promo-highlight.large {
    font-size: 22px;
  }

  .promo-title {
    text-align: center;
    font-size: 22px;
  }

  .promo-list li {
    font-size: 18px;
  }
}


.features-container-1120 {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* This centers the shorter image vertically against the taller text box */
  max-width: 1120px;
  margin: 60px auto;
  position: relative;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Left Side: Image */
.features-image-col {
  flex: 0 0 42%;
  /* Slightly narrower to give the text box more room */
  z-index: 1;
}

.features-image-col img {
  width: 100%;
  height: auto;
  max-height: 600px;
  /* Constrains image height so the text box appears bigger/taller */
  object-fit: cover;
  display: block;
  border-radius: 4px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* Right Side: Text Card */
.features-text-col {
  flex: 0 0 61%;
  margin-left: -3%;
  /* Creates the horizontal overlap effect on desktop */
  z-index: 2;
  background-color: #fcf4e8;
  padding: 60px 50px;
  /* Increased padding to make the box significantly taller and larger */
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
}

.feature-item {
  margin-bottom: 25px;
}

.feature-item:last-child {
  margin-bottom: 0;
}

.feature-title {
  color: #ea940b;
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 5px 0;
}

.feature-text {
  font-size: 18px;
  line-height: 1.5;
  color: #222;
  margin: 0;
}

/* Mobile Responsiveness */
@media (max-width: 850px) {
  .features-container-1120 {
    flex-direction: column;
    margin: 30px auto;
    padding: 15px;
  }

  .features-image-col {
    flex: 0 0 100%;
    width: 100%;
  }

  .features-image-col img {
    width: 100%;
    height: 700px;
    /* Fixed height to cut roughly 1/3 of the vertical image on phones */
    object-fit: cover;
    object-position: 50% 60%;
    /* Keeps the focus on the teacher's face */
  }

  .features-text-col {
    flex: 0 0 100%;
    width: 100%;
    margin-left: 0;
    margin-top: -50px;
    /* Creates a vertical overlap over the cropped image */
    padding: 40px 25px;
  }

  .feature-title {
    font-size: 20px;
  }

  .feature-text {
    font-size: 18px;
  }
}

.child-dev-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: 1120px;
  margin: 60px auto;
  font-family: Arial, Helvetica, sans-serif;
  gap: 50px;
  padding: 0 20px;
  box-sizing: border-box;
}

.child-dev-text-col {
  flex: 1;
}

.child-dev-heading {
  font-size: 38px;
  font-weight: bold;
  color: #111;
  margin: 0 0 25px 0;
  line-height: 1.2;
}

.child-dev-paragraph {
  font-size: 20px;
  line-height: 1.5;
  color: #222;
  margin: 0 0 25px 0;
}

.child-dev-list {
  list-style: none;
  padding: 0 !important;
  margin: 0 0 25px 0;
}

.child-dev-list li {
  font-size: 20px;
  font-weight: bold;
  color: #e59a37;
  margin-bottom: 20px;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
}

/* New Custom Tick Image Styling */
.child-dev-tick {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-right: 12px;
  margin-top: 2px;
}

.child-dev-image-col {
  flex: 0 0 42%;
}

.child-dev-image-col img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

@media (max-width: 850px) {
  .child-dev-container {
    flex-direction: column;
    gap: 30px;
    margin: 30px auto;
    padding: 15px;
  }

  .child-dev-text-col,
  .child-dev-image-col {
    flex: 0 0 100%;
    width: 100%;
  }

  .child-dev-heading {
    font-size: 30px;
    margin-bottom: 20px;
  }

  .child-dev-paragraph {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .child-dev-list li {
    font-size: 18px;
    margin-bottom: 15px;
  }
}




/* Isolated animation styles - will not touch global body/headings */
.ts-wrapper {
  display: inline-block;
  vertical-align: top;
}

.ts-text {
  display: inline-block;
  font-size: 50px;
  font-weight: 700;
  /* Gradient text clipping */
  background: linear-gradient(90deg, #ff6b6b 0%, #8c1c2d 50%, #ff6b6b 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Switch animation */
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  transform: translateY(0);
}

/* Hidden state for transition swap */
.ts-text.ts-hidden {
  opacity: 0;
  transform: translateY(-12px);
}


.rb-badge-link {
  outline: none !important;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  margin-top: 20px;
  height: 140px;
  text-decoration: none;
  cursor: pointer;
}

.rb-badge-svg {
  width: 100%;
  height: 100%;
  animation: rb-spin 26s linear infinite;
}

.rb-badge-text {
  fill: #8c1c2d;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  /* Increased letter spacing to close the gap completely */
  letter-spacing: 2.3px;
  text-transform: uppercase;
}

.rb-center-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8c1c2d;
  transition: transform 0.3s ease;
}

.rb-badge-link:hover .rb-center-icon {
  transform: translate(-50%, -40%);
}

@keyframes rb-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}



@media screen and (min-width: 2130px) {
  .txt-h1-m-page {
    font-size: 60px !important;
  }

  .ts-text {
    font-size: 55px !important;
  }
}

@media screen and (max-width: 2130px) and (min-width: 1865px) {
  .txt-h1-m-page {
    font-size: 50px !important;
  }

  #post-199>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-with-buttons.gb-slate-section-hero-buttons.header-main.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.gb-has-custom-background-color.gb-has-custom-text-color.gb-columns-center.alignfull.optml-bg-lazyloaded.aos-init.aos-animate {
    padding-top: 8em !important;
  }

  .ts-text {
    font-size: 40px !important;
  }
}

@media screen and (max-width: 1865px) and (min-width: 1400px) {
  .txt-h1-m-page {
    font-size: 60px !important;
  }

  #post-199>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-with-buttons.gb-slate-section-hero-buttons.header-main.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.gb-has-custom-background-color.gb-has-custom-text-color.gb-columns-center.alignfull.optml-bg-lazyloaded.aos-init.aos-animate {
    padding-top: 12em !important;
  }

  .ts-text {
    font-size: 50px !important;
    max-width: 590px !important;
  }

  .main-header-cont {
    max-width: 680px !important;
  }
}

@media screen and (max-width: 1400px) and (min-width: 1280px) {
  .main-header-cont>div.gb-block-layout-column-inner {
    max-width: 600px !important;
  }

  #post-199>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-with-buttons.gb-slate-section-hero-buttons.header-main.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.gb-has-custom-background-color.gb-has-custom-text-color.gb-columns-center.alignfull.optml-bg-lazyloaded.aos-init.aos-animate {
    padding-top: 7em !important;
  }
}

@media screen and (max-width: 1280px) and (min-width: 1100px) {
  .main-header-cont>div.gb-block-layout-column-inner {
    max-width: 580px !important;
  }

  #post-199>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-with-buttons.gb-slate-section-hero-buttons.header-main.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.gb-has-custom-background-color.gb-has-custom-text-color.gb-columns-center.alignfull.optml-bg-lazyloaded.aos-init.aos-animate {
    padding-top: 10em !important;
  }

  .txt-h1-m-page {
    font-size: 50px !important;
  }

  .ts-text {
    max-width: 450px !important;
    font-size: 50px !important;
  }
}

@media screen and (max-width: 1100px) and (min-width: 880px) {
  .main-header-cont {
    max-width: 400px !important;
  }

  #post-199>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-with-buttons.gb-slate-section-hero-buttons.header-main.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.gb-has-custom-background-color.gb-has-custom-text-color.gb-columns-center.alignfull.optml-bg-lazyloaded.aos-init.aos-animate {
    padding-top: 10em !important;
  }

  .txt-h1-m-page {
    font-size: 40px !important;
  }

  .ts-text {
    max-width: 350px !important;
    font-size: 40px !important;
  }
}

@media screen and (max-width: 880px) and (min-width: 0px) {
  #post-199>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-with-buttons.gb-slate-section-hero-buttons.header-main.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.gb-has-custom-background-color.gb-has-custom-text-color.gb-columns-center.alignfull.optml-bg-lazyloaded.aos-init.aos-animate {
    background-image: url(https://new.lingvistabg.com/wp-content/uploads/2026/09/header-main-page.png) !important;
    background-position: 80% 40% !important;
    padding: 0px !important;
  }

  .main-header-cont {
    bottom: 0% !important;
  }



  .rb-badge-link {
    display: none !important;
  }
}

@media screen and (max-height:850px) {
  .rb-badge-link {
    display: none !important;
  }
}

@media screen and (max-width: 880px) and (min-width: 607px) {
  #post-199>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-with-buttons.gb-slate-section-hero-buttons.header-main.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.gb-has-custom-background-color.gb-has-custom-text-color.gb-columns-center.alignfull.optml-bg-lazyloaded.aos-init.aos-animate>div {
    position: absolute !important;
    padding: 0 20px 0 20px !important;
    bottom: 0% !important;
    margin: 0 auto !important;
    left: 0 !important;
    right: 0 !important;
    width: fit-content !important;
  }
}

@media screen and (max-width: 607px) and (min-width: 0px) {
  #post-199>div.wp-block-genesis-blocks-gb-columns.gb-slate-section-hero-with-buttons.gb-slate-section-hero-buttons.header-main.gb-layout-columns-1.one-column.gb-background-cover.gb-background-no-repeat.gb-has-custom-background-color.gb-has-custom-text-color.gb-columns-center.alignfull.optml-bg-lazyloaded.aos-init.aos-animate>div {
    position: absolute !important;
    padding: 40px 20px 0 20px !important;
    bottom: 0% !important;
    margin: 0 auto !important;
    left: 0 !important;
    right: 0 !important;
    width: fit-content !important;
  }
}

@media screen and (max-width: 880px) and (min-width: 750px) {
  .txt-h1-m-page {
    text-align: center !important;
    font-size: 50px !important;
  }

  .ts-wrapper {
    margin: 0 auto !important;
    display: block !important;
  }

  .ts-text {
    font-size: 40px !important;
    text-align: center !important;
    display: block !important;
  }
}

@media screen and (max-width: 750px) and (min-width: 600px) {
  .txt-h1-m-page {
    text-align: center !important;
    font-size: 40px !important;
  }

  .ts-wrapper {
    margin: 0 auto !important;
    display: block !important;
  }

  .ts-text {
    font-size: 25px !important;
    text-align: center !important;
    display: block !important;
  }
}

@media screen and (max-width: 600px) and (min-width: 450px) {
  .txt-h1-m-page {
    text-align: center !important;
    font-size: 40px !important;
  }

  .ts-wrapper {
    margin: 0 auto !important;
    display: block !important;
  }

  .ts-text {
    font-size: 20px !important;
    text-align: center !important;
    display: block !important;
  }
}

@media screen and (max-width: 450px) and (min-width: 0px) {
  .txt-h1-m-page {
    text-align: center !important;
    font-size: 30px !important;
  }

  .ts-wrapper {
    margin: 0 auto !important;
    display: block !important;
  }

  .ts-text {
    font-size: 20px !important;
    text-align: center !important;
    display: block !important;
  }
}


















@property --a {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@media screen and (max-width: 900px) {
  .premium-btn {
    max-width: 210px !important;
    padding: 10px 15px !important;
    font-size: 16px !important;
  }
}

.premium-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 36px;

  /* Pure brilliant white background & sharp black text */
  background-color: #ffffff !important;
  color: #000000 !important;

  font-family: system-ui, -apple-system, sans-serif;
  font-size: 18px !important;
  font-weight: 700;
  letter-spacing: 0.5px;

  border: none;
  border-radius: 100px;
  cursor: pointer;
  isolation: isolate;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Rotating dark red gradient border */
.premium-btn::before {
  content: "";
  position: absolute;
  inset: -2px;
  /* Border thickness */
  border-radius: inherit;
  padding: 2px;

  /* Rich deep dark red gradient with bright crimson highlights */
  background: conic-gradient(from var(--a),
      #8b0000,
      #ff1a1a,
      #3b0000,
      #dc143c,
      #5c0000,
      #8b0000);

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  animation: rotate-border 3.5s linear infinite;
  z-index: -1;
}

/* Ambient dark red glow */
.premium-btn::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from var(--a),
      #8b0000,
      #ff1a1a,
      #3b0000,
      #dc143c,
      #5c0000,
      #8b0000);
  filter: blur(8px);
  opacity: 0.4;
  z-index: -2;
  animation: rotate-border 3.5s linear infinite;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

@keyframes rotate-border {
  0% {
    --a: 0deg;
  }

  100% {
    --a: 360deg;
  }
}

/* Hover state: Bright pure white glow effect */
.premium-btn:hover {
  background-color: #ffffff !important;
  transform: translateY(-2px) !important;
  /* Intense white inner-glow combined with soft red outer shadow */
  box-shadow:
    0 0 20px rgba(255, 255, 255, 1),
    0 0 35px rgba(255, 255, 255, 0.8),
    0 12px 30px rgba(139, 0, 0, 0.4) !important;
}

.premium-btn:hover::after {
  opacity: 0.75;
  filter: blur(12px);
}


#individual {
  scroll-margin-top: 400px;
}

#group {
  scroll-margin-top: 400px;
}


.skills-box {
  /* 1. The Gradient Background 
     Transitions from a soft, pale lilac/pink on the left to white on the right */
  background: linear-gradient(to right, #f2e5ec 0%, #ffffff 85%);

  /* 2. The Box Padding 
     Gives it breathing room. Roughly 24px top/bottom and 32px left/right 
     based on the image proportions. */
  padding: 24px 32px 24px 10px;

  /* 3. The Border Radius 
     A gentle curve for the corners */
  border-radius: 12px;
  margin-bottom: 20px;

  /* Optional: Basic text setup to match the image */
  color: #111111;
  max-width: 600px;
  /* Adjust based on your layout needs */
}

.left-pink-section {
  background: linear-gradient(to right, #fdf4fa 0%, #d9c1f4 100%);
  color: #1a1a1a;
  padding: 22px 24px;
  border-radius: 4px;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
}

.right-purple-section {
  background: linear-gradient(to right, #8754b2 0%, #7a489d 100%);
  color: #ffffff;
  padding: 22px 24px;
  border-radius: 4px;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
}



.left-yellow-gradient-section {
  background: linear-gradient(to right, #ffebd0 0%, #f7be62 100%);
  color: #1a1a1a;
  padding: 22px 24px;
  border-radius: 4px;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
}

.right-orange-red-gradient-section {
  background: linear-gradient(to right, #ffa052 0%, #e04e35 100%);
  color: #ffffff;
  padding: 22px 24px;
  border-radius: 4px;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
}


.custom-arrow-list {
  list-style: none;
  padding: 0;
  /* Centers the list block horizontally on the page */
  margin: 0 auto 15px auto;
  width: fit-content;

  display: flex;
  flex-direction: column;
  gap: 6px;
}

.custom-arrow-list li {
  display: flex;
  align-items: center;
  gap: 12px;

  font-size: 18px;
  /* Larger font to match original image */
  line-height: 1.4;
}

.custom-arrow-list .arrow-icon {
  width: 45px;
  /* Increased from 24px for a much clearer arrow */
  height: auto;
  flex-shrink: 0;
}

.bigger-gap-buttons {
  gap: 1.5em !important;
}


/* ========================================================================== */
/* Cookies consent banner */
/* ========================================================================== */

/* 1. Main Banner Container */
#termsfeed-com---nb {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  background: linear-gradient(180deg, #fffdf2 0%, #f7f1d5 100%) !important;
  border-top: 2px solid #ebdca8 !important;
  box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.15) !important;
  padding: 15px 20px 15px 20px !important;
  box-sizing: border-box !important;
  z-index: 9999999 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* 2. Container & Text Alignment */
#termsfeed-com---nb .cc-nb-main-container {
  position: relative !important;
  max-width: 950px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Floating Cookie Image - Overlapping Banner Top Edge */
#termsfeed-com---nb .cc-nb-main-container::before {
  content: "" !important;
  display: block !important;
  width: 240px !important;
  height: 160px !important;
  margin: -45px auto 5px auto !important;
  /* Pulls the top of the cookies above the border */
  position: relative !important;
  z-index: 10 !important;
  /* Ensures cookies render above the border line */
  background-image: url('/wp-content/uploads/2026/09/cookies-scaled.webp') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  pointer-events: none !important;
  user-select: none !important;
  will-change: transform !important;
  animation: roam 8s ease-in-out infinite !important;
}

#termsfeed-com---nb::before {
  display: none !important;
}

#termsfeed-com---nb .cc-nb-title {
  color: #3b2005 !important;
  font-size: 21px !important;
  font-weight: bold !important;
  margin-bottom: 8px !important;
}

#termsfeed-com---nb .cc-nb-text {
  color: #222222 !important;
  font-size: 13.5px !important;
  line-height: 1.4 !important;
  margin-bottom: 16px !important;
}

/* 4. Buttons Container & Explicit Button Ordering */
#termsfeed-com---nb .cc-nb-buttons-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* Order 1 (Left): Change Preferences */
#termsfeed-com---nb .cc-nb-buttons-container .cc-nb-changep {
  order: 1 !important;
  background: linear-gradient(180deg, #aa6f37 0%, #6e4014 100%) !important;
  color: #ffffff !important;
  border: 1px solid #522f0c !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: bold !important;
  padding: 8px 20px !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.25) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* Order 2 (Middle): Reject */
#termsfeed-com---nb .cc-nb-buttons-container .cc-nb-reject {
  order: 2 !important;
  background: linear-gradient(180deg, #aa6f37 0%, #6e4014 100%) !important;
  color: #ffffff !important;
  border: 1px solid #522f0c !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: bold !important;
  padding: 8px 20px !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.25) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* Order 3 (Right): Agree */
#termsfeed-com---nb .cc-nb-buttons-container .cc-nb-okagree {
  order: 3 !important;
  background: linear-gradient(180deg, #f7cd73 0%, #e5a832 100%) !important;
  color: #2b1800 !important;
  border: 1px solid #c98e20 !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: bold !important;
  padding: 8px 20px !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.25) !important;
  text-shadow: none !important;
}

/* 5. Desktop Button Gap (Large Separation) */
@media screen and (min-width: 768px) {
  #termsfeed-com---nb .cc-nb-buttons-container .cc-nb-changep {
    margin-right: 120px !important;
    /* Creates distinct space on desktop */
  }
}

/* Modal Overlay Background */
.termsfeed-com---pc-dialog,
div[class*="pc-dialog"] {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Modal Main Container */
.cc-cp-container,
div[class*="cc-cp-container"] {
  background: linear-gradient(180deg, #fffdf2 0%, #f7f1d5 100%) !important;
  border: 2px solid #ebdca8 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  color: #222222 !important;
}

/* Modal Header */
.cc-cp-head {
  border-bottom: 1px solid #ebdca8 !important;
  background: transparent !important;
}

.cc-cp-head-title,
.cc-cp-head * {
  color: #3b2005 !important;
  font-weight: bold !important;
}

.cc-cp-head-close {
  color: #3b2005 !important;
}

/* Left Sidebar & Navigation Menu */
.cc-cp-body {
  background: transparent !important;
}

.cc-cp-node,
[class*="cc-cp-node"],
.cc-cp-body button,
.cc-cp-body a {
  color: #3b2005 !important;
}

.cc-cp-node.cc-cp-active,
.cc-cp-node:hover,
[class*="cc-cp-node"]:hover {
  background-color: #ebdca8 !important;
  color: #2b1800 !important;
  border-radius: 6px !important;
}

/* Body Content Text */
.cc-cp-body-content,
.cc-cp-body-content * {
  color: #222222 !important;
}

/* Modal Footer */
.cc-cp-foot {
  border-top: 1px solid #ebdca8 !important;
  background: transparent !important;
}

/* Modal Save Button */
.cc-cp-foot-save,
button.cc-cp-foot-save {
  background: linear-gradient(180deg, #f7cd73 0%, #e5a832 100%) !important;
  color: #2b1800 !important;
  border: 1px solid #c98e20 !important;
  border-radius: 6px !important;
  font-weight: bold !important;
  padding: 8px 20px !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  text-shadow: none !important;
}

.cc-cp-foot-save:hover {
  filter: brightness(1.05) !important;
}

/* Replace "Аз отказвам" with "Отказвам" */
#termsfeed-com---nb .cc-nb-buttons-container .cc-nb-reject {
  font-size: 0 !important;
  /* Hides original text "Аз отказвам" */
}

#termsfeed-com---nb .cc-nb-buttons-container .cc-nb-reject::after {
  content: "Отказвам" !important;
  /* Inserts new text */
  font-size: 14px !important;
  /* Restores button text size */
  display: inline-block !important;
}


/* Safely hide the raw TermsFeed text link */
a#open_preferences_center {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}