/*
Theme Name: Hadron
Theme URI: http://gantry.org
Author: RocketTheme, LLC
Author URI: http://rockettheme.com
Description: Hadron - Gantry 5 Theme from RocketTheme
Version: 2.5.0
*/
/*
Theme Name: Hadron
Theme URI: http://gantry.org
Author: RocketTheme, LLC
Author URI: http://rockettheme.com
Description: Hadron - Gantry 5 Theme from RocketTheme
Version: 2.5.0
*/
<style>
#miy-formations *{box-sizing:border-box;margin:0;padding:0}
#miy-formations{font-family:'Inter',sans-serif;color:#1a1a2e;line-height:1.5}
#miy-formations a{text-decoration:none}

/* HERO */
.miy-hero{background:linear-gradient(135deg,#7454ac,#5e3d96,#3d2564);color:#fff;padding:60px 20px;text-align:center}
.miy-hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.2);border-radius:999px;padding:6px 16px;font-size:13px;font-weight:500;margin-bottom:20px}
.miy-hero h1{font-size:clamp(28px,5vw,46px);font-weight:800;line-height:1.2;margin-bottom:16px}
.miy-hero h1 span{color:#d8c8f0}
.miy-hero p{font-size:clamp(15px,2vw,18px);color:#d8c8f0;max-width:580px;margin:0 auto 28px}
.miy-hero-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.miy-btn-white{background:#fff;color:#7454ac;font-weight:700;padding:12px 24px;border-radius:12px;font-size:14px;transition:.2s}
.miy-btn-white:hover{background:#f3eeff}
.miy-btn-outline{border:2px solid #fff;color:#fff;font-weight:700;padding:12px 24px;border-radius:12px;font-size:14px;transition:.2s}
.miy-btn-outline:hover{background:rgba(255,255,255,.15)}
.miy-stats{display:grid;grid-template-columns:repeat(3,1fr);max-width:340px;margin:36px auto 0;gap:12px;text-align:center}
.miy-stat-n{font-size:22px;font-weight:800}
.miy-stat-l{font-size:11px;color:#d8c8f0;margin-top:2px}

/* COURSES */
.miy-section{padding:0px 20px;text-align:left;}

.miy-section-title{text-align:center;font-size:font-size: clamp(20px,2vw,30px);font-weight:800;color:#9a62ff;margin-bottom:10px}
.miy-section-sub{margin-left: 100px;text-align:center;color:#fff;font-size:14px;margin-bottom:28px;width: 80%}

/* Filter */
.miy-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:32px}
.miy-filter-btn{padding:1px 18px;border-radius:14px;font-size:13px;font-weight:600;border:1px solid #9a62ff;background:#333;color:#9a62ff;cursor:pointer;transition:.2s}
.miy-filter-btn:hover{background:#000;color:#00ff10;border:1px solid #7454ac;}
.miy-filter-btn.active{background:#7454ac;color:#00ff10;border:1px dashed #00ff10;}

/* Cards */
.miy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;max-width:1100px;margin:0 auto   margin-left: 20px;  margin-right: 20px;margin-bottom: 40px;}
.miy-card{background:#333;border-radius:18px;border:1px solid #e5e7eb;padding:10px;display:flex;flex-direction:column;gap:12px;transition:.55s;position:relative}
.miy-card:hover{transform:translateY(-10px);box-shadow:0 12px 32px rgba(0,0,0,.10);}
.miy-card a{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:12px;flex:1;color:#9a62ff;}
.miy-card a:hover {
  text-decoration: none;  color: #00ff10;  display: flex;  flex-direction: column;  gap: 12px;  flex: 1; }

.miy-card-badge{position:absolute;top:5px;right:12px;color:#fff;font-size:11px;font-weight:700;border-radius:19px;width: 125px;}
.miy-card-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.miy-card-title{font-size:17px;font-weight:700;color:#111827}
.miy-card:hover .miy-card-title{color:#7454ac}
.miy-card-meta{display:flex;gap:4px;align-items:center;margin-top:-5px;text-align:center;}
.miy-card-level{font-size:11px;color:#fff;text-align:center;}
.miy-card-dur{font-size:11px;color:#9ca3af}
.miy-card-desc{font-size:13px;color:#fff;line-height:1.6;flex:1;margin-top: -15px;width: 100%;margin-left: 0%;}
.miy-card-topics{list-style:none;padding:0}
.miy-card-topics li{font-size:12px;color:#6b7280;display:flex;align-items:start;gap:6px;margin-bottom:4px}
.miy-card-topics li::before{content:"✓";color:#7454ac;font-weight:700;flex-shrink:0}
.miy-card-cta{display:flex;align-items:center;gap:4px;color:#7454ac;font-size:13px;font-weight:600;margin-top:-20px}
.miy-card[data-level*="beginner"] .miy-card-icon{background:#dbeafe}
.miy-hidden{display:none!important}

/* Benefits */
.miy-benefits-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;max-width:1000px;margin:0 auto}
.miy-benefit{display:flex;gap:16px;padding:20px;background:#f3eeff;border:1px solid #d8c8f0;border-radius:18px;transition:.2s}
.miy-benefit:hover{border-color:#7454ac}
.miy-benefit-icon{font-size:28px;flex-shrink:0}
.miy-benefit h3{font-size:15px;font-weight:700;color:#111827;margin-bottom:4px}
.miy-benefit p{font-size:13px;color:#4b5563;line-height:1.6}

/* Pricing */
.miy-pricing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;max-width:720px;margin:0 auto}
.miy-price-card{background:#fff;border-radius:18px;border:2px solid #e5e7eb;padding:28px;position:relative;overflow:hidden}
.miy-price-card.featured{border-color:#7454ac}
.miy-price-badge{position:absolute;top:0;right:0;background:#7454ac;color:#fff;font-size:11px;font-weight:700;padding:6px 14px;border-bottom-left-radius:12px}
.miy-price-title{font-size:20px;font-weight:800;color:#111827;margin-bottom:8px}
.miy-price-amount{font-size:40px;font-weight:800;color:#7454ac}
.miy-price-amount.muted{color:#374151}
.miy-price-sub{font-size:13px;color:#9ca3af;margin-bottom:16px}
.miy-price-features{list-style:none;padding:0;margin-bottom:20px}
.miy-price-features li{font-size:13px;color:#374151;display:flex;gap:8px;margin-bottom:8px}
.miy-price-features li::before{content:"✓";font-weight:700}
.miy-price-card.featured .miy-price-features li::before{color:#7454ac}
.miy-price-card:not(.featured) .miy-price-features li::before{color:#9ca3af}
.miy-btn-primary{display:block;text-align:center;background:#7454ac;color:#fff;font-weight:700;padding:12px;border-radius:12px;font-size:14px;transition:.2s}
.miy-btn-primary:hover{background:#513b79}
.miy-btn-secondary{display:block;text-align:center;border:2px solid #d1d5db;color:#374151;font-weight:700;padding:12px;border-radius:12px;font-size:14px;transition:.2s}
.miy-btn-secondary:hover{border-color:#7454ac;color:#7454ac}
.miy-price-note{text-align:center;font-size:12px;color:#9ca3af;margin-top:16px}

/* CTA / Form */
.miy-cta{background:linear-gradient(135deg,#7454ac,#513b79);padding:4px 20px;text-align:center;color:#fff;line-height: 1.2;}
.miy-cta h2{font-size:clamp(22px,4vw,34px);font-weight:800;margin-bottom:12px}
.miy-cta p{color:#d8c8f0;font-size:16px;max-width:520px;margin:0 auto 28px}
.miy-form{background:#fff;border-radius:18px;padding:24px;max-width:500px;margin:0 auto;text-align:center}
.miy-form-row{grid-template-columns:1fr 1fr;gap:14px; width:70%; background-color:#333;border: 1px solid #9a62ff;  border-radius: 20px; margin-left: 50%;  -webkit-transform: translateX(-50%);
}
.miy-form-row:hover{border: 1px solid #00ff10;  border-radius: 20px; margin-left: 50%;  -webkit-transform: translateX(-50%);
}
@media(max-width:480px){.miy-form-row{grid-template-columns:1fr}}
.miy-form label{display:block;font-size:13px;font-weight:600;color:#374151;margin-bottom:5px}
.miy-form input,.miy-form select,.miy-form textarea{width:100%;border:2px solid #e5e7eb;border-radius:10px;padding:10px 14px;font-size:14px;color:#fff;font-family:'Inter',sans-serif;outline:none;transition:.2s}
.miy-form input:focus,.miy-form select:focus,.miy-form textarea:focus{border-color:#7454ac}
.miy-form textarea{resize:none}
.miy-form-group{margin-top:14px}
.miy-submit{width:100%;background:#7454ac;color:#fff;font-weight:700;font-size:14px;padding:14px;border-radius:12px;border:none;cursor:pointer;margin-top:16px;transition:.2s;font-family:'Inter',sans-serif}
.miy-submit:hover{background:#513b79}
.miy-submit:disabled{background:#b39fd4;cursor:not-allowed}
.miy-success{background:rgba(255,255,255,.2);border-radius:18px;padding:40px 20px;text-align:center;max-width:560px;margin:0 auto}
.miy-success h3{font-size:20px;font-weight:700;margin:12px 0 8px}
.miy-success p{color:#d8c8f0}
.miy-error{color:#ef4444;font-size:13px;text-align:center;margin-top:8px}
.miy-cta-note{color:#d8c8f0;font-size:13px;margin-top:20px}

/* Footer */
.miy-footer{background:#111827;color:#9ca3af;padding:36px 20px}
.miy-footer-inner{max-width:960px;margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.miy-footer-brand strong{color:#fff;font-size:20px;font-weight:800}
.miy-footer-brand p{font-size:13px;margin-top:4px}
.miy-footer-links{display:flex;gap:20px}
.miy-footer-links a{font-size:13px;color:#9ca3af;text-decoration:none;transition:.2s}
.miy-footer-links a:hover{color:#fff}



div[id^="logo"] a {
 margin-bottom: 2px;
margin-top: 2px;
border-bottom: 1px solid #9a62ff;
}



/* ----------this is all for the Hero section---------- */

/* Centered title 2222*/
.centeredTitle2 {
color: #9a62ff;
position: absolute;
text-shadow:2px 2px 5px #000, -2px -2px 5px #000;
font-size:20px;
	font-family: 'Inter',sans-serif;
	font-weight:800;
font-style:bold;
width:800px;
left:50%;
	top:50%;
transform: translate(-50%, -50%)
}



/* page formations title end */

/* Centered text2 */
.centeredtext2 {
color: #ffffff;!important
position: absolute;
text-shadow:2px 2px 5px #000, -2px -2px 5px #000;
font-size:20px;
font-family: 'Inter',sans-serif;
		font-weight:100;
font-style:normal;
	  text-align: center;

transform: translate(0%, 0%);
}


/* Bottom left text Just in case*/
.bottom-left445 {
font-size:30px; color: #9a62ff;  position: absolute; bottom: 20px; left: 20px;
text-shadow:1px 1px 2px #000000, 1px 1px 2px #000000;
font-family: 'Inter',sans-serif;
}

/* Top right text Just in case*/
.top-right445 {
font-size:30px; color: #9a62ff; position: absolute; top: 20px; right: 20px;
font-family: 'Inter',sans-serif;
}

/* Top left text -----------used */
.top-left445 {
font-size:25px; color: #fff; position: absolute; top: 6px; left: 20px;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
font-family: 'Inter',sans-serif;
font-weight:600;
line-height:25px;
text-align:left;
}

/* Bottom right text -----------used */
.bottom-right445 {
font-size:25px; color: #fff; position: absolute; bottom:6px; right: 20px;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
font-family: 'Inter',sans-serif;
font-weight:600;
line-height:25px;
text-align:right;
}


/* Hero background passes --background image url to CSS */
.ryoo-bg5 {
background-attachment: fixed !important; 
min-height:100px !important;
position: relative;
text-align: center;
overflow: hidden;
filter:sepia(0.0);
height: 350px;
  --circle_w: 2px;
  --circle_color: black;
  --bg_color: transparent;
  --m_bet_circle: 2px;
  --A: calc(var(--circle_w) + var(--m_bet_circle));
  --B: calc(var(--circle_w) / 2);
background: 0 0/var(--A) var(--A) radial-gradient(circle at center, var(--circle_color) var(--B), var(--bg_color) var(--B)), center/cover var(--background ) no-repeat;
background-position:50% 0px;

}


.ryoo-bg6 {
background-attachment: fixed !important; 
min-height:100px !important;
position: relative;
	color:#fff !important;
text-align: center;
overflow: hidden;
height: 200px;
filter: sepia(0.4); 
  --circle_w: 2px;
  --circle_color: black;
  --bg_color: transparent;
  --m_bet_circle: 2px;
  --A: calc(var(--circle_w) + var(--m_bet_circle));
  --B: calc(var(--circle_w) / 2);
background: 0 0/var(--A) var(--A) radial-gradient(circle at center, var(--circle_color) var(--B), var(--bg_color) var(--B)), center/cover var(--background) no-repeat;
background-position:50% 0px;
	
}
/* ----------this is all for the Hero section---------- */



	
</style>