/********************************************************
	Template Source: HTML5
	Powered by: Thierry Barata
	Envato Profile: https://themeforest.net/user/trendytheme
	Website: http://trendytheme.net
	Version: 1.0
	Support: http://trendytheme.net/support
*********************************************************/



/*
====================================
[ CSS TABLE CONTENT ]
------------------------------------
	1.0 - General
	2.0 - header Style
	3.0 - Fun fact
	4.0 - Testimonial
	5.0 - According
	6.0 - Future Box
	7.0 - About Us
	8.0 - Team Member
	9.0 - Career Page
	10.0 - Case Studies
	11.0 - Customer Info
	12.0 - Terms & Conditions
	13.0 - Contact 
	14.0 - Blog
	15.0 - Focus 
	16.0 - Footer
	

-------------------------------------
[ END CSS TABLE CONTENT ]
=====================================
*/



/* ================= General ==================== */
body{
	font-family: 'Montserrat', sans-serif;
	font-size: 17px;
	line-height: 27px;
	font-weight: 400;
	color: #000000;
	background-color: #fff;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	-webkit-overflow-scrolling: touch;
	-webkit-font-smoothing: antialiased !important;
}
html {
	font-family: 'Montserrat', sans-serif !important;
}
html,
body{
	width: 100%;
	height: 100%;
}
/* Link style
/* ------------------------------ */
a{
	color: #212121;
}
a,
a > *{
	outline: 0;
	cursor: pointer;
	text-decoration: none;
}
a:focus,
a:hover{
	color: #10235e;
	outline: none;
	text-decoration: none;
}

a[href^="tel"]{
    color:inherit;
    text-decoration:none;
}

/* Transition elements
/* ------------------------------ */
a,
button,
.transition{
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 03s ease;
	transition: all 0.3s ease;
}
/* ================ Typography ================== */
h1, h2, h3, h4, h5, h6{
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: #10235e;
	margin: 0 0 15px;
}
h1{
	font-size: 50px;
}
h2{
	font-size: 30px;
}
h3{
	font-size: 20px;
}
h4{
	font-size: 16px;
}
h5{
	font-size: 14px;
}
h6{
	font-size: 12px;
}
p{
	margin: 0 0 15px;
}

/* ================= Global Classes ==================== */

/* -- margin-top -- */
.mt-10{
	margin-top: 10px;
}
.mt-20{
	margin-top: 20px;
}
.mt-30{
	margin-top: 30px;
}
.mt-35{
	margin-top: 35px;
}
.mt-40{
	margin-top: 40px;
}
.mt-50{
	margin-top: 50px;
}
.mt-70{
	margin-top: 70px;
}



/* -- margin-right -- */

.mr-10{
	margin-right: 10px;
}
.mr-15{
	margin-right: 15px;
}
.mr-30{
	margin-right: 30px;
}

/*margin left*/
.ml-10{
	margin-left: 10px;
}
.ml-15{
	margin-left: 15px;
}
.ml-20{
	margin-left: 20px;
}
.ml-30{
	margin-left: 30px;
}

/* -- margin-bottom -- */
.mb-0{
	margin-bottom: 0;
}
.mb-10{
	margin-bottom: 10px;
}
.mb-15{
	margin-bottom: 15px;
}
.mb-20{
	margin-bottom: 20px;
}
.mb-30{
	margin-bottom: 30px;
}
.mb-40{
	margin-bottom: 40px;
}
.mb-50{
	margin-bottom: 50px;
}
.mb-60{
	margin-bottom: 60px;
}
.mb-70{
	margin-bottom: 70px;
}
.mb-80{
	margin-bottom: 80px;
}

/*-- padding left --*/
.pdl{
	padding-left: 10px;
}
.pdl-20{
	padding-left: 20px;
}
/*padding right*/
.pdr-10{
	padding-right: 10px;
}
.pdr-20{
	padding-right: 20px;
}
.pdr-30{
	padding-right: 30px;
}

/*padding bottom*/
.pdb-10{
	padding-bottom: 10px;
}
.pdb-20{
	padding-bottom: 20px;
}
.pdb-30{
	padding-bottom: 30px;
}
.pdb-40{
	padding-bottom: 40px;
}
.pdb-50{
	padding-bottom: 50px;
}
.pdb-60{
	padding-bottom: 60px;
}
.pdb-70{
	padding-bottom: 70px;
}
.pdb-80{
	padding-bottom: 80px;
}
.pdb-90{
	padding-bottom: 90px;
}
.pdb-100{
	padding-bottom: 100px;
}
 /*padding top*/
.pdt-10{
	padding-top: 10px;
}
.pdt-20{
	padding-top: 20px;
}
.pdt-30{
	padding-top: 30px;
}
.pdt-40{
	padding-top: 40px;
}
.pdt-50{
	padding-top: 50px;
}
.pdt-60{
	padding-top: 60px;
}
.pdt-70{
	padding-top: 70px;
}
.pdt-80{
	padding-top: 80px;
}
.pdt-90{
	padding-top: 90px;
}
.pdt-100{
	padding-top: 100px;
}

.slider-wrapper {
	height: 520px;
}

.section-padding{
	padding-top: 25px;
	padding-bottom: 40px;
}

.grey-bg{
	background-color: #eff2f5;
}
.blue-bg{
	background-color: #10235e
}
.dark-blue-bg{
	background-color: #011334
}

/*
Form Style
-------------------------------------------*/
.form-control {
	height: 50px;
	border: 1px solid #f1f1f1;
	border-radius: 0;
	box-shadow: none;
	font-weight: 500;
	color: #212121;
	margin-bottom: 15px;
	width: 100%;
}

.email-container {
	position: relative;
}

.email-container button {
	position: absolute;
	right: 0;
	top: 0;
	height: 50px;
	width: 50px;
	border: none;
	background: none;
	cursor: pointer;
}

.email-container .form-control {
	padding-right: 50px;
}

.subscription-success, .subscription-error {
	display: none;
	margin-top: 10px;
	padding: 10px;
}

.subscription-success {
	color: green;
}

.subscription-error {
	color: red;
}
/* Button Style
/* ------------------------------ */
.btn{
    padding: 12px 32px;
    border: 0;
    text-transform: capitalize;
}
.btn.active{
	box-shadow: none;
}
.btn-primary{
	background-color: #ffc32c;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:active:focus, 
.btn-primary:active:hover {
    background-color: #011a48;
}



.page-title .breadcrumb{
	background-color: #fff;
	padding: 8px 0;
}
.page-title .breadcrumb li a{
	color: #212121;
	font-size: 13px;
}
.page-title .breadcrumb li{
	color: #bebdbd;
	font-size: 12px;
}
.section-title {
    font-weight: 800;
    text-transform: capitalize;
    font-size: 3.5rem;
}
.section-sub {
    width: 60%;
    margin: 0 auto;
}

@media screen and ( max-width: 766px ){
	.section-sub{
		width: 100%;
	}
}

.container-fluid.no-gutter,
.no-gutter > [class*='col-']{
	padding-left: 0;
	padding-right: 0;
}
.custom-gutter {
    margin-right: 0;
    margin-left: 0;
}
.custom-gutter > [class*='col-']{
	padding-left: 1px;
	padding-right: 1px;
	margin-top: 1px;
	margin-bottom: 1px;
}


.white-text {
	color: #fff;
}


/*-----------------------------------------------------
Top Bar
-------------------------------------------------------*/
.top-bar {
    min-height: 55px;
    background-color: #011a48;
}
.top-bar .panel-body{
	padding: 0;
}
.top-bar .top-bar-cta{
	margin: 0;
}
.top-bar .top-bar-cta li {
	line-height: 55px;
}
.top-bar .top-bar-cta li a,
.top-bar .top-bar-cta li span {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}
.top-bar .top-bar-cta li i,
.top-bar .top-bar-cta li a i{
	color: #ffc32c;
	margin-right: 10px;
	font-size: 20px;
	position: relative;
	top: 2px;
}
@media (min-width: 992px) {
	.top-bar-address-list {
		float: right;
	}
}
.top-bar-address-list ul{
	margin-bottom: 0;
   
}
.top-bar-address-list ul li a{
	display: block;
	padding: 17px 20px;
	background-color: #ffc32c;
	color: #011a48;
	font-weight: 500;
}
.top-bar-address-list ul li a i{
	margin-left: 5px;
}
.top-bar-address-list li{
	position: relative;
}
.address-dropdown {
    position: absolute;
    z-index: 200;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    border-top: 1px solid transparent;
    transition: all .3s ease-in-out;
}
.top-bar-address-list .address-ative:hover .address-dropdown{
    opacity: 1;
    visibility: visible;
    border-top-color: #a7880d;
}
.address-dropdown li a{
    display: block;
    padding: 10px 20px !important;
}
.address-dropdown li a:hover{
    background-color: #ffc32c;
}
.top-bar-address-list .nav-tabs{
	border-bottom: none;
}
.top-bar-address-list .nav-tabs li{
	margin-bottom: 0;
	min-width: 200px;
}
.top-bar-address-list .nav-tabs li a{
	margin-right: 0;
	border-radius: 0;
	border: none;
}

@media screen and ( max-width: 1199px ){
	.top-bar .top-bar-cta li a,
	.top-bar .top-bar-cta li span {
	    line-height: 28px;
	}
}

.tt-toggle-bar {
	display: none;
}

@media screen and ( max-width: 992px ) {
	.tt-toggle-bar {
	    display: block;
	    color: #fff;
	    background-color: #ffc32c;
	    position: absolute;
	    top: 0;
	    right: 90px;
	    z-index: 1050;
	    height: 22px;
	    width: 33px;
	    font-size: 20px;
	    line-height: 20px;
	    text-align: center;
	    cursor: pointer;
	    border-bottom-right-radius: 4px;
	    border-bottom-left-radius: 4px;
	}
	.top-bar {
		display: none;
	}
	.top-bar .panel-body {
	    margin-bottom: 10px;
	}
	.top-bar .top-bar-cta {
	    margin-top: 10px;
	}
	.top-bar .top-bar-cta li {
	    line-height: 30px;
	}
	.top-bar-address-list {
	    display: inline-block;
	}
	.top-bar-address-list ul li a {
	    display: block;
	    padding: 8px 20px;
	}
}



/* =-=-=-=-=-=-= Slider Section Home One =-=-=-=-=-=-= */

.tt-slider {
    overflow: hidden;
    position: relative;
}
.carousel-fade .carousel-inner .item {
    max-height: 700px;
    opacity:.8;
    -webkit-transition-property:opacity;
    -moz-transition-property:opacity;
    -o-transition-property:opacity;
    transition-property:opacity
}
.carousel-fade .carousel-inner .active { 
    opacity: 1 
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right { 
    opacity: 1 
}
.carousel-fade .carousel-inner .item:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.05);
}
.fullscreen-slider .carousel-fade .carousel-inner .item:after {
	background: rgba(0,0,0,.5);
}

.carousel-fade .carousel-control {
    z-index: 20 
}

/* Caption style
/* ------------------------------ */
.tt-slider .carousel-inner .container {
	position: relative;
}
.tt-slider .carousel-inner .tt-carousel-caption {
	padding-top: 150px;
	padding-bottom: 150px;
	z-index: 15;
	position: relative;
}

@media (min-width: 992px) {
	.fullscreen-slider .tt-slider .carousel-inner .tt-carousel-caption {
		padding-top: 250px;
		padding-bottom: 150px;
	}

}
@media (max-width: 991px) {
	.tt-slider .carousel-inner .tt-carousel-caption {
		padding-top: 50px;
		padding-bottom: 50px;
	}
	.fullscreen-slider .tt-slider .carousel-inner .tt-carousel-caption {
		padding-top: 100px;
		padding-bottom: 100px;
	}
}
.tt-slider .carousel-inner .tt-carousel-caption .intro {
    display: block;
    font-size: 16px;
    text-transform: uppercase;
    line-height: 20px;
    letter-spacing: 7px;
    margin-bottom: 20px;
}
.tt-slider .carousel-inner .tt-carousel-caption h1 {
	font-weight: 900;
}

@media (max-width: 600px) {
	.tt-slider .carousel-inner .tt-carousel-caption h1 {
		font-size: 36px;
	}
}
.tt-slider .carousel-inner .tt-carousel-caption p {
	margin-top: 10px;
	margin-bottom: 30px;
	color: #011a48;
}
.tt-slider .carousel-inner .tt-carousel-caption .btn {
	color: #011a48;
    line-height: 20px;
    font-weight: 600;
    text-transform: uppercase;
}
.tt-slider .carousel-inner .tt-carousel-caption .btn-primary:hover,
.tt-slider .carousel-inner .tt-carousel-caption .btn-primary:focus {
	background-color: #ddb100;
}

.fullscreen-slider .tt-slider .carousel-inner .tt-carousel-caption h1,
.fullscreen-slider .tt-slider .carousel-inner .tt-carousel-caption p,
.fullscreen-slider .tt-slider .carousel-inner .tt-carousel-caption .intro {
	color:#fff;
}

/*slider background*/
.tt-slider .carousel-inner .item:nth-child(1) {
	background: url(assets/img/slider/bb-slider-pic.png) center center no-repeat;
	background-size: cover;
}
.tt-slider .carousel-inner .item:nth-child(2) {
	background: url(assets/img/slider/bb-slider-pic2.png) center center no-repeat;
	background-size: cover;
}
.tt-slider .carousel-inner .item:nth-child(3) {
	background: url(assets/img/slider/parents-in-training.png) center center no-repeat;
	background-size: cover;
}
.tt-slider .carousel-inner .item:nth-child(4) {
	background: url(assets/img/slider/primary-students-in-class.png) center center no-repeat;
	background-size: cover;
}


/*Full screen slider background*/
.fullscreen-slider .tt-slider .carousel-inner .item:nth-child(1) {
	background: url(assets/img/slider/bb-slider-pic.png) center center no-repeat;
	background-size: cover;
}
.fullscreen-slider .tt-slider .carousel-inner .item:nth-child(2) {
	background: url(assets/img/slider/bb-slider-pic2.png) center center no-repeat;
	background-size: cover;
}
.fullscreen-slider .tt-slider .carousel-inner .item:nth-child(3) {
	background: url(assets/img/slider/parents-in-training.png) center center no-repeat;
	background-size: cover;
}
.fullscreen-slider .tt-slider .carousel-inner .item:nth-child(4) {
	background: url(assets/img/slider/primary-students-in-class.png) center center no-repeat;
	background-size: cover;
}



/* next and previous control button style
/* --------------------------------------------- */
.carousel-control {
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 50%;
    margin-top: -20px;
    background: rgba(0, 0, 0, 0.5);
	opacity: 1;
    text-shadow: none;
    opacity: 0;
    visibility: hidden;
}

.tt-slider:hover .carousel-control {
	opacity: 1;
	visibility: visible;

}
.carousel-control:hover {
    background: #000;
}

@media (min-width: 1200px) {
	.left.carousel-control {
	    left: 30px;
	}
	.right.carousel-control {
	    right: 30px;
	}
}
@media (max-width: 1199px) {
	.left.carousel-control {
	    left: 50%;
	    margin-left: -42px;
	}
	.right.carousel-control {
	    right: 50%;
	    margin-right: -42px;
	}
	.left.carousel-control,
	.right.carousel-control {
		top: auto;
	    bottom: 0;
	}
}
.carousel-control.right,
.carousel-control.left {
    background-image: none;
}

/* Text animation delay for first slider
/* ------------------------------------- */
.delay-1 {
    -webkit-animation-delay: 100ms;
    -moz-animation-delay: 100ms;
    animation-delay: 100ms;
}

.delay-2 {
    -webkit-animation-delay: 200ms;
    -moz-animation-delay: 200ms;
    animation-delay: 200ms;
}

.delay-3 {
    -webkit-animation-delay: 300ms;
    -moz-animation-delay: 300ms;
    animation-delay: 300ms;
}

.delay-4 {
    -webkit-animation-delay: 400ms;
    -moz-animation-delay: 1400ms;
    animation-delay: 400ms;
}







/*-----------------------------------------------------
Hero Unit
------------------------------------------------------*/
.fullscreen-banner {
  height: 100vh;
  width: 100%;
}

.hero-content {
	padding-top: 100px;
	padding-bottom: 100px;
}
@media (min-width: 768px) {
	.hero-content {
		padding-top: 250px;
		padding-bottom: 250px;
	}
}


.hero-intro {
	display: block;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 7px;
	margin-bottom: 20px;
}
.hero-title {
	font-size: 50px;
	line-height: 55px;
	
}
.hero-wrapper a.btn {
	display: inline-block;
    margin-top: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}


.bg-cover,
[class*='banner-'] {
    background-size: cover !important;
}

@media (min-width: 992px) {
    .bg-fixed {
        background-attachment: fixed;
    }
}

.banner-1 {
    background-image: url("assets/img/slider/banner-1.jpg");  
}
.banner-2 {
    background-image: url("assets/img/slider/banner-2.jpg");  
}



.overlay {
  position: relative;
}
.overlay:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.2); /*fallback overlay*/
}

/* dark overlay */
.overlay.dark-0:before {
    background-color: rgba(0,0,0,0);
}
.overlay.dark-1:before {
    background-color: rgba(0,0,0,.1);
}
.overlay.dark-2:before {
    background-color: rgba(0,0,0,.2);
}
.overlay.dark-3:before {
    background-color: rgba(0,0,0,.3);
}
.overlay.dark-4:before {
    background-color: rgba(0,0,0,.4);
}
.overlay.dark-5:before {
    background-color: rgba(0,0,0,.5);
}
.overlay.dark-6:before {
    background-color: rgba(0,0,0,.6);
}
.overlay.dark-7:before {
    background-color: rgba(0,0,0,.7);
}
.overlay.dark-8:before {
    background-color: rgba(0,0,0,.8);
}
.overlay.dark-9:before {
    background-color: rgba(0,0,0,.9);
}
.overlay.dark-10:before {
    background-color: rgba(0,0,0,1);
}



/*Verticle Aligne Middle content*/
.valign-wrapper {
    display: table;
    width: 100%;
}
.valign-cell {
    display: table-cell;
    vertical-align: middle;
}





/*-----------------------------------------------------
fun fact style
------------------------------------------------------*/
.tt-count-bg{
	background: url(assets/img/fun-fact-bg.png) no-repeat center center / cover;
	padding-bottom: 250px;
}
.tt-count-bg .fun-facts-item p{
	color: #fff !important;
}
.fun-facts-item {
    position: relative;
}
.fun-facts-item.text-center .des h3{
	margin-top: 20px;
}

.fun-facts-item .des h3{
	color: #ffc32c;
	font-size: 40px;
	font-weight: 800;
	margin-bottom: 15px;
}
.fun-facts-item .des p{
	color: #011a48;
	margin-bottom: 0;
	font-weight: 500;
}
.fun-facts-divider {
    position: absolute;
    background-color: #ffc32c;
    width: 50px;
    height: 2px;
    bottom: -25px;
    left: 0;
}
.fun-facts-divider.border-center{
	left: 50%;
	margin-left: -25px;
}


/*-----------------------------------------------------
tab style
-------------------------------------------------------*/
.menu-collase-wrapper .navbar-toggle{
	    background-color: rgb(255, 204, 1);
}
.menu-collase-wrapper .navbar-toggle .icon-bar{
	background-color: #fff;
}
.menu-collase-wrapper .navbar-collapse{
	padding: 0;
}
.about-list ul li{
	display: inline-block !important;
}
.about-list .border-tab li:before {
    content: "";
    position: absolute;
    background-color: #f2f4f8;
    width: 20px;
    height: 4px;
    top: 50%;
    right: 0;
    margin-right: -20px;
    margin-top: -2px;
}

.about-list .border-tab li:last-child:before {
    content: none;
}
.about-list .border-tab li:last-child {
    margin-right: 0;
}
.about-list .border-tab li {
    margin-right: 15px;
    position: relative;
}
.about-list ul li a{
	color: #011a48;
	background-color: #fff;
	border: 5px solid #f2f4f8;
	padding: 5px 40px;
	letter-spacing: 6px;
}
.about-list ul li.active a,
.about-list ul li a:hover{
    background-color: #011a48;
    color: #fff;
    border-color: #ffc32c;
}
.border-circle li a{
	border-radius: 50px;
}
@media screen and ( max-width: 1199px ){
	.about-list ul li a{
		padding: 5px 30px;
		letter-spacing: 4px;
	}
}
@media screen and ( max-width: 740px ){
	.about-list ul li a{
		margin-bottom: 5px;
	}
}

.financial-plan-thumb img {
	width: 100%;
}


/*-----------------------------------------------------
testimonial style
-------------------------------------------------------*/
.testimonial-thumb.circle-img {
    overflow: hidden;
    border-radius: 50%;
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
}
.testimonial-thumb.circle-img img{
	width: 60px;
	height: auto;
}

.testimonial-header-entry h3 {
    margin-bottom: 0;
    color: #212121;
}
.swiper-button-next, .swiper-button-prev{
    bottom: 0;
}
.swiper-button-next,
.swiper-button-prev{
    top: 225px;
    background-image: none;
    background-color: #d3d3d3;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    margin-top: 0;
    transition: all .3s ease-in-out;
}
.swiper-button-next:hover,
.swiper-button-prev:hover{
    background-color: #ffc32c;
}
.swiper-button-next{
    right: 48.5%;
    left: auto;
    margin-right: -11px;
}
 .swiper-button-prev{
    left: 48.5%;
    right: auto;
    margin-left: -11px;
}

@media screen and ( max-width: 768px ){
	.swiper-button-prev{
		top: 279px;
		left: 48%;
	}
	.swiper-button-next{
		top: 279px;
		right: 48%;
	}
}
@media screen and ( max-width: 640px ){
	.swiper-button-prev{
		top: 189px;
		left: 20px;
	}
	.swiper-button-next{
		top: 189px;
		right: 20px;
	}
}
/*----------------------------------------------------
Testimonoial
------------------------------------------------------*/
.testimonial-wrapper .testimonial-header-entry h3 span{
	font-size: 15px;
	color: #999;
	font-weight: 400;
	margin-left: 5px;
}
.testimonial-wrapper .testimonial-thumb{
	float: left;
}
.testimonial-wrapper .testimonial-des{
	background-color: #f2f4f7;
	padding: 25px;
}
.testimonial-wrapper .testimonial-des p{
	color: #777;
}
.testimonial-wrapper .testimonial-thumb{
	margin-top: -30px;
	margin-right: 10px;
}
.testimonial-wrapper .testimonial-header-entry{
	padding-top: 10px;
}
/*
according style
---------------------------------------------------------------------------------*/
.according-section{
    background-color: #fff;
}
.panel-according .panel-default{
    -webkit-border-radius: 0;
    border-radius: 0;
    border: none;
    margin-bottom: 5px;
    box-shadow: none;
    -webkit-box-shadow: 0;
}
.panel-according .panel-title a{
    overflow: hidden;
}
.panel-according .panel-default .panel-heading{
    background-color: #ffc32c;
    padding: 0;
}
.panel-according .panel-default .panel-heading .panel-title{
    position: relative;
    font-size: 16px;
}
.panel-according .panel-default .panel-heading .panel-title a,
.panel-according .panel-default .panel-heading .panel-title a:hover,
.panel-according .panel-default .panel-heading .panel-title a:focus
.panel-according .panel-default .panel-heading .panel-title a:active{
    background-color: transparent;
    color: #2c333d;
}
.panel-according .panel-default .panel-heading .panel-title .collapsed{
    background-color: #fff;
    padding: 20px 0;
}
/*.panel-according .panel-default .panel-heading .panel-title a.collapsed:after{
    line-height: 50px;
}*/
.panel-according .panel-default .panel-heading .panel-title a:hover{
    background-color: transparent;
    border-color: #f4f7f7;
}
.panel-according .panel-default .panel-heading .panel-title a{
    padding: 20px 0px;
    display: block;
    font-size: 16px;
    font-weight: 400;
    border-bottom: 1px solid #d9dcdc;
}
.panel-according>.panel-default>.panel-heading+.panel-collapse>.panel-body,
.panel-according>.panel-group .panel-heading+.panel-collapse>.panel-body{
    padding: 20px 0;
    border-top: none;
}
.according-icon .panel .panel-heading a:after{
    background-color: #ffc32c;
    font-family: 'FontAwesome';
    font-size: 15px;
    width: 25px;
    height: 25px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -12px;
}
.plus-icon .panel .panel-heading .panel-title a:after{
    content: "\f068";
    color: #fff;
}
.plus-icon .panel .panel-heading .panel-title a.collapsed:after{
    content: "\f067";
    color: #fff;
}


/*-----------------------------------------------------
Feature Box
-------------------------------------------------------*/
.featured-section{
	background-color: #eff2f5;
}
.featured-item{
	padding: 20px;
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
}
.featured-item:hover{
	background-color: #fff;
}
.featured-item .icon-left,
.fun-facts-item .icon-left{
	float: left;
}
.featured-item.border-box {
    border: 1px solid #ffc32c;
}
.des{
	overflow: hidden;
}
.des-title{
	font-size: 20px;
	font-weight: 700;
	text-transform: capitalize;
}
.featured-item .icon {
	margin-bottom: 30px;
}
.featured-item .icon img{
	width: 50px;
	height: auto;
}
.ie11 .featured-item .icon img{
	height: 50px;
}
.featured-item.icon-left .icon {
	margin-bottom: 0;
}
.featured-item.icon-left {
	display: table;
}
.featured-item.icon-left .icon {
	display: table-cell;
	vertical-align: top;
}

.featured-item.icon-left.icon-left .des {
	margin-left: 30px;
}
.featured-item .des p{
	margin-bottom: 0;
}


/*-----------------------------------------------------
About Us
-------------------------------------------------------*/
.butto-wrapper a {
  text-align: left;
  padding: 20px 10px 20px 20px;
  width: 100%;
  background-color: #f3f3f3;
  margin-bottom: 5px;
  border-radius: 2px;
  color: #011a48;
  font-weight: 700;
  font-size: 16px;
}
.butto-wrapper a:hover,
.butto-wrapper a.active,
.butto-wrapper a:focus{
	background-color: #ffc32c;
	color: #fff;
}
.download-btn a {
    background-color: #011a48;
    color: #fff;
}
.download-btn a i {
    color: #ffc32c;
    margin-right: 5px;
}
.download-btn:hover i {
    color: #fff;
}
.des-title{
	font-weight: 800;
	color: #011a48;
}
.about-us-banner{
	background: url(assets/img/about-us-banner-img.jpg) no-repeat center center / cover;
}

.about-us-banner-content {
  width: 290px;
  margin-left: 80px;
}
.about-us-banner-content h2 {
  font-size: 60px;
  font-weight: 900;
  color: #000;
  line-height: 70px;
}

@media screen and (max-width: 480px){
	.about-us-banner-content h2 {
	    font-size: 30px;
	    line-height: 40px;
	}
}




.about-us-banner-content a {
  background-color: #011a48;
  color: #fff;
  border-radius: 0;
  font-weight: 700;
  margin-top: 25px;
}
.about-us-banner-content a:hover{
	color: #ffc32c;
}
.about-fun-fact{
	border-bottom: 1px solid #e9e9e9;
}
.video-intro .video-thumb img{
	width: 100%;
}
.video-icon a i {
  color: #fff;
  font-size: 28px;
  width: 70px;
  height: 70px;
  background-color: #ffc32c;
  line-height: 70px;
  text-align: center;
  margin-top: -60px;
}
.video-icon a span{
	position: relative;
    top: 10px;
    left: 10px;
	color: #999;
	font-size: 15px;
}

.get-touch-wrapper {
  background-color: #ffc32c;
  padding: 40px 30px 36px 30px;
}
.get-touch-wrapper span {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 20px;
}
.get-touch-wrapper a {
  background-color: #011a48;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-align: right;
  float: right;
  margin-top: -10px;
  border-radius: 0;
  text-transform: capitalize;
}
.get-touch-wrapper a:hover{
	color: #ffc32c;
}
@media screen and ( max-width: 1199px ){
	.get-touch-wrapper{
		padding: 40px 20px 36px 20px;
	}
	.get-touch-wrapper a{
		padding: 12px 20px;
	}
}
@media screen and ( max-width: 991px ){
	.video-des{
		margin-top: 30px;
	}
}
@media screen and ( max-width: 600px ){
	.about-us-banner-content{
		margin-left: 30px;
	}
}
@media screen and ( max-width: 735px ){
	.get-touch-wrapper{
		text-align: center;
		padding: 30px;
	}
	.get-touch-wrapper span{
		display: block;
		margin-bottom: 15px;
	}
	.get-touch-wrapper a{
		float: none;
		text-align: center;
		margin-top: 10px;
	}
}
/*Our Mission
-----------------*/
.mission-help-content {
  background-color: #ffc32c;
  padding: 30px 10px 10px 30px;
}
.mission-help-content h4 {
  font-weight: 800;
}
.mission-help-content p {
  color: #7e6300;
  font-size: 14px;
}
.mission-help-button a {
  background-color: #011a48;
  width: 100%;
  border-radius: 0;
  padding: 18px 0;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}
.mission-help-button a i {
  margin-right: 7px;
  color: #ffc32c;
}
.mission-help-button a:hover{
	color: #ffc32c;
}

/*Awards
-----------------*/
@media screen and ( min-width: 480px) {
	.single-award{
		display: table;
	}
	.award-thumb{
		display: table-cell;
		vertical-align: top;
	}
}

@media screen and ( max-width: 479px) {
	.award-thumb {
	    text-align: center;
	    margin-bottom: 20px;
	}
}

/*team member style
-------------------------*/

/* Section Styles */
.pdt-10 {
    padding-top: 10px;
}

.pdb-70 {
    padding-bottom: 70px;
}

/* Team Section Styles */
.team-section {
    margin-bottom: 40px;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}



.section-divider-team {
    width: 100px;
    border: 2px solid #ffc32c;
    margin: 15px auto;
}

.section-description {
    color: #666;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.6;
}

/* Team Member List Styles */
.team-member-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

/* Team Member Card Styles */
.single-team-member {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    height: 100%;
}

.single-team-member:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

/* Image Styles */
.team-member-img {
    position: relative;
    overflow: hidden;
}

.team-member-img img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.team-member-img a {
    display: block;
}

/* Margin Utilities */
.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-10 {
    margin-bottom: 10px;
}

/* Team Member Info Styles - Updated */
.section-description {
    color: #666;
    max-width: 800px;
    margin: 20px auto 30px;  /* Increased top and bottom margins */
    text-align: center;
    font-size: 1.9rem;       /* Increased from 1.1rem */
    line-height: 1.5;        /* Increased line height */
    font-weight: 400;        /* Regular weight for better readability */
    padding: 0 15px;         /* Added horizontal padding for mobile */
}

.team-member-info {
    padding: 25px 20px;
}

.team-member-header h3 {
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 1.9rem;
    line-height: 1.3;
}

.team-member-header h3 a {
    color: #011a48;
    text-decoration: none;
    transition: color 0.3s ease;
    display: block;
}

.team-member-header h3 a:hover {
    color: #ffc32c;
}

.team-member-header span {
    display: block;
    color: #444;
    font-size: 1.3rem;
    line-height: 1.2;
    font-weight: 400;
    margin-top: 5px;
}

/* Social Links Styles */
.team-member-social-link {
    list-style: none;
    padding: 0;
    margin: 15px 0 0;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.team-member-social-link li {
    padding-left: 0;
    padding-right: 0;
}

.team-member-social-link li a i {
    font-size: 20px;
    padding: 2px;
    transition: all .3s ease-in-out;
}

.team-member-social-link li a .twitter {
    color: #1da1f2;
}

.team-member-social-link li a .linkedin {
    color: #0077b5;
}

.team-member-social-link li a .envelope {
    color: #ea4335;
}

.team-member-social-link li a:hover i {
    transform: scale(1.1);
}

/* Grid System Styles */
@media (min-width: 1200px) {
    .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .team-member-header h3 {
        font-size: 1.9rem;
    }
    
    .team-member-header span {
        font-size: 1.5rem;
    }
}

@media (max-width: 767px) {
    .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .section-title {
        font-size: 3rem;
    }
    
    .team-member-list {
        margin: 0 -10px;
    }
    
    .mb-30 {
        margin-bottom: 20px;
    }
    
    .team-member-header h3 {
        font-size: 1.9rem;
    }
    
    .team-member-header span {
        font-size: 1.5rem;
    }
    
    .team-member-info {
        padding: 30px 25px;
    }
}
@media (max-width: 768px) {
    .section-description {
        font-size: 1.8rem;
        line-height: 1.4;
        margin: 15px auto 25px;
    }
}

@media (max-width: 480px) {
    .section-description {
        font-size: 1rem;
        margin: 10px auto 20px;
    }
}

/* Utility Classes */
.text-center {
    text-align: center;
}

/* Additional Animation Styles */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.single-team-member {
    animation: fadeIn 0.5s ease-out;
}
/*Team member details
----------------------*/
/* Ciyotateam Profile Section Styles */
.ciyotateam-profile-section {
    max-width: 1200px;
    margin: 0rem auto;
    border-radius: 12px;
    overflow: visible; /* Changed from hidden to allow sticky positioning */
}
.ciyotateam-profile-content {
    display: flex;
    gap: 2rem;
    padding: 3rem;
    position: relative;
}

.downpic {
    width: 100%;
    flex: 0 0 500px;
    position: sticky;
    top: 3rem;
    align-self: flex-start;
    height: fit-content;
}

.ciyotateam-profile-image {
    width: 100%; /* Image takes up full width of the parent */
    max-width: 100%; /* Prevents exceeding the parent width */
    height: auto; /* Maintains aspect ratio */
    aspect-ratio: 1 / 1; /* Keeps the image square */
    object-fit: cover; /* Ensures the image looks good if cropped */
    margin: 0 auto; /* Centers the image */
    display: block; /* Removes any inline spacing issues */
}
.parent-container {
    width: 100%; /* Container spans full width of the viewport */
    max-width: 100%; /* Ensures no overflow */
    box-sizing: border-box; /* Includes padding in width calculation */
    overflow: hidden; /* Prevents content from spilling out */
}

.ciyotateam-profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*transition: transform 0.3s ease;*/
}

/*.ciyotateam-profile-image img:hover {
    transform: scale(1.05);
}*/

.ciyotateam-profile-details {
    flex: 1;
    width: calc(100% - 540px);
}

.ciyotateam-profile-details h2 {
    color: #2c3e50;
	font-size: 30px;
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.5rem;
    margin-top: 0;
}

.ciyotateam-profile-info {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
    margin: 1rem 0;
    background-color: #ecf0f1;
    padding: 1rem;
    border-radius: 8px;
}

.ciyotateam-profile-info dt {
    font-weight: bold;
    color: #2980b9;
}

.ciyotateam-profile-info dd {
    margin-left: 1rem;
    color: #34495e;
}

.ciyotateam-profile-lists ul {
    list-style-type: none;
    padding: 0;
}

.ciyotateam-profile-lists li {
    background-color: #ecf0f1;
    margin-bottom: 0.5rem;
    padding: 0.75rem;
    border-radius: 6px;
    position: relative;
    padding-left: 2rem;
}

.ciyotateam-profile-lists li::before {
    content: '•';
    color: #3498db;
    font-weight: bold;
    position: absolute;
    left: 0.5rem;
}

.boldtitle {
    color: #3498db;
    font-weight: bold;
}

@media (max-width: 768px) {
    .ciyotateam-profile-section {
        margin: 1rem;
    }
    
    .ciyotateam-profile-content {
        flex-direction: column;
        padding: 1.5rem;
        gap: 2rem;
    }

    .downpic {
        position: relative;
        top: auto;
        width: 100%;
        flex: none;
    }

	


 .ciyotateam-profile-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    object-fit: cover;
    display: block;
}

    .ciyotateam-profile-details {
        width: 100%;
    }
    
    .ciyotateam-profile-info {
        margin: 0.75rem 0;
        padding: 0.75rem;
    }

    .ciyotateam-profile-lists li {
        padding: 0.5rem 0.5rem 0.5rem 1.5rem;
    }
	
}
@media (max-width: 600px) {
    .ciyotateam-profile-image {
		max-width: 90%; /* Shrinks image slightly on smaller screens */
    }
}
/*partners style
-------------------*/
.partners-logo li {
    margin: 20px 10px;
}
.partners-logo li a img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}

.partners-logo li a img:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

/*career page style
------------------------------*/
.single-career {
    padding: 20px;
    border: 1px solid #ffc32c;
}
.single-career:hover {
    background-color: #ffc32c;
    color: #fff;
    transition: all .3s ease-in-out;
}
.career-header h4 {
    font-size: 18px;
}
.career-header p {
    margin-bottom: 0;
    font-size: 13px;
}
.career-header p span {
    color: #011a48;
}
.career-header h4 a {
    color: #011a48;
}
.career-header h4 a:hover {
    color: #fff;
}
.career-info p {
    font-size: 14px;
}
.career-info a {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    color: #212121;
}
.career-info a:hover {
    color: #fff;
}


/*----------------------------------------------------
Case Studies Style
------------------------------------------------------*/
.portfolio-wrapper {}
.portfolio-item {
    position: relative;
    overflow: hidden;
}
.portfolio-item::before {
	content: "";
    position: absolute;
    background-color: rgba(1, 26, 72, 0.8);
    width: 100%;
    height: 100%;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.portfolio-thumb img {
	width: 100%;
}
.portfolio-description {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 20px;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.portfolio-description p {
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 5px;
}
.portfolio-description h3 {
	margin: 0;
}
.portfolio-description h3 a {
    color: #fff;
}
.portfolio-description h3 a:hover {
    color: #ffc32c;
}

.vertical-border {
    background-color: #ffc32c;
    width: 3px;
    height: 100px;
    position: absolute;
    top: -50%;
    left: 20px;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}
.portfolio-item:hover .vertical-border {
	top: 0;
    -webkit-transition: all 600ms cubic-bezier(0.52,1.64,.37,.66);
  	transition: all 600ms cubic-bezier(0.52,1.64,.37,.66);
}


.vertical-border,
.portfolio-description,
.portfolio-item::before {
    opacity: 0;
    visibility: hidden;
}

.portfolio-item:hover::before,
.portfolio-item:hover .vertical-border,
.portfolio-item:hover .portfolio-description {
    opacity: 1;
    visibility: visible;
}



/*-----------------------------------------------------
Case Studies Single
-------------------------------------------------------*/
/*
gallery section style
---------------------------*/
.gallery-thumb .carousel-control.left,
.gallery-thumb .carousel-control.right{
    background-image: none;
    opacity: 1;
}
.gallery-thumb .carousel-control.right{
    background-image: none;
}
.gallery-thumb .carousel-control.left{
   background-image: none; 
}
.gallery-thumb .carousel-control{
    text-shadow: none;
    background-color: transparent;
    top: 50%;
    margin-top: -25px;
}
.gallery-thumb .carousel-control:hover{
    color: #fff;
}
.gallery-thumb .carousel-control{
    background-color: #011a48;
    width: 50px;
    height: 50px;
    line-height: 50px;
    display: block;
    border-radius: 50px;
}
.gallery-thumb .carousel-control:hover{
    background-color: #ffc32c;
}
.gallery-thumb .carousel-control span{
    color: #fff;
    font-size: 18px;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}
.gallery-thumb .carousel-control:hover span{
    color: #fff;
}
.carousel-control .fontawesome{
    font-family: FontAwesome;
}
.gallery-thumb .carousel-control.left{
    left: 20px;
}
.gallery-thumb .carousel-control.right{
    right: 20px;
}
.ie9 .right.carousel-control,
.ie9 .left.carousel-control{
    filter: none;
    
}



/*Customer info style
---------------------------*/
.customer-info ul {
    margin-bottom: 0;
}
.customer-info>ul>li{
	display: table;
	margin-bottom: 10px;
}
.customer-info ul li:last-child{
	margin-bottom: 0;
}
.customer-info ul li span{
	display: table-cell;
	vertical-align: top;
}
.customer-info {
    background-color: #ffc32c;
    padding: 35px 10px 35px 30px;
}
.customer-info-title {
    font-size: 18px;
}
.customer-info ul li span {
    width: 150px;
    color: #9e7f02;
    font-weight: 400;
}
.customer-info ul li strong {
    color: #fff;
    font-weight: 400;
}
.customer-info ul li strong a{
	color: #fff;
}
.customer-info ul li strong a:hover{
	color: #212121;
}
.customer-info ul li:last-child {
    margin-bottom: 0;
}
.social-icon {
    margin-bottom: 0;
}
.social-icon li {
    padding: 0 4px;
}
.social-icon li a i {
    color: #fff;
    font-size: 20px;
    line-height: 20px;
    transition: all .3s ease-in-out;
}
.social-icon li a i:hover{
	color: #011a48;
}
.customer-hire-btn a {
    background-color: #ffc32c;
    width: 100%;
    border-radius: 0;
    padding: 21px 0px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 10px;
}
.customer-hire-btn a:hover{
	background-color: #ffc32c;
	color: #011a48;
}
.case-studies-des h3 {
    font-size: 30px;
    font-weight: 800;
}

.case-studies-tiled-gallery img{
	width: 100%;
}

@media screen and ( max-width: 991px ){
	.customer-info{
		margin-top: 30px;
	}
}

/*progress bar
-------------------------*/
.progress-bar-list{
	border-bottom: 1px solid #cfcece;
}
.progress-bar-vertical {
  width: 18px;
  min-height: 160px;
  display: flex;
  align-items: flex-end;
  margin-right: 10px;
  float: left;
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
.progress-bar-vertical:last-child{
	margin-right: 0;
}
.progress-bar-list{
	margin: 0 66px;
}
.saving-invest-progress-wrapper p{
	margin-bottom: 30px;
}
.progress-bar-vertical .progress-bar {
  width: 100%;
  height: 0;
  background-color: #00d8ff;
  box-shadow: none;
  -webkit-transition: height 0.6s ease;
  -o-transition: height 0.6s ease;
  transition: height 0.6s ease;
}
.progress{
	margin-bottom: 0;
}
.progress-bar-title h4{
	font-weight: 400;
}


/*terms and condition style
-----------------------------------------------------*/
.condition-list {
    list-style: none;
    margin-bottom: 30px;
}

.condition-list li {
    position: relative;
}

.condition-list li:after {
    content: '';
    height: 10px;
    width: 10px;
    background: #ffc32c;
    display: block;
    position: absolute;
    border-radius: 50px;
    top: 50%;
    margin-top: -5px;
    left: -20px;
}


/*-----------------------------------------------------
contact Page
-------------------------------------------------------*/
.map-button-list li {
    display: inline-block;
    background-color: #011a48;
    margin: 0;
    padding: 0;
}
.map-button-list li a {
    color: #ffc32c;
}
.height-200{
	height: 400px;
}

/*
contact us section style
---------------------------------------------------------------------------------------------*/
.contact-form textarea {
	min-height: 160px;
	padding: 20px;
	resize: none;
}
.contact-form .form-control{
	font-weight: 300;
}
.contact-address-wrapper {
    background-color: #011a48;
    padding: 30px 30px;
}
.contact-map{
	min-height: 380px;
}
.tab-button{
	border-bottom: none;
	text-align: center;
	margin-top: -60px;
}
.tab-button li {
    display: inline-block;
    margin-bottom: 0;
    float: none;
    background-color: #011a48;
    margin-right: -5px;
}
.tab-button li a{
	color: #ffc32c;
	padding: 20px 40px;
	border-radius: 0;
	border: 0;
	margin: 0;
}
.tab-button li.active>a{
	background-color: #ffc32c;
}
.tab-button li a:hover,
.tab-button li.active>a,
.tab-button li.active>a:hover{
	background-color: #ffc32c;
	color: #011a48;
	border: 0;
}
.tab-button.nav-tabs>li.active>a, 
.tab-button.nav-tabs>li.active>a:focus, 
.tab-button.nav-tabs>li.active>a:hover{
	border: 0;
	background-color: #ffc32c;
}
@media screen and ( max-width: 768px ){
	.contact-map-wrapper .tab-content{
		margin-bottom: 30px;
	}
}
/*----------------------------------------------------
Blog section
------------------------------------------------------*/
.post-wrapper{
	box-shadow: 0px 49px 72px 0px rgba(25, 25, 25, 0.12);
    -webkit-box-shadow: 0px 49px 72px 0px rgba(25, 25, 25, 0.12);
    -moz-box-shadow: 0px 49px 72px 0px rgba(25, 25, 25, 0.12);
    -ms-box-shadow: 0px 49px 72px 0px rgba(25, 25, 25, 0.12);
    -o-box-shadow: 0px 49px 72px 0px rgba(25, 25, 25, 0.12);
}

.blog-content {
    background-color: #fff;
    padding: 25px 10px 25px 40px;
    overflow: hidden;
    position: relative;
}



.post-wrapper:hover .vertical-border {
	top: 0;
	opacity: 1;
	visibility: visible;
    -webkit-transition: all 600ms cubic-bezier(0.52,1.64,.37,.66);
  	transition: all 600ms cubic-bezier(0.52,1.64,.37,.66);
}

.entry-meta ul {
    margin-bottom: 0;
}
.entry-meta ul li{
	position: relative;
	padding: 0 2px;
}
.entry-meta ul li:before{
	content: ",";
	position: absolute;
	right: -3px;
	bottom: 2px;
}
.entry-meta ul li:last-child:before{
	content: "";
}
.entry-meta ul li a {
    text-transform: uppercase;
    font-size: 12px;
    color: #666;
    font-weight: 500;
}
.entry-meta ul li a:hover{
	color: #ffc32c;
}
.post-wrapper .thumb-wrapper{
	overflow: hidden;
}
.post-wrapper .thumb-wrapper img{
	width: 100%;
	transform: scale(1);
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
}
.post-wrapper:hover .thumb-wrapper img{
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
}
.single-post .post-wrapper:hover .thumb-wrapper img{
	transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
}

.entry-title {
    font-size: 19px;
    font-weight: 800;
    
    text-align: left;
}
.entry-title a:hover{
	color: #ffc32c;
}
.blog-content .entry-content p{
	margin-bottom: 10px;
}
.blog-content .entry-content a{
	text-transform: capitalize;
	font-weight: 800;
	color: #000;
}
.blog-content .entry-content a:hover{
	color: #ffc32c;
}
.animated-ltr {
	position: relative;
	z-index: 10;
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
}
.animated-ltr::after {
    position: absolute;
    content: '';
    top: 0px;
    left: 0px;
    background-color: #ffc32c;
    width: 0%;
    height: 100%;
    z-index: 1;
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;

}
.animated-ltr:hover:after {
    width: 100%;
    z-index: -1;

}
.animated-ltr:hover {
    color: #fff;
    text-decoration: none;
    background-color: #ffc32c;
    z-index: 1;
}

/*single post
----------------------*/
.single-post .blog-content{
	padding-bottom: 50px;
	border-bottom: 1px solid #e4e2e2;
}
.single-post .thumb-wrapper:hover img{
	transform: scale(1);
}
.single-post .entry-meta ul li{
	padding-right: 10px;
}
.single-post .entry-meta ul li:last-child{
	padding-right: 0;
}
.single-post .entry-meta ul li:before{
	content: "";
}
.single-post .entry-meta ul li a{
	font-weight: 300;
	font-size: 13px;
	text-transform: capitalize;
}
.blog-full-width-img{
	margin-left: -40px;
	margin-right: -40px;
}
.blog-full-width-img img{
	max-width: 100%;
}
.single-post .entry-meta ul li a .fa{
	margin-right: 3px;
}
.single-blog-rating {
	display: inline;
}
.single-blog-rating-list a{
	margin-right: 3px;
}
.single-blog-rating li{
	padding: 0 !important;
	margin-right: -5px;
}
.single-blog-rating li a .fa{
	margin-right: 0 !important;
	color: #fe6000;
}
.single-post .entry-title{
	font-size: 29px;
}
.single-post .entry-content p{
	margin-bottom: 30px;
	color: #333333;
}

/*comment wrapper
-------------------------------*/
.comment-wrapper {
    padding: 55px 40px;
    overflow: hidden;
    border-bottom: 1px solid #e4e2e2;
}
.comment-wrapper .form-control:focus{
	border-color: transparent;
	    box-shadow: 6px 6px 72px 5px rgba(25, 25, 25, 0.12);
    -webkit-box-shadow: 6px 6px 72px 5px rgba(25, 25, 25, 0.12);
    -moz-box-shadow: 6px 6px 72px 5px rgba(25, 25, 25, 0.12);
    -ms-box-shadow: 6px 6px 72px 5px rgba(25, 25, 25, 0.12);
    -o-box-shadow: 6px 6px 72px 5px rgba(25, 25, 25, 0.12);
}
.comment-wrapper input,
.comment-wrapper textarea{
	border-radius: 4px;
}
.comment-wrapper .comment-submit-btn{
	background-color: #011a48;
	padding: 15px 40px;
	font-weight: 700;
	font-size: 16px;
	color: #fff;
	float: right;
	border-radius: 0;
}
.comment-wrapper .comment-submit-btn:hover{
	background-color: #ffc32c
}
.comment-title{
	font-weight: 800;
	font-size: 25px;
	color: #212121;
	text-transform: capitalize;
}

/*=======coments style ===========*/
.comment-responed-wrapper{
	padding: 55px 40px;
}
.comment-content .comment-reply-link{
	padding: 0px 15px;
	border: 1px solid #d5d7d8;
	text-transform: uppercase;
	color: #989898;
	font-size: 10px;
}
.comment-content .comment-reply-link:hover{
	background-color: #011a48;
	border-color: #011a48;
	color: #fff;
}
.comment-list{
	padding: 0;
}
.comment-list>.comments-details{
	border: 1px solid #f2f2f2;
	padding: 20px 20px 0px 20px;
	margin-top: 20px;
}
.comment-name span{
	float: right;
	clear: both;
}
.comment-media .comments-details{
	margin-bottom: 20px;
	clear: both;
}
.comment-list>.comments-details>.comment-user{
	border-bottom: 1px solid #f2f2f2;
}
.reaply-comment>.comments-details{
	border-bottom: 1px solid #f2f2f2;
}
.reaply-comment>.comments-details:last-child{
	border-bottom: none;
}
.comment-media .comment-img{
	float: left;
	margin: 0px 20px 0px 0px;
	
}

.comment-media .comment-img img{
	width: 80px;
	text-align: center;
	border-radius: 50px;
}
.comment-media .comment-content{
	display: block;
	overflow: hidden;
	padding-bottom: 15px;
}
.comment-content .comment-name{
	margin-bottom: 5px;
	float: left;
	margin-right: 20px;
}
.comment-content .comment-name h4{
	font-size: 16px;
	text-transform: uppercase;
}
.comment-content .comment-time{
	font-weight: 300;
	display: block;
	font-size: 12px;
	margin-top: -5px;
}
.comments-details .reaply-comment{
	margin-top: 20px;
	margin-left: 80px;
}

.comment-list .media-body h4{
	font-size: 16px;
	font-weight: 700;
}
.comment-list .media-body h4 span{
	font-size: 11px;
	text-transform: capitalize;
	padding-left: 10px;
	font-weight: 400;
}
.comment-list .media-left a img{
	margin-top: 7px;
}

@media screen and ( max-width: 1199px ){
	.comments-details .reaply-comment{
		margin-left: 0;
	}
}

@media screen and (max-width: 480px) {
	.comment-media .comment-img{
		float: none;
		text-align: center;
		margin-bottom: 20px;
	}
	.comment-content .comment-name {
		float: none;
	}
	.comment-content .comment-time {
		margin-bottom: 10px;
	}
}



/*post share style
----------------------------------*/
.post-share ul li a{
    padding: 7px 0;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 45px;
    font-size: 15px;
    transition: all 400ms;
}
.post-share ul li a i{
	width: 45px;
	margin: 0 auto;
}
.post-share ul li{
	padding: 0px 2px;
}
.post-share ul li:first-child{
	padding-left: 0;
}
.post-share ul li:last-child{
	padding-right: 0;
}
.post-share ul li a span {
	margin-left: 0;
    padding-right: 20px;
}
.post-share ul li a:hover{
	width: 90px;
}
.facebook{
	background-color: #3b5998;
}
.twitter{
	background-color: #1da1f2;
}
.google-plus{
	background-color: #ea4335;
}
.linkedin{
	background-color: #0077b5;
}
.youtube{
	background-color: #cd201f;
}
.dribbble {
    background-color: #ef669a;
}
.behance {
    background-color: #1983ff;
}
.vimeo{
	background-color: #3b5998;
}
.pinterest{
	background-color: #bd081c;
}
.reddit-alien{
	background-color: #ff4500;
}
.envelope{
	background-color: #a2a2a2;
}
.facebook-color{
	color: #3b5998;
}
.twitter-color{
	color: #1da1f2;
}
.google-plus-color{
	color: #ea4335;
}
.linkedin-color{
	color: #0077b5;
}
.youtube-color{
	color: #cd201f;
}
.vimeo-color{
	color: #3b5998;
}
.pinterest-color{
	color: #bd081c;
}
.reddit-alien-color{
	color: #ff4500;
}
.envelope-color{
	color: #a2a2a2;
}


/*404 page style
--------------------------------------------------------------------------------*/
.error-info h1{
    color: #fff;
    font-size: 130px;
    line-height: 130px;
    font-weight: 700;
    text-shadow: 5px 5px 0 #dadada, -1px -1px 0 #dadada, 1px -1px 0 #dadada, -1px 1px 0 #dadada, 1px 1px 0 #dadada;
}
.ie9 .error-info h1,
.ie9 .error-wrapper-alt h1{
    color: #999;
}
.error-sub {
    display: block;
    font-size: 30px;
    line-height: 45px;
    font-weight: 700;
    text-transform: uppercase;
}
.error-info a {
    padding: 10px 40px;
    text-transform: uppercase;
}
.error-info a:hover{
    background-color: #ffc32c;
}
/*-----------------------------------------------------
focus section style
-------------------------------------------------------*/
.focus-content h3>a{
	color: #011a48;
	font-weight: 600;
}
.focus-content h3>a:hover{
	color: #ffc32c;
}
.focus-content a{
	text-transform: capitalize;
	font-weight: 700;
	color: #cbcbcb;
}
.focus-content a:hover{
	color: #011a48;
}
.focus-wrapper .focus-image{
	overflow: hidden;
}
.focus-wrapper .focus-image img{
	width: 100%;
	transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);

	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
}
.focus-wrapper:hover .focus-image img{
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
}


/*-----------------------------------------------------
address-section
-------------------------------------------------------*/
.address-section {
    background-color: #011d52;
}
.address-wrapper address > ul li {
    display: table;
    margin-bottom: 10px;
    color: #999;
}
.address-wrapper address > ul li:last-child {
    margin-bottom: 0;
}
.address-icon {
    display: table-cell;
    vertical-align: top;
}
.address-icon i {
    color: #fff;
}
.address-title {
    color: #ffc32c;
    font-weight: 700;
}
@media (max-width: 767px) {
	.address-wrapper {
		margin-bottom: 30px
	}
}




/*-----------------------------------------------------
Footer Section
-------------------------------------------------------*/
.primary-footer {
    background-color: #011a48;
    padding: 60px 0 30px;
}

/* General responsive container for all widgets */
.footer-widget-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

@media (max-width: 991px) {
    .primary-footer {
        padding: 40px 0 20px;
    }
    .primary-footer .widget {
        margin-bottom: 30px;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .primary-footer {
        padding: 30px 0 15px;
    }
}

/* Widget Title Styles */
.widget-title {
    color: #ffc32c;
    font-weight: 900;
    margin-bottom: 20px;
    text-transform: capitalize;
    font-size: 2.5rem;
    position: relative;
}

@media (max-width: 767px) {
    .widget-title {
        margin-bottom: 20px;
        font-size: 2rem;
    }
}

/* About Widget Styles */
.widget-about .widget-title {
    margin-bottom: 15px;
}

.widget-about-info p {
    color: #fff;
    font-size: 1.6rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.widget-about-info {
    max-width: 100%;
}

@media (max-width: 767px) {
    .widget-about-info p {
        font-size: 1.5rem;
    }
}

/* Useful Links Widget */
.useful-link {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}

.useful-link li {
    width: 50%;
    float: left;
    margin-bottom: 10px;
}

.useful-link li a {
    color: #fff;
    display: block;
    font-size: 14px;
    transition: color 0.3s ease;
    padding: 5px 0;
}

.useful-link li a:hover {
    color: #ffc32c;
}

@media (max-width: 767px) {
    .useful-link li {
        width: 100%;
        margin-bottom: 5px;
    }
    
    .useful-link li a {
        font-size: 13px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .useful-link li {
        width: 50%;
    }
}

/* Recent News Widget */
.recent-news-info {
    margin-bottom: 20px;
}

.recent-news-info a {
    color: #fff;
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
    transition: color 0.3s ease;
    line-height: 1.5;
}

.recent-news-info a:hover {
    color: #ffc32c;
}

.recent-news-info .entry-meta {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recent-news-info .entry-meta li {
    display: inline-block;
    margin-right: 15px;
}

.recent-news-info .entry-meta li a {
    color: #bdbdbd;
    font-size: 13px;
    margin-bottom: 0;
}

.recent-news-info .entry-meta li a i {
    margin-right: 10px;
    color: #ffc32c;
}

.recent-news-info + .recent-news-info {
    margin-top: 20px;
}

@media (max-width: 767px) {
    .recent-news-info a {
        font-size: 13px;
    }
    
    .recent-news-info .entry-meta li a {
        font-size: 12px;
    }
    
    .recent-news-info .entry-meta li {
        margin-right: 10px;
    }
}

/* Newsletter Widget */
.subscribe-form {
    position: relative;
    margin-bottom: 20px;
}

.subscribe-form .input-wrapper {
    margin-bottom: 20px;
}

.subscribe-form input[type="email"] {
    width: 100%;
    height: 50px;
    padding: 10px 60px 10px 15px;
    border: none;
    border-radius: 3px;
    background-color: #4a5c7d;
    color: #fff;
}

.subscribe-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.subscribe-form button {
    background: #ffc32c;
    border: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
    border-radius: 0 3px 3px 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.subscribe-form button:hover {
    background-color: #e6b028;
}

.widget-newsletter form button i {
    color: #011a48;
    font-size: 20px;
}

.subscription-success {
    color: #fff;
    margin-top: 10px;
    display: block;
}

@media (max-width: 767px) {
    .subscribe-form input[type="email"] {
        height: 45px;
        font-size: 13px;
    }
    
    .subscribe-form button {
        width: 45px;
        height: 45px;
    }
    
    .widget-newsletter form button i {
        font-size: 18px;
    }
}

/* Social Link Widget */
.social-link {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.social-link.list-inline > li {
    padding-right: 5px;
    padding-left: 0;
    margin-bottom: 5px;
}

.social-link li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    text-align: center;
    background-color: #4a5c7d;
    color: #fff;
    border-radius: 3px;
    transition: background-color 0.3s ease;
}

.social-link li a:hover {
    background-color: #ffc32c;
}

@media (max-width: 767px) {
    .social-link li a {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
}

/* For extra small devices */
@media (max-width: 575px) {
    .social-link {
        justify-content: flex-start;
    }
    
    .social-link li {
        margin-right: 5px;
    }
}

/* Copyright Section */
.copyright-wrapper {
    background-color: #043c79;
    padding: 15px 0;
}

.copyright-info {
    padding: 10px 0;
    text-align: center;
}

.copyright-info p {
    color: #fff; /* Fixed the black color to white for better visibility */
    margin-bottom: 0;
    font-size: 14px;
}

.copyright-info p a {
    color: #ffc32c;
    transition: color 0.3s ease;
}

.copyright-info p a:hover {
    color: #e6b028;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .copyright-wrapper {
        padding: 10px 0;
    }
    
    .copyright-info {
        padding: 5px 0;
    }
    
    .copyright-info p {
        font-size: 12px;
    }
}

/* Fix for small screens layout */
@media (max-width: 480px) {
    .primary-footer [class*="col-"] {
        width: 100%;
    }
}







/*-----------------------------------------------------
bootsnav menu override css
-------------------------------------------------------*/
nav.navbar.bootsnav {
	border-bottom: 0;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.12);
    box-shadow: 0 3px 6px rgba(0,0,0,.12);
}
.navbar-brand {
    padding: 0 15px;
}
.navbar-brand img {
    max-height: 80px;
}
.navbar-full .navbar-brand img {
    max-height: 50px;
}

nav.navbar.bootsnav ul.nav > li > a {
	color: #212121;
	font-family: 'Montserrat', sans-serif;
}
nav.navbar.bootsnav ul.nav > li > a:hover,
nav.navbar.bootsnav ul.nav > li.active > a,
nav.navbar.bootsnav ul.nav > li>.dropdown-menu li > a:hover,
nav.navbar.bootsnav ul.nav > li>.dropdown-menu li.active > a,
nav.navbar.bootsnav ul.nav > li>.dropdown-menu.megamenu-content li > a:hover,
nav.navbar.bootsnav ul.nav > li>.dropdown-menu.megamenu-content .menu-col li.active > a {
    color: #ffc32c;
}
nav.navbar.bootsnav ul.nav li.dropdown>ul.dropdown-menu {
    border-top-color: #ffc32c;
}
.dropdown-menu .title {
	font-size: 15px;
}
.dropdown-menu.cart-list h2 {
	font-size: 12px;
	line-height: 20px;
	margin-bottom: 0;
}
.dropdown-menu.cart-list h2 a {
	color: #212121;
}
.dropdown-menu.cart-list h2 a:hover {
	color: #ffc32c;
}

.attr-nav>ul>li>a span.badge{
    background-color: #ffc32c;
}
.attr-nav > ul > li > a {
    padding: 26px 15px;
}

ul.cart-list>li.total>a.btn {
    color: #fff !important;
}
ul.cart-list>li.total>a.btn:hover {
    background-color: #ffc32c !important;
}

.side .widget .title {
    font-size: 15px;
    margin-top: 30px;
    margin-bottom: 20px;
}
ul.social-links {
	margin-bottom: 0;
}
ul.social-links a {
	display: inline-block;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 34px;
    color: #fff;
}


@media (max-width: 992px) {
	.navbar-brand img {
	    max-height: 50px;
	}
	nav.navbar.bootsnav .navbar-brand {
	    float: left !important;
	    margin: 0 0 0 20px !important;
	}

	.attr-nav > ul > li > a {
	    padding: 12px 15px 10px;
	}

}

@media (min-width: 993px) {
	/*transparent menu*/
	nav.navbar.bootsnav.no-background {
	    box-shadow: none;
	}

	nav.navbar.bootsnav ul.nav > li > a {
	    font-size: 15px;
	    font-weight: 700;
	}

	/*navbar-brand-top*/
	nav.bootsnav.navbar-brand-top .navbar-header .navbar-brand {
		margin-bottom: 20px;
	}

}
@media (min-width: 993px) and (max-width: 1199px) {
	nav.navbar.bootsnav ul.nav > li > a {
		padding: 30px 8px;
	}
}
@media (min-width: 1024px) {
	nav.navbar.bootsnav ul.dropdown-menu.megamenu-content .content ul.menu-col li a {
	    padding: 6px 0;
	}
}

@media (min-width: 1200px) { 
	nav.navbar.bootsnav ul.nav > li > a {
		padding: 30px 15px;
	}

	nav.navbar.navbar-sidebar.bootsnav ul.nav > li > a {
	    padding: 10px 15px;
	}
}


/*Onepage Menu*/
@media (max-width: 992px) {
    .onepage nav.navbar.bootsnav .navbar-brand {
        float: left !important; 
        margin: 0 !important; 
    }
    .onepage nav.navbar.bootsnav .navbar-toggle {
        float: right;
        margin-left: -200px;
        margin-right: auto;
        margin-top: 5px;
    }
    nav.navbar.bootsnav .navbar-toggle {
    	color: #6f6f6f;
    }
}




/* ================ Preloader ================== */
#preloader {
    background: #FFF;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
}

#status,
.status-mes {
    background-image: url(assets/img/preloder.gif);
    background-position: center;
    background-repeat: no-repeat;
    height: 200px;
    left: 50%;
    margin: -100px 0 0 -100px;
    position: absolute;
    top: 50%;
    width: 200px;
}

.status-mes {
    background: none;
    left: 0;
    margin: 0;
    text-align: center;
    top: 65%;
}


/*Hero section image 
================================
==================================*/


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.hero-section {
	position: relative;
	width: 100%;
	min-height: 500px;
	height: 70vh;
	background-image: url('assets/img/slider/headg.png');
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	text-align: center;
	padding: 20px;
}

.hero-content {
	
	padding: 30px;
	border-radius: 10px;
	max-width: 800px;
	width: 90%;
	transition: all 0.3s ease;
}

.hero-content h2 {
	margin-bottom: 15px;
	
	transition: transform 0.3s ease;
}

.hero-content p {
	font-size: 1.2rem;
	transition: transform 0.3s ease;
}



.hero-section .hero-content:hover h2 {
	transform: scale(1.05);
	color: #ffc32c; /* Golden highlight on hover */
}

.hero-section .hero-content:hover p {
	transform: scale(1.02);
	color: #e0e0e0; /* Slightly lighter text on hover */
}

/* Responsive Breakpoints */
@media screen and (max-width: 768px) {
	.hero-section {
		min-height: 400px;
		height: 60vh;
	}

	

	.hero-content p {
		font-size: 1rem;
	}
}

@media screen and (max-width: 480px) {
	.hero-section {
		min-height: 300px;
		height: 50vh;
	}

	.hero-content {
		padding: 20px;
	}

	.hero-content h2 {
		font-size: 1.5rem;
	}

	.hero-content p {
		font-size: 0.9rem;
	}
}
/*END Hero section image 
================================
==================================*/


/*Timeline or CIYOTA Genesis 
============================*/
/*
=====
UIA-TIMELINE
=====
*/

.uia-timeline__container {
	display: var(--uia-timeline-display, grid);
  }
  
  .uia-timeline__groups {
	display: var(--uia-timeline-groups-display, grid);
	gap: var(--uia-timeline-groups-gap, 1rem);
  }
  
  /*
  SKIN 1
  */
  
  [data-uia-timeline-skin="1"] .uia-timeline__step {
	line-height: 1;
	font-size: var(--uia-timeline-step-font-size, 2rem);
	font-weight: var(--uia-timeline-step-font-weight, 700);
	color: var(--uia-timeline-step-color);
  }
  
  [data-uia-timeline-skin="1"] .uia-timeline__point-intro {
	display: grid;
	grid-template-columns: min-content 1fr;
	align-items: center;
	gap: var(--uia-timeline-point-intro-gap, .5rem);
  }
  
  [data-uia-timeline-skin="1"] .uia-timeline__point-date {
	grid-row: 1;
	grid-column: 2;
  }
  
  [data-uia-timeline-skin="1"] .uia-timeline__point-heading {
	grid-column: span 2;
  }
  
  [data-uia-timeline-skin="1"] .uia-timeline__point-description {
	margin-block-start: var(--uia-timeline-group-gap, 1rem);
	inline-size: min(100%, var(--uia-timeline-content-max-limit));
  }
  
  /*
  SKIN 2
  */
  
  [data-uia-timeline-skin="2"] {
	--_uia-timeline-line-color_default: #000000;
	--_uia-timeline-minimal-gap: var(--uia-timeline-minimal-gap, .5rem);
	--_uia-timeline-space: calc(var(--_uia-timeline-arrow-size) + var(--_uia-timeline-dot-size) + var(--_uia-timeline-dot-size) / 2 + var(--_uia-timeline-minimal-gap));
	--_uia-timeline-dot-size: var(--uia-timeline-dot-size, 1rem);
	--_uia-timeline-arrow-size: var(--uia-timeline-arrow-size, .25rem);
	--_uia-timeline-arrow-position: var(--uia-timeline-arrow-position, 1rem);
  }
  
  [data-uia-timeline-skin="2"] .uia-timeline__container {
	position: relative;
	padding-inline-start: calc(var(--_uia-timeline-space));
  }
  
  [data-uia-timeline-skin="2"] .uia-timeline__line {
	inline-size: var(--uia-timeline-line-thickness, 3px);
	block-size: 100%;
	background-color: var(--uia-timeline-line-color, var(--_uia-timeline-line-color_default));
  
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: calc(var(--_uia-timeline-dot-size) / 2);
	transform: translate(-50%);
  }
  
  [data-uia-timeline-skin="2"] .uia-timeline__group {
	position: relative;
  }
  
  [data-uia-timeline-skin="2"] .uia-timeline__dot {
	box-sizing: border-box;
	inline-size: var(--_uia-timeline-dot-size);
	block-size: var(--_uia-timeline-dot-size);
  
	border-radius: 50%;
	border: 
	  var(--uia-timeline-dot-border-thickness, 1px) 
	  solid 
	  var(--uia-timeline-dot-border-color, var(--_uia-timeline-line-color_default));
	background-color: var(--uia-timeline-dot-color, var(--_uia-timeline-line-color_default));
  
	position: absolute;
	/* - 4px is used for set the default gap from the top border */
	inset-block-start: calc(var(--uia-timeline-dot-position, var(--_uia-timeline-arrow-position)) + 4px);
	inset-inline-start: calc(-1 * var(--_uia-timeline-space));
  } 
  
  [data-uia-timeline-skin="2"] .uia-timeline__point {
	position: relative;
	background-color: var(--uia-timeline-point-background-color, #fff);
  }
  
  [data-uia-timeline-skin="2"] .uia-timeline__point::before {
	content: "";
	inline-size: 0;
	block-size: 0;
  
	border: var(--_uia-timeline-arrow-size) solid var(--uia-timeline-arrow-color, var(--_uia-timeline-line-color_default));
	border-block-start-color: transparent;
	border-inline-end-color: transparent;
  
	position: absolute;
	/* - 6px is used for set the default gap from the top border */
	inset-block-start: calc(var(--_uia-timeline-arrow-position) + 6px);
	inset-inline-start: calc(-1 * var(--_uia-timeline-arrow-size) + 1px);
	transform: rotate(45deg);
  }
  
  [data-uia-timeline-adapter-skin-2="ui-card-skin-#1"] {
	--uia-card-padding: var(--uia-timeline-point-padding, 1.5rem 1.5rem 1.25rem);
	--uia-card-border-thickness: var(--uia-timeline-point-border-thickness, 3px);
	--uia-card-border-color: var(--uia-timeline-point-border-color, var(--_uia-timeline-line-color_default));   
	--uia-card-background-color: var(--uia-timeline-point-background-color);  
  }
  
  /*
  SKIN 3
  */
  
  [data-uia-timeline-skin="3"] {
	--_uia-timeline-line-color_default: #222;
	--_uia-timeline-space: var(--uia-timeline-space, 1rem);
	--_uia-timeline-line-thickness: var(--uia-timeline-line-thickness, 2px);
	--_uia-timeline-point-line-position: var(--uia-timeline-point-line-position, 1rem);
  }
  
  [data-uia-timeline-skin="3"] .uia-timeline__container {
	position: relative;
	gap: var(--uia-timeline-annual-sections-gap, 2.5rem);
  }
  
  [data-uia-timeline-skin="3"] .uia-timeline__line {
	inline-size: var(--_uia-timeline-line-thickness);
	block-size: 100%;
	background-color: var(--uia-timeline-line-color, var(--_uia-timeline-line-color_default));
  
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
  }
  
  [data-uia-timeline-skin="3"] .uia-timeline__annual-sections {
	display: grid;
	gap: 2rem;
  }
  
  [data-uia-timeline-skin="3"] .uia-timeline__groups {
	padding-inline-start: var(--_uia-timeline-space);
  }
  
  [data-uia-timeline-skin="3"] .uia-timeline__group {
	position: relative;
	isolation: isolate;
  }
  
  [data-uia-timeline-skin="3"] .uia-timeline__point {
	background-color: var(--uia-timeline-point-background-color, #fff);
  }
  
  [data-uia-timeline-skin="3"] .uia-timeline__point::before {
	content: "";
	inline-size: 100%;
	block-size: var(--_uia-timeline-line-thickness);
	background-color: var(--uia-timeline-line-color, var(--_uia-timeline-line-color_default));
  
	position: absolute;
	inset-block-start: var(--_uia-timeline-point-line-position);
	inset-inline-start: calc(-1 * var(--_uia-timeline-space));
	z-index: -1;
  }
  
  [data-uia-timeline-skin="3"] .uia-timeline__year {
	inline-size: fit-content;
	padding: var(--uia-timeline-year-padding, .25rem .75rem);
	background-color: var(--uia-timeline-year-background-color, var(--_uia-timeline-line-color_default));
	color: var(--uia-timeline-year-color, #f0f0f0);
  }
  
  [data-uia-timeline-adapter-skin-3="uia-card-skin-#1"] {
	--uia-card-padding: var(--uia-timeline-point-padding, 1.5rem 1.5rem 1.25rem);
	--uia-card-border-thickness:  var(--uia-timeline-point-border-thickness, 3px);
	--uia-card-border-color: var(--uia-timeline-point-border-color, var(--_uia-timeline-line-color_default));   
	--uia-card-background-color: var(--uia-timeline-point-background-color);  
  }
  
  /*
  SKIN 4
  */
  
  [data-uia-timeline-skin="4"] {
	--_uia-timeline-line-color_default: #222;
	--_uia-timeline-space: var(--uia-timeline-space, .5rem);
	--_uia-timeline-line-thickness: var(--uia-timeline-line-thickness, 2px);
	--_uia-timeline-annual-sections-safe-gap: var(--uia-timeline-annual-sections-safe-gap, 1.5rem); 
	--_uia-timeline-point-line-position: var(--uia-timeline-point-line-position, 1rem);
	--_uia-timeline-year-size: var(--uia-timeline-year-size, 3.5rem);
  }
  
  [data-uia-timeline-skin="4"] .uia-timeline__container {
	position: relative;
	gap: var(--uia-timeline-annual-sections-gap, 2.5rem);
  }
  
  [data-uia-timeline-skin="4"] .uia-timeline__line {
	inline-size: var(--_uia-timeline-line-thickness);
	block-size: 100%;
	background-color: var(--uia-timeline-line-color, var(--_uia-timeline-line-color_default));
  
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: calc(var(--_uia-timeline-year-size) / 2);
	transform: translate(-50%);
	z-index: -1;
  }
  
  [data-uia-timeline-skin="4"] .uia-timeline__annual-sections {
	display: flex;
	align-items: flex-start;
	isolation: isolate;
  }
  
  [data-uia-timeline-skin="4"] .uia-timeline__groups {
	padding-inline-start: var(--_uia-timeline-space);
	padding-block-start: calc(var(--_uia-timeline-year-size) + var(--_uia-timeline-annual-sections-safe-gap));
  }
  
  [data-uia-timeline-skin="4"] .uia-timeline__group {
	position: relative;
	isolation: isolate;
  }
  
  [data-uia-timeline-skin="4"] .uia-timeline__point {
	background-color: var(--uia-timeline-point-background-color, #fff);
  }
  
  [data-uia-timeline-skin="4"] .uia-timeline__point::before {
	content: "";
	inline-size: 100%;
	block-size: var(--_uia-timeline-line-thickness);
	background-color: var(--uia-timeline-line-color, var(--_uia-timeline-line-color_default));
  
	position: absolute;
	inset-block-start: var(--_uia-timeline-point-line-position);
	inset-inline-start: calc(-1 * (var(--_uia-timeline-space) + var(--_uia-timeline-year-size) / 2));
	z-index: -1;
  }
  
  [data-uia-timeline-skin="4"] .uia-timeline__year {
	box-sizing: border-box;
	flex: none;
	inline-size: var(--_uia-timeline-year-size);
	block-size: var(--_uia-timeline-year-size);
	
	border: 
	  var(--uia-timeline-year-line-thickness, var(--_uia-timeline-line-thickness)) 
	  var(--uia-timeline-year-line-style, solid) 
	  var(--uia-timeline-line-color, var(--_uia-timeline-line-color_default));
	border-radius: 50%;
	
	display: grid;
	place-items: center;
	background-color: var(--uia-timeline-year-background-color, #f0f0f0);
	
	font-size: var(--uia-timeline-year-font-size, .75rem);
	color: var(--uia-timeline-year-color, #222);
  }
  
  [data-uia-timeline-adapter-skin-4="uia-card-skin-#1"] {
	--uia-card-padding: var(--uia-timeline-point-padding, 1.5rem 1.5rem 1.25rem);
	--uia-card-border-thickness:  var(--uia-timeline-point-border-thickness, 3px);
	--uia-card-border-color: var(--uia-timeline-point-border-color, var(--_uia-timeline-line-color_default)); 
	--uia-card-background-color: var(--uia-timeline-point-background-color);  
  }
  
  /*
  SKIN 5
  */
  
  [data-uia-timeline-skin="5"] {
	--_uia-timeline-line-color_default: #222;
	--_uia-timeline-line-thickness: var(--uia-timeline-line-thickness, 3px);
	--_uia-timeline-line-calculation: calc(var(--_uia-timeline-dot-size) / 2  - calc(var(--_uia-timeline-line-thickness) / 2));
	--_uia-timeline-line-position: var(--uia-timeline-line-position, 0px);
  
	--_uia-timeline-minimal-gap: var(--uia-timeline-minimal-gap, .5rem);
	--_uia-timeline-space: calc(var(--_uia-timeline-dot-size) + var(--_uia-timeline-dot-size) / 2 + var(--_uia-timeline-minimal-gap));
  
	--_uia-timeline-dot-size: var(--uia-timeline-dot-size, 1rem);
  }
  
  [data-uia-timeline-skin="5"] .uia-timeline__container {
	position: relative;
	padding-inline-start: var(--_uia-timeline-space);
  }
  
  [data-uia-timeline-skin="5"] .uia-timeline__line {
	border-inline-start: var(--_uia-timeline-line-thickness) solid var(--uia-timeline-line-color, var(--_uia-timeline-line-color_default));
	block-size: calc(100% - var(--_uia-timeline-line-position));
  
	position: absolute;
	inset-block-start: var(--_uia-timeline-line-position);
	inset-inline-start: var(--uia-timeline-line-main-position,  var(--_uia-timeline-line-calculation));
  }
  
  [data-uia-timeline-skin="5"] .uia-timeline__group {
	position: relative;
	isolation: isolate;
  }
  
  [data-uia-timeline-skin="5"] .uia-timeline__dot {
	box-sizing: border-box;
	font-size: var(--_uia-timeline-dot-size);
  
	border-radius: 50%;
	box-shadow: 0 0 0
	  var(--uia-timeline-dot-border-thickness, 1px)  
	  var(--uia-timeline-dot-border-color, var(--_uia-timeline-line-color_default));
	border: .5em solid var(--uia-timeline-dot-color, var(--_uia-timeline-line-color_default));
  
	position: absolute;
	inset-block-start: var(--uia-timeline-dot-position, -1px);
	inset-inline-start: var(--uia-timeline-dot-main-position, calc(-1 * var(--_uia-timeline-space)));
  } 
  
  [data-uia-timeline-skin="5"] .uia-timeline__group:last-child::after {
	content: "";
	inline-size: calc(var(--_uia-timeline-line-thickness) + var(--uia-timeline-line-mask-thickness, 4px));
	block-size: calc(100% - var(--_uia-timeline-line-position) - var(--_uia-timeline-dot-size) / 2);
	background-color: var(--uia-timeline-line-mask-color);
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: var(--_uia-timeline-line-mask-main-position, calc((var(--_uia-timeline-space) - var(--_uia-timeline-dot-size) / 2) * -1));
	transform: translate(-50%); 
	z-index: -1;
  }
  
  [data-uia-timeline-skin="5"] {
	container-type: inline-size;
	container-name: timeline-skin-5;
  }
  
  @container timeline-skin-5 (min-width: 600px) {
  
	[data-uia-timeline-skin="5"] .uia-timeline__container {
	  --uia-timeline-line-main-position: calc(50% - (var(--uia-timeline-line-thickness) / 2));  
	  --uia-timeline-dot-main-position: 50%;
	  --_uia-timeline-space: 0;
	}
  
	[data-uia-timeline-skin="5"] .uia-timeline__point {
	  max-inline-size: 45%;
	}
  
	[data-uia-timeline-skin="5"] .uia-timeline__group:nth-child(even) .uia-timeline__point {
	  margin-inline-start: auto;
	}
  
	[data-uia-timeline-skin="5"] .uia-timeline__group:nth-child(odd) .uia-timeline__point {
	  text-align: end;    
	}
  
	[data-uia-timeline-skin="5"] .uia-timeline__dot {
	  transform: translateX(-50%);
	}
  
	[data-uia-timeline-skin="5"] .uia-timeline__group:last-child::after {
	  --_uia-timeline-line-mask-main-position: var(--uia-timeline-line-main-position);
	}
  }
  
  [data-uia-timeline-adapter-skin-5="uia-card"] {
	--uia-card-content-gap: var(--uia-timeline-content-gap, .5rem);  
  }
  
  /*
  =====
  RESET
  =====
  */
  
  :where(.ra-link) {
	display: var(--ra-link-display, inline-flex);
  }
  
  :where(.ra-link[href]) {
	color: var(--ra-link-color, inherit);
	text-decoration: var(--ra-link-text-decoration, none);
  }
  
  :where(.ra-heading) {
	margin-block-start: var(--ra-heading-margin-block-start, 0);
	margin-block-end: var(--ra-heading-margin-block-end, 0);
  }
  
  /*
  =====
  HELPERS
  =====
  */
  
  .ha-screen-reader {
	width: var(--ha-screen-reader-width, 1px);
	height: var(--ha-screen-reader-height, 1px);
	padding: var(--ha-screen-reader-padding, 0);
	border: var(--ha-screen-reader-border, none);
  
	position: var(--ha-screen-reader-position, absolute);
	clip-path: var(--ha-screen-reader-clip-path, rect(1px, 1px, 1px, 1px));
	overflow: var(--ha-screen-reader-overflow, hidden);
  }
  
  /*
  =====
  UIA-CARD
  =====
  */
  
  .uia-card__container {
	display: var(--uia-card-display, grid);
	gap: var(--uia-card-content-gap);

  }
  
  .uia-card__time-divider::before {
	content: "—";
	margin-inline: var(--uia-card-time-divider-margin-inline, .15rem);
  }
  
  [data-uia-card-skin="1"] .uia-card__container {
	padding: var(--uia-card-padding, 1rem 1.75rem);
	background-color: var(--uia-card-background-color);
	border-radius: var(--uia-card-border-radius, 2px);
  }
  
  [data-uia-card-skin="1"] .uia-card__intro {
	display: grid;
	gap: var(--uia-card-intro-gap, 1rem);
  }
  
  [data-uia-card-skin="1"] .uia-card__time {
	grid-row: 1 / 1;
	inline-size: fit-content;
	padding: var(--uia-card-time-padding, .25rem 1.25rem .25rem);
	background-color: var(--uia-card-time-background-color, #f0f0f0);
  
	font-weight: var(--uia-card-time-font-weight, 700);
	font-size: var(--uia-card-time-font-size, .75rem);
	text-transform: var(--uia-card-time-text-transform, uppercase);
	color: var(--uia-card-time-color, currentColor);
  }
  
  [data-uia-card-skin="1"][data-uia-card-mod="1"] .uia-card__container {
	border-inline-start:  var(--uia-card-border-thickness, 2px) var(--uia-card-border-style, solid) var(--uia-card-border-color, currentColor);
	box-shadow: var(--uia-card-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24));
  }
  
  /*
  =====
  UIA-CONTROL
  =====
  */
  
  .uia-control__group {
	cursor: var(--uia-control-cursor, var(--_uia-control-cursor, pointer)); 
	line-height: var(--uia-control-line-height, 1);
  }
  
  .uia-control {
	--_uia-control-padding_default: 0;
  
	--_uia-control-border-width: var(--uia-control-border-width);
	--_uia-control-border-style: var(--uia-control-border-style, solid);
	--_uia-control-border-color: var(--uia-control-border-color, currentColor);
  
	--_uia-control-padding: var(--uia-control-padding,
							  var(
								--uia-control-padding-block-start,
								var(--_uia-control-padding_default)
							  )
							  var(
								--uia-control-padding-inline-end,
								var(--_uia-control-padding_default)
							  )
							  var(
								--uia-control-padding-block-end, 
								var(--_uia-control-padding_default)
							  )
							  var(
								--uia-control-padding-inline-start,
								var(--_uia-control-padding_default)
							  )
							);
	--_uia-control-border: var(--_uia-control-border-width) var(--_uia-control-border-style) var(--_uia-control-border-color);
	--_uia-control-border-radius: var(--uia-control-border-radius, .25rem);
  }
  
  .uia-control__group {
	display: var(--uia-control-display, inline-flex);
	gap: var(--uia-control-gap, .5rem);
	
	padding: var(--_uia-control-padding);
  
	border: var(--_uia-control-border);
	border-radius: var(--_uia-control-border-radius);
	background-image: linear-gradient(
	  var(--uia-control-background-degree, 135deg),
	  var(
		--uia-control-background-start-color,
		var(--uia-control-background-color)
	  ) var(--uia-control-background-start-position, 0),
	  var(
		--uia-control-background-end-color,
		var(--uia-control-background-color)
	  ) var(--uia-control-background-end-position, 100%)
	);
  }
  
  /*
  =====
  TYPOGRAPHY
  =====
  */
  
 
  
  p:not([class]) {
	margin-block: var(--ds-typography-paragraph-margin-block-start, var(--_ds-typography-main-margin)) 0;
  }
  
  /*
  =====
  DEMO
  =====
  */
  
  :root {
	--uia-timeline-line-color: #011a48;
	--uia-timeline-dot-color: #ffc32c;
	--uia-timeline-arrow-color: #011a48;
	--uia-timeline-line-thickness: 3px;
	--uia-timeline-point-border-color: #ffc32c;
	--uia-timeline-group-padding: 1.5rem 1.5rem 1.25rem;


	
	--ds-typography-main-line-height: 1.5;
  }
  
  .timeline-5-2 {
	--uia-timeline-line-mask-color: #f0f0f0
  }
  
  [data-uia-timeline-skin="3"] {
	--uia-timeline-year-background-color: #011a48;
  }
  
  .ciyotalimelinepage {
	
	margin: 0;
	display: flex;
	flex-direction: column;
	color: #858585;
   
	
  }
  .ciyotayeartime{
	font-weight: bold;
	color: #ffc32c;
  }

  .page {
	box-sizing: border-box;
	inline-size: min(100%, 90ch);
	padding: 0rem 2rem 3rem;
	margin-inline: auto;
  }
  
  .linktr {
	--uia-control-background-color: rgb(209, 246, 255);
	--uia-control-border-radius: 2rem;
	--uia-control-padding: .75rem 1.5rem;
	--uia-control-border-width: 1px;
	--uia-control-border-color: rgb(209, 246, 255);
	
	display: flex;
	justify-content: flex-end;
	padding: 2rem;
	text-align: center;
  }
  
  .linktr__goal { 
	box-shadow: rgb(8 49 112 / 24%) 0 2px 8px 0;  
  }

  /* timeline-ciyota-banners
  ============================= */
  
.timeline-ciyota-banners {
    width: 100%;
    max-width: 1200px; /* You can adjust this based on your needs */
    margin: 0 auto;
    overflow: hidden; /* Prevents image overflow */
    position: relative;
}

/* Image styles */
.timeline-ciyota-banners img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* Maintains aspect ratio while covering container */
}

/* Media queries for different screen sizes */
@media screen and (max-width: 768px) {
    .timeline-ciyota-banners {
        max-width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .timeline-ciyota-banners {
        margin: 0; /* Removes margin on mobile */
    }
}

/*timeline Small images
=======================*/
.ciyotatimelineim-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

.ciyotatimelineim-row {
	display: flex;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
}

.ciyotatimelineim-wrapper {
	flex: 1;
	min-width: 200px;
	max-width: 350px;
}

.ciyotatimelineim-image {
	width: 100%;
	height: 300px;
	object-fit: cover;
	border-radius: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.ciyotatimelineim-wrapper {
		min-width: 100%;
	}
	
	.ciyotatimelineim-image {
		height: 250px;
	}
}
/*style mission short
=======================*/
.ciyotamission-short-container {
	max-width: 1200px;
	margin: 2rem auto;
	width: 100%;
	box-sizing: border-box;
  }
  
  .ciyotamission-short-section {
	background-color: #10235e;
	border-left: 5px solid #ffc32c;
	padding: 2rem;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
  }
  
  .ciyotamission-short-paragraph {
	margin: 0;
	position: relative;
  }
  
  .ciyotamission-short-paragraph::before {
	content: '"';
	font-size: clamp(3rem, 5vw, 4rem);
	color: #ffc32c;
	opacity: 0.3;
	position: absolute;
	left: -1rem;
	top: -1rem;
  }
  
  .ciyotamission-short-paragraph::after {
	content: '"';
	font-size: clamp(3rem, 5vw, 4rem);
	color: #ffc32c;
	opacity: 0.3;
	position: absolute;
	right: -1rem;
	bottom: -2rem;
  }
  
  /* Media Queries */
  @media screen and (max-width: 768px) {
	.ciyotamission-short-container {
	  padding: 1rem;
	  margin: 1rem auto;
	}
	
	.ciyotamission-short-section {
	  padding: 1.5rem;
	}
  }
  
  @media screen and (max-width: 480px) {
	.ciyotamission-short-container {
	  padding: 0.5rem;
	}
	
	.ciyotamission-short-section {
	  padding: 1rem;
	  border-left-width: 3px;
	}
	
	.ciyotamission-short-paragraph::before,
	.ciyotamission-short-paragraph::after {
	  font-size: 2.5rem;
	}
  }
  
  /* Dark mode support */
  @media (prefers-color-scheme: dark) {
	.ciyotamission-short-section {
	  background-color: #10235e;
	}
	
	.ciyotamission-short-paragraph {
	  color: #ffffff;
	}
  }
  .whysectionciyota{
	margin-bottom: 2em;
  }



 /* Impact in numbers
 ===================== */
.impactciyotasect-featured {
    padding: 40px 0;
    background-color: #b9d2f3;
}

/* Container styling */
.impactciyotasect-featured .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Text content wrapper */
.impactciyotasect-featured .about-us-des {
    margin-bottom: 50px;
    line-height: 1.8;
    color: #000000;
}

.impactciyotasect-featured .about-us-des p {
    margin-bottom: 20px;
    
}

/* Stats section styling */
.impactciyotasect-featured .tt-count {
    margin-bottom: 40px;
}

/* Individual stat box */
.impactciyotasect-featured .fun-facts-item {
    background: #10235e;
    padding: 30px 20px;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}


/* Content wrapper */
.impactciyotasect-featured .fun-facts-item .des {
    position: relative;
    z-index: 2;
    
    padding: 15px;
    border-radius: 6px;
    backdrop-filter: blur(5px);
}

.impactciyotasect-featured .fun-facts-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(252, 235, 2, 0.3);
}

/* Numbers styling */
.impactciyotasect-featured .fun-facts-item h3 {
    font-size: 36px;
    font-weight: 700;
    color: #ffc32c;
    margin-bottom: 15px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Description text styling */
.impactciyotasect-featured .fun-facts-item p {
    font-size: 15px;
    color: #fff;
    margin: 0;
    line-height: 1.5;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* Icon styling */
.impactciyotasect-featured .fun-facts-icon {
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}

.impactciyotasect-featured .fun-facts-icon i {
    font-size: 40px;
    color: #fff;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .impactciyotasect-featured .fun-facts-item {
        margin-bottom: 30px;
        min-height: 180px;
    }
}

@media (max-width: 767px) {
    .impactciyotasect-featured {
        padding: 50px 0;
    }

    .impactciyotasect-featured .fun-facts-item {
        min-height: 150px;
    }

    .impactciyotasect-featured .fun-facts-item h3 {
        font-size: 30px;
    }

    .impactciyotasect-featured .fun-facts-item p {
        font-size: 18px;
    }
}

/* Animation for numbers */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.impactciyotasect-featured .timer {
    animation: countUp 1s ease-out forwards;
}


/* Button of Know more about CIYOTA from Homa page
===================================================*/
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px; /* Add padding for small screens */
    box-sizing: border-box; /* Include padding in total width/height */
}

/* Style the button */
.moreaboutciyotabtn {
    display: inline-block; /* Make the link behave like a button */
    text-decoration: none; /* Remove underline */
    background-color: #10235e; /* Green background */
    color: #ffc32c; /* White text */
	font-weight: bold;
    border: none; /* No border */
    padding: 12px 5%; /* Scalable padding */
    
    
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: all 0.3s ease; /* Smooth transition effect */
    max-width: 300px; /* Restrict maximum width */
    text-align: center; /* Center text */
}

/* Hover effects */
.moreaboutciyotabtn:hover {
    background-color: #ffc32c; /* Slightly darker green */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Enhance shadow */
    transform: translateY(-2px); /* Lift on hover */
	color: #10235e;
	font-weight: bold;
}

/* Active (clicked) effects */
.moreaboutciyotabtn:active {
    background-color: #3e8e41; /* Darker green when clicked */
    transform: translateY(0); /* Reset lift */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduced shadow */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .moreaboutciyotabtn {
        font-size: 18px; /* Smaller font size for smaller screens */
        padding: 10px 5%; /* Adjust padding */
    }
}

@media (max-width: 480px) {
    .moreaboutciyotabtn {
        font-size: 14px; /* Even smaller font size for very small screens */
        padding: 8px 4%; /* Adjust padding further */
        max-width: 90%; /* Allow wider button on small screens */
    }
}

/* Basic layout and design for the ourworks section 
======================================================*/
.ourworks {
    max-width: 100%;
    margin: 0 auto;
    padding: 4rem 2rem;
	
  }

  .ourworks-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
  }

  .ourworks-paragraph {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 2rem;
    line-height: 1.6;
  }

  .ourworks-divider {
    height: 4px;
    background-color: #3498db;
    width: 100px;
    margin: 0 auto 3rem;
  }

  .ourworks-boxes {
    display: flex;
    gap: 2rem;
    justify-content: center;
	
  }

  .ourworks-box {
    flex: 1;
    max-width: 400px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;

  }

  .ourworks-box img {
    width: 100%;
    height: 250px;
    object-fit: cover;
  }

  .ourworks-box-content {
    padding: 2rem;
    text-align: center; /* Center all content */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
	color: black;
  }

  .ourworks-box-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  .ourworks-box-paragraph {
    margin-bottom: 1.5rem;
    line-height: 1.5;
  }

  .ourworks-box-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #10235e;
    color: #ffc32c;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
    margin: 0 auto; /* Center button horizontally */
  }

  .ourworks-box-button:hover {
    background-color: #ffc32c;
	color: #10235e;
	font-weight: bold;
  }

  @media (max-width: 768px) {
    .ourworks-boxes {
      flex-direction: column;
      align-items: center;
    }

    .ourworks-box {
      width: 100%;
    }
  }


  /*CIYOTA PARTNERS SECTION
  ===========================*/
  .ciyotapartners-section {
	padding: 4rem 2rem;
	background: #ffffff;
	max-width: 1200px;
	margin: 0 auto;
	overflow: hidden;
  }

  .ciyotapartners-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 2rem;
  }

  .ciyotapartners-title {
	font-size: 2.8rem;
	font-weight: 700;
	margin: 0;
  }

  .ciyotapartners-divider {
	flex: 1;
	height: 3px;
	background: #ffc32c;
  }
  .ciyotapartners-divider2 {
	flex: 1;
	height: 3px;
	background: #10235e;
  }
  .ciyotapartners-divider3 {
	flex: 1;
	height: 3px;
	background: #10235e;
  }

  .ciyotapartners-description {
	font-size: 1.8rem;
	color: black;
	max-width: 800px;
	margin: 0 auto 3rem;
	text-align: left;

  }

  .ciyotapartners-carousel {
	overflow: hidden;
	position: relative;
	padding: 1rem 0;
	margin: 0 -1rem;
  }

  .ciyotapartners-track {
	display: flex;
	animation: scroll 80s linear infinite;
	width: calc(180px * 32); /* Accommodates original set + duplicate */
  }

  .ciyotapartners-track:hover {
	animation-play-state: paused;
  }

  .ciyotapartners-logo {
	width: 180px;
	padding: 1rem;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
  }

  .ciyotapartners-logo img {
	max-width: 180px;
	max-height: 100px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(100%);
	transition: filter 0.3s ease, transform 0.3s ease;
  }

  .ciyotapartners-logo img:hover {
	filter: grayscale(0%);
	transform: scale(1.05);
  }

  @keyframes scroll {
	0% {
	  transform: translateX(0);
	}
	100% {
	  transform: translateX(calc(-180px * 16)); /* Moves by the width of original set */
	}
  }

  @media (max-width: 768px) {
	.ciyotapartners-section {
	  padding: 3rem 1rem;
	}

	.ciyotapartners-title {
	  font-size: 2.5rem;
	  text-align: center;
	}
	
	.ciyotapartners-description {
	  font-size: 1.8rem;
	}
	
	.ciyotapartners-logo {
	  width: 150px;
	  
	}
	
	.ciyotapartners-logo img {
	  max-width: 130px;
	  max-height: 90px;
	}
	.ciyotapartners-divider{
		display: none;
	}
	.ciyotapartners-divider2{
		display: none;
	}
  }

  /*report and resources section
  ==============================*/


.ciyotareports-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin-top: 20px;
}

.ciyotareports-card {
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	padding: 15px;
	transition: transform 0.3s ease;
	display: flex;
	flex-direction: column;
}

.ciyotareports-title {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #333;
	text-align: center;
}

.ciyotareports-date {
	font-size: 14px;
	color: #666;
	margin-bottom: 15px;
	text-align: center;
}

/* Updated action buttons styling */
.ciyotareports {
	padding: 20px;
	max-width: 1200px;
	margin: 0 auto;
}

.ciyotareports-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin-top: 20px;
}

.ciyotareports-card {
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	padding: 15px;
	transition: transform 0.3s ease;
	display: flex;
	flex-direction: column;
}

.ciyotareports-title {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #10235e;
	text-align: center;
}

.ciyotareports-date {
	font-size: 14px;
	color: #666;
	margin-bottom: 15px;
	text-align: center;
}

.ciyotareports-preview {
	width: 100%;
	height: 210px;
	margin: 10px 0;
	border: 1px solid #ddd;
	border-radius: 4px;
	overflow: hidden;
}

.ciyotareports-preview object,
.ciyotareports-preview embed {
	width: 100%;
	height: 100%;
}

.ciyotareports-actions {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 15px;
}

.ciyotareports-button {
	padding: 8px 16px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	transition: all 0.3s ease;
	text-decoration: none;
	min-width: 100px;
}

.ciyotareports-view {
	background-color: #10235e;
	color: #ffc32c;
}

.ciyotareports-download {
	background-color: #10235e;
	color: #ffc32c;
}


.ciyotareports-button:hover {
	background-color: #ffc32c;
	color: #10235e;
	font-weight: bold;
}

.ciyotareports-button:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Modal styles */
.ciyotareports-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 1000;
}

.ciyotareports-modal-content {
	position: relative;
	width: 90%;
	height: 90%;
	margin: 2% auto;
	background: white;
	padding: 20px;
	border-radius: 8px;
}

.ciyotareports-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	margin-bottom: 15px;
	border-bottom: 1px solid #ddd;
}

.ciyotareports-modal-title {
	font-size: 1.2rem;
	font-weight: bold;
	color: #333;
}

.ciyotareports-modal-close-btn {
	padding: 8px 16px;
	background-color: #10235e;
	color: #ffc32c;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: all 0.3s ease;
}

.ciyotareports-modal-close-btn:hover {
	background-color: #ffc32c;
	color:#10235e;
	font-weight: bold;
	transform: translateY(-2px);
}

.ciyotareports-modal-close-btn:active {
	transform: translateY(0);
}

.ciyotareports-modal-pdf-container {
	height: calc(100% - 60px);
	width: 100%;
}

.ciyotareports-modal-pdf-container object,
.ciyotareports-modal-pdf-container embed {
	width: 100%;
	height: 100%;
	border: 1px solid #ddd;
	border-radius: 4px;
}

@media (max-width: 768px) {
	.ciyotareports-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ciyotareports-button {
		width: 100%;
	}
}

/*CIYOTA impact dashboard
===========================*/
.ciyota-big-data-dash {
	
	background-color: #ffffff;
	padding: 0px;
}

.ciyota-big-data-dash-container {
	max-width: 1200px;
	margin: 0 auto;
}

.ciyota-big-data-dash-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    gap: 20px;
}

.ciyota-big-data-dash-title {
	text-align: left;
	font-size: 35px;
	margin-bottom: 30px;
}

.ciyota-big-data-dash-download-btn {
	background-color: #4CAF50;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: background-color 0.3s;
}

.ciyota-big-data-dash-download-btn:hover {
	background-color: #45a049;
}

.ciyota-big-data-dash-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
	margin-bottom: 30px;
}

.ciyota-big-data-dash-card {
	background: white;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Card border colors */
.ciyota-impact-primary { border-top: 4px solid #4CAF50; }
.ciyota-impact-secondary { border-top: 4px solid #2196F3; }
.ciyota-impact-university { border-top: 4px solid #9C27B0; }
.ciyota-impact-community { border-top: 4px solid #FF9800; }
.ciyota-impact-refugees { border-top: 4px solid #E91E63; }
.ciyota-impact-ugandans { border-top: 4px solid #673AB7; }
.ciyota-impact-idps { border-top: 4px solid #00BCD4; }
.ciyota-impact-skills { border-top: 4px solid #ff2600; }

.ciyota-big-data-dash-card-title {
	font-size: 1.8rem;
	
	margin-bottom: 15px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
    
}

.ciyota-big-data-dash-card-title i {
	font-size: 1.2em;
}

/* Icon colors */
.ciyota-impact-primary i { color: #4CAF50; }
.ciyota-impact-secondary i { color: #2196F3; }
.ciyota-impact-university i { color: #9C27B0; }
.ciyota-impact-community i { color: #FF9800; }
.ciyota-impact-refugees i { color: #E91E63; }
.ciyota-impact-ugandans i { color: #673AB7; }
.ciyota-impact-idps i { color: #00BCD4; }
.ciyota-impact-skills i { color: #ff2600; }

.ciyota-big-data-dash-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	text-align: center;
    color: #000000;
}

.ciyota-big-data-dash-stat-box {
	padding: 10px;
}

.ciyota-big-data-dash-stat-label {
	font-size: 1em;
	color: #000000;
	margin-bottom: 5px;
}

.ciyota-big-data-dash-stat-value {
	font-size: 1.4em;
	font-weight: bold;
}

.ciyota-big-data-dash-girls { color: #10235e; }
.ciyota-big-data-dash-boys { color: #79acf7; }

.ciyota-big-data-dash-total {
	grid-column: span 2;
	border-top: 1px solid #eee;
	padding-top: 15px;
	margin-top: 10px;
}

.ciyota-big-data-dash-chart {
	background: white;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	margin-top: 30px;
}

@media (max-width: 768px) {
	.ciyota-big-data-dash-grid {
		grid-template-columns: 1fr;
	}

	.ciyota-big-data-dash-header {
		flex-direction: column;
		align-items: stretch;
	}

	.ciyota-big-data-dash-download-btn {
		align-self: flex-end;
	}

}
/*view for more impact button on home
=====================================*/
.impactformore{
	text-align: center;
	padding: 1px;
}


/*Enrolment dashboard
========================*/
.ciyota-enrol-data-dashboard {
	max-width: 1400px;
	margin: 0 auto;
}

.ciyota-enrol-data-summary {
	padding: 2rem;
	border-radius: 0.5rem;
	color: #ffc32c;
	margin-bottom: 2rem;
	text-align: center;
}

.ciyota-enrol-data-total-counter {
	font-size: 4rem;
	font-weight: bold;
	margin: 1rem 0;
}

.ciyota-enrol-data-download-buttons {
	display: flex;
	gap: 1rem;
	justify-content: flex-end;
	margin-bottom: 1rem;
	font-weight: bold;
}

.ciyota-enrol-data-button {
	background-color: #2563eb;
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 0.375rem;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	transition: background-color 0.2s;
}

.ciyota-enrol-data-button:hover {
	background-color: #1d4ed8;
}

.ciyota-enrol-data-button svg {
	width: 1.25rem;
	height: 1.25rem;
}

.ciyota-enrol-data-program {
	background: white;
	border-radius: 0.5rem;
	padding: 1.5rem;
	margin-bottom: 2rem;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ciyota-enrol-data-grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 1.5rem;
	margin-top: 1rem;
}

@media (min-width: 768px) {
	.ciyota-enrol-data-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	
}

@media (min-width: 1024px) {
	.ciyota-enrol-data-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ciyota-enrol-data-card {
	padding: 1.5rem;
	border-radius: 0.5rem;
	height: 100%;
}

.ciyota-enrol-data-total {
	background-color: #eff6ff;
}

.ciyota-enrol-data-gender {
	background-color: #ecfdf5;
}

.ciyota-enrol-data-nationality {
	background-color: #fefce8;
}

.ciyota-enrol-data-title {
	font-size: 1.75rem;
	font-weight: bold;
	color: #1f2937;
	margin-bottom: 1.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid #e5e7eb;
}

.ciyota-enrol-data-subtitle {
	font-size: 1.7rem;
	font-weight: 600;
	margin-bottom: 1rem;
	color: #000000;
}

.ciyota-enrol-data-number {
	font-size: 2.5rem;
	font-weight: bold;
	color: #2563eb;
	text-align: center;
	margin: 1rem 0;
}

.ciyota-enrol-data-table-wrapper {
	margin-top: 2rem;
	grid-column: 1 / -1;
	overflow: hidden;
	border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ciyota-enrol-data-table {
	width: 100%;
	border-collapse: collapse;
	background: white;
}

.ciyota-enrol-data-table th,
.ciyota-enrol-data-table td {
	padding: 1rem;
	text-align: left;
	border-bottom: 1px solid #e5e7eb;
}

.ciyota-enrol-data-table th {
	background-color: #f3f4f6;
	font-weight: 600;
	color: #000000;
	white-space: nowrap;
}

.ciyota-enrol-data-table td {
	vertical-align: middle;
}

.ciyota-enrol-data-chart-container {
	position: relative;
	height: 250px;
	width: 100%;
	max-height: 250px;
	margin-top: 1rem;
}

.ciyota-enrol-data-table tr:hover {
	background-color: #f9fafb;
}

@media (max-width: 768px) {
	.ciyota-enrol-data-table-wrapper {
		overflow-x: auto;
		margin: 1rem -1rem;
		padding: 0 1rem;
	}

	.ciyota-enrol-data-table {
		min-width: 600px;
	}
	.ciyota-enrol-data-download-buttons{
		display: none;
	}
}
@media print {
    .ciyota-enrol-data-dashboard {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .ciyota-enrol-data-download-buttons {
        display: none !important;
    }
}


/*autodate
============*/
.ciyota-date-time {
    font-family: Arial, sans-serif;
    font-size: 18px;
   
    text-align: center;
    margin-top: 10px;
	font-weight: bold;
}

/* Theory of Chang
====================*/
.ciyotatheoryofchange {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 2rem;
	display: flex;
	gap: 2rem;
	justify-content: space-between;
	align-items: flex-start;
  }
  
  .ciyotatheoryofchange-box {
	border: 2px solid #333;
	padding: 2rem;
	position: relative;
	flex: 1;
	min-width: 0;
	background-color: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
  }
  
  .ciyotatheoryofchange h2 {
	text-align: center;
	margin-bottom: 2rem;
	color: #333;
	font-size: 1.5rem;
	font-weight: bold;
  }
  
  .ciyotatheoryofchange h3 {
	color: #444;
	font-size: 1.2rem;
	margin-bottom: 1rem;
  }
  
  .ciyotatheoryofchange-columns {
	display: flex;
	gap: 2rem;
	justify-content: space-between;
  }
  
  .ciyotatheoryofchange-column {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2rem;
  }
  
  .ciyotatheoryofchange-content {
	display: flex;
	flex-direction: column;
	gap: 2rem;
  }
  
  .ciyotatheoryofchange section {
	border: 1px solid #ddd;
	padding: 1.5rem;
	position: relative;
	background-color: #f8f8f8;
	border-radius: 8px;
	transition: all 0.3s ease;
  }
  
  .ciyotatheoryofchange section:hover {
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
  }
  
  .ciyotatheoryofchange-arrow-container {
	position: relative;
	margin-bottom: 30px;
  }
  
  /* Modern Arrow Styles */
  .ciyotatheoryofchange-arrow-down,
  .ciyotatheoryofchange-arrow-up,
  .ciyotatheoryofchange-arrow-right {
	position: absolute;
	width: 40px;
	height: 40px;
	pointer-events: none;
	z-index: 2;
  }
  
  /* Line styles for all arrows */
  .ciyotatheoryofchange-arrow-down::before,
  .ciyotatheoryofchange-arrow-up::before,
  .ciyotatheoryofchange-arrow-right::before {
	content: '';
	position: absolute;
	background: #2563eb;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Arrowhead styles for all arrows */
  .ciyotatheoryofchange-arrow-down::after,
  .ciyotatheoryofchange-arrow-up::after,
  .ciyotatheoryofchange-arrow-right::after {
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 8px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Down Arrow Specific Styles */
  .ciyotatheoryofchange-arrow-down {
	bottom: -35px;
	left: 50%;
	transform: translateX(-50%);
  }
  
  .ciyotatheoryofchange-arrow-down::before {
	width: 3px;
	height: 25px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(to bottom, #2563eb, #1d4ed8);
  }
  
  .ciyotatheoryofchange-arrow-down::after {
	bottom: -4px;
	left: 50%;
	transform: translateX(-50%);
	border-color: #2563eb transparent transparent transparent;
  }
  
  /* Up Arrow Specific Styles */
  .ciyotatheoryofchange-arrow-up {
	top: -35px;
	left: 50%;
	transform: translateX(-50%);
  }
  
  .ciyotatheoryofchange-arrow-up::before {
	width: 3px;
	height: 25px;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(to top, #2563eb, #1d4ed8);
  }
  
  .ciyotatheoryofchange-arrow-up::after {
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	border-color: transparent transparent #2563eb transparent;
  }
  
  /* Right Arrow Specific Styles */
  .ciyotatheoryofchange-arrow-right {
	right: -35px;
	top: 50%;
	transform: translateY(-50%);
  }
  
  .ciyotatheoryofchange-arrow-right::before {
	width: 25px;
	height: 3px;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	background: linear-gradient(to right, #2563eb, #1d4ed8);
  }
  
  .ciyotatheoryofchange-arrow-right::after {
	right: -4px;
	top: 50%;
	transform: translateY(-50%);
	border-color: transparent transparent transparent #2563eb;
  }
  
  /* Special Work Section Arrows */
  .ciyotatheoryofchange-work .ciyotatheoryofchange-inputs {
	position: relative;
  }
  
  .ciyotatheoryofchange-work .ciyotatheoryofchange-inputs::after {
	content: '';
	position: absolute;
	right: -20px;
	top: 50%;
	width: 40px;
	height: 3px;
	background: linear-gradient(to right, #2563eb, #1d4ed8);
	transform: translateY(-50%);
	z-index: 1;
  }
  
  .ciyotatheoryofchange-work .ciyotatheoryofchange-inputs::before {
	content: '';
	position: absolute;
	right: -28px;
	top: 50%;
	border-style: solid;
	border-width: 8px;
	border-color: transparent transparent transparent #2563eb;
	transform: translateY(-50%);
	z-index: 1;
  }
  
  /* Assumptions and Big Idea Downward Arrows */
  .ciyotatheoryofchange-work .ciyotatheoryofchange-assumptions,
  .ciyotatheoryofchange-work .ciyotatheoryofchange-bigidea {
	position: relative;
	margin-bottom: 40px;
  }
  
  .ciyotatheoryofchange-work .ciyotatheoryofchange-assumptions::after,
  .ciyotatheoryofchange-work .ciyotatheoryofchange-bigidea::after {
	content: '';
	position: absolute;
	bottom: -25px;
	left: 50%;
	width: 3px;
	height: 25px;
	background: linear-gradient(to bottom, #2563eb, #1d4ed8);
	transform: translateX(-50%);
	z-index: 1;
  }
  
  .ciyotatheoryofchange-work .ciyotatheoryofchange-assumptions::before,
  .ciyotatheoryofchange-work .ciyotatheoryofchange-bigidea::before {
	content: '';
	position: absolute;
	bottom: -33px;
	left: 50%;
	border-style: solid;
	border-width: 8px;
	border-color: #2563eb transparent transparent transparent;
	transform: translateX(-50%);
	z-index: 1;
  }
  
  /* Mission to Impact Connection */
  .ciyotatheoryofchange-work .ciyotatheoryofchange-mission {
	position: relative;
  }
  
  .ciyotatheoryofchange-work .ciyotatheoryofchange-mission .ciyotatheoryofchange-arrow-right {
	right: -45px;
  }
  
  .ciyotatheoryofchange-work .ciyotatheoryofchange-mission .ciyotatheoryofchange-arrow-right::before {
	width: 35px;
  }
  
  /* Hover Effects */
  .ciyotatheoryofchange-arrow-container:hover .ciyotatheoryofchange-arrow-down::before,
  .ciyotatheoryofchange-arrow-container:hover .ciyotatheoryofchange-arrow-up::before,
  .ciyotatheoryofchange-arrow-container:hover .ciyotatheoryofchange-arrow-right::before {
	background: #1d4ed8;
  }
  
  .ciyotatheoryofchange-work .ciyotatheoryofchange-assumptions:hover::after,
  .ciyotatheoryofchange-work .ciyotatheoryofchange-bigidea:hover::after {
	background: #1d4ed8;
  }
  
  .ciyotatheoryofchange-work .ciyotatheoryofchange-assumptions:hover::before,
  .ciyotatheoryofchange-work .ciyotatheoryofchange-bigidea:hover::before {
	border-top-color: #1d4ed8;
  }
  
  .ciyotatheoryofchange-arrow-container:hover .ciyotatheoryofchange-arrow-down::after {
	border-top-color: #1d4ed8;
  }
  
  .ciyotatheoryofchange-arrow-container:hover .ciyotatheoryofchange-arrow-up::after {
	border-bottom-color: #1d4ed8;
  }
  
  .ciyotatheoryofchange-arrow-container:hover .ciyotatheoryofchange-arrow-right::after {
	border-left-color: #1d4ed8;
  }
  
  .ciyotatheoryofchange-vision {
	border-color: #ff0000;
  }
  
  .ciyotatheoryofchange-paragraph {
	margin: 0;
	color: #666;
	line-height: 1.5;
  }
  
  /* Main sections specific styling */
  .ciyotatheoryofchange-need {
	background-color: #f8f9fa;
  }
  
  .ciyotatheoryofchange-work {
	background-color: #f1f3f5;
  }
  
  .ciyotatheoryofchange-impact {
	background-color: #f8f9fa;
  }
  
  /* Responsive Styles */
  @media (max-width: 1200px) {
	.ciyotatheoryofchange {
	  flex-direction: column;
	}
	
	.ciyotatheoryofchange-box {
	  width: 100%;
	  margin-bottom: 2rem;
	}
	
	.ciyotatheoryofchange-columns {
	  flex-direction: column;
	}
	
	.ciyotatheoryofchange-arrow-right {
	  bottom: -35px;
	  right: 50%;
	  top: auto;
	  transform: translateX(50%);
	}
	
	.ciyotatheoryofchange-work .ciyotatheoryofchange-inputs::after,
	.ciyotatheoryofchange-work .ciyotatheoryofchange-inputs::before {
	  display: none;
	}
	
	.ciyotatheoryofchange-arrow-right::before {
	  width: 3px;
	  height: 25px;
	  right: 50%;
	  top: 0;
	  transform: translateX(50%);
	  background: linear-gradient(to bottom, #2563eb, #1d4ed8);
	}
	
	.ciyotatheoryofchange-arrow-right::after {
	  bottom: -4px;
	  right: 50%;
	  top: auto;
	  transform: translateX(50%);
	  border-color: #2563eb transparent transparent transparent;
	}
  }
  
  @media (max-width: 480px) {
	.ciyotatheoryofchange {
	  padding: 1rem;
	}
	
	.ciyotatheoryofchange-box {
	  padding: 1rem;
	}
	
	.ciyotatheoryofchange section {
	  padding: 1rem;
	}
	
	.ciyotatheoryofchange-arrow-container {
	  margin-bottom: 40px;
	}
	
	.ciyotatheoryofchange-arrow-down,
	.ciyotatheoryofchange-arrow-up,
	.ciyotatheoryofchange-arrow-right {
	  width: 30px;
	  height: 30px;
	}
	
	.ciyotatheoryofchange-arrow-down::before,
	.ciyotatheoryofchange-arrow-up::before,
	.ciyotatheoryofchange-arrow-right::before {
	  height: 20px;
	}
	
	.ciyotatheoryofchange-arrow-down::after,
	.ciyotatheoryofchange-arrow-up::after,
	.ciyotatheoryofchange-arrow-right::after {
	  border-width: 6px;
	}
  
	.ciyotatheoryofchange-work .ciyotatheoryofchange-assumptions::after,
	.ciyotatheoryofchange-work .ciyotatheoryofchange-bigidea::after {
	  height: 20px;
	  bottom: -20px;
	}
	
	.ciyotatheoryofchange-work .ciyotatheoryofchange-assumptions::before,
	.ciyotatheoryofchange-work .ciyotatheoryofchange-bigidea::before {
	  border-width: 6px;
	  bottom: -26px;
	}
  }

  /*CIYOTA here section on our work
  =================================*/
  .ciyotaheroimgsect {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.hero-container {
	position: relative;
	height: 400px;
	background-color: #1a1a1a;
}

.hero-image {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*transform: scale(1.02);
	transition: transform 0.6s ease-out;*/
}

/*.ciyotaheroimgsect:hover .hero-image {
	transform: scale(1.05);
}*/

.overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.3),
		rgba(0, 0, 0, 0.4)
	);
}

.hero-title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #ffffff;
	font-size: 4.5rem;
	font-weight: 700;
	text-align: center;
	width: 100%;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
	z-index: 2;
}

.breadcrumb-container {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 1rem 2rem;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.5),
		rgba(0, 0, 0, 0.2)
	);
	z-index: 2;
}

.breadcrumb-nav {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.5rem;
	max-width: 1200px;
	margin: 0 auto;
}

.breadcrumb-nav a {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	font-size: 1.5rem;
	transition: color 0.3s ease;
}

.breadcrumb-nav a:hover {
	color: #FF9800;
}

.breadcrumb-nav .separator {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.875rem;
}

.breadcrumb-nav .active {
	color: rgba(255, 255, 255, 0.7);
	font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.hero-container {
		height: 300px;
	}

	.hero-title {
		font-size: 3rem;
	}

	.breadcrumb-container {
		padding: 0.75rem 1rem;
	}

	.breadcrumb-nav {
		font-size: 0.75rem;
	}
	
}

@media (max-width: 480px) {
	.hero-container {
		height: 250px;
	}

	.hero-title {
		font-size: 1.75rem;
	}
}

 /* CIYOTA Career page specific styles 
 =======================================*/

 .careers-ciyota-hero {
    position: relative;
    height: 700px; /* Updated from 400px to 700px */
    width: 100%;
    max-width: 1920px; /* Set maximum width to 1920px */
    margin: 0 auto; /* Center the hero section */
    overflow: hidden;
}

.careers-ciyota-hero-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.careers-ciyota-hero-slide.active {
    opacity: 1;
}

.careers-ciyota-hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire area */
    object-position: center; /* Centers the image */
}

/* News ticker styles */
.careers-ciyota-news-ticker {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: rgba(0, 0, 0, 0.85);
    overflow: hidden;
}

.careers-ciyota-news-label {
    background: #dc2626;
    padding: 0 2rem;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.5rem;
    color: white;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 180px;
    clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
}

.careers-ciyota-news-text-container {
    position: absolute;
    left: 180px;
    right: 0;
    height: 100%;
    overflow: hidden;
}
.careers-ciyota-news-text {
    position: absolute;
    top: 20%;
    transform: translateY(-50%);
    white-space: nowrap;
    color: white;
    font-size: 1.7rem;
    padding-left: 100%; /* Start from right edge */
    display: inline-block;
    animation: ticker 500s linear infinite;
}

@keyframes ticker {
    0% {
        transform: translate3d(0, -50%, 0);
    }
    100% {
        transform: translate3d(-100%, -50%, 0);
    }
}

.text-sm{
	color: #10235e;
	font-weight: bold;
}
.text-sm:hover{
	color: #ffc32c;
	font-weight: bold;
}

/* Optional: Add hover pause */
.careers-ciyota-news-text:hover {
    animation-play-state: paused;
}

/* Icon size adjustments */
.icon-mini {
    width: 1.5rem;
    height: 1.5rem;
}

/* Table styles */
.careers-ciyota-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
}

.careers-ciyota-table th {
    background: #10235e;
    color: #ffc32c;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: none;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    text-align: left;
}

.careers-ciyota-table td {
    padding: 0.75rem 1rem;
    font-size: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
}

/* Apply button styles */
.apply-btn {
    background: #10235e;
    color: #ffc32c;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 1.5rem;
    font-weight: 500;
    transition: all 0.2s;
}

.apply-btn:hover {
    background: #ffc32c;
	font-weight: bold;
	color: #10235e;
}

/* Modal Styles */
.careers-ciyota-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    z-index: 9999;
}

.careers-ciyota-modal.active {
    display: block; /* Changed from flex to block */
}

.careers-ciyota-modal-content {
    background: white;
    width: 100%;
    height: 100%;
    position: relative;
    padding: 0; /* Removed padding */
}

.careers-ciyota-modal iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
}

.careers-ciyota-modal-close {
    position: fixed; /* Changed to fixed */
    top: 20px;
    right: 20px;
    color: #fff;
    cursor: pointer;
    font-size: 2.5rem;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.careers-ciyota-modal-close:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Remove the title as it takes up space */
.careers-ciyota-modal-content h2 {
    display: none;
}

/* Table Container */
.careers-ciyota-table-container {
    margin: 2rem auto;
    max-width: 1200px;
    padding: 0 1rem;
    overflow-x: auto;
}


/* Responsive Styles */
@media (max-width: 768px) {
    .careers-ciyota-hero {
        height: 400px; /* Smaller height for mobile */
    }

    .careers-ciyota-hero img {
        display: block; /* Changed from none to ensure images show on mobile */
    }
    .careers-ciyota-news-label {
        width: 140px;
        font-size: 1.2rem;
        display: none;
    }

    .careers-ciyota-news-text {
        font-size: 1.2rem;
        left: 140px;
		display: none;
    }

    .careers-ciyota-table th,
    .careers-ciyota-table td {
        font-size: 1.2rem;
        padding: 0.5rem;
    }
}

@media (max-width: 480px) {
    .careers-ciyota-news-ticker {
        height: 40px;
    }

    .careers-ciyota-news-label {
        width: 100px;
        font-size: 1rem;
        padding: 0 1rem;
    }

    .careers-ciyota-news-text {
        font-size: 1.2rem;
        left: 140px;
        display: none;
    }
    .careers-ciyota-table th,
    .careers-ciyota-table td {
        font-size: 1rem;
        padding: 0.5rem;
    }
    
    .apply-btn {
        font-size: 0.875rem;
        padding: 0.4rem 0.8rem;
    }
}
@media (max-width: 1920px) {
    .careers-ciyota-hero {
        width: 100%;
        height: calc(700px * (100vw / 1920)); /* Maintain aspect ratio on smaller screens */
    }
}

/*Share vacancies to your social media
=======================================*/
.careers-ciyota-share-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.careers-ciyota-share-buttons {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.careers-ciyota-share-title {
    font-size: 2rem;
    
    margin-bottom: 1.5rem;
    font-weight: bold;
}

.careers-ciyota-share-icons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.share-button {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    transition: transform 0.2s, opacity 0.2s;
}

.share-button:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.share-icon {
    width: 24px;
    height: 24px;
    margin-right: 0.5rem;
}

.share-text {
    font-size: 1.5rem;
    font-weight: 500;
}

/* Social button colors */
.linkedin { background-color: #0077b5; }
.facebook { background-color: #1877f2; }
.twitter { background-color: #1da1f2; }
.email { background-color: #ea4335; }

/* Responsive styles */
@media (max-width: 768px) {
    .careers-ciyota-share-buttons {
        padding: 1.5rem;
    }

    .careers-ciyota-share-title {
        font-size: 1.25rem;
    }

    .share-button {
        padding: 0.5rem 1rem;
    }

    .share-icon {
        width: 20px;
        height: 20px;
    }

    .share-text {
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .careers-ciyota-share-icons {
        flex-direction: column;
        gap: 0.75rem;
    }

    .share-button {
        justify-content: center;
    }
}

/* Search funtionality--
==========================*/
.careers-ciyota-search-container {
    max-width: 1200px;
    margin: 2rem auto 4rem auto; /* Increased bottom margin */
    padding: 0 1rem;
    position: relative; /* Added for positioning context */
}

.career-search-box {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

.search-input {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1.5rem;
    transition: all 0.3s;
    background: white;
}

.search-input:focus {
    outline: none;
    border-color: #10235e;
    box-shadow: 0 0 0 3px rgba(16, 35, 94, 0.1);
}

.search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    color: #6b7280;
    pointer-events: none;
}

.search-results {
    position: absolute;
    top: calc(100% + 5px); /* Space between input and results */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 600px; /* Match input width */
    max-height: 300px;
    overflow-y: auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    margin-top: 0.5rem;
    display: none;
    border: 1px solid #e5e7eb;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background-color: #f3f4f6;
}

.search-result-title {
    font-weight: 500;
    color: #10235e;
}

.search-result-dep {
    font-size: 1rem;
    color: #6b7280;
    margin-left: 0.5rem;
}

.no-results {
    padding: 1rem;
    text-align: center;
    color: #6b7280;
}

/* Scrollbar styling for search results */
.search-results::-webkit-scrollbar {
    width: 8px;
}

.search-results::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.search-results::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 4px;
}

.search-results::-webkit-scrollbar-thumb:hover {
    background: #a0a0a0;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .careers-ciyota-search-container {
        margin: 1.5rem auto 3rem auto;
    }

    .career-search-box {
        max-width: 100%;
    }

    .search-input {
        font-size: 0.9rem;
        padding: 0.875rem 0.875rem 0.875rem 2.5rem;
    }

    .search-icon {
        width: 1rem;
        height: 1rem;
        left: 0.875rem;
    }

    .search-results {
        max-width: 100%;
        border-radius: 6px;
    }

    .search-result-item {
        padding: 0.625rem 0.875rem;
    }

    .search-result-title {
        font-size: 0.9rem;
    }

    .search-result-dep {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .careers-ciyota-search-container {
        margin: 1rem auto 2.5rem auto;
    }

    .search-input {
        font-size: 0.875rem;
        padding: 0.75rem 0.75rem 0.75rem 2.25rem;
    }

    .search-result-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .search-result-dep {
        margin-left: 0;
        margin-top: 0.25rem;
    }
}

/*Footer our ADDRESSES========
=====================*/
.ouraddresses{
	font-weight: bold;
	color: #79acf7;
}






 /* Base Styles */
 .copyright-wrapper {
	
	
	width: 100%;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
}

.footer-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	
}

#copyright {
	margin: 0;
	font-size: 16px;
	color: white;
}

#copyright a {
	color: #007bff;
	text-decoration: none;
}

#copyright a:hover {
	text-decoration: underline;
}

.subscribe-btn {
	background-color: #007bff;
	color: white;
	border: none;
	padding: 8px 20px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 14px;
	transition: all 0.3s ease;
	min-width: 150px;
}

.subscribe-btn:hover {
	background-color: #ffc32c;
	color: #10235e;
	font-weight: bold;
	transform: translateY(-2px);
}

/* Enhanced Modal Styles */
.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.modal.active {
	display: block;
	opacity: 1;
}

.modal-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(3px);
	top: 0;
	left: 0;
}

.modal-container {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: 500px;
	padding: 0 15px;
	z-index: 1001;
}

.modal-content {
	background-color: #ffc32c;
	padding: 30px;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	position: relative;
	transform: translateY(20px);
	opacity: 0;
	transition: all 0.3s ease-in-out;
}

.modal.active .modal-content {
	transform: translateY(0);
	opacity: 1;
}

.close-btn {
	position: absolute;
	right: 20px;
	top: 15px;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
	color: #10235e;
	line-height: 1;
	padding: 5px;
	transition: all 0.2s ease;
}

.close-btn:hover {
	color: red;
	transform: rotate(90deg);
}

/* Form Styles */
h2 {
	color: #10235e;
	margin: 0 0 25px 0;
	font-size: 24px;
	text-align: center;
}

#mc_embed_signup {
	margin-top: 20px;
}

.mc-field-group {
	margin-bottom: 20px;
}

.mc-field-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: bold;
	color: #333;
}

.mc-field-group input {
	width: 100%;
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 16px;
	transition: all 0.3s ease;
}

.mc-field-group input:focus {
	border-color: #10235e;
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

#mc-embedded-subscribe {
	background-color: #10235e;
	color: white;
	border: none;
	padding: 12px 24px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 16px;
	width: 100%;
	margin-top: 15px;
	transition: all 0.3s ease;
}

#mc-embedded-subscribe:hover {
	background-color: #0056b3;
	font-weight: bold;
	color: #ffc32c;
	transform: translateY(-2px);
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
	.footer-content {
		flex-direction: column;
		text-align: center;
		gap: 15px;
	}

	.modal-container {
		max-width: 90%;
	}

	.modal-content {
		padding: 20px;
	}

	#mc_embed_signup {
		padding: 10px 0;
	}
}

@media screen and (max-width: 480px) {
	.container {
		padding: 0 10px;
	}

	.modal-content {
		padding: 15px;
	}

	h2 {
		font-size: 20px;
		margin-bottom: 15px;
	}

	.mc-field-group {
		margin-bottom: 12px;
	}

	.copyright-wrapper {
		padding: 15px 10px;
	}

	#copyright {
		font-size: 14px;
	}

	.subscribe-btn {
		width: 100%;
		max-width: none;
		padding: 10px 20px;
	}

	.close-btn {
		right: 15px;
		top: 10px;
	}
}

/*VERIFICATION ID
======================*/
.ciyota-work-id-verification {
    

    margin: 0;
    padding: 20px;
    
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ciyota-work-id-verification__container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    
    
    
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ciyota-work-id-verification__image-section {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    
    padding: 10px;
}

.ciyota-work-id-verification__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: 100%;
}

.ciyota-work-id-verification__badge {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 9999px;
    font-weight: bold;
    color: white;
    transition: background-color 0.3s ease;
    z-index: 2;
    font-size: 1.8rem;
}

.ciyota-work-id-verification__badge.verified {
    background-color: #22c55e;
}

.ciyota-work-id-verification__badge.not-verified {
    background-color: #ef4444;
}

.ciyota-work-id-verification__info {
    padding: 24px;
    flex: 1;
    max-width: 100%;
    background-color: white;
    overflow: hidden; /* Hide scrollbar by default */
}

.ciyota-work-id-verification__personal-info {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.ciyota-work-id-verification__name {
    font-size: 3rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    
}

.ciyota-work-id-verification__position {
    font-size: 1.8rem;
    color: #4b5563;
    margin: 0 0 8px 0;
}

.ciyota-work-id-verification__gender {
    color: #6b7280;
    margin: 0;
    font-size: 1.7rem;
}

.ciyota-work-id-verification__contract {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.ciyota-work-id-verification__contract-title {
    font-size: 1.7rem;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: #111827;
}

.ciyota-work-id-verification__dates {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    background-color: #f9fafb;
    padding: 16px;
    border-radius: 8px;
}

.ciyota-work-id-verification__date-label {
    font-size: 1.7rem;
    color: #6b7280;
    margin: 0 0 4px 0;
}

.ciyota-work-id-verification__date-value {
    font-weight: 500;
    margin: 0;
    color: #111827;
}

.ciyota-work-id-verification__status {
    background-color: #f9fafb;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 0;
}

.ciyota-work-id-verification__status-title {
    font-size: 1.7rem;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: #111827;
}

.ciyota-work-id-verification__countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.ciyota-work-id-verification__time-block {
    background-color: white;
    padding: 12px 8px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.ciyota-work-id-verification__time-block:hover {
    transform: translateY(-2px);
}

.ciyota-work-id-verification__time-value {
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
}

.ciyota-work-id-verification__time-label {
    font-size: 1.2rem;
    color: #6b7280;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ciyota-work-id-verification__expired-message {
    display: none;
    font-size: 1.8rem;
    font-weight: bold;
    color: #ef4444;
    text-align: center;
    padding: 16px;
    background-color: #fef2f2;
    border-radius: 8px;
    animation: blink 1.5s ease-in-out infinite;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
    border: 2px solid #ef4444;
}

@media (min-width: 768px) {
    .ciyota-work-id-verification__container {
        flex-direction: row;
        height: auto;
        min-height: fit-content;
    }
	

    .ciyota-work-id-verification__image-section {
        width: 35%;
        height: 100%;
        min-height: 300px;
    }

    .ciyota-work-id-verification__info {
        width: 65%;
        overflow-y: auto;
        overflow: hidden; /* Hide scrollbar when not needed */
        padding: 32px;
    }
}

@media (max-width: 640px) {
    .ciyota-work-id-verification__countdown {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .ciyota-work-id-verification__time-value {
        font-size: 1.8rem;
    }

    .ciyota-work-id-verification__name {
        font-size: 2rem;
    }
}

/*uganda presentation
====================*/
.ciyota-where-we-work {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	
	color: #333;
}

.ciyota-where-we-work-map-container {
	display: grid;
	grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr);
	gap: 320px;
	position: relative;
	margin: 40px 0;
}

.ciyota-where-we-work-center-image {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 300px;
	height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.ciyota-where-we-work-info-box {
	background: #ffffff;
	padding: 25px;
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
	margin: 15px 0;
	position: relative;
	z-index: 0;
	transition: all 0.3s ease;
	border: 1px solid #eee;
}

.ciyota-where-we-work-info-box:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 15px rgba(0,0,0,0.1);
	border-color: #ffc32c;
	
}

.ciyota-where-we-work-left-column, 
.ciyota-where-we-work-right-column {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	gap: 20px;
}

.ciyota-where-we-work-title {
	text-align: center;
	color: #2c5282;
	margin-bottom: 40px;
	font-size: 2em;
	font-weight: bold;
	position: relative;
	padding-bottom: 15px;
}

.ciyota-where-we-work-title:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	height: 3px;
	background: #2c5282;
}

.ciyota-where-we-work-subtitle {
	color: #2c5282;
	margin-top: 0;
	margin-bottom: 15px;
	font-size: 1.5em;
}

.ciyota-where-we-work-info-box p {
	margin: 0;
	line-height: 1.5;
	color: #555;
}

.ciyota-where-we-work-footer-section {
	margin-top: 60px;
	padding: 40px;
	background: linear-gradient(135deg, #2c5282 0%, #1a365d 100%);
	border-radius: 15px;
	color: white;
	text-align: center;
}

.ciyota-where-we-work-footer-title {
	font-size: 1.5em;
	margin-bottom: 20px;
	color: white;
}

.ciyota-where-we-work-footer-content {
	font-size: 1.1em;
	line-height: 1.8;
	max-width: 800px;
	margin: 0 auto;
	text-align: justify;
	margin-bottom: 30px;
}

.ciyota-where-we-work-button {
	display: inline-block;
	padding: 12px 30px;
	background-color: white;
	color: #2c5282;
	border: none;
	border-radius: 25px;
	font-size: 1.1em;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
	cursor: pointer;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.ciyota-where-we-work-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 12px rgba(0,0,0,0.15);
	background-color: #ffc32c;
	font-weight: bold;
}

@media (max-width: 1024px) {
	.ciyota-where-we-work-map-container {
		gap: 280px;
	}
}

@media (max-width: 768px) {
	.ciyota-where-we-work-map-container {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.ciyota-where-we-work-center-image {
		position: static;
		transform: none;
		margin: 20px auto;
		width: 200px;
		height: 200px;
	}

	.ciyota-where-we-work-left-column, 
	.ciyota-where-we-work-right-column {
		min-height: auto;
	}

	.ciyota-where-we-work-info-box {
		margin: 10px 0;
	}

	.ciyota-where-we-work-footer-section {
		padding: 30px 20px;
	}

	.ciyota-where-we-work-title {
		font-size: 2em;
	}
}
/*CIYOTA ONLINE REPORT
========================*/
.online-ciyota-reports {
	max-width: 1200px;
	margin: 30px auto;
	padding: 20px;
	
}

.online-ciyota-reports-header {
	margin-bottom: 30px;
	padding-bottom: 15px;
	border-bottom: 2px solid #e5e7eb;
}

.online-ciyota-reports-title {
	font-size: 24px;
	margin: 0 0 10px 0;
}

.online-ciyota-reports-description {
	font-size: 16px;
	color: #6b7280;
	margin: 0;
	line-height: 1.5;
}

.filter-container {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 30px;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.search-section {
	flex-grow: 1;
	max-width: 300px;
}

.filter-section {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.search-box {
	padding: 10px;
	border: 1px solid #10235e;
	border-radius: 6px;
	width: 250px;
	font-weight: bold;
	font-size: 16px;
	color: #10235e;
	background-color: #ffc32c;
}

.category-filter {
	display: flex;
	gap: 10px;
}

.filter-btn {
	background: #10235e;
	border: 1px solid #ffffff;
	padding: 8px 16px;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s;
	font-size: 16px;
	color: #ffffff;
}

.filter-btn.active {
	background: #ffc32c;
	color: #10235e;
	border-color: #2563eb;
	font-weight: bold;
}

.sort-select {
	padding: 8px 16px;
	border-radius: 6px;
	border: 1px solid #e5e7eb;
	font-size: 16px;
	color: #10235e;
	background-color: white;
}

.online-ciyota-reports-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
}

.online-ciyota-reports-item {
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 20px;
	transition: all 0.3s ease;
}

.online-ciyota-reports-item:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.pdf-title {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 15px 0;
}

.pdf-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: #10235e;
	color: white;
	padding: 8px 16px;
	text-decoration: none;
	border-radius: 6px;
	font-size: 14px;
	transition: background-color 0.2s;
}

.pdf-link:hover {
	background-color: #ffc32c;
	font-weight: bold;
}

.file-info {
	margin-top: 15px;
	font-size: 14px;
	color: #6b7280;
}

.file-info span {
	display: block;
	margin-top: 4px;
}

.pdf-preview {
	width: 100%;
	height: 150px;
	background: #f3f4f6;
	border-radius: 4px;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pdf-icon {
	color: #dc2626;
}

@media (max-width: 768px) {
	.filter-container {
		flex-direction: column;
		align-items: stretch;
		gap: 15px;
	}

	.search-section {
		max-width: 100%;
	}

	.filter-section {
		flex-direction: column;
		align-items: stretch;
		gap: 15px;
	}

	.search-box {
		width: 100%;
	}

	.category-filter {
		justify-content: center;
		flex-wrap: wrap;
	}

	.sort-select {
		width: 100%;
	}

	.online-ciyota-reports-grid {
		grid-template-columns: 1fr;
	}
}

/*pic3ciyota on community en
============================*/
.pict3ciyota-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	padding-top: 1rem;
	
	
}

@media (min-width: 768px) {
	.pict3ciyota-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.pict3ciyota-wrapper {
	position: relative;
	padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.pict3ciyota-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0.5rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/*Image with description
========================*/

        .imagedesc-ciyota {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }

        .imagedesc-ciyota-content {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .imagedesc-ciyota-slider-container {
            position: relative;
            width: 100%;
            height: 400px;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .imagedesc-ciyota-slider {
            display: flex;
            width: 400%;
            height: 100%;
            transition: transform 0.5s ease-in-out;
        }

        .imagedesc-ciyota-slide {
            width: 25%;
            height: 100%;
        }

        .imagedesc-ciyota-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .imagedesc-ciyota-description {
            flex: 1;
            padding: 1rem;
        }

        .imagedesc-ciyota-title {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: #333;
        }

        .imagedesc-ciyota-text {
            line-height: 1.6;
            color: #666;
        }

        @media (min-width: 768px) {
            .imagedesc-ciyota-content {
                flex-direction: row;
                align-items: center;
            }

            .imagedesc-ciyota-slider-container {
                width: 50%;
            }

            .imagedesc-ciyota-description {
                width: 50%;
            }
        }
/*OUR APPROACH
		===============*/
		.ciyota-approach-section {
            max-width: 1200px;
            margin: 0 auto;
            padding: 4rem 1rem;
            
        }

        .ciyota-approach-header {
            text-align: left;
            margin-bottom: 3rem;
        }

        .ciyota-approach-title {
            
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
            position: relative;
            padding-bottom: 1rem;
        }

        .ciyota-approach-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: linear-gradient(90deg, #ffc32c, #ffc32c);
            border-radius: 2px;
        }

        .ciyota-approach-subtitle {
            color: #34495e;
            font-size: 1.7rem;
            max-width: 1200px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .ciyota-approach-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .ciyota-approach-card {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .ciyota-approach-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
        }

        .ciyota-approach-card-title {
            
            font-size: 1.8rem;
            margin-bottom: 1rem;
            position: relative;
            padding-left: 1.5rem;
        }

        .ciyota-approach-card-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 20px;
            background: #ffc32c;
            border-radius: 2px;
        }

        .ciyota-approach-card-content {
            color: #666;
            line-height: 1.6;
        }

        .ciyota-approach-list {
            list-style: none;
            padding: 0;
            margin: 1rem 0;
        }

        .ciyota-approach-list-item {
            margin-bottom: 1rem;
            padding-left: 1.5rem;
            position: relative;
        }

        .ciyota-approach-list-item::before {
            content: '•';
            color: #2ecc71;
            position: absolute;
            left: 0;
            font-size: 1.2rem;
        }

        @media (max-width: 768px) {
            .ciyota-approach-title {
                font-size: 2rem;
            }

            .ciyota-approach-subtitle {
                font-size: 1.5rem;
            }

            .ciyota-approach-card {
                padding: 1.5rem;
            }
        }
/*main page partners
=====================*/
.ciyotapartners-logomain-page {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.ciyotapartners-logomain-page .ciyotapartners-logomain-page-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    width: 100%;
    height: 120px;
}

.ciyotapartners-logomain-page .ciyotapartners-logomain-page-logo:hover {
    transform: translateY(-5px);
}

.ciyotapartners-logomain-page .ciyotapartners-logomain-page-logo img {
    max-width: 200px;
    width: 100%;
    height: 120px;
    object-fit: contain;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .ciyotapartners-logomain-page {
        grid-template-columns: repeat(4, 1fr);
    }
    .ciyotapartners-logomain-page .ciyotapartners-logomain-page-logo img {
        max-width: 180px;
        height: 100px;
    }
}

@media (max-width: 992px) {
    .ciyotapartners-logomain-page {
        grid-template-columns: repeat(3, 1fr);
    }
    .ciyotapartners-logomain-page .ciyotapartners-logomain-page-logo {
        height: 100px;
    }
    .ciyotapartners-logomain-page .ciyotapartners-logomain-page-logo img {
        max-width: 160px;
        height: 80px;
    }
}

@media (max-width: 768px) {
    .ciyotapartners-logomain-page {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .ciyotapartners-logomain-page .ciyotapartners-logomain-page-logo {
        height: 90px;
    }
    .ciyotapartners-logomain-page .ciyotapartners-logomain-page-logo img {
        max-width: 140px;
        height: 80px;
    }
}

@media (max-width: 480px) {
    .ciyotapartners-logomain-page {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .ciyotapartners-logomain-page .ciyotapartners-logomain-page-logo {
        height: 80px;
    }
    .ciyotapartners-logomain-page .ciyotapartners-logomain-page-logo img {
        max-width: 120px;
        height: 70px;
    }
}



/*CIYOTA Sponsorship Program Section
====================================*/
/* Section specific styles */
.ciyota-sponsorship-program {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Search Section */
.ciyota-sponsorship-program-search {
    margin-bottom: 2rem;
    position: relative;
}

.ciyota-sponsorship-program-search-bar {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 1.8rem;
	color: #ffc32c;
}

.ciyota-sponsorship-program-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #ffc32c;
}

/* Filter Section */
.ciyota-sponsorship-program-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.ciyota-sponsorship-program-filter-select {
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    min-width: 150px;
}

/* Students Grid */
.ciyota-sponsorship-program-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.ciyota-sponsorship-program-card {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.ciyota-sponsorship-program-card {
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.ciyota-sponsorship-program-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.ciyota-sponsorship-program-image {
    width: 400px;
    height: 400px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

.ciyota-sponsorship-program-info {
    padding: 1.5rem;
}

.ciyota-sponsorship-program-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 1rem;
}

.ciyota-sponsorship-program-name {
    font-size: 1.8rem;
    font-weight: bold;
    color: #1f2937;
}

.ciyota-sponsorship-program-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.ciyota-sponsorship-program-badge-sponsored {
    background-color: #dcfce7;
    color: #22c55e;
}

.ciyota-sponsorship-program-badge-needs-sponsor {
    background-color: #fee2e2;
    color: #ef4444;
}

.ciyota-sponsorship-program-story {
    color: #4b5563;
    margin-bottom: 1rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ciyota-sponsorship-program-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: #4b5563;
    font-size: 1.4rem;
}

.ciyota-sponsorship-program-detail-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ciyota-sponsorship-program-button {
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: 0.375rem;
    background-color: #2563eb;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.ciyota-sponsorship-program-button:hover {
    background-color: #1d4ed8;
}

.ciyota-sponsorship-program-button:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
}

.ciyota-sponsorship-program-load-more {
    display: block;
    margin: 2rem auto;
    padding: 0.75rem 2rem;
    background-color: transparent;
    border: 1px solid #2563eb;
    color: #2563eb;
    border-radius: 0.375rem;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
}

.ciyota-sponsorship-program-load-more:hover {
    background-color: #2563eb;
    color: white;
}

/* Modal Styles */
.ciyota-sponsorship-program-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    box-sizing: border-box;
}

.ciyota-sponsorship-program-modal-content {
    position: relative;
    width: 100%;
    max-width: 425px;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 120px);
}

.ciyota-sponsorship-program-iframe-container {
    position: relative;
    flex: 1;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

/* Webkit scrollbar styles */
.ciyota-sponsorship-program-iframe-container::-webkit-scrollbar {
    width: 6px;
}

.ciyota-sponsorship-program-iframe-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.ciyota-sponsorship-program-iframe-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.ciyota-sponsorship-program-iframe-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.ciyota-sponsorship-program-iframe {
    width: 100%;
    height: 800px;
    display: block;
    border: none;
}

.ciyota-sponsorship-program-modal-close {
    position: absolute;
    right: 15px;
    top: 15px;
    color: #666;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.ciyota-sponsorship-program-modal-close:hover {
    background-color: #f5f5f5;
    transform: scale(1.1);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .ciyota-sponsorship-program-filters {
        flex-direction: column;
    }

    .ciyota-sponsorship-program-filter-select {
        width: 100%;
    }

    .ciyota-sponsorship-program-modal {
        padding: 40px 15px;
    }

    .ciyota-sponsorship-program-modal-content {
        max-height: calc(100vh - 80px);
    }

    .ciyota-sponsorship-program-iframe {
        min-height: 700px;
    }
}

@media (max-width: 1200px) {
    .ciyota-sponsorship-program-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ciyota-sponsorship-program-grid {
        grid-template-columns: 1fr;
    }

    .ciyota-sponsorship-program-image {
        width: 100%;
        height: 400px;
        max-width: 400px;
    }
}

@media (max-height: 700px) {
    .ciyota-sponsorship-program-modal {
        padding: 20px 15px;
    }

    .ciyota-sponsorship-program-modal-content {
        max-height: calc(100vh - 40px);
    }
}


/*int-volunteer-to-ciyota
============================*/
.int-volunteer-to-ciyota-form {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
	font-family: Arial, sans-serif;
}

.int-volunteer-to-ciyota-form fieldset {
	border: 1px solid #ddd;
	padding: 15px;
	margin-bottom: 20px;
	border-radius: 5px;
}

.int-volunteer-to-ciyota-form legend {
	font-weight: bold;
	padding: 0 10px;
}

.int-volunteer-to-ciyota-form .form-group {
	margin-bottom: 15px;
}

.int-volunteer-to-ciyota-form label {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
}

.int-volunteer-to-ciyota-form input[type="text"],
.int-volunteer-to-ciyota-form input[type="email"],
.int-volunteer-to-ciyota-form input[type="tel"],
.int-volunteer-to-ciyota-form input[type="date"],
.int-volunteer-to-ciyota-form select,
.int-volunteer-to-ciyota-form textarea {
	width: 100%;
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-sizing: border-box;
}

.int-volunteer-to-ciyota-form textarea {
	height: 100px;
	resize: vertical;
}

.int-volunteer-to-ciyota-form .availability-group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px;
}

.int-volunteer-to-ciyota-form .checkbox-group {
	display: flex;
	align-items: center;
	gap: 5px;
}

.int-volunteer-to-ciyota-form button {
	background-color: #4CAF50;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
}

.int-volunteer-to-ciyota-form button:hover {
	background-color: #45a049;
}

@media (max-width: 600px) {
	.int-volunteer-to-ciyota-form {
		padding: 10px;
	}
} .int-volunteer-to-ciyota-form {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            font-family: Arial, sans-serif;
        }

        .int-volunteer-to-ciyota-form fieldset {
            border: 1px solid #ddd;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 5px;
        }

        .int-volunteer-to-ciyota-form legend {
            font-weight: bold;
            padding: 0 10px;
        }

        .int-volunteer-to-ciyota-form .form-group {
            margin-bottom: 15px;
        }

        .int-volunteer-to-ciyota-form label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .int-volunteer-to-ciyota-form input[type="text"],
        .int-volunteer-to-ciyota-form input[type="email"],
        .int-volunteer-to-ciyota-form input[type="tel"],
        .int-volunteer-to-ciyota-form input[type="date"],
        .int-volunteer-to-ciyota-form select,
        .int-volunteer-to-ciyota-form textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .int-volunteer-to-ciyota-form textarea {
            height: 100px;
            resize: vertical;
        }

        .int-volunteer-to-ciyota-form .availability-group {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 10px;
        }

        .int-volunteer-to-ciyota-form .checkbox-group {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .int-volunteer-to-ciyota-form button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        .int-volunteer-to-ciyota-form button:hover {
            background-color: #45a049;
        }

        @media (max-width: 600px) {
            .int-volunteer-to-ciyota-form {
                padding: 10px;
            }
        }

        /*sponsorship head
        ===================*/
        .sponsorship-kid-details-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1.5rem;
            margin-bottom: 40px;
           

            
        }

        .sponsorship-kid-details-header {
            color: #2c3e50;
            margin-bottom: 2rem;
            font-size: clamp(1.5rem, 4vw, 2rem);
            text-align: center;
        }
        .sponsorship-kid-details-description {
            
            color: #666;
            /*max-width: 800px;*/
            margin: 0 auto 2rem;
            line-height: 1.6;
            
        }

        .sponsorship-kid-details-divider {
            height: 2px;
            background: linear-gradient(90deg, transparent, #ffc32c, transparent);
            margin: 2rem auto;
            width: 80%;
        }

        .sponsorship-kid-details-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            width: 100%;
        }

        .sponsorship-kid-details-card {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 1.5rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            background: #BCD6FB;
            transition: transform 0.3s ease;
        }

        .sponsorship-kid-details-location {
            list-style-type: none;
            padding-left: 1rem;
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .sponsorship-kid-details-price {
            color: #10235E;
            font-weight: bold;
            font-size: 1.2em;
        }

        .sponsorship-kid-details-benefits {
            list-style-type: disc;
            padding-left: 2rem;
            color: #34495e;
        }

        .sponsorship-kid-details-update {
            background-color: #f7f9fc;
            padding: 1rem;
            border-left: 4px solid #3498db;
            margin: 1rem 0;
            grid-column: 1 / -1;
        }

        @media (max-width: 992px) {
            .sponsorship-kid-details-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .sponsorship-kid-details-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .sponsorship-kid-details-card {
                padding: 1rem;
                display: block;
                margin-bottom: 1rem;
            }
        }

        @media (max-width: 480px) {
            .sponsorship-kid-details-grid {
                display: flex;
                flex-direction: column;
                gap: 1rem;
            }

            .sponsorship-kid-details-container {
                padding: 0.75rem;
            }

            .sponsorship-kid-details-card {
                width: 100%;
                margin-bottom: 1rem;
            }

            h3 {
                font-size: 1.2rem;
                margin-bottom: 0.75rem;
            }

            .sponsorship-kid-details-benefits {
                margin: 0.5rem 0;
            }
        }




        /*new timeline
        ============================
        ==============================*/
        .ciyota-timelineandgenesis {
            width: 1200px;
            max-width: 100%;
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
        }
        
        .ciyota-timelineandgenesis-navigation {
            position: relative;
            background: linear-gradient(to bottom, #f8fafc, #ffffff);
            border-radius: 16px;
            padding: 30px 60px;
            margin-bottom: 30px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }
        
        .ciyota-timelineandgenesis-tabs-wrapper {
            position: relative;
            overflow: hidden;
        }
        
        .ciyota-timelineandgenesis-tabs {
            display: flex;
            gap: 8px;
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            padding: 10px 0;
        }
        
        .ciyota-timelineandgenesis-tab {
            position: relative;
            min-width: 120px;
            padding: 12px 20px;
            background: white;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            cursor: pointer;
            font-weight: 600;
            font-size: 16px;
            color: #64748b;
            transition: all 0.3s ease;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        
        .ciyota-timelineandgenesis-tab:hover {
            transform: translateY(-2px);
            border-color: #2563eb;
            color: #2563eb;
            box-shadow: 0 4px 8px rgba(37, 99, 235, 0.1);
        }
        
        .ciyota-timelineandgenesis-tab.active {
            background: #2563eb;
            color: white;
            border-color: #2563eb;
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
        }
        
        .ciyota-timelineandgenesis-tab.active::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 8px;
            height: 8px;
            background: #2563eb;
            border-radius: 50%;
        }
        
        .ciyota-timelineandgenesis-nav-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 50%;
            background: white;
            color: #2563eb;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            z-index: 10;
        }
        
        .ciyota-timelineandgenesis-nav-button:hover {
            background: #2563eb;
            color: white;
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
        }
        
        .ciyota-timelineandgenesis-nav-button.prev {
            left: 10px;
        }
        
        .ciyota-timelineandgenesis-nav-button.next {
            right: 10px;
        }
        
        .ciyota-timelineandgenesis-nav-button:disabled {
            background: #e5e7eb;
            color: #9ca3af;
            cursor: not-allowed;
            box-shadow: none;
        }
        
        .ciyota-timelineandgenesis-content-box {
            background: #ffffff;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(74, 144, 226, 0.2);
            margin-top: 20px;
        }
        
        .ciyota-timelineandgenesis-hero-image {
            width: 100%;
            height: 400px;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 20px;
        }
        
        .ciyota-timelineandgenesis-hero-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .ciyota-timelineandgenesis-hero-image img:hover {
            transform: scale(1.05);
        }
        
        .ciyota-timelineandgenesis-content-text h3 {
            color: #2563eb;
            font-size: 24px;
            margin-bottom: 15px;
        }
        
        .ciyota-timelineandgenesis-content-text p {
            color: #4b5563;
            line-height: 1.6;
            margin-bottom: 20px;
        }
        
        .ciyota-timelineandgenesis-content-text ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .ciyota-timelineandgenesis-content-text li {
            padding: 8px 0;
            padding-left: 24px;
            position: relative;
            color: #4b5563;
        }
        
        .ciyota-timelineandgenesis-content-text li::before {
            content: '→';
            position: absolute;
            left: 0;
            color: #2563eb;
        }
        
        /* Updated Image Grid Styles */
        .ciyota-timelineandgenesis-image-grid {
            display: grid;
            gap: 15px;
            margin: 30px 0;
        }
        .ciyota-timelineandgenesis-image-grid.grid-4 {
            grid-template-columns: repeat(4, 1fr); /* Changed to 4 columns */
            grid-template-rows: 200px; /* Fixed height for the row */
        }
        
        .ciyota-timelineandgenesis-image-grid.grid-auto {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        }
        .ciyota-timelineandgenesis-grid-image {
            position: relative;
            aspect-ratio: 1 / 1;
            border-radius: 8px;
            overflow: hidden;
           
            
            height: 100%;
        }
        
       
        .ciyota-timelineandgenesis-grid-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
       
        .ciyota-timelineandgenesis-grid-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
            color: white;
            padding: 20px 15px 15px;
            font-size: 14px;
        }
        
        /* Responsive Styles */
        @media (max-width: 768px) {
            .ciyota-timelineandgenesis-navigation {
                padding: 20px 40px;
            }
        
            .ciyota-timelineandgenesis-tab {
                min-width: 100px;
                padding: 10px 15px;
                font-size: 14px;
            }
        
            .ciyota-timelineandgenesis-nav-button {
                width: 32px;
                height: 32px;
                font-size: 16px;
            }
        
            .ciyota-timelineandgenesis-hero-image {
                height: 250px;
            }
        
            .ciyota-timelineandgenesis-content-box {
                padding: 20px;
            }
        
            
            .ciyota-timelineandgenesis-image-grid.grid-auto {
                grid-template-columns: 1fr;
            }
            .ciyota-timelineandgenesis-image-grid.grid-4 {
                grid-template-columns: 1fr; /* 1 column on mobile */
                grid-template-rows: repeat(4, 200px);
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 1024px) {
            .ciyota-timelineandgenesis-image-grid.grid-4 {
                grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
                grid-template-rows: repeat(2, 200px);
            }
        }
        /*=======================================
        ======================================*/

        /*sponsor a kid
        ===============*/
        

/*Get sponsorhip info*/
.sponsorship-popup-box {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #f1f3f5;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 300px;
    z-index: 1000;
    display: none;
    animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.sponsorship-popup-box.active {
    display: block;
}

.sponsorship-popup-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}
.sponsorship-popup-box-description {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 20px 0;
    padding: 0;
    border-top: 1px solid #eee;
    padding-top: 15px;
}
.sponsorship-popup-box-title {
    font-size: 18px;
    font-weight: bold;
    color: #10235e;
}

.sponsorship-popup-box-close {
    background: #10235e;
    border: none;
    font-size: 40px;
    cursor: pointer;
    color: #ffffff;
  
}
.sponsorship-popup-box-close:hover {
    background: red;
    border: none;
    font-size: 40px;
    cursor: pointer;
    color: #ffffff;
}

.sponsorship-popup-box-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sponsorship-popup-box-input {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.sponsorship-popup-box-submit {
    background-color: #10235e;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

.sponsorship-popup-box-submit:hover {
    background-color: #ffc32c;
    color: #10235e;
    font-weight: bold;
}

.sponsorship-popup-box-loading {
    display: none;
    text-align: center;
    color: #666;
}

.sponsorship-popup-box-success {
    display: none;
    text-align: center;
    color: #28a745;
    margin-top: 10px;
}

.sponsorship-popup-box-error {
    display: none;
    text-align: center;
    color: #dc3545;
    margin-top: 10px;
}
.footerlink{
    color: white;
    background-color: #FF9800;
    
}
.footerlink :hover{
    color: red;
    font-weight: bold;
   
    
}
/*DONATE BUTTON
************************************* */
.donate-ciyota-button {
    background: linear-gradient(45deg, #ffc32c, #ffc32c);
    border: none;
    color: #ffffff;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    margin: 0px;
    cursor: pointer;
    border-radius: 0px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.donate-ciyota-button::before {
    content: "Support Us";
    
    position: relative;
    z-index: 3;
    transition: all 0.5s ease;
    display: inline-block;
}

.donate-ciyota-button:hover {
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
    background: linear-gradient(45deg, #2196F3, #4CAF50);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

.donate-ciyota-button:hover::before {
    content: "Donate Now";
    transform: scale(1.2);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.donate-ciyota-button::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(45deg);
    z-index: 2;
    transition: all 0.7s ease;
    opacity: 0;
}

.donate-ciyota-button:hover::after {
    left: -50%;
    top: -50%;
    opacity: 1;
    animation: shine 1.5s infinite;
}

/* Particles effect */
.donate-ciyota-button span {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    animation: particles 1s linear infinite;
    opacity: 0;
}

.donate-ciyota-button:hover span {
    opacity: 0.6;
}

@keyframes particles {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        transform: translate(var(--tx), var(--ty));
        opacity: 0;
    }
}

@keyframes shine {
    0% {
        left: -50%;
        top: -50%;
    }
    100% {
        left: 100%;
        top: 100%;
    }
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Pulse effect */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(76, 175, 80, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
}

/*DONATION DETAILS SECTION*/
.donation-country-details{
    color: #10235e;
    font-weight: bold;
}
.colored-donate-money{
    color: #ffc32c;
}

/*NOTIFICATION BANNER FOR DONATIONS
************************************* */
.Alert-message-donation {
    width: 100%;
    max-width: 1200px;
    margin: 20px auto;
    background-color: #fffbeb;
    border-left: 4px solid #f59e0b;
    border-radius: 0 6px 6px 0;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  .alert-content {
    display: flex;
    align-items: flex-start;
  }

  .alert-icon {
    flex-shrink: 0;
    margin-right: 12px;
    color: #f59e0b;
  }

  .alert-text {
    flex-grow: 1;
  }

  .alert-title {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #92400e;
  }

  .alert-message {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #b45309;
  }

  @media (max-width: 640px) {
    .Alert-message-donation {
      margin: 16px;
    }
  }



  /*projects in uganda */
  .ciyota-project-uganda-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
}

.ciyota-project-uganda-section-header {
    text-align: center;
    margin-bottom: 50px;
}

.ciyota-project-uganda-section-header h2 {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.ciyota-project-uganda-section-header h2:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: #27ae60;
    border-radius: 2px;
}

.ciyota-project-uganda-section-header p {
    color: #7f8c8d;
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
}

.ciyota-project-uganda-projects-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.ciyota-project-uganda-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ciyota-project-uganda-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.ciyota-project-uganda-image {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.ciyota-project-uganda-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}


.ciyota-project-uganda-content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.ciyota-project-uganda-category {
    font-size: 0.85rem;
    color: #27ae60;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.ciyota-project-uganda-title {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.ciyota-project-uganda-description {
    color: #7f8c8d;
    margin-bottom: 20px;
    line-height: 1.6;
    flex-grow: 1;
}

.ciyota-project-uganda-link {
    display: inline-block;
    padding: 12px 25px;
    background: #10235E;
    color: #ffc32c;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    transition: background 0.3s ease;
    text-align: center;
    margin-top: auto;
}

.ciyota-project-uganda-link:hover {
    background: #ffc32c;
    font-weight: bold;
    color: #10235e;
}

@media (max-width: 768px) {
    .ciyota-project-uganda-section-header h2 {
        font-size: 2rem;
    }

    .ciyota-project-uganda-projects-container {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .ciyota-project-uganda-section {
        padding: 40px 15px;
    }

    .ciyota-project-uganda-section-header h2 {
        font-size: 1.8rem;
    }

    .ciyota-project-uganda-section-header p {
        font-size: 1rem;
    }

    .ciyota-project-uganda-title {
        font-size: 1.3rem;
    }
}


/*CIYOTA IMPACT METER*/
.ciyota-impact-meter-container {
   
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .ciyota-impact-meter-title {
    text-align: center;
    
    margin-bottom: 30px;
    
  }
  
  .ciyota-impact-meter-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
  }
  
  .ciyota-impact-meter-card {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: calc(20% - 16px); /* Each card takes exactly 1/5 of the space minus gap */
    min-width: 210px;
    flex-grow: 0;
    flex-shrink: 0;
  }
  
  .ciyota-impact-meter-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
  }
  
  .ciyota-impact-meter-icon {
    font-size: 3rem;
    color: #4a89dc;
    margin-bottom: 15px;
  }
  
  .ciyota-impact-meter-count {
    font-size: 3rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 1px;
    min-height: 60px;
  }
  
  .ciyota-impact-meter-label {
    font-size: 1.5rem;
    color: #666;
    line-height: 1.4;
  }
  
  @media (max-width: 1199px) {
    .ciyota-impact-meter-card {
      width: calc(33.33% - 14px);
    }
  }
  
  @media (max-width: 768px) {
    .ciyota-impact-meter-card {
      width: calc(50% - 10px);
    }
    
    .ciyota-impact-meter-count {
      font-size: 2rem;
    }
  }
  
  @media (max-width: 480px) {
    .ciyota-impact-meter-card {
      width: 100%;
    }
  }


 /* Main Section Styles for our programs on home page
 ======================================================*/
.our-program-learn-more {
    width: 100%;
    background: linear-gradient(135deg, #79acf7, #79acf7, #79acf7);
    background-size: 300% 300%;
    animation: gradient-shift 15s ease infinite;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.our-program-learn-more::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('assets/img/slider/bb-slider-pic2.png') center/cover no-repeat;
    opacity: 0.1;
    z-index: 0;
}

.our-program-learn-more-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    padding: 0 20px;
}

/* Left Content Styles */
.our-program-learn-more-content {
    flex: 1;
    min-width: 300px;
    padding-right: 50px;
    transform: translateY(50px);
    opacity: 0;
    animation: fade-in-up 1s forwards 0.3s;
    animation-play-state: paused;
}

.our-program-learn-more-title {
    font-size: 3.5rem;
    line-height: 1.5;
    font-weight: 800;
    margin-bottom: 30px;
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
}


.our-program-learn-more-description {
    color: #ffffff;
    margin-bottom: 30px;
    max-width: 600px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    transform: translateY(30px);
    opacity: 0;
    animation: fade-in-up 1s forwards 0.6s;
}

/* Right Content - Map Section */
.our-program-learn-more-map {
    flex: 1;
    min-width: 300px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    transform: translateY(50px);
    opacity: 0;
    animation: fade-in-up 1s forwards 0.5s;
    animation-play-state: paused;
    border: 2px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    min-height: 400px;
    transition: transform 0.2s ease-out;
}

.our-program-learn-more-map-title {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 20px;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.our-program-learn-more-countries {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
}

/* Country Card Styles */
.our-program-learn-more-country {
    flex: 1;
    min-width: 200px;
    position: relative;
    cursor: pointer;
    transition: all 0.4s ease;
    perspective: 1000px;
    margin-bottom: 20px;
}

.our-program-learn-more-country-card {
    position: relative;
    width: 100%;
    height: 250px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.our-program-learn-more-country:hover .our-program-learn-more-country-card {
    transform: rotateY(180deg);
}

.our-program-learn-more-country-front,
.our-program-learn-more-country-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow: hidden;
}

.our-program-learn-more-country-front {
    background-size: cover;
    background-position: center;
    color: white;
    position: relative;
    z-index: 1;
}

/* New background image classes for each country */
.uganda-bg {
    background-image: url('/assets/img/ug-country.png');
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 0;
    transition: transform 0.3s ease-out;
}

.drc-bg {
    background-image: url('/assets/img/drc-country.png');
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 0;
    transition: transform 0.3s ease-out;
}

/* Dark overlay for better text visibility */
.country-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
    border-radius: 15px;
}

.our-program-learn-more-country-back {
    background: #404F7E;
    transform: rotateY(180deg);
    color: white;
    z-index: 0;
}

.our-program-learn-more-country-name {
    font-size: 2.2rem;
    font-weight: bold;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.our-program-learn-more-country-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}

.our-program-learn-more-country-description {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 20px;
    line-height: 1.5em;
}

.our-program-learn-more-country-link {
    display: inline-block;
    padding: 10px 25px;
    background: linear-gradient(45deg, #10235e, #10235e);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    transform: translateZ(10px);
    transition: all 0.3s;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.our-program-learn-more-country-link:hover {
    background: linear-gradient(45deg, #ffc32c, #ffc32c);
}

/* Animation Keyframes */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes line-expand {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Floating elements and animations */
.our-program-learn-more-floating {
    position: absolute;
    opacity: 0.3;
    z-index: 0;
    pointer-events: none;
}

.our-program-learn-more-floating:nth-child(1) {
    top: 10%;
    left: 5%;
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
}

.our-program-learn-more-floating:nth-child(2) {
    top: 20%;
    right: 10%;
    width: 40px;
    height: 40px;
    background: #ff4081;
    border-radius: 50%;
    animation: float 7s ease-in-out infinite;
}

.our-program-learn-more-floating:nth-child(3) {
    bottom: 15%;
    left: 15%;
    width: 50px;
    height: 50px;
    background: #fdbb2d;
    border-radius: 50%;
    animation: float 8s ease-in-out infinite;
}

/* Browser-specific fixes */
/* For Firefox */
@-moz-document url-prefix() {
    .our-program-learn-more-country-back {
        transform: rotateY(180deg) translateZ(1px);
    }
}

/* For IE/Edge */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .our-program-learn-more-country-back {
        z-index: -1;
    }
    .our-program-learn-more-country:hover .our-program-learn-more-country-back {
        z-index: 1;
    }
}

/* Enhanced Responsive styles */
@media (max-width: 1200px) {
    .our-program-learn-more-title {
        font-size: 3rem;
    }
}

@media (max-width: 992px) {
    .our-program-learn-more-content {
        padding-right: 0;
        margin-bottom: 40px;
    }

    .our-program-learn-more-container {
        flex-direction: column;
    }

    .our-program-learn-more-map {
        width: 100%;
    }
    
    .our-program-learn-more-title {
        font-size: 2.8rem;
    }
}

@media (max-width: 768px) {
    .our-program-learn-more-title {
        font-size: 2.5rem;
    }

    .our-program-learn-more-description {
        font-size: 0.95em;
    }

    .our-program-learn-more-countries {
        flex-direction: column;
    }
    
    .our-program-learn-more-map-title {
        font-size: 2rem;
    }
    
    .our-program-learn-more-country {
        margin-bottom: 0.9em;
    }
}

@media (max-width: 480px) {
    .our-program-learn-more {
        padding: 40px 0;
    }
    
    .our-program-learn-more-title {
        font-size: 2rem;
    }
    
    .our-program-learn-more-map-title {
        font-size: 1.8rem;
    }
    
    .our-program-learn-more-country-name {
        font-size: 1.8rem;
    }
    
    .our-program-learn-more-country-description {
        font-size: 0.9em;
    }
}


/* Mobile-specific styles */
.our-program-learn-more-country.mobile:hover .our-program-learn-more-country-card {
    transform: rotateY(0deg); /* Disable hover effect on mobile */
}

.our-program-learn-more-country-card.flipped {
    transform: rotateY(180deg);
}

/* Additional touch target improvements */
@media (max-width: 768px) {
    .our-program-learn-more-country {
        min-height: 250px;
    }
    
    .our-program-learn-more-country-link {
        padding: 12px 30px; /* Larger touch target for buttons */
    }
}



/*video frame 
******************************* */
 /*  Video Section Styles */
 .home-video-short-ciyota {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background-color: #ffc32c; /* Solid background color */
    background-image: url('assets/img/slider/rlos-img-big.png'); /* Placeholder image - replace with your actual image */
    background-attachment: fixed; /* This creates the parallax effect */
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    isolation: isolate; /* Creates a new stacking context */
    margin-bottom: -40px;
}

.home-video-short-ciyota::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(35, 64, 106, 0.8); /* Overlay color with transparency */
    z-index: 1;
    backdrop-filter: blur(1px); /* Subtle blur for smoother background */
}

/* Optional: Add this pseudo-element to ensure no gaps at the bottom */
.home-video-short-ciyota::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 10px;
    background-color: #2c3e50; /* Same as the base background color */
    z-index: 0;
}

.home-video-short-ciyota-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

/* Video Column Styles */
.home-video-short-ciyota-video-column {
    flex: 0 0 58%;
    position: relative;
    transform: translateX(-100px);
    opacity: 0;
    animation: home-video-short-ciyota-slide-in-left 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
}

.home-video-short-ciyota-video-wrapper {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: perspective(1000px) rotateY(-5deg);
    transition: transform 0.5s ease;
}

.home-video-short-ciyota-video-wrapper:hover {
    transform: perspective(1000px) rotateY(0deg) scale(1.02);
}

.home-video-short-ciyota-video-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, transparent 80%, rgba(0, 0, 0, 0.4));
}

.home-video-short-ciyota-video-wrapper iframe {
    width: 100%;
    aspect-ratio: 16/9;
    display: block;
    border: none;
}

.home-video-short-ciyota-video-title {
    font-size: 3.2rem;
    font-weight: 900;
    margin-bottom: 25px;
    background: linear-gradient(to right, #ffffff, #e6e6e6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    padding-bottom: 15px;
    letter-spacing: -0.5px;
}

.home-video-short-ciyota-video-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 5px;
    background: #fff;
    border-radius: 10px;
    animation: home-video-short-ciyota-pulse 2s infinite;
}

/* Content Column Styles */
.home-video-short-ciyota-content-column {
    flex: 0 0 38%;
    color: #fff;
    padding: 30px;
    position: relative;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
    border-radius: 15px;
    transform: translateX(100px);
    opacity: 0;
    animation: home-video-short-ciyota-slide-in-right 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s forwards;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.home-video-short-ciyota-content {
    position: relative;
    z-index: 2;
}

.home-video-short-ciyota-content p {
    
    line-height: 1.5;
    margin-bottom: 25px;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(20px);
    animation: home-video-short-ciyota-fade-in-up 1s ease 1.2s forwards;
}

.home-video-short-ciyota-btn {
    display: inline-block;
    padding: 14px 32px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    z-index: 1;
    opacity: 0;
    transform: translateY(20px);
    animation: home-video-short-ciyota-fade-in-up 1s ease 1.4s forwards;
}

.home-video-short-ciyota-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: width 0.4s ease;
    z-index: -1;
}

.home-video-short-ciyota-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.home-video-short-ciyota-btn:hover::before {
    width: 100%;
}

/* Floating Elements */
.home-video-short-ciyota-floating-el {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    z-index: 0;
}

.home-video-short-ciyota-floating-1 {
    width: 120px;
    height: 120px;
    top: -60px;
    left: 10%;
    animation: home-video-short-ciyota-float 8s ease-in-out infinite;
}

.home-video-short-ciyota-floating-2 {
    width: 80px;
    height: 80px;
    bottom: 10%;
    right: 15%;
    animation: home-video-short-ciyota-float 9s ease-in-out 1s infinite;
}

.home-video-short-ciyota-floating-3 {
    width: 150px;
    height: 150px;
    bottom: -75px;
    left: 25%;
    animation: home-video-short-ciyota-float 12s ease-in-out 0.5s infinite;
}

/* Animations - with namespaced keyframes to avoid conflicts */
@keyframes home-video-short-ciyota-slide-in-left {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes home-video-short-ciyota-slide-in-right {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes home-video-short-ciyota-fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes home-video-short-ciyota-float {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(5deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes home-video-short-ciyota-pulse {
    0% {
        opacity: 0.6;
        transform: scaleX(1);
    }
    50% {
        opacity: 1;
        transform: scaleX(1.2);
    }
    100% {
        opacity: 0.6;
        transform: scaleX(1);
    }
}

/* Interactive Mouse Effects */
.home-video-short-ciyota-parallax {
    transition: transform 0.1s ease-out;
}

/* Responsive Styles */
@media screen and (max-width: 992px) {
    .home-video-short-ciyota-container {
        flex-direction: column;
        padding: 60px 20px;
    }

    .home-video-short-ciyota-video-column,
    .home-video-short-ciyota-content-column {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 40px;
    }

    .home-video-short-ciyota-video-title {
        font-size: 2.5rem;
        text-align: center;
    }

    .home-video-short-ciyota-video-title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .home-video-short-ciyota-content {
        text-align: center;
    }
}

@media screen and (max-width: 576px) {
    .home-video-short-ciyota-video-title {
        font-size: 2rem;
    }

    .home-video-short-ciyota-content p {
        font-size: 0.95em;
    }
}


/* Section-specific CSS for general-page-display-for-ciyota 
===========================================================*/
.general-page-display-for-ciyota {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px;
    color: #333;
    line-height: 1.6;
}

.general-page-display-for-ciyota-header {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}

.general-page-display-for-ciyota-header h2 {
    font-size: 2.5rem;
    color: #2e3192;
    margin-bottom: 20px;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.general-page-display-for-ciyota-header h2::after {
    content: "";
    position: absolute;
    width: 70%;
    height: 4px;
    background: linear-gradient(90deg, #2e3192, #00aeef);
    bottom: -10px;
    left: 15%;
    border-radius: 2px;
}

.general-page-display-for-ciyota-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.general-page-display-for-ciyota-text-block {
    
    padding: 20px;
}

.general-page-display-for-ciyota-text-block p {
    margin-bottom: 0px;
}

.general-page-display-for-ciyota-text-block strong {
    color: #00aeef;
    font-weight: 700;
}

.general-page-display-for-ciyota-stats {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 20px 0;
    gap: 20px;
}

.general-page-display-for-ciyota-stat-item {
    text-align: center;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 10px;
    padding: 20px;
    min-width: 200px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-left: 4px solid #FFE196;
}

.general-page-display-for-ciyota-stat-number {
    font-size: 2.8rem;
    font-weight: bold;
    color: #2e3192;
    margin-bottom: 10px;
    line-height: 1;
}

.general-page-display-for-ciyota-stat-label {
    font-size: 1.5rem;
    color: #555;
    font-weight: 600;
}

.general-page-display-for-ciyota-highlight {
    background: linear-gradient(90deg, rgba(46, 49, 146, 0.1), rgba(0, 174, 239, 0.1));
    border-left: 5px solid #00aeef;
    padding: 20px;
    margin: 30px 0;
    border-radius: 0 10px 10px 0;
}

.general-page-display-for-ciyota-image-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.general-page-display-for-ciyota-image-box {
    position: relative;
    border-radius: 10px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 0px;
}

.general-page-display-for-ciyota-image-box img {
    width: 100%;
    display: block;
    border-radius: 10px 10px 0 0;
}

.general-page-display-for-ciyota-image-caption {
    padding: 15px;
    background-color: #FFE196;
    color: #0B173E;
    font-size: 1.5rem;
    border-radius: 0 0 10px 10px;
}

.general-page-display-for-ciyota-myhomestars-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 40px 0;
}

@media (min-width: 768px) {
    .general-page-display-for-ciyota-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .general-page-display-for-ciyota-header h2 {
        font-size: 2rem;
    }
    .general-page-display-for-ciyota-stat-item {
        min-width: 150px;
    }
}


/* Secondary School Section Specific Styles 
============================================*/
.secondaryschool-page-display-for-ciyota {
    max-width: 1200px;
    margin: 0 auto;
    padding: 5px 20px;
    color: #333;
    line-height: 1.6;
}

.secondaryschool-page-display-for-ciyota-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.secondaryschool-page-display-for-ciyota-title {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.secondaryschool-page-display-for-ciyota-title:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: #e67e22;
}

.secondaryschool-page-display-for-ciyota-subtitle {
    font-size: 1.2rem;
    color: #7f8c8d;
    max-width: 700px;
    margin: 0 auto;
}

.secondaryschool-page-display-for-ciyota-stats {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 30px 0;
    background-color: #FFE196;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.secondaryschool-page-display-for-ciyota-stat-item {
    text-align: center;
    padding: 15px;
    flex: 1;
    min-width: 150px;
}

.secondaryschool-page-display-for-ciyota-stat-number {
    font-size: 3.5rem;
    font-weight: bolder;
    color: #10235E
    ;
    margin-bottom: 5px;
}

.secondaryschool-page-display-for-ciyota-stat-label {
    font-size: 1.3rem;
    color: #10235E;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.secondaryschool-page-display-for-ciyota-content {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
}

.secondaryschool-page-display-for-ciyota-text-block {
    flex: 1;
    min-width: 300px;
    text-align: justify;
}

.secondaryschool-page-display-for-ciyota-image-block {
    flex: 1;
    min-width: 300px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.secondaryschool-page-display-for-ciyota-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
   
}



.secondaryschool-page-display-for-ciyota-section {
    margin-bottom: 0px;
    padding: 20px;
}

.secondaryschool-page-display-for-ciyota-section-title {
    color: #2c3e50;
    margin-bottom: 20px;
    position: relative;
    padding-left: 15px;
    font-weight: 600;
    line-height: 1.5;
}
/*.secondaryschool-page-display-for-ciyota-section-title:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background-color: #e67e22;
    border-radius: 2px;
}*/

.secondaryschool-page-display-for-ciyota-paragraph {
    margin-bottom: 20px;
   /* text-align: justify;*/
}

.secondaryschool-page-display-for-ciyota-feature-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.secondaryschool-page-display-for-ciyota-feature-item {
    padding: 10px 0;
    padding-left: 30px;
    position: relative;
}

.secondaryschool-page-display-for-ciyota-feature-item:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #e67e22;
    font-weight: bold;
}

.secondaryschool-page-display-for-ciyota-quote {
    background-color: #f8f9fa;
    border-left: 5px solid #FFE196;
    padding: 20px;
    margin: 20px 0;
    font-style: italic;
    color: #555;
}

.secondaryschool-page-display-for-ciyota-programs {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

.secondaryschool-page-display-for-ciyota-program-card {
    flex: 1;
    min-width: 250px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.secondaryschool-page-display-for-ciyota-program-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.secondaryschool-page-display-for-ciyota-program-icon {
    font-size: 4rem;
    color: #e67e22;
    margin-bottom: 15px;
    text-align: center;
}

.secondaryschool-page-display-for-ciyota-program-title {
    
    color: #2c3e50;
    margin-bottom: 10px;
    font-weight: 600;
    text-align: center;
}

.secondaryschool-page-display-for-ciyota-program-description {
    
    color: #555;
    text-align: center;
}

@media (max-width: 768px) {
    .secondaryschool-page-display-for-ciyota-content {
        flex-direction: column;
    }
    
    .secondaryschool-page-display-for-ciyota-image-block {
        order: -1;
        margin-bottom: 20px;
        height: 300px;
        text-align: left;
    }
    
    .secondaryschool-page-display-for-ciyota-stats {
        flex-direction: column;
    }
}

/* University Access Section Styling */
.university-access-for-ciyota-section {
    padding: 60px 0;
    
    color: #333;
    background-color: #fff;
    line-height: 1.6;
  }
  
  .university-access-for-ciyota-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .university-access-for-ciyota-header {
    text-align: center;
    margin-bottom: 40px;
  }
  
  .university-access-for-ciyota-header h2 {
    font-size: 36px;
    font-weight: 700;
    color: #1a3e72;
    margin-bottom: 15px;
  }
  
  .university-access-for-ciyota-underline {
    height: 4px;
    width: 80px;
    background-color: #f7b32b;
    margin: 0 auto;
  }
  
  .university-access-for-ciyota-content {
    display: flex;
    flex-direction: column;
    gap: 50px;
  }
  
  .university-access-for-ciyota-intro,
  .university-access-for-ciyota-feature,
  .university-access-for-ciyota-goals-content {
    display: flex;
    gap: 30px;
    align-items: center;
  }
  
  .university-access-for-ciyota-text,
  .university-access-for-ciyota-image {
    flex: 1;
  }
  
  .university-access-for-ciyota-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .university-access-for-ciyota-text p {
    margin-bottom: 16px;
   
  }
  
  .university-access-for-ciyota-text h3 {
    font-size: 24px;
    color: #1a3e72;
    margin-bottom: 20px;
    font-weight: 600;
  }
  
  .university-access-for-ciyota-stats {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    margin: 30px 0;
    text-align: center;
    background-color: #FFE196;
    padding: 30px 20px;
    border-radius: 10px;
  }
  
  .university-access-for-ciyota-stat-item {
    flex: 1;
  }
  
  .university-access-for-ciyota-stat-number {
    font-size: 3em;
    font-weight: 700;
    color: #10235E;
    display: block;
    margin-bottom: 10px;
  }
  
  .university-access-for-ciyota-stat-text {
    
    color: #10235E;
  }
  
  .university-access-for-ciyota-list {
    padding-left: 20px;
    margin-bottom: 16px;
  }
  
  .university-access-for-ciyota-list li {
    margin-bottom: 8px;
    position: relative;
  }
  
  .university-access-for-ciyota-goals {
    background-color: #f0f5ff;
    padding: 30px;
    border-radius: 10px;
  }
  
  .university-access-for-ciyota-goals h3 {
    text-align: center;
    margin-bottom: 25px;
    font-size: 24px;
    color: #1a3e72;
  }
  
  .university-access-for-ciyota-partners {
    text-align: center;
    margin-top: 30px;
  }
  
  .university-access-for-ciyota-partners h3 {
    font-size: 24px;
    color: #1a3e72;
    margin-bottom: 20px;
  }
  
  .university-access-for-ciyota-partner-logos {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 30px;
  }
  
  .university-access-for-ciyota-partner-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
  
  /* Responsive design */
  @media screen and (max-width: 900px) {
    .university-access-for-ciyota-intro,
    .university-access-for-ciyota-feature,
    .university-access-for-ciyota-goals-content {
      flex-direction: column;
    }
    
    .university-access-for-ciyota-feature .university-access-for-ciyota-image {
      order: 2;
    }
    
    .university-access-for-ciyota-feature .university-access-for-ciyota-text {
      order: 1;
    }
    
    .university-access-for-ciyota-stats {
      flex-direction: column;
      gap: 30px;
    }
    
    .university-access-for-ciyota-header h2 {
      font-size: 30px;
    }
    
    .university-access-for-ciyota-stats {
      padding: 20px 15px;
    }
    
    .university-access-for-ciyota-stat-number {
      font-size: 36px;
    }
  }
  
  @media screen and (max-width: 600px) {
    .university-access-for-ciyota-section {
      padding: 40px 0;
    }
    
    .university-access-for-ciyota-container {
      padding: 0 15px;
    }
    
    .university-access-for-ciyota-content {
      gap: 30px;
    }
    
    .university-access-for-ciyota-header h2 {
      font-size: 28px;
    }
    
    .university-access-for-ciyota-text h3 {
      font-size: 22px;
    }
    
    .university-access-for-ciyota-text p,
    .university-access-for-ciyota-list li {
      font-size: 15px;
    }
  }


   /* Section-specific styles for inandouut-sport-for-ciyota */
   .inandouut-sport-for-ciyota {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 40px;
}

.inandouut-sport-for-ciyota-intro {
   
    margin-bottom: 50px;
}

.inandouut-sport-for-ciyota-intro h2 {
    
    margin-bottom: 20px;
    color: #1a5276;
    font-weight: 700;
}

.inandouut-sport-for-ciyota-programs {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
}

.inandouut-sport-for-ciyota-card {
    flex: 1 1 500px;
    max-width: 550px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.inandouut-sport-for-ciyota-card-image {
    height: 300px;
    position: relative;
    overflow: hidden;
}

.inandouut-sport-for-ciyota-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/*.inandouut-sport-for-ciyota-card:hover .inandouut-sport-for-ciyota-card-image img {
    transform: scale(1.05);
}*/

.inandouut-sport-for-ciyota-card-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(2, 0, 8, 0.8), transparent);
    color: #ffff;
}

.inandouut-sport-for-ciyota-card-title h3 {
    
    margin: 0;
    font-weight: 600;
    color: #ffffff
}

.inandouut-sport-for-ciyota-card-content {
    padding: 25px;
    background-color: #fff;
}

.inandouut-sport-for-ciyota-card-content p {
    margin-bottom: 15px;
   
}

.inandouut-sport-for-ciyota-list {
    margin: 20px 0;
    padding-left: 20px;
}

.inandouut-sport-for-ciyota-list li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 15px;
}

.inandouut-sport-for-ciyota-list li::before {
    
    color: #1a5276;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.inandouut-sport-for-ciyota-conclusion {
    text-align: center;
    margin-top: 50px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 10px;
}

.inandouut-sport-for-ciyota-conclusion p {
   
    max-width: 800px;
    margin: 0 auto;
    font-style: italic;
    color: #1a5276;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .inandouut-sport-for-ciyota-card {
        flex: 1 1 100%;
    }

    .inandouut-sport-for-ciyota-intro h2 {
        font-size: 2rem;
    }
}



    /* Section-specific styles for ciyota-community-uganda */
    .ciyota-community-uganda {
        max-width: 1200px;
        margin: 0 auto;
        padding: 60px 20px;
        
        color: #333;
        line-height: 1.6;
    }

    .ciyota-community-uganda-title {
        text-align: center;
        margin-bottom: 40px;
    }

    .ciyota-community-uganda-title h2 {
        
        margin-bottom: 15px;
        color: #1a5276;
        font-weight: 700;
    }

    .ciyota-community-uganda-title p {
        
        max-width: 800px;
        margin: 0 auto;
        color: #555;
    }

    .ciyota-community-uganda-container {
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    .ciyota-community-uganda-class {
        
        
        overflow: hidden;
       
    }

    .ciyota-community-uganda-image {
        width: 100%;
        height: 700px;
        overflow: hidden;
    }

    .ciyota-community-uganda-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s ease;
    }

   

    .ciyota-community-uganda-content {
        padding: 30px;
    }

    .ciyota-community-uganda-content h3 {
       
        margin-bottom: 20px;
        color: #1a5276;
        position: relative;
        padding-bottom: 15px;
    }

    .ciyota-community-uganda-content h3::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 3px;
        background-color: #3498db;
    }

    .ciyota-community-uganda-content p {
        margin-bottom: 15px;
        
    }

    .ciyota-community-uganda-content strong {
        color: #1a5276;
    }

    .ciyota-community-uganda-list {
        margin: 25px 0;
        padding-left: 20px;
    }

    .ciyota-community-uganda-list li {
        margin-bottom: 12px;
        position: relative;
        padding-left: 15px;
    }

    .ciyota-community-uganda-list li::before {
        
        color: #3498db;
        font-weight: bold;
        position: absolute;
        left: 0;
    }

    /* Call to action button styling */
    .ciyota-community-uganda-cta {
        text-align: center;
        margin-top: 40px;
    }

    .ciyota-community-uganda-button {
        display: inline-block;
        padding: 12px 28px;
        background-color: #10235E;
        color: #FFC32C;
        text-decoration: none;
        border-radius: 5px;
        font-weight: 600;
        transition: background-color 0.3s ease;
    }

    .ciyota-community-uganda-button:hover {
        background-color: #FFC32C;
        color: #10235E;
        font-weight: bold;
    }

    /* Stats highlight styling */
    .ciyota-community-uganda-highlight {
        display: inline-block;
        font-weight: 700;
        color: #1a5276;
        border-bottom: 2px dotted #3498db;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .ciyota-community-uganda-title h2 {
            font-size: 2rem;
        }
        
        .ciyota-community-uganda-image {
            height: 400px;
        }
        
        .ciyota-community-uganda-content {
            padding: 20px;
        }
    }


            /* CSS for the capacity building for other RLOs section */
            .ciyota-capacity-building-for-other-rlos {
                
                color: #333;
                line-height: 1.6;
                max-width: 100%;
                margin: 0 auto;
                padding: 0;
                overflow: hidden;
            }
            
            .ciyota-capacity-building-header {
                position: relative;
                width: 100%;
                height: 600px;
                overflow: hidden;
                margin-bottom: 40px;
            }
            
            .ciyota-capacity-building-header img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            
            .ciyota-capacity-building-header-overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.4);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 0 20px;
            }
            
            .ciyota-capacity-building-title {
                color: #fff;
               
                font-weight: 700;
                text-align: center;
                margin-bottom: 20px;
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            }
            
            .ciyota-capacity-building-subtitle {
                color: #fff;
                
                max-width: 800px;
                text-align: center;
                margin: 0;
                text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
            }
            
            .ciyota-capacity-building-intro {
                padding: 0 40px 40px;
                max-width: 1200px;
                margin: 0 auto;
                
            }
            
            .ciyota-capacity-building-approach {
                
                padding: 20px 0;
            }
            
            .ciyota-capacity-building-approach-title {
                text-align: center;
               
                margin-bottom: 50px;
                color: #2c3e50;
            }
            
            .ciyota-capacity-building-methods {
                max-width: 1120px;
                margin: 0 auto;
                display: flex;
                flex-direction: column;
            }
            
            .ciyota-capacity-building-method {
                display: flex;
                overflow: hidden;
                width: 100%;
            }
            
            .ciyota-capacity-building-method:nth-child(even) {
                flex-direction: row-reverse;
            }
            
            .ciyota-capacity-building-method-img-container {
                width: 50%;
                min-height: 400px;
                position: relative;
            }
            
            .ciyota-capacity-building-method-img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
                top: 0;
                left: 0;
            }
            
            .ciyota-capacity-building-method-content {
                width: 50%;
                padding: 40px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
            
            .ciyota-capacity-building-method-content-inner {
                max-width: 800px;
                width: 100%;
            }
            
            .ciyota-capacity-building-method:nth-child(1) .ciyota-capacity-building-method-content {
                background-color: #e8f4f8;
            }
            
            .ciyota-capacity-building-method:nth-child(2) .ciyota-capacity-building-method-content {
                background-color: #f0f8e8;
            }
            
            .ciyota-capacity-building-method:nth-child(3) .ciyota-capacity-building-method-content {
                background-color: #f8f0e8;
            }
            
            .ciyota-capacity-building-method:nth-child(4) .ciyota-capacity-building-method-content {
                background-color: #f0e8f8;
            }
            
            .ciyota-capacity-building-method:nth-child(5) .ciyota-capacity-building-method-content {
                background-color: #e8f0f8;
            }
            
            .ciyota-capacity-building-method-number {
                font-size: 2rem;
                font-weight: 800;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                width: 70px;
                height: 70px;
                border-radius: 50%;
                
                color: white;
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 15px rgba(52, 152, 219, 0.5);
                position: relative;
                margin-bottom: 25px;
                text-align: center;
                text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
                transform: perspective(800px) rotateY(15deg);
                transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
                border: 3px solid rgba(255, 255, 255, 0.3);
                z-index: 2;
                cursor: pointer;
                overflow: hidden;
            }
            
            .ciyota-capacity-building-method-number::before {
                content: '';
                position: absolute;
                top: -15px;
                left: -15px;
                right: -15px;
                bottom: -15px;
                background: linear-gradient(45deg, #79ACF7, #79ACF7, #10235E, #FFC32C, #79ACF7);
                background-size: 400% 400%;
                border-radius: 50%;
                z-index: -1;
                filter: blur(15px);
                opacity: 0.8;
                animation: animateGlow 8s ease infinite;
            }
            
            .ciyota-capacity-building-method-number::after {
                content: '';
                position: absolute;
                width: 150%;
                height: 150%;
                background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
                top: -25%;
                left: -25%;
                opacity: 0;
                transition: all 0.5s ease;
                transform: scale(0);
                border-radius: 50%;
            }
            
            .ciyota-capacity-building-method-number.animate::after {
                animation: pulseEffect 1s ease-out;
            }
            
            .ciyota-capacity-building-method-number span {
                position: relative;
                z-index: 3;
            }
            
            .ciyota-capacity-building-method-content:hover .ciyota-capacity-building-method-number {
                transform: perspective(800px) rotateY(-15deg) translateY(-5px) scale(1.1);
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(52, 152, 219, 0.7);
            }
            
            @keyframes animateGlow {
                0% {
                    background-position: 0% 50%;
                    filter: blur(15px);
                }
                50% {
                    background-position: 100% 50%;
                    filter: blur(10px);
                }
                100% {
                    background-position: 0% 50%;
                    filter: blur(15px);
                }
            }
            
            @keyframes pulseEffect {
                0% {
                    opacity: 0.9;
                    transform: scale(0);
                }
                50% {
                    opacity: 0.5;
                }
                100% {
                    opacity: 0;
                    transform: scale(1.5);
                }
            }
            
            .ciyota-capacity-building-method-title {
                font-size: 1.8rem;
                margin: 10px 0 20px;
                color: #2c3e50;
            }
            
            .ciyota-capacity-building-method-text {
                margin: 0;
                color: #444;
                
                line-height: 1.7;
            }
            
            .ciyota-capacity-building-conclusion {
                padding: 60px 40px;
                max-width: 1000px;
                margin: 0 auto;
                text-align: center;
                font-style: italic;
                color: #555;
                
                border-top: 1px solid #eee;
            }
            
            @media (max-width: 768px) {
                .ciyota-capacity-building-header {
                    height: 350px;
                }
            
                .ciyota-capacity-building-title {
                    font-size: 2rem;
                }
            
                .ciyota-capacity-building-subtitle {
                    font-size: 1.1rem;
                }
            
                .ciyota-capacity-building-intro {
                    padding: 30px 20px;
                }
                
                .ciyota-capacity-building-method {
                    flex-direction: column;
                }
                
                .ciyota-capacity-building-method:nth-child(even) {
                    flex-direction: column;
                }
                
                .ciyota-capacity-building-method-img-container {
                    width: 100%;
                    min-height: 250px;
                }
                
                .ciyota-capacity-building-method-content {
                    width: 100%;
                    padding: 30px 20px;
                }
                
                .ciyota-capacity-building-conclusion {
                    padding: 40px 20px;
                }
            }

/*button on about 
===================*/
.crazy-button-about-section-imp {
    max-width: 1200px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: -60px;
}

.live-indicator {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    font-size: 0.85em;
    font-weight: bold;
    color: white;
}

.live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #32CD32;
    border-radius: 50%;
    margin-right: 5px;
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.enrollment-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 16px 32px;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #10235E, #10235E);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(255, 65, 108, 0.3);
    transition: all 0.3s ease;
    text-decoration: none;
}



.enrollment-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #FFC32C;
    transition: all 0.5s ease;
  
}

.enrollment-button:hover::before {
    left: 100%;
    
}

.enrollment-button::after {
    content: '→';
    position: absolute;
    right: 20px;
    opacity: 0;
    transition: all 0.3s ease;
   
}

.enrollment-button:hover::after {
    opacity: 1;
    right: 15px;
    color: white;
}

.enrollment-button:active {
    transform: scale(0.95);
    box-shadow: 0 5px 10px rgba(255, 65, 108, 0.3);
}

/* Pulsating animation */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 65, 108, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 65, 108, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 65, 108, 0);
    }
}

.enrollment-button {
    animation: pulse 2s infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .enrollment-button {
        padding: 15px 28px;
       
    }
}

@media (max-width: 480px) {
    .enrollment-button {
        padding: 12px 24px;
     
        width: 100%;
        text-align: center;
    }
}



/*how it works
=================*/
.how-it-works-list {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
    font-family: inherit;
  }
  
  .how-it-works-list h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
  }
  
  .how-it-works-list .process-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  
  .how-it-works-list .process-step {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    transition: transform 0.3s ease;
  }
  
  .how-it-works-list .process-step:hover {
    transform: translateX(5px);
  }
  
  .how-it-works-list .step-number {
    background-color: #FFC32C;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
  }
  
  .how-it-works-list .step-content {
    flex-grow: 1;
  }
  
  .how-it-works-list .step-title {
    font-weight: bold;
    margin-bottom: 5px;
    color: #444;
  }
  
  .how-it-works-list .step-description {
    color: #666;
    line-height: 1.5;
  }
  
  .how-it-works-list .mission-statement {
    margin-top: 40px;
    padding: 15px;
    background-color: #f9f5ff;
    border-left: 4px solid #6b4b9e;
    font-style: italic;
    color: #555;
    line-height: 1.6;
    border-radius: 0 4px 4px 0;
  }
  
  /* Responsive styles */
  @media (max-width: 768px) {
    .how-it-works-list .process-step {
      flex-direction: column;
      align-items: flex-start;
    }
    
    .how-it-works-list .step-number {
      margin-bottom: 10px;
    }
  }
  
  @media (min-width: 768px) {
    .how-it-works-list .process-container {
      max-width: 800px;
      margin: 0 auto;
    }
  }





     /* Section specific styles with enhanced button effects */
     .button-our-approach-ciyota {
        padding: 5px 5px;
        text-align: center;
        max-width: 1200px;
        margin: 0 auto;
        margin-bottom: -30px;
    }

    .button-our-approach-ciyota-container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 30px;
        margin-top: 30px;
    }

    .button-our-approach-ciyota-btn {
        position: relative;
        padding: 18px 35px;
        border: none;
        min-width: 250px;
        border-radius: 15px;
        background: linear-gradient(135deg, #3498db, #2980b9);
        color: white;
        font-weight: bold;
        cursor: pointer;
        overflow: hidden;
        z-index: 1;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow: 0 10px 25px rgba(52, 152, 219, 0.3);
        text-decoration: none;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
    }

    .button-our-approach-ciyota-btn:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #10235e, #10235e);
        z-index: -2;
     
    }

    .button-our-approach-ciyota-btn:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0%;
        background: linear-gradient(135deg, #ffc32c, #ffc32c);
        transition: height 0.5s ease;
        z-index: -1;
        border-radius: 15px;
    }

    .button-our-approach-ciyota-btn:hover {
        transform: translateY(-8px) scale(1.03);
        box-shadow: 0 15px 30px rgba(155, 89, 182, 0.4);
        color: #fff;
    }

    .button-our-approach-ciyota-btn:hover:before {
        height: 100%;
    }

    .button-our-approach-ciyota-btn.drc {
        background: linear-gradient(135deg, #10235e, #10235e);
        box-shadow: 0 10px 25px rgba(231, 76, 60, 0.3);
    }

    .button-our-approach-ciyota-btn.drc:after {
        background: linear-gradient(135deg, #10235e, #10235e);
    }

    .button-our-approach-ciyota-btn.drc:before {
        background: linear-gradient(135deg, #ffc32c, #ffc32c);
    }

    .button-our-approach-ciyota-btn.drc:hover {
        box-shadow: 0 15px 30px rgba(243, 156, 18, 0.4);
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .button-our-approach-ciyota-container {
            flex-direction: column;
            align-items: center;
        }

        .button-our-approach-ciyota-btn {
            width: 80%;
            max-width: 300px;
        }
    }

    /* Button ripple effect */
    .button-our-approach-ciyota-btn .ripple {
        position: absolute;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 50%;
        transform: scale(0);
        animation: ripple 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
        pointer-events: none;
    }

    @keyframes ripple {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }
    
    /* Button content transition */
    .button-our-approach-ciyota-btn:before {
        opacity: 0.8;
    }
    
    /* Button shadow pulse effect */
    .button-our-approach-ciyota-btn {
        animation: pulse 2s infinite;
        animation-play-state: paused;
    }
    
    .button-our-approach-ciyota-btn:hover {
        animation-play-state: running;
    }
    
    @keyframes pulse {
        0% {
            box-shadow: 0 10px 25px rgba(52, 152, 219, 0.3);
        }
        50% {
            box-shadow: 0 15px 35px rgba(52, 152, 219, 0.5);
        }
        100% {
            box-shadow: 0 10px 25px rgba(52, 152, 219, 0.3);
        }
    }
    
    .button-our-approach-ciyota-btn.drc {
        animation: pulseDrc 2s infinite;
        animation-play-state: paused;
    }
    
    .button-our-approach-ciyota-btn.drc:hover {
        animation-play-state: running;
    }
    
    @keyframes pulseDrc {
        0% {
            box-shadow: 0 10px 25px rgba(231, 76, 60, 0.3);
        }
        50% {
            box-shadow: 0 15px 35px rgba(231, 76, 60, 0.5);
        }
        100% {
            box-shadow: 0 10px 25px rgba(231, 76, 60, 0.3);
        }
    }


/* section for community in drc
======================================*/
    #drc-section-community {
        scroll-margin-top: 80px; /* Adjust this value based on your header height */
    }
    #drc-section-education {
        scroll-margin-top: 50px; /* Adjust this value based on your header height */
        
    }
    


/* no vacancy
=================*/
.no-vacancy-available {
    position: relative;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    overflow: hidden;
    border-radius: 0px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  }
  
  .no-vacancy-available::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-size: cover;
    opacity: 0.05;
    z-index: 0;
  }
  
  .no-vacancy-available-container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .no-vacancy-available-content {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 3rem;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    border-left: 5px solid #e74c3c;
  }
  
  .no-vacancy-available-header {
    text-align: center;
    margin-bottom: 2.5rem;
  }
  
  .no-vacancy-available-header h2 {
    
    color: #e74c3c;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
  }
  
  .no-vacancy-available-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem 0;
  }
  
  .no-vacancy-available-divider-line {
    height: 2px;
    width: 100px;
    background-color: #e74c3c;
  }
  
  .no-vacancy-available-divider-icon {
    margin: 0 1rem;
    font-size: 2rem;
  }
  
  .no-vacancy-available-message {
    text-align: center;
    margin-bottom: 3rem;
  }
  
  .no-vacancy-available-message-text {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #34495e;
  }
  
  .no-vacancy-available-highlight {
    background-color: #e74c3c;
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
    transform: rotate(-2deg);
  }
  
  .no-vacancy-available-sub-message {
  
    color: #7f8c8d;
    font-style: italic;
  }
  
  .no-vacancy-available-floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
  }
  
  .no-vacancy-available-floating-element {
    position: absolute;
   
    opacity: 0.2;
    animation: no-vacancy-available-float 8s ease-in-out infinite;
  }
  
  .no-vacancy-available-floating-element:nth-child(2) {
    animation-delay: 1s;
    animation-duration: 9s;
  }
  
  .no-vacancy-available-floating-element:nth-child(3) {
    animation-delay: 2s;
    animation-duration: 10s;
  }
  
  .no-vacancy-available-floating-element:nth-child(4) {
    animation-delay: 3s;
    animation-duration: 11s;
  }
  
  @keyframes no-vacancy-available-float {
    0% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-20px) rotate(5deg);
    }
    100% {
      transform: translateY(0) rotate(0deg);
    }
  }
  
  @keyframes no-vacancy-available-pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
    100% {
      transform: scale(1);
    }
  }
  
  .no-vacancy-available-pulse {
    animation: no-vacancy-available-pulse 2s infinite;
  }
  
  /* Media Queries for Responsiveness */
  @media (max-width: 768px) {
    .no-vacancy-available-content {
      padding: 2rem;
    }
    
    .no-vacancy-available-header h2 {
      font-size: 2rem;
    }
    
    .no-vacancy-available-message-text {
      font-size: 1.2rem;
    }
    
    .no-vacancy-available-divider-line {
      width: 60px;
    }
  }
  
  @media (max-width: 480px) {
    .no-vacancy-available {
      padding: 2rem 1rem;
    }
    
    .no-vacancy-available-content {
      padding: 1.5rem;
    }
    
    .no-vacancy-available-header h2 {
      font-size: 1.8rem;
    }
  }


  /* NEW CAREER PAGE HERO SECTION
  ===================================*/
  .careers-ciyota-hero-best {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.careers-ciyota-hero-best__slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.careers-ciyota-hero-best__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
    animation: zoomEffect 15s ease-in-out infinite alternate;
}

@keyframes zoomEffect {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.15);
    }
}

.careers-ciyota-hero-best__slide.active {
    opacity: 1;
}

.careers-ciyota-hero-best__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%);
    z-index: 1;
}

.careers-ciyota-hero-best__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 10%;
    color: white;
    perspective: 1000px;
}

.careers-ciyota-hero-best__ticker {
    overflow: hidden;
    white-space: nowrap;
    margin: 30px 0;
    background: rgba(255, 255, 255, 0.95);
    padding: 20px 0;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.careers-ciyota-hero-best__ticker::before,
.careers-ciyota-hero-best__ticker::after {
    content: '';
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 1;
}

.careers-ciyota-hero-best__ticker::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95), transparent);
}

.careers-ciyota-hero-best__ticker::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.95), transparent);
}

.careers-ciyota-hero-best__ticker-content {
    display: inline-block;
    animation: ticker 45s linear infinite;
    padding-right: 100%;
}

.careers-ciyota-hero-best__ticker-content span {
    display: inline-flex;
    align-items: center;
    margin-right: 60px;
    font-size: 1.25rem;
    font-weight: bold;
    transition: transform 0.4s, color 0.4s;
    padding: 10px 20px;
    cursor: default;
    color: #FFB700;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.careers-ciyota-hero-best__ticker-content span:last-child {
    border-right: none;
}

.careers-ciyota-hero-best__ticker-content span i {
    margin-right: 10px;
    font-size: 1.5rem;
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.careers-ciyota-hero-best__headline {
    font-size: 5rem;
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
    letter-spacing: -2px;
    position: relative;
    display: inline-block;
    overflow: visible;
    white-space: nowrap;
    margin: 0 auto;
}

.careers-ciyota-hero-best__headline::after {
    content: '|';
    position: absolute;
    right: -15px;
    animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
    from, to { color: transparent }
    50% { color: white }
}

.careers-ciyota-hero-best__subheadline {
    font-size: 1.5rem;
    margin-bottom: 30px;
    max-width: 600px;
    transform: translateY(50px);
    opacity: 0;
    animation: fadeUp 1s forwards 0.8s;
    line-height: 1.6;
    text-shadow: 0 0 20px rgba(0,0,0,0.8);
}

@keyframes glitch {
    0% {
        opacity: 0;
        transform: translateY(50px);
        clip-path: inset(0 0 100% 0);
    }
    20% {
        clip-path: inset(33% 0 66% 0);
    }
    40% {
        clip-path: inset(66% 0 33% 0);
    }
    60% {
        clip-path: inset(33% 0 66% 0);
    }
    80% {
        clip-path: inset(66% 0 33% 0);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
    }
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.careers-ciyota-hero-best__particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

@media (max-width: 768px) {
    .careers-ciyota-hero-best__headline {
        font-size: 3rem;
    }
    .careers-ciyota-hero-best__subheadline {
        font-size: 1.2rem;
    }
}

/*HEADER TEAM TITLE
-=========================*/

.team-section-ciyota-hero {
    padding: 100px 0;
    background: linear-gradient(135deg, #0B173E 100%, #0B173E 100%);
    color: white;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.team-section-ciyota-hero-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    position: relative;
    z-index: 2;

}

.team-section-ciyota-hero-content {
    flex: 1;
}

.team-section-ciyota-hero-title {
    margin: 0 0 20px;
    font-weight: 800;
    color: white;
    line-height: 1.2;
    letter-spacing: -0.5px;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.team-section-ciyota-hero-highlight {
    background: linear-gradient(90deg, #ffc32c, #ffc32c);
    -webkit-background-clip: text;
    background-clip: text;
    color: #ffc32c;
    position: relative;
    display: inline-block;
    opacity: none;
    text-transform: uppercase;
}

.team-section-ciyota-hero-highlight::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #ffc32c, #ffc32c);
    border-radius: 3px;
}

.team-section-ciyota-hero-description {
    margin: 0 0 30px;
    line-height: 1.6;
    color: #ffffff;
    max-width: 90%;
}

.team-section-ciyota-hero-cta {
    display: flex;
    align-items: center;
    gap: 20px;
}

.team-section-ciyota-hero-button {
    padding: 16px 32px;
    background-color: #ffc32c;
    color: #10235e;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 1);
   
}

.team-section-ciyota-hero-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px rgba(255, 195, 44, 0.2);
    font-weight: bolder;
}

.team-section-ciyota-hero-badge {
    background: #ffc32c;
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 50px;
    padding: 10px 20px;
    font-weight: 600;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.join-us-button{
    color: #ffffff;
}
.team-section-ciyota-hero-image {
    flex: 1;
    position: relative;
}

.team-section-ciyota-hero-img-wrapper {
    position: relative;
    transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
    transition: all 0.5s ease;
    /*overflow: hidden;*/
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 5px solid rgba(255, 195, 44, 1);
}

.team-section-ciyota-hero-slideshow {
    position: relative;
    width: 100%;
    height: 100%;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(1.05); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes fadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

.team-section-ciyota-hero-img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
    transform: scale(1.05);
    pointer-events: none;
}

.team-section-ciyota-hero-img.active {
    opacity: 1;
    position: relative;
    pointer-events: auto;
    animation: fadeIn 0.8s ease-in-out forwards;
}

.team-section-ciyota-hero-controls {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    z-index: 3;
}

.team-section-ciyota-hero-indicators {
    display: flex;
    gap: 8px;
}

.team-section-ciyota-hero-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.team-section-ciyota-hero-indicator.active {
    background-color: white;
    transform: scale(1.2);
}

.team-section-ciyota-hero-control-prev,
.team-section-ciyota-hero-control-next {
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.team-section-ciyota-hero-control-prev:hover,
.team-section-ciyota-hero-control-next:hover {
    background-color: #ffc32c;
}

.team-section-ciyota-hero-shape-1 {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #ffc32c, #ffc32c);
    border-radius: 50%;
    z-index: 3;
    animation: float 6s ease-in-out infinite;
    opacity: 0.9;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.5);
}

.team-section-ciyota-hero-shape-2 {
    position: absolute;
    bottom: -35px;
    left: -35px;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #ffc32c, #ffc32c);
    border-radius: 20px;
    transform: rotate(45deg);
    z-index: 3;
    animation: float 8s ease-in-out infinite reverse;
    opacity: 0.9;
    box-shadow: 0 10px 30px rgba(255, 194, 44, 0.1);
}

@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-15px) rotate(5deg);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

.team-section-ciyota-hero-blob {
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    border-radius: 50%;
    filter: blur(60px);
    z-index: 1;
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.team-section-ciyota-hero-dots {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 968px) {
    .team-section-ciyota-hero-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .team-section-ciyota-hero {
        padding: 80px 20px;
    }
    
    .team-section-ciyota-hero-container {
        flex-direction: column-reverse;
        text-align: center;
        gap: 40px;
    }
    
    .team-section-ciyota-hero-title {
        font-size: 2rem;
    }
    
    .team-section-ciyota-hero-description {
        margin: 0 auto 30px;
        max-width: 100%;
    }
    
    .team-section-ciyota-hero-cta {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .team-section-ciyota-hero-image {
        margin-bottom: 20px;
    }
    
    .team-section-ciyota-hero-img-wrapper {
        transform: none !important;
    }
}



/* SECTION DEVIDER FOR TEAM
==========================*/

.ciyota-divider-best-sec {
    padding: 20px 0;
    width: 100%;
   
  }
  
  .ciyota-divider-best-sec__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .ciyota-divider-best-sec__header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
  
  }
  
  .ciyota-divider-best-sec__title {
    margin: 0 0 15px;
    
    position: relative;
    display: inline-block;
    font-size: 3rem;
  }
  
  .ciyota-divider-best-sec__title:after {
    content: '';
    position: absolute;
    width: 60px;
    height: 3px;
    background-color: #ffc32c;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
  }
  
 /* .ciyota-divider-best-sec__line {
    height: 1px;
    background-color: #e1e1e1;
    width: 100%;
    max-width: 500px;
    margin: 30px auto 0;
  }*/
  
  .ciyota-divider-best-sec__content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    margin-top: -40px;
    padding: 20px;
  }
  
  .ciyota-divider-best-sec__description {
    line-height: 1.6;
    color: #666;
    margin: 0;
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .ciyota-divider-best-sec {
      padding: 40px 0;
    }
    
    .ciyota-divider-best-sec__header {
      margin-bottom: 30px;
    }
    
    .ciyota-divider-best-sec__line {
      max-width: 300px;
    }
  }
  
  @media (max-width: 480px) {
    .ciyota-divider-best-sec {
      padding: 30px 0;
    }
    
    .ciyota-divider-best-sec__title {
      font-size: 24px;
    }
    
    .ciyota-divider-best-sec__line {
      max-width: 250px;
    }
  }



/*AMOS PRINCIPLE
================*/
.amos-principle{
    color: #ffc32c;
    font-size: 2.5;
    font-weight: bold;
}


/*pup up box area
=======================*/
.ciyota-pop-up-boxwelcome-container {
    --ciyota-primary-color: #4285f4;
    --ciyota-secondary-color: #34a853;
    --ciyota-accent-color: #fbbc05;
    --ciyota-text-color: #333;
    --ciyota-light-color: #fff;
    --ciyota-shadow-color: rgba(0, 0, 0, 0.2);
   
}

/* Overlay */
.ciyota-pop-up-boxwelcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 999;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Pop-up Box */
.ciyota-pop-up-boxwelcome {
    background: var(--ciyota-light-color);
    width: 90%;
    max-width: 500px;
    border-radius: 12px;
    box-shadow: 0 15px 30px var(--ciyota-shadow-color);
    position: relative;
    overflow: hidden;
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

.ciyota-pop-up-boxwelcome.ciyota-pop-up-boxwelcome-active {
    transform: scale(1);
    opacity: 1;
}

/* Header Section */
.ciyota-pop-up-boxwelcome-header {
    background: linear-gradient(135deg, var(--ciyota-primary-color), var(--ciyota-secondary-color));
    padding: 20px;
    color: var(--ciyota-light-color);
    position: relative;
}

.ciyota-pop-up-boxwelcome-header h2 {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    color: #ffffff;
    font-weight: bold;
}

/* Close Button */
.ciyota-pop-up-boxwelcome-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 2rem;
    outline: none;
}

.ciyota-pop-up-boxwelcome-close:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Content */
.ciyota-pop-up-boxwelcome-content {
    padding: 30px;
    text-align: center;
}

.ciyota-pop-up-boxwelcome-content p {
    margin-bottom: 20px;
    
    line-height: 1.6;
    color: #555;
}

/* Accent Bar */
.ciyota-pop-up-boxwelcome-accent {
    height: 5px;
    background: linear-gradient(90deg, var(--ciyota-accent-color), var(--ciyota-primary-color), var(--ciyota-secondary-color));
}

/* Action Button */
.ciyota-pop-up-boxwelcome-btn {
    display: inline-block;
    background: var(--ciyota-primary-color);
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 15px;
    transition: background 0.3s, transform 0.2s;
    border: none;
    cursor: pointer;
}

.ciyota-pop-up-boxwelcome-btn:hover {
    background: #ffc32c;
    transform: translateY(-2px);
    color: #0B173E;
    font-weight: bold;
}

/* Animation for popup elements */
@keyframes ciyota-pop-up-boxwelcome-fadein {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ciyota-pop-up-boxwelcome-animate {
    animation: ciyota-pop-up-boxwelcome-fadein 0.5s forwards;
    opacity: 0;
}

.ciyota-pop-up-boxwelcome-delay1 {
    animation-delay: 0.1s;
}

.ciyota-pop-up-boxwelcome-delay2 {
    animation-delay: 0.3s;
}

.ciyota-pop-up-boxwelcome-delay3 {
    animation-delay: 0.5s;
}


/*HERE SECTION FOR SPONSORSHIP
=================================*/
.sponsorship-hero-ciyota {
    padding: 100px 0;
    background: linear-gradient(135deg, #0B173E 100%, #0B173E 100%);
    color: white;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.sponsorship-hero-ciyota-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    position: relative;
    z-index: 2;
}

.sponsorship-hero-ciyota-content {
    flex: 1;
}

.sponsorship-hero-ciyota-title {
    margin: 0 0 20px;
    font-weight: 800;
    color: white;
    line-height: 1.2;
    letter-spacing: -0.5px;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.sponsorship-hero-ciyota-highlight {
    background: linear-gradient(90deg, #ffc32c, #ffc32c);
    -webkit-background-clip: text;
    background-clip: text;
    color: #ffc32c;
    position: relative;
    display: inline-block;
    opacity: none;
    text-transform: uppercase;
}

.sponsorship-hero-ciyota-highlight::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #ffc32c, #ffc32c);
    border-radius: 3px;
}

.sponsorship-hero-ciyota-description {
    margin: 0 0 30px;
    line-height: 1.6;
    color: #ffffff;
    max-width: 90%;
}

.sponsorship-hero-ciyota-cta {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sponsorship-hero-ciyota-button {
    padding: 16px 32px;
    background-color: #ffc32c;
    color: #10235e;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 1);
}

.sponsorship-hero-ciyota-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px rgba(255, 195, 44, 0.2);
    font-weight: bolder;
}

.sponsorship-hero-ciyota-badge {
    background: #ffc32c;
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 50px;
    padding: 10px 20px;
    font-weight: 600;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.join-us-button{
    color: #ffffff;
}

.sponsorship-hero-ciyota-video {
    flex: 1;
    position: relative;
    width: 100%;
}

.sponsorship-hero-ciyota-video-wrapper {
    position: relative;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 5px solid rgba(255, 195, 44, 1);
    overflow: hidden;
    transition: transform 0.5s ease;
    width: 100%;
}

.sponsorship-hero-ciyota-youtube-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
}

.sponsorship-hero-ciyota-youtube-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 14px;
}

.sponsorship-hero-ciyota-shape-1 {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #ffc32c, #ffc32c);
    border-radius: 50%;
    z-index: 3;
    animation: float 6s ease-in-out infinite;
    opacity: 0.9;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.5);
}

.sponsorship-hero-ciyota-shape-2 {
    position: absolute;
    bottom: -35px;
    left: -35px;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #ffc32c, #ffc32c);
    border-radius: 20px;
    transform: rotate(45deg);
    z-index: 3;
    animation: float 8s ease-in-out infinite reverse;
    opacity: 0.9;
    box-shadow: 0 10px 30px rgba(255, 194, 44, 0.1);
}

@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-15px) rotate(5deg);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

.sponsorship-hero-ciyota-blob {
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    border-radius: 50%;
    filter: blur(60px);
    z-index: 1;
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.sponsorship-hero-ciyota-dots {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 968px) {
    .sponsorship-hero-ciyota-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .sponsorship-hero-ciyota {
        padding: 80px 20px;
    }
    
    .sponsorship-hero-ciyota-container {
        flex-direction: column-reverse;
        text-align: center;
        gap: 40px;
    }
    
    .sponsorship-hero-ciyota-title {
        font-size: 2rem;
    }
    
    .sponsorship-hero-ciyota-description {
        margin: 0 auto 30px;
        max-width: 100%;
    }
    
    .sponsorship-hero-ciyota-cta {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .sponsorship-hero-ciyota-video {
        margin-bottom: 20px;
        width: 100%;
    }
    
    .sponsorship-hero-ciyota-video-wrapper {
        width: 100%;
        max-width: 100%;
    }
    
    .sponsorship-hero-ciyota-youtube-container {
        width: 100%;
        padding-bottom: 56.25%; /* Maintain 16:9 aspect ratio */
    }
    
    /* Disable hover effects on mobile */
    .sponsorship-hero-ciyota-video-wrapper:hover {
        transform: none !important;
    }
}


/* Responsive styling for the title */
.title-ciyota-main-edit {
    font-size: 2em;
    text-align: center;
    margin: 0.1rem 0;
    padding: 0.5rem;
    margin-bottom: 20px;
}

/* Media queries for responsiveness */
@media screen and (max-width: 768px) {
    .title-ciyota-main-edit {
        font-size: 1.4em;
    }
}

@media screen and (max-width: 480px) {
    .title-ciyota-main-edit {
        font-size: 1.3em;
        padding: 0.3rem;
    }
}





        /* Hero Section Specific CSS */
        .big-hero-ciyota-section-home {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        .big-hero-ciyota-section-home .slideshow {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        .big-hero-ciyota-section-home .slide {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .big-hero-ciyota-section-home .slide.active {
            opacity: 1;
        }

        .big-hero-ciyota-section-home .slide-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: #fff;
            z-index: 10;
            padding: 0 20px;
        }

        .big-hero-ciyota-section-home .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.2);
            z-index: 5;
        }

        .big-hero-ciyota-section-home .mission-title {
            font-size: 2rem;
            font-weight: 700;
            color: #ffc32c;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
        }

        .big-hero-ciyota-section-home .mission-statement {
            font-size: 2.9em;
            max-width: 900px;
            margin-bottom: 2.5rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            font-weight: 500;
            line-height: 1.2;
            font-weight: bolder;
        }
        
        .big-hero-ciyota-section-home .slide-nav {
            position: absolute;
            top: 50%;
            width: 100%;
            z-index: 20;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            transform: translateY(-50%);
        }
        
        .big-hero-ciyota-section-home .nav-btn {
            width: 50px;
            height: 50px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            color: white;
            font-size: 24px;
            border: 2px solid rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(5px);
        }
        
        .big-hero-ciyota-section-home .nav-btn:hover {
            background-color: rgba(255, 195, 44, 0.7);
            color: #0B173E;
            transform: scale(1.1);
        }

        .big-hero-ciyota-section-home .cta-button {
            padding: 15px 30px;
            font-size: 1.5rem;
            background-color: #ffc32c;
            color: #0B173E;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 1px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            position: relative;
            z-index: 1;
            animation: pulse 2s infinite;
        }

        .big-hero-ciyota-section-home .cta-button:hover {
            background-color: #0B173E;
            color: #ffc32c;
            font-weight: bold;
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
            animation: none;
        }
        
        .big-hero-ciyota-section-home .cta-button::before {
            content: '';
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            border: 2px solid #ffc32c;
            border-radius: 55px;
            opacity: 0;
            z-index: -1;
            animation: glow 2s infinite;
        }
        
        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
            100% {
                transform: scale(1);
            }
        }
        
        @keyframes glow {
            0% {
                opacity: 0.6;
                transform: scale(0.95);
            }
            50% {
                opacity: 0.3;
                transform: scale(1.1);
            }
            100% {
                opacity: 0.6;
                transform: scale(0.95);
            }
        }

        .big-hero-ciyota-section-home .slideshow-indicator {
            position: absolute;
            bottom: 30px;
            right: 30px;
            z-index: 15;
            color: white;
            background-color: rgba(0, 0, 0, 0.3);
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 14px;
            backdrop-filter: blur(5px);
        }

        /* Responsive Adjustments */
        @media (max-width: 1024px) {
            .big-hero-ciyota-section-home .mission-title {
                font-size: 1.8em;
            }
            .big-hero-ciyota-section-home .mission-statement {
                font-size: 2.7em;
            }
        }

        @media (max-width: 768px) {
            .big-hero-ciyota-section-home .mission-title {
                font-size: 1.6em;
            }
            .big-hero-ciyota-section-home .mission-statement {
                font-size: 2.2em;
            }
            .big-hero-ciyota-section-home .cta-button {
                padding: 12px 25px;
                font-size: 0.8em;
            }
        }

        @media (max-width: 480px) {
            .big-hero-ciyota-section-home .mission-title {
                font-size: 1.3em;
            }
            .big-hero-ciyota-section-home .mission-statement {
                font-size: 1.8em;
            }
            .big-hero-ciyota-section-home .cta-button {
                padding: 10px 20px;
                font-size: 0.8em;
            }
            .big-hero-ciyota-section-home .nav-btn {
                width: 40px;
                height: 40px;
                font-size: 20px;
            }
        }



     /* CIYOTA Testimonial Section Styles */
     .ciyota-sponsorship-testimonial {
        padding: 4rem 0;
        overflow: hidden;
        position: relative;
        width: 100%;
        background-color: #FFE196;
      }
      
      .ciyota-sponsorship-testimonial__container {
        max-width: 1200px;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        box-sizing: border-box;
      }
      
      .ciyota-sponsorship-testimonial__heading {
        text-align: center;
        margin-bottom: 3rem;
        position: relative;
      }
      
      .ciyota-sponsorship-testimonial__heading h2 {
        font-size: 2em;
        margin-bottom: 1rem;
        background: white;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: relative;
        display: inline-block;
      }
      
      .ciyota-sponsorship-testimonial__heading h2::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background: white;
        border-radius: 2px;
      }
      
      .ciyota-sponsorship-testimonial__slider {
        position: relative;
        width: 100%;
        height: auto;
        padding-bottom: 1rem;
      }
      
      .ciyota-sponsorship-testimonial__profiles {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3rem 0;
        position: relative;
        height: 200px;
      }
      
      /* Update position classes for profiles */
      .ciyota-sponsorship-testimonial__profile {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        margin: 0 -10px;
        transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        filter: blur(2px) grayscale(0.8);
        transform: scale(0.8);
        cursor: pointer;
        z-index: 1;
        border: 3px solid rgba(255, 255, 255, 0.2);
      }
      
      .ciyota-sponsorship-testimonial__profile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.3s ease;
      }
      
      /* Position classes for profiles */
      .ciyota-sponsorship-testimonial__profile.moving {
        transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
      }
      
      .ciyota-sponsorship-testimonial__profile.active {
        z-index: 10;
        transform: translateX(0) scale(1.2);
        margin: 0 30px;
        filter: blur(0) grayscale(0);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      }
      
      .ciyota-sponsorship-testimonial__profile.active img {
        border: none;
      }
      
      .ciyota-sponsorship-testimonial__profile.prev {
        z-index: 5;
        transform: translateX(-50px) scale(0.9);
        filter: blur(1px) grayscale(0.4);
      }
      
      .ciyota-sponsorship-testimonial__profile.next {
        z-index: 5;
        transform: translateX(50px) scale(0.9);
        filter: blur(1px) grayscale(0.4);
      }
      
      .ciyota-sponsorship-testimonial__profile.far-left {
        z-index: 1;
        transform: translateX(-100px) scale(0.7);
        filter: blur(2px) grayscale(0.8);
      }
      
      .ciyota-sponsorship-testimonial__profile.far-right {
        z-index: 1;
        transform: translateX(100px) scale(0.7);
        filter: blur(2px) grayscale(0.8);
      }
      
      .ciyota-sponsorship-testimonial__profile.active::before {
        content: '';
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        border: 3px solid transparent;
        border-radius: 50%;
        animation: rotateCircle 4s linear infinite;
        background: linear-gradient(90deg, #4a6bff, #2ec977, #4a6bff) border-box;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
      }
      
      .ciyota-sponsorship-testimonial__profile.active::after {
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        background: #2ec977;
        border-radius: 50%;
        bottom: 5px;
        right: 0px;
        transform: translate(25%, 0);
        box-shadow: 0 0 0 3px white;
        animation: blink 1.5s ease-in-out infinite;
        z-index: 15;
      }
      
      @keyframes rotateCircle {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      
      @keyframes blink {
        0%, 100% {
          opacity: 1;
          box-shadow: 0 0 0 3px white, 0 0 10px rgba(46, 201, 119, 0.6);
        }
        50% {
          opacity: 0.8;
          box-shadow: 0 0 0 3px white, 0 0 5px rgba(46, 201, 119, 0.2);
        }
      }
      
      .ciyota-sponsorship-testimonial__content-container {
        position: relative;
        overflow: hidden;
        max-width: 900px;
        margin: 0 auto;
        padding-bottom: 2rem;
        min-height: 240px;
      }
      
      .ciyota-sponsorship-testimonial__content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        display: block;
        background: #ffffff;
        backdrop-filter: blur(10px);
        border-radius:40px;
        padding: 2.5rem;
        border: 1px solid rgba(255, 255, 255, 0.3);
        text-align: center;
      }
      
      .ciyota-sponsorship-testimonial__content.active {
        opacity: 1;
        transform: translateY(0);
      }
      
      .ciyota-sponsorship-testimonial__content-text {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
      }
      
      .ciyota-sponsorship-testimonial__content-text p {
        margin-bottom: 1.5rem;
        line-height: 1.8;
        position: relative;
        color: #333;
        
        font-style: italic;
        padding: 0 2rem;
      }
      
      .ciyota-sponsorship-testimonial__content-text p::before {
        content: '"';
        font-size: 4rem;
        color: rgba(46, 201, 119, 0.2);
        position: absolute;
        top: -20px;
        left: 0;
        font-family: Georgia, serif;
      }
      
      .ciyota-sponsorship-testimonial__content-text p::after {
        content: '"';
        font-size: 4rem;
        color: rgba(46, 201, 119, 0.2);
        position: absolute;
        bottom: -40px;
        right: 0;
        font-family: Georgia, serif;
      }
      
      .ciyota-sponsorship-testimonial__content-text h3 {
        font-size: 1em;
        color: #4a6bff;
        margin-bottom: 0.5rem;
        margin-top: 1.5rem;
      }
      
      .ciyota-sponsorship-testimonial__content-text h4 {
        font-size: 1rem;
        color: #777;
        font-weight: normal;
        font-style: italic;
      }
      
      .ciyota-sponsorship-testimonial__controls {
        position: absolute;
        width: 100%;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        z-index: 20;
      }
      
      .ciyota-sponsorship-testimonial__btn {
        border: none;
        background: #10235E;
        color: #FFC32C;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        transition: all 0.3s ease;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        z-index: 30;
      }
      
      .ciyota-sponsorship-testimonial__btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        background: #FFC32C;
        color: #10235E;
      }
      
      .ciyota-sponsorship-testimonial__btn:active {
        transform: translateY(0);
      }
      
      /* Floating animation effect */
      .ciyota-sponsorship-testimonial__floating {
        position: absolute;
        z-index: -1;
        opacity: 0.5;
        pointer-events: none;
      }
      
      .ciyota-sponsorship-testimonial__floating:nth-child(1) {
        top: 10%;
        left: 5%;
        animation: float 8s ease-in-out infinite;
      }
      
      .ciyota-sponsorship-testimonial__floating:nth-child(2) {
        top: 60%;
        left: 10%;
        animation: float 12s ease-in-out infinite 1s;
      }
      
      .ciyota-sponsorship-testimonial__floating:nth-child(3) {
        top: 20%;
        right: 10%;
        animation: float 10s ease-in-out infinite 2s;
      }
      
      .ciyota-sponsorship-testimonial__floating:nth-child(4) {
        bottom: 15%;
        right: 5%;
        animation: float 9s ease-in-out infinite 3s;
      }
      
      @keyframes float {
        0%, 100% {
          transform: translateY(0) rotate(0deg);
        }
        50% {
          transform: translateY(-20px) rotate(5deg);
        }
      }
      
      @media (max-width: 992px) {
        .ciyota-sponsorship-testimonial__content {
          height: auto;
        }
        
        .ciyota-sponsorship-testimonial__content-container {
          height: auto;
          min-height: 320px;
        }
        
        .ciyota-sponsorship-testimonial__profile.active {
          margin: 0 15px;
        }
        
        .ciyota-sponsorship-testimonial__content-text p {
          padding: 0;
        }
      }
      
      @media (max-width: 768px) {
        .ciyota-sponsorship-testimonial__profile {
          width: 80px;
          height: 80px;
        }
        
        .ciyota-sponsorship-testimonial__profile.active::after {
          width: 16px;
          height: 16px;
        }
        
        .ciyota-sponsorship-testimonial__heading h2 {
          font-size: 1.5em;
        }
        
        .ciyota-sponsorship-testimonial__content-text p {
          font-size: 1rem;
          line-height: 1.6;
          padding: 0;
        }
        
        .ciyota-sponsorship-testimonial__content-text p::before,
        .ciyota-sponsorship-testimonial__content-text p::after {
          font-size: 3rem;
        }
        
        .ciyota-sponsorship-testimonial__content-container {
          min-height: 340px;
        }
        
        .ciyota-sponsorship-testimonial__content {
          padding: 1.5rem;
        }
      }
      
      @media (max-width: 576px) {
        .ciyota-sponsorship-testimonial__profile {
          width: 120px;
          height: 120px;
          margin: 0 -10px;
        }
        
        .ciyota-sponsorship-testimonial__profile.active {
          margin: 0 8px;
        }
        
        .ciyota-sponsorship-testimonial__content-text p {
          font-size: 0.9em;
          margin-bottom: 1.25rem;
        }
        
        .ciyota-sponsorship-testimonial__content-text h3 {
          font-size: 1.8rem;
        }
        
        .ciyota-sponsorship-testimonial__content-text h4 {
          font-size: 0.9rem;
        }
        
        .ciyota-sponsorship-testimonial__content-container {
          min-height: 380px;
        }
        
        .ciyota-sponsorship-testimonial__content {
          padding: 1.25rem;
        }
        
        .ciyota-sponsorship-testimonial__btn {
          width: 35px;
          height: 35px;
        }
      }

        /* Logo section styles */
.rebranding-explanation-ciyota-logo {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 30px 0;
   
}

/* Text content styles */
.rebranding-explanation-ciyota-logo-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 30px;
    padding: 0 20px;
   
}

.rebranding-explanation-ciyota-logo-title {
    font-size: 28px;
    margin-bottom: 15px;
    color: #333;
}

.rebranding-explanation-ciyota-logo-description {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
}

/* Responsive image styles */
.rebranding-explanation-ciyota-logo img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Maintain aspect ratio while scaling down */
    object-fit: contain;
   
}

/* Media queries for different screen sizes */
@media screen and (max-width: 768px) {
    .rebranding-explanation-ciyota-logo {
        margin: 20px 0;
    }
    
    .rebranding-explanation-ciyota-logo-title {
        font-size: 24px;
    }
}

@media screen and (max-width: 480px) {
    .rebranding-explanation-ciyota-logo {
        margin: 15px 0;
    }
    
    .container {
        padding: 10px;
    }
    
    .rebranding-explanation-ciyota-logo-title {
        font-size: 22px;
    }
    
    .rebranding-explanation-ciyota-logo-description {
        font-size: 14px;
    }
}





  /* Timeline container styles 
  ============================*/
  .ciyota-our-genesis {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.ciyota-our-genesis-heading {
    text-align: center;
    margin-bottom: 50px;
    padding: 20px 0;
    position: relative;
}

.ciyota-our-genesis-heading:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 5px;
    background: linear-gradient(90deg, #FFC32C, #FFE196);
    border-radius: 5px;
}

.ciyota-our-genesis-heading h1 {
    color: #2c3e50;
    margin-bottom: 15px;
    text-align: justify;
    font-weight: 800;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.ciyota-our-genesis-heading p {
    padding:20px;
    max-width: 1200px;
    margin: 0 auto;
    line-height: 1.6;
    text-align: justify;
}

/* Timeline items */
.ciyota-our-genesis-timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Timeline central line */
.ciyota-our-genesis-timeline:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 6px;
    background: linear-gradient(to bottom, #3498db, #9b59b6, #e74c3c);
    transform: translateX(-50%);
    border-radius: 6px;
    z-index: 1;
}

.ciyota-our-genesis-timeline-item {
    position: relative;
    margin-bottom: 40px;
    z-index: 2;
}

/* Year toggle button */
.ciyota-our-genesis-year-toggle {
    position: relative;
    background-color: #FFE196;
    color: #0B173E;
    padding: 18px 30px;
    margin-bottom: 0;
    border-radius: 15px;
    cursor: pointer;
    font-size: 24px;
    font-weight: bold;
    text-align: left;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 3px solid #fff;
    overflow: hidden;
}

.ciyota-our-genesis-year-toggle:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0));
    z-index: 1;
}

.ciyota-our-genesis-year-toggle span {
    position: relative;
    z-index: 2;
}

.ciyota-our-genesis-year-toggle:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
}

.ciyota-our-genesis-year-toggle::after {
    content: "+";
    font-size: 30px;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    position: relative;
    z-index: 2;
    
}

.ciyota-our-genesis-year-toggle.active {
    background-color: #FFC32C;
    border-radius: 15px 15px 0 0;
    margin-bottom: 0;
    transform: translateY(0);
    
}

.ciyota-our-genesis-year-toggle.active::after {
    content: "−";
    transform: rotate(180deg);
}

/* Content container */
.ciyota-our-genesis-content {
    background: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0, 1, 0, 1), 
                box-shadow 0.4s ease, 
                transform 0.4s ease,
                opacity 0.4s ease;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transform: translateY(-20px);
    opacity: 0;
    z-index: 1;
    position: relative;
    border: 0 solid #e0e0e0;
    border-top: 0;
}

.ciyota-our-genesis-content.active {
    padding: 30px;
    max-height: 9999px;
    transition: max-height 0.6s cubic-bezier(0.5, 0, 1, 0), 
                box-shadow 0.4s ease, 
                transform 0.4s ease,
                opacity 0.4s ease;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
    opacity: 1;
    border: 3px solid #e0e0e0;
    border-top: 0;
    margin-bottom: 40px;
}

/* Timeline node */
.ciyota-our-genesis-timeline-node {
    position: absolute;
    width: 30px;
    height: 30px;
    background: #fff;
    border: 5px solid #79ACF7;
    border-radius: 50%;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    z-index: 3;
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.2);
    transition: all 0.4s ease;
}

.ciyota-our-genesis-year-toggle.active + .ciyota-our-genesis-content + .ciyota-our-genesis-timeline-node {
    background: #53BC7D;
    transform: translateX(-50%) scale(1.2);
    box-shadow: 0 0 0 6px rgba(52, 152, 219, 0.3);
    border: 5px solid #ffffff;
}

/* Title styling */
.ciyota-our-genesis-title {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #2c3e50;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.05);
    padding-bottom: 10px;
    border-bottom: 2px dashed #f0f0f0;
}

/* Description styling */
.ciyota-our-genesis-description {
    line-height: 1.8;
    color: #555;
    margin-bottom: 25px;
    font-size: 16px;
}

/* Hero image styling */
.ciyota-our-genesis-hero-image {
    width: 100%;
    height: 350px;
    overflow: hidden;
    border-radius: 15px;
    margin-bottom: 25px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    position: relative;
}

.ciyota-our-genesis-hero-image:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.3));
    z-index: 2;
}

.ciyota-our-genesis-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    z-index: 1;
}

.ciyota-our-genesis-hero-image:hover img {
    transform: scale(1.05);
}

/* Image gallery styling */
.ciyota-our-genesis-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 30px 0;
}

.ciyota-our-genesis-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    aspect-ratio: 1/1;
    transition: all 0.4s ease;
}

.ciyota-our-genesis-gallery-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}

.ciyota-our-genesis-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ciyota-our-genesis-gallery-item:hover img {
    transform: scale(1.08);
}

.ciyota-our-genesis-gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 12px 18px;
    font-size: 14px;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ciyota-our-genesis-gallery-item:hover .ciyota-our-genesis-gallery-caption {
    opacity: 1;
    transform: translateY(0);
}

/* Sub-events styling */
.ciyota-our-genesis-sub-events {
    margin-top: 40px;
    padding-top: 20px;
    position: relative;
}

.ciyota-our-genesis-sub-events h3 {
    font-size: 22px;
    color: #2c3e50;
    margin-bottom: 25px;
    padding-bottom: 15px;
    position: relative;
    display: inline-block;
}

.ciyota-our-genesis-sub-events h3:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #3498db, transparent);
    border-radius: 3px;
}

.ciyota-our-genesis-sub-event {
    background: #f9f9fa;
    border-left: 5px solid #3498db;
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 0 15px 15px 0;
    transition: all 0.4s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.ciyota-our-genesis-sub-event:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(to bottom, #3498db, #9b59b6);
    z-index: 1;
}

.ciyota-our-genesis-sub-event:hover {
    transform: translateX(10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.ciyota-our-genesis-sub-event-date {
    font-weight: bold;
    color: #3498db;
    margin-bottom: 8px;
    font-size: 16px;
}

.ciyota-our-genesis-sub-event-title {
    font-size: 20px;
    margin: 8px 0;
    font-weight: bold;
    color: #2c3e50;
}

.ciyota-our-genesis-sub-event-description {
    color: #555;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Sub-event hero image */
.ciyota-our-genesis-sub-event-hero {
    width: 100%;
    height: 220px;
    border-radius: 12px;
    overflow: hidden;
    margin: 20px 0;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
}

.ciyota-our-genesis-sub-event-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ciyota-our-genesis-sub-event-hero:hover img {
    transform: scale(1.08);
}

/* Sub-event gallery */
.ciyota-our-genesis-sub-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.ciyota-our-genesis-sub-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 1/1;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.ciyota-our-genesis-sub-gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.12);
}

.ciyota-our-genesis-sub-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ciyota-our-genesis-sub-gallery-item:hover img {
    transform: scale(1.08);
}

/* Responsive layout for smaller screens */
@media screen and (max-width: 992px) {
    .ciyota-our-genesis-timeline:before {
        left: 30px;
    }
    
    .ciyota-our-genesis-timeline-node {
        left: 30px;
        transform: translateX(0);
    }
    
    .ciyota-our-genesis-year-toggle.active + .ciyota-our-genesis-content + .ciyota-our-genesis-timeline-node {
        transform: translateX(0) scale(1.2);
    }
    
    .ciyota-our-genesis-heading h1 {
        font-size: 32px;
    }
    .ciyota-our-genesis-heading p {
        
        text-align: left;
    }
    
    .ciyota-our-genesis-year-toggle {
        font-size: 20px;
        padding: 15px 25px;
    }
}

@media screen and (max-width: 768px) {
    .ciyota-our-genesis-hero-image {
        height: 250px;
    }
    
    .ciyota-our-genesis-sub-event-hero {
        height: 180px;
    }
    
    .ciyota-our-genesis-timeline-node {
        width: 25px;
        height: 25px;
    }
    
    .ciyota-our-genesis-content.active {
        padding: 25px 20px;
    }
    
    .ciyota-our-genesis-title {
        font-size: 22px;
    }
    .ciyota-our-genesis-heading p {
        
        text-align: left;
    }
}

@media screen and (max-width: 480px) {
    .ciyota-our-genesis-hero-image {
        height: 200px;
    }
    
    .ciyota-our-genesis-sub-event-hero {
        height: 150px;
    }
    
    .ciyota-our-genesis-gallery {
        grid-template-columns: 1fr;
    }
    
    .ciyota-our-genesis-sub-gallery {
        grid-template-columns: 1fr;
    }
    
    .ciyota-our-genesis-content.active {
        padding: 20px 15px;
    }
    
    .ciyota-our-genesis-year-toggle {
        font-size: 18px;
        padding: 12px 20px;
    }
    
    .ciyota-our-genesis-heading h1 {
        font-size: 28px;
    }
    .ciyota-our-genesis-heading p {
        
        text-align: left;
    }
}

/* Animation keyframes */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(52, 152, 219, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
    }
}




/* 4th-ciyota-hero-style section styles 
========================================*/
.fourth-ciyota-hero-style {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.fourth-ciyota-hero-style-slider {
    position: relative;
    width: 100%;
    height: 600px;
}

.fourth-ciyota-hero-style-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.fourth-ciyota-hero-style-slide.active {
    display: block;
}

.fourth-ciyota-hero-style-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Enhance image quality */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    transform: translateZ(0); /* Force hardware acceleration */
}

.fourth-ciyota-hero-style-overlay {
    display: none;
}

.fourth-ciyota-hero-style-slide-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.fourth-ciyota-hero-style-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.fourth-ciyota-hero-style-dot.active {
    background-color: #fff;
}

.fourth-ciyota-hero-style-content {
    position: absolute;
    bottom: 150px;
    left: 10%;
    text-align: left;
    z-index: 5;
    width: 80%;
    max-width: 800px;
    background-color: rgba(16, 35, 94, 0.7);
    padding: 20px;
    border-radius: 4px;
}

.fourth-ciyota-hero-style-small-header {
    font-size: 18px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffc32c;
    font-weight: bold;
}

.fourth-ciyota-hero-style-large-header {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 0;
    line-height: 1.2;
    color: white;
}

.fourth-ciyota-hero-style-button-container {
    position: absolute;
    bottom: 80px;
    left: 10%;
    z-index: 5;
}

.fourth-ciyota-hero-style-button {
    display: inline-block;
    padding: 15px 40px;
    background-color: #ffc32c;
    color: #0B173E;
    text-decoration: none;
    border-radius: 20px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s ease;
    border: none;
}

.fourth-ciyota-hero-style-button:hover {
    background-color: #0B173E;
    color: #ffc32c;
    font-weight: bold;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    /* Mobile slider container */
    .fourth-ciyota-hero-style-slider {
        height: 100vh;
        max-height: 500px;
        min-height: 350px;
        background-color: #10235E;
    }
    
    /* For desktop slides - hide them on mobile */
    .fourth-ciyota-hero-style-slide {
        display: none !important;
    }
    
    /* Mobile slideshow - show these specifically on mobile */
    .fourth-ciyota-hero-style-mobile-slideshow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    
    .fourth-ciyota-hero-style-mobile-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 1s ease;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .fourth-ciyota-hero-style-mobile-slide.active {
        opacity: 1;
    }

    .fourth-ciyota-hero-style-content {
        bottom: auto;
        top: 35%;  /* Moved higher up */
        transform: translateY(-40%);
        left: 5%;
        width: 90%;
        padding: 12px;
        z-index: 5;
    }

    .fourth-ciyota-hero-style-button-container {
        bottom: auto;
        top: 75%;  /* Moved further down */
        left: 5%;
        z-index: 5;
    }

    .fourth-ciyota-hero-style-button {
        padding: 8px 20px;
        font-size: 14px;
    }

    .fourth-ciyota-hero-style-large-header {
        font-size: 20px;
        line-height: 1.3;
    }

    .fourth-ciyota-hero-style-small-header {
        font-size: 16px;
        margin-bottom: 5px;
    }
}

/* Extra small devices */
@media (max-width: 576px) {
    .fourth-ciyota-hero-style-slider {
        height: 100vh;
        max-height: 450px;
        min-height: 300px;
    }

    .fourth-ciyota-hero-style-content {
        padding: 10px;
        top: 30%;  /* Moved even higher on small screens */
        transform: translateY(-35%);
    }
    
    .fourth-ciyota-hero-style-button-container {
        top: 70%;  /* Positioned lower on small screens */
    }
    
    .fourth-ciyota-hero-style-large-header {
        font-size: 25px;
    }
    
    .fourth-ciyota-hero-style-small-header {
        font-size: 15px;
    }
    
    .fourth-ciyota-hero-style-button {
        padding: 6px 15px;
        font-size: 18px;
    }
}

/* Very small devices */
@media (max-width: 375px) {
    .fourth-ciyota-hero-style-content {
        top: 25%;  /* Even higher position on very small screens */
    }
    
    .fourth-ciyota-hero-style-button-container {
        top: 65%;  /* Lower position on very small screens */
    }
}




/* Hero Section Styles for Pages*/
   .hero-pages-section-ciyota {
    position: relative;
    height: 79vh;
    min-height: 300px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}

.hero-pages-section-ciyota .hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.hero-pages-section-ciyota .hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Dark overlay to reduce image luminosity */
.hero-pages-section-ciyota .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Adjust opacity as needed */
    z-index: -1;
}

.hero-pages-section-ciyota .hero-title {
    font-size: 3em;
    font-weight: bold;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 1;
    
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .hero-pages-section-ciyota {
        height: 30vh;
    }
    
    .hero-pages-section-ciyota .hero-title {
        font-size: 3rem;
        padding: 0 15px;
    }
}





 /* Report-Ciyota-Table Styles 
 ==============================*/

 .report-ciyota-table-section {
    max-width: 1200px;
    margin: 30px auto;
    padding: 20px;
  }

  .report-ciyota-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .report-ciyota-table-title {
    color: #1a2b49;
    margin: 0;
  }

  .report-ciyota-table-search {
    position: relative;
    width: 100%;
    max-width: 320px;
  }

  .report-ciyota-table-search input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
  }

  .report-ciyota-table-search input:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
  }

  .report-ciyota-table-search::before {
    content: '';
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
  }

  .report-ciyota-table-container {
    overflow-x: auto;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    background: #fff;
  }

  .report-ciyota-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
   
  }

  .report-ciyota-table thead {
    background-color: #ffc32c;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .report-ciyota-table th {
    font-weight: bold;
    color: #0B173E;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    text-transform: uppercase;
    
    letter-spacing: 0.05em;
  }

  .report-ciyota-table tbody tr {
    transition: background-color 0.2s ease;
  }

  .report-ciyota-table tbody tr:hover {
    background-color: #f8fafc;
  }

  .report-ciyota-table td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    color: #1e293b;
  }

  .report-ciyota-table tr:last-child td {
    border-bottom: none;
  }

  .report-ciyota-table-name {
    font-weight: 500;
    max-width: 300px;
  }

  .report-ciyota-table-date {
    color: #64748b;
    white-space: nowrap;
  }

  .report-ciyota-table-status {
    white-space: nowrap;
  }

  .report-ciyota-table-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .report-ciyota-table-status-completed {
    background-color: #ecfdf5;
    color: #047857;
  }

  .report-ciyota-table-status-pending {
    background-color: #fff7ed;
    color: #c2410c;
  }

  .report-ciyota-table-status-draft {
    background-color: #eff6ff;
    color: #1d4ed8;
  }

  .report-ciyota-table-view-btn {
    background-color: #0B173E;
    color: #ffc32c;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  .report-ciyota-table-view-btn:hover {
    background-color: #ffc32c;
    transform: translateY(-1px);
    color: #0B173E;

  }

  .report-ciyota-table-view-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.4);
  }

  .report-ciyota-table-view-btn::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
  }

  .report-ciyota-table-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .report-ciyota-table-pagination-info {
    color: #10235E;
    
  }

  .report-ciyota-table-pagination-controls {
    display: flex;
    gap: 0.5rem;
  }

  .report-ciyota-table-pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background-color: #fff;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .report-ciyota-table-pagination-btn:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
  }

  .report-ciyota-table-pagination-btn.report-ciyota-table-active {
    background-color: #4f46e5;
    color: white;
    border-color: #4f46e5;
  }

  .report-ciyota-table-pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .report-ciyota-table-empty {
    padding: 3rem 0;
    text-align: center;
    color: #64748b;
  }

  /* Responsive styles */
  @media (max-width: 768px) {
    .report-ciyota-table-header {
      flex-direction: column;
      align-items: flex-start;
    }

    .report-ciyota-table-search {
      width: 100%;
      max-width: none;
    }

    .report-ciyota-table th,
    .report-ciyota-table td {
      padding: 0.75rem 1rem;
    }

    .report-ciyota-table-name {
      max-width: 150px;
    }

    .report-ciyota-table-pagination {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  @media (max-width: 640px) {
    .report-ciyota-table {
      display: block;
    }

    .report-ciyota-table thead {
      display: none;
    }

    .report-ciyota-table tbody {
      display: block;
    }

    .report-ciyota-table tr {
      display: block;
      margin-bottom: 1rem;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      overflow: hidden;
    }

    .report-ciyota-table td {
      display: flex;
      padding: 0.75rem 1rem;
      text-align: right;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f1f5f9;
    }

    .report-ciyota-table td:before {
      content: attr(data-label);
      font-weight: 600;
      margin-right: 1rem;
      color: #475569;
      text-transform: uppercase;
      font-size: 0.9em;
      letter-spacing: 0.05em;
    }

    .report-ciyota-table td:last-child {
      border-bottom: none;
    }

    .report-ciyota-table-name {
      max-width: none;
    }
  }


  /*DONATION NEW STYLE
  ============================*/
  .ciyota-donation-section-pro {
    max-width: 1200px;
    margin: 20PX auto;
    padding: 40px;
}

.ciyota-donation-section-pro-title {
    text-align: center;
    margin-bottom: 2rem;
    color: #3498db;
}

.ciyota-donation-section-pro-title h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.ciyota-donation-section-pro-title p {
    
    color: #666;
    text-align: justify;
}

.ciyota-donation-section-pro-title p::first-letter {
    float: left;
    font-size: 3em;
    line-height: 1;
    padding-right: 0.1em;
    font-weight: bold;
    color: #10235E;
    font-family: serif;
  }

/* Accordion styles */
.ciyota-donation-section-pro-accordion {
    margin-bottom: 1.5rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: white;
}

.ciyota-donation-section-pro-accordion-header {
    padding: 1.2rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    background-color: #f0f8ff;
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.3s ease;
    position: relative;
}

.ciyota-donation-section-pro-accordion-header:hover {
    background-color: #e6f2ff;
}

.ciyota-donation-section-pro-flag {
    width: 60px;
    height: 40px;
    margin-right: 1rem;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.ciyota-donation-section-pro-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ciyota-donation-section-pro-accordion-title {
    flex: 1;
    color: #3498db;
    font-weight: bold;
}

.ciyota-donation-section-pro-accordion-icon {
    transition: transform 0.3s ease;
    margin-left: 1rem;
    font-size: 1.5rem;
    color: #ffc32c;
}

.ciyota-donation-section-pro-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background-color: white;
}

.ciyota-donation-section-pro-accordion.active .ciyota-donation-section-pro-accordion-content {
    max-height: 1000px; /* Adjust based on content */
}

.ciyota-donation-section-pro-accordion.active .ciyota-donation-section-pro-accordion-icon {
    transform: rotate(180deg);
}

.ciyota-donation-section-pro-accordion-body {
    padding: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}

.ciyota-donation-section-pro-accordion-body p {
    margin-bottom: 1rem;
    line-height: 1.7;
    color: #555;
}

.ciyota-donation-section-pro-button {
    display: inline-block;
    background-color: #79ACF7;
    color: #ffffff;
    padding: 0.7rem 1.5rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-top: 0.5rem;
    text-align: center;
}

.ciyota-donation-section-pro-button:hover {
    background-color: #FFC32C;
    color: #10235e;
    font-weight: bold;
}

/* Modal styles */
.ciyota-donation-section-pro-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
}

.ciyota-donation-section-pro-modal-content {
    background-color: white;
    margin: 10% auto;
    padding: 2rem;
    width: 80%;
    max-width: 700px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    animation: ciyotaModalFadeIn 0.4s;
}

@keyframes ciyotaModalFadeIn {
    from {opacity: 0; transform: translateY(-30px);}
    to {opacity: 1; transform: translateY(0);}
}

.ciyota-donation-section-pro-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    color: red;
    font-size: 2em;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.7s ease, transform 0.7s ease;
}

.ciyota-donation-section-pro-close:hover {
    color: #ffc32c;
    transform: rotate(180deg);
}

.ciyota-donation-section-pro-modal-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
}

.ciyota-donation-section-pro-modal-flag {
    width: 80px;
    height: 60px;
    margin-right: 1rem;
    border-radius: 4px;
    overflow: hidden;
}

.ciyota-donation-section-pro-modal-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ciyota-donation-section-pro-modal-title {
    flex: 1;
}

.ciyota-donation-section-pro-modal-title h3 {
    font-size: 1.5em;
    color: #10235e;
    margin-bottom: 0.3rem;
}

.ciyota-donation-section-pro-form-placeholder {
    background-color: #f9f9f9;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    border: 2px dashed #ddd;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .ciyota-donation-section-pro-title h2 {
        font-size: 2.5rem;
    }
    
    .ciyota-donation-section-pro-modal-content {
        width: 95%;
        margin: 5% auto;
        padding: 1.5rem;
    }
    
    .ciyota-donation-section-pro-modal-header {
        flex-direction: column;
        text-align: center;
    }
    
    .ciyota-donation-section-pro-modal-flag {
        margin-right: 0;
        margin-bottom: 1rem;
    }
    
    .ciyota-donation-section-pro-accordion-header {
        padding: 1rem;
    }
    
    .ciyota-donation-section-pro-flag {
        width: 50px;
        height: 35px;
    }
    
    .ciyota-donation-section-pro-accordion-title {
        font-size: 1.7rem;
    }
}

/*BANK DETAILS
===============*/
.ciyota-bank-details{
    color: #10235e;
    
}

/*START YOUR CHAPTER
=============================*/

.ciyota-start-your-chapter {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Removed dark overlay */

.ciyota-start-your-chapter-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.ciyota-start-your-chapter-heading {
    color: #fff;
    flex: 0.8;
    max-width: 500px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.ciyota-start-your-chapter-heading h1 {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.ciyota-start-your-chapter-heading p {
    font-size: 1.2rem;
    line-height: 1.6;
}

.ciyota-start-your-chapter-form-wrapper {
    flex: 1.2;
    max-width: 650px;
}

.ciyota-start-your-chapter-form-container {
    background: rgba(255, 255, 255, 0.8);
    padding: 40px;
    border-radius: 10px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    max-height: 75vh;
    overflow-y: auto;
}

.ciyota-start-your-chapter-form-container::-webkit-scrollbar {
    width: 8px;
}

.ciyota-start-your-chapter-form-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.ciyota-start-your-chapter-form-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.ciyota-start-your-chapter-form-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.ciyota-start-your-chapter-form-container h2 {
    font-size: 2rem;
    margin-bottom: 30px;
    text-align: center;
    color: #333;
    position: relative;
    padding-bottom: 15px;
}

.ciyota-start-your-chapter-form-container h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: #ff6b6b;
}

.ciyota-start-your-chapter-form-group {
    margin-bottom: 20px;
}

.ciyota-start-your-chapter-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.ciyota-start-your-chapter-form-group input,
.ciyota-start-your-chapter-form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.ciyota-start-your-chapter-form-group input:focus,
.ciyota-start-your-chapter-form-group select:focus {
    outline: none;
    border-color: #ff6b6b;
    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
}

.ciyota-start-your-chapter-radio-group {
    display: flex;
    gap: 20px;
    margin-top: 8px;
}

.ciyota-start-your-chapter-radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ciyota-start-your-chapter-radio-option input {
    width: auto;
}

.ciyota-start-your-chapter-checkbox-group {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 8px;
}

.ciyota-start-your-chapter-checkbox-group input {
    width: auto;
    margin-top: 5px;
}

.ciyota-start-your-chapter-required {
    color: #ff6b6b;
    margin-left: 3px;
}

.ciyota-start-your-chapter-submit-btn {
    background: #ff6b6b;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 15px 25px;
    font-size: 1.1rem;
    cursor: pointer;
    width: 100%;
    margin-top: 20px;
    transition: all 0.3s ease;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ciyota-start-your-chapter-submit-btn:hover {
    background: #ff5252;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
}

@media (max-width: 992px) {
    .ciyota-start-your-chapter-content {
        flex-direction: column;
        gap: 30px;
    }

    .ciyota-start-your-chapter-heading, 
    .ciyota-start-your-chapter-form-wrapper {
        max-width: 100%;
    }

    .ciyota-start-your-chapter-heading {
        text-align: center;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 20px;
        border-radius: 10px;
    }

    .ciyota-start-your-chapter-form-container {
        max-height: 65vh;
    }
}

@media (max-width: 768px) {
    .ciyota-start-your-chapter {
        padding: 40px 15px;
    }

    .ciyota-start-your-chapter-heading h1 {
        font-size: 2.2rem;
    }

    .ciyota-start-your-chapter-heading p {
        font-size: 1rem;
    }

    .ciyota-start-your-chapter-form-container {
        padding: 30px 20px;
    }
}





/*events page
==============*/
.ciyota-events-section-ready-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Header styles */
.ciyota-events-section-ready-header {
    margin-bottom: 3rem;
    text-align: center;
}

.ciyota-events-section-ready-header h1 {
    font-size: 2.5rem;
    color: #1e3a8a;
    margin-bottom: 0.5rem;
}

.ciyota-events-section-ready-header p {
    color: #64748b;
    font-size: 1.1rem;
}

/* Category filter */
.ciyota-events-section-ready-category-filter {
    margin-top: 2rem;
    background-color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
}

.ciyota-events-section-ready-filter-label {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.75rem;
    float: left;
    text-align: center;
    padding: 20px;
    margin-top: -15px;
   
}

.ciyota-events-section-ready-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ciyota-events-section-ready-filter-button {
    padding: 0.5rem 1rem;
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 0.25rem;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    
}

.ciyota-events-section-ready-filter-button:hover {
    background-color: #e2e8f0;
}

.ciyota-events-section-ready-filter-button.active {
    background-color: #3b82f6;
    color: white;
    border-color: #2563eb;
}

/* Category tags for events */
.ciyota-events-section-ready-event-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 1rem 0;
}

.ciyota-events-section-ready-category-tag {
    background-color: #eff6ff;
    color: #2563eb;
    font-size: 0.8em;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-weight: 500;
}

/* Layout */
.ciyota-events-section-ready-main-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.ciyota-events-section-ready-events-section h2, 
.ciyota-events-section-ready-sidebar h2 {
    
    margin-bottom: 1.5rem;
    color: #1e3a8a;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0.5rem;
}

/* Event cards */
.ciyota-events-section-ready-event-card {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 2rem;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e2e8f0;
}

.ciyota-events-section-ready-event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.ciyota-events-section-ready-event-card-content {
    display: flex;
    flex-direction: column;
}

.ciyota-events-section-ready-event-card-image {
    height: 200px;
    width: 100%;
    object-fit: cover;
}

.ciyota-events-section-ready-event-card-body {
    padding: 1.5rem;
}

.ciyota-events-section-ready-event-card-title {
    font-size: 1em;
    font-weight: bold;
    color: #1e293b;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.ciyota-events-section-ready-event-meta {
    display: flex;
    align-items: center;
    color: #64748b;
    font-size: 0.8em;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.ciyota-events-section-ready-event-meta span {
    display: flex;
    align-items: center;
    margin-right: 1rem;
    margin-bottom: 0.5rem;
}

.ciyota-events-section-ready-event-meta i {
    margin-right: 0.25rem;
}

.ciyota-events-section-ready-event-description {
    color: #475569;
    margin-bottom: 1rem;
    
}

.ciyota-events-section-ready-read-more {
    color: #2563eb;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: #eff6ff;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease;
}

.ciyota-events-section-ready-read-more:hover {
    background-color: #dbeafe;
}

.ciyota-events-section-ready-read-more i {
    margin-left: 0.25rem;
}

/* Sidebar */
.ciyota-events-section-ready-sidebar {
    background-color: white;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    height: fit-content;
    border: 1px solid #e2e8f0;
    
} 

.ciyota-events-section-ready-recent-event {
    border-left: 4px solid #3b82f6;
    padding: 0.75rem 0 0.75rem 1rem;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}


.ciyota-events-section-ready-recent-event:hover {
    background-color: #f1f5f9;
}

.ciyota-events-section-ready-recent-event-title {
    font-weight: 500;
    color: #10235e;
    margin-bottom: 0.25rem;
    font-size: 0.8em;
    line-height: 1.6;
}

.ciyota-events-section-ready-recent-event-date {
    display: flex;
    align-items: center;
    color: red;
    font-size: 0.8em;

}

.ciyota-events-section-ready-recent-event-date i {
    margin-right: 0.25rem;
}

/* No events message */
.ciyota-events-section-ready-no-events {
    background-color: #f8fafc;
    padding: 2rem;
    border-radius: 0.5rem;
    text-align: center;
    color: #64748b;
    border: 1px dashed #cbd5e1;
}

/* Footer */
.ciyota-events-section-ready-footer {
    margin-top: 3rem;
    text-align: center;
    padding: 1.5rem;
    background-color: #f8fafc;
    border-radius: 0.5rem;
    color: #64748b;
}

.ciyota-events-section-ready-footer a {
    color: #2563eb;
    text-decoration: none;
}

.ciyota-events-section-ready-footer a:hover {
    text-decoration: underline;
}

/* Responsive design */
@media (min-width: 768px) {
    .ciyota-events-section-ready-main-content {
        flex-direction: row;
    }
    
    .ciyota-events-section-ready-events-section {
        flex: 2;
        margin-right: 2rem;
    }
    
    .ciyota-events-section-ready-sidebar {
        flex: 1;
    }
    
    .ciyota-events-section-ready-event-card-content {
        flex-direction: row;
    }
    
    .ciyota-events-section-ready-event-card-image-container {
        flex: 1;
        max-width: 300px;
    }
    
    .ciyota-events-section-ready-event-card-body {
        flex: 2;
    }
}



/*event 2nd page
==================*/
.ciyota-events-section-ready-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Navigation */
.ciyota-events-section-ready-back-button {
    display: inline-flex;
    align-items: center;
    color: #2563eb;
    text-decoration: none;
    margin-bottom: 1.5rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    background-color: #eff6ff;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease;
}

.ciyota-events-section-ready-back-button:hover {
    background-color: #dbeafe;
}

.ciyota-events-section-ready-back-button i {
    margin-right: 0.5rem;
}

/* Main content layout for detail page */
.ciyota-events-section-ready-main-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .ciyota-events-section-ready-main-content {
        flex-direction: row;
    }
    
    .ciyota-events-section-ready-event-detail {
        flex: 2;
        margin-right: 2rem;
    }
    
    .ciyota-events-section-ready-sidebar {
        flex: 1;
        max-width: 350px;
    }
}

/* Event detail */
.ciyota-events-section-ready-event-detail {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.ciyota-events-section-ready-event-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.ciyota-events-section-ready-event-content {
    padding: 2rem;
}

.ciyota-events-section-ready-event-title {
    font-size: 2.25rem;
    color: #1e3a8a;
    margin-bottom: 1rem;
    line-height: 1.6;
}





.ciyota-events-section-ready-event-section {
    margin-bottom: 2.5rem;
}

.ciyota-events-section-ready-event-section-title {
    font-size: 1.2em;
    color: #1e3a8a;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
}

.ciyota-events-section-ready-event-description {
    color: #475569;
    line-height: 1.7;
}

.ciyota-events-section-ready-impact-box {
    background-color: #eff6ff;
    padding: 1.5rem;
    border-radius: 0.5rem;
    color: #1e3a8a;
    font-weight: 500;
    border-left: 5px solid #3b82f6;
}

/* Category tags */
.ciyota-events-section-ready-event-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}



/* Sidebar for related events */
.ciyota-events-section-ready-sidebar {
    background-color: #ffc32c;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    height: fit-content;
    border: 1px solid #e2e8f0;


    position: sticky;
    top: 120px; /* Adjust as needed for spacing from the top */
    align-self: flex-start; /* Ensures proper alignment inside a flex container */
    z-index: 10; /* Ensure it stays above other content if needed */
}

.ciyota-events-section-ready-related-title {
    font-size: 1.5rem;
    color: #1e3a8a;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
}

.ciyota-events-section-ready-sidebar-events {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ciyota-events-section-ready-sidebar-heading {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 1.5em;
    color: #ffffff;
    font-weight: bold;
    
}

.ciyota-events-section-ready-sidebar-heading i {
    margin-right: 0.5rem;
    color: #3b82f6;
}

.ciyota-events-section-ready-related-event {
    border-left: 4px solid #3b82f6;
    padding: 0.75rem 0 0.75rem 1rem;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-decoration: none;
    color: inherit;
    display: block;
    background-color: #f8fafc;
    border-radius: 0 0.25rem 0.25rem 0;
}

.ciyota-events-section-ready-related-event:hover {
    background-color: #eff6ff;
}

.ciyota-events-section-ready-related-event-title {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
    font-size: 0.8em;
    line-height: 1.6;
}

.ciyota-events-section-ready-related-event-date {
    color: red;
    font-size: 0.8em;
    display: flex;
    align-items: center;
}

.ciyota-events-section-ready-related-event-date i {
    margin-right: 0.25rem;
}

/* Share section */
.ciyota-events-section-ready-share-section {
    margin-top: 3rem;
    background-color: #f8fafc;
    padding: 1.5rem;
    border-radius: 0.5rem;
    text-align: center;
    border: 1px solid #e2e8f0;
}

.ciyota-events-section-ready-share-title {
    font-size: 1.25rem;
    color: #1e3a8a;
    margin-bottom: 1rem;
}

.ciyota-events-section-ready-share-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.ciyota-events-section-ready-share-button {
    background-color: #3b82f6;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ciyota-events-section-ready-share-button:hover {
    background-color: #2563eb;
}

.ciyota-events-section-ready-share-button i {
    margin-right: 0.5rem;
}

/* Footer */
.ciyota-events-section-ready-footer {
    margin-top: 3rem;
    text-align: center;
    padding: 1.5rem;
    background-color: #f8fafc;
    border-radius: 0.5rem;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.ciyota-events-section-ready-footer a {
    color: #2563eb;
    text-decoration: none;
}

.ciyota-events-section-ready-footer a:hover {
    text-decoration: underline;
}




/*CIYOTA START CHAPTER FORM
-===============================*/
.form-ciyota-start-chapter {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  
  .form-ciyota-start-chapter h1 {
    color: #2c3e50;
    text-align: center;
    margin-bottom: 30px;
  }
  
  .form-ciyota-start-chapter .form-section {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  
  .form-ciyota-start-chapter .section-header {
    background-color: #3498db;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    margin: -20px -20px 20px -20px;
    font-size: 18px;
    font-weight: 600;
  }
  
  .form-ciyota-start-chapter .form-group {
    margin-bottom: 15px;
  }
  
  .form-ciyota-start-chapter label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #333;
  }
  
  .form-ciyota-start-chapter input[type="text"],
  .form-ciyota-start-chapter input[type="email"],
  .form-ciyota-start-chapter input[type="date"],
  .form-ciyota-start-chapter input[type="tel"],
  .form-ciyota-start-chapter select,
  .form-ciyota-start-chapter textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
  }
  
  .form-ciyota-start-chapter textarea {
    resize: vertical;
    min-height: 100px;
  }
  
  .form-ciyota-start-chapter .checkbox-group,
  .form-ciyota-start-chapter .radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
  }
  
  .form-ciyota-start-chapter .checkbox-item,
  .form-ciyota-start-chapter .radio-item {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-right: 15px;
  }
  
  .form-ciyota-start-chapter input[type="checkbox"],
  .form-ciyota-start-chapter input[type="radio"] {
    margin-right: 5px;
  }
  
  .form-ciyota-start-chapter .required:after {
    content: " *";
    color: #e74c3c;
  }
  
  .form-ciyota-start-chapter .submit-btn {
    background-color: #2ecc71;
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: block;
    margin: 30px auto 0;
  }
  
  .form-ciyota-start-chapter .submit-btn:hover {
    background-color: #27ae60;
  }
  
  .form-ciyota-start-chapter .form-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #7f8c8d;
  }
  
  /* Responsive styles */
  @media screen and (max-width: 768px) {
    .form-ciyota-start-chapter {
      padding: 15px;
    }
    
    .form-ciyota-start-chapter .section-header {
      font-size: 16px;
      padding: 8px 12px;
    }
    
    .form-ciyota-start-chapter .checkbox-group,
    .form-ciyota-start-chapter .radio-group {
      flex-direction: column;
      gap: 8px;
    }
    
    .form-ciyota-start-chapter .checkbox-item,
    .form-ciyota-start-chapter .radio-item {
      margin-right: 0;
    }
  }
  
  /* For two-column layout on larger screens */
  @media screen and (min-width: 768px) {
    .form-ciyota-start-chapter .form-row {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }
    
    .form-ciyota-start-chapter .form-row .form-group {
      flex: 1 0 45%;
    }
  }




  /*IMPACT NUMBERS NEW STYLE
  ============================*/

  .ciyota-general-impact-statistics-container-impact-sect {
    max-width: 100%;
    margin: 0px;
    padding: 0px;
   
}

.ciyota-general-impact-statistics-total-impact-sect {
    /*background: linear-gradient(to bottom, #FFE196 0.1%, #FFFFFF 100%);*/
    background-color: #ffffff;
    border-radius: 0rem;
    padding: 40px;
    text-align: center;
    margin-top: 3rem;
    position: relative;
    overflow: hidden;
}

  .ciyota-general-impact-statistics-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: -50px;

   
}

.ciyota-general-impact-statistics-header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    padding-bottom: 1.5rem;
}

.ciyota-general-impact-statistics-header:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #10b981);
    border-radius: 2px;
}

.ciyota-general-impact-statistics-header h1 {
    font-size: 2.5em;
    font-weight: 800;
    margin-bottom: 0.5rem;
    letter-spacing: -0.025em;
}



.ciyota-general-impact-statistics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.ciyota-general-impact-statistics-card {
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border-top: 5px solid;
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ciyota-general-impact-statistics-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.ciyota-general-impact-statistics-card:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    z-index: 0;
}

.ciyota-general-impact-statistics-icon-container {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem auto;
    position: relative;
    z-index: 1;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.ciyota-general-impact-statistics-number {
    font-size: 1.8em;
    font-weight: 800;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
    line-height: 1;
    letter-spacing: -0.025em;
    height: 3rem; /* Fixed height to prevent layout shift during animation */
    display: flex;
    align-items: center;
    justify-content: center;
}

.ciyota-general-impact-statistics-title {
    font-size: 0.9em;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: black;
    position: relative;
    z-index: 1;
    line-height: 1.4;
}

.ciyota-general-impact-statistics-subtitle {
    font-size: 0.875em;
    color: #6b7280;
    position: relative;
    z-index: 1;
    font-weight: 500;
}

.ciyota-general-impact-statistics-total {
    background-color: #E7E8EC;
    border-radius: 1rem;
    padding: 3rem 2rem;
    text-align: center;
    margin-top: 3rem;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.1);
    position: relative;
    overflow: hidden;
}

.ciyota-general-impact-statistics-total:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233b82f6' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.ciyota-general-impact-statistics-total h2 {
    font-size: 2em;
    font-weight: 800;
    color: #10235e;
    margin-bottom: 1rem;
    position: relative;
}

.ciyota-general-impact-statistics-number-large {
    font-size: 3em;
    font-weight: 800;
    color: #10235E;
    margin-bottom: 1rem;
    position: relative;
    line-height: 1;
}

.ciyota-general-impact-statistics-total-impact-sect p {
    color: #10235e;
    position: relative;
    font-size: 1.2em;
    max-width: 800px;
    margin: 0 auto;
    font-weight: 500;
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.ciyota-general-impact-statistics-card {
    opacity: 0;
    animation: fadeIn 0.6s ease forwards;
}

.ciyota-general-impact-statistics-card:nth-child(1) { animation-delay: 0.1s; }
.ciyota-general-impact-statistics-card:nth-child(2) { animation-delay: 0.2s; }
.ciyota-general-impact-statistics-card:nth-child(3) { animation-delay: 0.3s; }
.ciyota-general-impact-statistics-card:nth-child(4) { animation-delay: 0.4s; }
.ciyota-general-impact-statistics-card:nth-child(5) { animation-delay: 0.5s; }
.ciyota-general-impact-statistics-card:nth-child(6) { animation-delay: 0.6s; }
.ciyota-general-impact-statistics-card:nth-child(7) { animation-delay: 0.7s; }
.ciyota-general-impact-statistics-card:nth-child(8) { animation-delay: 0.8s; }

.ciyota-general-impact-statistics-total {
    opacity: 0;
    animation: fadeIn 0.6s ease forwards;
    animation-delay: 1s;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ciyota-general-impact-statistics-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
    
    .ciyota-general-impact-statistics-header h1 {
        font-size: 2rem;
    }
    
    .ciyota-general-impact-statistics-header p {
        font-size: 1rem;
    }
    
    .ciyota-general-impact-statistics-number-large {
        font-size: 3rem;
    }
}




/*Ttile and paragraph section
=============================*/
.ciyota-main-para-and-title-section {
    width: 100%;
    
    padding: 2rem 1rem;
   
  }
  
  .ciyota-main-para-and-title {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
    
    line-height: 1.6;
    box-sizing: border-box;
  }
  
  .ciyota-main-para-and-title-title {
    
    font-size: 2em;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 700;
  }
  
  .ciyota-main-para-and-title-content {
    
    color: #34495e;
  }
  
  .ciyota-main-para-and-title-highlight {
    font-weight: 600;
  }
  
  /* Responsive styles for mobile devices */
  @media screen and (max-width: 768px) {
    .ciyota-main-para-and-title-section {
      padding: 2rem 1rem;
    }
    
    .ciyota-main-para-and-title {
      padding: 0 1.5rem;
    }
    
    .ciyota-main-para-and-title-title {
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    
    .ciyota-main-para-and-title-content {
      font-size: 0.95em;
    }
  }
  
  @media screen and (max-width: 480px) {
    .ciyota-main-para-and-title-section {
      padding: 1.5rem 0.5rem;
    }
    
    .ciyota-main-para-and-title {
      padding: 0 1rem;
    }
    
    .ciyota-main-para-and-title-title {
      font-size: 1.8rem;
      margin-bottom: 0.85rem;
    }
    
    .ciyota-main-para-and-title-content {
      font-size: 0.8em;
    }
  }




  /*NEW TOP BAR SECTION
  =============================*/

  .top-bar-ciyota-version2 {
    background-color: #10235e;
    width: 100%;
    display: flex;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    color: #ffffff;
  }
  
  .top-bar-ciyota-version2-container {
    max-width: 1200px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 0 15px;
  }
  
  .top-bar-ciyota-version2-left {
    display: flex;
    align-items: center;
  }
  
  .top-bar-ciyota-version2-social {
    display: flex;
    gap: 20px;
  }
  
  .top-bar-ciyota-version2-social a {
    color: #ffffff;
    font-size: 16px;
    transition: color 0.3s;
    
  }
  
  .top-bar-ciyota-version2-social a:hover {
    color: #ffc32c;
  }
  
  .top-bar-ciyota-version2-contact {
    display: flex;
    margin-left: 20px;
    font-size: 15px;
    color: #ffffff;
    font-weight: bold;
  }
  
  .top-bar-ciyota-version2-contact span {
    margin-right: 15px;
    display: flex;
    align-items: center;
  }
  
  .top-bar-ciyota-version2-contact i {
    margin-right: 5px;
  }
  
  .top-bar-ciyota-version2-nav {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .top-bar-ciyota-version2-nav a {
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    transition: color 0.3s;
    font-size: 15px;
    white-space: nowrap;
  }
  
  .top-bar-ciyota-version2-nav a:hover {
    color: #ffc32c;
  }
  
  .top-bar-ciyota-version2-donate {
    background: linear-gradient(135deg, #ffc32c 100%, #10235e 100%);
    color: #fff !important;
    padding: 9px 18px;
    border-radius: 6px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(0);
    z-index: 1;
  }
  
  .top-bar-ciyota-version2-donate span {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
    font-weight: 700;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 2;
  }
  
  .top-bar-ciyota-version2-donate .top-bar-ciyota-version2-default {
    transform: translateY(0);
    opacity: 1;
    color: #10235e;
    font-weight: bold;
  }
  
  .top-bar-ciyota-version2-donate .top-bar-ciyota-version2-hover {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    transform: translateY(100%);
    opacity: 0;
  }
  
  .top-bar-ciyota-version2-donate:hover {
    background: linear-gradient(135deg, green 0%, green 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(247, 147, 30, 0.3);
    
  }
  
  .top-bar-ciyota-version2-donate:hover .top-bar-ciyota-version2-default {
    transform: translateY(-120%);
    opacity: 0;
  }
  
  .top-bar-ciyota-version2-donate:hover .top-bar-ciyota-version2-hover {
    transform: translateY(0);
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    animation: textPulse 1s infinite alternate;
  }
  
  @keyframes textPulse {
    0% {
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
    100% {
      text-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.4);
    }
  }
  
  .top-bar-ciyota-version2-donate::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(30deg);
    transition: transform 0.6s ease;
    z-index: 1;
  }
  
  .top-bar-ciyota-version2-donate:hover::after {
    transform: rotate(30deg) translate(10%, 10%);
  }
  
  /* White shapes particles animation */
  .top-bar-ciyota-version2-donate .particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
  }
  
  .top-bar-ciyota-version2-donate .particle {
    position: absolute;
    display: block;
    pointer-events: none;
    opacity: 0;
    background: white;
    border-radius: 50%;
  }
  
  .top-bar-ciyota-version2-donate:hover .particle:nth-child(1) {
    width: 6px;
    height: 6px;
    top: 20%;
    left: 20%;
    animation: particleAnimation1 1.2s ease-in-out infinite;
    opacity: 0.8;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  }
  
  .top-bar-ciyota-version2-donate:hover .particle:nth-child(2) {
    width: 8px;
    height: 8px;
    top: 60%;
    left: 10%;
    animation: particleAnimation2 1.5s ease-in-out infinite;
    opacity: 0.7;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  }
  
  .top-bar-ciyota-version2-donate:hover .particle:nth-child(3) {
    width: 10px;
    height: 10px;
    top: 30%;
    left: 60%;
    animation: particleAnimation3 1.2s ease-in-out infinite;
    opacity: 0.6;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  }
  
  .top-bar-ciyota-version2-donate:hover .particle:nth-child(4) {
    width: 5px;
    height: 5px;
    top: 70%;
    left: 70%;
    animation: particleAnimation4 1.3s ease-in-out infinite;
    opacity: 0.8;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  }
  
  .top-bar-ciyota-version2-donate:hover .particle:nth-child(5) {
    width: 4px;
    height: 4px;
    top: 40%;
    left: 30%;
    animation: particleAnimation5 1.5s ease-in-out infinite;
    opacity: 0.7;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  }
  
  .top-bar-ciyota-version2-donate:hover .particle:nth-child(6) {
    width: 8px;
    height: 8px;
    top: 30%;
    left: 80%;
    animation: particleAnimation6 1s ease-in-out infinite;
    opacity: 0.6;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  }
  
  @keyframes particleAnimation1 {
    0% { transform: translate(0, 0) scale(1); opacity: 0; }
    20% { opacity: 0.8; }
    100% { transform: translate(-40px, -40px) scale(0); opacity: 0; }
  }
  
  @keyframes particleAnimation2 {
    0% { transform: translate(0, 0) scale(1); opacity: 0; }
    20% { opacity: 0.7; }
    100% { transform: translate(-30px, 30px) scale(0); opacity: 0; }
  }
  
  @keyframes particleAnimation3 {
    0% { transform: translate(0, 0) scale(1); opacity: 0; }
    20% { opacity: 0.6; }
    100% { transform: translate(40px, -30px) scale(0); opacity: 0; }
  }
  
  @keyframes particleAnimation4 {
    0% { transform: translate(0, 0) scale(1); opacity: 0; }
    20% { opacity: 0.8; }
    100% { transform: translate(30px, 40px) scale(0); opacity: 0; }
  }
  
  @keyframes particleAnimation5 {
    0% { transform: translate(0, 0) scale(1); opacity: 0; }
    20% { opacity: 0.8; }
    100% { transform: translate(-20px, -20px) scale(0); opacity: 0; }
  }
  
  @keyframes particleAnimation6 {
    0% { transform: translate(0, 0) scale(1); opacity: 0; }
    20% { opacity: 0.7; }
    100% { transform: translate(50px, 10px) scale(0); opacity: 0; }
  }
  
  /* Sparkle effect */
  .top-bar-ciyota-version2-donate:hover .sparkle {
    position: absolute;
    z-index: 1;
    opacity: 0;
  }
  
  .top-bar-ciyota-version2-donate:hover .sparkle:nth-child(1) {
    width: 15px;
    height: 15px;
    top: 20%;
    left: 30%;
    background: radial-gradient(circle, white 10%, transparent 70%);
    animation: sparkleAnimation1 0.8s linear infinite;
  }
  
  .top-bar-ciyota-version2-donate:hover .sparkle:nth-child(2) {
    width: 10px;
    height: 10px;
    top: 60%;
    left: 60%;
    background: radial-gradient(circle, white 10%, transparent 70%);
    animation: sparkleAnimation2 0.7s linear infinite;
  }
  
  @keyframes sparkleAnimation1 {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(0); opacity: 0; }
  }
  
  @keyframes sparkleAnimation2 {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(0); opacity: 0; }
  }
  
  /* Responsive design */
  @media (max-width: 1024px) {
    .top-bar-ciyota-version2-contact {
      display: none;
    }
    
    .top-bar-ciyota-version2-nav {
      gap: 15px;
    }
    
    .top-bar-ciyota-version2-nav a {
      font-size: 14px;
    }
  }
  
  @media (max-width: 768px) {
    .top-bar-ciyota-version2-container {
      height: auto;
      padding: 10px 15px;
    }
    
    .top-bar-ciyota-version2-social {
      display: none;
    }
    
    .top-bar-ciyota-version2-container {
      justify-content: center;
    }
    
    .top-bar-ciyota-version2-nav {
      width: 100%;
      justify-content: space-between;
      gap: 10px;
    }
    
    .top-bar-ciyota-version2-nav a {
      font-size: 13px;
    }
    
    .top-bar-ciyota-version2-donate {
      padding: 6px 12px;
    }
  }




  /*join us ciyota*/
  .join-ciyota-today {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    overflow: hidden;
  }

  .join-ciyota-today-header {
    background-color: #10235e;
    padding: 3rem 2rem;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
  }

  .join-ciyota-today-header::after {
    content: "";
    position: absolute;
    top: -20px;
    right: -20px;
    width: 150px;
    height: 150px;
    background-color: #ffc32c;
    border-radius: 50%;
    opacity: 0.2;
    z-index: 1;
  }

  .join-ciyota-today-header::before {
    content: "";
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 200px;
    height: 200px;
    background-color: #ffc32c;
    border-radius: 50%;
    opacity: 0.1;
    z-index: 1;
  }

  .join-ciyota-today-header h1 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: white;
    position: relative;
    z-index: 2;
    font-size: 2.2rem;
  }

  .join-ciyota-today-header-highlight {
    background-color: #ffc32c;
    color: #10235e;
    display: inline-block;
    padding: 0.3rem 1rem;
    border-radius: 50px;
    font-weight: bold;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
  }

  .join-ciyota-today-header p {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .join-ciyota-today-header-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
  }

  .join-ciyota-today-pdf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: transparent;
    color: white;
    font-weight: bold;
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid white;
    cursor: pointer;
  }

  .join-ciyota-today-pdf-button:hover {
    background-color: white;
    color: #10235e;
  }

  .join-ciyota-today-pdf-button i {
    font-size: 1.1rem;
  }

  .join-ciyota-today-overview {
    background-color: #f9f9f9;
    padding: 2rem;
    border-bottom: 1px solid #eee;
    border-radius: 0 0 10px 10px;
    margin-bottom: 20px;
  }

  .join-ciyota-today-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
  }

  .join-ciyota-today-overview-item {
    padding: 1.5rem;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .join-ciyota-today-overview-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }

  .join-ciyota-today-overview-item h3 {
    color: #10235e;
    margin-top: 0;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #ffc32c;
    display: inline-block;
  }

  .join-ciyota-today-content {
    padding: 2rem;
    line-height: 1.6;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
  }

  .join-ciyota-today-section {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
  }

  .join-ciyota-today-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }

  .join-ciyota-today-section h2 {
    color: #10235e;
    margin-top: 0;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #ffc32c;
    display: inline-block;
  }

  .join-ciyota-today-list {
    padding-left: 1.2rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
  }

  .join-ciyota-today-list li {
    margin-bottom: 0.5rem;
  }

  .join-ciyota-today-list li:last-child {
    margin-bottom: 0;
  }

  .join-ciyota-today-important {
    background-color: rgba(255, 195, 44, 0.1);
    border-left: 4px solid #ffc32c;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 8px 8px 0;
  }

  .join-ciyota-today-important h2 {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.5rem;
  }

  .join-ciyota-today-apply {
    text-align: center;
    margin-top: 2rem;
    padding: 2rem;
    background-color: #10235e;
    color: white;
    border-radius: 8px;
  }

  .join-ciyota-today-deadline {
    display: inline-block;
    background-color: #ffc32c;
    color: #10235e;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: bold;
    margin-bottom: 1rem;
  }

  .join-ciyota-today-button {
    display: inline-block;
    background-color: #ffc32c;
    color: #10235e;
    font-weight: bold;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid #ffc32c;
    margin-top: 1rem;
    font-size: 1.8rem;
    cursor: pointer;
  }

  .join-ciyota-today-button:hover {
    background-color: transparent;
    color: #ffc32c;
  }

  @media (max-width: 768px) {
    .join-ciyota-today {
      padding: 15px;
    }
    
    .join-ciyota-today-header {
      padding: 2rem 1.5rem;
    }

    .join-ciyota-today-header h1 {
      font-size: 1.8rem;
    }

    .join-ciyota-today-overview {
      padding: 1.5rem;
    }

    .join-ciyota-today-overview-grid {
      gap: 1.5rem;
    }

    .join-ciyota-today-content {
      padding: 1.5rem;
    }

    .join-ciyota-today-apply {
      padding: 1.5rem;
    }
    
    .join-ciyota-today-header-actions {
      flex-direction: column;
      align-items: center;
      gap: 0.8rem;
    }
    
    .join-ciyota-today-pdf-button,
    .join-ciyota-today-button {
      width: 100%;
      max-width: 250px;
    }
  }



  /*==============================
  SPONSORSHIP STATISTICS
  ================================*/

  .ciyota-sponsorship-statistics {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.ciyota-sponsorship-statistics-title-container {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}

.ciyota-sponsorship-statistics-title {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 20px;
    line-height: 1.1;
    position: relative;
    animation: ciyota-fade-in 1s ease-out;
}

.ciyota-sponsorship-statistics-title-main {
    display: inline-block;
    color: #10235e;
    text-shadow: 2px 2px 4px rgba(16, 35, 94, 0.2);
    position: relative;
    animation: ciyota-slide-in-left 1s ease-out;
}

.ciyota-sponsorship-statistics-title-accent {
    display: inline-block;
    color: #ffc32c;
    text-shadow: 2px 2px 4px rgba(255, 195, 44, 0.3);
    margin-left: 15px;
    position: relative;
    animation: ciyota-slide-in-right 1s ease-out 0.2s both;
}

.ciyota-sponsorship-statistics-title-accent::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: rgba(255, 195, 44, 0.1);
    border-radius: 20px;
    z-index: -1;
    animation: ciyota-glow-pulse 3s ease-in-out infinite;
}

.ciyota-sponsorship-statistics-title-underline {
    width: 150px;
    height: 4px;
    background: #ffc32c;
    margin: 0 auto;
    border-radius: 2px;
    position: relative;
    animation: ciyota-underline-expand 1.5s ease-out 0.5s both;
}

.ciyota-sponsorship-statistics-title-underline::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: #ffc32c;
    border-radius: 4px;
    z-index: -1;
    opacity: 0.3;
    animation: ciyota-underline-glow 2s ease-in-out infinite alternate;
}

@keyframes ciyota-fade-in {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes ciyota-slide-in-left {
    from { opacity: 0; transform: translateX(-50px) rotate(-5deg); }
    to { opacity: 1; transform: translateX(0) rotate(0deg); }
}

@keyframes ciyota-slide-in-right {
    from { opacity: 0; transform: translateX(50px) rotate(5deg); }
    to { opacity: 1; transform: translateX(0) rotate(0deg); }
}

@keyframes ciyota-glow-pulse {
    0%, 100% { transform: scale(1); opacity: 0.1; }
    50% { transform: scale(1.1); opacity: 0.2; }
}

@keyframes ciyota-underline-expand {
    from { width: 0; }
    to { width: 150px; }
}

@keyframes ciyota-underline-glow {
    from { box-shadow: 0 0 10px rgba(255, 195, 44, 0.3); }
    to { box-shadow: 0 0 20px rgba(255, 195, 44, 0.6); }
}

.ciyota-sponsorship-statistics-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    font-size: 1.2em;
}

.ciyota-sponsorship-statistics-card {
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(16, 35, 94, 0.08);
    border: 2px solid transparent;
    border-top: 4px solid #10235e;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.ciyota-sponsorship-statistics-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(16, 35, 94, 0.12);
    border-color: #ffc32c;
    border-top-color: #ffc32c;
}

.ciyota-sponsorship-statistics-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 3px;
    background: #ffc32c;
    transition: left 0.5s ease;
}

.ciyota-sponsorship-statistics-card:hover::before {
    left: 0;
}

.ciyota-sponsorship-statistics-header {
    font-size: 1.2em;
    font-weight: bold;
    color: #10235e;
    margin-bottom: 15px;
    text-align: center;
}

.ciyota-sponsorship-statistics-number {
    font-size: 2.2em;
    font-weight: bold;
    text-align: center;
    margin: 20px 0 10px;
    color: #10235e;
    animation: ciyota-pulse 2s ease-in-out infinite;
}

@keyframes ciyota-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.ciyota-sponsorship-statistics-subtitle {
    text-align: center;
    color: #000000;
    margin-bottom: 25px;
    font-size: 0.9em;
}

.ciyota-sponsorship-statistics-breakdown {
    margin: 20px 0;
}

.ciyota-sponsorship-statistics-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0 8px;
    padding: 12px 15px;
    background: rgba(16, 35, 94, 0.03);
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
  
}

.ciyota-sponsorship-statistics-item:hover {
    background: rgba(16, 35, 94, 0.06);
    border-left-color: #ffc32c;
    transform: translateX(5px);
}

.ciyota-sponsorship-statistics-label {
    font-weight: 600;
    color: #10235e;
    
}

.ciyota-sponsorship-statistics-value {
    font-weight: bold;
    font-size: 1em;
    color: #10235e;
}

.ciyota-sponsorship-statistics-bar {
    width: 100%;
    height: 8px;
    background: rgba(16, 35, 94, 0.1);
    border-radius: 4px;
    margin-bottom: 15px;
    overflow: hidden;
}

.ciyota-sponsorship-statistics-bar-fill {
    height: 100%;
    background: #ffc32c;
    border-radius: 4px;
    width: 0%;
    transition: width 1.5s ease-out;
    position: relative;
}

.ciyota-sponsorship-statistics-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    animation: ciyota-shimmer 2s infinite;
}

@keyframes ciyota-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.ciyota-sponsorship-statistics-overall {
    grid-column: 1 / -1;
    background: #10235e;
    color: white;
    text-align: center;
    padding: 40px;
    border-radius: 20px;
    margin-top: 20px;
    position: relative;
    overflow: hidden;
}

.ciyota-sponsorship-statistics-overall::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23ffc32c" fill-opacity="0.05"><circle cx="30" cy="30" r="4"/></g></svg>');
    animation: ciyota-pattern-move 20s linear infinite;
}

@keyframes ciyota-pattern-move {
    0% { transform: translate(0, 0); }
    100% { transform: translate(60px, 60px); }
}

.ciyota-sponsorship-statistics-overall-title {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
    color: #ffc32c;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.ciyota-sponsorship-statistics-overall-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
    z-index: 2;
    margin-bottom: 30px;
}

.ciyota-sponsorship-statistics-overall-item {
    background: #10235e;
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 25px 15px;
    border: 1px solid rgba(255, 195, 44, 0.2);
    transition: all 0.3s ease;
}

.ciyota-sponsorship-statistics-overall-item:hover {
    background: rgba(255, 195, 44, 0.15);
    border-color: rgba(255, 195, 44, 0.4);
    transform: translateY(-5px);
}

.ciyota-sponsorship-statistics-circle {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
    position: relative;
    color: #79acf7;
}

.ciyota-sponsorship-statistics-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ciyota-sponsorship-statistics-circle-bg {
    fill: none;
    stroke: rgba(255, 195, 44, 0.2);
    stroke-width: 8;
}

.ciyota-sponsorship-statistics-circle-progress {
    fill: none;
    stroke: #ffc32c;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dasharray 2s ease-in-out;
    filter: drop-shadow(0 0 6px rgba(255, 195, 44, 0.6));
    
}

.ciyota-sponsorship-statistics-circle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1em;
    font-weight: bold;
    color: #ffc32c;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.ciyota-sponsorship-statistics-overall-item h3 {
    margin: 10px 0 0;
    font-size: 1em;
    color: white;
}

.ciyota-sponsorship-statistics-total {
    background: #FFFFFF;
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 25px;
    border: 1px solid rgba(255, 195, 44, 0.2);
    position: relative;
    z-index: 2;
}

.ciyota-sponsorship-statistics-total h3 {
    margin-bottom: 15px;
    font-size: 1.2em;
    color: #10235e;
}

.ciyota-sponsorship-statistics-total-number {
    font-size: 2em;
    font-weight: bold;
    color: #ffc32c;
    
}

@media (max-width: 768px) {
    .ciyota-sponsorship-statistics {
        padding: 20px 15px;
    }

    .ciyota-sponsorship-statistics-title {
        font-size: 2.5rem;
    }

    .ciyota-sponsorship-statistics-title-accent {
        display: block;
        margin-left: 0;
        margin-top: 10px;
    }

    .ciyota-sponsorship-statistics-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ciyota-sponsorship-statistics-card {
        padding: 25px 20px;
    }

    .ciyota-sponsorship-statistics-header {
        font-size: 1.4rem;
    }

    .ciyota-sponsorship-statistics-number {
        font-size: 2.5rem;
    }

    .ciyota-sponsorship-statistics-overall {
        padding: 30px 20px;
    }

    .ciyota-sponsorship-statistics-overall-title {
        font-size: 1.6rem;
    }

    .ciyota-sponsorship-statistics-overall-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .ciyota-sponsorship-statistics-circle {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 480px) {
    .ciyota-sponsorship-statistics-title {
        font-size: 2rem;
    }

    .ciyota-sponsorship-statistics-overall-grid {
        grid-template-columns: 1fr;
    }
}


/* COOKIES BANNER STYLES - START */
.ciyota-cookies-agreement-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: white;
    box-shadow: 0 -4px 25px rgba(0,0,0,0.15);
    z-index: 10000;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 3px solid #ffffff;
}

.ciyota-cookies-agreement-banner.ciyota-cookies-agreement-banner--show {
    transform: translateY(0);
}

.ciyota-cookies-agreement-banner.ciyota-cookies-agreement-banner--hide {
    display: none;
}

.ciyota-cookies-agreement-banner__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.ciyota-cookies-agreement-banner__content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 15px;
}

.ciyota-cookies-agreement-banner__icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(45deg, #ff6b6b, #feca57);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.ciyota-cookies-agreement-banner__text {
    color: #ffffff;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
}

.ciyota-cookies-agreement-banner__link {
    color: #74b9ff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.ciyota-cookies-agreement-banner__link:hover {
    color: #a29bfe;
    text-decoration: underline;
}

.ciyota-cookies-agreement-banner__actions {
    display: flex;
    gap: 15px;
    flex-shrink: 0;
}

.ciyota-cookies-agreement-banner__button {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 90px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ciyota-cookies-agreement-banner__button-icon {
    font-size: 16px;
    display: inline-flex;
    align-items: center;
}

.ciyota-cookies-agreement-banner__button--accept {
    background: #ffc32c;
    color: #10235e;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(255, 195, 44, 0.3);
}

.ciyota-cookies-agreement-banner__button--accept:hover {
    background: green;
    color: white;
    font-weight: bold;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 128, 0, 0.4);
}

.ciyota-cookies-agreement-banner__button--reject {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

.ciyota-cookies-agreement-banner__button--reject:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .ciyota-cookies-agreement-banner__container {
        flex-direction: column;
        text-align: center;
        gap: 18px;
        padding: 20px;
    }

    .ciyota-cookies-agreement-banner__content {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .ciyota-cookies-agreement-banner__actions {
        width: 100%;
        justify-content: center;
        gap: 12px;
    }

    .ciyota-cookies-agreement-banner__button {
        flex: 1;
        max-width: 140px;
        padding: 14px 20px;
    }
}
/* COOKIES BANNER STYLES - END */


/* COOKIES policy STYLES - END */

.ciyota-cookies-agreement-banner-policy-page {
    display: flex;
    min-height: 100vh;
    position: relative;
    margin: 40px auto;
    max-width: 1200px;
    padding: 0 20px;
}

/* Left Navigation */
.ciyota-cookies-agreement-banner-policy-nav {
    width: 280px;
    background: linear-gradient(135deg, #10235E 0%, #1e3c72 100%);
    color: white;
    position: sticky;
    top: 100px;
    height: fit-content;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    z-index: 10;
    box-shadow: 2px 0 15px rgba(0,0,0,0.1);
    border-radius: 12px;
}

.ciyota-cookies-agreement-banner-policy-nav__header {
    padding: 30px 25px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.ciyota-cookies-agreement-banner-policy-nav__title {
    font-size: 20px;
    font-weight: 700;
    color: #ffc32c;
    margin-bottom: 8px;
}

.ciyota-cookies-agreement-banner-policy-nav__subtitle {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
}

.ciyota-cookies-agreement-banner-policy-nav__menu {
    padding: 20px 0;
}

.ciyota-cookies-agreement-banner-policy-nav__item {
    display: block;
    padding: 15px 25px;
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.ciyota-cookies-agreement-banner-policy-nav__item:hover,
.ciyota-cookies-agreement-banner-policy-nav__item--active {
    background: rgba(255,255,255,0.1);
    border-left-color: #ffc32c;
    color: #ffc32c;
    transform: translateX(5px);
}

/* Main Content */
.ciyota-cookies-agreement-banner-policy-content {
    flex: 1;
    margin-left: 20px;
    padding: 0;
}

.ciyota-cookies-agreement-banner-policy-container {
    max-width: 100%;
    margin: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.08);
    overflow: hidden;
}

.ciyota-cookies-agreement-banner-policy-header {
    background: linear-gradient(135deg, #10235E 0%, #1e3c72 100%);
    color: white;
    padding: 50px 60px;
    text-align: center;
}

.ciyota-cookies-agreement-banner-policy-header__title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #ffc32c;
}

.ciyota-cookies-agreement-banner-policy-header__subtitle {
    font-size: 18px;
    color: rgba(255,255,255,0.9);
    font-weight: 400;
}

.ciyota-cookies-agreement-banner-policy-body {
    padding: 60px;
}

.ciyota-cookies-agreement-banner-policy-section {
    margin-bottom: 50px;
    scroll-margin-top: 20px;
}

.ciyota-cookies-agreement-banner-policy-section:last-child {
    margin-bottom: 0;
}

.ciyota-cookies-agreement-banner-policy-section__title {
    font-size: 28px;
    font-weight: 700;
    color: #10235E;
    margin-bottom: 25px;
    padding-bottom: 12px;
    border-bottom: 3px solid #ffc32c;
    display: inline-block;
}

.ciyota-cookies-agreement-banner-policy-section__paragraph {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
    text-align: justify;
}

.ciyota-cookies-agreement-banner-policy-section__paragraph:last-child {
    margin-bottom: 0;
}

.ciyota-cookies-agreement-banner-policy-highlight {
    background: #ffc32c;
    color: #10235E;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .ciyota-cookies-agreement-banner-policy-nav {
        width: 250px;
    }
    
    .ciyota-cookies-agreement-banner-policy-content {
        margin-left: 15px;
    }

    .ciyota-cookies-agreement-banner-policy-body {
        padding: 40px;
    }
}

@media (max-width: 768px) {
    .ciyota-cookies-agreement-banner-policy-page {
        flex-direction: column;
        margin: 20px 0;
    }

    .ciyota-cookies-agreement-banner-policy-nav {
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100vh;
        max-height: 100vh;
        transition: left 0.3s ease;
        z-index: 1000;
        border-radius: 0;
    }

    .ciyota-cookies-agreement-banner-policy-nav--open {
        left: 0;
    }

    .ciyota-cookies-agreement-banner-policy-content {
        margin-left: 0;
    }

    .ciyota-cookies-agreement-banner-policy-header {
        padding: 40px 30px;
    }

    .ciyota-cookies-agreement-banner-policy-header__title {
        font-size: 28px;
    }

    .ciyota-cookies-agreement-banner-policy-body {
        padding: 30px;
    }

    .ciyota-cookies-agreement-banner-policy-section__title {
        font-size: 24px;
    }

    /* Mobile menu toggle */
    .ciyota-cookies-agreement-banner-policy-mobile-toggle {
        display: block;
        position: fixed;
        top: 20px;
        left: 20px;
        z-index: 1001;
        background: #10235E;
        color: white;
        border: none;
        padding: 12px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 18px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
}

@media (min-width: 769px) {
    .ciyota-cookies-agreement-banner-policy-mobile-toggle {
        display: none;
    }
}




/*Sponsorship section 
======================================*/
.sponsorship-kid-donate-to-ciyota {
    padding: 60px 0;
    background-color: #FFE196;
    overflow: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.sponsorship-content {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.sponsorship-cat-ciyota-pricing-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.sponsorship-cat-ciyota-section-title {
    font-weight: 700;
    color: #102235;
    margin-bottom: 2rem;
    text-align: center;
}

.sponsorship-cat-ciyota-level-block {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 8px 25px rgba(16, 34, 53, 0.1);
    border: 2px solid rgba(16, 34, 53, 0.1);
    transition: all 0.3s ease;
}

.sponsorship-cat-ciyota-level-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(16, 34, 53, 0.15);
    border-color: #ffc32c;
}

.sponsorship-cat-ciyota-level-title {
    font-weight: 700;
    color: #102235;
    margin-bottom: 1.5rem;
    text-align: center;
}

.sponsorship-cat-ciyota-countries {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.sponsorship-cat-ciyota-country {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.sponsorship-cat-ciyota-country-name {
    font-weight: 600;
    color: #102235;
}

.sponsorship-cat-ciyota-pricing {
    text-align: right;
}

.sponsorship-cat-ciyota-annual {
    font-weight: 700;
    color: #102235;
    display: block;
}

.sponsorship-cat-ciyota-termly {
    font-size: 0.9em;
    color: #666;
    font-weight: 500;
}

/* University special styling */
.sponsorship-cat-ciyota-university {
    background-color: #10235e;
    border-color: #102235;
}

.sponsorship-cat-ciyota-university .sponsorship-cat-ciyota-level-title {
    color: #ffc32c;
}

.sponsorship-cat-ciyota-university .sponsorship-cat-ciyota-country {
    background: rgba(255, 195, 44, 0.1);
    border-color: rgba(255, 195, 44, 0.3);
}

.sponsorship-cat-ciyota-university .sponsorship-cat-ciyota-country-name {
    color: #ffffff;
}

.sponsorship-cat-ciyota-university .sponsorship-cat-ciyota-annual {
    color: #ffc32c;
}

.sponsorship-cat-ciyota-university .sponsorship-cat-ciyota-termly {
    color: rgba(255, 255, 255, 0.8);
}

.form-column {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
}

.donation-form {
    width: 100%;
    border: none;
    border-radius: 0;
    height: 900px;
}

/* Responsive Design */
@media (max-width: 992px) {
    .sponsorship-content {
        flex-direction: column;
        gap: 0;
    }

    .sponsorship-cat-ciyota-pricing-column {
        display: none;
    }

    .form-column {
        order: 1;
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .donation-form {
        width: 100%;
        max-width: 600px;
        height: 700px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }

    .sponsorship-content {
        gap: 0;
    }

    .sponsorship-cat-ciyota-pricing-column {
        display: none;
    }

    .form-column {
        order: 1;
        justify-content: center;
        align-items: center;
    }

    .donation-form {
        width: 100%;
        max-width: 100%;
        height: 650px;
    }
}

@media (max-width: 576px) {
    .sponsorship-kid-donate-to-ciyota {
        padding: 30px 0;
    }

    .container {
        padding: 0 15px;
        max-width: 100%;
    }

    .sponsorship-content {
        gap: 0;
    }

    .sponsorship-cat-ciyota-pricing-column {
        display: none;
    }

    .form-column {
        order: 1;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .donation-form {
        width: 100%;
        max-width: 100%;
        height: 600px;
    }
}

/* Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sponsorship-cat-ciyota-level-block {
    animation: fadeInUp 0.6s ease forwards;
}

.sponsorship-cat-ciyota-level-block:nth-child(3) {
    animation-delay: 0.2s;
}

.sponsorship-cat-ciyota-level-block:nth-child(4) {
    animation-delay: 0.4s;
}

/* Info Section Styles */
.sponsorship-cat-ciyota-info-section {
    padding: 20px 0;
}

.sponsorship-cat-ciyota-info-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.sponsorship-cat-ciyota-description {
    margin-bottom: 3rem;
}

.sponsorship-cat-ciyota-description-text {
    
    line-height: 1.8;
    color: #102235;
    margin: 0 0 2rem 0;
    font-weight: 500;
}

.sponsorship-cat-ciyota-impact-text {
    
    line-height: 1.6;
    color: #666;
    margin: 0 0 2rem 0;
    font-style: italic;
}

.sponsorship-cat-ciyota-cta-text {
    
    line-height: 1.6;
    color: #102235;
    margin: 0;
    font-weight: 600;
}

.sponsorship-cat-ciyota-procedure-section {
    margin: 3rem 0;
    padding: 2rem;
    background: rgba(255, 195, 44, 0.1);
    border-radius: 16px;
    border: 2px solid rgba(255, 195, 44, 0.3);
}

.sponsorship-cat-ciyota-procedure-title {
    
    font-weight: 700;
    color: #102235;
    margin-bottom: 2rem;
}

.sponsorship-cat-ciyota-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.sponsorship-cat-ciyota-step {
    background: rgba(255, 255, 255, 0.8);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(16, 34, 53, 0.1);
    transition: all 0.3s ease;
}

.sponsorship-cat-ciyota-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(16, 34, 53, 0.1);
}

.sponsorship-cat-ciyota-step-number {
    width: 40px;
    height: 40px;
    background: #ffc32c;
    color: #102235;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.5em;
    margin: 0 auto 1rem auto;
}

.sponsorship-cat-ciyota-step-title {
    font-size: 1.2em;
    font-weight: 600;
    color: #102235;
    margin-bottom: 0.5rem;
}

.sponsorship-cat-ciyota-step-text {
    line-height: 1.7;
    color: #666;
    line-height: 1.5;
}

.sponsorship-cat-ciyota-contact-title {
    font-size: 1.3em;
    font-weight: 700;
    color: #102235;
    margin-bottom: 1.5rem;
}

.sponsorship-cat-ciyota-contact-text {
    
    line-height: 1.6;
    color: #666;
    margin-bottom: 2rem;
}

.sponsorship-cat-ciyota-contact-details {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.sponsorship-cat-ciyota-contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.sponsorship-cat-ciyota-contact-label {
    
    font-weight: 600;
    color: #102235;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sponsorship-cat-ciyota-contact-link {
    
    font-weight: 600;
    color: #ffc32c;
    text-decoration: none;
    transition: all 0.3s ease;
}

.sponsorship-cat-ciyota-contact-link:hover {
    color: #102235;
    text-decoration: underline;
}

/* Responsive for Info Section */
@media (max-width: 768px) {
    .sponsorship-cat-ciyota-info-section {
        padding: 3rem 0;
        
    }

    .sponsorship-cat-ciyota-contact-title {
        font-size: 1.6rem;
    }

    .sponsorship-cat-ciyota-procedure-title {
        font-size: 1.2em;
    }

    .sponsorship-cat-ciyota-steps {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .sponsorship-cat-ciyota-contact-details {
        flex-direction: column;
        gap: 1.5rem;
    }

  
    .sponsorship-cat-ciyota-cta-text {
        font-size: 1.2rem;
    }

    .sponsorship-cat-ciyota-procedure-section {
        padding: 1.5rem;
        margin: 2rem 0;
    }
}


/*ED MESSAGE
================*/
.executive-director-message {
    background-color: #FFFFFF;
    padding: 20px 20px;
    position: relative;
    overflow: hidden;
  }
  
  .executive-director-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #007bff, #0056b3);
  }
  
  .executive-director-message__container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
  }
  
  .executive-director-message__content {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 50px;
    align-items: start;
    
    padding: 20px;
    border-radius: 16px;
    
    position: relative;
  }
  
  .executive-director-message__content::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #007bff, #0056b3, #007bff);
    border-radius: 18px;
    z-index: -1;
    opacity: 0.1;
  }
  
  .executive-director-message__image {
    position: relative;
  }
  
  .executive-director-message__photo {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
  }
  
  .executive-director-message__photo:hover {
    transform: translateY(-5px);
  }
  
  .executive-director-message__text {
    padding-left: 10px;
  }
  
  .executive-director-message__title {
   
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 30px;
    line-height: 1.3;
    position: relative;
  }
  
  
  .executive-director-message__body p {
    
    line-height: 1.5;
    
    margin-bottom: 25px;
    text-align: justify;
  }
  
  .executive-director-message__signature {
    
    color: #007bff;
    font-weight: 600;
    margin-top: 35px;
    padding-top: 25px;
    border-top: 2px solid #e9ecef;
    text-align: right;
  }
  
  /* Responsive Design */
  @media (max-width: 968px) {
    .executive-director-message__content {
      grid-template-columns: 1fr;
      gap: 40px;
      padding: 40px 30px;
    }
    
    .executive-director-message__image {
      order: -1;
      max-width: 300px;
      margin: 0 auto;
    }
    
    .executive-director-message__photo {
      height: 300px;
    }
    
    .executive-director-message__text {
      padding-left: 0;
    }
    
    .executive-director-message__title {
      font-size: 1.9rem;
      text-align: center;
    }
    
    .executive-director-message__title::after {
      left: 50%;
      transform: translateX(-50%);
    }
  }
  
  @media (max-width: 768px) {
    .executive-director-message {
      padding: 40px 15px;
    }
    
    .executive-director-message__content {
      padding: 30px 20px;
    }
    
    .executive-director-message__title {
      font-size: 1.7rem;
    }
    
    .executive-director-message__body p {
      font-size: 1rem;
      text-align: left;
    }
    
    .executive-director-message__signature {
      text-align: center;
    }
  }
  
  @media (max-width: 480px) {
    .executive-director-message__title {
      font-size: 1.5rem;
    }
    
    .executive-director-message__photo {
      height: 250px;
    }
    
    .executive-director-message__body p {
      font-size: 0.95rem;
      line-height: 1.7;
    }
  }


 /* THE GENESIS */
 .story-genesis-ciyota {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
    background: #FFFFFF;
}

.story-genesis-ciyota-hero {
    text-align: center;
    margin-bottom: 4rem;
    padding: 3rem 2rem;
    background: #ffffff;
    border-radius: 16px;
}

.story-genesis-ciyota-hero h1 {
    margin-bottom: 1rem;
    font-weight: 700;
    color: #10235e;
}

.story-genesis-ciyota-hero p {
    opacity: 0.9;
    max-width: 1200px;
    margin: 0 auto;
    line-height: 1.6;
    text-align: left;
    color: #333;
}

.story-genesis-ciyota-timeline {
    position: relative;
    padding: 0rem 0;
}

.story-genesis-ciyota-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: #10235e;
    border-radius: 5px;
}

.story-genesis-ciyota-period {
    margin-bottom: 3rem;
    position: relative;
}

.story-genesis-ciyota-period-toggle {
    background: #10235e;
    color: #ffc32c;
    border: none;
    padding: 1.5rem 2rem;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 16px rgba(16, 35, 94, 0.2);
}

.story-genesis-ciyota-period-toggle:hover {
    background: #1a2f72;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 35, 94, 0.3);
}

.story-genesis-ciyota-period-toggle.active {
    background: #ffc32c;
    color: #10235e;
}

.story-genesis-ciyota-period-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.story-genesis-ciyota-period-toggle.active .story-genesis-ciyota-period-icon {
    transform: rotate(180deg);
}

.story-genesis-ciyota-period-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
    margin-top: 1rem;
}

.story-genesis-ciyota-period-content.active {
    max-height: 5000px;
}

.story-genesis-ciyota-year-group {
    display: flex;
    margin-bottom: 2rem;
    position: relative;
}

.story-genesis-ciyota-year-group:nth-child(even) {
    flex-direction: row-reverse;
}

.story-genesis-ciyota-year-content {
    flex: 1;
    padding: 0 2rem;
    position: relative;
}

.story-genesis-ciyota-year-marker {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: #ffc32c;
    border: 4px solid #10235e;
    border-radius: 50%;
    z-index: 3;
}

.story-genesis-ciyota-year-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #ffc32c;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.story-genesis-ciyota-year-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.story-genesis-ciyota-year-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #10235e;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.story-genesis-ciyota-year-title::before {
    content: '📅';
    font-size: 1.2rem;
}

.story-genesis-ciyota-events {
    list-style: none;
    padding: 0;
}

.story-genesis-ciyota-event {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 3px solid #10235e;
    position: relative;
    transition: all 0.3s ease;
}

.story-genesis-ciyota-event:hover {
    background: #e3f2fd;
    transform: translateX(4px);
}

.story-genesis-ciyota-event::before {
    content: '✨';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    background: #ffc32c;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.story-genesis-ciyota-event-text {
    margin-left: 1rem;
    line-height: 1.6;
    color: #333;
}

.story-genesis-ciyota-image {
    width: 100%;
    height: 300px;
    border-radius: 12px;
    margin: 1rem 0;
    object-fit: cover;
    border: 3px solid #ffc32c;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.story-genesis-ciyota-image:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.story-genesis-ciyota-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 3rem;
    padding: 50px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.story-genesis-ciyota-stat {
    text-align: center;
    padding: 1rem;
    transition: transform 0.3s ease;
}

.story-genesis-ciyota-stat:hover {
    transform: translateY(-5px);
}

.story-genesis-ciyota-stat-number {
    font-size: 2em;
    font-weight: 700;
    color: #ffc32c;
    display: block;
}

.story-genesis-ciyota-stat-label {
    color: #666;
    margin-top: 0.5rem;
    font-weight: 500;
}

/* Mobile Responsive - Enhanced */
@media (max-width: 768px) {
    .story-genesis-ciyota {
        padding: 1rem 0.5rem;
    }

    .story-genesis-ciyota-hero {
        padding: 2rem 1rem;
        margin-bottom: 2rem;
    }

    .story-genesis-ciyota-hero h1 {
        font-size: 1.8em;
        margin-bottom: 0.8rem;
    }

    .story-genesis-ciyota-hero p {
        font-size: 0.9em;
        line-height: 1.5;
    }

    .story-genesis-ciyota-timeline::before {
        left: 1rem;
        width: 3px;
    }

    .story-genesis-ciyota-year-group,
    .story-genesis-ciyota-year-group:nth-child(even) {
        flex-direction: column;
    }

    .story-genesis-ciyota-year-content {
        padding: 0 0 0 2rem;
    }

    .story-genesis-ciyota-year-marker {
        left: 1rem;
        width: 16px;
        height: 16px;
    }

    .story-genesis-ciyota-year-card {
        padding: 1.5rem;
        margin-left: 0.5rem;
    }

    .story-genesis-ciyota-year-title {
        font-size: 1.3em;
        margin-bottom: 0.8rem;
    }

    .story-genesis-ciyota-period-toggle {
        font-size: 0.9em;
        padding: 1rem 1.5rem;
        margin-bottom: 0.5rem;
    }

    .story-genesis-ciyota-event {
        padding: 0.8rem;
        margin-bottom: 1rem;
    }

    .story-genesis-ciyota-event-text {
        margin-left: 0.8rem;
        font-size: 0.9em;
    }

    .story-genesis-ciyota-image {
        height: 200px;
        margin: 0.8rem 0;
    }

    .story-genesis-ciyota-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
        padding: 2rem 1rem;
        margin-top: 2rem;
    }

    .story-genesis-ciyota-stat {
        padding: 0.8rem;
    }

    .story-genesis-ciyota-stat-number {
        font-size: 1.6em;
    }

    .story-genesis-ciyota-stat-label {
        font-size: 0.85em;
    }
}

/* Extra Small Mobile (phones in portrait) */
@media (max-width: 480px) {
    .story-genesis-ciyota {
        padding: 0.5rem 0.25rem;
    }

    .story-genesis-ciyota-hero {
        padding: 1.5rem 0.8rem;
    }

    .story-genesis-ciyota-hero h1 {
        font-size: 1.5em;
    }

    .story-genesis-ciyota-hero p {
        font-size: 0.85em;
    }

    .story-genesis-ciyota-year-card {
        padding: 1rem;
        margin-left: 0.25rem;
    }

    .story-genesis-ciyota-year-title {
        font-size: 1.1em;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .story-genesis-ciyota-period-toggle {
        font-size: 0.85em;
        padding: 0.8rem 1rem;
    }

    .story-genesis-ciyota-event {
        padding: 0.6rem;
        margin-left: 0;
    }

    .story-genesis-ciyota-event::before {
        left: -8px;
        width: 20px;
        height: 20px;
    }

    .story-genesis-ciyota-event-text {
        margin-left: 0.5rem;
        font-size: 0.85em;
    }

    .story-genesis-ciyota-image {
        height: 160px;
        border-width: 2px;
    }

    .story-genesis-ciyota-stats {
        grid-template-columns: 1fr;
        padding: 1.5rem 0.8rem;
    }

    .story-genesis-ciyota-stat-number {
        font-size: 1.4em;
    }
}

/* Large Mobile/Small Tablet (landscape) */
@media (min-width: 769px) and (max-width: 1024px) {
    .story-genesis-ciyota {
        padding: 1.5rem 1rem;
    }

    .story-genesis-ciyota-year-title {
        font-size: 1.6em;
    }

    .story-genesis-ciyota-image {
        height: 280px;
    }

    .story-genesis-ciyota-stats {
        grid-template-columns: repeat(4, 1fr);
        padding: 3rem 2rem;
    }
}