@charset "UTF-8";

/*
Theme Name: Schoolnet
Theme URI:
Author: @nkatsigazi
Author URI: https://wordpress.org/
Description: Schoolnet websites theme.
Text Domain: snet
*/

:root {
    --primary-color: #0db1c4; /* Dark blue-gray for a matte, professional look */
    --secondary-color: #f7942f; /* Slightly lighter blue-gray */
    --text-color: #23282d; /* Soft off-white text */
    --link-hover-color: #bdc3c7; /* Muted gray for hover */
    --button-bg: #27ae60; /* Subdued green for CTAs */
    --button-hover-bg: #219d55; /* Darker green hover */
    --light-bg: #d4f2f5;
    --shadow-color: rgba(0, 0, 0, 0.2);
    --flag-size: 20px;
    --footer-bg-dark: #212121;
    --footer-bg-light: #2c2c2c;
    --footer-text-color: #e0e0e0;
    --footer-link-color: #b0b0b0;
    --footer-link-hover: #ffb32d;
    --footer-border-color: #4a4a4a;
    --footer-icon-bg: #424242;
    --footer-icon-color: #ffffff;
    --transition-speed: 0.3s;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

a {
    text-decoration: none;
}

body {
    background-color: #fbfbfb;
    overflow-x: hidden;
}
html {
  scroll-behavior: smooth;
}
#breadcrumbs {
    background: #d2faff;
    margin: 0;
    padding: 25px 0;
    border-bottom: 5px solid #0eb2c5;
    color: #3d3d3d;
    font-weight: 400;
}
#breadcrumbs a {
    color: #0eb2c5;
    font-weight: 400;
}
p {
    margin: 15px 0;
}

ol, ul { margin-left: 30px; }

.alignleft {
    float: left;
}
.wp-caption-text {
    font-size: 12px;
    margin-bottom: 18px;
}

.ibox-column, 
.featured-container, 
.resources .resource {
  will-change: transform, opacity;
}

.home #featured {
    background: #effeff;
}

h1 {
    color: #000;
    line-height: 60px;
    margin-bottom: 10px;
    overflow: hidden;
    font-size: 50px;
}

/* === HEADING STYLE #2 === */
.snet-title h2 {
  position: relative;
  padding: 0;
  margin: 0;
  font-weight: 600;
  font-size: 32px;
  line-height: 30px;
  margin-bottom: 30px;
  text-align: left;
  color: #ffffff;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.snet-title.black h2 {
    color: #000;
}
.snet-title h2 {
  padding-bottom: 5px;
}
.snet-title h2:before {
  width: 28px;
  height: 5px;
  display: block;
  content: "";
  position: absolute;
  bottom: 3px;
  /*left: 50%;
  margin-left: -14px;*/
  background-color: #0db1c4;
}
.snet-title h2:after {
  width: 100px;
  height: 1px;
  display: block;
  content: "";
  position: relative;
  margin-top: 25px;
  /*left: 50%;
  margin-left: -50px;*/
  background-color: #0db1c4;
}
.p-6 {
    padding: 6rem 0;
}
.p-4 {
    padding: 4rem 0;
}
.p-3 {
    padding: 3rem 0;
}
.mt-4 {
    margin-top: 4rem;
}
.mb-4 {
    margin-bottom: 4rem;
}

.wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}
.counter-container {
    position: relative;
    background-size: cover;
    background-position: center;
}

/* BUTTONS */
.btn-box {
	height: 33.33%;
	width: 100%; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-1 { background-color: rgba(13, 179, 197, 0); }
.box-3 { background-color: rgba(247, 147, 47, 0); }
.btn {
    font-size: 14px;
	line-height: 35px;
	height: 35px;
	text-align: center;
	padding: 0px 10px;
	cursor: pointer;
}
.btn-one {
	color: #000;
    font-weight: 400;
	transition: all 0.3s;
	position: relative;
}
.btn-box:hover .btn-one {
	color: #26bacb;
}
.btn-one span {
	transition: all 0.3s;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.btn-one span img {
    width: 25px !important;
    margin-right: 5px;
    background: #ce532b;
    padding: 3px;
    border-radius: 6px;
    margin-top: -3px;
    filter: invert(1);
}
.btn-one::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	transition: all 0.3s;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: rgb(38 186 203);
	border-bottom-color: rgb(38 186 203);
	transform: scale(0.1, 1);
}
.btn-one:hover span {
	letter-spacing: 0.4px;
}
.btn-one:hover::before {
	opacity: 1;	
	transform: scale(1, 1);	
}
.btn-one::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	transition: all 0.3s;
	background-color: rgba(255,255,255,0.1);
}
.btn-one:hover::after {
	opacity: 0;	
	transform: scale(0.1, 1);
}

.btn-three {
	color: #FFF;
	transition: all 0.5s;
	position: relative;
}
.box-3:hover .btn-three {
    color: #0eb2c5;
}
.btn-three::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: #0eb2c5;
	transition: all 0.3s;
    border-radius: 6px;
}
.btn-three:hover::before {
	opacity: 0 ;
	transform: scale(0.5,0.5);
}
.btn-three::after {
	content: '';
	position: absolute;
	top: -2px;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	transition: all 0.3s;
	border: 2px solid #0eb2c5;
	transform: scale(1.2,1.2);
    border-radius: 6px;
}
.btn-three:hover::after {
	opacity: 1;
	transform: scale(1,1);
}
.btn-three span {
    z-index: 2;
    position: relative;
}

/* SCHOOL BOXES */
.featured-sch {
    box-shadow: 0 0 12px 0px rgb(51 51 51 / 12%);
    margin-bottom: 12px;
    border-radius: 5px;
    overflow: hidden;
    padding-bottom: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.img-section {
    position: relative;
}
.cpt-tabs-wrapper .cover-img {
    height: 200px;
    width: 100%;
    object-fit: cover;
}
.img-section-content {
    position: absolute;
    top: 0;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    background: linear-gradient(rgb(0 0 0 / 66%), transparent);
}
.cpt-tabs-wrapper .logo-img {
    width: 100px !important;
    height: 100px;
    object-fit: cover;
    z-index: 1;
    position: relative;
    border-radius: 50%;
    box-shadow: 0 0 15px 1px #33333366;
}
.float-right {
    display: flex;
    flex-direction: column;
    align-items: end;
    height: fit-content;
}
.main-term {
    background: #fff;
    color: #000;
    font-size: 13px;
    padding: 5px 15px 3px;
    margin-top: 10px;
    display: block;
    border-radius: 30px;
    text-transform: uppercase;
    font-weight: 600;
}
.title-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 15px 10px 0;
    align-items: center;
    height: 100%;
}
.title-section h4 {
    width: 100%;
    font-weight: 400;
    text-transform: uppercase;
}
.title-section p {
    width: 100%;
    font-size: 14px;
    color: #707070;
    font-weight: 300;
    margin-bottom: 10px;
    margin-top: 3px;
}
.title-section a {
    width: fit-content;
    display: block;
}

/* OWL SLIDER */
.owl-carousel .owl-stage {
    display: flex;
}
.owl-carousel .owl-item {
    display: flex;
    flex: 1 0 auto;
}
.owl-nav {
    position: absolute;
    top: -55px;
    right: 0;
}
.owl-carousel .owl-nav button.owl-next, 
.owl-carousel .owl-nav button.owl-prev {
    font-size: 60px !important;
    background: var(--light-bg) !important;
    line-height: 0 !important;
    height: 40px;
    width: 40px;
    border-radius: 50%;
}
.owl-carousel .owl-nav button.owl-next:hover, 
.owl-carousel .owl-nav button.owl-prev:hover {
    background: var(--primary-color)
}
.owl-carousel .owl-nav button.owl-prev {
    margin-right: 12px;
}
.owl-carousel .owl-nav button.owl-next span, 
.owl-carousel .owl-nav button.owl-prev span {
    line-height: 0;
    display: block;
    top: -3px;
    position: relative;
    transition: .3s ease;
}
.owl-carousel .owl-nav button.owl-next:hover span, 
.owl-carousel .owl-nav button.owl-prev:hover span{
    transform: rotateX(45deg);
}

/* Events */
#snet-event-archive,
#snet-event-category,
#snet-event-single {
    margin: 70px 0;
}
.snet-main-content h1 {
    font-size: 36px;
    font-weight: 700;
    color: #111827;
    text-align: center;
    margin-bottom: 16px;
}

.snet-main-content p.intro {
    font-size: 18px;
    color: #4b5563;
    text-align: center;
    max-width: 672px;
    margin: 0 auto 64px;
}

.snet-event-list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 32px;
    margin-bottom: 48px;
}

@media (min-width: 768px) {
    .snet-event-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.snet-event-list .event {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
    overflow: hidden;
    position: relative;
}
.snet-event-list .event:hover {
    background: #cffaff;
}
.snet-event-list .event:hover {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
}

.snet-event-list .event img {
    width: 100%;
    height: 256px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.snet-event-list .event:hover img {
    transform: scale(1.05);
}

.snet-event-list .event .date-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border-radius: 12px;
    padding: 8px 12px;
    text-align: center;
}

.snet-event-list .event .date-badge .day {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
}

.snet-event-list .event .date-badge .month {
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;
}

.snet-event-list .event .des {
    padding: 15px 24px;
}

.snet-event-list .event .des h5 {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 8px;
}

.snet-event-list .event .des h5 a {
    color: #111827;
    text-decoration: none;
}
.snet-event-list .event .des h5 a:hover {
    color: #0eb2c5;
}
.snet-event-list .event .des p {
    font-size: 14px;
    margin-top: 0;
    color: #4b5563;
}

.snet-see-more {
    text-align: center;
}

.snet-see-more button {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.snet-see-more button:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.snet-see-more button svg {
    margin-left: 8px;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.snet-pagination,
#schools-pagination {
    margin: 48px 0;
    text-align: center;
}

.snet-pagination .page-numbers,
#schools-pagination .page-numbers, 
.pagination a {
    padding: 5px 10px;
    margin: 0 5px;
    background: #d4d4d4;
    color: #000;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.3s ease;
}

.snet-pagination .page-numbers:hover,
#schools-pagination .page-numbers:hover,
.pagination a:hover {
    background: #0eb2c5;
}

.snet-pagination .current,
#schools-pagination .current, 
.pagination .current {
    background: #0eb2c5;
    color: #fff;
    padding: 5px 10px;
    margin: 0 5px;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.3s ease;
}

.snet-event-single {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
}

.snet-event-details {
    margin-top: 20px;
}

.snet-event-title {
    font-size: 28px;
    color: #222;
    margin-bottom: 15px;
}

.snet-event-description {
    line-height: 1.6;
    color: #444;
}

.snet-event-meta p {
    margin: 8px 0;
    color: #666;
}

@media( max-width: 768px ){

    .snet .post-meta {
        flex-direction: column;
        align-items: baseline;
    }

}

.banner-box {
    width: 100%;
    height: 200px;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 7px;
    align-content: center;
    box-shadow: 0 0 14px 1px #d8d8d8;
    margin: 10px 2px;
    padding: 20px;
}
.banner-box h3 {
    font-size: 26px;
    color: #f7942f;
    text-shadow: 1px 1px #ffffff;
}
.banner-box a {
    color: #ffffff;
    border-bottom: 2px solid #ffffff;
    font-weight: 500;
}

/* Featured Schools Buttons */
.view-all-wrapper {
    display: flex;
    justify-content: center;
    gap: 15px;
}
.view-all-wrapper .btn-box {
    width: fit-content;
}
body .view-all-wrapper .snet-add-school {
    color: #FFF;
    transition: all 0.5s;
    position: relative;
    font-size: 14px;
    line-height: 35px;
    height: 35px;
    text-align: center;
    padding: 0px 10px;
    cursor: pointer;
    background: #f7942f;
}