@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");



@font-face {
  font-family: 'Metropolis-Black'; /* A name you choose to use later in your CSS */
  src: url('../fonts/metropolis/Metropolis-Black.otf') format('opentype'); /* Path to your font file(s) */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Helps prevent render-blocking */
}
@font-face {
  font-family: 'Metropolis-BlackItalic'; /* A name you choose to use later in your CSS */
  src: url('../fonts/metropolis/Metropolis-BlackItalic.otf') format('opentype'); /* Path to your font file(s) */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Helps prevent render-blocking */
}
@font-face {
  font-family: 'Metropolis-Bold'; /* A name you choose to use later in your CSS */
  src: url('../fonts/metropolis/Metropolis-Bold.otf') format('opentype'); /* Path to your font file(s) */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Helps prevent render-blocking */
}
@font-face {
  font-family: 'Metropolis-BoldItalic'; /* A name you choose to use later in your CSS */
  src: url('../fonts/metropolis/Metropolis-BoldItalic.otf') format('opentype'); /* Path to your font file(s) */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Helps prevent render-blocking */
}
@font-face {
  font-family: 'Metropolis-ExtraBold'; /* A name you choose to use later in your CSS */
  src: url('../fonts/metropolis/Metropolis-ExtraBold.otf') format('opentype'); /* Path to your font file(s) */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Helps prevent render-blocking */
}
@font-face {
  font-family: 'Metropolis-ExtraBoldItalic'; /* A name you choose to use later in your CSS */
  src: url('../fonts/metropolis/Metropolis-ExtraBoldItalic.otf') format('opentype'); /* Path to your font file(s) */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Helps prevent render-blocking */
}
@font-face {
  font-family: 'Metropolis-ExtraLight'; /* A name you choose to use later in your CSS */
  src: url('../fonts/metropolis/Metropolis-ExtraLight.otf') format('opentype'); /* Path to your font file(s) */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Helps prevent render-blocking */
}
@font-face {
  font-family: 'Metropolis-ExtraLightItalic'; /* A name you choose to use later in your CSS */
  src: url('../fonts/metropolis/Metropolis-ExtraLightItalic.otf') format('opentype'); /* Path to your font file(s) */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Helps prevent render-blocking */
}
@font-face {
  font-family: 'Metropolis-Light'; /* A name you choose to use later in your CSS */
  src: url('../fonts/metropolis/Metropolis-Light.otf') format('opentype'); /* Path to your font file(s) */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Helps prevent render-blocking */
}
@font-face {
  font-family: 'Metropolis-LightItalic'; /* A name you choose to use later in your CSS */
  src: url('../fonts/metropolis/Metropolis-LightItalic.otf') format('opentype'); /* Path to your font file(s) */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Helps prevent render-blocking */
}
@font-face {
  font-family: 'Metropolis-Medium'; /* A name you choose to use later in your CSS */
  src: url('../fonts/metropolis/Metropolis-Medium.otf') format('opentype'); /* Path to your font file(s) */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Helps prevent render-blocking */
}
@font-face {
  font-family: 'Metropolis-MediumItalic'; /* A name you choose to use later in your CSS */
  src: url('../fonts/metropolis/Metropolis-MediumItalic.otf') format('opentype'); /* Path to your font file(s) */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Helps prevent render-blocking */
}
@font-face {
  font-family: 'Metropolis-Regular'; /* A name you choose to use later in your CSS */
  src: url('../fonts/metropolis/Metropolis-Regular.otf') format('opentype'); /* Path to your font file(s) */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Helps prevent render-blocking */
}
@font-face {
  font-family: 'Metropolis-RegularItalic'; /* A name you choose to use later in your CSS */
  src: url('../fonts/metropolis/Metropolis-RegularItalic.otf') format('opentype'); /* Path to your font file(s) */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Helps prevent render-blocking */
}
@font-face {
  font-family: 'Metropolis-SemiBold'; /* A name you choose to use later in your CSS */
  src: url('../fonts/metropolis/Metropolis-SemiBold.otf') format('opentype'); /* Path to your font file(s) */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Helps prevent render-blocking */
}
@font-face {
  font-family: 'Metropolis-SemiBoldItalic'; /* A name you choose to use later in your CSS */
  src: url('../fonts/metropolis/Metropolis-SemiBoldItalic.otf') format('opentype'); /* Path to your font file(s) */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Helps prevent render-blocking */
}
@font-face {
  font-family: 'Metropolis-Thin'; /* A name you choose to use later in your CSS */
  src: url('../fonts/metropolis/Metropolis-Thin.otf') format('opentype'); /* Path to your font file(s) */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Helps prevent render-blocking */
}
@font-face {
  font-family: 'Metropolis-ThinItalic'; /* A name you choose to use later in your CSS */
  src: url('../fonts/metropolis/Metropolis-ThinItalic.otf') format('opentype'); /* Path to your font file(s) */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Helps prevent render-blocking */
}








html, 
body {
	background-color: #000;
	font-size: 20px;
}



body {
padding-top: 0 !important;
padding-bottom: 0 !important;
color: #fff !important;
}
div {
    display: block;
    margin: 0 auto;
    width: 100%;
}
img, svg, video, canvas, audio, iframe, embed, object {
display: block;
vertical-align: middle;
}





/*****************************************************  HEADER  *******************************************************/

.header-div{
	background-color: #000;
	font-family: "Metropolis-Medium", Arial, sans-serif; /* Use your custom font with fallbacks */
	font-size: 20px;
}
.header-div .mb-4 {
margin-bottom: 0 !important;
	border-bottom: none !important;
}
.nav-link { 
	color: #fff !important; 
}
.nav-link:focus, .nav-link:hover {
	color: RGBA(86,94,100,var(--bs-link-opacity,1))!important;
-webkit-text-decoration-color: RGBA(86,94,100,var(--bs-link-underline-opacity,1))!important;
text-decoration-color: RGBA(86,94,100,var(--bs-link-underline-opacity,1))!important;
}
.nav-item a, .nav-link a {
  color: #fff !important;
}

.navbar-toggler{
border: 1px solid #ffcc00;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 204, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.yellow-signup-bar{
    display: block;
    margin: 0 auto;
	padding: 0;
    width: 100%;
}
.yellow-signup-bar .signup-bar-bg{
	background-color: #ffcc00;
	padding: 10px 0;
}
.yellow-signup-bar .signup-bar-bg .signup-bar-content{
    display: block;
    margin: 0 auto;
    width: 100%;
	text-align: center;
	color: #000;
}
.yellow-signup-bar .signup-bar-bg .signup-bar-content a{
	font-family: "Metropolis-Bold", Arial, sans-serif; /* Use your custom font with fallbacks */
	font-size: 16px;
	font-weight: bold;
    line-height: 27px;
    color: #000;
    text-transform: uppercase;
	text-decoration: none;
padding-right: 1.5rem!important;
padding-left: 1.5rem!important;
} 

.header-div .btn:hover {
color: #000;
background-color: #ffcc00;
border-color: #ffcc00;
}

.px-2{
padding-right: 1.5rem!important;
padding-left: 1.5rem!important;
}
.btn-primary {
background-color: transparent;
background-bg: transparent;
background-border-color: transparent;
background-hover-color: transparent;
background-hover-bg: transparent;
background-hover-border-color: transparent;
background-focus-shadow-rgb: transparent;
background-active-color: transparent;
background-active-bg: transparent;
background-active-border-color: transparent;
background-active-shadow: inset 0 3px 5px transparent;
background-disabled-color: transparent;
background-disabled-bg: transparent;
background-disabled-border-color: transparent;
	border: none;
	font-family: "Metropolis-Medium", Arial, sans-serif; /* Use your custom font with fallbacks */
	font-size: 20px;
}



/*****************************************************  HOMEPAGE JUMBOTRON  *******************************************************/
.overflow-hidden {
overflow: hidden;
}
.justify-center {
justify-content: center;
}
.items-center {
align-items: center;
}
.w-full {
width: 100%;
}
.min-h-screen {
min-height: 100vh;
}
.flex {
display: flex;
}
.relative {
position: relative;
}




.object-cover {
object-fit: cover;
}
.w-full {
width: 100%;
}
.h-full {
height: 100% !important;
}
.inset-0 {
inset: 0;
}
.absolute {
position: absolute;
}




.text-center {
text-align: center;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.items-center {
align-items: center;
}
.flex-col {
flex-direction: column;
}
.max-w-4xl {
max-width: 56rem;
}
.flex {
display: flex;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.z-10 {
z-index: 10;
}



.jumbotron-image {
    background-image:url("../../images/featured-image.jpg"); /* Replace with your image URL */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; /* Ensures the image covers the entire div */
    color: #000000; /* Makes text white for better contrast */
    text-shadow: 2px 2px 4px #000000; /* Optional: Adds shadow for readability */
	text-transform: uppercase;
	text-align: center;
    /* min-height: 400px; Optional: Set a minimum height if needed */
}

.jumbotron-image .btn:hover {
color: #000 !important;
background-color: #ffcc00;
border-color: #ffcc00;
}





.mm-button {
transition-property: all;
transition-duration: .15s;
	font-family: "Metropolis-Bold", Arial, sans-serif; /* Use your custom font with fallbacks */
	font-size: 20px;
	font-weight: bold;
line-height: 1.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 5rem;
padding-right: 5rem;
opacity: 1;
background-color: #000;
border-radius: 9999px;
justify-content: center;
align-items: center;
display: inline-flex;
color: #ffcc00 !important;
text-decoration: none!important;
	margin-top: 60px;
}



/*****************************************************  HOMEPAGE ABOUT  *******************************************************/
.container-fluid.marketing {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.section-profile{
	background-image: url("../../images/man-img.png");
	background-size: cover;
	background-position: top left;
    background-color:#000;
    color:#fff;
}
.section-profile .container-fluid {
}

.profile-img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.profile-content{
    padding:80px 60px;
}

.profile-title{
    color:#FFC107;
    font-weight:700;
    font-size:3rem;
    margin-bottom:25px;
}

.profile-content p{
    font-size:1.05rem;
    line-height:1.8;
    margin-bottom:20px;
}

.read-more{
    color:#FFC107;
    text-decoration:none;
}

.read-more:hover{
    text-decoration:underline;
}

@media (max-width: 992px){

    .profile-content{
        padding:40px 30px;
    }

    .profile-title{
        font-size:2rem;
    }

}




/*****************************************************  HOMEPAGE 3 BOES  *******************************************************/

.mm-three-col{
	background-image: url("../../images/classroom.png");
}

.mm-three-col .card {
padding: 1rem;
	background-color: #000;
}
.mm-three-col .card .card-title {
color: #fff;
font-family: "Metropolis-Bold", Arial, sans-serif;
font-size: 28px;
font-weight: 900;
margin: 5px auto 20px;
}
.mm-three-col .card .img-fluid {
border: 1px solid #ffcc00;
}
.mm-three-col .card .btn-yellow {
background-color: #ffcc00;
color: #000;
padding: 0rem 3.5rem;
border-radius: 9999px;
font-weight: 900;
margin-top: 10px;
}








/*****************************************************  MAIN CONTENT  *******************************************************/
.main-content {
margin: 5rem auto;
}








/*****************************************************  SINGLE PAGE  *******************************************************/

.single-jumbotron-image{
position:relative;
color:white;
}

.single-jumbotron-image::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);
}

.single-jumbotron-image .container{
position:relative;
z-index:2;
}





/*****************************************************  FORM STYLE  *******************************************************/

/* FORM WRAPPER */

.wpcf7-form{
max-width:700px;
margin:auto;
}

/* LABELS */

.wpcf7-form label{
display:block;
font-weight:600;
margin-bottom:20px;
color:#000;
font-size:14px;
}

/* INPUTS */

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea{
width:100%;
padding:14px 16px;
margin-top:8px;
border-radius:6px;
border:1px solid #ddd;
background:#fff;
font-size:16px;
transition:all .25s ease;
}

/* TEXTAREA */

.wpcf7-form textarea{
min-height:150px;
resize:vertical;
}

/* INPUT FOCUS */

.wpcf7-form input:focus,
.wpcf7-form textarea:focus{
outline:none;
border-color:#f4b000;
box-shadow:0 0 0 2px rgba(244,176,0,.25);
}

/* SUBMIT BUTTON */

.wpcf7-submit{
background:#e62828;
color:#fff;
border:none;
padding:14px 40px;
font-weight:700;
border-radius:30px;
cursor:pointer;
transition:.3s;
margin-top:10px;
}

.wpcf7-submit:hover{
background:#ff3c3c;
}

/* RESPONSE MESSAGE */

.wpcf7-response-output{
margin-top:20px;
padding:12px;
border-radius:6px;
font-size:14px;
}

/* SUCCESS */

.wpcf7-mail-sent-ok{
background:#0c8c4c;
color:#fff;
border:none;
}

/* ERROR */

.wpcf7-validation-errors,
.wpcf7-acceptance-missing{
background:#c92b2b;
color:#fff;
border:none;
}

/* SPINNER */

.wpcf7-spinner{
margin-left:10px;
}









/*****************************************************  ABOUT PAGE  *******************************************************/

.about-page {
	max-width: 1140px;
}
.about-page img {
	float:left;
	margin-right: 60px;
}





/*****************************************************  RESOURCES POST LIST  *******************************************************/
.mm-blog-post{
	padding: 3rem!important;
	background-color: #ffffff!important;
	color: #000!important;
margin-bottom: 4rem!important;
	border-radius: 7.5px;
transition:all .3s ease;
}

.mm-blog-post:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.mm-blog-post h2.mm-blog-post-title{
	font-size: 40px;
	font-style: italic!important;
	font-weight: 300;
	line-height: 1.2;
	margin-top: 0;
margin-bottom: .5rem;
	text-transform: uppercase;
}

.mm-blog-post h2.mm-blog-post-title a {
	color: #000!important;
	font-size: 30px;
	font-style: italic!important;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}
.mm-blog-post p.mm-blog-post-meta {
	margin-bottom: .25rem!important;
	font-size: 16px;
font-weight: 100 !important;
line-height: 1.5;
}
.mm-blog-post p.mm-blog-post-meta a {
	color: #000!important;
	text-decoration: none;
}
.mm-blog-post p {
margin-top: 1rem!important;
margin-bottom: 1rem!important;
font-size: 20px;
font-weight: 300;
}
.mm-blog-post p {
font-weight: 500!important;
	font-size: 20px;
	line-height: 1.5;
}






/*****************************************************  ARTICLES/BLOGS  *******************************************************/


.news-img-wrapper{
position:relative;
overflow:hidden;
}

.news-img{
transition:transform .4s ease;
}

.news-card:hover .news-img{
transform:scale(1.08);
}

.news-category{
position:absolute;
top:10px;
left:10px;
background:#0d6efd;
color:#fff;
padding:4px 10px;
font-size:12px;
border-radius:3px;
}

.news-card{
transition:all .3s ease;
}

.news-card:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

#load-more.btn:hover {
color: #000;
background-color: #ffcc00;
border-color: #ffcc00;
}

section.main-content article a.read_more_btn {
	color:#ffcc00;
	text-decoration: none;
background-color: #000;
	padding: 10px 15px;
	text-align: center;
	border-radius: 5px;
}

section.main-content article a.read_more_btn:focus,  section.main-content article a.read_more_btn:hover {
	color:#000;
	text-decoration: none;
background-color: #ffcc00;
	padding: 10px 15px;
	text-align: center;
}






/*****************************************************  PAGINATION  *******************************************************/

.pagination {
  /* Your styles here (e.g., color, padding, margin, border-radius) */
	
  display: flex;
  justify-content: center;
  list-style: none; /* remove list bullets */
  padding: 0px;
}
.page-numbers {
  /* Your styles here (e.g., color, padding, margin, border-radius) */
	
  display: block; /* let links fill the list item */
  padding: 8px 12px;
  text-decoration: none;
  border: 1px solid #ffcc00;
  color: #ffcc00;
  margin: 0 4px;
  border-radius: 5px; /* add rounded borders */
}
.page-numbers.current, .page-numbers:focus, .page-numbers:hover {
  /* Highlight styles here (e.g., background-color, font-weight) */
  background-color: #ffcc00;
  color: #000 !important;
}
a.prev.page-numbers,
a.next.page-numbers {
  /* Arrow or label styles here */
	
  display: block; /* let links fill the list item */
  padding: 8px 12px;
  text-decoration: none;
  border: 1px solid #ffcc00;
  color: #ffcc00;
  margin: 0 4px;
  border-radius: 5px; /* add rounded borders */
}





/*****************************************************  FOOTER  *******************************************************/

footer .my-5 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}

footer li {
	text-align: center;
	list-style: none;
}
footer li a {
text-decoration: none;
font-size: 20px;
	color: #fff;
}
.footer-four h5.mb-4{
	text-align: center !important;
font-size: 20px;
}



/*****************************************************  MEDIA QUERIES  *******************************************************/

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.header-div-container {
		max-width: 1140px;
	}
	.mm-jumbotron-img img{
		justify-content: center;
		flex: content;
	}
	
}


@media (min-width: 992px) {
	body > div > div.container > header > button {
		display: none;
	}
	
}

@media (min-width:1024px) {
}


@media (max-width:1440px) {

}


@media (max-width:1200px) {
.mm-three-col .container {
max-width: 1140px;
}
	
	.about-page img {
float: none !important;
margin: 0 auto 60px!important;
		text-align: center;
}
}


@media (max-width:1024px) {
}

	@media (min-width: 990px) and (max-width: 1199px) {
	
.mm-three-col .container .row {
	margin: 0!important;
}
.btn-yellow {
padding: 0rem 2.5rem!important;
}
}

@media (max-width:992px) {
	body > div > div.container > header > button {
		position: absolute;
		top:20px;
		right: 20px;
	}
.header-div-logo-wrapper {
flex: 0 0 auto;
width: 100%!important;
}
	body > div > div.container > header > div.col-md-3.text-end {
		display: none;
	}

}

	@media (min-width: 769px) and (max-width: 990px) {
.btn-yellow {
padding: 5px 13px!important;
}
		.mm-three-col .card .card-title {
font-size: 23px;
}
}

@media (max-width:990px) {
	.navbar {
/* position: absolute; */
/* top: 0; */
/* left: 50%; */
background-color: #000;
/* border: 1px solid #fff; */
width: 100%;
text-align: center;
margin: 0;
padding: 0;
}
	body > div > div.container {
		max-width: 100%;
	}
	body > main > div.relative.min-h-screen.w-full.flex.items-center.justify-center.bg-cover.bg-center.bg-fixed.mm-three-col > div {
		max-width: 100%;
	}
	body > main > div.relative.min-h-screen.w-full.flex.items-center.justify-center.bg-cover.bg-center.bg-fixed.mm-three-col > div > section > div{
		max-width: 100%;
		padding: 0;
		margin: 0;
	}
	body > main > section.main-content > div{
		max-width: 100%;
	}
	body > main > section.main-content > div > div {
		max-width: 100%;
		padding: 0;
		margin: 0;
	}
	body > main > section.main-content > div > div > div > div{
		max-width: 100%;
	}
	#news-container{
		max-width: 100%;
		padding: 0;
		margin: 0;
	}
	
	.mm-three-col .card .btn-yellow {
padding: 0rem 1.5rem;
}
	.main-content {
margin: 5rem auto 0;
}

}


@media (max-width: 767px) {
	body > div > div.container > header > div.col-md-3.mb-2.mb-md-0{
		margin: 0!important;
	}
	
	body > main > footer > div > footer > div > div{
		margin: 0 auto !important;
		padding: 0!important;
	}
	
	.footer-one {
		margin-bottom: 3rem;
	}
	.footer-four {
		margin-top: 3rem;
	}
	
	body > div > div.container > header > div.col-md-3.text-end {
		display: none;
	}
	
body > main > section.main-content > div > div{
display: block;
margin: 0 !important;
width: 100%;
padding: 0 !important;
}
	
	.about-page img {
float: none !important;
margin: 0 auto 60px!important;
		text-align: center;
}
	.mm-three-col .mb-4:first-child {
margin-top: 1.5rem!important;
}
	.mm-three-col .card .img-fluid {
		margin: 0 auto!important;
}
	
}


@media (max-width:640px) {

}


@media (max-width:580px) {
	.jumbotron-wrapper {
		padding: 0!important;
	}
    .mm-button {
		
padding-left: 2.5rem!important;
padding-right: 2.5rem!important;
	}
}


@media (max-width:580px) {

}


@media (max-width:480px) {

}


@media (max-width:320px) {

}