/********************************************************
Template Source: HTML5
Powered by: Thierry Barata
Version: 1.0
*********************************************************/
/*
====================================
[ 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 ==================== */
@font-face {
font-family: 'CiyotaCustomBold';
src: url('/proxy/https/ciyota.org/assets/fonts/ciyotacustomfont/CiyotaCustomFont-Bold.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 17px;
line-height: 27px;
font-weight: 400;
color: #10235e;
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%;
}
/* Container adjustments for new width system */
.container,
.container-fluid {
width: 100%;
max-width: 100%;
padding-left: 50px;
padding-right: 50px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
@media (max-width: 768px) {
.container,
.container-fluid {
padding-left: 25px;
padding-right: 25px;
}
}
@media (max-width: 480px) {
.container,
.container-fluid {
padding-left: 15px;
padding-right: 15px;
}
}
/* 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: 'CiyotaCustomBold', 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: #10235e;
}
.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: 80%;
max-width: 100%;
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: #10235e;
}
.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: #10235e;
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: #10235e;
}
.tt-slider .carousel-inner .tt-carousel-caption .btn {
color: #10235e;
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(/proxy/https/ciyota.org/assets/img/slider/bb-slider-pic.png) center center no-repeat;
background-size: cover;
}
.tt-slider .carousel-inner .item:nth-child(2) {
background: url(/proxy/https/ciyota.org/assets/img/slider/bb-slider-pic2.png) center center no-repeat;
background-size: cover;
}
.tt-slider .carousel-inner .item:nth-child(3) {
background: url(/proxy/https/ciyota.org/assets/img/slider/parents-in-training.png) center center no-repeat;
background-size: cover;
}
.tt-slider .carousel-inner .item:nth-child(4) {
background: url(/proxy/https/ciyota.org/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(/proxy/https/ciyota.org/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(/proxy/https/ciyota.org/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(/proxy/https/ciyota.org/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(/proxy/https/ciyota.org/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("/proxy/https/ciyota.org/assets/img/slider/banner-1.jpg");
}
.banner-2 {
background-image: url("/proxy/https/ciyota.org/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(/proxy/https/ciyota.org/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: #10235e;
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: #10235e;
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: #10235e;
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: #10235e;
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: #10235e;
color: #fff;
}
.download-btn a i {
color: #ffc32c;
margin-right: 5px;
}
.download-btn:hover i {
color: #fff;
}
.des-title {
font-weight: 800;
color: #10235e;
}
.about-us-banner {
background: url(/proxy/https/ciyota.org/assets/img/about-us-banner-img.jpg) no-repeat center center / cover;
}
.about-us-banner-content {
width: 100%;
max-width: 400px;
margin-left: 50px;
}
.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: #10235e;
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: #10235e;
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: #10235e;
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: 100%;
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: 100%;
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: #10235e;
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: #79acf7;
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: 100%;
margin: 0rem auto;
border-radius: 12px;
overflow: visible;
/* Changed from hidden to allow sticky positioning */
}
.ciyotateam-profile-content {
display: flex;
gap: 2rem;
padding: 3rem 50px;
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: #10235e;
font-size: 30px;
border-bottom: 2px solid #10235e;
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: #ffc32c;
padding: 1rem;
border-radius: 8px;
}
.ciyotateam-profile-info dt {
font-weight: bold;
color: #ffffff;
}
.ciyotateam-profile-info dd {
margin-left: 1rem;
color: #ffffff;
font-weight: 700;
}
.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 25px;
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: 480px) {
.ciyotateam-profile-content {
padding: 1.5rem 15px;
}
.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: #10235e;
}
.career-header h4 a {
color: #10235e;
}
.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: #10235e;
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: #10235e;
}
.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: #10235e;
}
.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: #10235e;
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: #10235e;
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: #10235e;
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: #10235e;
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: #10235e;
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: #10235e;
border-color: #10235e;
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: #10235e;
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: #10235e;
}
.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: #10235e;
padding: 60px 0 30px;
}
.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: #10235e;
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;
}
}
@media (max-width: 575px) {
.social-link {
justify-content: flex-start;
}
.social-link li {
margin-right: 5px;
}
}
/* Copyright Section */
.copyright-wrapper {
background-color: #0b173e;
padding: 15px 0;
}
.copyright-info {
padding: 10px 0;
text-align: center;
}
.copyright-info p {
color: #fff;
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;
}
}
@media (max-width: 480px) {
.primary-footer [class*="col-"] {
width: 100%;
}
}
/* Footer Badges */
.footer-badges-top {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 30px;
margin-bottom: 25px;
flex-wrap: nowrap;
}
.footer-badges-top a {
display: inline-block;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.footer-badges-top a:hover {
opacity: 0.8;
transform: translateY(-3px);
}
.footer-badges-top img {
height: 95px;
width: auto;
max-width: 100%;
object-fit: contain;
display: block;
}
@media (max-width: 991px) {
.footer-badges-top {
gap: 25px;
margin-bottom: 20px;
}
.footer-badges-top img {
height: 85px;
}
}
@media (max-width: 767px) {
.footer-badges-top {
gap: 20px;
margin-bottom: 20px;
}
.footer-badges-top img {
height: 75px;
}
}
@media (max-width: 480px) {
.footer-badges-top {
gap: 15px;
}
.footer-badges-top img {
height: 65px;
}
}
@media (max-width: 360px) {
.footer-badges-top img {
height: 58px;
}
}
/* Subscribe Button in Footer */
.subscribe-btn {
background-color: #ffc32c;
color: #10235e;
border: none;
padding: 14px 32px;
font-size: 16px;
font-weight: 700;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
max-width: 280px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.subscribe-btn:hover {
background-color: #ffb700;
transform: translateY(-2px);
}
.subscribe-btn:active {
transform: translateY(0);
}
/* Subscribe Modal */
.subscribe-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
opacity: 0;
transition: opacity 0.3s ease;
animation: fadeIn 0.3s ease forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.subscribe-modal.show {
opacity: 1;
}
.subscribe-modal-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(1, 26, 72, 0.95) 0%, rgba(4, 60, 121, 0.95) 100%);
backdrop-filter: blur(10px);
}
.subscribe-modal-dialog {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
overflow-y: auto;
}
.subscribe-modal-content {
position: relative;
background: #ffffff;
border-radius: 20px;
padding: 0;
width: 100%;
max-width: 650px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
max-height: 90vh;
overflow: hidden;
margin: auto;
animation: slideUp 0.4s ease forwards;
border: 1px solid rgba(255, 195, 44, 0.2);
display: flex;
flex-direction: column;
}
@keyframes slideUp {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Modal Header with Brand Colors */
.subscribe-modal-content>h2,
.subscribe-modal-content>.indicates-required {
background-color: #10235e;
margin: 0;
}
.subscribe-modal-close {
position: absolute;
top: 20px;
right: 25px;
background: rgba(255, 195, 44, 0.2);
border: none;
font-size: 32px;
color: #ffc32c;
cursor: pointer;
line-height: 1;
padding: 5px;
width: 40px;
height: 40px;
transition: all 0.3s ease;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.subscribe-modal-close:hover {
background: #ffc32c;
color: #10235e;
transform: rotate(90deg);
}
.subscribe-modal-content h2 {
color: #ffc32c;
font-size: 2.8rem;
padding: 40px 50px 15px;
text-align: center;
font-weight: 800;
position: relative;
border-radius: 20px 20px 0 0;
}
.subscribe-modal-content h2::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: #ffc32c;
border-radius: 2px;
}
.subscribe-modal-content .indicates-required {
text-align: center;
font-size: 13px;
padding: 15px 50px 30px;
color: #ffc32c;
font-style: italic;
}
.subscribe-modal-content .asterisk {
color: #ffc32c;
font-weight: bold;
}
/* Form Container with Scrolling */
.subscribe-modal-content form {
overflow-y: auto;
overflow-x: hidden;
padding: 40px 50px 50px;
flex: 1;
}
/* Custom Scrollbar for Form */
.subscribe-modal-content form::-webkit-scrollbar {
width: 8px;
}
.subscribe-modal-content form::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
margin: 10px 0;
}
.subscribe-modal-content form::-webkit-scrollbar-thumb {
background: #ffc32c;
border-radius: 10px;
}
.subscribe-modal-content form::-webkit-scrollbar-thumb:hover {
background: #e6b028;
}
.subscribe-modal-content .form-group {
margin-bottom: 22px;
}
.subscribe-modal-content .form-group label {
display: block;
color: #10235e;
font-weight: 600;
margin-bottom: 8px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.subscribe-modal-content .form-group input[type="email"],
.subscribe-modal-content .form-group input[type="text"],
.subscribe-modal-content select {
width: 100%;
padding: 14px 18px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 15px;
transition: all 0.3s ease;
box-sizing: border-box;
background-color: #fff;
font-family: inherit;
}
.subscribe-modal-content .form-group input:focus,
.subscribe-modal-content select:focus {
outline: none;
border-color: #ffc32c;
box-shadow: 0 0 0 4px rgba(255, 195, 44, 0.1);
background-color: #fffef8;
}
/* Remove red border from email and required fields */
.subscribe-modal-content .form-group input.email,
.subscribe-modal-content .form-group input.required,
.subscribe-modal-content .form-group input[required] {
border: 2px solid #e0e0e0 !important;
}
.subscribe-modal-content .form-group input.email:focus,
.subscribe-modal-content .form-group input.required:focus,
.subscribe-modal-content .form-group input[required]:focus {
border-color: #ffc32c !important;
box-shadow: 0 0 0 4px rgba(255, 195, 44, 0.1) !important;
}
/* Remove any Mailchimp default styles for error states before submission */
.subscribe-modal-content .form-group input:invalid {
border-color: #e0e0e0;
box-shadow: none;
}
.subscribe-modal-content .form-group input:invalid:focus {
border-color: #ffc32c;
box-shadow: 0 0 0 4px rgba(255, 195, 44, 0.1);
}
.subscribe-modal-content .form-row {
display: flex;
gap: 20px;
margin-bottom: 0;
}
.subscribe-modal-content .form-group-half {
flex: 1;
margin-bottom: 22px;
}
.subscribe-modal-content select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23011a48' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 20px;
padding-right: 40px;
}
.subscribe-modal-content select:focus {
outline: none;
border-color: #ffc32c;
}
.subscribe-modal-content #mce-responses {
margin: 15px 0;
}
.subscribe-modal-content .response {
padding: 15px;
margin-bottom: 15px;
border-radius: 10px;
font-size: 14px;
}
.subscribe-modal-content #mce-error-response {
background-color: #ffe6e6;
color: #cc0000;
border: 2px solid #ff4444;
}
.subscribe-modal-content #mce-success-response {
background-color: #e6ffe6;
color: #008800;
border: 2px solid #00aa00;
}
.subscribe-modal-content .form-submit {
text-align: center;
margin-top: 35px;
}
.subscribe-modal-content .form-submit input[type="submit"] {
background-color: #10235e;
color: #ffc32c;
border: none;
padding: 16px 50px;
font-size: 17px;
font-weight: 700;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
min-width: 220px;
max-width: 100%;
display: inline-block;
}
.subscribe-modal-content .form-submit input[type="submit"]:hover {
background-color: #ffc32c;
color: #10235e;
transform: translateY(-2px);
}
.subscribe-modal-content .form-submit input[type="submit"]:active {
transform: translateY(0);
}
.subscribe-modal-content .form-submit input[type="submit"]:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
/* Success and Error Message Styles */
#subscribeSuccessMessage,
#subscribeErrorMessage {
background: #fff;
border-radius: 15px;
animation: messageSlideIn 0.5s ease forwards;
margin: 0;
padding: 40px 50px 50px;
}
@keyframes messageSlideIn {
from {
transform: scale(0.9);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
#subscribeSuccessMessage {
border: 3px solid #00aa00;
background: linear-gradient(135deg, #e6ffe6 0%, #f0fff0 100%);
}
#subscribeErrorMessage {
border: 3px solid #ff4444;
background: linear-gradient(135deg, #ffe6e6 0%, #fff0f0 100%);
}
#subscribeSuccessMessage button,
#subscribeErrorMessage button {
font-family: inherit;
min-width: 150px;
display: inline-block;
}
#subscribeSuccessMessage button {
background-color: #008800;
color: white;
border: none;
padding: 12px 30px;
font-size: 16px;
font-weight: 700;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
}
#subscribeSuccessMessage button:hover {
background-color: #006600;
transform: translateY(-2px);
}
#subscribeErrorMessage button {
background-color: #cc0000;
color: white;
border: none;
padding: 12px 30px;
font-size: 16px;
font-weight: 700;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
}
#subscribeErrorMessage button:hover {
background-color: #aa0000;
transform: translateY(-2px);
}
@media (max-width: 767px) {
.subscribe-modal-content {
border-radius: 15px;
max-height: 95vh;
}
.subscribe-modal-content h2 {
font-size: 2.2rem;
padding: 30px 25px 12px;
}
.subscribe-modal-content h2::after {
width: 60px;
height: 3px;
}
.subscribe-modal-content .indicates-required {
font-size: 12px;
padding: 12px 25px 25px;
}
.subscribe-modal-content form {
padding: 30px 25px 35px;
}
.subscribe-modal-close {
top: 15px;
right: 15px;
width: 35px;
height: 35px;
font-size: 28px;
}
.subscribe-modal-content .form-group {
margin-bottom: 18px;
}
.subscribe-modal-content .form-group label {
font-size: 13px;
margin-bottom: 6px;
}
.subscribe-modal-content .form-group input,
.subscribe-modal-content select {
padding: 12px 15px;
font-size: 14px;
border-radius: 8px;
}
.subscribe-modal-content .form-row {
flex-direction: column;
gap: 0;
}
.subscribe-modal-content .form-group-half {
width: 100%;
margin-bottom: 18px;
}
.subscribe-modal-content .form-submit {
margin-top: 25px;
}
.subscribe-modal-content .form-submit input[type="submit"] {
padding: 14px 40px;
font-size: 15px;
min-width: 180px;
}
#subscribeSuccessMessage,
#subscribeErrorMessage {
padding: 30px 25px 35px !important;
}
#subscribeSuccessMessage div:first-child,
#subscribeErrorMessage div:first-child {
font-size: 40px !important;
margin-bottom: 12px !important;
}
#subscribeSuccessMessage strong,
#subscribeErrorMessage strong {
font-size: 18px !important;
margin-bottom: 12px !important;
}
#subscribeSuccessMessage p,
#subscribeErrorMessage p {
font-size: 14px !important;
line-height: 1.6 !important;
margin-bottom: 15px !important;
}
#subscribeSuccessMessage button,
#subscribeErrorMessage button {
padding: 11px 25px !important;
font-size: 14px !important;
min-width: 130px;
}
}
@media (max-width: 480px) {
.subscribe-modal-content h2 {
font-size: 2rem;
padding: 25px 20px 12px;
}
.subscribe-modal-content .indicates-required {
padding: 12px 20px 20px;
}
.subscribe-modal-content form {
padding: 25px 20px 30px;
}
.subscribe-modal-content .form-submit input[type="submit"] {
width: 100%;
min-width: auto;
}
#subscribeSuccessMessage,
#subscribeErrorMessage {
padding: 25px 20px 30px !important;
}
}
/* Loading State */
.subscribe-modal-content .form-submit input[type="submit"]:disabled::after {
content: '';
display: inline-block;
width: 14px;
height: 14px;
margin-left: 10px;
border: 2px solid #ffc32c;
border-radius: 50%;
border-top-color: transparent;
animation: spinner 0.6s linear infinite;
vertical-align: middle;
}
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
/*-----------------------------------------------------
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(/proxy/https/ciyota.org/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('/proxy/https/ciyota.org/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: 50px;
}
.hero-content {
padding: 30px;
border-radius: 10px;
max-width: 100%;
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;
padding: 25px;
}
.hero-content p {
font-size: 1rem;
}
}
@media screen and (max-width: 480px) {
.hero-section {
min-height: 300px;
height: 50vh;
padding: 15px;
}
.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);
max-width: 100%;
padding-left: 50px;
padding-right: 50px;
margin: 0 auto;
box-sizing: border-box;
}
.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) + 50px);
padding-inline-end: 50px;
}
[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 + 50px);
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);
padding-left: 50px;
padding-right: 50px;
}
[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: 50px;
}
[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);
padding-left: 50px;
padding-right: 50px;
}
[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 + 50px);
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: calc(var(--_uia-timeline-space) + 50px);
padding-inline-end: 50px;
}
[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, calc(var(--_uia-timeline-line-calculation) + 50px));
}
[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);
}
/* Mobile responsive adjustments for timeline */
@media (max-width: 768px) {
.uia-timeline__container,
[data-uia-timeline-skin="2"] .uia-timeline__container,
[data-uia-timeline-skin="3"] .uia-timeline__container,
[data-uia-timeline-skin="4"] .uia-timeline__container,
[data-uia-timeline-skin="5"] .uia-timeline__container {
padding-left: 25px;
padding-right: 25px;
}
[data-uia-timeline-skin="2"] .uia-timeline__container {
padding-inline-start: calc(var(--_uia-timeline-space) + 25px);
padding-inline-end: 25px;
}
[data-uia-timeline-skin="2"] .uia-timeline__line {
inset-inline-start: calc(var(--_uia-timeline-dot-size) / 2 + 25px);
}
[data-uia-timeline-skin="3"] .uia-timeline__line {
inset-inline-start: 25px;
}
[data-uia-timeline-skin="4"] .uia-timeline__line {
inset-inline-start: calc(var(--_uia-timeline-year-size) / 2 + 25px);
}
[data-uia-timeline-skin="5"] .uia-timeline__container {
padding-inline-start: calc(var(--_uia-timeline-space) + 25px);
padding-inline-end: 25px;
}
[data-uia-timeline-skin="5"] .uia-timeline__line {
inset-inline-start: var(--uia-timeline-line-main-position, calc(var(--_uia-timeline-line-calculation) + 25px));
}
}
@media (max-width: 480px) {
.uia-timeline__container,
[data-uia-timeline-skin="2"] .uia-timeline__container,
[data-uia-timeline-skin="3"] .uia-timeline__container,
[data-uia-timeline-skin="4"] .uia-timeline__container,
[data-uia-timeline-skin="5"] .uia-timeline__container {
padding-left: 15px;
padding-right: 15px;
}
[data-uia-timeline-skin="2"] .uia-timeline__container {
padding-inline-start: calc(var(--_uia-timeline-space) + 15px);
padding-inline-end: 15px;
}
[data-uia-timeline-skin="2"] .uia-timeline__line {
inset-inline-start: calc(var(--_uia-timeline-dot-size) / 2 + 15px);
}
[data-uia-timeline-skin="3"] .uia-timeline__line {
inset-inline-start: 15px;
}
[data-uia-timeline-skin="4"] .uia-timeline__line {
inset-inline-start: calc(var(--_uia-timeline-year-size) / 2 + 15px);
}
[data-uia-timeline-skin="5"] .uia-timeline__container {
padding-inline-start: calc(var(--_uia-timeline-space) + 15px);
padding-inline-end: 15px;
}
[data-uia-timeline-skin="5"] .uia-timeline__line {
inset-inline-start: var(--uia-timeline-line-main-position, calc(var(--_uia-timeline-line-calculation) + 15px));
}
}
/*
=====
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: #10235e;
--uia-timeline-dot-color: #ffc32c;
--uia-timeline-arrow-color: #10235e;
--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: #10235e;
}
.ciyotalimelinepage {
margin: 0;
display: flex;
flex-direction: column;
color: #858585;
}
.ciyotayeartime {
font-weight: bold;
color: #ffc32c;
}
.page {
box-sizing: border-box;
width: 100%;
max-width: 100%;
padding: 0rem 50px 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 50px;
text-align: center;
}
.linktr__goal {
box-shadow: rgb(8 49 112 / 24%) 0 2px 8px 0;
}
@media (max-width: 768px) {
.page {
padding: 0rem 25px 3rem;
}
.linktr {
padding: 2rem 25px;
}
}
@media (max-width: 480px) {
.page {
padding: 0rem 15px 3rem;
}
.linktr {
padding: 2rem 15px;
}
}
/* timeline-ciyota-banners
============================= */
.timeline-ciyota-banners {
width: 100%;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
/* Prevents image overflow */
position: relative;
padding-left: 50px;
padding-right: 50px;
box-sizing: border-box;
}
/* 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 {
padding-left: 25px;
padding-right: 25px;
}
}
@media screen and (max-width: 480px) {
.timeline-ciyota-banners {
padding-left: 15px;
padding-right: 15px;
}
}
/*timeline Small images
=======================*/
.ciyotatimelineim-container {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 20px 50px;
box-sizing: border-box;
}
.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-container {
padding: 20px 25px;
}
.ciyotatimelineim-wrapper {
min-width: 100%;
}
.ciyotatimelineim-image {
height: 250px;
}
}
@media (max-width: 480px) {
.ciyotatimelineim-container {
padding: 20px 15px;
}
}
/*style mission short
=======================*/
.ciyotamission-short-container {
width: 100%;
max-width: 100%;
margin: 2rem auto;
padding-left: 50px;
padding-right: 50px;
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-left: 25px;
padding-right: 25px;
margin: 1rem auto;
}
.ciyotamission-short-section {
padding: 1.5rem;
}
}
@media screen and (max-width: 480px) {
.ciyotamission-short-container {
padding-left: 15px;
padding-right: 15px;
}
.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 {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0 50px;
box-sizing: border-box;
}
/* 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: 768px) {
.impactciyotasect-featured {
padding: 50px 0;
}
.impactciyotasect-featured .container {
padding: 0 25px;
}
.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;
}
}
@media (max-width: 480px) {
.impactciyotasect-featured .container {
padding: 0 15px;
}
}
/* 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 50px;
/* 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) {
.button-container {
padding: 16px 25px;
}
.moreaboutciyotabtn {
font-size: 18px;
/* Smaller font size for smaller screens */
padding: 10px 5%;
/* Adjust padding */
}
}
@media (max-width: 480px) {
.button-container {
padding: 16px 15px;
}
.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 {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 4rem 50px;
box-sizing: border-box;
}
.ourworks-title {
font-size: 2.5rem;
text-align: center;
margin-bottom: 1.5rem;
}
.ourworks-paragraph {
text-align: center;
max-width: 100%;
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 {
padding: 4rem 25px;
}
.ourworks-boxes {
flex-direction: column;
align-items: center;
}
.ourworks-box {
width: 100%;
}
}
@media (max-width: 480px) {
.ourworks {
padding: 4rem 15px;
}
}
/*CIYOTA PARTNERS SECTION
===========================*/
.ciyotapartners-section {
padding: 4rem 50px;
background: #ffffff;
width: 100%;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
box-sizing: border-box;
}
.ciyotapartners-header {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
}
.ciyotapartners-title {
font-size: 2.8rem;
font-weight: 700;
margin: 0;
text-align: center;
color: #10235e;
}
.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: #10235e;
max-width: 100%;
margin: 0 auto 3rem;
text-align: center;
}
.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 25px;
}
.ciyotapartners-title {
font-size: 2.5rem;
text-align: center;
color: #10235e;
}
.ciyotapartners-description {
font-size: 1.8rem;
text-align: center;
color: #10235e;
}
.ciyotapartners-logo {
width: 150px;
}
.ciyotapartners-logo img {
max-width: 130px;
max-height: 90px;
}
.ciyotapartners-divider {
display: none;
}
.ciyotapartners-divider2 {
display: none;
}
}
@media (max-width: 480px) {
.ciyotapartners-section {
padding: 3rem 15px;
}
}
/*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 50px;
width: 100%;
max-width: 100%;
margin: 0 auto;
box-sizing: border-box;
}
.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 {
padding: 20px 25px;
}
.ciyotareports-actions {
flex-direction: column;
align-items: stretch;
}
.ciyotareports-button {
width: 100%;
}
}
@media (max-width: 480px) {
.ciyotareports {
padding: 20px 15px;
}
}
/*CIYOTA impact dashboard
===========================*/
.ciyota-big-data-dash {
background-color: #ffffff;
padding: 0px;
}
.ciyota-big-data-dash-container {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding-left: 50px;
padding-right: 50px;
box-sizing: border-box;
}
.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-container {
padding-left: 25px;
padding-right: 25px;
}
.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;
}
}
@media (max-width: 480px) {
.ciyota-big-data-dash-container {
padding-left: 15px;
padding-right: 15px;
}
}
/*view for more impact button on home
=====================================*/
.impactformore {
text-align: center;
padding: 1px;
}
/*========================*/
/*Enrolment dashboard
========================*/
.dashboard-wrapper * {
box-sizing: border-box;
}
.dashboard-wrapper {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
min-height: 100vh;
line-height: 1.6;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.container {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 15px 50px;
box-sizing: border-box;
}
/* Header Section */
.dashboard-header {
background: #10235e;
border-radius: 12px;
padding: 30px 20px;
text-align: center;
font-size: 1.2em;
line-height: 1;
margin-bottom: 30px;
box-shadow: 0 8px 25px rgba(16, 35, 94, 0.3);
position: relative;
overflow: hidden;
width: 100%;
}
.dashboard-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: #ffc32c;
}
.dashboard-header h1 {
color: white;
font-size: 1.5em;
font-weight: 700;
margin-bottom: 15px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.datetime-display {
color: #ffc32c;
font-size: 1em;
opacity: 0.9;
margin-bottom: 20px;
}
.total-counter {
color: #ffc32c;
font-size: 4rem;
font-weight: 900;
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
letter-spacing: -2px;
}
/* Download Button */
.download-section {
display: flex;
justify-content: flex-end;
gap: 15px;
margin-bottom: 30px;
}
.download-btn {
background: #10235e;
color: #ffc32c;
border: 2px solid #ffc32c;
padding: 12px 20px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(16, 35, 94, 0.2);
}
.download-btn:hover {
background: #ffc32c;
color: #10235e;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(16, 35, 94, 0.3);
}
.download-btn svg {
width: 18px;
height: 18px;
}
/* Main Title */
.main-title {
text-align: center;
font-size: 2.5rem;
font-weight: 800;
color: #10235e;
margin-bottom: 40px;
padding-bottom: 15px;
border-bottom: 3px solid #ffc32c;
position: relative;
}
/* Program Sections */
.program-section {
background: white;
border-radius: 12px;
padding: 30px 20px;
margin-bottom: 30px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
border-left: 5px solid #10235e;
transition: transform 0.3s ease, box-shadow 0.3s ease;
page-break-inside: avoid;
}
.program-section:hover {
transform: translateY(-5px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}
.program-title {
font-size: 1.8rem;
font-weight: 700;
color: #10235e;
margin-bottom: 25px;
position: relative;
}
.program-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 50px;
height: 3px;
background: #ffc32c;
}
/* Cards Container */
.cards-container {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 30px;
}
.stats-card {
background: white;
border-radius: 12px;
padding: 25px 20px;
border: 1px solid #e2e8f0;
transition: transform 0.3s ease;
text-align: center;
}
.stats-card:hover {
transform: translateY(-3px);
}
.total-card {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
border-left: 4px solid #10235e;
}
.gender-card {
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
border-left: 4px solid #059669;
}
.nationality-card {
background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
border-left: 4px solid #ffc32c;
}
.card-icon {
width: 50px;
height: 50px;
margin: 0 auto 15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(16, 35, 94, 0.1);
color: #10235e;
}
.card-title {
font-size: 1.2rem;
font-weight: 600;
color: #10235e;
margin-bottom: 15px;
}
.card-number {
font-size: 2.5rem;
font-weight: 900;
color: #10235e;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.chart-container {
height: 280px;
margin-top: 15px;
position: relative;
}
/* Table Section */
.table-section {
margin-top: 30px;
}
.table-title {
font-size: 1.4rem;
font-weight: 600;
color: #10235e;
margin-bottom: 20px;
position: relative;
}
.table-title::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 40px;
height: 2px;
background: #ffc32c;
}
.table-wrapper {
overflow-x: auto;
overflow-y: hidden;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
border: 1px solid #e2e8f0;
}
.data-table {
width: 100%;
min-width: 600px;
border-collapse: collapse;
background: white;
}
.data-table th,
.data-table td {
padding: 15px 12px;
text-align: left;
border-bottom: 1px solid #e2e8f0;
}
.data-table th {
background: #10235e;
color: #ffc32c;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 0.85rem;
white-space: nowrap;
}
.data-table td {
font-weight: 500;
color: #374151;
}
.data-table tr:nth-child(even) {
background: #f9fafb;
}
.data-table tr:hover {
background: #f1f5f9;
}
.data-table td:first-child {
font-weight: 600;
}
/* Loading Animation */
.fade-in {
opacity: 0;
animation: fadeIn 0.5s ease-in-out forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
/* Tablet Styles */
@media (min-width: 768px) {
.container {
padding: 20px 25px;
}
.dashboard-header {
padding: 40px 30px;
}
.total-counter {
font-size: 5rem;
}
.main-title {
font-size: 2.8rem;
}
.program-section {
padding: 35px 25px;
}
.cards-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
}
.stats-card {
padding: 30px 25px;
}
.card-number {
font-size: 3rem;
}
}
/* Desktop Styles */
@media (min-width: 1024px) {
.container {
padding: 30px 50px;
}
.dashboard-header {
padding: 50px 40px;
}
.program-section {
padding: 40px 30px;
}
.cards-container {
grid-template-columns: 1fr 1fr 1fr;
gap: 30px;
}
.stats-card {
padding: 35px 30px;
}
}
/* Mobile Specific Adjustments */
@media (max-width: 767px) {
.container {
padding: 15px 25px;
}
.download-section {
flex-direction: column;
gap: 10px;
}
.dashboard-header h1 {
font-size: 1.2em;
line-height: 1.3;
}
.total-counter {
font-size: 3rem;
}
.main-title {
font-size: 2rem;
padding: 0 10px;
}
.program-title {
font-size: 1.5rem;
}
.card-icon {
width: 40px;
height: 40px;
}
.card-title {
font-size: 1.1rem;
}
.card-number {
font-size: 2rem;
}
.chart-container {
height: 250px;
}
.data-table th,
.data-table td {
padding: 12px 10px;
}
}
@media (max-width: 480px) {
.container {
padding: 15px 15px;
}
}
/* Print-Only Summary Table */
.print-summary {
display: none;
}
/* Enhanced Print Styles - Remove spacing issues causing empty pages */
@media print {
@page {
margin: 0.25in;
size: A4 portrait;
}
* {
-webkit-print-color-adjust: exact !important;
color-adjust: exact !important;
print-color-adjust: exact !important;
}
/* Hide everything by default */
body * {
visibility: hidden !important;
}
/* Show only specific elements for printing */
.print-only-header,
.print-only-header *,
.dashboard-header,
.dashboard-header *,
.program-section,
.program-section *,
.print-summary,
.print-summary *,
.table-section,
.table-section *,
.data-table,
.data-table * {
visibility: visible !important;
}
body {
background: white !important;
margin: 0 !important;
padding: 0 !important;
font-family: 'Times New Roman', Times, serif !important;
font-size: 1.3em !important;
line-height: 1.4 !important;
}
.dashboard-wrapper {
background: white !important;
min-height: auto !important;
font-size: 1.3em !important;
margin: 0 !important;
padding: 0 !important;
}
/* Hide all visual elements except tables */
.download-section {
visibility: hidden !important;
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.main-title,
.cards-container,
.chart-container,
.card-icon,
.stats-card,
.total-card,
.gender-card,
.nationality-card,
.program-title::after,
.table-title::after {
visibility: hidden !important;
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.container {
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
/* Print header styling - Focus on spacing issues */
.dashboard-header {
page-break-after: avoid !important;
box-shadow: none !important;
border: 2px solid #10235e !important;
background: white !important;
color: #10235e !important;
margin: 0 0 8px 0 !important;
padding: 8px 10px !important;
text-align: center !important;
border-radius: 0 !important;
width: 100% !important;
}
.dashboard-header h1 {
color: #10235e !important;
font-size: 1.3em !important;
margin: 0 0 4px 0 !important;
text-shadow: none !important;
font-weight: bold !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
}
.datetime-display {
color: #333 !important;
font-size: 0.9em !important;
margin: 2px 0 6px 0 !important;
opacity: 1 !important;
font-weight: 500 !important;
}
.total-counter {
color: #10235e !important;
font-size: 1.5em !important;
font-weight: bold !important;
margin: 0 !important;
text-shadow: none !important;
letter-spacing: normal !important;
border: 2px solid #10235e !important;
padding: 4px 8px !important;
display: inline-block !important;
border-radius: 3px !important;
}
/* Program sections styling - Remove problematic spacing */
.program-section {
page-break-inside: auto !important;
margin-bottom: 8px !important;
box-shadow: none !important;
border: 1px solid #10235e !important;
background: white !important;
padding: 6px !important;
border-radius: 0 !important;
transform: none !important;
width: 100% !important;
}
.program-title {
color: #10235e !important;
font-size: 1.2em !important;
font-weight: bold !important;
margin: 0 0 6px 0 !important;
border-bottom: 1px solid #10235e !important;
padding-bottom: 3px !important;
position: static !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
text-align: center !important;
}
/* Table section styling */
.table-section {
page-break-inside: avoid !important;
margin-top: 0 !important;
width: 100% !important;
}
.table-title {
visibility: hidden !important;
display: none !important;
height: 0 !important;
margin: 0 !important;
}
.table-wrapper {
border: none !important;
box-shadow: none !important;
overflow: visible !important;
border-radius: 0 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Data table styling - Readable size, remove spacing issues */
.data-table {
page-break-inside: auto !important;
border-collapse: collapse !important;
width: 100% !important;
font-size: 1.5em !important;
min-width: auto !important;
background: white !important;
margin: 0 !important;
border: 1px solid #333 !important;
}
.data-table th,
.data-table td {
border: 1px solid #333 !important;
padding: 3px 5px !important;
text-align: center !important;
background: white !important;
font-size: 0.9em !important;
line-height: 1.2 !important;
}
.data-table th {
background: #10235e !important;
color: white !important;
font-weight: bold !important;
font-size: 0.8em !important;
text-transform: uppercase !important;
letter-spacing: 0.2px !important;
white-space: nowrap !important;
padding: 4px 3px !important;
}
.data-table td {
color: #000 !important;
background: white !important;
font-weight: 500 !important;
font-size: 0.85em !important;
}
.data-table tr:nth-child(even) td {
background: #f8f8f8 !important;
}
.data-table tr:hover td {
background: inherit !important;
}
.data-table tr {
page-break-inside: avoid !important;
page-break-after: auto !important;
}
.data-table thead {
display: table-header-group !important;
}
.data-table td:first-child {
font-weight: bold !important;
text-align: left !important;
padding-left: 6px !important;
}
.data-table td strong {
font-weight: bold !important;
color: #10235e !important;
}
/* Print summary table - Remove spacing issues */
.print-summary {
visibility: visible !important;
display: block !important;
page-break-before: avoid !important;
margin-top: 10px !important;
width: 100% !important;
}
.print-summary h2 {
color: #10235e !important;
font-size: 1.5em !important;
text-align: center !important;
margin-bottom: 8px !important;
border-bottom: 2px solid #10235e !important;
padding-bottom: 4px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
font-weight: bold !important;
}
.print-summary .summary-table {
width: 100% !important;
border-collapse: collapse !important;
font-size: 1.2em !important;
border: 1px solid #333 !important;
}
.print-summary .summary-table th,
.print-summary .summary-table td {
border: 1px solid #333 !important;
padding: 4px 3px !important;
text-align: center !important;
font-size: 0.8em !important;
line-height: 1.2 !important;
}
.print-summary .summary-table th {
background: #10235e !important;
color: white !important;
font-weight: bold !important;
text-transform: uppercase !important;
letter-spacing: 0.2px !important;
font-size: 0.75em !important;
padding: 5px 3px !important;
}
.print-summary .summary-table td {
background: white !important;
color: #000 !important;
font-weight: 500 !important;
}
.print-summary .summary-table tr:nth-child(even) td {
background: #f8f8f8 !important;
}
.print-summary .summary-table td:first-child {
text-align: left !important;
font-weight: bold !important;
padding-left: 5px !important;
}
/* Total row styling in summary - WHITE TEXT */
.print-summary .summary-table tr:last-child td {
background: #10235e !important;
color: white !important;
font-weight: bold !important;
font-size: 0.85em !important;
text-transform: uppercase !important;
}
.print-summary .summary-table tr:last-child td strong {
color: white !important;
font-weight: bold !important;
}
/* Hide all animations and transitions */
.fade-in {
animation: none !important;
opacity: 1 !important;
}
/* Ensure no hover effects */
*:hover {
transform: none !important;
box-shadow: none !important;
}
/* Remove problematic page breaks that cause empty pages */
.program-section+.program-section {
margin-top: 6px !important;
}
/* Allow natural page breaks instead of forcing them */
.program-section {
page-break-inside: auto !important;
}
/* Let summary table flow naturally */
.print-summary {
page-break-before: auto !important;
}
/* Ensure proper text rendering */
* {
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !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: 100%;
margin: 0 auto;
padding: 2rem 50px;
display: flex;
gap: 2rem;
justify-content: space-between;
align-items: flex-start;
box-sizing: border-box;
}
.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;
padding: 2rem 25px;
}
.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 15px;
}
.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 50px;
background: linear-gradient( to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2));
z-index: 2;
box-sizing: border-box;
}
.breadcrumb-nav {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.5rem;
width: 100%;
max-width: 100%;
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 25px;
}
.breadcrumb-nav {
font-size: 0.75rem;
}
}
@media (max-width: 480px) {
.hero-container {
height: 250px;
}
.hero-title {
font-size: 1.75rem;
}
.breadcrumb-container {
padding: 0.75rem 15px;
}
}
/* CIYOTA Career page specific styles
=======================================*/
.careers-ciyota-hero {
position: relative;
height: 700px;
/* Updated from 400px to 700px */
width: 100%;
max-width: 100%;
/* Changed from 1920px to 100% */
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;
width: 100%;
max-width: 100%;
padding: 0 50px;
overflow-x: auto;
box-sizing: border-box;
}
/* 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;
}
.careers-ciyota-table-container {
padding: 0 25px;
}
}
@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;
}
.careers-ciyota-table-container {
padding: 0 15px;
}
}
/*Share vacancies to your social media
=======================================*/
.careers-ciyota-share-container {
width: 100%;
max-width: 100%;
margin: 2rem auto;
padding: 0 50px;
box-sizing: border-box;
}
.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-container {
padding: 0 25px;
}
.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-container {
padding: 0 15px;
}
.careers-ciyota-share-icons {
flex-direction: column;
gap: 0.75rem;
}
.share-button {
justify-content: center;
}
}
/* Search funtionality--
==========================*/
.careers-ciyota-search-container {
width: 100%;
max-width: 100%;
margin: 2rem auto 4rem auto;
/* Increased bottom margin */
padding: 0 50px;
position: relative;
/* Added for positioning context */
box-sizing: border-box;
}
.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;
padding: 0 25px;
}
.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;
padding: 0 15px;
}
.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 {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0 50px;
box-sizing: border-box;
}
.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) {
.container {
padding: 0 25px;
}
.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 15px;
}
.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 50px;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.ciyota-work-id-verification__container {
width: 100%;
max-width: 100%;
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 {
padding: 20px 25px;
}
.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;
}
}
@media (max-width: 480px) {
.ciyota-work-id-verification {
padding: 20px 15px;
}
}
/*uganda presentation
====================*/
.ciyota-where-we-work {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 20px 50px;
color: #333;
box-sizing: border-box;
}
.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: 100%;
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 {
padding: 20px 25px;
}
.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;
}
}
@media (max-width: 480px) {
.ciyota-where-we-work {
padding: 20px 15px;
}
}
/*CIYOTA ONLINE REPORT
========================*/
.online-ciyota-reports {
width: 100%;
max-width: 100%;
margin: 30px auto;
padding: 20px 50px;
box-sizing: border-box;
}
.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) {
.online-ciyota-reports {
padding: 20px 25px;
}
.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;
}
}
@media (max-width: 480px) {
.online-ciyota-reports {
padding: 20px 15px;
}
}
/*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 {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 2rem 50px;
box-sizing: border-box;
}
.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%;
}
}
@media (max-width: 768px) {
.imagedesc-ciyota {
padding: 2rem 25px;
}
}
@media (max-width: 480px) {
.imagedesc-ciyota {
padding: 2rem 15px;
}
}
/*OUR APPROACH
===============*/
.ciyota-approach-section {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 4rem 50px;
box-sizing: border-box;
}
.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: 100%;
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-section {
padding: 4rem 25px;
}
.ciyota-approach-title {
font-size: 2rem;
}
.ciyota-approach-subtitle {
font-size: 1.5rem;
}
.ciyota-approach-card {
padding: 1.5rem;
}
}
@media (max-width: 480px) {
.ciyota-approach-section {
padding: 4rem 15px;
}
}
/*main page partners
=====================*/
.ciyotapartners-logomain-page {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
padding: 1rem 50px;
width: 100%;
max-width: 100%;
margin: 0 auto;
background: white;
box-sizing: border-box;
}
.ciyotapartners-logomain-page .ciyotapartners-logomain-page-logo {
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
background: white;
width: 100%;
height: 180px;
}
.ciyotapartners-logomain-page .ciyotapartners-logomain-page-logo img {
max-width: 280px;
width: 100%;
height: 140px;
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 {
height: 160px;
}
.ciyotapartners-logomain-page .ciyotapartners-logomain-page-logo img {
max-width: 240px;
height: 120px;
}
}
@media (max-width: 992px) {
.ciyotapartners-logomain-page {
grid-template-columns: repeat(3, 1fr);
}
.ciyotapartners-logomain-page .ciyotapartners-logomain-page-logo {
height: 150px;
}
.ciyotapartners-logomain-page .ciyotapartners-logomain-page-logo img {
max-width: 220px;
height: 110px;
}
}
@media (max-width: 768px) {
.ciyotapartners-logomain-page {
grid-template-columns: repeat(2, 1fr);
gap: 0.8rem;
padding: 1rem 25px;
}
.ciyotapartners-logomain-page .ciyotapartners-logomain-page-logo {
height: 140px;
}
.ciyotapartners-logomain-page .ciyotapartners-logomain-page-logo img {
max-width: 200px;
height: 100px;
}
}
@media (max-width: 480px) {
.ciyotapartners-logomain-page {
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
padding: 0.5rem 15px;
}
.ciyotapartners-logomain-page .ciyotapartners-logomain-page-logo {
height: 120px;
padding: 0.5rem;
}
.ciyotapartners-logomain-page .ciyotapartners-logomain-page-logo img {
max-width: 180px;
height: 90px;
}
}
/*CIYOTA Sponsorship Program Section
====================================*/
/* Section specific styles */
.ciyota-sponsorship-program {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 2rem 50px;
box-sizing: border-box;
}
/* 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 {
padding: 2rem 25px;
}
.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-width: 480px) {
.ciyota-sponsorship-program {
padding: 2rem 15px;
}
}
@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 {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 20px 50px;
font-family: Arial, sans-serif;
box-sizing: border-box;
}
.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: 768px) {
.int-volunteer-to-ciyota-form {
padding: 20px 25px;
}
}
@media (max-width: 600px) {
.int-volunteer-to-ciyota-form {
padding: 20px 15px;
}
}
/*sponsorship head
===================*/
.sponsorship-kid-details-container {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 1.5rem 50px;
margin-bottom: 40px;
box-sizing: border-box;
}
.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-container {
padding: 1.5rem 25px;
}
.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-container {
padding: 1.5rem 15px;
}
.sponsorship-kid-details-grid {
display: flex;
flex-direction: column;
gap: 1rem;
}
.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: 100%;
max-width: 100%;
margin: 0 auto;
padding: 20px 50px;
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 {
padding: 20px 25px;
}
.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);
}
}
@media (max-width: 480px) {
.ciyota-timelineandgenesis {
padding: 20px 15px;
}
}
/*=======================================
======================================*/
/*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: 100%;
margin: 20px auto;
padding: 0 50px;
box-sizing: border-box;
}
.Alert-message-donation .alert-container {
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: 768px) {
.Alert-message-donation {
padding: 0 25px;
}
}
@media (max-width: 480px) {
.Alert-message-donation {
padding: 0 15px;
}
}
/*projects in uganda */
.ciyota-project-uganda-section {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0;
/* Remove padding from section */
box-sizing: border-box;
}
.ciyota-project-uganda-section .container {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 60px;
/* Add 60px padding to container instead */
box-sizing: border-box;
}
.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: 100%;
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 {
color: #10235e;
margin-bottom: 15px;
font-weight: 700;
line-height: 1.5;
}
.ciyota-project-uganda-description {
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 .container {
padding: 60px;
}
.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 .container {
padding: 60px;
}
.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 {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 20px 50px;
box-sizing: border-box;
}
.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-container {
padding: 20px 25px;
}
.ciyota-impact-meter-card {
width: calc(50% - 10px);
}
.ciyota-impact-meter-count {
font-size: 2rem;
}
}
@media (max-width: 480px) {
.ciyota-impact-meter-container {
padding: 20px 15px;
}
.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('/proxy/https/ciyota.org/assets/img/slider/bb-slider-pic2.png') center/cover no-repeat;
opacity: 0.1;
z-index: 0;
}
.our-program-learn-more-container {
width: 100%;
max-width: 100%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
padding: 0 50px;
box-sizing: border-box;
}
/* 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: 100%;
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('/proxy/https/ciyota.org/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('/proxy/https/ciyota.org/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-container {
padding: 0 25px;
}
.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-container {
padding: 0 15px;
}
.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 */
/*video frame
******************************* */
/*video frame
******************************* */
/* Video Section Styles */
.home-video-short-ciyota {
margin: 0;
padding: 0;
box-sizing: border-box;
width: 100vw;
margin-left: calc(-50vw + 50%);
background-color: #10235e;
position: relative;
overflow: hidden;
isolation: isolate;
margin-bottom: -40px;
min-height: 600px;
}
.home-video-short-ciyota::after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 10px;
background-color: #10235e;
z-index: 0;
}
.home-video-short-ciyota-container {
max-width: 100%;
margin: 0 auto;
position: relative;
z-index: 2;
padding: 80px 50px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
/* 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 20px 40px rgba(0, 0, 0, 0.3);
background: #ffffff;
transition: transform 0.5s ease;
}
.home-video-short-ciyota-video-wrapper:hover {
transform: scale(1.02);
box-shadow: 0 25px 50px 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;
color: #ffffff;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
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: #ffc32c;
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;
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;
}
/* Button wrapper styling */
.home-video-short-ciyota-button-wrapper {
margin-top: 10px;
}
/* Content styling */
.home-video-short-ciyota-content {
position: relative;
z-index: 2;
}
.home-video-short-ciyota-content p {
line-height: 1.6;
margin-bottom: 25px;
color: #ffffff;
opacity: 0;
transform: translateY(20px);
animation: home-video-short-ciyota-fade-in-up 1s ease 1.2s forwards;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
}
.home-video-short-ciyota-content p .amos-principle {
color: #ffc32c;
font-weight: 600;
}
/* Button styling */
.home-video-short-ciyota-btn,
.fourth-ciyota-hero-style-button,
.where-ciyota-works-country-link {
display: inline-block;
padding: 14px 32px;
background: #ffc32c;
color: #10235e;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
z-index: 1;
opacity: 0;
transform: translateY(20px);
animation: home-video-short-ciyota-fade-in-up 1s ease 1.4s forwards;
text-transform: uppercase;
letter-spacing: 1px;
}
.home-video-short-ciyota-btn::before,
.fourth-ciyota-hero-style-button::before,
.where-ciyota-works-country-link::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: #ffffff;
transition: width 0.4s ease;
z-index: -1;
}
.home-video-short-ciyota-btn:hover,
.fourth-ciyota-hero-style-button:hover,
.where-ciyota-works-country-link:hover {
color: #10235e !important;
}
.home-video-short-ciyota-btn:hover::before,
.fourth-ciyota-hero-style-button:hover::before,
.where-ciyota-works-country-link:hover::before {
width: 100%;
}
/* Floating Elements - Hidden */
.home-video-short-ciyota-floating-el {
display: none;
}
/* Interactive Mouse Effects */
.home-video-short-ciyota-parallax {
transition: transform 0.1s ease-out;
}
/* Animations */
@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-pulse {
0% {
opacity: 0.8;
transform: scaleX(1);
}
50% {
opacity: 1;
transform: scaleX(1.2);
}
100% {
opacity: 0.8;
transform: scaleX(1);
}
}
/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
.home-video-short-ciyota-container {
padding: 30px 20px;
flex-direction: column;
}
.home-video-short-ciyota-video-column,
.home-video-short-ciyota-content-column {
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 40px;
padding: 0;
}
.home-video-short-ciyota-video-title {
font-size: 2.5rem;
}
.home-video-short-ciyota-video-title::after {
left: 50%;
transform: translateX(-50%);
}
.home-video-short-ciyota-content {
max-width: 100%;
padding: 0;
text-align: left;
}
.home-video-short-ciyota-button-wrapper {
text-align: center;
margin-top: 10px;
}
}
@media screen and (max-width: 480px) {
.home-video-short-ciyota-container {
padding: 25px 15px;
}
.home-video-short-ciyota {
min-height: 500px;
}
.home-video-short-ciyota-video-title {
font-size: 1.2em;
}
.home-video-short-ciyota-content p {
font-size: 1em;
}
.home-video-short-ciyota-content-column {
padding: 0;
}
.home-video-short-ciyota-content {
max-width: 100%;
padding: 0;
}
}
@media screen and (max-width: 360px) {
.home-video-short-ciyota-container {
padding: 20px 10px;
}
}
@media screen and (max-width: 320px) {
.home-video-short-ciyota-container {
padding: 15px 8px;
}
}
/* Section-specific CSS for general-page-display-for-ciyota
===========================================================*/
.general-page-display-for-ciyota {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 20px 50px;
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: 5px;
}
.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: #10235e;
margin-bottom: 10px;
line-height: 1;
}
.general-page-display-for-ciyota-stat-label {
font-size: 1.5rem;
color: #10235e;
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: #10235e;
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: 768px) {
.general-page-display-for-ciyota {
padding: 20px 25px;
}
.general-page-display-for-ciyota-header h2 {
font-size: 2rem;
}
.general-page-display-for-ciyota-stat-item {
min-width: 150px;
}
}
@media (max-width: 480px) {
.general-page-display-for-ciyota {
padding: 20px 15px;
}
}
/* Secondary School Section Specific Styles
============================================*/
.secondaryschool-page-display-for-ciyota {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 5px 50px;
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: 5px;
}
.secondaryschool-page-display-for-ciyota-section-title {
color: #10235e;
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;
}
.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: #10235e;
margin-bottom: 10px;
font-weight: 600;
text-align: center;
}
.secondaryschool-page-display-for-ciyota-program-description {
text-align: center;
}
@media (max-width: 768px) {
.secondaryschool-page-display-for-ciyota {
padding: 5px 25px;
}
.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;
}
}
@media (max-width: 480px) {
.secondaryschool-page-display-for-ciyota {
padding: 5px 15px;
}
}
/* University Access Section Styling */
.university-access-for-ciyota-section {
padding: 60px 0;
background-color: #fff;
line-height: 1.6;
}
.university-access-for-ciyota-container {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0 50px;
}
.university-access-for-ciyota-header {
text-align: center;
margin-bottom: 40px;
}
.university-access-for-ciyota-header h2 {
font-size: 36px;
font-weight: 700;
color: #10235e;
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;
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: #ffc32c;
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: #10235e;
}
.university-access-for-ciyota-partners {
text-align: center;
margin-top: 30px;
}
.university-access-for-ciyota-partners h3 {
font-size: 1.5em;
color: #10235e;
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: 768px) {
.university-access-for-ciyota-container {
padding: 0 25px;
}
}
@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;
}
}
@media screen and (max-width: 480px) {
.university-access-for-ciyota-container {
padding: 0 15px;
}
}
/* Section-specific styles for inandouut-sport-for-ciyota */
.inandouut-sport-for-ciyota {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 20px 50px;
line-height: 1.6;
margin-bottom: 40px;
}
.inandouut-sport-for-ciyota-intro {
margin-bottom: 50px;
}
.inandouut-sport-for-ciyota-intro h2 {
margin-bottom: 20px;
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: 5px;
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: 20px;
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: 5px;
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 {
padding: 20px 25px;
}
.inandouut-sport-for-ciyota-card {
flex: 1 1 100%;
}
.inandouut-sport-for-ciyota-intro h2 {
font-size: 2rem;
}
}
@media (max-width: 480px) {
.inandouut-sport-for-ciyota {
padding: 20px 15px;
}
}
/* Section-specific styles for ciyota-community-uganda */
.ciyota-community-uganda {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 60px 50px;
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: #10235e;
position: relative;
padding-bottom: 15px;
}
.ciyota-community-uganda-content h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: #10235e;
}
.ciyota-community-uganda-content p {
margin-bottom: 15px;
color: #10235e;
}
.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 {
padding: 60px 25px;
}
.ciyota-community-uganda-title h2 {
font-size: 2rem;
}
.ciyota-community-uganda-image {
height: 400px;
}
.ciyota-community-uganda-content {
padding: 20px;
}
}
@media (max-width: 480px) {
.ciyota-community-uganda {
padding: 60px 15px;
}
}
/* 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 50px;
}
.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 50px 40px;
width: 100%;
max-width: 100%;
margin: 0 auto;
}
.ciyota-capacity-building-approach {
padding: 20px 0;
}
.ciyota-capacity-building-approach-title {
text-align: center;
margin-bottom: 50px;
color: #10235e;
}
.ciyota-capacity-building-methods {
width: 100%;
max-width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
padding: 0 50px;
}
.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: #10235e;
}
.ciyota-capacity-building-method-text {
margin: 0;
line-height: 1.7;
}
.ciyota-capacity-building-conclusion {
padding: 60px 50px;
width: 100%;
max-width: 100%;
margin: 0 auto;
text-align: center;
font-style: italic;
border-top: 1px solid #eee;
}
@media (max-width: 768px) {
.ciyota-capacity-building-header {
height: 350px;
}
.ciyota-capacity-building-header-overlay {
padding: 0 25px;
}
.ciyota-capacity-building-title {
font-size: 2rem;
}
.ciyota-capacity-building-subtitle {
font-size: 1.1rem;
}
.ciyota-capacity-building-intro {
padding: 30px 25px;
}
.ciyota-capacity-building-methods {
padding: 0 25px;
}
.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 25px;
}
}
@media (max-width: 480px) {
.ciyota-capacity-building-header-overlay {
padding: 0 15px;
}
.ciyota-capacity-building-intro {
padding: 30px 15px;
}
.ciyota-capacity-building-methods {
padding: 0 15px;
}
.ciyota-capacity-building-conclusion {
padding: 40px 15px;
}
}
/*button on about
===================*/
.crazy-button-about-section-imp {
width: 100%;
max-width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: -60px;
padding: 0 50px;
}
.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) {
.crazy-button-about-section-imp {
padding: 0 25px;
}
.enrollment-button {
padding: 15px 28px;
}
}
@media (max-width: 480px) {
.crazy-button-about-section-imp {
padding: 0 15px;
}
.enrollment-button {
padding: 12px 24px;
width: 100%;
text-align: center;
}
}
/*how it works
=================*/
.how-it-works-list {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 20px 50px;
font-family: inherit;
}
.how-it-works-list h2 {
text-align: center;
margin-bottom: 30px;
color: #10235e;
}
.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: #10235e;
}
.how-it-works-list .step-description {
color: #10235e;
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 {
padding: 20px 25px;
}
.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;
}
}
@media (max-width: 480px) {
.how-it-works-list {
padding: 20px 15px;
}
}
/* Section specific styles with enhanced button effects */
.button-our-approach-ciyota {
padding: 5px 50px;
text-align: center;
width: 100%;
max-width: 100%;
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 {
padding: 5px 25px;
}
.button-our-approach-ciyota-container {
flex-direction: column;
align-items: center;
}
.button-our-approach-ciyota-btn {
width: 80%;
max-width: 300px;
}
}
@media (max-width: 480px) {
.button-our-approach-ciyota {
padding: 5px 15px;
}
}
/* 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 50px;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
overflow: hidden;
border-radius: 0px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 100%;
}
.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;
width: 100%;
max-width: 100%;
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 {
padding: 4rem 25px;
}
.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 15px;
}
.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 50px;
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__content {
padding: 0 25px;
}
.careers-ciyota-hero-best__headline {
font-size: 3rem;
}
.careers-ciyota-hero-best__subheadline {
font-size: 1.2rem;
}
}
@media (max-width: 480px) {
.careers-ciyota-hero-best__content {
padding: 0 15px;
}
}
/*HEADER TEAM TITLE
-=========================*/
.team-section-ciyota-hero {
padding: 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: 100%;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0;
position: relative;
z-index: 2;
}
.team-section-ciyota-hero-content {
flex: 0 0 50%;
width: 50%;
padding: 60px 80px;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
}
.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: 100%;
}
.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: 0 0 50%;
width: 50%;
position: relative;
overflow: hidden;
}
.team-section-ciyota-hero-slideshow {
position: relative;
width: 100%;
height: auto;
}
@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 {
width: 100%;
height: auto;
display: block;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.8s ease-in-out;
pointer-events: none;
}
.team-section-ciyota-hero-img.active {
opacity: 1;
position: relative;
pointer-events: auto;
}
.team-section-ciyota-hero-controls {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
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: 40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: 20px;
}
.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;
}
.team-section-ciyota-hero-content {
padding: 40px 50px;
}
}
@media (max-width: 768px) {
.team-section-ciyota-hero {
padding: 0;
}
.team-section-ciyota-hero-container {
flex-direction: column;
}
.team-section-ciyota-hero-content {
flex: 1;
width: 100%;
padding: 60px 30px;
text-align: center;
}
.team-section-ciyota-hero-image {
flex: 1;
width: 100%;
}
.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;
}
}
@media (max-width: 480px) {
.team-section-ciyota-hero-content {
padding: 40px 20px;
}
}
/* SECTION DEVIDER FOR TEAM
==========================*/
.ciyota-divider-best-sec {
padding: 20px 0;
width: 100%;
}
.ciyota-divider-best-sec__container {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0 50px;
}
.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__content {
width: 100%;
max-width: 100%;
margin: 0 auto;
text-align: center;
margin-top: -40px;
padding: 20px;
}
.ciyota-divider-best-sec__description {
line-height: 1.6;
margin: 0;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.ciyota-divider-best-sec {
padding: 40px 0;
}
.ciyota-divider-best-sec__container {
padding: 0 25px;
}
.ciyota-divider-best-sec__header {
margin-bottom: 30px;
}
}
@media (max-width: 480px) {
.ciyota-divider-best-sec {
padding: 30px 0;
}
.ciyota-divider-best-sec__container {
padding: 0 15px;
}
.ciyota-divider-best-sec__title {
font-size: 24px;
}
}
/*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: #10235e;
--ciyota-secondary-color: #ffc32c;
--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: var(--ciyota-primary-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: var(--ciyota-primary-color);
font-weight: 500;
}
/* Accent Bar - REMOVED */
.ciyota-pop-up-boxwelcome-accent {
display: none;
}
/* Action Button */
.ciyota-pop-up-boxwelcome-btn {
display: inline-block;
background: var(--ciyota-primary-color);
color: var(--ciyota-secondary-color);
padding: 12px 24px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
margin-top: 15px;
transition: background 0.3s, color 0.3s, transform 0.2s;
border: none;
cursor: pointer;
box-shadow: 0 4px 15px rgba(16, 35, 94, 0.3);
}
.ciyota-pop-up-boxwelcome-btn a {
color: var(--ciyota-secondary-color);
text-decoration: none;
font-weight: bold;
transition: color 0.3s;
}
.ciyota-pop-up-boxwelcome-btn:hover {
background: var(--ciyota-secondary-color);
color: var(--ciyota-primary-color);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 195, 44, 0.4);
}
.ciyota-pop-up-boxwelcome-btn:hover a {
color: var(--ciyota-primary-color);
}
/* 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;
}
/*HERO SECTION FOR SPONSORSHIP
=================================*/
.sponsorship-hero-ciyota {
padding: 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: 100%;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0;
position: relative;
z-index: 2;
}
.sponsorship-hero-ciyota-image {
flex: 0 0 50%;
width: 50%;
position: relative;
overflow: hidden;
}
.sponsorship-hero-ciyota-slideshow {
position: relative;
width: 100%;
height: auto;
line-height: 0;
}
.sponsorship-hero-ciyota-img {
width: 100%;
height: auto;
display: block;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.8s ease-in-out;
pointer-events: none;
vertical-align: top;
}
.sponsorship-hero-ciyota-img.active {
opacity: 1;
position: relative;
pointer-events: auto;
}
.sponsorship-hero-ciyota-controls {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
z-index: 3;
}
.sponsorship-hero-ciyota-indicators {
display: flex;
gap: 8px;
}
.sponsorship-hero-ciyota-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: all 0.3s ease;
}
.sponsorship-hero-ciyota-indicator.active {
background-color: white;
transform: scale(1.2);
}
.sponsorship-hero-ciyota-control-prev,
.sponsorship-hero-ciyota-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;
}
.sponsorship-hero-ciyota-control-prev:hover,
.sponsorship-hero-ciyota-control-next:hover {
background-color: #ffc32c;
}
.sponsorship-hero-ciyota-content {
flex: 0 0 50%;
width: 50%;
padding: 60px 80px;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
}
.sponsorship-hero-ciyota-title {
margin: 0;
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;
}
@keyframes float {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-15px) rotate(5deg);
}
100% {
transform: translateY(0px) rotate(0deg);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Responsive adjustments */
@media (max-width: 968px) {
.sponsorship-hero-ciyota-title {
font-size: 2.5rem;
}
}
@media (max-width: 768px) {
.sponsorship-hero-ciyota {
padding: 0;
}
.sponsorship-hero-ciyota-container {
flex-direction: column;
}
.sponsorship-hero-ciyota-content {
flex: 1;
width: 100%;
padding: 60px 30px;
text-align: center;
}
.sponsorship-hero-ciyota-image {
flex: 1;
width: 100%;
}
.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;
}
}
@media (max-width: 480px) {
.sponsorship-hero-ciyota-content {
padding: 40px 20px;
}
}
/* 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 50px;
}
.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 50px;
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 .slide-content {
padding: 0 25px;
}
.big-hero-ciyota-section-home .slide-nav {
padding: 0 25px;
}
.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 .slide-content {
padding: 0 15px;
}
.big-hero-ciyota-section-home .slide-nav {
padding: 0 15px;
}
.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 50px;
overflow: hidden;
position: relative;
width: 100%;
background-color: #ffc32c;
}
.ciyota-sponsorship-testimonial__container {
width: 100%;
max-width: 100%;
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: #10235e;
-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: #10235e;
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: #FFFFFF;
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: #10235e;
font-style: italic;
padding: 0 2rem;
}
.ciyota-sponsorship-testimonial__content-text p::before {
content: '"';
font-size: 4rem;
color: #10235e;
position: absolute;
top: -20px;
left: 0;
font-family: Georgia, serif;
}
.ciyota-sponsorship-testimonial__content-text p::after {
content: '"';
font-size: 4rem;
color: #10235e;
position: absolute;
bottom: -40px;
right: 0;
font-family: Georgia, serif;
}
.ciyota-sponsorship-testimonial__content-text h3 {
font-size: 1em;
color: #79acf7;
margin-bottom: 0.5rem;
margin-top: 1.5rem;
}
.ciyota-sponsorship-testimonial__content-text h4 {
font-size: 0.9em;
color: #10235e;
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 50px;
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 {
padding: 4rem 25px;
}
.ciyota-sponsorship-testimonial__controls {
padding: 0 25px;
}
.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;
}
}
@media (max-width: 480px) {
.ciyota-sponsorship-testimonial {
padding: 4rem 15px;
}
.ciyota-sponsorship-testimonial__controls {
padding: 0 15px;
}
}
/* Logo section styles */
.rebranding-explanation-ciyota-logo {
width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 30px 0;
padding: 0 50px;
}
/* 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;
padding: 0 25px;
}
.rebranding-explanation-ciyota-logo-title {
font-size: 24px;
}
}
@media screen and (max-width: 480px) {
.rebranding-explanation-ciyota-logo {
margin: 15px 0;
padding: 0 15px;
}
.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 {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 20px 50px;
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;
width: 100%;
max-width: 100%;
margin: 0 auto;
line-height: 1.6;
text-align: justify;
}
/* Timeline items */
.ciyota-our-genesis-timeline {
position: relative;
width: 100%;
max-width: 100%;
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 {
padding: 20px 25px;
}
.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 {
padding: 20px 15px;
}
.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;
}
/* Slider container */
.fourth-ciyota-hero-style-slider {
position: relative;
width: 100%;
height: 600px;
}
/* Desktop slides */
.fourth-ciyota-hero-style-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
display: block;
z-index: 1;
}
.fourth-ciyota-hero-style-slide.active {
opacity: 1;
z-index: 2;
}
.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 */
}
/* Mobile slideshow - hidden on desktop */
.fourth-ciyota-hero-style-mobile-slideshow {
display: none;
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%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 1s ease-in-out;
z-index: 1;
}
.fourth-ciyota-hero-style-mobile-slide.active {
opacity: 1;
z-index: 2;
}
/* Content overlay */
.fourth-ciyota-hero-style-content {
position: absolute;
bottom: 150px;
left: 50px;
text-align: left;
z-index: 5;
width: calc(80% - 50px);
max-width: 800px;
background-color: rgba(16, 35, 94, 0.7);
padding: 20px;
border-radius: 4px;
color: white;
}
.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;
}
/* Button container */
.fourth-ciyota-hero-style-button-container {
position: absolute;
bottom: 80px;
left: 50px;
z-index: 5;
}
/* Button styling */
.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: all 0.3s ease;
border: none;
}
.fourth-ciyota-hero-style-button:hover {
background-color: #0B173E;
color: #ffc32c;
font-weight: bold;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(255, 195, 44, 0.3);
}
/* Navigation dots */
.fourth-ciyota-hero-style-slide-dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
gap: 10px;
}
.fourth-ciyota-hero-style-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
}
.fourth-ciyota-hero-style-dot.active {
background-color: #fff;
transform: scale(1.2);
}
.fourth-ciyota-hero-style-dot:hover {
background-color: rgba(255, 255, 255, 0.8);
transform: scale(1.1);
}
/* Dark overlay for better text readability */
.fourth-ciyota-hero-style::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 1;
}
/* Mobile Responsive */
@media (max-width: 768px) {
/* Hide desktop slideshow, show mobile version */
.fourth-ciyota-hero-style-slide {
display: none !important;
}
.fourth-ciyota-hero-style-mobile-slideshow {
display: block !important;
}
.fourth-ciyota-hero-style-slider {
height: 100vh;
max-height: 500px;
min-height: 350px;
background-color: #10235E;
}
.fourth-ciyota-hero-style-content {
bottom: auto;
top: 35%;
transform: translateY(-40%);
left: 25px;
width: calc(90% - 25px);
padding: 12px;
}
.fourth-ciyota-hero-style-button-container {
bottom: auto;
top: 75%;
left: 25px;
}
.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%;
transform: translateY(-35%);
}
.fourth-ciyota-hero-style-button-container {
top: 70%;
}
.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: 480px) {
.fourth-ciyota-hero-style-content {
top: 25%;
left: 15px;
width: calc(90% - 15px);
}
.fourth-ciyota-hero-style-button-container {
top: 65%;
left: 15px;
}
}
/* Very small devices */
@media (max-width: 375px) {
.fourth-ciyota-hero-style-content {
top: 25%;
}
.fourth-ciyota-hero-style-button-container {
top: 65%;
}
}
/* 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;
padding: 0 50px;
}
.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: 768px) {
.hero-pages-section-ciyota {
padding: 0 25px;
}
}
@media (max-width: 480px) {
.hero-pages-section-ciyota {
height: 30vh;
padding: 0 15px;
}
.hero-pages-section-ciyota .hero-title {
font-size: 3rem;
padding: 0 15px;
}
}
/* Hero Section Styles for Page scholarship only*/
.hero-pages-section-ciyota-scholarship {
position: relative;
height: 79vh;
min-height: 300px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-align: center;
padding: 0 50px;
}
.hero-pages-section-ciyota-scholarship .hero-bg-scholarship {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
}
.hero-pages-section-ciyota-scholarship .hero-bg-scholarship img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-pages-section-ciyota-scholarship .hero-title-scholarship {
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: 768px) {
.hero-pages-section-ciyota-scholarship {
padding: 0 25px;
}
}
@media (max-width: 480px) {
.hero-pages-section-ciyota-scholarship {
height: 30vh;
padding: 0 15px;
}
.hero-pages-section-ciyota-scholarship .hero-title-scholarship {
font-size: 3rem;
padding: 0 15px;
}
}
/* Report-Ciyota-Table Styles
==============================*/
.report-ciyota-table-section {
width: 100%;
max-width: 100%;
margin: 30px auto;
padding: 20px 50px;
}
.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: #10235e;
margin: 0;
}
.report-ciyota-table-search {
position: relative;
width: 100%;
max-width: 320px;
color: #ffc32c;
font-weight: 600;
}
.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;
table-layout: fixed;
/* Fixed layout for better column control */
}
.report-ciyota-table thead {
background-color: #ffc32c;
position: sticky;
top: 0;
z-index: 10;
}
.report-ciyota-table th {
font-weight: bold;
color: #10235e;
padding: 1rem 1.5rem;
border-bottom: 1px solid #e2e8f0;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Optimized column widths */
.report-ciyota-table th:nth-child(1),
.report-ciyota-table td:nth-child(1) {
width: 50%;
/* Report Name - 50% of table width */
}
.report-ciyota-table th:nth-child(2),
.report-ciyota-table td:nth-child(2) {
width: 18%;
/* Status - slightly bigger for readability */
}
.report-ciyota-table th:nth-child(3),
.report-ciyota-table td:nth-child(3) {
width: 12%;
/* Size - compact */
}
.report-ciyota-table th:nth-child(4),
.report-ciyota-table td:nth-child(4) {
width: 20%;
/* Action - adjusted to fit */
}
.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: #10235e;
overflow: hidden;
text-overflow: ellipsis;
}
.report-ciyota-table tr:last-child td {
border-bottom: none;
}
.report-ciyota-table-name {
font-weight: 500;
line-height: 1.4;
word-wrap: break-word;
/* Allow title to wrap to multiple lines */
white-space: normal;
}
.report-ciyota-table-date {
color: #10235e;
white-space: nowrap;
}
.report-ciyota-table-status {
white-space: nowrap;
}
.report-ciyota-table-size {
color: #10235e;
white-space: nowrap;
font-weight: 500;
text-align: center;
}
.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);
width: 100%;
justify-content: center;
text-decoration: none;
}
.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-section {
padding: 20px 25px;
}
.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-pagination {
flex-direction: column;
align-items: flex-start;
}
/* Adjust column widths for tablet */
.report-ciyota-table th:nth-child(1),
.report-ciyota-table td:nth-child(1) {
width: 45%;
/* Slightly less space on tablet */
}
.report-ciyota-table th:nth-child(2),
.report-ciyota-table td:nth-child(2) {
width: 20%;
/* Status - more space on tablet */
}
.report-ciyota-table th:nth-child(4),
.report-ciyota-table td:nth-child(4) {
width: 23%;
/* More space for action button */
}
}
@media (max-width: 640px) {
.report-ciyota-table {
display: block;
table-layout: auto;
/* Reset table layout for mobile */
}
.report-ciyota-table thead {
display: none;
}
.report-ciyota-table tbody {
display: block;
}
.report-ciyota-table tr {
display: block;
margin-bottom: 1.5rem;
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
padding: 0;
/* Remove padding, we'll add it to individual elements */
width: auto;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
}
.report-ciyota-table tr:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transform: translateY(-1px);
}
.report-ciyota-table td {
display: block;
padding: 0;
border-bottom: none;
text-align: left;
width: auto;
overflow: visible;
text-overflow: unset;
}
/* Hide Status and Size columns on mobile */
.report-ciyota-table td[data-label="Status"],
.report-ciyota-table td[data-label="Size"] {
display: none !important;
}
/* Report Name - 100% width with 50px padding */
.report-ciyota-table td[data-label="Report Name"] {
width: 100%;
padding: 50px;
margin: 0;
font-weight: 600;
color: #10235e;
line-height: 1.4;
text-align: center;
background: linear-gradient(135deg, rgba(255, 195, 44, 0.05) 0%, rgba(16, 35, 94, 0.02) 100%);
border-bottom: 1px solid #f1f5f9;
}
/* Action button - centered and well organized */
.report-ciyota-table td[data-label="Action"] {
width: 100%;
padding: 30px 50px;
margin: 0;
text-align: center;
background: #fafbfc;
}
.report-ciyota-table td:before {
display: none;
}
.report-ciyota-table-name {
max-width: none;
font-weight: 600;
white-space: normal;
word-wrap: break-word;
}
.report-ciyota-table-view-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 30px;
font-weight: 600;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(11, 23, 62, 0.15);
transition: all 0.3s ease;
width: auto;
/* Not full width, just centered */
min-width: 180px;
}
.report-ciyota-table-view-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 195, 44, 0.3);
}
}
@media (max-width: 480px) {
.report-ciyota-table-section {
padding: 20px 15px;
}
.report-ciyota-table tr {
margin-bottom: 1.25rem;
}
/* Report Name with 50px padding on smaller screens becomes 30px */
.report-ciyota-table td[data-label="Report Name"] {
padding: 30px;
}
/* Action button section with adjusted padding */
.report-ciyota-table td[data-label="Action"] {
padding: 25px 30px;
}
.report-ciyota-table-view-btn {
padding: 12px 25px;
min-width: 160px;
}
}
@media (max-width: 360px) {
.report-ciyota-table-section {
padding: 15px 10px;
}
.report-ciyota-table tr {
margin-bottom: 1rem;
}
/* Report Name with reduced padding for very small screens */
.report-ciyota-table td[data-label="Report Name"] {
padding: 20px;
}
/* Action button section with reduced padding */
.report-ciyota-table td[data-label="Action"] {
padding: 20px;
}
.report-ciyota-table-view-btn {
padding: 10px 20px;
min-width: 140px;
}
}
/* Desktop optimization for better title display */
@media (min-width: 1200px) {
.report-ciyota-table th:nth-child(1),
.report-ciyota-table td:nth-child(1) {
width: 55%;
/* Even more space for titles on large screens */
}
.report-ciyota-table th:nth-child(2),
.report-ciyota-table td:nth-child(2) {
width: 15%;
/* Status - adequate space */
}
.report-ciyota-table th:nth-child(3),
.report-ciyota-table td:nth-child(3) {
width: 10%;
/* Size */
}
.report-ciyota-table th:nth-child(4),
.report-ciyota-table td:nth-child(4) {
width: 20%;
/* Action */
}
}
/*DONATION NEW STYLE - IMPROVED VERSION
============================*/
.ciyota-donation-section-pro {
width: 100%;
max-width: 100%;
margin: 20px auto;
padding: 40px 50px;
background: white;
position: relative;
overflow: hidden;
}
/* Currency symbols background decoration */
.ciyota-donation-section-pro::before {
content: "$ € £ ¥ ₣ CHF $ € £ ¥ ₣ CHF $ € £ ¥ ₣ CHF $ € £ ¥ ₣ CHF $ € £ ¥ ₣ CHF $ € £ ¥ ₣ CHF $ € £ ¥ ₣ CHF $ € £ ¥ ₣ CHF $ € £ ¥ ₣ CHF $ € £ ¥ ₣ CHF $ € £ ¥ ₣ CHF $ € £ ¥ ₣ CHF";
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
font-size: 3.5em;
color: rgba(16, 35, 94, 0.08);
line-height: 1.5;
word-spacing: 25px;
letter-spacing: 20px;
pointer-events: none;
z-index: 0;
display: flex;
flex-wrap: wrap;
align-content: space-around;
padding: 20px;
font-weight: bold;
}
.ciyota-donation-section-pro::after {
content: "KD ₦ UGX FC $ € £ ¥ CHF KD ₦ UGX FC $ € £ ¥ CHF KD ₦ UGX FC $ € £ ¥ CHF KD ₦ UGX FC $ € £ ¥ CHF KD ₦ UGX FC $ € £ ¥ CHF KD ₦ UGX FC $ € £ ¥ CHF KD ₦ UGX FC $ € £ ¥ CHF KD ₦ UGX FC $ € £ ¥ CHF KD ₦ UGX FC $ € £ ¥ CHF";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 4em;
color: rgba(255, 195, 44, 0.09);
line-height: 1.6;
word-spacing: 30px;
letter-spacing: 25px;
pointer-events: none;
z-index: 0;
display: flex;
flex-wrap: wrap;
align-content: space-around;
padding: 30px;
font-weight: bold;
transform: rotate(-3deg);
}
/* Ensure content stays above background */
.ciyota-donation-section-pro>* {
position: relative;
z-index: 1;
}
.ciyota-donation-section-pro-title {
text-align: center;
margin-bottom: 3rem;
position: relative;
}
.ciyota-donation-main-cta {
font-size: 2em;
font-weight: 700;
color: #10235E;
margin: 0;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Cards Container */
.ciyota-donation-section-pro-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
padding: 60px 20px 20px;
}
/* Individual Cards - Enhanced */
.ciyota-donation-section-pro-card {
background: white;
border-radius: 16px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid #f0f0f0;
overflow: visible;
position: relative;
margin-top: 0;
transform: scale(1);
}
.ciyota-donation-section-pro-card::before {
content: "↓";
position: absolute;
top: -45px;
left: 50%;
transform: translateX(-50%);
font-size: 2.5em;
color: #ffc32c;
animation: arrowBounceDown 1.5s ease-in-out infinite;
z-index: 10;
transition: all 0.3s ease;
}
@keyframes arrowBounceDown {
0%,
100% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(8px);
}
}
.ciyota-donation-section-pro-card::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 16px;
background: rgba(255, 195, 44, 0.15);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 0;
}
.ciyota-donation-section-pro-card:hover::after {
opacity: 1;
}
/* Hover effect - Zoom in the hovered card */
.ciyota-donation-section-pro-card:hover {
transform: scale(1.15);
box-shadow: 0 8px 25px rgba(16, 35, 94, 0.25);
border-color: #ffc32c;
z-index: 100;
}
.ciyota-donation-section-pro-card:hover::before {
font-size: 3em;
top: -50px;
}
/* Shrink other cards when one is hovered */
.ciyota-donation-section-pro-container:has(.ciyota-donation-section-pro-card:hover) .ciyota-donation-section-pro-card:not(:hover) {
transform: scale(0.90);
opacity: 0.6;
filter: brightness(0.85);
}
.ciyota-donation-section-pro-card.active {
border-color: #ffc32c;
border-width: 4px;
box-shadow: 0 8px 25px rgba(255, 195, 44, 0.4);
background: #10235e;
color: white;
transform: scale(1.15);
z-index: 100;
}
.ciyota-donation-section-pro-card.active::before {
color: #ffc32c;
font-size: 3em;
top: -50px;
}
.ciyota-donation-section-pro-card.active::after {
width: 0;
height: 0;
}
/* Keep other cards small when one is active */
.ciyota-donation-section-pro-container:has(.ciyota-donation-section-pro-card.active) .ciyota-donation-section-pro-card:not(.active) {
transform: scale(0.90);
opacity: 0.6;
filter: brightness(0.85);
}
/* Change arrow to text for non-active cards when one is active */
.ciyota-donation-section-pro-container:has(.ciyota-donation-section-pro-card.active) .ciyota-donation-section-pro-card:not(.active)::before {
content: "You can select this location as well!";
font-size: 0.9em;
width: 200px;
text-align: center;
left: 50%;
transform: translateX(-50%);
top: -40px;
animation: none;
font-weight: 600;
line-height: 1.2;
}
.ciyota-donation-section-pro-card-header {
padding: 2.5rem 2rem;
text-align: center;
position: relative;
z-index: 1;
}
.ciyota-donation-section-pro-flag {
width: 90px;
height: 65px;
margin: 0 auto 1.5rem auto;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
border: 3px solid white;
transition: all 0.3s ease;
}
.ciyota-donation-section-pro-card:hover .ciyota-donation-section-pro-flag {
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.ciyota-donation-section-pro-card.active .ciyota-donation-section-pro-flag {
border-color: #ffc32c;
}
.ciyota-donation-section-pro-flag img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ciyota-donation-section-pro-card-title {
font-weight: bold;
color: #10235E;
margin: 0 0 0.5rem 0;
font-size: 1.3em;
transition: color 0.3s ease;
}
.ciyota-donation-section-pro-card.active .ciyota-donation-section-pro-card-title {
color: white;
}
.ciyota-donation-section-pro-card-subtitle {
color: #10235E;
margin: 0 0 1rem 0;
font-size: 1em;
transition: color 0.3s ease;
opacity: 0.8;
}
.ciyota-donation-section-pro-card.active .ciyota-donation-section-pro-card-subtitle {
color: rgba(255, 255, 255, 0.9);
}
/* New: Clear Call-to-Action on Cards */
.ciyota-card-cta {
display: inline-block;
background: #ffc32c;
color: #10235E;
padding: 0.75rem 2rem;
border-radius: 30px;
font-weight: bold;
font-size: 1em;
margin-top: 1rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(255, 195, 44, 0.3);
position: relative;
z-index: 1;
}
.ciyota-donation-section-pro-card:hover .ciyota-card-cta {
background: #10235E;
color: white;
transform: scale(1.08);
box-shadow: 0 6px 20px rgba(16, 35, 94, 0.4);
}
.ciyota-donation-section-pro-card.active .ciyota-card-cta {
background: white;
color: #10235E;
}
/* Tab Content Section */
.ciyota-donation-section-pro-tab-container {
background: white;
border-radius: 16px;
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
margin-top: 3rem;
overflow: hidden;
display: none;
animation: ciyotaTabFadeIn 0.5s ease;
border: 3px solid #ffc32c;
}
.ciyota-donation-section-pro-tab-container.show {
display: block;
}
@keyframes ciyotaTabFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.ciyota-donation-section-pro-tab-header {
background: #10235E;
color: white;
padding: 1.8rem 2rem;
display: flex;
align-items: center;
gap: 1rem;
}
.ciyota-donation-section-pro-tab-flag {
width: 70px;
height: 50px;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
border: 2px solid #ffc32c;
}
.ciyota-donation-section-pro-tab-flag img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ciyota-donation-section-pro-tab-title h3 {
margin: 0;
color: #FFFFFF;
font-size: 1.6em;
}
.ciyota-donation-section-pro-tab-content {
padding: 2.5rem;
}
.ciyota-donation-section-pro-tab-content h4 {
color: #10235E;
margin-bottom: 1rem;
font-size: 1.4em;
display: flex;
align-items: center;
gap: 0.5rem;
}
.ciyota-donation-section-pro-tab-content p {
color: #10235E;
line-height: 1.8;
margin-bottom: 1rem;
font-size: 1.05em;
}
/* Enhanced Lists */
.payment-methods-list,
.donation-steps {
margin: 1.5rem 0;
padding-left: 1.5rem;
}
.payment-methods-list li,
.donation-steps li {
margin-bottom: 0.8rem;
line-height: 1.6;
color: #10235E;
font-size: 1.05em;
}
.donation-steps {
list-style: none;
counter-reset: step-counter;
padding-left: 0;
}
.donation-steps li {
counter-increment: step-counter;
position: relative;
padding-left: 3rem;
margin-bottom: 1rem;
}
.donation-steps li::before {
content: counter(step-counter);
position: absolute;
left: 0;
top: 0;
background: #10235E;
color: white;
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
box-shadow: 0 2px 8px rgba(16, 35, 94, 0.3);
border: 3px solid #ffc32c;
}
/* Highlight boxes - Enhanced */
.donation-country-details {
background: rgba(255, 195, 44, 0.12);
padding: 1.5rem 2rem;
border-radius: 12px;
margin: 1.5rem 0;
font-weight: 500;
line-height: 1.8;
font-size: 1.05em;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
border: 2px solid rgba(255, 195, 44, 0.3);
color: #10235E;
}
.tax-receipt-note {
background: rgba(16, 35, 94, 0.08);
padding: 1.2rem 1.5rem;
border-radius: 10px;
font-style: italic;
margin: 1rem 0;
border: 2px solid rgba(16, 35, 94, 0.2);
color: #10235E;
}
.ciyota-bank-details {
color: #10235E;
font-weight: bold;
}
/* Enhanced Buttons */
.ciyota-donation-section-pro-button {
display: inline-block;
background: #10235E;
color: #ffffff;
padding: 1.1rem 2.8rem;
border-radius: 35px;
text-decoration: none;
font-weight: bold;
font-size: 1.1em;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
margin: 1rem 0.5rem 0.5rem 0;
text-align: center;
box-shadow: 0 6px 20px rgba(16, 35, 94, 0.3);
border: 2px solid #10235E;
position: relative;
overflow: hidden;
}
.ciyota-donation-section-pro-button::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 195, 44, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.ciyota-donation-section-pro-button:hover::before {
width: 400px;
height: 400px;
}
.ciyota-donation-section-pro-button:hover {
background: #ffc32c;
color: #10235e;
border-color: #ffc32c;
transform: translateY(-4px);
box-shadow: 0 10px 30px rgba(255, 195, 44, 0.5);
}
.ciyota-donation-section-pro-button span {
position: relative;
z-index: 1;
}
.ciyota-primary-button {
animation: subtlePulse 2s ease-in-out infinite;
}
@keyframes subtlePulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
}
/* 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);
backdrop-filter: blur(5px);
}
.ciyota-donation-section-pro-modal-content {
background-color: white;
margin: 5% auto;
padding: 2rem;
width: 85%;
max-width: 700px;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
position: relative;
animation: ciyotaModalFadeIn 0.4s;
}
@keyframes ciyotaModalFadeIn {
from {
opacity: 0;
transform: translateY(-30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.ciyota-donation-section-pro-close {
position: absolute;
top: 1rem;
right: 1.5rem;
color: #ff0000;
font-size: 2em;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 0, 0, 0.1);
}
.ciyota-donation-section-pro-close:hover {
color: white;
background: #ff0000;
transform: rotate(90deg);
}
.ciyota-donation-section-pro-modal-header {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
border-bottom: 3px solid #ffc32c;
padding-bottom: 1.5rem;
}
.ciyota-donation-section-pro-modal-flag {
width: 80px;
height: 60px;
margin-right: 1rem;
border-radius: 6px;
overflow: hidden;
border: 2px solid #e0e0e0;
}
.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 {
color: #10235E;
margin-bottom: 0.3rem;
font-size: 1.5em;
}
.ciyota-donation-section-pro-form-placeholder {
background-color: #f9f9f9;
padding: 2rem;
border-radius: 8px;
text-align: center;
border: 2px dashed #ddd;
color: #10235E;
}
/* Enhanced responsive adjustments for all phone sizes */
@media screen and (max-width: 768px) {
.ciyota-donation-section-pro {
padding: 30px 20px;
}
.ciyota-donation-main-cta {
font-size: 1.5em;
letter-spacing: 0.5px;
}
.ciyota-donation-section-pro-card::before {
font-size: 2em;
top: -35px;
}
.ciyota-donation-section-pro-container {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.ciyota-donation-section-pro-tab-content {
padding: 2rem 1.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-tab-header {
padding: 1.5rem;
flex-direction: column;
text-align: center;
gap: 1rem;
}
.ciyota-donation-section-pro-button {
padding: 0.9rem 2rem;
}
}
@media screen and (max-width: 480px) {
.ciyota-donation-section-pro {
padding: 25px 15px;
}
.ciyota-donation-main-cta {
font-size: 1.3em;
letter-spacing: 0.5px;
}
.ciyota-donation-section-pro-card::before {
font-size: 1.8em;
top: -30px;
}
.ciyota-donation-section-pro-card-header {
padding: 1.5rem;
}
.ciyota-donation-section-pro-tab-content {
padding: 1.5rem;
}
.donation-country-details {
padding: 1.2rem;
}
.ciyota-donation-section-pro-button {
padding: 0.8rem 1.5rem;
width: 100%;
margin: 0.5rem 0;
font-size: 1em;
}
.donation-steps li {
padding-left: 2.5rem;
font-size: 1em;
}
.donation-steps li::before {
width: 1.8rem;
height: 1.8rem;
font-size: 0.9em;
}
}
/* Extra small phones */
@media screen and (max-width: 360px) {
.ciyota-donation-section-pro {
padding: 20px 12px;
}
.ciyota-donation-main-cta {
font-size: 1.15em;
letter-spacing: 0.3px;
}
.ciyota-donation-section-pro-card::before {
font-size: 1.6em;
top: -28px;
}
.ciyota-donation-section-pro-container {
gap: 1rem;
}
.ciyota-donation-section-pro-card-header {
padding: 1.2rem;
}
.ciyota-donation-section-pro-tab-header {
padding: 1.2rem;
}
.ciyota-donation-section-pro-tab-content {
padding: 1.2rem;
}
.ciyota-donation-section-pro-modal-content {
width: 98%;
margin: 3% auto;
padding: 1rem;
}
.donation-country-details {
padding: 1rem;
font-size: 0.95em;
}
.ciyota-donation-section-pro-flag {
width: 70px;
height: 50px;
}
.ciyota-donation-section-pro-tab-flag {
width: 60px;
height: 45px;
}
}
/* Very small screens */
@media screen and (max-width: 320px) {
.ciyota-donation-section-pro {
padding: 15px 10px;
}
.ciyota-donation-main-cta {
font-size: 1.05em;
letter-spacing: 0.2px;
}
.ciyota-donation-section-pro-card::before {
font-size: 1.5em;
top: -25px;
}
.ciyota-donation-section-pro-card-header {
padding: 1rem;
}
.ciyota-donation-section-pro-tab-content {
padding: 1rem;
}
.ciyota-donation-section-pro-button {
padding: 0.7rem 1.2rem;
font-size: 0.95em;
}
.ciyota-donation-impact {
font-size: 0.95em;
padding: 1rem;
}
}
/* Landscape orientation for small devices */
@media screen and (max-height: 500px) and (orientation: landscape) {
.ciyota-donation-section-pro {
padding: 20px 15px;
}
.ciyota-donation-section-pro-modal-content {
margin: 2% auto;
max-height: 95vh;
overflow-y: auto;
}
.ciyota-donation-section-pro-tab-header {
padding: 1rem;
}
.ciyota-donation-section-pro-tab-content {
padding: 1.5rem;
}
}
/* Accessibility improvements */
.ciyota-donation-section-pro-card:focus,
.ciyota-donation-section-pro-button:focus {
outline: 3px solid #ffc32c;
outline-offset: 2px;
}
/* Print styles */
@media print {
.ciyota-donation-section-pro-card,
.ciyota-donation-section-pro-button {
box-shadow: none;
border: 1px solid #000;
}
}
/*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 50px;
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: 100%;
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 25px;
}
.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;
}
}
@media (max-width: 480px) {
.ciyota-start-your-chapter {
padding: 40px 15px;
}
}
/*events page
==============*/
.ciyota-events-section-ready-container {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 2rem 50px;
}
/* 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;
}
}
@media (max-width: 768px) {
.ciyota-events-section-ready-container {
padding: 2rem 25px;
}
}
@media (max-width: 480px) {
.ciyota-events-section-ready-container {
padding: 2rem 15px;
}
}
/*event 2nd page
==================*/
.ciyota-events-section-ready-container {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 2rem 50px;
}
/* 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 {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 20px 50px;
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: 20px 25px;
}
.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;
}
}
@media screen and (max-width: 480px) {
.form-ciyota-start-chapter {
padding: 20px 15px;
}
}
/* 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
============================*/
/* Impact Statistics Section Styles */
/* Impact Statistics Section Styles */
/* Main Impact Section */
.ciyota-general-impact-statistics-container-impact-sect {
margin: 0;
padding: 0;
box-sizing: border-box;
background: #ffffff;
padding: 60px 50px 20px;
text-align: center;
position: relative;
width: 100%;
max-width: 100%;
}
.ciyota-general-impact-statistics-total-impact-sect {
max-width: 100%;
margin: 0 auto;
position: relative;
z-index: 1;
}
.ciyota-general-impact-statistics-total-impact-sect h2 {
color: #10235e;
font-weight: 800;
margin-bottom: 40px;
line-height: 1.2;
letter-spacing: -0.5px;
}
.impact-statistics {
margin: 40px 0;
}
.ciyota-general-impact-statistics-number-large {
font-size: 4em;
font-weight: 900;
color: #79acf7;
margin-bottom: 20px;
letter-spacing: -2px;
}
.ciyota-general-impact-statistics-total-impact-sect h1 {
font-size: 1.2em;
color: #79acf7;
margin-bottom: 30px;
font-weight: 700;
}
.ciyota-general-impact-statistics-total-impact-sect p {
font-size: 1.2em;
color: #10235e;
font-weight: 600;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
}
/* Statistics Grid Container */
.ciyota-general-impact-statistics-container {
margin: 0;
padding: 0;
box-sizing: border-box;
padding: 20px 50px 60px;
background: #ffffff;
width: 100%;
max-width: 100%;
}
.ciyota-general-impact-statistics-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
width: 100%;
max-width: 100%;
margin: 0 auto;
}
/* Individual Cards */
.ciyota-general-impact-statistics-card {
background: inherit;
border-color: inherit;
border-radius: 20px;
padding: 35px 30px 30px;
text-align: center;
border: 1px solid;
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.04), 0 2px 10px rgba(0, 0, 0, 0.02);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: visible;
}
.ciyota-general-impact-statistics-card::before {
content: '';
position: absolute;
top: 30px;
left: 0;
right: 0;
bottom: 0;
background: #ffffff;
border-radius: 0 0 20px 20px;
z-index: 1;
}
.ciyota-general-impact-statistics-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 8px 25px rgba(0, 0, 0, 0.04), 0 4px 15px rgba(0, 0, 0, 0.02);
}
/* Icon Container */
.ciyota-general-impact-statistics-icon-container {
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
background: rgba(255, 255, 255, 0.2);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 2;
}
.ciyota-general-impact-statistics-card:hover .ciyota-general-impact-statistics-icon-container {
transform: translateY(-3px);
}
/* Numbers */
.ciyota-general-impact-statistics-number {
font-size: 2.5em;
font-weight: 800;
margin-bottom: 20px;
line-height: 1;
letter-spacing: -1.5px;
transition: all 0.3s ease;
position: relative;
z-index: 2;
}
.ciyota-general-impact-statistics-card:hover .ciyota-general-impact-statistics-number {
transform: scale(1.05);
}
/* Titles */
.ciyota-general-impact-statistics-title {
font-size: 1.2em;
color: #10235e;
line-height: 1.5;
margin-bottom: 10px;
font-weight: 600;
transition: color 0.3s ease;
position: relative;
z-index: 2;
}
.ciyota-general-impact-statistics-card:hover .ciyota-general-impact-statistics-title {
color: #334155;
}
/* Animation enhancements */
.ciyota-general-impact-statistics-card {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.6s ease-out 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;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
.ciyota-general-impact-statistics-container-impact-sect {
padding: 30px 20px 15px;
}
.ciyota-general-impact-statistics-container {
padding: 15px 20px 30px;
}
.ciyota-general-impact-statistics-grid {
grid-template-columns: 1fr;
gap: 25px;
max-width: 400px;
}
.ciyota-general-impact-statistics-number-large {
font-size: 3em;
}
.ciyota-general-impact-statistics-icon-container {
width: 70px;
height: 70px;
margin-bottom: 25px;
}
.ciyota-general-impact-statistics-number {
font-size: 2em;
}
}
@media screen and (max-width: 480px) {
.ciyota-general-impact-statistics-container-impact-sect {
padding: 25px 15px 10px;
}
.ciyota-general-impact-statistics-container {
padding: 10px 15px 25px;
}
}
@media screen and (max-width: 360px) {
.ciyota-general-impact-statistics-container-impact-sect {
padding: 20px 10px 8px;
}
.ciyota-general-impact-statistics-container {
padding: 8px 10px 20px;
}
}
@media screen and (max-width: 320px) {
.ciyota-general-impact-statistics-container-impact-sect {
padding: 15px 8px 5px;
}
.ciyota-general-impact-statistics-container {
padding: 5px 8px 15px;
}
}
/* Timeline Animation Styles */
.impact-timeline-animation {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 30px;
font-weight: 700;
animation: fadeInScale 1s ease-out;
position: relative;
z-index: 2;
}
.timeline-year-static {
font-size: 2em;
color: #10235e;
font-weight: 900;
min-width: 120px;
text-align: center;
}
.timeline-arrow {
font-size: 3em;
color: #ffc32c;
font-weight: bold;
animation: slideRight 1.5s ease-out infinite;
}
.timeline-current-year {
font-size: 2em;
color: #10235e;
font-weight: 900;
min-width: 120px;
text-align: center;
transition: color 0.5s ease;
}
/* Confetti Container */
.flower-rain-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
z-index: 1;
}
.confetti-star {
position: absolute;
top: -50px;
animation: fall linear forwards;
z-index: 1;
font-weight: bold;
}
@keyframes fall {
to {
transform: translateY(100vh) rotate(720deg);
}
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes slideRight {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(10px);
}
}
/* Mobile responsiveness for timeline */
@media screen and (max-width: 768px) {
.impact-timeline-animation {
gap: 15px;
}
.timeline-year-static,
.timeline-current-year {
font-size: 1.5em;
min-width: 90px;
}
.timeline-arrow {
font-size: 2em;
}
}
@media screen and (max-width: 480px) {
.timeline-year-static,
.timeline-current-year {
font-size: 1.5em;
min-width: 80px;
}
.timeline-arrow {
font-size: 2em;
}
}
/*Ttile and paragraph section
=============================*/
/*Title and paragraph section
=============================*/
.ciyota-main-para-and-title-section {
margin: 0;
padding: 0;
box-sizing: border-box;
width: 100%;
padding: 60px 50px;
position: relative;
overflow: hidden;
}
.ciyota-main-para-and-title {
max-width: 100%;
margin: 0 auto;
position: relative;
z-index: 1;
color: #10235e;
line-height: 1.6;
box-sizing: border-box;
}
.ciyota-main-para-and-title-title {
color: #10235e;
font-size: 2em;
margin-bottom: 20px;
text-align: center;
font-weight: bold;
line-height: 1.2;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.ciyota-main-para-and-title-content {
color: #10235E;
}
.ciyota-main-para-and-title-highlight {
font-weight: 600;
}
/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
.ciyota-main-para-and-title-section {
padding: 30px 20px;
}
.ciyota-main-para-and-title-title {
font-size: 2rem;
margin-bottom: 1rem;
}
.ciyota-main-para-and-title-content {
font-size: none;
}
}
@media screen and (max-width: 480px) {
.ciyota-main-para-and-title-section {
padding: 25px 15px;
}
.ciyota-main-para-and-title-title {
font-size: 1.8rem;
margin-bottom: 0.85rem;
}
.ciyota-main-para-and-title-content {
font-size: none;
}
}
@media screen and (max-width: 360px) {
.ciyota-main-para-and-title-section {
padding: 20px 10px;
}
.ciyota-main-para-and-title-title {
font-size: 1.6rem;
margin-bottom: 0.8rem;
}
.ciyota-main-para-and-title-content {
font-size: 0.90em;
}
}
@media screen and (max-width: 320px) {
.ciyota-main-para-and-title-section {
padding: 15px 8px;
}
.ciyota-main-para-and-title-title {
font-size: 1.5rem;
margin-bottom: 0.75rem;
}
.ciyota-main-para-and-title-content {
font-size: 0.8em;
}
}
/*============================================================
TOP BAR – CIYOTA Version 2
(Careers & Reports removed | Language Picker added | Sponsor removed)
============================================================*/
/* ── Base ─────────────────────────────────────────────── */
.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 {
width: 100%;
max-width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
padding: 0 50px;
}
/* ── Left side ─────────────────────────────────────────── */
.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;
}
/* ── Right nav ─────────────────────────────────────────── */
.top-bar-ciyota-version2-nav {
display: flex;
align-items: center;
gap: 10px;
font-size: 0;
}
.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;
}
/* ── Donate button ─────────────────────────────────────── */
.top-bar-ciyota-version2-donate {
background: linear-gradient(135deg, #ffc32c 100%, #10235e 100%);
color: #fff !important;
padding: 9px 18px;
border-radius: 25px;
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;
flex-shrink: 0;
margin-left: 10px;
}
.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%);
}
/* Particles */
.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 1.0s 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 */
.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 }
}
/* ── Mobile ────────────────────────────────────────────── */
@media (max-width: 768px) {
.top-bar-ciyota-version2-container {
padding: 0 16px !important;
height: 50px !important;
flex-wrap: nowrap !important;
justify-content: space-between !important;
align-items: center !important;
gap: 0 !important;
}
.top-bar-ciyota-version2-left {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
align-items: center !important;
gap: 0 !important;
}
.top-bar-ciyota-version2-social {
display: flex !important;
gap: 16px !important;
}
.top-bar-ciyota-version2-social a {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
color: #ffffff !important;
font-size: 16px !important;
}
.top-bar-ciyota-version2-contact {
display: none !important;
}
.top-bar-ciyota-version2-nav {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: flex-end !important;
align-items: center !important;
gap: 6px !important;
font-size: 13px !important;
width: auto !important;
}
.top-bar-ciyota-version2-pipe {
display: none !important;
}
.top-bar-ciyota-version2-donate {
margin-left: 0 !important;
padding: 7px 14px !important;
font-size: 13px !important;
}
}
/* ============================================================
LANGUAGE PICKER
============================================================ */
.top-bar-ciyota-version2-lang {
position: relative;
display: inline-flex;
align-items: center;
}
.lang-toggle {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
color: #ffffff;
font-size: 14px;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 20px;
transition: all 0.3s ease;
white-space: nowrap;
line-height: 1;
}
.lang-toggle:hover,
.lang-toggle.open {
border-color: #ffc32c;
color: #ffc32c;
}
.lang-arrow {
font-size: 10px;
transition: transform 0.3s ease;
}
.lang-toggle.open .lang-arrow {
transform: rotate(180deg);
}
.lang-dropdown {
display: none;
position: absolute;
top: calc(100% + 10px);
right: 0;
left: auto;
transform: none;
background: #10235e;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 8px;
min-width: 135px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
z-index: 9999;
overflow: hidden;
}
.lang-dropdown.open {
display: block;
animation: langFadeIn 0.2s ease forwards;
}
@keyframes langFadeIn {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.lang-option {
display: flex !important;
align-items: center;
gap: 8px;
padding: 10px 14px;
color: #ffffff !important;
font-size: 14px !important;
font-weight: normal !important;
text-decoration: none;
transition: background 0.2s ease;
white-space: nowrap;
}
.lang-option:hover {
background: rgba(255, 195, 44, 0.15);
color: #ffc32c !important;
}
.lang-option.active {
color: #ffc32c !important;
font-weight: bold !important;
}
.lang-flag {
font-size: 16px;
line-height: 1;
}
/* ============================================================
RESPONSIVE
============================================================ */
/* Large tablets / small desktops */
@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;
}
.top-bar-ciyota-version2-donate {
padding: 8px 16px;
}
.top-bar-ciyota-version2-sponsor {
padding: 8px 16px;
}
}
/* Standard tablets / large phones */
@media (max-width: 768px) {
.top-bar-ciyota-version2-container {
height: auto;
padding: 10px 25px;
}
.top-bar-ciyota-version2-social {
gap: 15px;
}
.top-bar-ciyota-version2-social a {
font-size: 14px;
}
.top-bar-ciyota-version2-nav {
gap: 12px;
}
.top-bar-ciyota-version2-nav a {
font-size: 13px;
}
.top-bar-ciyota-version2-donate {
padding: 7px 14px;
font-size: 13px;
}
.top-bar-ciyota-version2-sponsor {
padding: 7px 14px;
font-size: 13px;
}
}
/* Large phones / small tablets – hide plain nav links + social icons */
@media (max-width: 600px) {
.top-bar-ciyota-version2-container {
padding: 8px 15px;
flex-wrap: nowrap;
justify-content: space-between;
}
.top-bar-ciyota-version2-social {
display: none;
}
.top-bar-ciyota-version2-nav a:not(.top-bar-ciyota-version2-donate):not(.top-bar-ciyota-version2-sponsor) {
display: none;
}
.top-bar-ciyota-version2-lang {
display: inline-flex !important;
}
.lang-toggle {
font-size: 13px;
padding: 5px 12px;
}
.lang-dropdown {
left: 0;
transform: none;
right: auto;
}
.top-bar-ciyota-version2-donate {
padding: 7px 14px;
font-size: 13px;
border-radius: 25px;
margin-left: 0;
}
.top-bar-ciyota-version2-sponsor {
padding: 7px 14px;
font-size: 13px;
border-radius: 25px;
}
}
/* Standard phones */
@media (max-width: 480px) {
.top-bar-ciyota-version2-container {
padding: 8px 12px;
height: auto;
min-height: 50px;
justify-content: space-between;
}
.top-bar-ciyota-version2-social {
display: none;
}
.top-bar-ciyota-version2-nav a:not(.top-bar-ciyota-version2-donate):not(.top-bar-ciyota-version2-sponsor) {
display: none;
}
.top-bar-ciyota-version2-lang {
display: inline-flex !important;
}
.lang-toggle {
font-size: 12px;
padding: 5px 10px;
}
.top-bar-ciyota-version2-donate {
padding: 7px 12px;
font-size: 12px;
border-radius: 25px;
min-width: auto;
margin-left: 0;
}
.top-bar-ciyota-version2-sponsor {
padding: 7px 12px;
font-size: 12px;
border-radius: 25px;
margin-left: 8px;
margin-right: 0;
}
.top-bar-ciyota-version2-donate span {
letter-spacing: 0.2px;
}
}
/* iPhone 12 Mini / 430px */
@media (max-width: 430px) {
.top-bar-ciyota-version2-container {
padding: 6px 10px;
flex-direction: row;
justify-content: space-between;
height: auto;
min-height: 45px;
}
.top-bar-ciyota-version2-social {
display: none;
}
.top-bar-ciyota-version2-nav a:not(.top-bar-ciyota-version2-donate):not(.top-bar-ciyota-version2-sponsor) {
display: none;
}
.top-bar-ciyota-version2-lang {
display: inline-flex !important;
}
.lang-toggle {
font-size: 11px;
padding: 4px 9px;
}
.top-bar-ciyota-version2-donate {
padding: 6px 11px;
font-size: 11px;
border-radius: 25px;
margin-left: 0;
}
.top-bar-ciyota-version2-sponsor {
padding: 6px 11px;
font-size: 11px;
border-radius: 25px;
margin-left: 6px;
margin-right: 0;
}
}
/* Samsung Galaxy / 412px */
@media (max-width: 412px) {
.top-bar-ciyota-version2-container {
padding: 6px 10px;
justify-content: space-between;
}
.top-bar-ciyota-version2-social {
display: none;
}
.top-bar-ciyota-version2-nav a:not(.top-bar-ciyota-version2-donate):not(.top-bar-ciyota-version2-sponsor) {
display: none;
}
.top-bar-ciyota-version2-lang {
display: inline-flex !important;
}
.lang-toggle {
font-size: 11px;
padding: 4px 9px;
}
.top-bar-ciyota-version2-donate {
padding: 6px 11px;
font-size: 11px;
margin-left: 0;
}
.top-bar-ciyota-version2-sponsor {
padding: 6px 11px;
font-size: 11px;
margin-left: 6px;
margin-right: 0;
}
}
/* iPhone SE / 375px */
@media (max-width: 375px) {
.top-bar-ciyota-version2-container {
padding: 6px 8px;
flex-direction: row;
justify-content: space-between;
height: auto;
min-height: 40px;
}
.top-bar-ciyota-version2-social {
display: none;
}
.top-bar-ciyota-version2-nav a:not(.top-bar-ciyota-version2-donate):not(.top-bar-ciyota-version2-sponsor) {
display: none;
}
.top-bar-ciyota-version2-lang {
display: inline-flex !important;
}
.lang-toggle {
font-size: 10px;
padding: 4px 8px;
}
.top-bar-ciyota-version2-donate {
padding: 5px 10px;
font-size: 10px;
border-radius: 20px;
margin-left: 0;
}
.top-bar-ciyota-version2-sponsor {
padding: 5px 10px;
font-size: 10px;
border-radius: 20px;
margin-left: 5px;
margin-right: 0;
}
.top-bar-ciyota-version2-donate span {
letter-spacing: 0;
}
}
/* 360px and below */
@media (max-width: 360px) {
.top-bar-ciyota-version2-container {
padding: 5px 8px;
flex-direction: row;
justify-content: space-between;
}
.top-bar-ciyota-version2-social {
display: none;
}
.top-bar-ciyota-version2-nav a:not(.top-bar-ciyota-version2-donate):not(.top-bar-ciyota-version2-sponsor) {
display: none;
}
.top-bar-ciyota-version2-lang {
display: inline-flex !important;
}
.lang-toggle {
font-size: 10px;
padding: 4px 8px;
}
.top-bar-ciyota-version2-donate {
padding: 5px 9px;
font-size: 10px;
border-radius: 20px;
flex: none;
margin-left: 0;
}
.top-bar-ciyota-version2-sponsor {
padding: 5px 9px;
font-size: 10px;
border-radius: 20px;
margin-left: 5px;
margin-right: 0;
}
}
/* 320px and below */
@media (max-width: 320px) {
.top-bar-ciyota-version2-container {
padding: 4px 6px;
justify-content: space-between;
}
.top-bar-ciyota-version2-social {
display: none;
}
.top-bar-ciyota-version2-nav a:not(.top-bar-ciyota-version2-donate):not(.top-bar-ciyota-version2-sponsor) {
display: none;
}
.top-bar-ciyota-version2-lang {
display: inline-flex !important;
}
.lang-toggle {
font-size: 9px;
padding: 3px 7px;
}
.top-bar-ciyota-version2-donate {
padding: 4px 8px;
font-size: 9px;
border-radius: 15px;
margin-left: 0;
}
.top-bar-ciyota-version2-sponsor {
padding: 4px 8px;
font-size: 9px;
border-radius: 15px;
margin-left: 4px;
margin-right: 0;
}
.top-bar-ciyota-version2-donate span {
letter-spacing: 0;
}
}
/* 280px and below */
@media (max-width: 280px) {
.top-bar-ciyota-version2-container {
padding: 3px 5px;
justify-content: space-between;
}
.top-bar-ciyota-version2-social {
display: none;
}
.top-bar-ciyota-version2-lang {
display: inline-flex !important;
}
.lang-toggle {
font-size: 8px;
padding: 3px 6px;
}
.top-bar-ciyota-version2-donate {
padding: 4px 7px;
font-size: 8px;
border-radius: 12px;
margin-left: 0;
}
.top-bar-ciyota-version2-sponsor {
padding: 4px 7px;
font-size: 8px;
border-radius: 12px;
margin-left: 3px;
margin-right: 0;
}
}
/* 240px and below */
@media (max-width: 240px) {
.top-bar-ciyota-version2-container {
padding: 2px 4px;
justify-content: space-between;
}
.top-bar-ciyota-version2-social {
display: none;
}
.top-bar-ciyota-version2-lang {
display: inline-flex !important;
}
.lang-toggle {
font-size: 7px;
padding: 2px 5px;
}
.top-bar-ciyota-version2-donate {
padding: 3px 6px;
font-size: 7px;
border-radius: 10px;
margin-left: 0;
}
.top-bar-ciyota-version2-sponsor {
padding: 3px 6px;
font-size: 7px;
border-radius: 10px;
margin-left: 2px;
margin-right: 0;
}
}
/*join us ciyota*/
.join-ciyota-today {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 20px 50px;
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: 20px 25px;
}
.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;
}
}
@media (max-width: 480px) {
.join-ciyota-today {
padding: 20px 15px;
}
}
/*==============================
SPONSORSHIP STATISTICS
================================*/
.ciyota-sponsorship-statistics {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 40px 50px;
}
.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,');
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 25px;
}
.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 {
padding: 20px 15px;
}
.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 {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 18px 50px;
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 25px;
}
.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;
}
}
@media (max-width: 480px) {
.ciyota-cookies-agreement-banner__container {
padding: 20px 15px;
}
}
/* COOKIES BANNER STYLES - END */
/* COOKIES policy STYLES - END */
.ciyota-cookies-agreement-banner-policy-page {
display: flex;
min-height: 100vh;
position: relative;
margin: 40px auto;
width: 100%;
max-width: 100%;
padding: 0 50px;
}
/* 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;
padding: 0 25px;
}
.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 (max-width: 480px) {
.ciyota-cookies-agreement-banner-policy-page {
padding: 0 15px;
}
}
@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: #ffc32c;
overflow: hidden;
}
.container {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0 50px;
}
.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 25px;
}
.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;
}
}
@media (max-width: 480px) {
.container {
padding: 0 15px;
}
}
/* 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;
}
/* ====================================
Two Column Sponsor Journey Section
=====================================*/
.sponsorship-cat-ciyota-section1 {
padding: 80px 0;
background: #f8f9fa;
}
.sponsorship-cat-ciyota-section1-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header */
.sponsorship-cat-ciyota-section1-header {
text-align: center;
margin-bottom: 60px;
}
.sponsorship-cat-ciyota-section1-main-title {
color: #10235e;
margin: 0 0 15px 0;
font-weight: 700;
}
.sponsorship-cat-ciyota-section1-subtitle {
color: #666;
margin: 0;
}
/* Two Column Layout */
.sponsorship-cat-ciyota-section1-two-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
/* Left Column: Steps */
.sponsorship-cat-ciyota-section1-steps-column {
display: flex;
flex-direction: column;
gap: 25px;
}
.sponsorship-cat-ciyota-section1-step-card {
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.sponsorship-cat-ciyota-section1-step-heading {
color: #10235e;
margin: 0 0 12px 0;
font-weight: 600;
}
.sponsorship-cat-ciyota-section1-step-text {
color: #555;
line-height: 1.7;
margin: 0;
}
/* Fees Block */
.sponsorship-cat-ciyota-section1-fees-card {
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.sponsorship-cat-ciyota-section1-fees-heading {
color: #10235e;
margin: 0 0 8px 0;
font-weight: 700;
}
.sponsorship-cat-ciyota-section1-fees-intro {
color: #666;
margin: 0 0 20px 0;
font-size: 0.9em;
}
.sponsorship-cat-ciyota-section1-fees-level {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
.sponsorship-cat-ciyota-section1-fees-level--last {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.sponsorship-cat-ciyota-section1-fees-level-title {
color: #10235e;
font-weight: 600;
margin: 0 0 12px 0;
font-size: 0.95em;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sponsorship-cat-ciyota-section1-fees-rows {
display: flex;
flex-direction: column;
gap: 8px;
}
.sponsorship-cat-ciyota-section1-fees-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: #f8f9fa;
border-radius: 8px;
gap: 10px;
}
.sponsorship-cat-ciyota-section1-fees-country {
color: #333;
font-weight: 600;
font-size: 0.92em;
min-width: 80px;
}
.sponsorship-cat-ciyota-section1-fees-amounts {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: flex-end;
}
.sponsorship-cat-ciyota-section1-fees-annual {
color: #10235e;
font-weight: 700;
font-size: 0.95em;
}
.sponsorship-cat-ciyota-section1-fees-annual small {
color: #888;
font-weight: 400;
font-size: 0.82em;
}
.sponsorship-cat-ciyota-section1-fees-termly {
color: #fff;
background: #ffc32c;
font-weight: 700;
font-size: 0.85em;
padding: 3px 8px;
border-radius: 5px;
white-space: nowrap;
}
.sponsorship-cat-ciyota-section1-fees-termly small {
font-weight: 400;
font-size: 0.85em;
}
/* Tax Disclaimer Notice */
.sponsorship-cat-ciyota-section1-tax-notice {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 20px;
background: #eef2ff;
border-radius: 8px;
}
.sponsorship-cat-ciyota-section1-tax-icon {
font-size: 1.3em;
flex-shrink: 0;
margin-top: 2px;
}
.sponsorship-cat-ciyota-section1-tax-text {
color: #444;
font-size: 0.88em;
line-height: 1.7;
margin: 0;
}
.sponsorship-cat-ciyota-section1-tax-text strong {
color: #10235e;
}
/* Right Column: Help & Contact */
.sponsorship-cat-ciyota-section1-help-column {
position: sticky;
top: 20px;
}
.sponsorship-cat-ciyota-section1-help-box {
background: #10235e;
padding: 40px;
border-radius: 12px;
color: white;
}
.sponsorship-cat-ciyota-section1-help-title {
color: #ffc32c;
margin: 0 0 20px 0;
font-weight: 700;
}
.sponsorship-cat-ciyota-section1-help-description {
line-height: 1.7;
color: #e0e0e0;
margin: 0 0 15px 0;
}
.sponsorship-cat-ciyota-section1-form-wrapper {
margin: 20px auto;
padding: 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.sponsorship-cat-ciyota-section1-contact-section {
margin-top: 30px;
padding-top: 30px;
border-top: 2px solid rgba(255, 195, 44, 0.3);
}
.sponsorship-cat-ciyota-section1-contact-heading {
color: #ffc32c;
margin: 0 0 20px 0;
font-weight: 600;
}
.sponsorship-cat-ciyota-section1-contact-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px 20px;
background: rgba(255, 195, 44, 0.1);
border: 2px solid #ffc32c;
border-radius: 8px;
color: white;
text-decoration: none;
margin-bottom: 15px;
transition: all 0.3s ease;
}
.sponsorship-cat-ciyota-section1-contact-item:last-child {
margin-bottom: 0;
}
.sponsorship-cat-ciyota-section1-contact-item:hover {
background: #ffc32c;
color: #10235e;
}
.sponsorship-cat-ciyota-section1-contact-icon {
flex-shrink: 0;
}
.sponsorship-cat-ciyota-section1-contact-detail {
font-weight: 600;
}
/* Responsive Design */
@media (max-width: 968px) {
.sponsorship-cat-ciyota-section1-two-columns {
grid-template-columns: 1fr;
gap: 40px;
}
.sponsorship-cat-ciyota-section1-help-column {
position: static;
}
}
@media (max-width: 768px) {
.sponsorship-cat-ciyota-section1 {
padding: 50px 0;
}
.sponsorship-cat-ciyota-section1-header {
margin-bottom: 40px;
}
.sponsorship-cat-ciyota-section1-two-columns {
gap: 30px;
}
.sponsorship-cat-ciyota-section1-step-card {
padding: 18px;
}
.sponsorship-cat-ciyota-section1-help-box {
padding: 30px 25px;
}
.sponsorship-cat-ciyota-section1-contact-item {
padding: 12px 18px;
}
.sponsorship-cat-ciyota-section1-fees-card {
padding: 20px;
}
.sponsorship-cat-ciyota-section1-fees-row {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.sponsorship-cat-ciyota-section1-fees-amounts {
justify-content: flex-start;
}
}
@media (max-width: 480px) {
.sponsorship-cat-ciyota-section1-container {
padding: 0 15px;
}
.sponsorship-cat-ciyota-section1-step-card {
padding: 15px;
}
.sponsorship-cat-ciyota-section1-help-box {
padding: 25px 20px;
}
.sponsorship-cat-ciyota-section1-contact-item {
padding: 12px 15px;
}
.sponsorship-cat-ciyota-section1-fees-card {
padding: 15px;
}
}
/*ED MESSAGE
================*/
.executive-director-message {
background-color: #FFFFFF;
padding: 20px 50px;
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 {
width: 100%;
max-width: 100%;
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 25px;
}
.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 {
padding: 40px 15px;
}
.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 {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 2rem 50px;
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: 100%;
margin: 0 auto;
line-height: 1.6;
text-align: left;
}
.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);
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;
}
.story-genesis-ciyota-image {
width: 100%;
height: 300px;
border-radius: 12px;
margin: 1rem 0;
object-fit: cover;
border: 3px solid #ffc32c;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
/* NEW: Image Gallery Styles */
.story-genesis-ciyota-image-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
padding: 1rem 0;
}
.story-genesis-ciyota-gallery-image {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 12px;
border: 3px solid #ffc32c;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.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 25px;
}
.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;
}
/* Mobile Gallery Styles */
.story-genesis-ciyota-image-gallery {
grid-template-columns: 1fr;
gap: 0.8rem;
margin: 1rem 0;
}
.story-genesis-ciyota-gallery-image {
width: 100%;
max-width: 100%;
margin: 0 auto;
}
.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 15px;
}
.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-gallery-image {
width: 100%;
max-width: 100%;
}
.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-image-gallery {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.story-genesis-ciyota-stats {
grid-template-columns: repeat(4, 1fr);
padding: 3rem 2rem;
}
}
/*============================== HOW WE DO IT =======================================*/
/*============================== HOW WE DO IT =======================================*/
.ciyota-howwe-do-it {
margin: 0;
padding: 0;
box-sizing: border-box;
width: 100vw;
margin-left: calc(-50vw + 50%);
background: #79acf7;
position: relative;
overflow: hidden;
margin-bottom: 0;
}
.ciyota-howwe-do-it-container {
max-width: 100%;
margin: 0 auto;
position: relative;
z-index: 2;
padding: 60px 50px;
display: flex;
align-items: center;
min-height: 500px;
}
/* Left Column - Text Content */
.ciyota-howwe-do-it-content {
flex: 1;
color: #10235e;
padding-right: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.ciyota-howwe-do-it-title {
font-size: 3rem;
font-weight: 900;
margin-bottom: 30px;
color: #10235e;
line-height: 1.5;
text-transform: uppercase;
letter-spacing: -0.5px;
}
.ciyota-howwe-do-it-description {
font-size: 1em;
line-height: 1.6;
color: #10235e;
font-weight: 400;
margin-bottom: 20px;
}
/* Right Column - Image Slider */
.ciyota-howwe-do-it-image-container {
flex: 0 0 600px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 400px;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.image-slider {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.slider-track {
display: flex;
height: 100%;
margin: 0;
padding: 0;
}
.slider-image {
height: 100%;
object-fit: cover;
flex-shrink: 0;
margin: 0;
padding: 0;
border: none;
transform: scale(1.002);
}
/* Pause animation on hover */
.image-slider:hover .slider-track {
animation-play-state: paused;
}
/* Slide indicators */
.slider-indicators {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
}
.indicator {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
}
.indicator.active {
background: white;
transform: scale(1.2);
}
/* Additional modern touches */
.image-slider::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 0%, rgba(16, 35, 94, 0.1) 100%);
z-index: 5;
pointer-events: none;
}
/* Mobile Responsiveness */
@media screen and (max-width: 992px) {
.ciyota-howwe-do-it-container {
flex-direction: column;
padding: 30px 20px;
}
.ciyota-howwe-do-it-content {
padding-right: 0;
margin-bottom: 40px;
text-align: left;
}
.ciyota-howwe-do-it-title {
font-size: 2.5rem;
}
.ciyota-howwe-do-it-image-container {
flex: none;
width: 100vw;
margin-left: calc(-50vw + 50%);
max-width: none;
margin-bottom: 0;
height: auto;
aspect-ratio: 1 / 1;
}
.slider-image {
height: 100%;
object-fit: cover;
flex-shrink: 0;
display: block;
}
}
@media screen and (max-width: 768px) {
.ciyota-howwe-do-it-container {
padding: 30px 20px;
}
}
@media screen and (max-width: 480px) {
.ciyota-howwe-do-it-container {
padding: 25px 15px;
}
.ciyota-howwe-do-it {
min-height: 500px;
}
.ciyota-howwe-do-it-title {
font-size: 2rem;
}
.ciyota-howwe-do-it-description {
font-size: 1em;
}
.ciyota-howwe-do-it-image-container {
width: 100vw;
margin-left: calc(-50vw + 50%);
max-width: none;
height: auto;
aspect-ratio: 1 / 1;
}
.slider-image {
height: 100%;
object-fit: cover;
flex-shrink: 0;
display: block;
}
}
@media screen and (max-width: 360px) {
.ciyota-howwe-do-it-container {
padding: 20px 10px;
}
}
@media screen and (max-width: 320px) {
.ciyota-howwe-do-it-container {
padding: 15px 8px;
}
}
/*==============================
where we work
====================================*/
.where-ciyota-works {
width: 100vw;
margin-left: calc(-50vw + 50%);
background: #ffffff;
position: relative;
overflow: hidden;
margin-bottom: 0;
padding: 80px 0;
}
.where-ciyota-works-container {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0 50px;
position: relative;
z-index: 2;
}
.where-ciyota-works-title {
font-size: 3rem;
font-weight: 900;
margin-bottom: 60px;
color: #10235e;
text-align: center;
text-transform: uppercase;
letter-spacing: -0.5px;
}
.where-ciyota-works-countries {
display: flex;
flex-direction: row;
gap: 40px;
width: 100%;
max-width: 100%;
margin: 0 auto;
}
.where-ciyota-works-country {
display: flex;
flex-direction: column;
align-items: center;
gap: 25px;
padding: 40px 30px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border-top: 6px solid;
flex: 1;
text-align: center;
}
.where-ciyota-works-country.uganda {
border-top-color: #ffc32c;
}
.where-ciyota-works-country.drc {
border-top-color: #79acf7;
}
.where-ciyota-works-country:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.where-ciyota-works-country-icon {
flex: 0 0 120px;
height: 120px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
border: 4px solid #ffffff;
background: #f8f9fa;
overflow: hidden;
}
.where-ciyota-works-country-icon img {
width: 112px;
height: 112px;
object-fit: cover;
border-radius: 50%;
object-position: center;
}
.where-ciyota-works-country-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 15px;
align-items: center;
}
.where-ciyota-works-country-name {
font-size: 1.8rem;
font-weight: 900;
color: #10235e;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 10px;
}
.where-ciyota-works-country-description {
font-size: 1em;
line-height: 1.7;
color: #10235e;
margin-bottom: 20px;
text-align: center;
}
.where-ciyota-works-country-link {
display: inline-block;
padding: 12px 30px;
background: #ffc32c;
color: #10235e;
text-decoration: none;
border-radius: 25px;
font-weight: 600;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}
.where-ciyota-works-country-link:hover {
background: #10235e;
color: #ffffff;
transform: translateX(5px);
}
/* Responsive Design */
@media screen and (max-width: 992px) {
.where-ciyota-works {
padding: 60px 0;
}
.where-ciyota-works-title {
font-size: 2.5rem;
margin-bottom: 50px;
}
.where-ciyota-works-countries {
gap: 30px;
}
.where-ciyota-works-country {
gap: 20px;
padding: 35px 25px;
}
.where-ciyota-works-country-icon {
flex: 0 0 100px;
height: 100px;
}
.where-ciyota-works-country-name {
font-size: 1.6rem;
}
.where-ciyota-works-country-description {
font-size: 0.95rem;
}
}
@media screen and (max-width: 768px) {
.where-ciyota-works {
padding: 50px 0;
}
.where-ciyota-works-container {
padding: 0 25px;
}
.where-ciyota-works-title {
font-size: 1.1em;
margin-bottom: 40px;
}
.where-ciyota-works-countries {
flex-direction: column;
gap: 30px;
}
.where-ciyota-works-country {
gap: 25px;
padding: 30px 20px;
}
.where-ciyota-works-country-icon {
flex: none;
margin: 0 auto;
}
}
@media screen and (max-width: 576px) {
.where-ciyota-works-container {
padding: 0 25px;
}
.where-ciyota-works-title {
font-size: 1.8rem;
}
.where-ciyota-works-country {
padding: 25px 15px;
margin: 0 10px;
}
.where-ciyota-works-country-icon {
width: 80px;
height: 80px;
}
.where-ciyota-works-country-name {
font-size: 1.1em;
}
.where-ciyota-works-country-description {
font-size: 1em;
line-height: 1.6;
}
.where-ciyota-works-country-link {
padding: 10px 25px;
font-size: 1em;
}
}
@media screen and (max-width: 480px) {
.where-ciyota-works-container {
padding: 0 15px;
}
}
/*==============================
MODERN ABOUT US DESIGN - MOBILE OPTIMIZED
===============================*/
.best-ciyota-presentation-about {
padding: 60px 0 100px;
background: #f8f9fa;
position: relative;
}
.best-ciyota-presentation-container {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0 50px;
}
.best-ciyota-presentation-hero {
text-align: center;
margin-bottom: 60px;
}
.best-ciyota-presentation-hero h2 {
font-size: 2.5em;
color: #10235e;
margin-bottom: 20px;
font-weight: 700;
position: relative;
}
.best-ciyota-presentation-hero h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: #ffc32c;
border-radius: 2px;
}
.best-ciyota-presentation-values-section {
margin-bottom: 60px;
}
.best-ciyota-presentation-values-title {
text-align: center;
font-size: 2em;
color: #10235e;
margin-bottom: 50px;
font-weight: 600;
}
.best-ciyota-presentation-values-container {
border: 3px solid #10235e;
border-radius: 20px;
background: white;
box-shadow: 0 10px 30px rgba(16, 35, 94, 0.1);
overflow: hidden;
}
.best-ciyota-presentation-values-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.best-ciyota-presentation-value-item {
border-right: 2px solid #e9ecef;
border-bottom: 2px solid #e9ecef;
display: flex;
flex-direction: column;
min-height: 350px;
}
.best-ciyota-presentation-value-item:nth-child(3),
.best-ciyota-presentation-value-item:nth-child(6) {
border-right: none;
}
.best-ciyota-presentation-value-item:nth-child(4),
.best-ciyota-presentation-value-item:nth-child(5),
.best-ciyota-presentation-value-item:nth-child(6) {
border-bottom: none;
}
.best-ciyota-presentation-value-content {
padding: 25px;
text-align: center;
border-top: 2px solid #e9ecef;
flex: 1;
}
.best-ciyota-presentation-value-title {
font-size: 1.1em;
color: #10235e;
margin-bottom: 15px;
font-weight: 600;
}
.best-ciyota-presentation-value-description {
font-size: 0.9em;
line-height: 1.6;
color: #10235e;
}
.best-ciyota-presentation-arrow-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 50px;
background: #f8f9fa;
border-top: 2px solid #e9ecef;
border-bottom: 2px solid #e9ecef;
}
.best-ciyota-presentation-arrow-down {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid #10235e;
animation: bounceDown 2s infinite;
}
@keyframes bounceDown {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-5px);
}
60% {
transform: translateY(-3px);
}
}
.best-ciyota-presentation-value-image {
height: 220px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.best-ciyota-presentation-value-image.integrity {
background: #10235e;
}
.best-ciyota-presentation-value-image.boldness {
background: #ffc32c;
}
.best-ciyota-presentation-value-image.diversity {
background: #79acf7;
}
.best-ciyota-presentation-value-image.community {
background: #10235e;
}
.best-ciyota-presentation-value-image.compassion {
background: #ffc32c;
}
.best-ciyota-presentation-value-image.excellence {
background: #79acf7;
}
.best-ciyota-presentation-placeholder-icon {
width: 100px;
height: 100px;
margin-bottom: 10px;
object-fit: contain;
filter: brightness(0) invert(1);
}
.best-ciyota-presentation-placeholder-text {
color: white;
font-size: 1em;
text-align: center;
font-weight: 600;
}
.best-ciyota-presentation-about-content {
background: transparent;
border-radius: 0;
padding: 0;
box-shadow: none;
margin-bottom: 60px;
}
.best-ciyota-presentation-about-text {
font-size: 1em;
line-height: 1.8;
color: #10235e;
margin-bottom: 30px;
}
.best-ciyota-presentation-about-text strong {
color: #10235e;
font-weight: 700;
}
.best-ciyota-presentation-stats-section {
margin-bottom: 60px;
}
.best-ciyota-presentation-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.best-ciyota-presentation-stat-item {
text-align: center;
padding: 20px;
background: #79acf7;
color: white;
border-radius: 15px;
}
.best-ciyota-presentation-stat-number {
font-size: 2em;
font-weight: bold;
margin-bottom: 5px;
}
.best-ciyota-presentation-stat-label {
font-size: 0.9em;
}
.best-ciyota-presentation-cta {
text-align: center;
margin-top: 50px;
}
.best-ciyota-presentation-enrollment-button {
display: inline-flex;
align-items: center;
gap: 10px;
background: #10235e;
color: white;
padding: 18px 35px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1.1em;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(16, 35, 94, 0.3);
position: relative;
overflow: hidden;
}
.best-ciyota-presentation-enrollment-button:hover {
background: #ffc32c;
color: #10235e;
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(16, 35, 94, 0.4);
}
.best-ciyota-presentation-live-indicator {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9em;
}
.best-ciyota-presentation-live-dot {
width: 8px;
height: 8px;
background: green;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* Responsive Design */
/* Large tablets and small desktops */
@media (max-width: 1024px) {
.best-ciyota-presentation-values-grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.best-ciyota-presentation-value-item:nth-child(2),
.best-ciyota-presentation-value-item:nth-child(4),
.best-ciyota-presentation-value-item:nth-child(6) {
border-right: none;
}
.best-ciyota-presentation-value-item:nth-child(5),
.best-ciyota-presentation-value-item:nth-child(6) {
border-bottom: none;
}
.best-ciyota-presentation-value-item:nth-child(3) {
border-right: 2px solid #e9ecef;
border-bottom: 2px solid #e9ecef;
}
}
/* Standard tablets */
@media (max-width: 768px) {
.best-ciyota-presentation-about {
padding: 40px 0 60px;
}
.best-ciyota-presentation-container {
padding: 0 25px;
}
.best-ciyota-presentation-hero h2 {
font-size: 2em;
}
.best-ciyota-presentation-values-title {
font-size: 1.8em;
margin-bottom: 30px;
}
.best-ciyota-presentation-values-container {
border-radius: 15px;
border-width: 2px;
}
.best-ciyota-presentation-values-grid {
grid-template-columns: 1fr;
grid-template-rows: repeat(6, auto);
}
.best-ciyota-presentation-value-item {
border-right: none !important;
border-bottom: 2px solid #e9ecef !important;
min-height: auto;
}
.best-ciyota-presentation-value-item:last-child {
border-bottom: none !important;
}
.best-ciyota-presentation-value-content {
padding: 20px;
}
.best-ciyota-presentation-value-image {
height: 150px;
}
.best-ciyota-presentation-placeholder-icon {
width: 70px;
height: 70px;
}
.best-ciyota-presentation-arrow-container {
height: 40px;
}
.best-ciyota-presentation-arrow-down {
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 15px solid #10235e;
}
.best-ciyota-presentation-stats {
grid-template-columns: repeat(2, 1fr);
}
}
/* Large phones */
@media (max-width: 600px) {
.best-ciyota-presentation-about {
padding: 30px 0 50px;
}
.best-ciyota-presentation-container {
padding: 0 25px;
}
.best-ciyota-presentation-values-title {
font-size: 1.6em;
margin-bottom: 25px;
}
.best-ciyota-presentation-values-container {
border-radius: 12px;
}
.best-ciyota-presentation-value-image {
height: 130px;
}
.best-ciyota-presentation-placeholder-icon {
width: 60px;
height: 60px;
}
.best-ciyota-presentation-value-content {
padding: 18px;
}
.best-ciyota-presentation-value-title {
font-size: 1em;
margin-bottom: 12px;
}
.best-ciyota-presentation-value-description {
font-size: 0.85em;
line-height: 1.5;
}
.best-ciyota-presentation-enrollment-button {
padding: 15px 25px;
font-size: 1em;
}
}
/* Standard phones */
@media (max-width: 480px) {
.best-ciyota-presentation-about {
padding: 25px 0 40px;
}
.best-ciyota-presentation-container {
padding: 0 15px;
}
.best-ciyota-presentation-hero h2 {
font-size: 1.8em;
}
.best-ciyota-presentation-values-title {
font-size: 1.5em;
margin-bottom: 20px;
}
.best-ciyota-presentation-values-container {
border-radius: 10px;
border-width: 2px;
}
.best-ciyota-presentation-value-image {
height: 120px;
}
.best-ciyota-presentation-placeholder-icon {
width: 50px;
height: 50px;
}
.best-ciyota-presentation-value-content {
padding: 15px;
}
.best-ciyota-presentation-value-title {
font-size: 0.95em;
margin-bottom: 10px;
}
.best-ciyota-presentation-value-description {
font-size: 0.8em;
line-height: 1.4;
}
.best-ciyota-presentation-arrow-container {
height: 35px;
}
.best-ciyota-presentation-arrow-down {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 12px solid #10235e;
}
.best-ciyota-presentation-enrollment-button {
padding: 12px 20px;
font-size: 0.9em;
}
.best-ciyota-presentation-stats {
grid-template-columns: 1fr;
gap: 15px;
}
}
/* Small phones */
@media (max-width: 360px) {
.best-ciyota-presentation-about {
padding: 20px 0 35px;
}
.best-ciyota-presentation-container {
padding: 0 8px;
}
.best-ciyota-presentation-hero h2 {
font-size: 1.6em;
}
.best-ciyota-presentation-values-title {
font-size: 1.4em;
margin-bottom: 18px;
}
.best-ciyota-presentation-value-image {
height: 110px;
}
.best-ciyota-presentation-placeholder-icon {
width: 45px;
height: 45px;
}
.best-ciyota-presentation-value-content {
padding: 12px;
}
.best-ciyota-presentation-value-title {
font-size: 0.9em;
margin-bottom: 8px;
}
.best-ciyota-presentation-value-description {
font-size: 0.75em;
line-height: 1.3;
}
.best-ciyota-presentation-arrow-container {
height: 30px;
}
.best-ciyota-presentation-arrow-down {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 10px solid #10235e;
}
.best-ciyota-presentation-enrollment-button {
padding: 10px 18px;
font-size: 0.85em;
gap: 8px;
}
.best-ciyota-presentation-live-indicator {
font-size: 0.8em;
gap: 6px;
}
.best-ciyota-presentation-live-dot {
width: 6px;
height: 6px;
}
}
/* Very small phones */
@media (max-width: 320px) {
.best-ciyota-presentation-about {
padding: 15px 0 30px;
}
.best-ciyota-presentation-container {
padding: 0 6px;
}
.best-ciyota-presentation-hero h2 {
font-size: 1.4em;
}
.best-ciyota-presentation-values-title {
font-size: 1.3em;
margin-bottom: 15px;
}
.best-ciyota-presentation-values-container {
border-radius: 8px;
}
.best-ciyota-presentation-value-image {
height: 100px;
}
.best-ciyota-presentation-placeholder-icon {
width: 40px;
height: 40px;
}
.best-ciyota-presentation-value-content {
padding: 10px;
}
.best-ciyota-presentation-value-title {
font-size: 0.85em;
margin-bottom: 6px;
}
.best-ciyota-presentation-value-description {
font-size: 0.7em;
line-height: 1.2;
}
.best-ciyota-presentation-arrow-container {
height: 25px;
}
.best-ciyota-presentation-arrow-down {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid #10235e;
}
.best-ciyota-presentation-enrollment-button {
padding: 8px 15px;
font-size: 0.8em;
gap: 6px;
}
.best-ciyota-presentation-live-indicator {
font-size: 0.75em;
gap: 5px;
}
.best-ciyota-presentation-live-dot {
width: 5px;
height: 5px;
}
}
/* Animation enhancements for mobile */
@media (max-width: 768px) {
.best-ciyota-presentation-value-item {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.6s ease-out forwards;
}
.best-ciyota-presentation-value-item:nth-child(1) {
animation-delay: 0.1s;
}
.best-ciyota-presentation-value-item:nth-child(2) {
animation-delay: 0.2s;
}
.best-ciyota-presentation-value-item:nth-child(3) {
animation-delay: 0.3s;
}
.best-ciyota-presentation-value-item:nth-child(4) {
animation-delay: 0.4s;
}
.best-ciyota-presentation-value-item:nth-child(5) {
animation-delay: 0.5s;
}
.best-ciyota-presentation-value-item:nth-child(6) {
animation-delay: 0.6s;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
}
/*Ciyota Reporting Dashboard
=====================*/
.ciyota-reporting-dashboard {
width: 100%;
max-width: 100%;
padding: 50px;
box-sizing: border-box;
}
.ciyota-reporting-dashboard-container {
max-width: 800px;
margin: 0 auto;
}
.ciyota-reporting-dashboard-header {
text-align: center;
margin-bottom: 40px;
}
.ciyota-reporting-dashboard-title {
margin-bottom: 10px;
color: #1e293b;
}
.ciyota-reporting-dashboard-subtitle {
color: #64748b;
margin: 0;
}
.ciyota-reporting-dashboard-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.ciyota-reporting-dashboard-item {
background: white;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 24px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
}
.ciyota-reporting-dashboard-item:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
.ciyota-reporting-dashboard-info {
flex: 1;
}
.ciyota-reporting-dashboard-name {
color: #1e293b;
margin: 0 0 8px 0;
}
.ciyota-reporting-dashboard-date {
color: #64748b;
margin: 0;
}
.ciyota-reporting-dashboard-view-btn {
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s ease;
}
.ciyota-reporting-dashboard-view-btn:hover {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
transform: translateY(-2px);
}
.ciyota-reporting-dashboard-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 1000;
}
.ciyota-reporting-dashboard-modal-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
display: flex;
flex-direction: column;
}
.ciyota-reporting-dashboard-modal-header {
padding: 16px 24px;
border-bottom: 1px solid #e2e8f0;
display: flex;
justify-content: space-between;
align-items: center;
background: #f8fafc;
position: relative;
z-index: 1001;
}
.ciyota-reporting-dashboard-modal-title {
margin: 0;
color: #1e293b;
}
.ciyota-reporting-dashboard-close-btn {
background: #dc2626;
border: none;
cursor: pointer;
padding: 12px;
border-radius: 8px;
color: white;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}
.ciyota-reporting-dashboard-close-btn:hover {
background: #b91c1c;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}
.ciyota-reporting-dashboard-modal-body {
flex: 1;
}
.ciyota-reporting-dashboard-pdf-viewer {
width: 100%;
height: 100%;
border: none;
}
@media (max-width: 768px) {
.ciyota-reporting-dashboard {
padding: 30px 20px;
}
.ciyota-reporting-dashboard-item {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.ciyota-reporting-dashboard-view-btn {
align-self: stretch;
justify-content: center;
}
.ciyota-reporting-dashboard-modal-header {
padding: 12px 16px;
}
.ciyota-reporting-dashboard-modal-title {
font-size: 16px;
}
.ciyota-reporting-dashboard-close-btn {
padding: 10px;
}
}
/* BREAKING BARRIERS PAGE
========================= */
.ciyota-breakingbarriers-project * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.ciyota-breakingbarriers-project {
color: #333;
background: white;
min-height: 100vh;
margin: 0;
padding: 0;
}
.ciyota-breakingbarriers-project .hero-section {
width: 100%;
height: 60vh;
background: #10235e;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-align: center;
position: relative;
overflow: hidden;
}
.ciyota-breakingbarriers-project .hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
animation: ciyota-breakingbarriers-float 20s infinite linear;
}
@keyframes ciyota-breakingbarriers-float {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-100px);
}
}
.ciyota-breakingbarriers-project .hero-content {
position: relative;
z-index: 2;
max-width: 100%;
padding: 50px;
text-align: center;
}
.ciyota-breakingbarriers-project .hero-title {
font-weight: 700;
margin-bottom: 30px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.ciyota-breakingbarriers-project .hero-subtitle {
opacity: 0.95;
line-height: 1.6;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 40px;
}
.ciyota-breakingbarriers-project .hero-leadership {
margin-top: 30px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
}
.ciyota-breakingbarriers-project .leadership-item {
opacity: 0.95;
}
.ciyota-breakingbarriers-project .leadership-item.name {
font-weight: bold;
color: #ffc32c;
}
.ciyota-breakingbarriers-project .leadership-item.name a {
color: #ffc32c;
text-decoration: none;
transition: color 0.3s ease;
}
.ciyota-breakingbarriers-project .leadership-item.name a:hover {
color: white;
text-decoration: underline;
}
.ciyota-breakingbarriers-project .leadership-item.duration {
font-weight: 600;
}
.ciyota-breakingbarriers-project .leadership-separator {
color: rgba(255, 255, 255, 0.7);
font-weight: 300;
}
.ciyota-breakingbarriers-project .project-overview-section {
width: 100%;
padding: 50px;
background: white;
border-bottom: 1px solid #eee;
}
.ciyota-breakingbarriers-project .overview-content {
max-width: 100%;
margin: 0;
}
.ciyota-breakingbarriers-project .overview-content .section-title {
text-align: center;
}
.ciyota-breakingbarriers-project .overview-content p {
color: #666;
text-align: left;
line-height: 1.8;
}
.ciyota-breakingbarriers-project .section {
width: 100%;
padding: 50px;
border-bottom: 1px solid #eee;
}
.ciyota-breakingbarriers-project .section:last-child {
border-bottom: none;
}
.ciyota-breakingbarriers-project .section-title {
color: #10235e;
margin-bottom: 20px;
text-align: center;
position: relative;
}
.ciyota-breakingbarriers-project .section-title::after {
content: '';
width: 60px;
height: 4px;
background: #ffc32c;
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
border-radius: 2px;
}
.ciyota-breakingbarriers-project .info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin-top: 30px;
}
.ciyota-breakingbarriers-project .info-card {
background: #f8f9fa;
padding: 0;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
overflow: hidden;
}
.ciyota-breakingbarriers-project .info-card:hover {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.ciyota-breakingbarriers-project .card-image {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 15px 15px 0 0;
}
.ciyota-breakingbarriers-project .card-content {
padding: 30px;
}
.ciyota-breakingbarriers-project .info-card h3 {
color: #10235e;
margin-bottom: 15px;
display: flex;
align-items: center;
}
.ciyota-breakingbarriers-project .impact-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 30px;
}
.ciyota-breakingbarriers-project .stat-card {
background: #10235e;
color: white;
padding: 30px;
border-radius: 15px;
text-align: center;
box-shadow: 0 8px 20px rgba(16, 35, 94, 0.3);
transition: transform 0.3s ease;
}
.ciyota-breakingbarriers-project .stat-card:hover {
transform: scale(1.05);
background: #ffc32c;
color: #10235e;
}
.ciyota-breakingbarriers-project .stat-card:hover .stat-number {
text-shadow: none;
font-weight: bold;
}
.ciyota-breakingbarriers-project .stat-number {
font-weight: bold;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.ciyota-breakingbarriers-project .photo-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin-top: 30px;
}
.ciyota-breakingbarriers-project .gallery-item {
position: relative;
border-radius: 15px;
overflow: hidden;
aspect-ratio: 3/2;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.ciyota-breakingbarriers-project .gallery-item:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}
.ciyota-breakingbarriers-project .gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ciyota-breakingbarriers-project .gallery-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(16, 35, 94, 0.9));
color: white;
padding: 20px;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.ciyota-breakingbarriers-project .gallery-item:hover .gallery-overlay {
transform: translateY(0);
}
/* Lightbox Modal Styles */
.ciyota-breakingbarriers-project .lightbox-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease;
}
.ciyota-breakingbarriers-project .lightbox-modal.active {
display: flex;
opacity: 1;
align-items: center;
justify-content: center;
}
.ciyota-breakingbarriers-project .lightbox-content {
position: relative;
max-width: 90%;
max-height: 90%;
display: flex;
align-items: center;
justify-content: center;
}
.ciyota-breakingbarriers-project .lightbox-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 10px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
transition: opacity 0.3s ease;
}
.ciyota-breakingbarriers-project .lightbox-close {
position: absolute;
top: 20px;
right: 30px;
color: white;
cursor: pointer;
z-index: 1001;
transition: all 0.3s ease;
background: rgba(16, 35, 94, 0.8);
border: 2px solid rgba(255, 195, 44, 0.3);
padding: 10px 15px;
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.ciyota-breakingbarriers-project .lightbox-close:hover {
color: #10235e;
background: #ffc32c;
border-color: #ffc32c;
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(255, 195, 44, 0.4);
}
.ciyota-breakingbarriers-project .lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: white;
cursor: pointer;
background: rgba(16, 35, 94, 0.8);
border: 2px solid rgba(255, 195, 44, 0.3);
padding: 15px 20px;
border-radius: 50%;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1002;
}
.ciyota-breakingbarriers-project .lightbox-nav:hover {
background: #ffc32c;
color: #10235e;
border-color: #ffc32c;
transform: translateY(-50%) scale(1.15);
box-shadow: 0 8px 25px rgba(255, 195, 44, 0.4);
}
.ciyota-breakingbarriers-project .lightbox-prev {
left: 30px;
}
.ciyota-breakingbarriers-project .lightbox-next {
right: 30px;
}
.ciyota-breakingbarriers-project .lightbox-caption {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
background: rgba(16, 35, 94, 0.95);
color: white;
padding: 20px 30px;
border-radius: 15px;
text-align: center;
backdrop-filter: blur(10px);
max-width: 80%;
border: 2px solid rgba(255, 195, 44, 0.3);
}
.ciyota-breakingbarriers-project .lightbox-caption h4 {
margin: 0 0 8px 0;
color: #ffc32c;
font-weight: bold;
}
.ciyota-breakingbarriers-project .lightbox-caption p {
margin: 0;
opacity: 0.95;
line-height: 1.4;
}
.ciyota-breakingbarriers-project .testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 25px;
margin-top: 30px;
}
.ciyota-breakingbarriers-project .testimonial {
background: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
position: relative;
transition: transform 0.3s ease;
display: flex;
align-items: flex-start;
gap: 20px;
}
.ciyota-breakingbarriers-project .testimonial:hover {
transform: translateY(-3px);
}
.ciyota-breakingbarriers-project .testimonial-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.ciyota-breakingbarriers-project .testimonial-content {
flex: 1;
}
.ciyota-breakingbarriers-project .testimonial::before {
content: '"';
color: #10235e;
position: absolute;
top: -10px;
left: 20px;
opacity: 0.3;
}
.ciyota-breakingbarriers-project .testimonial-text {
font-style: italic;
margin-bottom: 20px;
padding-left: 30px;
}
.ciyota-breakingbarriers-project .testimonial-author {
font-weight: bold;
color: #10235e;
}
.ciyota-breakingbarriers-project .activities-list {
list-style: none;
margin-top: 20px;
}
.ciyota-breakingbarriers-project .activities-list li {
padding: 15px 0;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 40px;
}
.ciyota-breakingbarriers-project .activities-list li::before {
content: '✓';
position: absolute;
left: 0;
color: #ffc32c;
font-weight: bold;
}
@media (max-width: 768px) {
.ciyota-breakingbarriers-project .project-overview-section {
padding: 20px;
}
.ciyota-breakingbarriers-project .hero-content {
padding: 20px;
}
.ciyota-breakingbarriers-project .hero-leadership {
margin-top: 20px;
flex-direction: column;
gap: 8px;
}
.ciyota-breakingbarriers-project .leadership-separator {
display: none;
}
.ciyota-breakingbarriers-project .section {
padding: 20px;
}
.ciyota-breakingbarriers-project .info-grid,
.ciyota-breakingbarriers-project .impact-stats,
.ciyota-breakingbarriers-project .testimonial-grid {
grid-template-columns: 1fr;
}
.ciyota-breakingbarriers-project .lightbox-nav {
padding: 12px 15px;
width: 50px;
height: 50px;
}
.ciyota-breakingbarriers-project .lightbox-prev {
left: 15px;
}
.ciyota-breakingbarriers-project .lightbox-next {
right: 15px;
}
.ciyota-breakingbarriers-project .lightbox-close {
top: 15px;
right: 20px;
width: 50px;
height: 50px;
padding: 8px 12px;
}
.ciyota-breakingbarriers-project .lightbox-caption {
display: none;
}
}
.ciyota-breakingbarriers-project .fade-in {
animation: ciyota-breakingbarriers-fadeIn 1s ease-in;
}
@keyframes ciyota-breakingbarriers-fadeIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Travel to Africa for Impact
=============================== */
.ciyota-travel-to-africa-for-impact {
width: 100%;
background-color: #FFFFFF;
}
.ciyota-travel-to-africa-for-impact-container {
max-width: 100%;
padding: 50px 50px 0 50px;
margin: 0 auto;
}
.ciyota-travel-to-africa-for-impact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
align-items: stretch;
min-height: 300px;
}
.ciyota-travel-to-africa-for-impact-image-wrapper {
display: flex;
}
.ciyota-travel-to-africa-for-impact-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ciyota-travel-to-africa-for-impact-content {
padding: 40px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.ciyota-travel-to-africa-for-impact-title {
margin-bottom: 20px;
color: #10235e;
font-weight: bold;
}
.ciyota-travel-to-africa-for-impact-text {
line-height: 1.6;
color: #10235e;
margin: 0;
}
/* Tablet styles */
@media (max-width: 768px) {
.ciyota-travel-to-africa-for-impact-container {
padding: 30px 20px 0 20px;
}
.ciyota-travel-to-africa-for-impact-grid {
grid-template-columns: 1fr;
min-height: auto;
}
.ciyota-travel-to-africa-for-impact-content {
padding: 20px 0 20px 0;
}
}
/* Mobile styles */
@media (max-width: 480px) {
.ciyota-travel-to-africa-for-impact-container {
padding: 20px 20px 0 20px;
}
.ciyota-travel-to-africa-for-impact-grid {
grid-template-columns: 1fr;
min-height: auto;
}
.ciyota-travel-to-africa-for-impact-content {
padding: 20px 0 20px 0;
}
.ciyota-travel-to-africa-for-impact-title {
margin-bottom: 15px;
}
}
/* ciyota-travel-to-africa Get Involved Section
=============================================== */
.ciyota-travel-to-africa-get-involved {
width: 100%;
background-color: #10235e;
display: flex;
min-height: 70vh;
}
.ciyota-travel-to-africa-get-involved-content {
width: 50%;
padding: 50px;
display: flex;
flex-direction: column;
justify-content: center;
}
.ciyota-travel-to-africa-get-involved-image-section {
width: 50%;
position: relative;
background-image: url('/proxy/https/ciyota.org/assets/img/traveltoafricaforimpact/get-inv-students-in-compound.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.ciyota-travel-to-africa-get-involved-title {
margin: 0 0 20px 0;
color: #FFFFFF;
font-weight: bold;
font-size: 24px;
}
.ciyota-travel-to-africa-get-involved-text {
line-height: 1.6;
color: #FFFFFF;
margin: 0 0 30px 0;
}
/* Form Styles */
.ciyota-travel-to-africa-get-involved-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.ciyota-travel-to-africa-get-involved-form-group {
display: flex;
flex-direction: column;
}
.ciyota-travel-to-africa-get-involved-form-group label {
color: #FFFFFF;
margin-bottom: 8px;
font-weight: 500;
}
.ciyota-travel-to-africa-get-involved-form-group input,
.ciyota-travel-to-africa-get-involved-form-group select,
.ciyota-travel-to-africa-get-involved-form-group textarea {
padding: 12px;
border: 2px solid #ffc32c;
border-radius: 5px;
background-color: #FFFFFF;
color: #ffc32c;
font-size: 16px;
font-weight: bold;
transition: border-color 0.3s ease;
font-family: inherit;
}
.ciyota-travel-to-africa-get-involved-form-group input::placeholder,
.ciyota-travel-to-africa-get-involved-form-group textarea::placeholder {
color: #ffc32c;
opacity: 0.7;
font-weight: bold;
}
.ciyota-travel-to-africa-get-involved-form-group select option {
color: #ffc32c;
font-weight: bold;
background-color: #FFFFFF;
}
.ciyota-travel-to-africa-get-involved-form-group textarea {
min-height: 100px;
resize: vertical;
}
.ciyota-travel-to-africa-get-involved-form-group input:focus,
.ciyota-travel-to-africa-get-involved-form-group select:focus,
.ciyota-travel-to-africa-get-involved-form-group textarea:focus {
outline: none;
border-color: #FFFFFF;
box-shadow: 0 0 0 2px rgba(255, 195, 44, 0.3);
color: #ffc32c;
font-weight: bold;
}
.ciyota-travel-to-africa-get-involved-radio-group {
display: flex;
gap: 20px;
margin-top: 8px;
}
.ciyota-travel-to-africa-get-involved-radio-option {
display: flex;
align-items: center;
gap: 8px;
}
.ciyota-travel-to-africa-get-involved-radio-option input[type="radio"] {
width: auto;
margin: 0;
}
.ciyota-travel-to-africa-get-involved-radio-option label {
margin: 0;
color: #FFFFFF;
cursor: pointer;
}
.ciyota-travel-to-africa-get-involved-submit-btn {
background-color: #ffc32c;
color: #10235e;
padding: 15px 30px;
border: none;
border-radius: 5px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 20px;
}
.ciyota-travel-to-africa-get-involved-submit-btn:hover {
background-color: #e6b029;
transform: translateY(-2px);
}
.ciyota-travel-to-africa-get-involved-submit-btn:disabled {
background-color: #cccccc;
cursor: not-allowed;
transform: none;
}
/* Success/Error Messages */
.ciyota-travel-to-africa-get-involved-message {
padding: 15px;
border-radius: 5px;
margin: 0 0 20px 0;
display: none;
}
.ciyota-travel-to-africa-get-involved-message.success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.ciyota-travel-to-africa-get-involved-message.error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
/* Timezone Display */
#timezone-display {
background-color: rgba(255, 195, 44, 0.1);
color: #ffc32c;
padding: 10px;
border-radius: 5px;
margin: 10px 0;
font-size: 14px;
border-left: 4px solid #ffc32c;
}
/* Mobile styles */
@media (max-width: 768px) {
.ciyota-travel-to-africa-get-involved {
flex-direction: column;
min-height: auto;
}
.ciyota-travel-to-africa-get-involved-content {
width: 100%;
padding: 20px;
order: 2;
}
.ciyota-travel-to-africa-get-involved-image-section {
width: 100%;
height: 300px;
order: 1;
}
.ciyota-travel-to-africa-get-involved-radio-group {
flex-direction: column;
gap: 10px;
}
.ciyota-travel-to-africa-get-involved-title {
font-size: 20px;
}
.ciyota-travel-to-africa-get-involved-form {
gap: 15px;
}
}
@media (max-width: 480px) {
.ciyota-travel-to-africa-get-involved-content {
padding: 20px;
}
}
/* Trip Booking Section
=============================== */
.ciyota-travel-to-africa-for-impact-trip {
width: 100%;
background-color: #FFFFFF;
display: flex;
min-height: 80vh;
}
.ciyota-travel-to-africa-for-impact-trip-content {
width: 30%;
padding: 50px;
display: flex;
flex-direction: column;
justify-content: center;
background-color: #ffc32c;
}
.ciyota-travel-to-africa-for-impact-trip-form-section {
width: 70%;
padding: 50px;
background-color: #FFFFFF;
display: flex;
flex-direction: column;
justify-content: center;
}
.ciyota-travel-to-africa-for-impact-trip-title {
margin: 0 0 20px 0;
color: #10235e;
font-weight: bold;
font-size: 28px;
}
.ciyota-travel-to-africa-for-impact-trip-text {
line-height: 1.7;
color: #10235e;
margin: 0 0 30px 0;
font-size: 16px;
}
.ciyota-travel-to-africa-for-impact-trip-cta {
background-color: #10235e;
color: #ffc32c;
padding: 15px 25px;
border-radius: 8px;
font-weight: bold;
text-align: center;
margin-top: 20px;
}
/* Form Section Styles */
.ciyota-travel-to-africa-for-impact-trip-form-title {
margin: 0 0 30px 0;
color: #10235e;
font-weight: bold;
font-size: 32px;
text-align: center;
}
.ciyota-travel-to-africa-for-impact-trip-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
max-width: 800px;
margin: 0 auto;
}
.ciyota-travel-to-africa-for-impact-trip-form-group {
display: flex;
flex-direction: column;
}
.ciyota-travel-to-africa-for-impact-trip-form-group.full-width {
grid-column: 1 / -1;
}
.ciyota-travel-to-africa-for-impact-trip-form-group label {
color: #10235e;
margin-bottom: 8px;
font-weight: 600;
font-size: 14px;
}
.ciyota-travel-to-africa-for-impact-trip-form-group input,
.ciyota-travel-to-africa-for-impact-trip-form-group select,
.ciyota-travel-to-africa-for-impact-trip-form-group textarea {
padding: 14px;
border: 2px solid #10235e;
border-radius: 8px;
background-color: #FFFFFF;
color: #10235e;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
font-family: inherit;
}
.ciyota-travel-to-africa-for-impact-trip-form-group input:focus,
.ciyota-travel-to-africa-for-impact-trip-form-group select:focus,
.ciyota-travel-to-africa-for-impact-trip-form-group textarea:focus {
outline: none;
border-color: #ffc32c;
box-shadow: 0 0 0 3px rgba(255, 195, 44, 0.2);
}
.ciyota-travel-to-africa-for-impact-trip-form-group textarea {
min-height: 100px;
resize: vertical;
}
.ciyota-travel-to-africa-for-impact-trip-form-group input::placeholder,
.ciyota-travel-to-africa-for-impact-trip-form-group textarea::placeholder {
color: #666;
opacity: 0.8;
}
.ciyota-travel-to-africa-for-impact-trip-duration {
background-color: #f8f9fa;
border: 2px solid #ffc32c;
border-radius: 8px;
padding: 15px;
text-align: center;
font-weight: bold;
color: #10235e;
margin: 20px 0;
}
.ciyota-travel-to-africa-for-impact-trip-submit-btn {
background-color: #ffc32c;
color: #10235e;
padding: 18px 40px;
border: none;
border-radius: 8px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 30px;
justify-self: center;
grid-column: 1 / -1;
}
.ciyota-travel-to-africa-for-impact-trip-submit-btn:hover {
background-color: #10235e;
color: #ffc32c;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(16, 35, 94, 0.3);
}
.ciyota-travel-to-africa-for-impact-trip-submit-btn:disabled {
background-color: #cccccc;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* Success/Error Messages */
.ciyota-travel-to-africa-for-impact-trip-message {
padding: 15px;
border-radius: 8px;
margin: 0 0 20px 0;
display: none;
grid-column: 1 / -1;
text-align: center;
font-weight: bold;
}
.ciyota-travel-to-africa-for-impact-trip-message.success {
background-color: #d4edda;
color: #155724;
border: 2px solid #c3e6cb;
}
.ciyota-travel-to-africa-for-impact-trip-message.error {
background-color: #f8d7da;
color: #721c24;
border: 2px solid #f5c6cb;
}
/* Radio Group Styles */
.ciyota-travel-to-africa-for-impact-trip-radio-group {
display: flex;
gap: 30px;
margin-top: 8px;
}
.ciyota-travel-to-africa-for-impact-trip-radio-option {
display: flex;
align-items: center;
gap: 8px;
}
.ciyota-travel-to-africa-for-impact-trip-radio-option input[type="radio"] {
width: 20px;
height: 20px;
margin: 0;
}
.ciyota-travel-to-africa-for-impact-trip-radio-option label {
margin: 0;
color: #10235e;
cursor: pointer;
font-weight: 600;
}
/* Mobile Responsive */
@media (max-width: 968px) {
.ciyota-travel-to-africa-for-impact-trip {
flex-direction: column;
min-height: auto;
}
.ciyota-travel-to-africa-for-impact-trip-content {
width: 100%;
padding: 20px;
order: 1;
}
.ciyota-travel-to-africa-for-impact-trip-form-section {
width: 100%;
padding: 20px;
order: 2;
}
.ciyota-travel-to-africa-for-impact-trip-form {
grid-template-columns: 1fr;
gap: 15px;
}
.ciyota-travel-to-africa-for-impact-trip-radio-group {
flex-direction: column;
gap: 15px;
}
.ciyota-travel-to-africa-for-impact-trip-title {
font-size: 24px;
}
.ciyota-travel-to-africa-for-impact-trip-form-title {
font-size: 26px;
}
}
@media (max-width: 480px) {
.ciyota-travel-to-africa-for-impact-trip-content {
padding: 20px;
}
.ciyota-travel-to-africa-for-impact-trip-form-section {
padding: 20px;
}
.ciyota-travel-to-africa-for-impact-trip-title {
font-size: 20px;
}
.ciyota-travel-to-africa-for-impact-trip-form-title {
font-size: 22px;
}
}
/* Hero Section ciyota-travel-to-africa-for-impact-hero
=============================== */
.ciyota-travel-to-africa-for-impact-hero {
width: 100%;
height: 100vh;
min-height: 600px;
background-image: url('/proxy/https/ciyota.org/assets/img/traveltoafricaforimpact/hero-anim.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
position: relative;
}
.ciyota-travel-to-africa-for-impact-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, rgba(16, 35, 94, 0.9) 0%, rgba(16, 35, 94, 0.7) 40%, rgba(16, 35, 94, 0.3) 70%, transparent 100%);
z-index: 1;
}
.ciyota-travel-to-africa-for-impact-hero-content {
position: relative;
z-index: 2;
max-width: 100%;
margin: 0 auto;
padding: 50px;
width: 100%;
}
.ciyota-travel-to-africa-for-impact-hero-container {
max-width: 600px;
color: #FFFFFF;
}
.ciyota-travel-to-africa-for-impact-hero-title {
font-size: 5.2rem;
font-weight: bold;
line-height: 1.2;
margin: 0 0 20px 0;
color: #ffc32c;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.ciyota-travel-to-africa-for-impact-hero-subtitle {
font-size: 1.7rem;
line-height: 1.6;
margin: 0 0 30px 0;
color: #FFFFFF;
opacity: 0.95;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.ciyota-travel-to-africa-for-impact-hero-cta {
display: flex;
gap: 20px;
flex-wrap: wrap;
margin-top: 40px;
}
.ciyota-travel-to-africa-for-impact-hero-btn {
padding: 22px 45px;
border-radius: 8px;
font-size: 1.6rem;
font-weight: bold;
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer;
border: none;
display: inline-block;
text-align: center;
}
.ciyota-travel-to-africa-for-impact-hero-btn-primary {
background-color: #ffc32c;
color: #10235e;
}
.ciyota-travel-to-africa-for-impact-hero-btn-primary:hover {
background-color: #e6b029;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 195, 44, 0.3);
}
.ciyota-travel-to-africa-for-impact-hero-btn-secondary {
background-color: transparent;
color: #FFFFFF;
border: 2px solid #FFFFFF;
}
.ciyota-travel-to-africa-for-impact-hero-btn-secondary:hover {
background-color: #FFFFFF;
color: #10235e;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
}
/* Responsive Design */
@media (max-width: 968px) {
.ciyota-travel-to-africa-for-impact-hero {
height: 80vh;
min-height: 500px;
}
.ciyota-travel-to-africa-for-impact-hero-content {
padding: 50px;
}
.ciyota-travel-to-africa-for-impact-hero-title {
font-size: 4rem;
}
.ciyota-travel-to-africa-for-impact-hero-subtitle {
font-size: 1.6rem;
}
.ciyota-travel-to-africa-for-impact-hero-btn {
font-size: 1.4rem;
padding: 20px 40px;
}
.ciyota-travel-to-africa-for-impact-hero::before {
background: linear-gradient(90deg, rgba(16, 35, 94, 0.8) 0%, rgba(16, 35, 94, 0.6) 60%, rgba(16, 35, 94, 0.4) 100%);
}
}
@media (max-width: 768px) {
.ciyota-travel-to-africa-for-impact-hero {
height: 70vh;
min-height: 450px;
}
.ciyota-travel-to-africa-for-impact-hero-content {
padding: 50px;
}
.ciyota-travel-to-africa-for-impact-hero-title {
font-size: 3.2rem;
}
.ciyota-travel-to-africa-for-impact-hero-subtitle {
font-size: 1.4rem;
}
.ciyota-travel-to-africa-for-impact-hero-cta {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.ciyota-travel-to-africa-for-impact-hero-btn {
width: 100%;
max-width: 320px;
font-size: 1.3rem;
padding: 18px 35px;
}
.ciyota-travel-to-africa-for-impact-hero::before {
background: linear-gradient(180deg, rgba(16, 35, 94, 0.7) 0%, rgba(16, 35, 94, 0.5) 50%, rgba(16, 35, 94, 0.8) 100%);
}
}
@media (max-width: 480px) {
.ciyota-travel-to-africa-for-impact-hero {
height: 60vh;
min-height: 400px;
}
.ciyota-travel-to-africa-for-impact-hero-content {
padding: 50px;
}
.ciyota-travel-to-africa-for-impact-hero-title {
font-size: 2.5rem;
}
.ciyota-travel-to-africa-for-impact-hero-subtitle {
font-size: 1.2rem;
}
.ciyota-travel-to-africa-for-impact-hero-btn {
font-size: 1.2rem;
padding: 16px 32px;
}
}
/* Animation */
.ciyota-travel-to-africa-for-impact-hero-container {
animation: fadeInUp 1s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/*==================================
CIYOTA NEW NAVIGATION MENUE BAR
===================================*/
.ciyota-new-nav-bar {
position: fixed;
top: 60px;
/* Start below the top bar (60px height) */
left: 0;
width: 100%;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(15px);
border-bottom: 2px solid rgba(16, 35, 94, 0.1);
z-index: 999;
/* Lower than top bar to avoid interference */
transition: none;
/* Remove transition for smooth real-time movement */
box-shadow: 0 4px 30px rgba(16, 35, 94, 0.08);
transform: translateY(0);
/* Use transform for smoother animation */
}
.ciyota-new-nav-bar.moving {
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 5px 35px rgba(16, 35, 94, 0.12);
}
.ciyota-new-nav-bar.stuck {
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 6px 40px rgba(16, 35, 94, 0.15);
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.ciyota-new-nav-bar-container {
max-width: 100%;
/* Changed from 1200px to 100% for full width */
width: 100%;
margin: 0 auto;
padding: 0 50px;
/* Updated from 20px to 50px */
display: flex;
align-items: center;
justify-content: space-between;
height: 80px;
}
/* Logo */
.ciyota-new-nav-bar-brand h1 {
margin: 0;
}
.ciyota-new-nav-bar-brand a {
text-decoration: none;
}
.ciyota-new-nav-bar-logo {
height: 85px;
/* Increased from 70px to 85px for even more prominence */
width: auto;
transition: all 0.3s ease;
}
.ciyota-new-nav-bar-logo:hover {
transform: scale(1.05);
filter: drop-shadow(0 4px 8px rgba(255, 195, 44, 0.4));
}
/* Desktop Navigation */
.ciyota-new-nav-bar-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 2px;
/* Reduced from 5px to 2px */
}
.ciyota-new-nav-bar-item {
position: relative;
}
.ciyota-new-nav-bar-link {
display: flex;
align-items: center;
gap: 6px;
padding: 12px 16px;
/* Reduced horizontal padding from 18px to 16px */
color: #10235e;
text-decoration: none;
font-weight: 600;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.2px;
border-radius: 8px;
transition: all 0.3s ease;
white-space: nowrap;
}
.ciyota-new-nav-bar-link:hover {
background: #10235e;
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(16, 35, 94, 0.25);
}
.ciyota-new-nav-bar-item.active .ciyota-new-nav-bar-link {
color: #10235e;
background: rgba(255, 195, 44, 0.15);
font-weight: 700;
}
.ciyota-new-nav-bar-dropdown-icon {
color: #ffc32c;
font-size: 10px;
transition: transform 0.3s ease;
}
.ciyota-new-nav-bar-item:hover .ciyota-new-nav-bar-dropdown-icon {
transform: rotate(180deg);
}
/* Desktop Dropdown */
.ciyota-new-nav-bar-dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: white;
min-width: 250px;
border: 2px solid #ffc32c;
border-radius: 0;
box-shadow: 0 8px 32px rgba(16, 35, 94, 0.15);
padding: 0;
margin: 0;
margin-top: 0;
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(-10px);
transition: all 0.3s ease;
list-style: none !important;
list-style-type: none !important;
}
.ciyota-new-nav-bar-dropdown li {
list-style: none !important;
list-style-type: none !important;
margin: 0;
padding: 0;
border-bottom: 1px solid rgba(16, 35, 94, 0.3);
background: white;
}
.ciyota-new-nav-bar-dropdown li:before {
content: none !important;
}
.ciyota-new-nav-bar-dropdown li:last-child {
border-bottom: none;
}
.ciyota-new-nav-bar-dropdown::before {
content: '';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #ffc32c;
}
.ciyota-new-nav-bar-dropdown::after {
content: '';
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
}
.ciyota-new-nav-bar-item:hover .ciyota-new-nav-bar-dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.ciyota-new-nav-bar-dropdown-link {
display: block;
padding: 15px 20px;
color: #10235e;
text-decoration: none;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.2px;
transition: all 0.3s ease;
width: 100%;
box-sizing: border-box;
}
.ciyota-new-nav-bar-dropdown-link:hover {
background: #ffc32c;
color: #10235e;
font-weight: 600;
}
/* Mobile Toggle - Professional toggle button */
.ciyota-new-nav-bar-toggle {
display: none;
background: #10235e;
border: none;
color: white;
padding: 12px 15px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.ciyota-new-nav-bar-toggle:hover {
background: #ffc32c;
color: #10235e;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(16, 35, 94, 0.2);
}
.ciyota-new-nav-bar-toggle:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(16, 35, 94, 0.2);
}
.ciyota-new-nav-bar-toggle i {
transition: all 0.3s ease;
font-size: 16px;
}
/* When menu is open, style the toggle differently */
.ciyota-new-nav-bar-toggle.menu-open {
background: #ffc32c;
color: #10235e;
}
.ciyota-new-nav-bar-toggle.menu-open:hover {
background: #10235e;
color: white;
}
/* Mobile Overlay */
.ciyota-new-nav-bar-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(16, 35, 94, 0.5);
backdrop-filter: blur(4px);
z-index: 998;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.ciyota-new-nav-bar-overlay.active {
opacity: 1;
visibility: visible;
}
/* Mobile Side Navigation */
.ciyota-new-nav-bar-mobile {
position: fixed;
top: 0;
right: -350px;
width: 320px;
height: 100vh;
background: white;
z-index: 999;
padding: 80px 0 30px 0;
overflow-y: auto;
transition: right 0.4s ease;
box-shadow: -4px 0 20px rgba(16, 35, 94, 0.15);
border-left: 3px solid #ffc32c;
}
.ciyota-new-nav-bar-mobile.active {
right: 0;
}
.ciyota-new-nav-bar-mobile-close {
position: absolute;
top: 20px;
right: 20px;
background: #10235e;
color: white;
border: none;
width: 40px;
height: 40px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.ciyota-new-nav-bar-mobile-close:hover {
background: #ffc32c;
color: #10235e;
transform: rotate(90deg);
}
.ciyota-new-nav-bar-mobile-item {
border-bottom: 1px solid rgba(16, 35, 94, 0.1);
}
.ciyota-new-nav-bar-mobile-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 25px;
color: #10235e;
text-decoration: none;
font-weight: 600;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.2px;
border-left: 4px solid transparent;
transition: all 0.3s ease;
}
.ciyota-new-nav-bar-mobile-link:hover {
background: rgba(255, 195, 44, 0.1);
border-left-color: #ffc32c;
}
.ciyota-new-nav-bar-mobile-item.active .ciyota-new-nav-bar-mobile-link {
color: #10235e;
background: rgba(255, 195, 44, 0.15);
font-weight: 700;
}
.ciyota-new-nav-bar-mobile-dropdown {
max-height: 0;
overflow: hidden;
background: rgba(255, 195, 44, 0.08);
transition: max-height 0.3s ease;
}
.ciyota-new-nav-bar-mobile-item.open .ciyota-new-nav-bar-mobile-dropdown {
max-height: 300px;
}
.ciyota-new-nav-bar-mobile-dropdown-link {
display: block;
padding: 15px 40px;
color: #10235e;
text-decoration: none;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
border-bottom: 1px solid rgba(16, 35, 94, 0.08);
transition: all 0.3s ease;
}
.ciyota-new-nav-bar-mobile-dropdown-link:last-child {
border-bottom: none;
}
.ciyota-new-nav-bar-mobile-dropdown-link:hover {
background: #ffc32c;
color: #10235e;
font-weight: 600;
padding-left: 45px;
}
/* Responsive - Proper spacing for each screen size */
@media (max-width: 992px) {
.ciyota-new-nav-bar-menu {
display: none;
}
.ciyota-new-nav-bar-toggle {
display: block;
}
}
@media (max-width: 600px) {
.ciyota-new-nav-bar {
top: 50px;
/* Top bar is 50px on mobile */
}
.demo-content {
margin-top: 130px;
/* 50px top bar + 70px nav + 10px buffer */
}
}
@media (max-width: 576px) {
.ciyota-new-nav-bar-container {
height: 70px;
padding: 0 50px;
/* Updated to match 50px padding */
}
.ciyota-new-nav-bar-logo {
height: 65px;
/* Increased from 55px to 65px for better visibility */
}
.ciyota-new-nav-bar-mobile {
width: 280px;
right: -300px;
}
}
@media (max-width: 480px) {
.demo-content {
margin-top: 125px;
/* Adjust for smaller screens */
}
}
@media (max-width: 375px) {
.ciyota-new-nav-bar {
top: 40px;
/* Top bar is 40px on very small mobile */
}
.ciyota-new-nav-bar-container {
padding: 0 30px;
/* Reduced padding for small screens */
}
.ciyota-new-nav-bar-logo {
height: 60px;
/* Increased from 50px to 60px */
}
.demo-content {
margin-top: 115px;
/* 40px top bar + 70px nav + 5px buffer */
padding: 40px 30px;
/* Reduced padding for small screens */
}
.demo-section {
padding: 40px 30px;
/* Reduced padding for small screens */
}
}
@media (max-width: 320px) {
.ciyota-new-nav-bar-container {
padding: 0 20px;
/* Further reduced for very small screens */
}
.ciyota-new-nav-bar-logo {
height: 55px;
/* Increased from 45px to 55px */
}
.demo-content {
margin-top: 110px;
padding: 40px 20px;
/* Further reduced for very small screens */
}
.demo-section {
padding: 40px 20px;
/* Further reduced for very small screens */
}
}
/* Demo Content - matching navigation width approach */
.demo-content {
margin-top: 160px;
padding: 40px 50px;
/* Updated to match 50px padding */
max-width: 100%;
/* Changed from 1200px to 100% to match nav */
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.demo-content h2 {
color: #10235e;
margin-bottom: 20px;
}
.demo-content p {
color: #666;
line-height: 1.6;
margin-bottom: 30px;
}
.demo-section {
background: #f8f9ff;
padding: 40px 50px;
/* Updated to match 50px padding */
border-radius: 12px;
border: 2px solid rgba(255, 195, 44, 0.2);
height: 800px;
margin-top: 30px;
}
.demo-section h3 {
color: #10235e;
margin-bottom: 20px;
}
/* Popup Overlay for TRAVEL TO AFRICA FOR IMPACT
===============================================*/
.ciyota-popup-traveltoafrica-forimpact-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index: 999999;
display: none;
opacity: 0;
transition: opacity 0.4s ease;
}
.ciyota-popup-traveltoafrica-forimpact-overlay.show {
display: block;
opacity: 1;
}
/* Container */
.ciyota-popup-traveltoafrica-forimpact-container {
background: white;
border-radius: 15px;
max-width: 500px;
width: 90%;
max-height: 90vh;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.7);
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ciyota-popup-traveltoafrica-forimpact-overlay.show .ciyota-popup-traveltoafrica-forimpact-container {
transform: translate(-50%, -50%) scale(1);
}
/* Header */
.ciyota-popup-traveltoafrica-forimpact-header {
height: 150px;
background-image: url('/proxy/https/ciyota.org/assets/img/traveltoafricaforimpact/hero-anim.png');
background-size: cover;
background-position: center;
position: relative;
}
.ciyota-popup-traveltoafrica-forimpact-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(16, 35, 94, 0.8), rgba(255, 195, 44, 0.4));
}
/* Close button */
.ciyota-popup-traveltoafrica-forimpact-close {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
cursor: pointer;
z-index: 10;
}
/* Content */
.ciyota-popup-traveltoafrica-forimpact-content {
padding: 30px;
text-align: center;
}
.ciyota-popup-traveltoafrica-forimpact-title {
color: #10235e;
font-weight: bold;
margin: 0 0 15px 0;
}
.ciyota-popup-traveltoafrica-forimpact-text {
margin: 0 0 25px 0;
line-height: 1.5;
}
/* Buttons */
.ciyota-popup-traveltoafrica-forimpact-buttons {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
.ciyota-popup-traveltoafrica-forimpact-btn {
padding: 12px 25px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.ciyota-popup-traveltoafrica-forimpact-btn-primary {
background: #10235e;
color: white;
}
.ciyota-popup-traveltoafrica-forimpact-btn-primary:hover {
background: #ffc32c;
color: #10235e;
}
.ciyota-popup-traveltoafrica-forimpact-btn-secondary {
background: transparent;
color: #10235e;
border: 2px solid #ddd;
}
.ciyota-popup-traveltoafrica-forimpact-btn-secondary:hover {
background: #f5f5f5;
}
/* Mobile */
@media (max-width: 768px) {
.ciyota-popup-traveltoafrica-forimpact-container {
width: 95%;
}
.ciyota-popup-traveltoafrica-forimpact-content {
padding: 20px;
}
.ciyota-popup-traveltoafrica-forimpact-buttons {
flex-direction: column;
}
.ciyota-popup-traveltoafrica-forimpact-btn {
width: 100%;
}
}
/*blinking new banner on the report
===================================*/
.new-banner-report {
background-color: green;
color: white;
font-size: 12px;
font-weight: bold;
padding: 3px 8px;
margin-left: 10px;
border-radius: 6px;
animation: blink 1s infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
}
/*HELPME FILL CIYOTA BAG CAMPAIGN
==================================*/
.fill-my-ciyota-bag {
margin: 0;
padding: 0;
box-sizing: border-box;
width: 100%;
background-color: #ffffff;
padding: 60px 50px;
position: relative;
overflow: hidden;
}
.fill-my-ciyota-bag::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 20%, rgba(16, 35, 94, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(16, 35, 94, 0.03) 0%, transparent 50%);
pointer-events: none;
}
.fill-my-ciyota-bag-container {
max-width: 100%;
margin: 0 auto;
position: relative;
z-index: 1;
color: #10235e;
line-height: 1.6;
}
.fill-my-ciyota-bag-header {
text-align: center;
margin-bottom: 40px;
}
.fill-my-ciyota-bag-title {
color: #10235e;
margin-bottom: 20px;
font-weight: bold;
line-height: 1.2;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.fill-my-ciyota-bag-content-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
.fill-my-ciyota-bag-text {
color: #10235e;
line-height: 1.6;
}
.fill-my-ciyota-bag-video {
position: relative;
width: 100%;
max-width: 560px;
height: 315px;
margin: 0 auto;
}
.fill-my-ciyota-bag-video iframe {
width: 560px;
height: 315px;
max-width: 100%;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(16, 35, 94, 0.15);
border: none;
}
.fill-my-ciyota-bag-cta {
margin-top: 30px;
}
.fill-my-ciyota-bag-donate-button {
display: inline-block;
background: #10235e;
color: white;
padding: 15px 30px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
transition: all 0.3s ease;
border: 3px solid #10235e;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 4px 15px rgba(16, 35, 94, 0.3);
}
.fill-my-ciyota-bag-donate-button:hover {
background: white;
color: #10235e;
border-color: #10235e;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(16, 35, 94, 0.4);
}
.fill-my-ciyota-bag-subtitle {
color: #10235e;
opacity: 0.8;
margin-bottom: 30px;
font-weight: 500;
}
/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
.fill-my-ciyota-bag {
padding: 30px 20px;
}
.fill-my-ciyota-bag-content-wrapper {
grid-template-columns: 1fr;
gap: 30px;
}
.fill-my-ciyota-bag-video iframe {
width: 100%;
height: 250px;
}
.fill-my-ciyota-bag-cta {
text-align: center;
}
}
@media screen and (max-width: 480px) {
.fill-my-ciyota-bag {
padding: 25px 15px;
}
.fill-my-ciyota-bag-video iframe {
width: 100%;
height: 200px;
}
}
@media screen and (max-width: 360px) {
.fill-my-ciyota-bag {
padding: 20px 10px;
}
}
@media screen and (max-width: 320px) {
.fill-my-ciyota-bag {
padding: 15px 8px;
}
}
.christmas-ciyota-anima {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
overflow: hidden;
}
.christmas-ciyota-anima * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.christmas-ciyota-anima-snowflake {
position: absolute;
top: -10px;
color: white;
font-size: 1em;
animation: christmas-ciyota-anima-fall linear infinite;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}
.christmas-ciyota-anima-element {
position: absolute;
top: -50px;
animation: christmas-ciyota-anima-fall-rotate linear infinite;
font-size: 1.5em;
}
@keyframes christmas-ciyota-anima-fall {
to {
transform: translateY(100vh);
}
}
@keyframes christmas-ciyota-anima-fall-rotate {
to {
transform: translateY(100vh) rotate(360deg);
}
}
.christmas-ciyota-anima-star {
position: absolute;
background: white;
width: 2px;
height: 2px;
border-radius: 50%;
animation: christmas-ciyota-anima-twinkle 2s infinite;
}
@keyframes christmas-ciyota-anima-twinkle {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
/* BID CIYOTA PAGE */
.best-ciyota-presentation-about {
padding: 60px 20px;
background: #f8f9fa;
width: 100%;
}
.best-ciyota-presentation-container {
max-width: 100%;
width: 100%;
padding: 0 20px;
margin: 0 auto;
}
.best-ciyota-presentation-about-content {
padding: 0 20px;
margin-bottom: 50px;
width: 100%;
max-width: 100%;
}
.best-ciyota-presentation-values-title {
color: #10235e;
font-size: 36px;
margin-bottom: 28px;
font-weight: 700;
}
.best-ciyota-presentation-about-text {
color: #4a5568;
font-size: 16px;
line-height: 1.9;
margin-bottom: 20px;
}
.best-ciyota-presentation-about-text strong {
color: #2d3748;
font-weight: 600;
}
.amos-principle {
color: #10235e;
font-weight: 700;
}
.best-ciyota-presentation-values-section {
background: #ffffff;
padding: 40px 20px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
width: 100%;
max-width: 100%;
}
.best-ciyota-presentation-values-section h2 {
color: #10235e;
font-size: 28px;
margin-bottom: 32px;
font-weight: 700;
text-align: center;
}
/* Bid Files Styles */
.ciyota-bid-files {
width: 100%;
max-width: 100%;
}
.ciyota-bid-files__container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.ciyota-bid-files__item {
background: #ffffff;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 32px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.ciyota-bid-files__item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: #ffc32c;
transform: scaleX(0);
transition: transform 0.3s ease;
}
.ciyota-bid-files__item:hover {
border-color: #10235e;
box-shadow: 0 8px 24px rgba(16, 35, 94, 0.15);
transform: translateY(-4px);
}
.ciyota-bid-files__item:hover::before {
transform: scaleX(1);
}
.ciyota-bid-files__icon {
width: 72px;
height: 72px;
background: #fff8e1;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: all 0.3s ease;
}
.ciyota-bid-files__item:hover .ciyota-bid-files__icon {
background: #10235e;
}
.ciyota-bid-files__icon svg {
color: #10235e;
transition: color 0.3s ease;
}
.ciyota-bid-files__item:hover .ciyota-bid-files__icon svg {
color: #ffffff;
}
.ciyota-bid-files__content {
width: 100%;
}
.ciyota-bid-files__content p {
font-size: 17px;
font-weight: 600;
color: #2d3748;
margin-bottom: 20px;
line-height: 1.5;
word-wrap: break-word;
}
.ciyota-bid-files__download {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: #f7fafc;
color: #10235e;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
border: 2px solid #e2e8f0;
}
.ciyota-bid-files__download:hover {
background: #ffc32c;
color: #10235e;
border-color: #ffc32c;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 195, 44, 0.3);
}
.ciyota-bid-files__download svg {
flex-shrink: 0;
transition: transform 0.3s ease;
}
.ciyota-bid-files__download:hover svg {
transform: translateY(2px);
}
/* Responsive Design */
@media (max-width: 1024px) {
.best-ciyota-presentation-about {
padding: 50px 20px;
}
.best-ciyota-presentation-container {
padding: 0 20px;
}
.best-ciyota-presentation-about-content {
padding: 0 20px;
}
.best-ciyota-presentation-values-section {
padding: 35px 20px;
}
.best-ciyota-presentation-values-title {
font-size: 30px;
}
.best-ciyota-presentation-values-section h2 {
font-size: 26px;
}
.ciyota-bid-files__container {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (max-width: 768px) {
.best-ciyota-presentation-about {
padding: 40px 20px;
}
.best-ciyota-presentation-container {
padding: 0 20px;
}
.best-ciyota-presentation-about-content {
padding: 0 20px;
}
.best-ciyota-presentation-values-section {
padding: 30px 20px;
}
.best-ciyota-presentation-values-title {
font-size: 26px;
}
.best-ciyota-presentation-values-section h2 {
font-size: 24px;
margin-bottom: 24px;
}
.ciyota-bid-files__container {
grid-template-columns: 1fr;
gap: 20px;
}
.ciyota-bid-files__item {
padding: 24px 20px;
}
.ciyota-bid-files__icon {
width: 64px;
height: 64px;
}
}
@media (max-width: 480px) {
.best-ciyota-presentation-about {
padding: 32px 20px;
}
.best-ciyota-presentation-container {
padding: 0 20px;
}
.best-ciyota-presentation-about-content {
padding: 0 20px;
}
.best-ciyota-presentation-values-section {
padding: 24px 20px;
}
.best-ciyota-presentation-values-title {
font-size: 22px;
}
.best-ciyota-presentation-about-text {
font-size: 15px;
}
.best-ciyota-presentation-values-section h2 {
font-size: 20px;
}
.ciyota-bid-files__item {
padding: 20px;
}
.ciyota-bid-files__icon {
width: 56px;
height: 56px;
}
.ciyota-bid-files__content p {
font-size: 15px;
}
.ciyota-bid-files__download {
padding: 10px 20px;
font-size: 13px;
}
}
@media (max-width: 375px) {
.best-ciyota-presentation-about {
padding: 24px 20px;
}
.best-ciyota-presentation-container {
padding: 0 20px;
}
.best-ciyota-presentation-about-content {
padding: 0 20px;
}
.best-ciyota-presentation-values-section {
padding: 20px;
}
.best-ciyota-presentation-values-title {
font-size: 20px;
}
.best-ciyota-presentation-about-text {
font-size: 14px;
}
.best-ciyota-presentation-values-section h2 {
font-size: 18px;
}
.ciyota-bid-files__item {
padding: 16px;
}
.ciyota-bid-files__download {
padding: 8px 16px;
font-size: 12px;
}
}
/*ciyota-fifth-hero-style
=============================*/
.ciyota-fifth-hero-style-section {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
background: #10235e;
}
.ciyota-fifth-hero-style-container {
width: 100%;
max-width: 100%;
height: 100%;
padding: 50px;
position: relative;
display: flex;
align-items: center;
}
/* Slideshow Styles */
.ciyota-fifth-hero-style-slideshow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: #10235e;
}
.ciyota-fifth-hero-style-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1.5s ease-in-out;
}
.ciyota-fifth-hero-style-slide.active {
opacity: 1;
}
.ciyota-fifth-hero-style-slide-bg {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Desktop Background Images */
.ciyota-fifth-hero-style-slide:nth-child(1) .ciyota-fifth-hero-style-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/gotoschool-parent-reflect.png');
}
.ciyota-fifth-hero-style-slide:nth-child(2) .ciyota-fifth-hero-style-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/parents-children.png');
}
.ciyota-fifth-hero-style-slide:nth-child(3) .ciyota-fifth-hero-style-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/parents-in-training.png');
}
.ciyota-fifth-hero-style-slide:nth-child(4) .ciyota-fifth-hero-style-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/bag-distr.png');
}
.ciyota-fifth-hero-style-slide:nth-child(5) .ciyota-fifth-hero-style-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/jamy-with0kids.png');
}
.ciyota-fifth-hero-style-slide:nth-child(6) .ciyota-fifth-hero-style-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/tk-pier-skilling.png');
}
/* Add more background images as needed */
/* Content Card */
.ciyota-fifth-hero-style-content {
width: 35%;
z-index: 10;
position: relative;
}
.ciyota-fifth-hero-style-card {
background: rgba(16, 35, 94, 0.9);
border-radius: 25px;
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 195, 44, 0.3);
transition: transform 0.3s ease;
}
.ciyota-fifth-hero-style-card:hover {
transform: translateY(-5px);
border-color: rgba(255, 195, 44, 0.6);
}
.ciyota-fifth-hero-style-card-content {
padding: 30px;
}
.ciyota-fifth-hero-style-title {
font-size: 3.2rem;
font-weight: 900;
margin-bottom: 25px;
color: #ffc32c;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
position: relative;
padding-bottom: 15px;
letter-spacing: -0.5px;
opacity: 0;
transform: translateY(20px);
animation: ciyota-fifth-fade-in-up 1s ease 0.3s forwards;
}
.ciyota-fifth-hero-style-location {
margin-bottom: 20px;
}
.ciyota-fifth-hero-style-location-title {
color: #ffc32c;
font-size: 1.2rem;
font-weight: 600;
margin: 0 0 10px 0;
opacity: 0;
transform: translateY(20px);
animation: ciyota-fifth-fade-in-up 1s ease 0.6s forwards;
}
.ciyota-fifth-hero-style-location:nth-child(3) .ciyota-fifth-hero-style-location-title {
animation: ciyota-fifth-fade-in-up 1s ease 0.9s forwards;
}
.ciyota-fifth-hero-style-text {
color: rgba(255, 255, 255, 0.9);
margin: 0 0 15px 0;
line-height: 1.6;
opacity: 0;
transform: translateY(20px);
animation: ciyota-fifth-fade-in-up 1s ease 0.7s forwards;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
}
.ciyota-fifth-hero-style-location:nth-child(3) .ciyota-fifth-hero-style-text {
animation: ciyota-fifth-fade-in-up 1s ease 1s forwards;
}
.ciyota-fifth-hero-style-buttons {
display: flex;
gap: 15px;
margin-top: 25px;
}
/* Animation for fade in up */
@keyframes ciyota-fifth-fade-in-up {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.ciyota-fifth-hero-style-button {
background: #ffc32c;
color: #10235e;
border: none;
padding: 14px 32px;
border-radius: 50px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
flex: 1;
opacity: 0;
transform: translateY(20px);
animation: ciyota-fifth-fade-in-up 1s ease 1.2s forwards;
position: relative;
overflow: hidden;
z-index: 1;
text-transform: uppercase;
letter-spacing: 1px;
}
.ciyota-fifth-hero-style-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: #ffffff;
transition: width 0.4s ease;
z-index: -1;
}
.ciyota-fifth-hero-style-button a {
color: #10235e;
text-decoration: none;
display: block;
}
.ciyota-fifth-hero-style-button:hover {
background: #e6b02a;
transform: translateY(-2px);
}
.ciyota-fifth-hero-style-button:hover::before {
width: 100%;
}
/* Navigation Dots */
.ciyota-fifth-hero-style-dots {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
z-index: 15;
}
.ciyota-fifth-hero-style-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.ciyota-fifth-hero-style-dot.active {
background: #ffc32c;
transform: scale(1.2);
border-color: #10235e;
}
.ciyota-fifth-hero-style-dot:hover {
background: rgba(255, 195, 44, 0.7);
}
/* Mobile Responsive */
@media (max-width: 768px) {
.ciyota-fifth-hero-style-section {
height: 100vh;
}
.ciyota-fifth-hero-style-container {
padding: 25px;
align-items: flex-end;
padding-bottom: 80px;
}
.ciyota-fifth-hero-style-content {
width: 100%;
}
.ciyota-fifth-hero-style-card {
background: rgba(16, 35, 94, 0.95);
}
.ciyota-fifth-hero-style-card-content {
padding: 25px;
}
.ciyota-fifth-hero-style-title {
font-size: 2.5rem;
}
.ciyota-fifth-hero-style-location-title {
font-size: 1.1rem;
}
.ciyota-fifth-hero-style-buttons {
flex-direction: column;
gap: 10px;
}
/* Mobile Background Images */
.ciyota-fifth-hero-style-slide:nth-child(1) .ciyota-fifth-hero-style-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/mobile/secondaryschool-girl-mobile.png');
}
.ciyota-fifth-hero-style-slide:nth-child(2) .ciyota-fifth-hero-style-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/mobile/secondaryschool-girl-during-exams-mobile.png');
}
.ciyota-fifth-hero-style-slide:nth-child(3) .ciyota-fifth-hero-style-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/mobile/secondaryschool-happy-students-mobile.png');
}
.ciyota-fifth-hero-style-slide:nth-child(4) .ciyota-fifth-hero-style-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/mobile/secondaryschool-happy-girls-mobile.png');
}
.ciyota-fifth-hero-style-slide:nth-child(5) .ciyota-fifth-hero-style-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/mobile/primayschool-happy-girl-mobile.png');
}
.ciyota-fifth-hero-style-slide:nth-child(6) .ciyota-fifth-hero-style-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/mobile/primayschool-happy-boys-mobile.png');
}
/* Add more mobile background images as needed */
}
@media (max-width: 480px) {
.ciyota-fifth-hero-style-container {
padding: 20px;
}
.ciyota-fifth-hero-style-card-content {
padding: 20px;
}
.ciyota-fifth-hero-style-title {
font-size: 1.8rem;
}
.ciyota-fifth-hero-style-location-title {
font-size: 1rem;
}
.ciyota-fifth-hero-style-dots {
bottom: 20px;
}
}
/* University Logos Section - Completely Independent */
.ciyota-logos-section {
width: 100%;
background: rgb(16, 35, 94);
padding: 0;
position: relative;
z-index: 10;
}
.ciyota-logos-bar {
position: relative;
width: 100%;
max-width: 100%;
background: rgb(16, 35, 94);
border-radius: 0;
padding: 50px;
border: none;
box-shadow: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 30px;
}
.ciyota-logos-header {
width: 15%;
flex-shrink: 0;
}
.ciyota-logos-title {
font-size: 2rem;
font-weight: 900;
margin-bottom: -20px;
color: #ffc32c;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
position: relative;
padding-bottom: 15px;
letter-spacing: -0.5px;
text-transform: uppercase;
text-align: left;
line-height: 1.3;
opacity: 0;
transform: translateY(20px);
animation: ciyota-logos-fade-in-up 1s ease 0.3s forwards;
}
.ciyota-logos-track {
overflow: hidden;
position: relative;
flex: 1;
height: 120px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 10px 0;
opacity: 0;
transform: translateY(20px);
animation: ciyota-logos-fade-in-up 1s ease 0.5s forwards;
}
.ciyota-logos-slider {
display: flex;
gap: 10px;
animation: ciyota-logos-scroll 30s linear infinite;
width: fit-content;
}
.ciyota-logos-slider:hover {
animation-play-state: paused;
}
.ciyota-logo-item {
flex-shrink: 0;
width: 150px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.9);
border-radius: 8px;
padding: 15px;
transition: transform 0.3s ease;
}
.ciyota-logo-item:hover {
transform: scale(1.1);
}
.ciyota-logo-item img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
@keyframes ciyota-logos-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Vision & Mission Content - 4 Columns */
.ciyota-vision-mission-desktop {
width: 100%;
margin-top: 30px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.ciyota-vm-column {
flex: 1;
text-align: center;
}
.ciyota-vm-divider {
width: 2px;
height: 120px;
background: rgba(255, 195, 44, 0.5);
flex-shrink: 0;
}
.ciyota-vm-title {
color: #ffc32c;
font-weight: 700;
margin: 0 0 15px 0;
text-transform: uppercase;
opacity: 0;
transform: translateY(20px);
animation: ciyota-logos-fade-in-up 1s ease 0.8s forwards;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}
.ciyota-vm-column:nth-child(3) .ciyota-vm-title {
animation: ciyota-logos-fade-in-up 1s ease 1s forwards;
}
.ciyota-vm-column:nth-child(5) .ciyota-vm-title {
animation: ciyota-logos-fade-in-up 1s ease 1.2s forwards;
}
.ciyota-vm-column:nth-child(7) .ciyota-vm-title {
animation: ciyota-logos-fade-in-up 1s ease 1.4s forwards;
}
.ciyota-vm-text {
color: rgba(255, 255, 255, 0.9);
margin: 0 0 16px 0;
line-height: 1.6;
opacity: 0;
transform: translateY(20px);
animation: ciyota-logos-fade-in-up 1s ease 0.9s forwards;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
}
.ciyota-vm-column:nth-child(3) .ciyota-vm-text {
animation: ciyota-logos-fade-in-up 1s ease 1.1s forwards;
}
.ciyota-vm-column:nth-child(5) .ciyota-vm-text {
animation: ciyota-logos-fade-in-up 1s ease 1.3s forwards;
}
.ciyota-vm-column:nth-child(7) .ciyota-vm-text {
animation: ciyota-logos-fade-in-up 1s ease 1.5s forwards;
}
/* Sponsor Button */
.ciyota-sponsor-button {
background: #ffc32c;
color: #10235e;
border: none;
padding: 14px 32px;
border-radius: 50px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
display: inline-block;
opacity: 0;
transform: translateY(20px);
animation: ciyota-logos-fade-in-up 1s ease 1.4s forwards;
position: relative;
overflow: hidden;
z-index: 1;
text-transform: uppercase;
letter-spacing: 1px;
}
.ciyota-sponsor-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: #ffffff;
transition: width 0.4s ease;
z-index: -1;
}
.ciyota-sponsor-button:hover {
background: #e6b02a;
transform: translateY(-2px);
}
.ciyota-sponsor-button:hover::before {
width: 100%;
}
.ciyota-sponsor-button a {
color: #10235e;
text-decoration: none;
}
/* Live Stats Button */
.ciyota-live-stats-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: #fff;
border: 2px solid rgba(34, 197, 94, 0.7);
padding: 12px 24px;
border-radius: 50px;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.5px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
opacity: 0;
transform: translateY(20px);
animation: ciyota-logos-fade-in-up 1s ease 1.6s forwards;
position: relative;
overflow: hidden;
z-index: 1;
}
.ciyota-live-stats-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: rgba(34, 197, 94, 0.15);
transition: width 0.4s ease;
z-index: -1;
}
.ciyota-live-stats-btn:hover {
border-color: #22c55e;
color: #fff;
transform: translateY(-2px);
text-decoration: none;
}
.ciyota-live-stats-btn:hover::before {
width: 100%;
}
/* Pulsing green dot inside the button */
.ciyota-live-dot-btn {
width: 10px;
height: 10px;
border-radius: 50%;
background: #22c55e;
flex-shrink: 0;
display: inline-block;
animation: ciyotaLivePulse 1.8s ease-in-out infinite;
}
@keyframes ciyotaLivePulse {
0% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
}
70% {
box-shadow: 0 0 0 7px rgba(34, 197, 94, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
}
}
/* Animation */
@keyframes ciyota-logos-fade-in-up {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Mobile */
@media (max-width: 768px) {
.ciyota-logos-section {
display: none;
}
.ciyota-logos-bar {
padding: 30px 15px;
flex-direction: column;
gap: 20px;
}
.ciyota-logos-header {
width: 100%;
text-align: center;
}
.ciyota-logos-title {
font-size: 2.5rem;
}
.ciyota-vm-title {
font-size: 1.3rem;
}
.ciyota-logos-track {
height: 100px;
}
.ciyota-logo-item {
width: 120px;
height: 80px;
padding: 12px;
}
.ciyota-vision-mission-desktop {
flex-direction: column;
gap: 20px;
}
.ciyota-vm-divider {
width: 80%;
height: 2px;
background: rgba(255, 195, 44, 0.5);
}
}
@media (max-width: 480px) {
.ciyota-logos-bar {
padding: 25px 12px;
}
.ciyota-logos-title {
font-size: 1.8rem;
}
.ciyota-vm-title {
font-size: 1.1rem;
}
.ciyota-logos-track {
height: 80px;
}
.ciyota-logo-item {
width: 100px;
height: 65px;
gap: 20px;
}
}
/* ============================================
CIYOTA 2026 SCHOLARSHIP APPLICATION STYLES
Prefix: apply-scholarship-2026-ciyota
============================================ */
/* Base Section Styles */
.apply-scholarship-2026-ciyota-section {
padding: 60px 0 100px;
background: #f8f9fa;
position: relative;
}
.apply-scholarship-2026-ciyota-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 50px;
}
/* Header Styles */
.apply-scholarship-2026-ciyota-header {
margin-bottom: 40px;
}
.apply-scholarship-2026-ciyota-title {
text-align: center;
font-size: 2em;
color: #10235e;
margin-bottom: 50px;
font-weight: 600;
}
.apply-scholarship-2026-ciyota-text {
font-size: 1em;
line-height: 1.8;
color: #10235e;
margin-bottom: 30px;
}
.apply-scholarship-2026-ciyota-text strong {
color: #10235e;
font-weight: 700;
}
/* Introduction Section */
.apply-scholarship-2026-ciyota-intro {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.apply-scholarship-2026-ciyota-content {
background: transparent;
border-radius: 0;
padding: 0;
box-shadow: none;
margin-bottom: 60px;
}
.apply-scholarship-2026-ciyota-subtitle {
font-size: 1.5em;
color: #10235e;
margin: 40px 0 25px;
font-weight: 600;
border-left: 4px solid #ffc32c;
padding-left: 15px;
}
/* Target Section */
.apply-scholarship-2026-ciyota-target {
background: #10235e;
color: white;
padding: 25px;
border-radius: 15px;
margin: 30px 0;
}
.apply-scholarship-2026-ciyota-target p {
color: white;
margin: 0;
}
.apply-scholarship-2026-ciyota-target strong {
color: #ffc32c;
}
/* Eligibility List */
.apply-scholarship-2026-ciyota-eligibility-list {
display: grid;
gap: 20px;
margin: 30px 0;
}
.apply-scholarship-2026-ciyota-eligibility-item {
display: flex;
gap: 20px;
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(16, 35, 94, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.apply-scholarship-2026-ciyota-eligibility-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(16, 35, 94, 0.15);
}
.apply-scholarship-2026-ciyota-eligibility-number {
flex-shrink: 0;
width: 50px;
height: 50px;
background: #ffc32c;
color: #10235e;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
font-weight: 700;
}
.apply-scholarship-2026-ciyota-eligibility-content h4 {
color: #10235e;
margin: 0 0 10px 0;
font-size: 1.1em;
}
.apply-scholarship-2026-ciyota-eligibility-content p {
color: #10235e;
margin: 0;
line-height: 1.6;
}
/* Documents Section */
.apply-scholarship-2026-ciyota-documents {
margin: 30px 0;
}
.apply-scholarship-2026-ciyota-documents-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.apply-scholarship-2026-ciyota-document-item {
display: flex;
align-items: center;
gap: 20px;
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(16, 35, 94, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.apply-scholarship-2026-ciyota-document-item:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(16, 35, 94, 0.15);
}
.apply-scholarship-2026-ciyota-document-icon {
flex-shrink: 0;
width: 60px;
height: 60px;
background: #10235e;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.apply-scholarship-2026-ciyota-document-icon svg {
color: #ffc32c;
}
.apply-scholarship-2026-ciyota-document-content {
flex: 1;
}
.apply-scholarship-2026-ciyota-document-content p {
color: #10235e;
font-weight: 600;
margin: 0 0 10px 0;
font-size: 1.05em;
}
.apply-scholarship-2026-ciyota-download-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #ffc32c;
color: #10235e;
padding: 10px 20px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.apply-scholarship-2026-ciyota-download-btn:hover {
background: #10235e;
color: #ffc32c;
transform: translateX(5px);
}
.apply-scholarship-2026-ciyota-download-btn svg {
flex-shrink: 0;
}
/* Instructions Section */
.apply-scholarship-2026-ciyota-instructions {
background: white;
padding: 30px;
border-radius: 15px;
margin: 30px 0;
box-shadow: 0 5px 15px rgba(16, 35, 94, 0.1);
}
.apply-scholarship-2026-ciyota-instruction-list {
margin: 20px 0;
padding-left: 25px;
color: #10235e;
}
.apply-scholarship-2026-ciyota-instruction-list li {
margin: 12px 0;
line-height: 1.6;
}
.apply-scholarship-2026-ciyota-deadline-notice {
background: #fff3cd;
border-left: 4px solid #ffc32c;
padding: 15px 20px;
margin-top: 20px;
border-radius: 8px;
color: #10235e;
}
.apply-scholarship-2026-ciyota-deadline-notice strong {
color: #10235e;
}
/* Form Section */
.apply-scholarship-2026-ciyota-form-section {
background: white;
}
.apply-scholarship-2026-ciyota-form-container {
max-width: 900px;
margin: 0 auto;
}
.apply-scholarship-2026-ciyota-form {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(16, 35, 94, 0.1);
}
.apply-scholarship-2026-ciyota-form .apply-scholarship-2026-ciyota-form-section {
margin-bottom: 40px;
}
.apply-scholarship-2026-ciyota-form-section-title {
font-size: 1.3em;
color: #10235e;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 2px solid #ffc32c;
}
.apply-scholarship-2026-ciyota-upload-instructions {
background: #fff3cd;
border-left: 4px solid #ffc32c;
padding: 12px 15px;
margin-bottom: 25px;
border-radius: 8px;
color: #10235e;
font-size: 0.95em;
line-height: 1.6;
}
.apply-scholarship-2026-ciyota-field-note {
color: #6c757d;
font-size: 0.9em;
margin: 8px 0 12px 0;
line-height: 1.5;
}
.apply-scholarship-2026-ciyota-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.apply-scholarship-2026-ciyota-form-group {
display: flex;
flex-direction: column;
}
.apply-scholarship-2026-ciyota-full-width {
grid-column: 1 / -1;
}
.apply-scholarship-2026-ciyota-form-group label {
color: #10235e;
font-weight: 600;
margin-bottom: 8px;
font-size: 0.95em;
}
.apply-scholarship-2026-ciyota-required {
color: #dc3545;
}
.apply-scholarship-2026-ciyota-form-group input,
.apply-scholarship-2026-ciyota-form-group textarea {
padding: 12px 15px;
border: 2px solid #e9ecef;
border-radius: 10px;
font-size: 1em;
color: #10235e;
transition: border-color 0.3s ease;
}
.apply-scholarship-2026-ciyota-form-group input:focus,
.apply-scholarship-2026-ciyota-form-group textarea:focus {
outline: none;
border-color: #ffc32c;
}
.apply-scholarship-2026-ciyota-form-group textarea {
resize: vertical;
font-family: inherit;
}
.apply-scholarship-2026-ciyota-readonly-field {
background: #f8f9fa;
cursor: not-allowed;
}
/* WhatsApp Group */
.apply-scholarship-2026-ciyota-whatsapp-group {
display: flex;
flex-direction: column;
gap: 10px;
}
.apply-scholarship-2026-ciyota-checkbox-label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: #10235e;
font-weight: 500;
}
.apply-scholarship-2026-ciyota-checkbox-label input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
}
/* File Upload */
.apply-scholarship-2026-ciyota-file-upload-container {
position: relative;
}
.apply-scholarship-2026-ciyota-file-upload-container input[type="file"] {
display: none;
}
.apply-scholarship-2026-ciyota-file-upload-label {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
border: 3px dashed #e9ecef;
border-radius: 15px;
cursor: pointer;
transition: all 0.3s ease;
background: #f8f9fa;
}
.apply-scholarship-2026-ciyota-file-upload-label:hover {
border-color: #ffc32c;
background: #fff;
}
.apply-scholarship-2026-ciyota-file-upload-label svg {
color: #10235e;
margin-bottom: 15px;
}
.apply-scholarship-2026-ciyota-file-upload-label span {
color: #10235e;
font-weight: 600;
}
.apply-scholarship-2026-ciyota-file-info {
font-size: 0.85em;
color: #6c757d !important;
font-weight: 400 !important;
margin-top: 5px;
}
/* Upload Progress */
.apply-scholarship-2026-ciyota-upload-progress {
display: none;
margin-top: 20px;
}
.apply-scholarship-2026-ciyota-upload-progress.active {
display: block;
}
.apply-scholarship-2026-ciyota-progress-bar {
width: 100%;
height: 8px;
background: #e9ecef;
border-radius: 10px;
overflow: hidden;
margin-bottom: 10px;
}
.apply-scholarship-2026-ciyota-progress-fill {
height: 100%;
background: linear-gradient(90deg, #ffc32c, #10235e);
width: 0%;
transition: width 0.3s ease;
border-radius: 10px;
}
.apply-scholarship-2026-ciyota-progress-text {
text-align: center;
color: #10235e;
font-weight: 600;
font-size: 0.9em;
}
/* File Preview */
.apply-scholarship-2026-ciyota-file-preview {
margin-top: 15px;
padding: 15px;
background: #f8f9fa;
border-radius: 10px;
display: none;
}
.apply-scholarship-2026-ciyota-file-preview.active {
display: flex;
align-items: center;
gap: 15px;
}
.apply-scholarship-2026-ciyota-file-preview-icon {
width: 40px;
height: 40px;
background: #10235e;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.apply-scholarship-2026-ciyota-file-preview-icon svg {
color: #ffc32c;
}
.apply-scholarship-2026-ciyota-file-preview-info {
flex: 1;
}
.apply-scholarship-2026-ciyota-file-preview-name {
color: #10235e;
font-weight: 600;
margin-bottom: 3px;
}
.apply-scholarship-2026-ciyota-file-preview-size {
color: #6c757d;
font-size: 0.85em;
}
.apply-scholarship-2026-ciyota-file-preview-remove {
background: #dc3545;
color: white;
border: none;
padding: 8px 15px;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
transition: background 0.3s ease;
}
.apply-scholarship-2026-ciyota-file-preview-remove:hover {
background: #c82333;
}
/* Form Actions */
.apply-scholarship-2026-ciyota-form-actions {
margin-top: 30px;
text-align: center;
}
.apply-scholarship-2026-ciyota-submit-button {
display: inline-flex;
align-items: center;
gap: 10px;
background: #10235e;
color: white;
padding: 16px 40px;
border: none;
border-radius: 50px;
font-size: 1.1em;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(16, 35, 94, 0.3);
}
.apply-scholarship-2026-ciyota-submit-button:hover:not(:disabled) {
background: #ffc32c;
color: #10235e;
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(16, 35, 94, 0.4);
}
.apply-scholarship-2026-ciyota-submit-button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.apply-scholarship-2026-ciyota-submit-button svg {
flex-shrink: 0;
}
/* Modal */
.apply-scholarship-2026-ciyota-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 9999;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease;
}
.apply-scholarship-2026-ciyota-modal.active {
display: flex;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.apply-scholarship-2026-ciyota-modal-content {
background: white;
padding: 40px;
border-radius: 20px;
max-width: 500px;
width: 90%;
text-align: center;
animation: slideUp 0.3s ease;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
@keyframes slideUp {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.apply-scholarship-2026-ciyota-modal-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.apply-scholarship-2026-ciyota-success {
background: #d4edda;
}
.apply-scholarship-2026-ciyota-success svg {
color: #28a745;
}
.apply-scholarship-2026-ciyota-modal-content h2 {
color: #10235e;
margin-bottom: 15px;
font-size: 1.8em;
}
.apply-scholarship-2026-ciyota-modal-content>p {
color: #6c757d;
margin-bottom: 25px;
}
/* Ticket Info */
.apply-scholarship-2026-ciyota-ticket-info {
background: #f8f9fa;
padding: 25px;
border-radius: 15px;
margin: 25px 0;
}
.apply-scholarship-2026-ciyota-ticket-info p {
color: #10235e;
margin-bottom: 10px;
font-weight: 600;
}
.apply-scholarship-2026-ciyota-ticket-number {
background: #10235e;
color: #ffc32c;
padding: 15px;
border-radius: 10px;
font-size: 1.5em;
font-weight: 700;
letter-spacing: 2px;
margin: 15px 0;
font-family: 'Courier New', monospace;
}
.apply-scholarship-2026-ciyota-ticket-note {
font-size: 0.9em;
color: #6c757d !important;
margin-top: 10px !important;
font-weight: 400 !important;
}
.apply-scholarship-2026-ciyota-modal-close-btn {
background: #10235e;
color: white;
border: none;
padding: 12px 40px;
border-radius: 25px;
font-weight: 600;
font-size: 1em;
cursor: pointer;
transition: all 0.3s ease;
}
.apply-scholarship-2026-ciyota-modal-close-btn:hover {
background: #ffc32c;
color: #10235e;
}
/* Responsive Design */
@media (max-width: 1024px) {
.apply-scholarship-2026-ciyota-container {
padding: 0 30px;
}
}
@media (max-width: 768px) {
.apply-scholarship-2026-ciyota-section {
padding: 40px 0 60px;
}
.apply-scholarship-2026-ciyota-container {
padding: 0 20px;
}
.apply-scholarship-2026-ciyota-title {
font-size: 1.8em;
margin-bottom: 30px;
}
.apply-scholarship-2026-ciyota-subtitle {
font-size: 1.3em;
margin: 30px 0 20px;
}
.apply-scholarship-2026-ciyota-form-row {
grid-template-columns: 1fr;
gap: 15px;
}
.apply-scholarship-2026-ciyota-form {
padding: 25px;
}
.apply-scholarship-2026-ciyota-eligibility-item {
flex-direction: column;
text-align: center;
}
.apply-scholarship-2026-ciyota-eligibility-number {
margin: 0 auto;
}
.apply-scholarship-2026-ciyota-document-item {
flex-direction: column;
text-align: center;
}
}
@media (max-width: 480px) {
.apply-scholarship-2026-ciyota-section {
padding: 30px 0 50px;
}
.apply-scholarship-2026-ciyota-container {
padding: 0 15px;
}
.apply-scholarship-2026-ciyota-title {
font-size: 1.6em;
margin-bottom: 25px;
}
.apply-scholarship-2026-ciyota-form {
padding: 20px;
}
.apply-scholarship-2026-ciyota-form-section-title {
font-size: 1.1em;
}
.apply-scholarship-2026-ciyota-submit-button {
width: 100%;
justify-content: center;
}
.apply-scholarship-2026-ciyota-modal-content {
padding: 30px 20px;
}
.apply-scholarship-2026-ciyota-ticket-number {
font-size: 1.2em;
}
}
/* Upload Progress Modal */
.apply-scholarship-2026-ciyota-upload-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(16, 35, 94, 0.95);
backdrop-filter: blur(10px);
z-index: 10000;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease;
}
.apply-scholarship-2026-ciyota-upload-modal-content {
background: white;
padding: 50px;
border-radius: 20px;
text-align: center;
max-width: 500px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: slideUp 0.4s ease;
position: relative;
}
.apply-scholarship-2026-ciyota-upload-spinner {
position: relative;
width: 120px;
height: 120px;
margin: 0 auto 30px;
}
.apply-scholarship-2026-ciyota-upload-spinner svg {
width: 120px;
height: 120px;
}
.apply-scholarship-2026-ciyota-upload-percentage {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 32px;
font-weight: bold;
color: #10235e;
font-family: 'Arial', sans-serif;
}
.apply-scholarship-2026-ciyota-upload-title {
font-size: 28px;
color: #10235e;
margin-bottom: 15px;
font-weight: 600;
}
.apply-scholarship-2026-ciyota-upload-message {
font-size: 18px;
color: #666;
margin-bottom: 30px;
min-height: 30px;
}
.apply-scholarship-2026-ciyota-upload-files {
text-align: left;
background: #f8f9fa;
padding: 25px;
border-radius: 12px;
margin-top: 20px;
}
.apply-scholarship-2026-ciyota-upload-file-item {
padding: 12px 0;
font-size: 15px;
color: #10235e;
display: flex;
align-items: center;
gap: 12px;
transition: opacity 0.3s ease;
font-weight: 500;
}
.apply-scholarship-2026-ciyota-file-status {
font-size: 20px;
width: 24px;
text-align: center;
}
/* Fix file preview styling */
.apply-scholarship-2026-ciyota-file-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
margin-top: 10px;
}
.apply-scholarship-2026-ciyota-file-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: #10235e;
border-radius: 8px;
}
.apply-scholarship-2026-ciyota-file-icon svg {
stroke: white;
}
.apply-scholarship-2026-ciyota-file-info {
flex: 1;
}
.apply-scholarship-2026-ciyota-file-name {
font-size: 14px;
font-weight: 600;
color: #10235e;
margin-bottom: 5px;
word-break: break-all;
}
.apply-scholarship-2026-ciyota-file-size {
font-size: 12px;
color: #666;
}
.apply-scholarship-2026-ciyota-remove-file {
flex-shrink: 0;
width: 36px;
height: 36px;
border: none;
background: #dc3545;
color: white;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.apply-scholarship-2026-ciyota-remove-file:hover {
background: #c82333;
transform: scale(1.1);
}
.apply-scholarship-2026-ciyota-remove-file svg {
stroke: white;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
transform: translateY(30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* ============================================
ADDITIONAL CSS FOR SELECT DROPDOWN
Add this to your existing CSS file
============================================ */
/* Select dropdown styling */
.apply-scholarship-2026-ciyota-form-group select {
padding: 12px 15px;
border: 2px solid #e9ecef;
border-radius: 10px;
font-size: 1em;
color: #10235e;
transition: border-color 0.3s ease;
background-color: white;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310235e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 20px;
padding-right: 40px;
}
.apply-scholarship-2026-ciyota-form-group select:focus {
outline: none;
border-color: #ffc32c;
}
.apply-scholarship-2026-ciyota-form-group select option {
padding: 10px;
}
/*ciyota-6th-hero-style
=============================*/
.ciyota-6th-hero-section {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
background: #10235e;
}
.ciyota-6th-hero-container {
width: 100%;
max-width: 100%;
height: 100%;
padding: 50px;
position: relative;
display: flex;
align-items: center;
}
/* Slideshow Styles */
.ciyota-6th-hero-slideshow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: #10235e;
}
.ciyota-6th-hero-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1.5s ease-in-out;
}
.ciyota-6th-hero-slide.active {
opacity: 1;
}
.ciyota-6th-hero-slide-bg {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Desktop Background Images */
.ciyota-6th-hero-slide:nth-child(1) .ciyota-6th-hero-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/ciyota-march1.png');
}
.ciyota-6th-hero-slide:nth-child(2) .ciyota-6th-hero-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/ciyota-march2.png');
}
.ciyota-6th-hero-slide:nth-child(3) .ciyota-6th-hero-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/ciyota-march3.png');
}
.ciyota-6th-hero-slide:nth-child(4) .ciyota-6th-hero-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/ciyota-march4.png');
}
.ciyota-6th-hero-slide:nth-child(5) .ciyota-6th-hero-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/ciyota-march5.png');
}
.ciyota-6th-hero-slide:nth-child(6) .ciyota-6th-hero-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/ciyota-march6.png');
}
.ciyota-6th-hero-slide:nth-child(7) .ciyota-6th-hero-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/ciyota-march7.png');
}
.ciyota-6th-hero-slide:nth-child(8) .ciyota-6th-hero-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/ciyota-march8.png');
}
.ciyota-6th-hero-slide:nth-child(9) .ciyota-6th-hero-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/ciyota-march9.png');
}
.ciyota-6th-hero-slide:nth-child(10) .ciyota-6th-hero-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/ciyota-march10.png');
}
/* Add more background images as needed */
/* Content Card */
.ciyota-6th-hero-content {
width: 35%;
z-index: 10;
position: relative;
}
.ciyota-6th-hero-card {
background: rgba(16, 35, 94, 0.9);
border-radius: 25px;
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 195, 44, 0.3);
transition: transform 0.3s ease;
}
.ciyota-6th-hero-card:hover {
transform: translateY(-5px);
border-color: rgba(255, 195, 44, 0.6);
}
.ciyota-6th-hero-card-content {
padding: 30px;
}
.ciyota-6th-hero-title {
font-size: 3.2rem;
font-weight: 900;
margin-bottom: 10px;
color: #ffc32c;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
position: relative;
padding-bottom: 5px;
letter-spacing: -0.5px;
opacity: 0;
transform: translateY(20px);
animation: ciyota-6th-fade-in-up 1s ease 0.3s forwards;
}
.ciyota-6th-hero-location {
margin-bottom: 20px;
}
.ciyota-6th-hero-location-title {
color: #ffc32c;
font-size: 1.2rem;
font-weight: 600;
margin: 0 0 10px 0;
opacity: 0;
transform: translateY(20px);
animation: ciyota-6th-fade-in-up 1s ease 0.6s forwards;
}
.ciyota-6th-hero-location:nth-child(3) .ciyota-6th-hero-location-title {
animation: ciyota-6th-fade-in-up 1s ease 0.9s forwards;
}
.ciyota-6th-hero-text {
color: rgba(255, 255, 255, 0.9);
margin: 0 0 15px 0;
line-height: 1.6;
opacity: 0;
transform: translateY(20px);
animation: ciyota-6th-fade-in-up 1s ease 0.7s forwards;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
}
.ciyota-6th-hero-location:nth-child(3) .ciyota-6th-hero-text {
animation: ciyota-6th-fade-in-up 1s ease 1s forwards;
}
.ciyota-6th-hero-buttons {
display: flex;
gap: 15px;
margin-top: 25px;
}
/* Animation */
@keyframes ciyota-6th-fade-in-up {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.ciyota-6th-hero-button {
background: #ffc32c;
color: #10235e;
border: none;
padding: 14px 32px;
border-radius: 50px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
flex: 1;
opacity: 0;
transform: translateY(20px);
animation: ciyota-6th-fade-in-up 1s ease 1.2s forwards;
position: relative;
overflow: hidden;
z-index: 1;
text-transform: uppercase;
letter-spacing: 1px;
}
.ciyota-6th-hero-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: #ffffff;
transition: width 0.4s ease;
z-index: -1;
}
.ciyota-6th-hero-button a {
color: #10235e;
text-decoration: none;
display: block;
}
.ciyota-6th-hero-button:hover {
background: #e6b02a;
transform: translateY(-2px);
}
.ciyota-6th-hero-button:hover::before {
width: 100%;
}
/* Navigation Dots */
.ciyota-6th-hero-dots {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
z-index: 15;
}
.ciyota-6th-hero-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.ciyota-6th-hero-dot.active {
background: #ffc32c;
transform: scale(1.2);
border-color: #10235e;
}
.ciyota-6th-hero-dot:hover {
background: rgba(255, 195, 44, 0.7);
}
/* Mobile Responsive */
@media (max-width: 768px) {
.ciyota-6th-hero-section {
height: 100vh;
}
.ciyota-6th-hero-container {
padding: 25px;
align-items: flex-end;
padding-bottom: 80px;
}
.ciyota-6th-hero-content {
width: 100%;
}
.ciyota-6th-hero-card {
background: rgba(16, 35, 94, 0.95);
}
.ciyota-6th-hero-card-content {
padding: 25px;
}
.ciyota-6th-hero-title {
font-size: 2.5rem;
}
.ciyota-6th-hero-location-title {
font-size: 1.1rem;
}
.ciyota-6th-hero-buttons {
flex-direction: column;
gap: 10px;
}
/* Mobile Background Images */
.ciyota-6th-hero-slide:nth-child(1) .ciyota-6th-hero-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/mobile/march-im1.png');
}
.ciyota-6th-hero-slide:nth-child(2) .ciyota-6th-hero-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/mobile/march-im2.png');
}
.ciyota-6th-hero-slide:nth-child(3) .ciyota-6th-hero-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/mobile/march-im3.png');
}
.ciyota-6th-hero-slide:nth-child(4) .ciyota-6th-hero-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/mobile/march-im4.png');
}
.ciyota-6th-hero-slide:nth-child(5) .ciyota-6th-hero-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/mobile/secondaryschool-girl-mobile.png');
}
.ciyota-6th-hero-slide:nth-child(6) .ciyota-6th-hero-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/mobile/secondaryschool-girl-during-exams-mobile.png');
}
.ciyota-6th-hero-slide:nth-child(7) .ciyota-6th-hero-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/mobile/secondaryschool-happy-students-mobile.png');
}
.ciyota-6th-hero-slide:nth-child(8) .ciyota-6th-hero-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/mobile/secondaryschool-happy-girls-mobile.png');
}
.ciyota-6th-hero-slide:nth-child(9) .ciyota-6th-hero-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/mobile/primayschool-happy-girl-mobile.png');
}
.ciyota-6th-hero-slide:nth-child(10) .ciyota-6th-hero-slide-bg {
background-image: url('/proxy/https/ciyota.org/assets/img/slider/mobile/primayschool-happy-boys-mobile.png');
}
/* Add more mobile background images as needed */
}
@media (max-width: 480px) {
.ciyota-6th-hero-container {
padding: 20px;
}
.ciyota-6th-hero-card-content {
padding: 20px;
}
.ciyota-6th-hero-title {
font-size: 1.8rem;
}
.ciyota-6th-hero-location-title {
font-size: 1rem;
}
.ciyota-6th-hero-dots {
bottom: 20px;
}
}