@charset "UTF-8";


/*
Theme Name:The Upgraid
Theme URI: https://www.theupgraid.com
Description: Custom
Author: masked master
Author URI: https://www.www.theupgraid.com
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html



*/




/*  1.RESET
	2.GLOBAL Styles
2a Buttons
	3.GRID
	4.TYPOGRAPHY
	5.HEADER GRID ITEMS
		LOGO
		NAV
	6.FEATURED GRID ITEMS
	7.CALL TO ACTION FOR
	 */

	 
	 
	 /* RESET */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;vertical-align: baseline;}
body {  -webkit-font-smoothing: antialiased;}
/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
  box-sizing: border-box;
}

/*
  2. Remove default margin
*/
* {
  margin: 0;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/*
  6. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}

.mechanic-logo {width:306px; height:77px; margin:0 auto;}
/*

 7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 {
	font-weight:300;
}


/*
  8. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}





	 
/* Global  */ .red {color: #f53240;} .ac {text-align: center;} .center { display:flex; align-self: center; justify-content: center;align-items: center; align-content: center;} 
.blue {background-color: #D2F47A;}/* #88D4F2 */
.pink {background-color: #ef3df2!important}

 /* 	TYPOGRAPHY   */
body {font-family: 'Open Sans', sans-serif; font-size: 100%; line-height: 1.618;}h1 { font-size: 2.618em;  /* 16x2.25=36 */  line-height: 1.25;margin-bottom:0.5em; }h2 { font-size: 1.5em;   /* 16x1.5=24 */  line-height: 1.15384615; margin: 0.9em 0 1em 0;  margin-bottom: 0.382em; }h3 { font-size: 1.125em; /* 16x1.125=18 */   line-height: 1.13636364; margin-bottom: 0.6em; margin-top: 1.5em;}h4 { font-size: 0.875em; /* 16x0.875=14 */  line-height: 1.11111111;}p, address, li  { font-size: 1em;  /* 16x0.75=12 */   margin-top: 0.32em; line-height: 1.68; margin-bottom: 1.68em; } h1, h2, h3, h4, h5 {font-family: 'Red Hat Display', sans-serif;} ul { margin-top: 0.32em; line-height: 1.68; margin-bottom: 1.68;}
 p, h1, h2, h3, h4, h5 {padding-left:.5em; padding-right: .5em;}

/* 	  GRID */

#header {grid-area: Header;}  #introContent {grid-area: Intro;} #mainContent {grid-area: Main;} #footer {grid-area: FooterC}
 body {display: grid;
	  grid-template-areas:
          "Header Header Header Header Header Header"
		    "Intro Intro Intro Intro Intro Intro"
          "Main Main Main Main Main Main"
          "FooterC FooterC FooterC FooterC FooterC FooterC";
          grid-template-rows: AUTO;  grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr ;grid-row-gap: 10px;grid-column-gap: 10px;height: 100vh;margin: 0; text-align: center; }


#header {}
 #header .digital-courses-banner { 
 display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
padding: 0 1rem;   
	 flex-direction:row; 
	 justify-content:space-between; 
	 padding: 0.8rem 1.5rem;

} 
#header .digital-courses-banner p.button {order:3;}
.account-control {order: 3;}
#header .digital-courses-banner > * { 
  min-width: 0;
  flex: 0 1 auto;
}
.account-control {
  display: flex;
  align-items: center;
  gap: 1rem; /* space between icons */
}

.account-control a {
/*   display: flex; */
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.account-control a i {
  font-size: 1.4rem; /* or whatever size you like */
  color: #667367;
  line-height: 1;   /* removes extra font box */
}
.account-control a i { font-size: 1.15rem;
  color: #667367;
  margin-left: 0.8rem;
 vertical-align: middle;}
#header .digital-courses-banner .button a {
  display: inline-flex;         /* center the text neatly */
  align-items: center;
  justify-content: center;
  padding: .42rem .8rem;        /* tweak these to taste */
  border-radius: .5rem;         /* optional */
  font-weight: 600;             /* optional */
	white-space:nowrap;
	flex:0 0 auto;
}
.account a {
	color:#667367;
	font-size:.6em;
}
.header-cta {
  display: inline-flex;             /* flex container */
  align-items: center;              /* vertical centering */
  justify-content: center;          /* horizontal centering */
  padding: 0.5rem 1rem;             /* breathing space */
  background: #606d64;              /* your button bg */
  color: #fff!important;
  font-weight: 600;
  border-radius: 8px;
  line-height: 1;                   /* prevent tall line box */
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
	font-size:0.5em;
}


/*Buttons*/
.button {background: #667367;border-radius: 5px;text-align: center;  color:white; /*padding:1em;*/display:flex;align-items:center;} a.button {color: white;text-decoration: none; font-weight: bold;cursor: hand;/* width: 30%; display: block; */ margin:0 auto; padding: 1em;  } 

#header .button {height:40px; padding-left:1em;padding-right:1em; }
#header .button a {color:white; font-weight:bold;}

#header .digital-courses-banner .button,
#header .digital-courses-banner .button a {
  height: auto !important;     /* override any hard height like 40px */
  min-height: 0;
  line-height: 1.15 !important;/* many themes use line-height to force 40px */
  box-sizing: border-box;
}
#header .digital-courses-banner {}

.cart { margin-left: auto; }
.button { flex: 0 1 auto; }
#mainContent {padding: 0 2.5% 0  2.5%; }
.size-auto, 
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
	max-width: 100%;
	height: auto;
}

h1.intro {font-size:3.3em; width:60%; margin:0 auto;max-width: 18ch;              /* forces good line length */
  margin: 0 auto .75em;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;}

.texture p {max-width: 65ch;              /* ~60–75 chars */
  margin: 0 auto 1.75em;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: #3b4943;  }
.texture a.button {
	display:block;
	width:15%;
	 display:inline-flex; align-items:center; justify-content:center;
  padding: .95rem 1.5rem; border-radius:14px;
  background:#677468; color:#fff; font-weight:700; line-height:1;
}

.texture a.button:hover{ filter:brightness(.95); }
/*LOGO*/

.logo {width: 45%; align-self: center; text-shadow: 1px 20px, 11px black; margin-bottom:0; margin: 0 auto; margin-bottom: 0px;
}

.online-course{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 64px) 16px;
  display: flex;
  flex-direction: row;
  gap: clamp(32px, 5vw, 80px);
	text-align:left;
	margin-block: clamp(3rem, 6vw, 6rem);
}
/* Headings */
.online-course h2{
  
  margin: 0 0 16px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ---------- Video intro ---------- */
.video-container{
  width: min(900px, 100%);
  margin: 0 auto;
  aspect-ratio: 16/9;                 /* responsive */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(0,0,0,.12);
}
.video-container video{
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- Split hero: image + copy ---------- */
.hero{ padding: 0; }
.upgraid-hero{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 48px);
}

.hero-image{
  width: 100%;
  max-width: 520px;                   /* image column */
  height: auto;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  flex: 0 0 auto;
}

.upgraid-hero p{
  max-width: 60ch;                    /* ~60–75 chars */
  margin: 0;
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  color: #37433e;
  line-height: 1.55;
}

/* ---------- The Upgraid blurb ---------- */
.online-platform{
 
  max-width: 900px;
  margin: 0 auto;
}
.online-platform p{
  max-width: 70ch;
  margin: 0 auto;
  color: #3b4943;
  line-height: 1.55;
	font-size: clamp(1.05rem, 1.2vw, 1.2rem);
}

.video-container {
	width:100%;
	
}
video {width:30%;margin:0 auto;}

.pricing-box {width:50%; margin:0 auto;}

/* course modules */

 section.online-learning-topics div.course-subjects {
    display: flex;
    flex-direction: row;
	 flex-wrap:wrap;
  }

section.online-learning-topics div.course-subjects div {
    width: 30%;
    margin: 0 auto;
    margin-bottom: 0px;
    background-color: #f5f5f5;
    margin-bottom: 2em;
    padding: 2em 2em 0;
    border-radius: 12px;
    text-align: left;
	 box-shadow: 0 4px 12px rgba(0,0,0,0.05);
	display: flex;
  flex-direction: column;
}
  

div.course-subjects i {width:35px;height:35px;margin-left:-35px;
	margin-top:-6px; display:block;
    background-repeat: no-repeat;
    background-size: 100%;
/*     background-position: 0px top; */
	position:absolute;

	z-index:2;
	background-color: #667367;
    border-radius: 4px;
	color:white;
	display:flex;justify-content:center;align-items:center;font-style:normal;}
section.online-learning-topics div.course-subjects div small {padding-left:0.5em;font-size: 0.9rem;
  color: #666;
  font-style: italic;
  display: block;
  margin-bottom: .25em;}

div.course-subjects h4 {font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: #111;}

div.course-subjects p{font-size: 1rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 1.5rem;}
.texture {
background-image: url("https://www.theupgraid.com/wp-content/uploads/2024/12/texture.svg");
    background-size: 0.3%;
    background-repeat: repeat;
    padding: 3.7em;
    border-radius: 12px;
    border: solid 1px lightgray;
	
}

div.course-subjects .button {display: inline-block;
  margin-top: 1rem;
  background: #3c4c42; /* your current button green */
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  transition: background 0.3s ease;
letter-spacing:.2px;
margin-top:auto;}

div.course-subjects .btn-primary {margin-top:auto;}

div.course-subjects .btn-primary:hover {background: #2c3830;filter: brightness(0.95); }
div.course-subjects .btn-primary:focus-visible { outline: 2px solid #2b6f5b; outline-offset: 3px; }
/* services  */
ol.d-l-e-p {list-style:none!important;}
ol.d-l-e-p li ul {list-style:none!important;}
.profit-vault-online-syllabus ul {list-style:none!important;}
.profit-vault-online-syllabus ul li ul li::marker{display:none;} 
ol.mobile-services {
	list-style:none!important;
	display:flex;
	flex-direction:row;
	list-style-type:none!important;
	margin-top: 2.2rem;
}

section.lesson-holder {
    display: flex;
}



li ul li i{color:#29dfff; font-size:1.2em; } 


/*Menus*/

/*My cutom css only hamburger menu*/
/* Top level */
nav.main-menu { order: 1; }
nav.main-menu ul { list-style:none; margin:0; padding:0;display: flex;
  gap: 2rem;  }
nav.main-menu ul li {
  display: inline-block;
  color: black;
  padding-right: 2rem;
  /* REMOVE this: padding-bottom:2rem; */
  position: relative;            /* make each li a positioning context */
	line-height:1;
}
nav.main-menu ul a {
  font-weight: 600;
  text-decoration: none;
  font-size: 1em;
   color:#2d3a34;
	letter-spacing: .01em;
}
nav.main-menu a:hover {
  color:#1f2723;
}
nav.main-menu ul a:hover { color:#242811; }

/* Hide submenus by default WITHOUT affecting layout */
nav.main-menu ul ul {
  position: absolute;            /* overlay, not in flow */
  top: 100%;                     /* directly under parent li */
    left: 0%;          /* anchor to left of parent */
  width: 220px;         /* fixed width */
  max-width: 90vw; 
  display: block;                /* keep as block, we'll use visibility */

  margin: 0;
  padding: .5rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  z-index: 1000;

  visibility: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  pointer-events: none;          /* ignore mouse while hidden */
}

/* Show submenu on hover/focus */
nav.main-menu ul li:hover > ul,
nav.main-menu ul li:focus-within > ul {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* First-tier dropdown items */
nav.main-menu ul ul li {
  display: block;
  width: 100%;
  padding: 0 !important;
  margin: 0 0 .5rem 0 !important;
}

/* Optional: tighten last item spacing */
nav.main-menu ul ul li:last-child { margin-bottom: 0 !important; }

/* Only add a “+” to items that actually have a submenu */
nav.main-menu li.menu-item-has-children > a:after { content: ' +'; }
nav.main-menu li:not(.menu-item-has-children) > a:after { content: ''; }

/* Ensure header can paint overlays */
#header, .digital-courses-banner { overflow: visible; }

/* Your existing bits */
.menuToggle span, .menuToggle input { display: none; }
#menuToggle span, #menuToggle input { display: none; }
#menu .button { background-color: #88D4F2; width: 80%; }
.holder i { font-size: 1.2rem; color: #00c2b3; padding: .2em; text-shadow: rgba(0,0,0,.5) 0 0 2px; }




/* Last two top-level items: align dropdown to the right */
nav.main-menu > ul > li:nth-last-child(-n+2) > ul {
  left: auto;
  right: 0;
}

nav.main-menu ul ul {
  max-width: 90vw;    /* fit within viewport */
  overflow-x: auto;   /* allow scroll if too wide */
}



p a, ul li a {color: black; text-decoration: none;}
.button.green {background: #DEF54E; color: black; } 


p.test {color:red;}




div.the-upgraid-system {
	padding:2em;
	padding-left:1em;
	padding-right:1em;
	background-color:#f5f5f5;
	border-radius:12px;
	margin-block: clamp(3rem, 6vw, 6rem);
	
}


/* testimionals  */

/* Section wrapper matches your rhythm */
.section { margin-block: clamp(3rem, 6vw, 6rem); }

.reviews { max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
.reviews__head { text-align: center; }
.reviews__head h2 { font-size: clamp(1.8rem, 2.2vw, 2.4rem); line-height: 1.15; margin: 0 0 .4em; letter-spacing: -.01em; }
.reviews__sub { max-width: 65ch; margin: 0 auto 1.5rem; color: #3b4943; font-size: clamp(1rem, .6vw, 1.125rem); }

/* KPI strip */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(12px, 2vw, 20px);
  margin: 0 0 clamp(24px, 3vw, 36px);
  padding: 0; list-style: none;
}
.kpi {
  background: #f4f6f4;
  border-radius: 14px;
  padding: clamp(.9rem, 1.4vw, 1.1rem);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}
.kpi__label { display:block; color:#6b7972; font-size: .95rem; margin-bottom: .25em; }
.kpi__value { font-weight: 700; font-size: clamp(1.1rem, 1.4vw, 1.35rem); color:#2d3a34; }

/* Testimonials grid */
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(18px, 2.2vw, 28px);
}
.review {
  display:flex; flex-direction: column;
  background: #f5f6f5;
  border-radius: 18px;
  padding: clamp(1rem, 1.6vw, 1.4rem);
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
}
.review__head { display:flex; gap:.8rem; align-items:center; margin-bottom:.6rem; }
.review__avatar { width:48px; height:48px; border-radius:10px; object-fit:cover; }
.review__name { font-weight:700; color:#1c231f; margin-bottom:.1rem; }
.stars { color:#2f3f37; letter-spacing:.15em; font-size:1rem; } /* pure text stars for perf+access */

.review__text { margin: .4rem 0 1rem; color:#2f3934; line-height:1.55; max-width: 60ch; }

.review__stats {
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.6rem;
  margin-top: auto; /* push stats to bottom if text grows */
  font-size: .95rem;
}
.review__stats dt { color:#6b7972; }
.review__stats dd { margin:0; font-weight:700; color:#2b3833; }

/* Proof grid stays flexible */
.proof__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(14px, 2vw, 24px);
}

/* Force all thumbs to same portrait ratio */
.proof-card .thumb {
  aspect-ratio: 8 / 9;     /* matches your 800x900 images */
  overflow: hidden;
  border-radius: 12px;
  background: #f4f4f4;     /* fallback bg while loading */
}

/* Make images cover the box consistently */
.proof-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* crop edges if needed */
  display: block;
}


/* CTA */
.reviews__cta { text-align:center; margin-top: clamp(24px, 4vw, 48px); }
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding: .9rem 1.3rem; border-radius:14px;
  background:#667367; color:#fff; text-decoration:none; font-weight:700; line-height:1;
}
.btn-primary:hover{ filter: brightness(.95); }
.tiny-note { margin:.5rem 0 0; color:#6b7972; font-size:.95rem; }

/* Responsive */
@media (max-width: 1100px){
  .reviews__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .reviews__grid { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr; }
}
/* Section wrapper (re-use your rhythm utilities) */
.section { margin-block: clamp(3rem, 6vw, 6rem); }
.proof { max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
.proof__head { text-align: center; margin-bottom: clamp(20px, 3vw, 36px); }
.proof__head h2 { font-size: clamp(1.8rem, 2.2vw, 2.4rem); line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .4em; }
.proof__head .sub { max-width: 65ch; margin: 0 auto 1rem; color:#3b4943; }

/* Tabs */
.proof__tabs { display: inline-flex; gap: 8px; background:#f2f4f3; padding:6px; border-radius: 12px; }
.tab {
  border:0; background:transparent; padding:.5rem .9rem; border-radius:10px; cursor:pointer; font-weight:600; color:#2f3a35;
}
.tab.is-active { background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.08); }

/* Grid */
.proof__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}
@media (max-width: 1024px){ .proof__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px){ .proof__grid { grid-template-columns: 1fr; } }

/* Card */
.proof-card {
  display:flex; flex-direction:column;
  background:#f6f7f6; border-radius:16px; padding:12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.proof-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0,0,0,.1); }

.thumb { position:relative; border-radius:12px; overflow:hidden; }
.thumb img { width:100%; height:auto; display:block; }
.badge {
  position:absolute; top:10px; left:10px;
  background:#667367; color:#fff; padding:.35rem .55rem; border-radius:10px; font-weight:700; font-size:.9rem;
  box-shadow:0 6px 18px rgba(0,0,0,.14);
}
.badge--green { background:#2f6f4f; }

.caption { margin: .6rem 0 .2rem; font-weight:700; color:#1b221f; line-height:1.3; }
.meta { margin: 0 0 .2rem; color:#6b7972; font-size:.95rem; }

.disclaimer { margin-top: clamp(16px, 3vw, 24px); text-align:center; color:#6b7972; font-size:.95rem; }



div.the-upgraid-faq {margin-block: clamp(3rem, 6vw, 6rem);}
div.the-upgraid-system p {
	color:#7e7d7d;
}
span.standout {padding:.9em;display:inline-block;color:#2c2b2b;margin-bottom:1em;background-color: white;
    border: 1px solid lightgray;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    padding: .5em;
    border-radius: 12px;}
div.platform, .professors, .ideas, .community {width: 50%;
    margin: 0 auto;
    margin-bottom: 0px;
    background-color: white;
    margin-bottom: 2em;
    padding: 1.2em;
    border-radius: 12px;
    text-align: left;
border: solid 1px lightgray;}

.pricing-box {
	border-radius:12px;
	background-color:#f5f5f5;
	border: solid 1px lightgray;
	padding:1.2em;
}
.pricing-box-inner {padding:2em; background-color:white; border-radius:12px; text-align:left; }
.pricing-box-inner a.button {display:block;}
.pricing-box-inner h4 span {padding: .9em;
  display: inline-block;
  color: #2c2b2b;
  margin-bottom: .25em;
border: solid 1px lightgray;text-align:left;border-radius:12px;}
p.vp {text-align:left; display:block;}
span.vault-price {font-size:1.8em; text-align:left;}
.pricing-box-inner h4 {text-align:left;}
.pricing-box ul {margin-top:2.2em;}
.pricing-box ul li {font-size:0.6em;list-style:none;text-align:left; margin-bottom:1em;}
.accordion {width:80%;margin:0 auto;}
video {border-radius:12px;}
/* 	faqs */
	.accordion .accordion-item {
  border-bottom: 1px solid #e5e5e5;
}

.accordion .accordion-item button[aria-expanded='true'] {
  border-bottom: 1px solid #667367;
}

.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1em 0;
  color: #7e7d7d;
  font-size: 1.15rem;
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
}

.accordion button:hover,
.accordion button:focus {
  cursor: pointer;
  color: #667367;
}

.accordion button:hover::after,
.accordion button:focus::after {
  cursor: pointer;
  color: #667367;
  border: 1px solid #667367;
}

.accordion button .accordion-title {
  padding: 1em 1.5em 1em 0;
}

.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 18px;
  right: 0;
  width: 22px;
  height: 22px;
  border: 1px solid;
  border-radius: 22px;
}

.accordion button .icon::before {
  display: block;
  position: absolute;
  content: '';
  top: 9px;
  left: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
}
.accordion button .icon::after {
  display: block;
  position: absolute;
  content: '';
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  background: currentColor;
}

.accordion button[aria-expanded='true'] {
  color: #667367;
}
.accordion button[aria-expanded='true'] .icon::after {
  width: 0;
}
.accordion button[aria-expanded='true'] + .accordion-content {
  opacity: 1;
  max-height: 15em;
  transition: all 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content p {
  font-size: 1rem;
  font-weight: 300;
  margin: 2em 0;
}

#footer {padding: 0 2.5% 0 2.5%;}
	.footer-wrap {background-image: url("https://www.theupgraid.com/wp-content/uploads/2024/12/texture.svg");
    background-size: 0.3%;
    background-repeat: repeat;  padding: 1em;  border: solid 1px lightgray; border-radius: 20px;} 
#footer ul{display:flex;}
#footer ul li {list-style:none; padding-right:2rem;}

@media all and (max-width: 575px) {
	body { font-size: 100%;  line-height: 1.375; } h1 { font-size: 2.25em;  /* 16x2.25=36 */ } h2 { font-size: 1.5em;   /* 16x1.5=24 */ } h3 { font-size: 1.125em; /* 16x1.125=18 */ } h4 { font-size: 0.875em; /* 16x0.875=14 */ } p  { font-size: 0.75em;  /* 16x0.75=12 */ padding-left:.5em;padding-right:.5em;}
	body { 
    grid-template-areas: 
	 "Header"
		"Intro"
	 "Main"
	 "FooterC";
 grid-template-rows: auto;  grid-template-columns: 1fr;  
    }
	
	
	#header .digital-courses-banner > a[rel="home"] {
  max-width: clamp(90px, 18vw, 150px);
}
	 #header .digital-courses-banner .button a {
    padding: .36rem .72rem;
  }

#header .digital-courses-banner .account-control a,
#header .digital-courses-banner .account-control a:visited,
#header .digital-courses-banner .account-control a:hover,
#header .digital-courses-banner .account-control a:active{
	color:#667367;
	font-size:.6em;
		text-decoration:none;
}
	
	 .header-cta{
    order: 1;
    position: static;        /* ensure it isn't absolute anywhere */
    margin-top: .25rem;      /* breathing room from icons */
    padding: .48rem .9rem;   /* slightly tighter on mobile */
    line-height: 1;
    white-space: nowrap;
  }
	
	  .account-control a i{
    line-height: 1;
    font-size: .9rem;    
  margin-left: 0.2rem;
  }

	.account-control {gap:0.1em;display:inline;}
	.header-cta {display:flex;}
 #main h3, #main p  {
		padding-left:20%; 
		padding-right:20%;
		
		
	}	
	
	

	
	nav.main-menu {order:0;}	
	#menu-main {display: flex;
		flex-direction: column;
	text-align:left;}
	#menuToggle
{ display: block; position: relative; top: 5px; left:9px; z-index: 1; -webkit-user-select: none; user-select: none;}
#menuToggle input
{display: block;width: 40px;height: 32px;position: absolute;/* top: -7px;left: -5px; */cursor: pointer;opacity: 0; /* hide this */z-index: 2; /* and place it over the hamburger */-webkit-touch-callout: none;}
/* Just a quick hamburger
 */
#menuToggle span
{ display: block;width: 25px;height: 1px;margin-bottom: 7px;position: relative; background: /*#38b6ad #e1ff41*/ black;border-radius: 3px;z-index: 1;transform-origin: 4px 0px;transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),opacity 0.55s ease;}#menuToggle span:first-child{transform-origin: 0% 0%;}#menuToggle span:nth-last-child(2){transform-origin: 0% 100%;}
#menuToggle span:nth-child(3) {width:25px;}
/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);background: #4689fd;
}
/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{ opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}
/*
 * Ohyeah and the last one should go the other direction
 */
 #menuToggle input:checked ~ span:nth-last-child(2)
{opacity: 1;
    transform: rotate(-45deg) translate(0, -1px);
}
	#menuToggle input:checked ~ .menu-main-container
{transform: none;}
	
	menuToggle input:checked ~ div {
  transform: none;
	}
	.menu-main-container
{ margin:0px 0px 0px 10px;padding: 5px;padding-top: 20px;background: #f5f5f5;color:white;font-weight:400;text-transform:uppercase;list-style-type: none;-webkit-font-smoothing: antialiased; transform-origin: 0 0;transform: translate(-2000%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);display: flex;flex-direction: column;position: absolute; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing:auto;border-radius:8px;width:450%;left: 0px; top:30px;}
nav.main-menu {width:50px; margin-right:1.2em;}nav.main-menu ul li {padding:0;margin-bottom:1rem; border-bottom: dashed 1px #242811; padding-bottom:1em; padding-left:2.5em;}nav ul ul li {width:0;}nav ul li:hover > ul {align-items:flex-start;justify-content:flex-start;padding-left:6px; }
	
 li.menu-item:hover {background:#29baef;}
	
/* 	LOGO */
	.the-upgraid-logo {
			width:80%;
		min-height:50px;
/* 		margin: 0 auto; */
	}
	
/* 	intro  */
	h1.intro {
		font-size:2.2em;
		width:auto;
	}
	
	.upgraid-hero, .online-platform, .pricing-box {width:80%; margin:0 auto;}
	
 	.digital-courses-banner p.button {font-size:.6em; /* padding:.6em;*/ margin-top:.8em; height:auto;} 
	
	/* 	the profit vault mobile edits */
	
	
	.online-course {
		flex-direction:column;
	}
	
	section.online-learning-topics {
		
		
	}
	section.online-learning-topics div.course-subjects {display: flex;
    flex-direction: column;}
	
	section.online-learning-topics div.course-subjects div {
		width:80%;
		margin: 0 auto;
		background-color:#f5f5f5;		margin-bottom:2em; padding:1.2em; border-radius:12px; text-align:left;
	}
	
	section.online-learning-topics div.course-subjects div h4 {margin-bottom:.25em;}
	
	section.online-learning-topics div.course-subjects div a.button {
		font-weight:normal;font-size:8px;padding:1.2em;color:white;
	}
	
	div.mindset, div.ai, div.branding, div.business, div.paid-ads, div.e-commerce, div.digital-marketing, div.branding, div.crypto {position:relative; z-index:1;}
	
	div.social-mediaa {position:relative; z-index:1;}
	
	div.course-subjects i {width:35px;height:35px;margin-left:-35px;
	margin-top:-6px; display:block;
    background-repeat: no-repeat;
    background-size: 100%;
/*     background-position: 0px top; */
	position:absolute;
	top:-3px;
	z-index:2;
	background-color: #667367;
    border-radius: 4px;
	color:white;
	display:flex;justify-content:center;align-items:center;font-style:normal;}
/* div.mindset i.mindset-icon {background-image: url("https://www.theupgraid.com/wp-content/uploads/2024/12/online-mindset-course.svg");	
  }
	i.ai-icon {background-image: url("https://www.theupgraid.com/wp-content/uploads/2024/12/learn-ai-course.svg");}
	i.business-icon {background-image: url("https://www.theupgraid.com/wp-content/uploads/2024/12/learn-ai-course.svg");}
	i.ads-icon {background-image: url("https://www.theupgraid.com/wp-content/uploads/2024/12/online-social-media-course.svg");}
	i.ecomm-icon {background-image: url("https://www.theupgraid.com/wp-content/uploads/2024/12/learn-ecommerce-course.svg");}
	i.marketing-icon {background-image: url("https://www.theupgraid.com/wp-content/uploads/2024/12/online-digital-marketing-course.svg");}
	
	i.branding-icon {background-image: url("https://www.theupgraid.com/wp-content/uploads/2024/12/online-branding-course.svg");}
	i.crypto-icon {background-image: url("https://www.theupgraid.com/wp-content/uploads/2024/12/learn-crypto-online.svg");}
	
	i.social-iconn {background-image: url("https://www.theupgraid.com/wp-content/uploads/2024/12/online-social-media-course.svg");} */
	
	div.texture {background-image: url("https://www.theupgraid.com/wp-content/uploads/2024/12/texture.svg"); background-size:1%;
		background-repeat:repeat; padding:2em; border-radius:12px; border: solid 1px lightgray;}
	
	div.texture a.button {
		width:35%;
		font-size:.6em;
		white-space:nowrap;
	
		
	}
	.standout {
		background-color:white; border: 1px solid lightgray; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); padding:.5em; border-radius:12px; 
	}
	span.standout{font-size:.7em;}
	div.texture p {	margin-top:1.2em;}
	div.online-course {
		padding:1.2em; margin-top:1.2em; border-radius:12px;
	}
	
	ol.d-l-e-p {
		 padding:1.2em; 
	}
	
	ol.d-l-e-p li {background-color:white;border-radius:12px; margin-bottom:1.2em; padding:1.2em; border: solid 1px lightgray; border-radius:12px; }
	
	div.price, .profit-vault-faq {padding-top:4.2em;}
	
	ol.d-l-e-p li ul li {border:none;}
	#mainContent > p {font-size:1.2em}
	
/* 	video  */

	video {width:90%;margin: 0 auto;}
	
	
	div.platform, .professors, .ideas, .community {width: 100%;
    margin: 0 auto;
    margin-bottom: 0px;
    background-color: white;
    margin-bottom: 2em;
    padding: 1.2em;
    border-radius: 12px;
    text-align: left;
border: solid 1px lightgray;}
/* 	faqs */
	.accordion .accordion-item {
  border-bottom: 1px solid #e5e5e5;
}

.accordion .accordion-item button[aria-expanded='true'] {
  border-bottom: 1px solid #667367;
}

.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1em 0;
  color: #7e7d7d;
  font-size: 1.15rem;
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
}

.accordion button:hover,
.accordion button:focus {
  cursor: pointer;
  color: #667367;
}

.accordion button:hover::after,
.accordion button:focus::after {
  cursor: pointer;
  color: #667367;
  border: 1px solid #667367;
}

.accordion button .accordion-title {
  padding: 1em 1.5em 1em 0;
}

.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 18px;
  right: 0;
  width: 22px;
  height: 22px;
  border: 1px solid;
  border-radius: 22px;
}

.accordion button .icon::before {
  display: block;
  position: absolute;
  content: '';
  top: 9px;
  left: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
}
.accordion button .icon::after {
  display: block;
  position: absolute;
  content: '';
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  background: currentColor;
}

.accordion button[aria-expanded='true'] {
  color: #667367;
}
.accordion button[aria-expanded='true'] .icon::after {
  width: 0;
}
.accordion button[aria-expanded='true'] + .accordion-content {
  opacity: 1;
  max-height: 15em;
  transition: all 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content p {
  font-size: 1rem;
  font-weight: 300;
  margin: 2em 0;
}
	
	div.texture i.mindset {background-image: url("https://www.www.theupgraid.com/wp-content/uploads/2024/12/online-mindset-course.svg");
	width:50px;
	height:50px;
	display:block;
background-repeat: no-repeat;
    background-size: 100%;
		margin: 0 auto;
		margin-bottom:.5em;


	}
	
	div.texture div.video-container {
		padding: 1em;
  background-color: white;
  border-radius: 22px;
		border: solid 1px lightgray;
	}
	
	p.t-p {padding: 1em;
  background-color: white;
  border-radius: 22px;
		border: solid 1px lightgray;}
/* 	footer */
	

	#footer {
  padding: 0 2.5% 0 2.5%;
		font-size:.8em;
		
   
  }
	
	#footer ul li {
		list-style:none;
	}
	#footer a {color:#7e7d7d;}
	section.copyright {color:#7e7d7d; border-top: solid 1px lightgray; font-size:0.6em; display:flex; padding-top:.5em; justify-content:space-between; align-content:flex-start;}
section.footer-wrap {background-image: url("https://www.theupgraid.com/wp-content/uploads/2024/12/texture.svg");
    background-size: 1%;
    background-repeat: repeat;  padding: 1em;  border: solid 1px lightgray; border-radius: 20px;} 
	#footer ul.scl {text-align:left; display:flex;}
	#footer .ready-to-join { border-radius:6px; padding:1em;}
	.footer-logo img {width:200px; height:200px; margin: 0 auto;}
	section.copyright ul li {padding-right:0.3em;}
	
	
	
	
	

li ul li i{color:#29dfff; font-size:1.2em; } 
	
	
	
	
	
/* Your vehicle	car details */
	
	
	
	
} 

/*! 
* @package IcoFont 
* @version 1.0.1 
* @author   
* @copyright 2025 
* @license - https://icofont.com/license/
*/@font-face{font-family:IcoFont;font-weight:400;font-style:Regular;src:url(fonts/icofont.woff2) format("woff2"),url(fonts/icofont.woff) format("woff")}[class*=" icofont-"],[class^=icofont-]{font-family:IcoFont!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;line-height:1;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}.icofont-duotone.icofont-cart:before{content:"\13adf"}.icofont-duotone.icofont-cart:after{content:"\13ade"}.icofont-cart:before{content:"\eed2"}.icofont-shopping-cart:before{content:"\efe7"}.icofont-cart-alt:before{content:"\eed1"}.icofont-ui-user:before{content:"\ec8e"}.icofont-user-alt-3:before{content:"\ecfd"}.icofont-login:before{content:"\ef7b"}.icofont-logout:before{content:"\ef7c"}.icofont-facebook:before{content:"\ed37"}.icofont-whatsapp:before{content:"\ed86"}.icofont-brand-whatsapp:before{content:"\e957"}.icofont-x:before{content:"\f03d"}.icofont-tiktok:before{content:"\f033"}.icofont-instagram:before{content:"\ed46"}.icofont-tick-mark:before{content:"\f00e"}.icofont-tick-boxed:before{content:"\f00d"}.icofont-users-social:before{content:"\ed0c"}.icofont-light-bulb:before{content:"\ef6b"}.icofont-hat:before{content:"\eadf"}.icofont-hat-alt:before{content:"\eade"}.icofont-chat:before{content:"\eed5"}.icofont-ship-wheel:before{content:"\e81b"}.icofont-duotone.icofont-screen:before{content:"\13ba9"}.icofont-duotone.icofont-screen:after{content:"\13ba8"}.icofont-learn:before{content:"\ef60"}[class*=" icofont-"].icofont-duotone,[class^=icofont-].icofont-duotone{position:relative}[class*=" icofont-"].icofont-duotone:before,[class^=icofont-].icofont-duotone:before{position:absolute;left:0;top:0}[class*=" icofont-"].icofont-duotone:after,[class^=icofont-].icofont-duotone:after{opacity:.4}.icofont-xs{font-size:.5em}.icofont-sm{font-size:.75em}.icofont-md{font-size:1.25em}.icofont-lg{font-size:1.5em}.icofont-1x{font-size:1em}.icofont-2x{font-size:2em}.icofont-3x{font-size:3em}.icofont-4x{font-size:4em}.icofont-5x{font-size:5em}.icofont-6x{font-size:6em}.icofont-7x{font-size:7em}.icofont-8x{font-size:8em}.icofont-9x{font-size:9em}.icofont-10x{font-size:10em}.icofont-fw{text-align:center;width:1.25em}.icofont-ul{list-style-type:none;padding-left:0;margin-left:0}.icofont-ul>li{position:relative;line-height:2em}.icofont-ul>li .icofont{display:inline-block;vertical-align:middle}.icofont-border{border:solid .08em #f1f1f1;border-radius:.1em;padding:.2em .25em .15em}.icofont-pull-left{float:left}.icofont-pull-right{float:right}.icofont.icofont-pull-left{margin-right:.3em}.icofont.icofont-pull-right{margin-left:.3em}.icofont-spin{-webkit-animation:icofont-spin 2s infinite linear;animation:icofont-spin 2s infinite linear;display:inline-block}.icofont-pulse{-webkit-animation:icofont-spin 1s infinite steps(8);animation:icofont-spin 1s infinite steps(8);display:inline-block}@-webkit-keyframes icofont-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes icofont-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.icofont-rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.icofont-rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.icofont-rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.icofont-flip-horizontal{-webkit-transform:scale(-1,1);transform:scale(-1,1)}.icofont-flip-vertical{-webkit-transform:scale(1,-1);transform:scale(1,-1)}.icofont-flip-horizontal.icofont-flip-vertical{-webkit-transform:scale(-1,-1);transform:scale(-1,-1)}:root .icofont-flip-horizontal,:root .icofont-flip-vertical,:root .icofont-rotate-180,:root .icofont-rotate-270,:root .icofont-rotate-90{-webkit-filter:none;filter:none;display:inline-block}.icofont-inverse{color:#fff}

/* woocommerce */