article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
html,
body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
form {
margin: 0;
padding: 0;
list-style: none;
font-weight: normal;
}
button,
input,
select,
textarea {
margin: 0;
padding: 0;
border: none;
font-family: arial;
}
.custfield:focus {
outline: none;
border: none;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
body {
font-family: arial;
font-size: 14px;
color: #000000;
}
a {
text-decoration: none;
}
a:hover,
a:focus {
text-decoration: none;
outline: none;
}
img {
border: none;
vertical-align: middle;
} #main {
width: 100%;
}
header,
nav,
section,
footer {
width: 100%;
float: left;
}
.container {
width: 1000px;
margin: 0 auto;
}
.custfield {
border: none;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
a,
a:hover,
button {
transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
} .item a {
color: #e51147;
font-size: 24px;
font-weight: 700;
border: 1px solid #e51147;
padding: 10px 20px 10px 20px;
border-radius: 10px;
}
.commonslider {
width: 100%;
position: relative;
}
.commonslider .owl-carousel { width: 100%;
-webkit-tap-highlight-color: transparent;
position: relative;
}
.commonslider .owl-carousel .owl-stage {
position: relative;
-ms-touch-action: pan-Y;
-moz-backface-visibility: hidden;
}
.commonslider .owl-carousel .owl-stage:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.commonslider .owl-carousel .owl-stage-outer {
position: relative;
overflow: hidden;
-webkit-transform: translate3d(0px, 0px, 0px);
}
.commonslider .owl-carousel .owl-wrapper,
.commonslider .owl-carousel .owl-item {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
}
.commonslider .owl-carousel .owl-item {
position: relative;
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
.commonslider .owl-carousel.owl-loaded {
display: block;
float: left;
}
.commonslider .owl-carousel.owl-loading {
opacity: 0;
display: block;
}
.commonslider .owl-carousel.owl-hidden {
opacity: 0;
}
.commonslider .owl-carousel.owl-refresh .owl-item {
visibility: hidden;
}
.commonslider .owl-carousel.owl-grab {
cursor: move;
cursor: grab;
}
.midcontainer {
width: 1140px;
margin: 0 auto;
}
.ourstorypart {
position: relative;
overflow: hidden;
float: left;
width: 100%;
}
.ourstorypart .imgcol {
float: left;
width: 488px;
text-align: center;
}
.ourstorypart .imgcol img {
max-width: 100%;
}
.ourstorypart .textinfo {
float: left;
width: calc(100% - 488px);
}
.ourstorypart .textinfo h4 {
color: #e51147;
font-size: 38px;
font-weight: 700;
min-height: 255px;
font-family: "Din Pro", Sans-serif;
}
.ourstorypart .owl-nav button {
position: absolute;
top: 50%;
width: 24px;
height: 38px;
background-color: transparent;
border: none;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
cursor: pointer;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.ourstorypart .owl-nav .owl-prev {
background-image: url(//ekyaschools.com/wp-content/themes/astra-child/images/prev-arrow.svg);
left: 0px;
}
.ourstorypart .owl-nav .owl-next {
background-image: url(//ekyaschools.com/wp-content/themes/astra-child/images/next-arrow.svg);
right: 0px;
}
.archive.category .ast-container, .archive.date .ast-container{
max-width: 100% !important;
padding: 0;
}
.archive.category .ast-category{
background-color: #ffffff;
} .clsnewspart .clsleftnewcol {
float: left;
width: 630px;
}
.cls_fourth.clsnewspart .clsleftnewcol {
float: right;
width: 630px;
}
.clsnewspart .clsnewbox .clsnewimg {
position: relative;
}
.clsnewspart .clsnewbox .clsnewimg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.clsnewspart .clsnewbox h4 {
font-size: 20px;
color: #d7ac00;
padding-bottom: 30px;
font-family: "Din Pro", sans-serif;
font-weight: 700;
}
.cls_fourth.clsnewspart .clsnewbox h4{
color: #C5143D;
}
.clsnewspart .clsnewbox p {
font-size: 20px;
color: #010101;
font-family: "Din Pro", sans-serif;
font-weight: 400;
margin-bottom: 35px !important;
}
.clsnewspart .clsnewbox .readm {
font-size: 20px;
color: #010101;
font-weight: 400;
font-family: "Din Pro", sans-serif;
}
.clsnewspart .clsnewboxlrg {
background-color: #d7ac00;
}
.cls_fourth.clsnewspart .clsnewboxlrg{
background-color: #FCF4F6;
}
.cls_fourth.clsnewspart .clsnewboxlrg:hover{
background-color: #C5143D;
}
.clsnewspart .clsnewboxlrg .clsnewimg:after {
content: "";
width: 100%;
height: 128px;
position: absolute;
left: 0px;
bottom: 0px;
background: linear-gradient(
180deg,
rgba(1, 1, 1, 0) 0%,
rgba(1, 1, 1, 0.75) 100%
);
}
.clsnewspart .clsnewboxlrg .clsdate {
position: absolute;
left: 0px;
bottom: 0px;
font-size: 24px;
color: #ffffff;
padding: 30px;
z-index: 2;
font-family: "Din Pro", sans-serif;
font-weight: 700;
}
.clsnewspart .clsnewboxlrg .clstexts {
padding: 25px 20px 45px;
}
.clsnewspart .clsnewboxlrg h4,
.clsnewspart .clsnewboxlrg p {
color: #ffffff;
}
.cls_fourth.clsnewspart .clsnewboxlrg p{
color: #000000;
}
.clsnewspart .clsnewboxlrg .readm {
float: right;
color: #ffffff;
text-decoration: underline;
}
.clsnewspart .clsnewboxsml {
padding: 12px;
background-color: #FDFBF2;
display: flex;
}
.cls_fourth.clsnewspart .clsnewboxsml{
background-color: #fdfbf2;
}
.cls_fourth.clsnewspart .clsnewboxsml:hover{
background-color: #C5143D;
}
.cls_fourth.clsnewspart .clsnewboxlrg:hover h4, .cls_fourth.clsnewspart .clsnewboxlrg:hover p{
color: #ffffff;
}
.cls_fourth.clsnewspart .clsnewboxsml:hover h4, .cls_fourth.clsnewspart .clsnewboxsml:hover p{
color: #ffffff;
}
.clsnewspart .clsnewboxsml .clsnewimg {
width: 161px;
height: 161px;
}
.clsnewspart .clsnewboxsml .clstexts {
width: calc(100% - 161px);
padding-left: 14px;
}
.cls_fourth.clsnewspart .clsnewboxsml .clstexts{
width: calc(100%);
}
.cls_fourth.clsnewspart .clsnewboxlrg:hover .arrow, .cls_fourth.clsnewspart .clsnewboxsml:hover .arrow{
border-right: 2px solid #fff;
border-bottom: 2px solid #ffffff;
}
.clsrightnewcol .clstexts .arrow{
top: 10px;
bottom: 0px;
}
.clsnewspart .clsrightnewcol {
float: right;
width: 440px;
}
.cls_fourth.clsnewspart .clsrightnewcol {
float: left;
width: 440px;
}
.clsrightnewcol .clstexts h4 {
padding-bottom: 8px !important;
}
.clsrightnewcol .clstexts p {
padding-bottom: 0px !important;
font-size: 20px;
color: #010101;
font-family: "Din Pro", sans-serif;
font-weight: 400;
margin-bottom: 22px !important;
}
.custom-pagination {
text-align: center;
margin-bottom: 60px;
}
.page-numbers:hover{
background: #C5143D;
}
.page-numbers:hover span{
color: #000000;
}
.clsprogramslists {
float: left;
width: 100%;
}
.clsprogramslists ul li {
float: left;
width: 50%;
padding: 10px;
}
.clsprogramslists ul li .clsprogcol {
position: relative;
display: block;
}
.clsprogramslists ul li .clsprogcol .clsprogname {
position: absolute;
padding: 20px;
font-size: 30px;
color: #ffffff;
left: 0px;
top: 0px;
width: 100%;
background-color: rgba(215, 172, 0, 0.7);
font-family: "Din Pro", sans-serif;
font-weight: 700;
}
.clsprogramslists ul li .clsprogcol img {
width: 100%;
}
.testimonials-container {
max-width: 1200px;
margin: 0 auto;
}
.testimonials-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.testimonials-title {
font-size: 18px;
font-weight: 700;
color: #000;
letter-spacing: 1px;
}
.show-all {
color: #666;
text-decoration: none;
font-size: 24px;
font-weight: 400;
}
.show-all:hover {
color: #333;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.testimonial-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
position: relative;
}
.testimonials-grid .testimonial-card:nth-child(2),
.testimonials-grid .testimonial-card:nth-child(2) .card-content {
background-color: #d7ac00;
}
.testimonials-grid .student_voice:nth-child(2),
.testimonials-grid .testimonial-card:nth-child(2) .card-content {
background-color: #4aaf65;
}
.testimonials-grid .testimonial-card:nth-child(2) .card-name {
color: #ffffff;
}
.testimonials-grid .testimonial-card:nth-child(2) .card-description {
color: #ffffff;
}
.testimonials-grid .testimonial-card:nth-child(2) .card-arrow {
color: #ffffff;
}
.testimonial-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.card-image {
width: 100%;
height: 180px;
object-fit: cover;
}
.card-content {
padding: 20px;
background-color: #fef8f2;
}
.card-name {
font-size: 24px;
font-family: "Din Pro", Sans-serif;
font-weight: 700;
color: #d7ac00;
margin-bottom: 4px;
line-height: 100%;
}
.card-description { font-size: 24px;
color: #111111;
font-weight: 500;
line-height: 100%;
margin-top: 10px;
}
.card-arrow {
position: absolute;
right: 16px;
bottom: 25px;
color: #d7ac00;
font-size: 50px;
}
.boardmember {
background-color: #d7ac00;
padding: 60px 0;
width: 100%;
overflow: hidden;
}
.midcontainer {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.boardmember .item {
display: flex;
align-items: center;
}
.boardmember .clsmembphoto {
flex: 0 0 387px;
width: 387px;
}
.boardmember .clsmembphoto img {
width: 100%;
height: auto;
border-radius: 8px;
}
.boardmember .clsmembinfo {
flex: 1;
padding-left: 120px;
}
.boardmember .clsmembinfo h4 {
font-size: 40px;
color: #ffffff;
font-weight: 700;
font-family: "Din Pro", Arial, sans-serif;
margin: 0 0 10px 0;
line-height: 1.2;
}
.boardmember .clsmembinfo span {
display: block;
font-size: 30px;
color: #ffffff;
font-weight: 500;
font-family: "Din Pro", Arial, sans-serif;
margin-bottom: 20px;
line-height: 1.3;
}
.boardmember .clsmembinfo p {
font-size: 30px;
color: #ffffff;
font-family: "Din Pro", Arial, sans-serif;
line-height: 1.4;
margin: 0;
}
.boardmember .owl-dots {
position: absolute;
z-index: 2;
left: 0px;
width: 100%;
bottom: 20px;
text-align: center;
}
.boardmember .owl-dots button {
display: inline-block;
margin: 0 6px;
cursor: pointer;
vertical-align: middle;
border: 1px solid #ffffff;
background: transparent;
width: 16px;
height: 16px;
border-radius: 100%;
transition: all 0.3s ease;
padding: 0px;
}
.boardmember .owl-dots button:hover,
.boardmember .owl-dots button.active {
background-color: #ffffff;
}
.boardmember .owl-dots button.active {
width: 20px;
height: 20px;
padding: 0px;
}
.boardmember .owl-nav{
display: none !important;
}
.team-elementor-template {
width: 100%;
margin: 0px auto;
}
.trending-container {
max-width: 1200px;
margin: 0 auto;
padding: 60px 45px;
background-color: #f9f3f9;
border-radius: 8px;
}
.learning-container,
.social-container {
max-width: 1200px;
margin: 0 auto;
padding: 60px 45px;
}
.cls_trending {
background-color: #f9f3f9;
margin-top: 60px;
}
.trending-header,
.learning-header,
.social-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.trending-title,
.learning-header h1,
.social-header h1 {
font-size: 40px;
font-weight: 700;
font-family: "Din Pro", sans-serif;
color: #010101;
}
.show-all {
color: #666666;
text-decoration: underline;
font-size: 24px;
font-weight: 400;
}
.show-all:hover {
color: #666;
}
.trending-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.trending-item {
display: flex;
gap: 15px;
align-items: flex-start;
}
.trending-image {
width: 160px;
height: 160px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
}
.trending-content {
flex: 1;
}
.trending-tag {
font-size: 12px;
font-weight: bold;
margin-bottom: 8px;
}
.tag-education,
.tag-student-blogger,
.tag-ekya-blog {
color: #c5143d !important;
font-family: "Din Pro", sans-serif;
font-size: 20px;
font-weight: 700;
}
.tag-student-blogger {
color: #e74c3c;
}
.tag-ekya-blog {
color: #e74c3c;
}
.trending-description {
font-size: 20px;
color: #010101;
line-height: 1.4;
margin-bottom: 12px;
font-weight: 400;
font-family: "Din Pro", sans-serif;
}
.read-more {
color: #010101;
text-decoration: none;
font-size: 20px;
font-weight: 700;
font-family: "Din Pro", sans-serif;
border-bottom: 1px solid #333;
}
.read-more:hover {
color: #010101;
}
.footer-tag {
text-align: center;
margin-top: 20px;
padding: 8px;
background-color: #4a90e2;
color: white;
font-size: 12px;
font-weight: bold;
border-radius: 4px;
}
.grid_blog { min-height: auto; }
.grid_blog .container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.grid_blog .blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}
.grid_blog .blog-card {
background: #fcf4f6;
border-radius: 15px;
overflow: hidden; transition: all 0.3s ease;
position: relative;
cursor: pointer;
}
.grid_blog .blog-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.grid_blog .card-image {
position: relative;
height: 279px;
overflow: hidden;
}
.grid_blog .card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.grid_blog .blog-card:hover .card-image img {
transform: scale(1.1);
}
.grid_blog .blog-card:hover .card-content {
background-color: #c5143d;
}
.grid_blog .blog-card:hover .tag,
.grid_blog .blog-card:hover .card-title {
color: #ffffff;
}
.grid_blog .date-overlay {
position: absolute;
bottom: 15px;
left: 15px; color: #010101;
padding: 8px 12px; font-size: 24px;
font-weight: 400;
font-family: "Din Pro", sans-serif; }
.grid_blog .card-content {
padding: 20px;
position: relative;
background-color: #fcf4f6;
}
.grid_blog .tag {
display: inline-block;
padding: 6px 12px;
border-radius: 20px;
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
font-family: "Din Pro", sans-serif;
letter-spacing: 0.5px;
margin-bottom: 12px;
}
.grid_blog .teacher-blogger {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.grid_blog .student-blogger {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
}
.grid_blog .card-title {
font-size: 20px;
font-weight: 400;
color: #000000;
line-height: 1.4;
margin-bottom: 15px;
min-height: 45px;
}
.grid_blog .read-more {
position: absolute;
bottom: 15px;
right: 15px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: none !important;
font-size: 18px;
transition: all 0.3s ease;
}
.grid_blog .read-more::before {
background-image: url(https://ekyaschools.verifinow.in/wp-content/uploads/2025/06/chevron-right-svgrepo-com-17.png);
font-weight: bold;
}
.grid_blog .read-more::after {
background-image: url(https://ekyaschools.verifinow.in/wp-content/uploads/2025/06/chevron-right-svgrepo-com-17.png);
font-weight: bold;
} .grid_blog .blog-card {
opacity: 0;
animation: fadeInUp 0.6s ease forwards;
}
.grid_blog .blog-card:nth-child(1) {
animation-delay: 0.1s;
}
.grid_blog .blog-card:nth-child(2) {
animation-delay: 0.2s;
}
.grid_blog .blog-card:nth-child(3) {
animation-delay: 0.3s;
}
.cls_learning .show-all {
color: #666666;
text-decoration: underline;
font-size: 24px;
font-weight: 400;
}
.cls_learning .show-all:hover {
color: #666;
}
.cls_learning .festivals-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 20px;
}
.category-blog.cls_learning .festivals-grid{
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.category-blog .custom-pagination li:hover{
background: #d21c3c;
}
.cls_learning .festival-card {
position: relative;
background: #fcf4f6; overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
.cls_learning .festival-card:hover,
.cls_social_impact .story-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
background: #c5143d;
}
.cls_learning .festival-card:hover .card-content,
.cls_social_impact .story-card:hover .card-content {
background: #c5143d;
}
.cls_learning .festival-card:hover .arrow, .cls_fourth.clsnewspart .arrow,
.cls_social_impact .story-card:hover .arrow {
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}
.cls_learning .festival-card:hover .about,
.cls_learning .festival-card:hover .card-description,
.cls_social_impact .story-card:hover .blogger-tag,
.cls_social_impact .story-card:hover .story-title {
color: #fff;
}
.cls_learning .card-image {
width: 100%;
height: 352px;
background-size: cover;
background-position: center;
position: relative;
}
.cls_learning .card-image img {
height: 352px;
}
.cls_learning .about {
color: #c5143d;
font-size: 20px;
font-weight: 700; }
.cls_learning .card-1 .card-image {
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200"><rect width="400" height="200" fill="%234a90e2"/><rect x="50" y="50" width="80" height="100" fill="%23f4d03f" rx="5"/><rect x="150" y="60" width="80" height="80" fill="%23e74c3c" rx="5"/><rect x="250" y="40" width="80" height="120" fill="%2327ae60" rx="5"/><circle cx="100" cy="160" r="15" fill="%23fff"/><circle cx="200" cy="160" r="15" fill="%23fff"/><circle cx="300" cy="160" r="15" fill="%23fff"/></svg>');
}
.cls_learning .card-2 .card-image {
background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200"><rect width="400" height="200" fill="%23f8f9fa"/><circle cx="80" cy="120" r="25" fill="%23ff6b6b"/><circle cx="150" cy="120" r="25" fill="%234ecdc4"/><circle cx="220" cy="120" r="25" fill="%23ffe66d"/><circle cx="290" cy="120" r="25" fill="%23a8e6cf"/><rect x="60" y="150" width="40" height="30" fill="%23333" rx="3"/><rect x="130" y="150" width="40" height="30" fill="%23333" rx="3"/><rect x="200" y="150" width="40" height="30" fill="%23333" rx="3"/><rect x="270" y="150" width="40" height="30" fill="%23333" rx="3"/></svg>');
}
.cls_learning .date-badge {
position: absolute;
bottom: 15px;
left: 15px; color: white;
padding: 6px 12px; font-size: 20px;
font-weight: 500;
}
.cls_learning .card-content {
padding: 20px;
position: relative;
}
.cls_learning .teacher-blogger {
display: inline-block; color: #e91e63;
padding: 4px 12px; font-size: 20px;
font-weight: 700;
font-family: "Din Pro", sans-serif;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.cls_learning .card-description {
color: #000000;
font-size: 20px;
font-weight: 400;
line-height: 1.5;
margin-bottom: 15px;
}
.cls_learning .card-arrow {
position: absolute;
bottom: 20px;
right: 20px;
width: 30px;
height: 30px;
background: #333;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.cls_learning .arrow, .cls_fourth.clsnewspart .arrow,
.cls_social_impact .arrow {
margin-left: 15px;
flex-shrink: 0;
width: 13px;
height: 13px;
border-right: 2px solid #e91e63;
border-bottom: 2px solid #e91e63;
transform: rotate(-45deg);
transition: transform 0.2s ease;
display: inline-block;
position: absolute;
right: 28px;
bottom: 24px;
}
.cls_learning .card-arrow:after {
content: "→";
color: white;
font-size: 16px;
font-weight: bold;
}
.cls_learning .festival-card:hover .card-arrow {
background: #e91e63;
transform: scale(1.1);
}
.cls_learning .card-2:hover .card-arrow {
background: #ff7043;
} .festival-card {
animation: fadeInUp 0.6s ease-out;
}
.festival-card:nth-child(2) {
animation-delay: 0.1s;
}
.custom-pagination ul {
display: flex;
gap: 6px;
list-style: none;
padding: 0;
justify-content: center;
align-items: center;
margin-top: 30px;
}
.custom-pagination li {
display: inline-block;
}
.custom-pagination a {
display: inline-block;
padding: 8px 14px;
border-radius: 6px;
border: 1px solid #d21c3c;
color: #d21c3c;
text-decoration: none;
font-weight: 500;
min-width: 36px;
text-align: center;
transition: all 0.3s ease;
}
.custom-pagination .current {
background-color: #d21c3c;
color: #fff;
border-color: #d21c3c;
border: 1px solid #d21c3c;
padding: 8px 14px;
}
.custom-pagination a:hover { color: #fff;
}
.custom-pagination .arrow-left,
.custom-pagination .arrow-right {
font-size: 18px;
font-weight: bold;
}
.single-blog-container {
display: flex; max-width: 1200px;
margin: 40px auto;
padding: 0 20px;
flex-wrap: wrap;
justify-content: space-between;
}
.blog-main-content {
flex: 0 0 60%;
max-width: 60%;
}
.blog-title {
font-size: 30px;
font-weight: 500;
color: #000000;
margin-bottom: 10px;
}
.blog-meta {
font-size: 20px;
color: #010101;
font-weight: 400;
margin-bottom: 30px;
}
.blog-body {
line-height: 1.8;
color: #444;
font-size: 20px;
font-weight: 400;
}
.blog-body img {
width: 100%;
margin: 20px 0;
border-radius: 8px;
}
.blog-body h2,
.blog-body h3 {
margin-top: 30px;
color: #222;
}
.blog-body ul {
padding-left: 20px;
margin-top: 10px;
}
.blog-sidebar {
flex: 0 0 30%;
max-width: 30%;    }
.explore-more h3 {
font-size: 20px;
margin-bottom: 15px;
color: #000;
}
.explore-more ul {
list-style: none;
padding: 0;
margin: 0;
}
.explore-more li {
margin-bottom: 10px;
}
.explore-more li a {
color: #d1222a;
text-decoration: none;
}
.post-pagination {
display: flex;
justify-content: space-between;
margin-top: 40px;
border-top: 1px solid #ddd;
padding-top: 20px;
font-size: 14px;
}
.explore-container {
max-width: 500px;
margin: 0 auto;  overflow: hidden; }
.explore-container .header {
padding: 20px 20px 15px 20px; border-bottom: 1px solid #e9ecef;
}
.explore-container .header h2 {
font-size: 30px;
font-weight: 500;
color: #000000;
margin-bottom: 0;
}
.explore-container .post-item {
display: flex;
align-items: center;
padding: 16px 20px; cursor: pointer;
transition: background-color 0.2s ease;
text-decoration: none;
color: inherit;
background-color: #fcf4f6;
}
.explore-container .post-item:hover {
background-color: #c5143d;
}
.explore-container .post-item:hover .post-date,
.explore-container .post-item:hover .post-tag,
.explore-container .post-item:hover .post-title {
color: #ffffff;
}
.explore-container .post-item:hover .arrow, .cls_fourth.clsnewspart .arrow {
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
}
.explore-container .post-item:last-child {
border-bottom: none;
}
.explore-container .post-content {
flex: 1;
min-width: 0;
}
.explore-container .post-date {
font-size: 16px;
color: #010101;
font-weight: 400;
margin-bottom: 6px;
font-weight: 500;
}
.explore-container .post-tag {
display: inline-block;
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
color: #c5143d;
padding: 2px 0;
}
.explore-container .post-tag.blogger {
color: #e91e63;
}
.explore-container .post-tag.schools {
color: #2196f3;
}
.explore-container .post-title {
font-size: 20px;
line-height: 1.4;
color: #010101;
font-weight: 400;
}
.explore-container .arrow, .cls_fourth.clsnewspart .arrow {
margin-left: 15px;
flex-shrink: 0;
width: 13px;
height: 13px;
border-right: 2px solid #e91e63;
border-bottom: 2px solid #e91e63;
transform: rotate(-45deg);
transition: transform 0.2s ease;
}
.explore-container .post-item.schools .arrow {
border-color: #2196f3;
}
.cls_fourth.clsnewspart .clstexts{
position: relative;
}
.explore-container .post-item:hover .arrow, .cls_fourth.clsnewspart:hover .arrow {
transform: rotate(-45deg) translateX(2px);
}
.post-action-buttons {
display: flex;
gap: 15px;
margin-top: 30px;
}
.outline-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
border: 1px solid #c5143d;
color: #c5143d;
font-size: 16px;
font-weight: 500;
background-color: transparent;
border-radius: 6px;
text-decoration: none;
transition: all 0.3s ease;
}
.outline-btn:hover {
background-color: #c5143d;
color: #fff;
}
.outline-btn .icon {
font-size: 14px;
line-height: 1;
}
.outline-btn img.icon-svg {
width: 16px;
height: 16px;
margin-left: 6px;
vertical-align: middle;
}
.navigation-container {
background: #fcf4f6;
backdrop-filter: blur(10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
width: 100%; overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.navigation-container .nav-wrapper {
display: flex;
min-height: 120px;
position: relative;
}
.navigation-container .nav-item {
flex: 1;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: center;
text-decoration: none;
color: inherit;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.navigation-container .nav-item:hover {
background: rgba(102, 126, 234, 0.08);
transform: translateY(-2px);
}
.navigation-container .nav-item:hover::before {
opacity: 1;
transform: translateX(0);
}
.navigation-container .nav-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
45deg,
rgba(102, 126, 234, 0.1),
rgba(118, 75, 162, 0.1)
);
opacity: 0;
transform: translateX(-100%);
transition: all 0.4s ease;
}
.navigation-container .nav-previous {
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.navigation-container .nav-direction {
display: flex;
align-items: center;
font-size: 20px;
font-weight: 700;
color: #010101;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.navigation-container .nav-direction .arrow, .cls_fourth.clsnewspart .arrow {
font-size: 20px;
margin: 0 8px;
transition: transform 0.3s ease;
}
.navigation-container .nav-item:hover .arrow {
transform: translateX(4px);
}
.navigation-container .nav-previous:hover .arrow {
transform: translateX(-4px);
}
.navigation-container .nav-tag {
color: #e91e63;
font-size: 20px;
font-weight: 700;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.navigation-container .nav-title {
font-size: 20px;
font-weight: 400;
line-height: 1.4;
color: #010101;
position: relative;
z-index: 1;
}
.navigation-container .center-divider {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
z-index: 2;
}
.navigation-container .center-icon {
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
position: relative;
}
.navigation-container .center-icon::before,
.navigation-container .center-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 2px;
background: #667eea;
border-radius: 1px;
}
.navigation-container .center-icon::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.navigation-container .center-icon::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.clstestsliderpart {
overflow: hidden;
float: left;
width: 100%;
}
.clssliderpart {
position: relative;
margin-top: 60px;
z-index: 2;
width: 90%; float: right;
}
.clssliderpart .clsrow1 {
margin-right: -1000px;
}
#clsslider1 .item {
padding: 0px 0px;
}
#clsslider1 .clsitemcol {
background-color: #fcf4f6;
}
#clsslider1 .bgred {
background-color: #c5143d;
}
#clsslider1 .clsitemcol .clstestinfo {
display: flex;
align-items: center;
}
#clsslider1 .clsitemcol .clsrowreverse {
flex-direction: row-reverse;
}
#clsslider1 .clsitemcol .imgcol {
width: 50%;
}
#clsslider1 .clsitemcol .imgcol img {
width: 100%;
height: 100%;
object-fit: cover;
}
#clsslider1 .clsitemcol .clstexts {
width: 50%;
padding: 50px;
}
#clsslider1 .clsitemcol .clstexts p {
font-size: 22px;
clear: #010101;
}
#clsslider1 .bgred .clstexts p {
color: #ffffff;
}
.cls_social_impact .social-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.cls_social_impact .social-header h1 {
font-size: 40px;
font-weight: 700;
font-family: "Din Pro", sans-serif;
color: #010101;
letter-spacing: 1px;
}
.cls_social_impact .show-all {
color: #666666;
text-decoration: underline;
font-size: 24px;
font-weight: 400;
transition: color 0.3s ease;
}
.cls_social_impact .show-all:hover {
color: #333;
}
.cls_social_impact .stories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
align-items: stretch;
}
.cls_social_impact .story-card {
background: #fcf4f6; overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
position: relative;
animation: fadeInUp 0.6s ease forwards;
}
.cls_social_impact .story-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.cls_social_impact .image-container {
position: relative;
height: 279px;
overflow: hidden;
}
.cls_social_impact .story-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.cls_social_impact .story-card:hover .story-image {
transform: scale(1.05);
}
.cls_social_impact .date-overlay {
position: absolute;
bottom: 15px;
left: 15px; color: white;
padding: 6px 12px; font-size: 20px;
font-weight: 500;
}
.cls_social_impact .card-content {
padding: 20px;
position: relative;
}
.cls_social_impact .blogger-tag {
color: #c5143d;
font-size: 20px;
font-weight: 700;  }
.cls_social_impact .student-blogger {
background: #e8f4fd;
color: #1976d2;
}
.cls_social_impact .teacher-blogger {
background: #fce4ec;
color: #c2185b;
}
.cls_social_impact .story-title {
color: #000000;
font-size: 20px;
font-weight: 400;
line-height: 1.5;
margin-bottom: 15px;
}
.cls_social_impact .arrow {
position: absolute;
right: 20px;
bottom: 20px;
width: 13px;
height: 13px;  display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.cls_social_impact .story-card:hover .arrow::after {
color: white;
} @keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.cls_social_impact .story-card:nth-child(1) {
animation-delay: 0.1s;
}
.cls_social_impact .story-card:nth-child(2) {
animation-delay: 0.2s;
}
.cls_social_impact .story-card:nth-child(3) {
animation-delay: 0.3s;
}
.nav-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
max-width: 1200px;
margin: 30px auto 0 auto;
align-items: center;
padding: 0px 45px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-btn {
background-color: white;
border: 2px solid #e1e5e9;
border-radius: 8px;
padding: 12px 20px;
font-size: 16px;
font-weight: 500;
color: #49454F;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s ease;
min-width: 120px;
justify-content: space-between;
}
.dropdown-btn:hover {
border-color: #C5143D;
background-color: #C5143D;
}
.dropdown-btn:focus {
outline: none;
border-color: #C5143D;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
background-color: #C5143D;
}
.dropdown-arrow {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #000;
transition: transform 0.2s ease;
}
.dropdown.active .dropdown-arrow {
transform: rotate(180deg);
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 200px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
border-radius: 8px;
z-index: 1000;
top: 100%;
left: 0;
margin-top: 5px;
border: 1px solid #e1e5e9;
overflow: hidden;
}
.dropdown.active .dropdown-content {
display: block;
animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.dropdown-item {
color: #495057;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 14px;
transition: background-color 0.2s ease;
}
.dropdown-item:hover {
background-color: #f8f9fa;
color: #007bff;
}
.blog-flex-container {
display: flex;
gap: 30px;
align-items: flex-start;
flex-wrap: wrap; }
.blog-featured-image {
flex: 1;
min-width: 300px;
}
.blog-featured-image img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
border-radius: 8px;
}
.blog-text-content {
flex: 2;
min-width: 300px;
}
.blog-meta {
font-size: 14px;
color: #888;
margin-bottom: 10px;
}
.blog-title {
font-size: 28px;
margin-bottom: 20px;
}
.blog-body {
font-size: 16px;
line-height: 1.6;
}
.slider{
max-width: 1100px;
display: flex;
}
.slider .card{
flex: 1;
margin: 0 10px;
background: #fff;
}
.slider .card .img{
height: 200px;
width: 100%;
}
.slider .card .img img{
height: 100%;
width: 100%;
object-fit: cover;
}
.slider .card .content{
padding: 10px 20px;
}
.card .content .title{
font-size: 25px;
font-weight: 600;
}
.card .content .sub-title{
font-size: 20px;
font-weight: 600;
color: #e74c3c;
line-height: 20px;
}
.card .content p{
text-align: justify;
margin: 10px 0;
}
.card .content .btn{
display: block;
text-align: left;
margin: 10px 0;
}
.card .content .btn button{
background: #e74c3c;
color: #fff;
border: none;
outline: none;
font-size: 17px;
padding: 5px 8px;
border-radius: 5px;
cursor: pointer;
transition: 0.2s;
}
.card .content .btn button:hover{
transform: scale(0.9);
} @media (max-width: 1024px) {
.boardmember {
padding: 40px 0;
}
.boardmember .clsmembphoto {
flex: 0 0 300px;
width: 300px;
}
.boardmember .clsmembinfo {
padding-left: 60px;
}
.boardmember .clsmembinfo h4 {
font-size: 32px;
}
.boardmember .clsmembinfo span {
font-size: 24px;
}
.boardmember .clsmembinfo p {
font-size: 24px;
}
} @media (max-width: 768px) {
.testimonials-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.testimonials-header {
margin-bottom: 20px;
}
.testimonials-title {
font-size: 16px;
}
.boardmember {
padding: 30px 0 60px 0;
}
.midcontainer {
padding: 0 15px;
}
.boardmember .item {
flex-direction: column;
text-align: center;
}
.boardmember .clsmembphoto {
flex: none;
width: 250px;
margin: 0 auto 30px auto;
}
.boardmember .clsmembinfo {
flex: none;
width: 100%;
padding-left: 0;
}
.boardmember .clsmembinfo h4 {
font-size: 28px;
margin-bottom: 15px;
}
.boardmember .clsmembinfo span {
font-size: 20px;
margin-bottom: 20px;
}
.boardmember .clsmembinfo p {
font-size: 18px;
line-height: 1.5;
}
.trending-container {
padding: 15px;
border-width: 2px;
}
.trending-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.trending-title {
font-size: 20px;
}
.trending-item {
gap: 12px;
}
.trending-image {
width: 160px;
height: 160px;
}
.trending-description {
font-size: 13px;
}
.grid_blog .container {
padding: 10px;
}
.grid_blog .blog-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.grid_blog .card-image {
height: 180px;
}
.grid_blog .card-content {
padding: 15px;
}
.grid_blog .card-title {
font-size: 15px;
min-height: auto;
}
.cls_learning .festivals-grid {
grid-template-columns: 1fr;
}
.cls_learning .header h1 {
font-size: 24px;
}
.cls_learning .container {
padding: 0 10px;
}
.cls_learning body {
padding: 10px;
}
.explore-container {
max-width: 100%;
border-radius: 8px;
}
.explore-container .header {
padding: 16px 16px 12px 16px;
}
.explore-container .header h2 {
font-size: 18px;
}
.explore-container .post-item {
padding: 14px 16px;
}
.explore-container .post-title {
font-size: 13px;
}
.explore-container .arrow {
margin-left: 12px;
}
.cls_social_impact .stories-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.cls_social_impact .header h1 {
font-size: 24px;
}
.cls_social_impact .image-container {
height: 180px;
}
.cls_social_impact .card-content {
padding: 15px;
}
.nav-container {
flex-direction: column;
align-items: stretch;
}
.dropdown {
width: 100%;
}
.dropdown-btn {
width: 100%;
padding: 15px 20px;
font-size: 16px;
}
.dropdown-content {
position: static;
display: none;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
margin-top: 0;
border-radius: 0 0 8px 8px;
border-top: none;
}
.dropdown.active .dropdown-content {
display: block;
}
}
@media (max-width: 480px) {
.card-content {
padding: 12px;
background-color: #fef8f2;
}
.testimonials-grid .testimonial-card:nth-child(2) .card-content {
background-color: #d7ac00 !important;
}
.card-image {
height: 160px;
}
.boardmember {
padding: 20px 0 50px 0;
}
.boardmember .clsmembphoto {
width: 200px;
margin-bottom: 25px;
}
.boardmember .clsmembinfo h4 {
font-size: 24px;
}
.boardmember .clsmembinfo span {
font-size: 18px;
margin-bottom: 15px;
}
.boardmember .clsmembinfo p {
font-size: 16px;
}
.boardmember .owl-dots {
bottom: 15px;
}
.trending-container {
padding: 12px;
margin: 10px;
}
.trending-header,
.learning-header {
margin-bottom: 20px;
}
.trending-title {
font-size: 18px;
}
.trending-item {
flex-direction: column;
gap: 10px;
}
.trending-image {
width: 100%;
height: 150px;
}
.trending-grid {
gap: 20px;
}
.grid_blog {
padding: 10px 0;
}
.grid_blog .card-image {
height: 160px;
}
.grid_blog .date-overlay {
font-size: 11px;
padding: 6px 10px;
}
.grid_blog .card-title {
font-size: 14px;
}
.cls_learning .card-image {
height: 150px;
}
.cls_learning .header {
flex-direction: column;
gap: 15px;
text-align: center;
}
.explore-container .header h2 {
font-size: 16px;
}
.explore-container .post-item {
padding: 12px 14px;
}
.explore-container .post-date {
font-size: 11px;
}
.explore-container .post-tag {
font-size: 11px;
}
.explore-container .post-title {
font-size: 12px;
line-height: 1.3;
}
.explore-container .arrow {
width: 6px;
height: 6px;
margin-left: 10px;
}
.cls_social_impact .header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.cls_social_impact .header h1 {
font-size: 20px;
}
.cls_social_impact .image-container {
height: 160px;
}
.cls_social_impact .story-title {
font-size: 14px;
}
.dropdown-btn {
padding: 18px 20px;
font-size: 16px;
}
.dropdown-item {
padding: 15px 20px;
font-size: 15px;
}
}
@media (max-width: 320px) {
.boardmember .clsmembphoto {
width: 180px;
}
.boardmember .clsmembinfo h4 {
font-size: 22px;
}
.boardmember .clsmembinfo span {
font-size: 16px;
}
.boardmember .clsmembinfo p {
font-size: 15px;
}
} @media (min-width: 769px) and (max-width: 1024px) {
.testimonials-grid {
grid-template-columns: repeat(2, 1fr);
}
}