/*
 Theme Name:   Alpha Web Woodmart
 Template:     woodmart
*/


/* Theme customization starts here
-------------------------------------------------------------- */

/* ====================================================== General ======================================================*/
/* These variables are used throughout the child theme so colors can be changed globally from one location. */
   

:root {

    /* Main dark navy used for headings, navigation,
       dark sections and strong text */
    --aw-navy: #0B1830;

    /* Main Cedan yellow used for buttons,
       highlights and primary accents */
    --aw-yellow: #FFC914;

    /* Softer blue-grey used mainly for body copy
       and secondary text */
    --aw-text: #667085;

    /* Main warm off-white page background */
    --aw-bg: #FDFCF8;

    /* Light blue-grey background used for
       alternate sections and subtle panels */
    --aw-bg-soft: #F3F7FA;

    /* Pure white used for cards and light surfaces */
    --aw-white: #FFFFFF;

    /* Light border color used around cards,
       inputs and subtle separators */
    --aw-border: #DDE4EA;	
	
}


h1 {
    font-size: 54px;
	font-weight: 800;
	letter-spacing: -1.3px;
}

h2 {
    font-size: 40px;
	font-weight: 800;
	letter-spacing: -1.3px;
}

h3 {
    font-size: 21px;
}

h4 {
    font-size: 18px;
}


.btn {
	text-transform: none;
}	



.aw-yellow-button .btn {
	background-color: #f7d904;
	font-size: 14px;
}

.aw-yellow-button .btn:hover {
	background-color: #E0C70B;
}


.aw-border-button .btn {
	border: 1px solid #bfbfbf;
}

.btn-style-link  {
	font-size: 16px;
	border-width: 0;
}

.btn-style-link .wd-btn-text {
	border-bottom: 1px solid #9c9c9c;
}

.btn-style-link .wd-btn-text:hover {
	background-color: #f5f5f5;
	border-bottom: none;
}


.aw-arrow-button .wd-btn-icon svg {
    width: 14px;
    height: 14px;
}

.aw-arrow-button .btn {
    gap: 10px;
}

/* For parent container with [X Temos] layout set to "Stretch Container" */	
/* Advsie to set all outer container (grid or flexbox) to "Stretch Container" for design consistency */
/* There are actually theme/elementor default values for these, but once I make changes to padding in elementor (even not changing padding-left or right), all 4 padding values will be taken from custom elementor values) */
.e-con.e-parent.wd-section-stretch {
	padding-left: 20px;
	padding-right: 20px;
		
}

.aw-svg-no-fill svg {
	fill: none !important;
}

.elementor-widget-icon {
	line-height: 0;
}

.wd-btn-icon {
	line-height: 0;
}


/* ==================================================== END General ====================================================*/



/* ================================================== Header & Menu ====================================================*/

/*** @@@@@ XXX Temp text header design. this is for page /home-4/ ***/ 
.page-id-2763 .site-logo img {
	border-radius: 11px;
}


.aw-centre-name > div {
  display: block;
  white-space: normal;       /* allow wrapping */
  overflow-wrap: normal;     /* don't break words arbitrarily */
  word-break: normal;        /* keep words intact */
}


/* The English word "Cedan Kindergarten & Child Development Centre" on the header */
.aw-centre-name-en {
	XXXmargin-top: 7px;
	font-size: 14px;
	line-height: 1.2;
    font-weight: 600;
	XXXcolor: #373333;
	XXXcolor:#0E0EFE;
	color: #0e0ee9;
    font-family:		
        "Plus Jakarta Sans",
        "Avenir Next",
  	    Avenir,
        "Segoe UI",
        Helvetica,
        Arial,
       system-ui,
       sans-serif;
}


/* The Chinese word "诗唐幼儿园与培训中心" on the header */
.aw-centre-name-ch {
	margin-bottom: 5px;
    font-size: 14px;
    line-height: 1.2;
	font-weight: 600;
	letter-spacing: 1px;
	color: #ff2828;
    font-family: 
		"PingFang SC", 
		"Microsoft YaHei", 
		"Noto Sans SC", 
		system-ui,  
		sans-serif;
}

/* Mobile menu background color */
.mobile-nav.wd-side-hidden {
    background-color: #FDFCF8 !important;
}

.wd-nav-mobile > li > a {
	text-transform: none;
	font-size: 17px;
}

.wd-nav-mobile > li.current-menu-item,
.wd-nav-mobile > li:hover {
	background-color: #f4fafc;
}

/* ================================================ END Header & Menu ==================================================*/


/* ================================================== Hero sections ====================================================*/
/* Hero section for all pages - use same BG color and add subtle dotted background */
.aw-hero-section {
    background-color: var(--aw-bg);

    background-image:
        radial-gradient(
            circle,
            rgba(11, 24, 48, 0.10) 1px,
            transparent 1px
        );
   
	/* each transpafrent tile with a dot */
    background-size: 20px 20px; 
	
	margin-top: -40px;
}


/* On most eyebrow heading on th esite */
.aw-eyebrow-heading {
	background-color: #d7eef6;
    padding: 10px 20px;
    border-radius: 30px;
	font-weight: 700;
    color: #1e3a5f !important;
}

/* For eyebrow that needs a white BG color, eg. "BEYOND ACADEMICS" on the home page */
.aw-eyebrow-heading.aw-white {
	background-color: white;
}

.aw-eyebrow-heading h4 {
	font-size: 12px !important;
}


/* Hero editorial words + yellow highlight */
.aw-heading-2-fonts {
    position: relative;
    /* display: inline-block; "original" */
	display: inline;
    /* white-space: nowrap; */

    font-family: "Fraunces", serif;
    font-style: italic !important;
    font-weight: 400;
    color: #1e3a5f;

    z-index: 1;
}

/* Sky blue color for hightlighted fonts, eg. Curriculum section on the Home page */
.aw-heading-2-fonts.aw-skyblue {
	color: #74D4FF;
}

/* Yellow brush/highlight behind Big Horizons */
.aw-heading-highlight::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: 0.08em;

    width: 100%;
    height: 0.22em;

    background: rgba(253, 224, 71, 0.8);
    border-radius: 1px;

    z-index: -1;
}


.aw-hero-paragraph {
	font-size: 18px;
}

/* buttton outer containers, make the 2 buttons on the Hero section equal width */
.equal-buttons {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: max-content;
}

.equal-buttons .btn {
  width: 100%;
}

.aw-home-curriculum-section p {
	color: #d8d8d8;
}

.aw-home-curriculum-list > .e-con {
	background-color: #1b1b35;
    border-radius: 20px;
    padding-left: 20px;
    padding-right: 30px;
}

.aw-home-curriculum-list .aw-home-curriculum-index p {
	color: #74D4FF;
}
.aw-home-curriculum-list .elementor-icon {
	color: #74D4FF !important;
}

/* ================================================= END Hero sections ==================================================*/


/* ====================================================== Home =========================================================*/
.aw-home-hero-phrase {
    display: inline !important;

    background-color: rgba(207, 235, 246, 0.55);
    padding: 0.06em 0.12em;
    border-radius: 3px;

    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;

   font-weight: 500;
}

.aw-cedan-initial {
    display: inline !important;
    color: #f4c400;
    font-size: 18px;
    font-weight: 700;
}

/* =========================================================
   Beyond Academics section - reusable value tags
   Used for small rounded labels such as:
   "Showing Kindness & Appreciation"
   ========================================================= */

.aw-beyond-academics-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;

    padding: 7px 12px;

    background-color: white;

    border: 1px solid var(--aw-border);
    border-radius: 999px;

}


.aw-beyond-academics-tag h4 {
	font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}


.aw-home-blurb-section > .e-con-inner > .e-con {
	background-color: white;
	border-radius: 20px;
	padding: 30px 30px;
	border: 1px solid #ebebeb;
}

.XXXaw-home-blurb-section .elementor-icon {
	padding: 7px;
    background-color: #dff0f6;
    border-radius: 10px;
}

.aw-home-blurb-section h3 {
	font-size: 16px;
	font-weight: 700;
}

.aw-home-blurb-section p {
	font-size: 14px;
}	
	

/* ===================================================== END Home ======================================================*/


/* ===================================================== About Us ======================================================*/
.aw-what-guide-us-inner-con > .e-con-inner > .e-child {
	background-color: white;
    padding: 40px 25px;
	border-radius: 20px;
    border: 1px #eeeeee solid;
}

.aw-what-guide-us-inner-con h3 {
	font-size: 18px;
}

.aw-teaching-approach-con  > .e-child {
	background-color: #F3F7FA;
    padding: 20px 30px;
    border-radius: 20px;
}

.XXXXXaw-teaching-approach-index P {
	color: #0084D1;
    font-weight: 800;
    font-size: 18px;
}

/* ================================================== END About Us ====================================================*/


/* =================================================== Curriculum =====================================================*/
.aw-curriculum-tabs .e-n-tabs-content img {
	border-radius: 20px;
}

.aw-curriculum-blurb-con > .e-child {
	background-color: white;
    border-radius: 20px;
    padding: 0 0 30px 0;
}

/* ================================================= END Curriculum ===================================================*/



/* ==================================================== Admissions =====================================================*/
.aw-admission-process-con > .e-child {
	background-color: #F9FAFC;
    border-radius: 20px;
    padding: 30px 25px;
    border: 1px solid var(--aw-border);
}

.aw-joining-step-no {
	color: #6f6f6f;
    font-weight: 800;
}

/* =========================================================
   ADMISSIONS PROCESS - Connector line between step cards

   Each admissions card has the class:
   aw-admission-step

   This creates a thin horizontal line extending from the
   right side of each card toward the next card.

   The last card does NOT get a connector line.
   ========================================================= */

/* Needed so the connector line can be positioned
   relative to each individual admissions card. */
.aw-admission-step {
    position: relative;
}

/* Draw the connector line after each card */
.aw-admission-step:not(:last-child)::after {
    content: "";

    /* Position the line near the top icon/number row */
    position: absolute;
    top: 70px;

    /* Start at the right edge of the current card */
    left: 100%;

    /* Extend across the gap toward the next card.
       We may fine-tune this value later. */
    width: 61px;

    /* Thickness of the connector line */
    height: 1px;

    /* Temporary neutral colour.
       We can match the mock-up exactly during styling. */
    background: var(--aw-border);
}


.XXXXXaw-admission-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 66px;
  left: calc(100% + 55px);
  width: 8px;
  height: 8px;
  background: var(--aw-border);
  border-radius: 50%;
  box-shadow: -57px 0 0 var(--aw-border);
}

.XXXXaw-admission-step:not(:last-child)::after,
.XXXXaw-admission-step:not(:last-child)::before {
  z-index: -1;
}


/* =========================================
   HORIZONTAL CONNECTOR LINE
   This creates the thin line between cards
   ========================================= */
.aw-admission-step:not(:last-child)::after {
  content: "";
  position: absolute;

  /* Vertical position of the line */
  top: 70px;

  /* Start the line at the right edge of the card */
  left: 100%;

  /* Length of the line between cards */
  width: 61px;

  /* Thickness of the line */
  height: 1px;

  /* Line colour */
  background: var(--aw-border);
}


/* =========================================
   CONNECTOR CIRCLES
   ::before creates the RIGHT circle
   box-shadow creates the LEFT circle
   ========================================= */
/* Connector circles */
.aw-admission-step:not(:last-child)::before {
  content: "";
  position: absolute;

  /* Re-center 6px circle vertically on the line */
  top: 67.5px;

  /* 61px gap - 6px circle = 55px */
  left: calc(100% + 55px);

  /* Circle size */
  width: 6px;
  height: 6px;

  background: var(--aw-border);
  border-radius: 50%;

  /* Duplicate circle back to the left edge */
  box-shadow: -55px 0 0 var(--aw-border);
}



/* ---------------- Class & Age Group table ---------------- */
.aw-age-group-con {
	border-radius: 20px;
	border: 1px solid lightgray;
	background-color: white;
	font-size: 15px; 
	font-weight: 500;
}

.aw-age-group-heading {
	background-color: #E8F5FA;
	border-radius: 20px 20px 0 0;
	font-size: 14px;
	font-weight: 700;
    
}

.aw-age-group-con  > .e-child {
	padding: 20px 30px;
}

.aw-age-group-con  > .e-child:not(:last-child) {
	border-bottom: 1px solid lightgray;
}


/* -------------- END Class & Age Group table -------------- */



/* ------------------ Session Time table ------------------- */
.aw-session-time-con {
	border-radius: 20px;
	border: 1px solid lightgray;
	background-color: white;
	font-size: 15px; 
	font-weight: 500;
}

.aw-session-time-heading {
	background-color: #E8F5FA;
	border-radius: 20px 20px 0 0;
	font-size: 14px;
	font-weight: 700;
    
}

.aw-session-time-con  > .e-child {
	padding: 20px 30px;
}

.aw-session-time-con  > .e-child:not(:last-child) {
	border-bottom: 1px solid lightgray;
}

/* ----------------- END Session Time table  --------------- */

/* ------------------ Fee Sstructure table ----------------- */


.aw-fee-structure-con {
	border-radius: 20px;
	border: 1px solid lightgray;
	background-color: white;
	font-size: 15px; 
	font-weight: 500;
}

.aw-fee-structure-heading {
	background-color: #E8F5FA;
	border-radius: 20px 20px 0 0;
	padding: 20px 30px;
	font-size: 14px;
	font-weight: 700;
	
}

/* Not sure why is there padding on certain cell, need to investigate, so I set top and bottom padding to 0 */
.aw-fee-structure-con  > .e-child:not(.aw-fee-structure-heading) {
	padding: 10px 30px;
}

.aw-fee-structure-con  > .e-child:not(:last-child) {
	border-bottom: 1px solid lightgray;
}

/* ---------------- END Fee Sstructure table --------------- */

/* ================================================== END Admissions ===================================================*/


/* ====================================================== Gallery ======================================================*/
.aw-gallery-portfolio-row {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 40px;
	padding-bottom: 60px;
}

.aw-gallery-portfolio-con > .e-con-inner .aw-gallery-portfolio-row:nth-child(odd) {
    background-color: #F5F8F9;
}

.aw-gallery-portfolio-con > .e-con-inner .aw-gallery-portfolio-row:nth-child(even) {
    background-color: #fff;
}

/* ==================================================== END Gallery ====================================================*/

/* ====================================================Testimonials ====================================================*/
.aw-testimonial-card {
	background-color: rgba(140, 205, 230, 0.2);
	border: 1px solid rgba(140, 205, 230, 0.3);
	padding: 30px 25px;
    border-radius: 20px;
	
}

.aw-testimonial-card .elementor-divider-separator {
	border-top-color: rgb(166 195 206) !important;
}

.aw-featured-testimonial {
	background-color: rgba(55, 170, 210, 0.2);
	border: 1px solid  rgba(55, 170, 210, 0.3);
}


.aw-testimonial-card .elementor-divider {
  padding: 0 !important;	
}


.aw-testomonial-author p  {
   font-size: 14px;	
   font-weight: 700; 
   color: #565555;	
}


/* =========================================================
   TESTIMONIAL - HIDE / SHOW FULL STORY

   The extra testimonial paragraphs are inside an Elementor
   container with this custom class:

   aw-testimonial-full-story

   Elementor containers normally have "display: flex" applied
   by Elementor itself, so we use !important here to make sure
   our hidden state actually overrides Elementor's container CSS.
   ========================================================= */


/* Hide the extra testimonial text when the page first loads */
.aw-testimonial-full-story {
    display: none !important;
	padding: 0;
}


/* When JavaScript adds the class "is-open",
   show the Elementor container again as a Flexbox */
.aw-testimonial-full-story.is-open {
    display: flex !important;
}

/* =========================================================
   TESTIMONIAL - ALIGN "READ FULL STORY" TO THE RIGHT

   The button widget has the class:
   aw-testimonial-readmore

   We make the button wrapper span the available width,
   then align the actual button/link to the right.
   ========================================================= */


.aw-testimonial-readmore .btn-style-link .wd-btn-text {
	border-bottom: none;
}

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


/* ====================================================== Contact =======================================================*/
/* Not sure why Contact form 7 created a lot of <br> tag on the frontend, so hide them here,
 * make sure no valid <br> is hiddden inadvertently */
.aw-form-field br,
.aw-form-row br {
	display: none;
}

.aw-contact-form label {
	font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
}

.aw-contact-form input,
.aw-contact-form textarea {
	background-color: #FCFDFE;
	border-radius: 20px;
}


/* =========================================================
   CONTACT FORM 7 - TWO-COLUMN FIELD LAYOUT
   Fields inside .aw-form-row will appear side-by-side
   ========================================================= */

.aw-contact-form .aw-form-row {
    display: flex;       /* Put child fields on the same row */
    gap: 24px;           /* Space between the two columns */
    width: 100%;         /* Make the row use the full available width */
}


/* =========================================================
   MAKE EACH FIELD TAKE UP HALF OF THE ROW
   ========================================================= */

.aw-contact-form .aw-form-row > .aw-form-field {
    flex: 1 1 0;         /* Make both fields share the row equally */
    width: auto;         /* Prevent existing width rules from interfering */
    max-width: none;     /* Remove any maximum width restrictions */
    min-width: 0;        /* Prevent Contact Form 7 inputs from overflowing */
}


/* =========================================================
   MAKE INPUTS AND TEXTAREA FILL THEIR COLUMN
   ========================================================= */

.aw-contact-form input[type="text"],
.aw-contact-form input[type="email"],
.aw-contact-form input[type="tel"],
.aw-contact-form textarea {
    width: 100%;         /* Fill the available field width */
    box-sizing: border-box;
}

/* The message "Have a question about our programm..." before contact channels */
.aw-contact-help-message {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}


.aw-contact-channels-con > .e-child:not(:last-child) {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* The contact info on the black container on the right, this is he wrapper for each contact channel */
.aw-contact-info-con .aw-contact-info-type {
	font-size: 14px;
	font-weight: 600;
	color: #f0f0f0;
}

.aw-contact-info-con .aw-contact-info-value a {
	font-size: 15px;
	font-weight: 600;
	color: #f0f0f0 !important;
}

.aw-cf7-button {
	border-radius: 35px !important;
}

.aw-contact-transport-con {
	font-size: 15px;
	color: #1a1a1a;
}

/* ==================================================== END Contact =====================================================*/



/* ===================================================== Footer ========================================================*/
.aw-footer .aw-centre-name > div {
	color: white;
	font-weight: 500;
}

.aw-footer-quote {
	font-size: 14px;
}

.aw-footer-ECDA {
	font-size: 13px;
}

.aw-footer h4 {
	color: #FACC15;	
	font-size:11px;
}	


/* =========================================================
   ECDA Registration Badge
   Small outlined pill with a circular indicator in front.
   ========================================================= */

.aw-footer-ecda-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    width: fit-content;
    padding: 7px 12px;

    border: 1px solid var(--aw-border);
    border-radius: 999px;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;

	color: lightblue;
}

/* Small circle shown before the text */
.aw-footer-ecda-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;

    border-radius: 50%;
	background: lightblue;
}


/* Keep footer SVG icons as outline icons (no filling) inside Elementor Icon List */
.aw-footer-contact .elementor-icon-list-icon svg {
    fill: none !important;    
	stroke: #93C5FD !important;
    stroke-width: 2;
}


.aw-footer-contact .elementor-icon-list-text {
	font-size: 14px;
	font-weight: 400;	
	overflow-wrap: anywhere;
}

.aw-footer-menu .nav-link-text {
	font-size: 14px;
	font-weight: 400;	
}

.aw-footer-menu .woodmart-nav-link {
	min-height: auto;
}


.aw-footer-menu .nav-link-text {
	color: #cad5e2 !important;
}

.aw-footer-menu .nav-link-text:hover {
	color: #93C5FD !important;
}

.wd-copyrights {
	font-size: 14px;
}
/* =================================================== END Footer ======================================================*/

/* =====================================================================================================================*/
/* ==================================================== Responsive =====================================================*/
/* =====================================================================================================================*/
/* =====================================================================================================================*/



/* =====================================================================================================================
   1. COMBINED / SHARED RULES (Broad ranges)
   Declare these first so specific overrides can beat them.
====================================================================================================================== */

/* DESKTOP + TABLET (768px and wider) */
@media (min-width: 768px) {
 
	
}

/* =====================================================================================================================*/
/* TABLET + MOBILE (1024px and narrower) */
@media (max-width: 1024px) {
	
/* Mobile header: prevent the right column from stretching.
   Keeps the hamburger/menu column only as wide as its contents. */
.whb-general-header .whb-mobile-right {
    flex: 0 0 auto !important;
}	
	


/* set map height on tablet & mobile */
.aw-map-html iframe {
		min-height: 450px;
}
		
	
}

/* =====================================================================================================================*/
/* =====================================================================================================================
   2. ISOLATED DEVICE RULES (Mutually Exclusive)
   These ranges never overlap, so order among them won't 
   cause collisions, but placing them AFTER the combined 
   rules guarantees they always take priority.
======================================================================================================================= */
/* =====================================================================================================================*/

/* DESKTOP ONLY (1025px and wider) */
@media (min-width: 1025px) {
  /* Pure desktop overrides */
}


/* =====================================================================================================================*/
/* TABLET ONLY (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
	
/* -------------------- Admissions ----------------------*/	
/* =========================================
   TABLET CONNECTORS
   ========================================= */


/* -----------------------------------------
   STEP 2 → STEP 3
   STEPPED LINE + BOTH END CIRCLES
   ----------------------------------------- */
.aw-admission-step:nth-child(2)::after {
  content: "";
  display: block;
  position: absolute;

  /* Start directly below Step 2 */
  top: 100%;

  /*
   Connector spans from the horizontal centre
   of Step 3 to the horizontal centre of Step 2
  */
  left: calc(-50% - 60px);
  width: calc(100% + 60px);

  /* Same as tablet row gap */
  height: 60px;

  /*
   Everything below is drawn in ONE background,
   so the lines and circles stay aligned.

   Layers:
   1. circle below Step 2
   2. circle above Step 3
   3. vertical line below Step 2
   4. horizontal middle line
   5. vertical line above Step 3
  */
  background:

    /* Circle touching Step 2 */
    radial-gradient(
      circle,
      var(--aw-border) 0 3px,
      transparent 3.1px
    )
    right 0 top 0 / 6px 6px no-repeat,

    /* Circle touching Step 3 */
    radial-gradient(
      circle,
      var(--aw-border) 0 3px,
      transparent 3.1px
    )
    left 0 bottom 0 / 6px 6px no-repeat,

    /* Vertical line below Step 2 */
    linear-gradient(
      var(--aw-border),
      var(--aw-border)
    )
    calc(100% - 3px) top / 1px 50% no-repeat,

    /* Horizontal middle line */
    linear-gradient(
      var(--aw-border),
      var(--aw-border)
    )
    center / calc(100% - 6px) 1px no-repeat,

    /* Vertical line above Step 3 */
    linear-gradient(
      var(--aw-border),
      var(--aw-border)
    )
    3px bottom / 1px 50% no-repeat;
}


/* -----------------------------------------
   IMPORTANT:
   Step 2 and Step 3 no longer need their
   separate ::before circles.
   ----------------------------------------- */
.aw-admission-step:nth-child(2)::before,
.aw-admission-step:nth-child(3)::before {
  display: none;
}


/* -----------------------------------------
   STEP 3 → STEP 4 HORIZONTAL LINE
   ----------------------------------------- */
.aw-admission-step:nth-child(3)::after {
  content: "";
  position: absolute;

  top: 70px;
  left: 100%;

  /* Tablet column gap */
  width: 60px;
  height: 1px;

  background: var(--aw-border);
}


/* -----------------------------------------
   CIRCLES FOR STEP 3 → STEP 4
   ----------------------------------------- */
.aw-admission-step:nth-child(4)::before {
  content: "";
  position: absolute;

  /* Centre 6px circles on horizontal line */
  top: 67.5px;

  /* Circle touches Step 4 */
  left: -6px;

  width: 6px;
  height: 6px;

  background: var(--aw-border);
  border-radius: 50%;

  /*
   Duplicate circle toward Step 3.
   This makes the other endpoint.
  */
  box-shadow: -55px 0 0 var(--aw-border);
}
	
/* ----------------- END Admissions ---------------------*/	
	
}

/* =====================================================================================================================*/
/* MOBILE ONLY (767px and narrower) */
@media (max-width: 767px) {
  /* Pure mobile overrides (safely overrides tablet+mobile above) */
	

/* ---------------- Hero sections -----------------------*/
/* buttton outer containers, make the 2 buttons equal width */	
.equal-buttons {
    grid-auto-flow: row;
  }	
	
/* --------------- END Hero sections --------------------*/	

	
/* ----------------- Admissions -------------------------*/
/* =========================================
   MOBILE CONNECTORS
   ========================================= */


/* -----------------------------------------
   FIRST: REMOVE DESKTOP / TABLET CONNECTORS
   ----------------------------------------- */
.aw-admission-step::before,
.aw-admission-step::after {
  display: none;
}


/* -----------------------------------------
   VERTICAL LINE BETWEEN MOBILE CARDS
   ----------------------------------------- */
.aw-admission-step:not(:last-child)::after {
  content: "";
  display: block;
  position: absolute;

  /* Start at the bottom edge of each card */
  top: 100%;

  /* Centre the connector horizontally */
  left: 50%;
  transform: translateX(-50%);

  /* Match the 60px gap between mobile cards */
  width: 1px;
  height: 60px;

  background: var(--aw-border);
}


/* -----------------------------------------
   CIRCLES AT BOTH ENDS OF EACH VERTICAL LINE
   ----------------------------------------- */
.aw-admission-step:not(:last-child)::before {
  content: "";
  display: block;
  position: absolute;

  /* First circle touches the bottom edge of the card */
  top: 100%;

  /* Centre circle horizontally */
  left: 50%;
  transform: translateX(-50%);

  /* Circle size */
  width: 6px;
  height: 6px;

  background: var(--aw-border);
  border-radius: 50%;

  /*
   Create the second circle at the bottom
   of the 60px connector line.
   60px gap - 6px circle = 54px
  */
  box-shadow: 0 54px 0 var(--aw-border);
}
	
	
  /* Make each class row a 2-column grid:
     column 1 = number
     column 2 = class title / age text */
  .aw-class-level-con > .e-con {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 20px;
    row-gap: 12px;
  }

  /* Let the number and title participate directly in the grid */
  .aw-class-level-con > .e-con > .e-con {
    display: contents;
  }

  /* Put the age text underneath the class title */
  .aw-class-level-con > .e-con > .elementor-widget-wd_text_block:last-child {
    grid-column: 2;
  }

  /* Override the current inline text-align:right */
  .aw-class-level-con > .e-con > .elementor-widget-wd_text_block:last-child p {
    text-align: left !important;
  }
	
/* Hide table heading on mobile */
.aw-age-group-heading {
	display: none;	
}	
	
/* Reduce the gap inside every immediate grid child
   of the age-group outer container */
.aw-age-group-con > .e-grid {
  gap: 10px;
}	
	
.aw-age-group-item p {
	font-size: 18px;
	font-weight: 700;	
}	
	
/* Hide table heading on mobile */
.aw-session-time-heading {
	display: none;	
}	
	
/* Hide table heading on mobile */
.aw-fee-structure-heading {
	display: none;	
}	

.aw-fee-table-item p {
	font-size: 18px;
	font-weight: 700;	
	text-decoration: underline;
}	
	
.aw-session-time-item p {
	font-size: 18px;
	font-weight: 700;	
	text-decoration: underline;
}		
	
	
.aw-table-field-con {
	background-color: #f1f1f1;
	border-radius: 10px;
	padding: 20px;
}	
	
	
.aw-table-field-heading {
	font-size: 16px;
	font-weight: 700;	
}
	
/* Not sure why is there padding on certain cell, need to investigate, so I set top and bottom padding to 0 */
.aw-fee-structure-con  > .e-child:not(.aw-fee-structure-heading) {
	padding: 10px 10px;
}		
	
/* ----------------- END Admissions ---------------------*/	
	
	
/* --------------------- Contact ------------------------*/	

/* Stack the two-column contact form fields vertically on smaller screens */
.aw-contact-form .aw-form-row {
	display: block;  /* Stack fields one above the other */
}	
	
	
/* ------------------- END Contact ----------------------*/	
	
/* --------------------- Footer -------------------------*/	
.aw-footer-menu .woodmart-nav-link {
    justify-content: center;
    text-align: center;
}	
	
.aw-footer-privacy-policy {
	display: block;	
}
	
/* ------------------- END Footer -----------------------*/	
	
}