/* ===== CSS Variables ===== */
@charset "utf-8";
@font-face {
font-family: 'Cairo-Medium';
src: url('Cairo-Medium.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
* {
font-family: 'Cairo-Medium';
}
:root {
--orange: #d94a19; /* الأساسي */
--orange-light: #ff8f66; /* فاتح دافي – للـ badges / hover */
--orange-dark: #a93a13; /* غامق شيك – للـ text / icons */
--burgundy: #31263a; /* الأساسي */
--burgundy-light: #6f5a7a; /* فاتح ناعم – badges / backgrounds */
--burgundy-dark: #1f1826; /* غامق شيك – text / overlays */
--cream: #FDF6F0;
--warm-white: #FFFAF7;
--text-dark: #2D1810;
--text-muted: #6B5B54;
--white: #FFFFFF;
--shadow-sm: 0 2px 8px rgba(114, 47, 55, 0.08);
--shadow-md: 0 4px 20px rgba(114, 47, 55, 0.12);
--shadow-lg: 0 8px 40px rgba(114, 47, 55, 0.16);
--shadow-xl: 0 16px 60px rgba(114, 47, 55, 0.2);
--transition-fast: 0.2s ease;
--transition-medium: 0.3s ease;
--transition-slow: 0.5s ease;
}
/* ===== Reset & Base ===== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
direction: rtl;
}
body {
font-family: 'Poppins', system-ui, sans-serif;
color: var(--text-dark);
background-color: var(--cream);
line-height: 1.6;
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
text-decoration: none;
color: inherit;
}
button {
border: none;
background: none;
cursor: pointer;
font-family: inherit;
}
ul {
list-style: none;
}
/* ===== Utility Classes ===== */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
.text-gradient {
background: linear-gradient(135deg, var(--orange) 0%, var(--burgundy) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-badge {
display: inline-block;
padding: 0.5rem 1.25rem;
background:var(--orange) ;
color: #FFFFFF;
font-size: 1.575rem;
font-weight: 600;
border-radius: 50px;
margin-bottom: 1rem;
}
.section-badge-light {
background: rgba(255, 255, 255, 0.2);
color: var(--white);
}
.section-header {
text-align: center;
max-width: 700px;
margin: 0 auto 1rem;
}
.section-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
margin-bottom: 1rem;
color: var(--text-dark);
}
.section-title-white {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
margin-bottom: 1rem;
color: #FFFFFF;
}
.section-description {
color: var(--text-muted);
font-size: 1.1rem;
}
/* ===== Buttons ===== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.875rem 2rem;
font-size: 1rem;
font-weight: 600;
border-radius: 50px;
transition: all var(--transition-medium);
cursor: pointer;
}
.btn-primary {
background: var(--orange);
color: var(--white);
box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(255, 107, 53, 0.4);
}
.btn-outline {
border: 2px solid var(--burgundy);
color: var(--burgundy);
background: transparent;
}
.btn-outline:hover {
background: var(--burgundy);
color: var(--white);
}
.btn-outline-dark {
border: 2px solid var(--orange);
color: var(--orange);
background: transparent;
}
.btn-outline-dark:hover {
border: 2px solid var(--orange);
background: var(--orange);
color: var(--white);
}
.btn-light {
background: var(--white);
color: var(--burgundy);
}
.btn-light:hover {
background: var(--cream);
transform: translateY(-2px);
}
.btn-ghost {
color: var(--white);
border: 2px solid rgba(255, 255, 255, 0.5);
background: transparent;
}
.btn-ghost:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--white);
}
.btn-submit {
width: 100%;
background: linear-gradient(135deg, var(--orange) 0%, var(--burgundy) 100%);
color: var(--white);
}
.btn-submit:hover {
opacity: 0.9;
}
/* ===== Header ===== */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 1rem 0;
transition: all var(--transition-medium);
background: transparent;
}
.header.scrolled {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: var(--shadow-md);
padding: 0.75rem 0;
}
.header-container {
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
display: flex;
align-items: center;
gap: 0.75rem;
}
.logo-icon svg {
width: 100%;
height: 100%;
}
.logo-text {
display: flex;
flex-direction: column;
}
.logo-title {
font-family: 'Playfair Display', serif;
font-size: 1.25rem;
font-weight: 700;
color: var(--burgundy);
line-height: 1.1;
}
.logo-subtitle {
font-size: 0.7rem;
font-weight: 500;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.nav {
display: flex;
align-items: center;
gap: 2rem;
}
.nav-link {
font-weight: 500;
color: var(--text-dark);
transition: color var(--transition-fast);
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--orange);
transition: width var(--transition-medium);
}
.nav-link:hover::after {
width: 100%;
}
.nav-link:hover {
color: var(--burgundy);
}
.nav-btn {
padding: 0.625rem 1.5rem;
background: var(--orange);
color: var(--white);
font-weight: 600;
border-radius: 50px;
transition: all var(--transition-medium);
}
.nav-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3);
}
.mobile-menu-btn {
display: none;
flex-direction: column;
gap: 5px;
padding: 0.5rem;
}
.mobile-menu-btn span {
display: block;
width: 24px;
height: 2px;
background: var(--burgundy);
transition: all var(--transition-medium);
}
.mobile-menu-btn.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-btn.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-btn.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* Mobile Menu */
.mobile-menu {
display: none;
position: fixed;
top: 70px;
left: 0;
right: 0;
background: var(--white);
padding: 2rem;
box-shadow: var(--shadow-lg);
transform: translateY(-100%);
opacity: 0;
transition: all var(--transition-medium);
z-index: 999;
}
.mobile-menu.active {
transform: translateY(0);
opacity: 1;
}
.mobile-nav {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.mobile-nav-link {
font-size: 1.1rem;
font-weight: 500;
color: var(--text-dark);
padding: 0.5rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.mobile-nav-btn {
display: inline-block;
text-align: center;
padding: 1rem 2rem;
background: linear-gradient(135deg, var(--orange) 0%, var(--burgundy) 100%);
color: var(--white);
font-weight: 600;
border-radius: 50px;
margin-top: 1rem;
}
@media (max-width: 768px) {
.nav {
display: none;
}
.mobile-menu-btn {
display: flex;
}
.mobile-menu {
display: block;
}
}
/* ===== Hero Section ===== */
.hero {
position: relative;
display: flex;
align-items: center;
overflow: hidden;
background: linear-gradient(135deg, var(--warm-white) 0%, var(--cream) 100%);
}
.hero-bg {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.hero-shape {
position: absolute;
border-radius: 50%;
opacity: 0.1;
}
.hero-shape-1 {
width: 600px;
height: 600px;
background: var(--orange) ;
top: -200px;
right: -100px;
animation: float 2s ease-in-out infinite;
}
.hero-shape-2 {
width: 400px;
height: 400px;
background: var(--orange);
bottom: -100px;
left: -100px;
animation: float 3s ease-in-out infinite;
animation-delay: -3s;
}
.hero-shape-3 {
width: 200px;
height: 200px;
background: var(--orange);
top: 50%;
left: 30%;
animation: float 4s ease-in-out infinite;
animation-delay: -5s;
}
.hero-slides {
position: relative;
width: 100%;
margin: 0 auto;
padding: 6rem 1.5rem 3rem;
}
.hero-slide {
display: none;
gap: 4rem;
align-items: center;
animation: fadeIn 0.8s ease-out;
position: relative;
}
.hero-slide.active {
display: grid;
grid-template-columns: 1fr 1fr;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-content {
max-width: 100%;
justify-items: center;
}
.hero-badge {
padding: 0.5rem 1.25rem;
background: var(--orange);
color: var(--cream);
font-size: 1.5rem;
font-weight: 600;
border-radius: 50px;
margin-bottom: 1rem;
}
.hero-title {
font-family: 'Playfair Display', serif;
font-size: clamp(1.5rem, 6vw, 2rem);
font-weight: 700;
line-height: 1.1;
margin-bottom: 1.5rem;
color: var(--text-dark);
text-align:center
}
.hero-description {
font-size: 1.125rem;
color: var(--text-muted);
margin-bottom: 2rem;
line-height: 1.7;
}
.hero-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.hero-visual {
height: 400px;
position: relative;
}
.hero-card {
position: absolute;
display: flex;
align-items: center;
gap: 1rem;
background: var(--white);
padding: 1.25rem 1.5rem;
border-radius: 16px;
box-shadow: var(--shadow-lg);
animation: float 6s ease-in-out infinite;
}
.hero-card-1 {
top: 20%;
left: 0;
animation-delay: 0s;
}
.hero-card-2 {
top: 45%;
right: 0;
animation-delay: -2s;
}
.hero-card-3 {
bottom: 10%;
left: 15%;
animation-delay: -4s;
}
.hero-card-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(114, 47, 55, 0.1) 100%);
border-radius: 12px;
color: var(--burgundy);
}
.hero-card-icon svg {
width: 24px;
height: 24px;
}
.hero-card-content {
display: flex;
flex-direction: column;
}
.hero-card-number {
font-size: 1.5rem;
font-weight: 700;
color: var(--burgundy);
}
.hero-card-label {
font-size: 0.875rem;
color: var(--text-muted);
}
.hero-indicators {
position: absolute;
bottom: 8rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.75rem;
z-index: 10;
}
.hero-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(114, 47, 55, 0.2);
transition: all var(--transition-medium);
cursor: pointer;
}
.hero-indicator.active {
background: linear-gradient(135deg, var(--orange) 0%, var(--burgundy) 100%);
transform: scale(1.2);
}
.hero-arrows {
position: absolute;
bottom: 8rem;
right: 2rem;
display: flex;
gap: 0.75rem;
z-index: 10;
}
.hero-arrow {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--white);
border-radius: 50%;
box-shadow: var(--shadow-md);
color: var(--burgundy);
transition: all var(--transition-medium);
}
.hero-arrow:hover {
background: linear-gradient(135deg, var(--orange) 0%, var(--burgundy) 100%);
color: var(--white);
transform: scale(1.1);
}
.hero-arrow svg {
width: 20px;
height: 20px;
}
.hero-wave {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 120px;
}
.hero-wave svg {
width: 100%;
height: 100%;
}
@media (max-width: 968px) {
.hero-slide {
position: relative;
height: 100%;
}
.hero-main-image::before {
position: relative;
height: 100%;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.hero-visual {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.hero-slide.active {
display: block;
}
.hero-main-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
mask-image: none;
-webkit-mask-image: none;
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
padding: 8rem 1.5rem 3rem;
color: #fff;
background: rgba(0,0,0,0.2);
}
.hero-slide::after {
content: "";
inset: 0;
background: rgba(0,0,0,0.45);
z-index: 1;
}
.hero-badge {
padding: 0.5rem 1.25rem;
background: var(--orange);
color: var(--cream);
font-size: 1rem;
font-weight: 600;
border-radius: 50px;
margin-bottom: 1rem;
}
.hero-title {
font-family: 'Playfair Display', serif;
font-size: clamp(1rem, 6vw, 1.5rem);
font-weight: 600;
line-height: 1.1;
margin-bottom: 2rem;
color: var(--cream);
text-align:center
}
}
.hero-main-image {
position: absolute;
inset: 0;
margin: auto;
width: 100%;
height: 100%;
object-fit: cover;
/* قص عضوي */
/* دمج مع الخلفية */
mask-image: radial-gradient(circle at center, black 60%, transparent 100%);
-webkit-mask-image: radial-gradient(circle at center, black 60%, transparent 100%);
opacity: .85;
z-index: 0;
animation: heroImageFloat 10s ease-in-out infinite;
}
.hero-card {
z-index: 2;
backdrop-filter: blur(6px);
background: rgba(255, 255, 255, .85);
}
/* ===== About Section ===== */
.about {
position: relative;
background: var(--cream);
padding: 1rem 0;
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.about-image {
position: relative;
}
.about-image-main {
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow-xl);
}
.about-image-main img {
width: 100%;
height: 400px;
object-fit: cover;
}
.about-image-accent {
position: absolute;
bottom: -40px;
right: -40px;
width: 200px;
border-radius: 16px;
overflow: hidden;
box-shadow: var(--shadow-lg);
border: 4px solid var(--white);
}
.about-image-accent img {
width: 100%;
height: 140px;
object-fit: cover;
}
.about-stats-card {
position: absolute;
top: -20px;
left: -20px;
background: linear-gradient(135deg, var(--orange) 0%, var(--burgundy) 100%);
color: var(--white);
padding: 1.5rem;
border-radius: 16px;
box-shadow: var(--shadow-lg);
}
.about-stat-number {
display: block;
font-size: 2.5rem;
font-weight: 700;
}
.about-stat-label {
font-size: 0.875rem;
opacity: 0.9;
}
.about-accordion {
display: flex;
flex-direction: column;
gap: 1rem;
}
.accordion-item {
background: var(--white);
border-radius: 16px;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all var(--transition-medium);
}
.accordion-item:hover {
box-shadow: var(--shadow-md);
}
.accordion-header {
width: 100%;
display: flex;
align-items: center;
gap: 1rem;
padding: 1.25rem 1.5rem;
text-align: left;
cursor: pointer;
}
.accordion-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(114, 47, 55, 0.1) 100%);
border-radius: 10px;
color: var(--burgundy);
flex-shrink: 0;
}
.accordion-icon svg {
width: 20px;
height: 20px;
}
.accordion-title {
flex: 1;
font-size: 1.1rem;
font-weight: 600;
color: var(--text-dark);
text-align: start;
}
.accordion-arrow {
width: 24px;
height: 24px;
color: var(--text-muted);
transition: transform var(--transition-medium);
}
.accordion-arrow svg {
width: 100%;
height: 100%;
}
.accordion-item.active .accordion-arrow {
transform: rotate(180deg);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-medium), padding var(--transition-medium);
}
.accordion-item.active .accordion-content {
max-height: 100%;
padding: 0 1.5rem 1.5rem;
}
.accordion-content p {
color: var(--text-muted);
line-height: 1.7;
}
.section-wave {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 120px;
pointer-events: none;
}
.section-wave svg {
width: 100%;
height: 100%;
}
@media (max-width: 968px) {
.about-content {
grid-template-columns: 1fr;
gap: 3rem;
}
.about-image-accent {
right: 20px;
bottom: -20px;
}
.about-stats-card {
left: 20px;
top: 20px;
}
}
/* ===== Features Section ===== */
.features {
position: relative;
padding: 2rem 0 2rem;
background: var(--warm-white);
}
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
position: relative;
margin-bottom: 3rem;
}
.feature-card {
background: var(--white);
padding: 2rem;
border-radius: 20px;
box-shadow: var(--shadow-sm);
transition: all var(--transition-medium);
position: relative;
overflow: hidden;
justify-items: center;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, var(--orange) 0%, var(--burgundy) 100%);
transform: scaleX(0);
transition: transform var(--transition-medium);
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
}
.feature-card:hover::before {
transform: scaleX(1);
}
.feature-icon {
width: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(114, 47, 55, 0.1) 100%);
border-radius: 16px;
color: var(--burgundy);
margin-bottom: 1.5rem;
transition: all var(--transition-medium);
background-position: center;
background-size: cover;
}
.feature-card:hover .feature-icon {
background: linear-gradient(135deg, var(--orange) 0%, var(--burgundy) 100%);
color: var(--white);
transform: scale(1.1);
}
.feature-icon svg {
width: 28px;
height: 28px;
}
.feature-title {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: var(--text-dark);
}
.feature-title-light {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: #FFFFFF;
}
.feature-description {
color: var(--text-muted);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.feature-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--burgundy);
font-weight: 600;
font-size: 0.9rem;
transition: gap var(--transition-medium);
}
.feature-link-light {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color:#FFFFFF;
font-weight: 600;
font-size: 0.9rem;
transition: gap var(--transition-medium);
}
.feature-link:hover,.feature-link-light:hover {
gap: 1rem;
}
.feature-link svg,.feature-link-light svg {
width: 16px;
height: 16px;
}
.features-connections {
display: none;
}
@media (max-width: 968px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.features-grid {
grid-template-columns: 1fr;
}
}
/* ===== News Section ===== */
.news {
position: relative;
padding: 2rem 0 2rem;
background: linear-gradient(135deg, rgba(255, 107, 53, 0.05) 0%, rgba(114, 47, 55, 0.05) 100%);
}
.news-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2rem;
}
.news-card {
background: var(--white);
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all var(--transition-medium);
}
.news-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.news-card-featured {
grid-row: span 2;
}
.news-image {
position: relative;
overflow: hidden;
}
.news-card-featured .news-image img {
height: 300px;
}
.news-image img {
width: 100%;
height: 180px;
object-fit: cover;
transition: transform var(--transition-slow);
}
.news-card:hover .news-image img {
transform: scale(1.05);
}
.news-category {
position: absolute;
top: 1rem;
left: 1rem;
padding: 0.375rem 1rem;
background: linear-gradient(135deg, var(--orange) 0%, var(--burgundy) 100%);
color: var(--white);
font-size: 0.75rem;
font-weight: 600;
border-radius: 50px;
}
.news-content {
padding: 1.5rem;
}
.news-card-featured .news-content {
padding: 2rem;
}
.news-meta {
margin-bottom: 0.75rem;
}
.news-date {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--text-muted);
font-size: 0.875rem;
}
.news-date svg {
width: 14px;
height: 14px;
}
.news-title {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: var(--text-dark);
line-height: 1.4;
}
.news-card-featured .news-title {
font-size: 1.5rem;
}
.news-excerpt {
color: var(--text-muted);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 1rem;
}
.news-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--burgundy);
font-weight: 600;
font-size: 0.9rem;
}
.news-link:hover {
text-decoration: underline;
}
.news-cta {
text-align: center;
margin-top: 3rem;
}
@media (max-width: 768px) {
.news-grid {
grid-template-columns: 1fr;
}
.news-card-featured {
grid-row: span 1;
}
}
/* ===== Registration Section ===== */
.registration {
position: relative;
padding: 2rem 0;
background: linear-gradient(135deg, var(--orange) 0%, var(--burgundy) 100%);
overflow: hidden;
}
.registration-bg {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.registration-shape {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
}
.registration-shape-1 {
width: 400px;
height: 400px;
top: -150px;
right: -100px;
animation: float 10s ease-in-out infinite;
}
.registration-shape-2 {
width: 300px;
height: 300px;
bottom: -100px;
left: -50px;
animation: float 8s ease-in-out infinite;
animation-delay: -3s;
}
.registration-shape-3 {
width: 150px;
height: 150px;
top: 50%;
left: 40%;
animation: float 6s ease-in-out infinite;
animation-delay: -5s;
}
.registration-glow {
position: absolute;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.registration-content {
position: relative;
display: grid;
gap: 4rem;
align-items: center;
}
.registration-text {
color: var(--white);
text-align: center;
justify-items:center;
}
.registration-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.registration-title span {
display: block;
opacity: 0.9;
}
.registration-description {
font-size: 1.125rem;
opacity: 0.9;
margin-bottom: 2rem;
line-height: 1.7;
}
.registration-features {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
}
.registration-feature {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1rem;
}
.registration-feature svg {
width: 20px;
height: 20px;
color: var(--orange-light);
}
.registration-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.registration-form-wrapper {
background: var(--white);
padding: 2.5rem;
border-radius: 24px;
box-shadow: var(--shadow-xl);
}
.form-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1.5rem;
color: var(--text-dark);
text-align: center;
}
.form-group {
margin-bottom: 1.25rem;
}
.form-group label {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: var(--text-dark);
margin-bottom: 0.5rem;
}
.form-group input,
.form-group select {
width: 100%;
padding: 0.875rem 1rem;
border: 2px solid rgba(114, 47, 55, 0.1);
border-radius: 12px;
font-size: 1rem;
transition: border-color var(--transition-fast);
background: var(--warm-white);
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: var(--burgundy);
}
.registration-stars {
position: absolute;
inset: 0;
pointer-events: none;
}
.star {
position: absolute;
color: rgba(255, 255, 255, 0.3);
animation: pulse 2s ease-in-out infinite;
}
.star-1 { top: 10%; left: 5%; font-size: 1.5rem; animation-delay: 0s; }
.star-2 { top: 20%; right: 10%; font-size: 1rem; animation-delay: 0.5s; }
.star-3 { bottom: 30%; left: 15%; font-size: 1.25rem; animation-delay: 1s; }
.star-4 { bottom: 15%; right: 5%; font-size: 0.875rem; animation-delay: 1.5s; }
@keyframes pulse {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.2); }
}
@media (max-width: 968px) {
.registration-content {
grid-template-columns: 1fr;
gap: 3rem;
}
.registration-text {
text-align: center;
}
.registration-features {
align-items: center;
}
.registration-buttons {
justify-content: center;
}
}
/* ===== Gallery Section ===== */
.gallery {
position: relative;
padding: 2rem 0 2rem;
background: var(--cream);
}
.gallery-tabs {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.gallery-tab {
padding: 0.625rem 1.5rem;
border-radius: 50px;
font-weight: 500;
color: var(--text-muted);
background: var(--white);
transition: all var(--transition-medium);
}
.gallery-tab:hover {
color: var(--burgundy);
}
.gallery-tab.active {
background: linear-gradient(135deg, var(--orange) 0%, var(--burgundy) 100%);
color: var(--white);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.gallery-item {
position: relative;
border-radius: 16px;
overflow: hidden;
cursor: pointer;
aspect-ratio: 4/3;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.gallery-item:hover img {
transform: scale(1.1);
}
.gallery-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(114, 47, 55, 0.9) 0%, transparent 60%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.5rem;
opacity: 0;
transition: opacity var(--transition-medium);
}
.gallery-item:hover .gallery-overlay {
opacity: 1;
}
.gallery-overlay h4 {
color: var(--white);
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.25rem;
}
.gallery-overlay p {
color: rgba(255, 255, 255, 0.8);
font-size: 0.875rem;
}
.gallery-item.hidden {
display: none;
}
@media (max-width: 968px) {
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.gallery-grid {
grid-template-columns: 1fr;
}
}
/* ===== Partners Section ===== */
.partners {
padding: 1rem 0;
background: linear-gradient(135deg, rgba(114, 47, 55, 0.03) 0%, rgba(255, 107, 53, 0.03) 100%);
}
.partners-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.partner-card {
border-radius: 20px;
text-align: center;
box-shadow: var(--shadow-sm);
transition: all var(--transition-medium);
}
.partner-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.partner-card:hover .partner-logo {
background: linear-gradient(135deg, var(--orange) 0%, var(--burgundy) 100%);
color: var(--white);
}
.partner-logo {
width: 80px;
height: 80px;
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(114, 47, 55, 0.1) 100%);
border-radius: 20px;
color: var(--burgundy);
transition: all var(--transition-medium);
}
.partner-logo svg {
width: 40px;
height: 40px;
}
.partner-name {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 0.25rem;
}
.partner-type {
font-size: 0.8rem;
color: var(--text-muted);
}
@media (max-width: 1024px) {
.partners-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 640px) {
.partners-grid {
grid-template-columns: repeat(1, 1fr);
}
}
/* ===== Footer ===== */
.footer {
position: relative;
background: linear-gradient(135deg, var(--burgundy-dark) 0%, var(--burgundy) 100%);
color: var(--white);
padding-top: 120px;
}
.footer-wave {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 120px;
}
.footer-wave svg {
width: 100%;
height: 100%;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-brand {
max-width: 300px;
}
.footer-logo {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.footer-logo .logo-icon {
color: var(--white);
}
.footer-logo .logo-title {
color: var(--white);
}
.footer-logo .logo-subtitle {
color: rgba(255, 255, 255, 0.7);
}
.footer-tagline {
color: rgba(255, 255, 255, 0.8);
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: 1.5rem;
}
.footer-social {
display: flex;
gap: 0.75rem;
}
.social-link {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
transition: all var(--transition-medium);
}
.social-link:hover {
background: var(--orange);
transform: translateY(-3px);
}
.social-link svg {
width: 18px;
height: 18px;
}
.footer-links
{
text-align:justify
}
.footer-links h4,
.footer-contact h4 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
.footer-links ul {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.footer-links a {
color: rgba(255, 255, 255, 0.8);
font-size: 0.95rem;
transition: all var(--transition-fast);
}
.footer-links a:hover {
color: var(--white);
padding-left: 0.5rem;
}
.contact-item {
display: flex;
gap: 0.75rem;
margin-bottom: 1rem;
color: rgba(255, 255, 255, 0.8);
font-size: 0.95rem;
}
.contact-item svg {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-top: 0.125rem;
}
.footer-bottom {
align-items: center;
padding: 1.5rem 0;
color: rgba(255, 255, 255, 0.6);
font-size: 0.875rem;
}
.footer-legal {
display: flex;
gap: 2rem;
}
.footer-legal a {
color: rgba(255, 255, 255, 0.6);
transition: color var(--transition-fast);
}
.footer-legal a:hover {
color: var(--white);
}
@media (max-width: 968px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.footer-brand {
grid-column: span 2;
max-width: 100%;
}
}
@media (max-width: 640px) {
.footer-grid {
grid-template-columns: 1fr;
}
.footer-brand {
grid-column: span 1;
}
.footer-bottom {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.footer-legal {
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
}
/* ===== Modal ===== */
.modal {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all var(--transition-medium);
}
.modal.active {
opacity: 1;
visibility: visible;
}
.modal-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.8);
}
.modal-content {
position: relative;
max-width: 90vw;
max-height: 90vh;
background: var(--white);
border-radius: 20px;
overflow: hidden;
transform: scale(0.9);
transition: transform var(--transition-medium);
}
.modal.active .modal-content {
transform: scale(1);
}
.modal-close {
position: absolute;
top: 1rem;
right: 1rem;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--white);
border-radius: 50%;
font-size: 1.5rem;
color: var(--text-dark);
z-index: 10;
transition: all var(--transition-fast);
}
.modal-close:hover {
background: var(--burgundy);
color: var(--white);
}
.modal-content img {
max-width: 100%;
max-height: 70vh;
object-fit: contain;
}
.modal-caption {
padding: 1.5rem;
text-align: center;
}
.modal-caption h4 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--text-dark);
}
.modal-caption p {
color: var(--text-muted);
}
/* ===== Animations ===== */
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
/* ===== Scroll Animations ===== */
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease-out;
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
.partners-section {
position: relative;
padding: 2rem 1rem;
overflow: hidden;
background-color: var(--warm-white);
}
.bg-circle {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
border-style: solid;
border-color: rgba(255, 140, 0, 0.1);
}
.circle-large {
width: 800px;
height: 800px;
border-width: 1px;
}
.circle-medium {
width: 600px;
height: 600px;
border-width: 1px;
border-color: rgba(128,0,32,0.05);
}
.container {
max-width: 1200px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 1;
}
.section-header .subtitle {
display: inline-block;
padding: 0.25rem 0.25rem;
border-radius: 9999px;
background-color: rgba(255, 140, 0, 0.1);
color: var(--orange);
font-size: 0.875rem;
margin-bottom: 0.25rem;
opacity: 0;
transform: translateY(20px);
transition: all 0.7s;
}
.section-header .title {
font-size: 2.5rem;
font-weight: bold;
margin: 0.5rem 0;
opacity: 0;
transform: translateY(20px);
transition: all 0.7s 0.1s;
}
.gradient-text {
background: linear-gradient(to right, var(--orange), var(--burgundy));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.section-header .description {
color: var(--text-muted);
max-width: 600px;
margin: 0 auto;
opacity: 0;
transform: translateY(20px);
transition: all 0.7s 0.2s;
}
.hex-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
margin-top: 3rem;
}
.hex {
position: relative;
width: 250px;
height: 268px;
cursor: pointer;
opacity: 0;
transform: translateY(30px);
transition: all 0.5s;
}
.hex svg {
width: 100%;
height: 100%;
}
.hex polygon {
stroke: var(--burgundy);
stroke-width: 1;
transition: all 0.5s;
}
.hex-content {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
}
.hex-content .initials {
font-size: 1.2rem;
font-weight: bold;
color: var(--burgundy);
transition: all 0.5s;
}
.hex-content .name {
font-size: 0.7rem;
color: #777;
margin-top: 0.25rem;
max-width: 90%;
text-align: center;
transition: all 0.5s;
}
/* Hover effect */
.hex:hover polygon {
stroke: var(--orange-dark);
stroke-width: 1;
/* fill via gradient in SVG */
}
.hex:hover .initials,
.hex:hover .name {
color: white;
transform: scale(1.1);
}
/* Glow animation */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* Responsive */
@media (max-width: 768px) {
.hex {
width: 200px;
height: 204px;
}
.hex-content .initials { font-size: 1.2rem; }
.hex-content .name { font-size: 0.6rem; }
}
.hex-content img {
max-width: 60%;
max-height: 40%;
border-radius: 8px;
transition: all 0.5s;
}
.hex.hovered img {
transform: scale(1.1);
}
.footer-widget__info li {
font-size: 16px;
color: var(--orange);
font-weight: 400;
}
.bg-vs-secondary {
background-color: #31263a !important;
background-image: url("blog-bg-3.png");
background-size: contain;
background-position: center;
}
.title-area {
margin-bottom: calc(60px - 22px);
}
.feature-style2 {
text-align: center;
position: relative;
z-index: 1;
margin-bottom: 23px;
}
.feature-style2 .vs-circle {
--circle-size: calc(100% + 10px);
--circle-border-size: 36px;
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
position: absolute;
left: 50%;
top: 60px;
z-index: -1;
transform: translateX(-50%);
transition: all ease 0.4s;
}
.feature-style2 .featurex-img {
margin-bottom: 18px;
}
.feature-style2 .featurex-img img {
width: 200px;
height: 200px;
}
.feature-style2 .feature-title {
margin-bottom: 10px;
font-size: 22px;
}
.feature-style2 .feature-text {
color: #E9E9E9;
margin: 0 auto;
max-width: 260px;
}
@media (max-width: 767px) {
.feature-style2 .vs-circle {
--circle-size: 100%;
}
}
.vs-circle {
width: var(--circle-size, 315px);
height: var(--circle-size, 315px);
border: var(--circle-border-size, 60px) solid #d94a19;
border-radius: var(--circle-radius, 50%);
}
.feature-style2 .featurex-img {
margin-bottom: 18px;
justify-items:center;
}
.title-area {
text-align: center;
}
.space-extra-bottom {
padding: 60px;
}
.feature-body
{
color: #fff !important;
}
.wrapperbub {
inset: 0; /* top:0; right:0; bottom:0; left:0; */
overflow: hidden;
z-index: -1; /* تحت كل العناصر */
background: #111; /* خلفية داكنة لتوضيح المثلثات */
}
/* المثلثات */
.bgbox div {
position: absolute;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid var(--orange);
left: calc(100% * var(--x));
top: calc(100% * var(--y));
animation: animate var(--d) linear infinite;
opacity: 0.7;
transform-origin: center;
}
/* توزيع عشوائي + سرعات مختلفة */
.bgbox div:nth-child(1) { --x: .1; --y: .8; --d: 6s; }
.bgbox div:nth-child(2) { --x: .3; --y: .2; --d: 10s; }
.bgbox div:nth-child(3) { --x: .5; --y: .6; --d: 8s; }
.bgbox div:nth-child(4) { --x: .7; --y: .1; --d: 12s; }
.bgbox div:nth-child(5) { --x: .9; --y: .9; --d: 9s; }
.bgbox div:nth-child(6) { --x: .2; --y: .4; --d: 11s; }
.bgbox div:nth-child(7) { --x: .4; --y: .7; --d: 7s; }
.bgbox div:nth-child(8) { --x: .6; --y: .3; --d: 13s; }
.bgbox div:nth-child(9) { --x: .8; --y: .5; --d: 6s; }
.bgbox div:nth-child(10) { --x: .15; --y: .15; --d: 14s; }
.bgbox div:nth-child(11) { --x: .25; --y: .6; --d: 10s; }
.bgbox div:nth-child(12) { --x: .35; --y: .3; --d: 8s; }
.bgbox div:nth-child(13) { --x: .45; --y: .9; --d: 12s; }
.bgbox div:nth-child(14) { --x: .55; --y: .2; --d: 9s; }
.bgbox div:nth-child(15) { --x: .65; --y: .8; --d: 11s; }
.bgbox div:nth-child(16) { --x: .75; --y: .4; --d: 7s; }
.bgbox div:nth-child(17) { --x: .85; --y: .6; --d: 10s; }
.bgbox div:nth-child(18) { --x: .95; --y: .3; --d: 13s; }
.bgbox div:nth-child(19) { --x: .05; --y: .5; --d: 9s; }
.bgbox div:nth-child(20) { --x: .5; --y: .1; --d: 12s; }
/* الأنيميشن */
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(0deg);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.5) translateY(-150px) rotate(360deg);
opacity: 0;
}
}
.newstop {
background-color: var(--burgundy);
display: flex;
}
.nav {
position: relative;
}
.nav-item {
position: relative;
}
.dropdown {
position: absolute;
top: 100%;
right: 0;
min-width: 260px;
opacity: 0;
visibility: hidden;
transform: translateY(10px) scaleY(0.95);
transition: all .3s ease;
background: #fff;
box-shadow: 0 10px 40px rgba(0, 0, 0, .08);
border-radius: 8px;
padding: 10px 0;
z-index: 99;
}
/* ✨ هنا السحر */
.nav-item:hover .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0) scaleY(1);
}
/* 👇 لما تفتح */
.dropdown.open {
opacity: 1;
visibility: visible;
transform: translateY(0) scaleY(1);
}
.dropdown li {
list-style: none;
width: 100%;
}
.dropdown li a {
display: block;
width: 100%;
padding: 10px 18px;
font-size: 14px;
line-height: 1.8;
color: #333;
text-decoration: none;
transition: all .25s ease;
border-radius: 6px;
}
/* hover لطيف */
.dropdown li a:hover {
background: #f3f6fb;
color: #1e40af;
padding-right: 22px;
}
/* فاصل خفيف بين العناصر */
.dropdown li:not(:last-child) {
margin-bottom: 4px;
}
.dropdown li:not(:last-child) a {
border-bottom: 1px solid #f0f0f0;
}
/* desktop */
@media (min-width: 992px) {
.nav-item:hover .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0) scaleY(1);
}
}
/* mobile */
@media (max-width: 991px) {
.dropdown {
position: static;
box-shadow: none;
transform: none;
padding: 0;
max-height: 0;
overflow: hidden;
opacity: 1;
visibility: visible;
transition: max-height .3s ease;
}
.dropdown.open {
max-height: 1000px;
}
}
.mobile-nav .mobile-nav-link {
display: flex;
align-items: center;
}
.mobile-nav .arrow {
margin-right: auto;
font-size: 12px;
transition: transform .3s ease;
}
.mobile-nav .mobile-nav-link.open .arrow {
transform: rotate(180deg);
}
@media (max-width: 991px) {
.mobile-nav .dropdown {
position: static;
max-height: 0;
overflow: hidden;
transition: max-height .35s ease;
box-shadow: none;
padding: 0;
}
.mobile-nav .dropdown.open {
max-height: 1200px;
}
}
/* ===================== */
/* DESKTOP DROPDOWN */
/* ===================== */
.nav > .nav-item > .dropdown {
position: absolute;
top: 100%;
right: 0;
min-width: 260px;
opacity: 0;
visibility: hidden;
transform: translateY(10px) scaleY(0.95);
transition: all .3s ease;
}
/* hover desktop فقط */
@media (min-width: 992px) {
.nav-item:hover > .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0) scaleY(1);
}
}
/* ===================== */
/* MOBILE DROPDOWN */
/* ===================== */
@media (max-width: 991px) {
.mobile-nav .dropdown {
position: static;
opacity: 1;
visibility: visible;
transform: none;
max-height: 0;
overflow: hidden;
transition: max-height .35s ease;
box-shadow: none;
padding: 0;
}
.mobile-nav .dropdown.open {
max-height: 1200px;
}
}
.swiper-container {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 300px;
height: 300px;
}
.theme-bg {
background-color: #d94a199c;
}
.p-relative {
position: relative;
}
.fix {
overflow: hidden;
}
/*----------------------------------------*/
/* BREADCRUMB CSS START
/*----------------------------------------*/
.bd-breadcrumb {
position: relative;
z-index: 2;
min-height: 354px;
}
.bd-breadcrumb-bg {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-repeat: no-repeat;
background-size: cover;
mix-blend-mode: luminosity;
opacity: 0.5;
}
.bd-breadcrumb-shape {
z-index: 2;
}
.bd-breadcrumb-shape-1 {
position: absolute;
top: 200px;
inset-inline-start: 0px;
animation: bd-updown-2 2s infinite alternate-reverse;
}
.bd-breadcrumb-shape-2 {
position: absolute;
top: 100px;
inset-inline-end: 0px;
animation: bd-updown-2 2s infinite alternate-reverse;
}
.bd-breadcrumb-content {
color: var(--cream);
}
.bd-breadcrumb-title {
color: var(--cream);
font-weight: var(--bd-fw-sbold);
margin-bottom: 5px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.bd-breadcrumb-title {
font-size: 40px;
}
}
.bd-breadcrumb-list {
display: flex;
justify-content: center;
gap: 28px;
}
.bd-breadcrumb-list span {
position: relative;
}
.bd-breadcrumb-list span a:hover {
color: var(--bd-theme-2);
}
.bd-breadcrumb-list span i {
margin-inline-end: 10px;
}
[dir=rtl] .bd-breadcrumb-list span i {
margin-inline-start: 10px;
}
.bd-breadcrumb-list span:first-child::before {
position: absolute;
content: "";
height: 2px;
width: 6px;
border-radius: 40%;
background-color: var(--cream);
inset-inline-end: -15px;
top: 50%;
}
.bd-breadcrumb-area{
position: relative;
align-items: center;
overflow: hidden;
}
.bd-wave {
background: url("../img/shape/wave.svg") repeat-x;
position: absolute;
top: 40px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0);
}
.bd-wave-wrapper {
height: 160px;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: var(--cream);
}
.bd-wave-wrapper-2 {
top: auto;
bottom: 0;
left: 0;
background: var(--cream);
}
.bd-wave-wrapper-3 {
top: auto;
bottom: -20px;
background: transparent;
}
.bd-wave-3 {
background: url("download.svg") repeat-x;
top: 30px;
height: 130px;
}
.blog-card {
position: relative;
background-color: #fff;
border-radius: 36px;
box-shadow: 0px 14px 40px 0px rgba(0, 0, 0, 0.08);
--accent-color: var(--orange, #F25334);
}
.blog-card__image {
margin-bottom: 9px;
position: relative;
overflow: hidden;
border-top-left-radius: 36px;
border-top-right-radius: 36px;
width: 100%;
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: bottom center;
mask-position: bottom center;
-webkit-mask-size: auto;
mask-size: auto;
}
.blog-card__image img {
width: 100%;
height: auto;
}
.blog-card__image__layer {
position: absolute;
width: 100%;
height: 25%;
left: 100%;
top: 0;
background-position-x: 0%;
background-position-y: 0%;
transition: left 0.5s;
}
.blog-card__image__layer:nth-child(1) {
top: 0%;
background-position-y: 0%;
transition-delay: 0s;
}
.blog-card__image__layer:nth-child(2) {
top: 25%;
background-position-y: 33.333%;
transition-delay: 0.2s;
}
@media (min-width: 992px) and (max-width: 1199px) {
.blog-card__image__layer:nth-child(2) {
background-position-y: 24.333%;
}
}
.blog-card__image__layer:nth-child(3) {
top: 50%;
background-position-y: 66.666%;
transition-delay: 0.3s;
}
@media (min-width: 992px) and (max-width: 1199px) {
.blog-card__image__layer:nth-child(3) {
background-position-y: 47.666%;
}
}
.blog-card__image__layer:nth-child(4) {
top: 75%;
background-position-y: 100%;
transition-delay: 0.4s;
}
@media (min-width: 992px) and (max-width: 1199px) {
.blog-card__image__layer:nth-child(4) {
background-position-y: 71.666%;
}
}
.blog-card__image__link {
display: flex;
width: 100%;
height: 100%;
background-color: rgba(var(--dark, 11, 32, 56), 0.5);
position: absolute;
top: 0;
left: 0;
justify-content: center;
align-items: center;
opacity: 0;
transform: translateY(-20%);
transition: opacity 500ms ease, transform 500ms ease;
}
.blog-card__image__link::before, .blog-card__image__link::after {
content: "";
width: 32px;
height: 2px;
background-color: #fff;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.blog-card__image__link::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.blog-card:hover .blog-card__image > a {
opacity: 1;
transform: translateY(0);
}
.blog-card:hover .blog-card__image__layer {
left: 0;
}
.blog-card__content {
padding: 0px 24px 6px;
}
.blog-card__content__bottom, .blog-card__content__top {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 10px;
}
.blog-card__category {
background-color: var(--orange);
line-height: 1;
color: #fff !important;
padding: 8px 10px;
border-radius: 12px;
font-size: 14px;
font-weight: 500;
transition: all 500ms ease;
}
.blog-card__category:hover {
background-color: var(--text-dark, #0B2038);
color: #fff;
}
.blog-card__date {
line-height: 1;
color: var(--accent-color);
}
.blog-card__title {
color: var(--text-dark, #0B2038);
font-size: 20px;
margin-top: 15px;
margin-bottom: 14px;
}
@media (min-width: 768px) {
.blog-card__title {
font-size: 20px;
}
}
.blog-card__title a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 500ms ease;
}
.blog-card__title a:hover {
background-size: 100% 1px;
}
.blog-card__title a:hover {
color: var(--accent-color);
}
.blog-card__author {
display: flex;
align-items: center;
}
.blog-card__author__image {
width: 44px;
height: 45px;
border-radius: 50%;
overflow: hidden;
margin-right: 10px;
}
.blog-card__author__image img {
border-radius: 50%;
}
.blog-card__author__name {
font-size: 16px;
font-weight: bold;
color: var(--text-dark, #0B2038);
margin: 0;
line-height: 1;
margin-bottom: 6px;
}
.blog-card__author__designation {
font-size: 14px;
font-weight: 500;
color: var(--accent-color);
margin: 0;
line-height: 1;
}
.blog-card__link {
width: 40px;
height: 40px;
border-radius: 20px;
background-color: #d14718;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
transition: all 500ms ease;
}
.blog-card__link:hover {
background-color: #31263a;
color: var(--cream, #fff);
/* float: left; */
}
.blog-one {
padding: 80px 0;
}
@media (min-width: 992px) {
.blog-one {
padding: 60px 0;
}
}
.blog-one--page {
padding-top: 60px;
}
@media (min-width: 992px) {
.blog-one--page {
padding-top: 60px;
}
}
.blog-one--home-three {
position: relative;
background-color: var(--burgundy, #FFAA23);
}
.blog-one--home-three__bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-position: center center;
/* background-repeat: no-repeat; */
background-size: 60%;
background-color: var(--burgundy, #FFAA23);
background-blend-mode: multiply;
opacity: 0.75;
}
.blog-one--home-three .sec-title__tagline,
.blog-one--home-three .sec-title__title {
color: var(--cream, #fff);
}
.blog-one--home-three__top-shape {
z-index: 2;
position: absolute;
top: -21px;
left: 0;
width: 100%;
height: 23px;
background-color: inherit;
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: cover;
mask-size: cover;
display: none;
}
.blog-one--home-three__bottom-shape {
z-index: 2;
position: absolute;
bottom: -23px;
left: 0;
width: 100%;
height: 23px;
background-color: inherit;
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: cover;
mask-size: cover;
display: none;
}
.blog-one--home-three .kidearn-owl__carousel--basic-nav .owl-dots .owl-dot:hover span,
.blog-one--home-three .kidearn-owl__carousel--basic-nav .owl-dots .owl-dot.active span {
background-color: var(--cream, #fff);
}
.blog-one--home-four {
position: relative;
background-color: var(--orange, #F25334);
}
.blog-one--home-four__bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-color: var(--orange, #F25334);
background-blend-mode: multiply;
}
.blog-one--home-four .sec-title__tagline,
.blog-one--home-four .sec-title__title {
color: var(--cream, #fff);
}
.blog-one--home-four__top-shape {
z-index: 2;
position: absolute;
top: -21px;
left: 0;
width: 100%;
height: 23px;
background-color: inherit;
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: cover;
mask-size: cover;
}
.blog-one--home-four__bottom-shape {
z-index: 2;
position: absolute;
bottom: -23px;
left: 0;
width: 100%;
height: 23px;
background-color: inherit;
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: cover;
mask-size: cover;
}
.blog-one--home-four .kidearn-owl__carousel--basic-nav .owl-dots .owl-dot:hover span,
.blog-one--home-four .kidearn-owl__carousel--basic-nav .owl-dots .owl-dot.active span {
background-color: var(--cream, #fff);
}
.blog-one .container {
position: relative;
}
@media (min-width: 992px) {
.blog-one__carousel .owl-nav {
display: none;
}
}
.blog-card-two {
padding: 0;
box-shadow: none;
}
.blog-card-two .blog-card__image {
-webkit-mask: none;
mask: none;
border-radius: 14px;
}
.blog-card-two .blog-card__content {
padding: 0;
padding-top: 40px;
}
.blog-card-two .blog-card__content__bottom,
.blog-card-two .blog-card__content__top {
justify-content: flex-start;
gap: 20px;
}
.blog-card-two .blog-card__date {
color: var(--text-dark, #7E8185);
display: flex;
align-items: center;
}
.blog-card-two .blog-card__date i {
color: var(--accent-color);
font-size: 16px;
margin-right: 10px;
}
.blog-card-two__text {
margin: 0;
margin-bottom: 28px;
letter-spacing: 0px;
line-height: 1.875em;
font-size: 16px;
}
.blog-card-two .blog-card__title {
margin: 0;
font-size: 24px;
margin-top: 12px;
margin-bottom: 9px;
}
@media (min-width: 768px) {
.blog-card-two .blog-card__title {
font-size: 30px;
}
}
.blog-card-two .blog-card__link {
width: 50px;
height: 50px;
border-radius: 25px;
background-color: var(--cream, #fff);
border: 1px solid var(--accent-color);
}
.blog-card-two .blog-card__link:hover {
background-color: var(--accent-color);
color: var(--cream, #fff);
}
.blog-pagination {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.blog-pagination a,
.blog-pagination span {
width: 50px;
height: 50px;
border-radius: 10px;
border: 1px solid var(--orange, #FCE9DD);
display: flex;
justify-content: center;
align-items: center;
color: var(--text-dark, #0B2038);
font-size: 18px;
}
.blog-pagination a.current, .blog-pagination a:hover,
.blog-pagination span.current,
.blog-pagination span:hover {
background-color: var(--orange, #F25334);
color: var(--cream, #fff);
}
.blog-three {
position: relative;
padding: 0 0 90px;
}
@media (max-width: 767px) {
.blog-three {
padding-bottom: 80px;
}
}
.blog-three__shape-right {
position: absolute;
right: 6.5%;
top: 35.3%;
}
.blog-three__shape-right img {
width: 125px;
animation: arrowMove 4s linear 0s infinite;
}
@media (max-width: 1399px) {
.blog-three__shape-right {
display: none;
}
}
.blog-three__shape-left {
position: absolute;
left: 7%;
bottom: 24.3%;
}
.blog-three__shape-left img {
width: 100px;
animation: treeMove 4s linear 0s infinite;
}
@media (max-width: 1399px) {
.blog-three__shape-left {
display: none;
}
}
.blog-three .kidearn-owl__carousel--basic-nav .owl-nav.disabled + .owl-dots {
margin-top: 0px;
}
.blog-three .container {
z-index: 3;
}
.blog-card-three {
position: relative;
max-width: 353px;
margin: 0 auto 30px;
transition: 0.3s;
padding: 49px 31px 68px;
--accent-color: var(--orange, #F25334);
}
.blog-card-three__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--accent-color);
opacity: 0.1;
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: cover;
mask-size: cover;
}
.blog-card-three__image {
position: relative;
z-index: 2;
overflow: hidden;
width: 100%;
margin-bottom: 30px;
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: cover;
mask-size: cover;
}
.blog-card-three__image img {
width: 100%;
height: auto;
}
.blog-card-three__image__layer-wrapper {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
display: flex;
transition: 0.5s;
}
.blog-card-three__image__layer {
width: 25%;
height: 100%;
transition: 0.5s;
}
.blog-card-three__image__layer:nth-child(1) {
background-position: 0;
transition-delay: 0;
}
.blog-card-three__image__layer:nth-child(2) {
background-position: 33.33%;
transition-delay: 0.1s;
}
.blog-card-three__image__layer:nth-child(3) {
background-position: 66.66%;
transition-delay: 0.2s;
}
.blog-card-three__image__layer:nth-child(4) {
background-position: 100%;
transition-delay: 0.3s;
}
.blog-card-three__image__link {
display: flex;
width: 100%;
height: 100%;
background-color: rgba(var(--text-dark-rgb, 11, 32, 56), 0.5);
position: absolute;
top: 0;
left: 0;
justify-content: center;
align-items: center;
opacity: 0;
transform: translateY(-20%);
transition: opacity 500ms ease, transform 500ms ease;
}
.blog-card-three__image__link::before, .blog-card-three__image__link::after {
content: "";
width: 32px;
height: 2px;
background-color: var(--cream, #fff);
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.blog-card-three__image__link::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.blog-card-three:hover .blog-card-three__image > a {
opacity: 1;
transform: translateY(0);
}
.blog-card-three:hover .blog-card-three__image__layer {
transform: translateY(-100%);
}
.blog-card-three__content {
padding: 0;
position: relative;
z-index: 2;
}
.blog-card-three__content__bottom, .blog-card-three__content__top {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.blog-card-three__category {
background-color: var(--accent-color);
line-height: 1;
color: var(--cream, #fff);
padding: 8px 10px;
border-radius: 12px;
font-size: 14px;
font-weight: 500;
transition: all 500ms ease;
}
.blog-card-three__category:hover {
background-color: var(--text-dark, #0B2038);
color: var(--cream, #fff);
}
.blog-card-three__date {
line-height: 1;
color: var(--accent-color);
}
.blog-card-three__title {
color: var(--text-dark, #0B2038);
font-size: 20px;
font-weight: 400;
margin-top: 15px;
margin-bottom: 23px;
}
@media (min-width: 768px) {
.blog-card-three__title {
font-size: 24px;
}
}
.blog-card-three__title a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 500ms ease;
}
.blog-card-three__title a:hover {
background-size: 100% 1px;
}
.blog-card-three__title a:hover {
color: var(--accent-color);
}
.blog-card-three__author {
display: flex;
align-items: center;
}
.blog-card-three__author__image {
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
margin-right: 10px;
}
.blog-card-three__author__image img {
border-radius: 50%;
}
.blog-card-three__author__name {
font-size: 16px;
font-weight: 400;
color: var(--text-dark, #0B2038);
margin: 0;
line-height: 1;
margin-bottom: 6px;
}
.blog-card-three__author__designation {
font-size: 14px;
font-weight: 500;
color: var(--accent-color);
margin: 0;
line-height: 1;
}
.blog-four {
position: relative;
padding: 85px 0 120px;
}
@media (max-width: 767px) {
.blog-four {
padding-bottom: 40px;
}
}
.blog-four .sec-title {
padding-bottom: 30px;
}
.blog-four .sec-title__tagline {
color: var(--burgundy, #FFAA23);
}
.blog-four .container {
z-index: 3;
}
.blog-card-four {
position: relative;
max-width: 370px;
margin: 0 auto;
transition: 0.3s;
padding: 0;
--accent-color: var(--orange, #F25334);
}
.blog-card-four__image-wrapper {
padding: 19px 27px;
position: relative;
width: 100%;
height: 100%;
background-color: var(--cream, #fff);
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: cover;
mask-size: cover;
}
.blog-card-four__image {
position: relative;
z-index: 2;
overflow: hidden;
width: 100%;
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: cover;
mask-size: cover;
}
.blog-card-four__image img {
width: 100%;
height: auto;
}
.blog-card-four__image__layer-wrapper {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
display: flex;
transition: 0.5s;
}
.blog-card-four__image__layer {
width: 25%;
height: 100%;
transition: 0.5s;
}
.blog-card-four__image__layer:nth-child(1) {
background-position: 0;
transition-delay: 0;
}
.blog-card-four__image__layer:nth-child(2) {
background-position: 33.33%;
transition-delay: 0.1s;
}
.blog-card-four__image__layer:nth-child(3) {
background-position: 66.66%;
transition-delay: 0.2s;
}
.blog-card-four__image__layer:nth-child(4) {
background-position: 100%;
transition-delay: 0.3s;
}
.blog-card-four__image__link {
display: flex;
width: 100%;
height: 100%;
background-color: rgba(var(--text-dark-rgb, 11, 32, 56), 0.5);
position: absolute;
top: 0;
left: 0;
justify-content: center;
align-items: center;
opacity: 0;
transform: translateY(-20%);
transition: opacity 500ms ease, transform 500ms ease;
}
.blog-card-four__image__link::before, .blog-card-four__image__link::after {
content: "";
width: 32px;
height: 2px;
background-color: var(--cream, #fff);
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.blog-card-four__image__link::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.blog-card-four:hover .blog-card-four__image > a {
opacity: 1;
transform: translateY(0);
}
.blog-card-four:hover .blog-card-four__image__layer {
transform: translateY(-100%);
}
.blog-card-four__content {
margin-top: -66px;
padding: 96px 24px 35px;
position: relative;
border-radius: 36px;
overflow: hidden;
}
.blog-card-four__content::after {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: "";
background-color: var(--accent-color);
opacity: 0.1;
z-index: -1;
}
.blog-card-four__content__bottom, .blog-card-four__content__top {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.blog-card-four__category {
background-color: var(--accent-color);
line-height: 1;
color: var(--cream, #fff);
padding: 8px 10px;
border-radius: 12px;
font-size: 14px;
font-weight: 500;
transition: all 500ms ease;
}
.blog-card-four__category:hover {
background-color: var(--text-dark, #0B2038);
color: var(--cream, #fff);
}
.blog-card-four__date {
line-height: 1;
color: var(--accent-color);
}
.blog-card-four__title {
color: var(--text-dark, #0B2038);
font-size: 20px;
font-weight: 400;
margin-top: 15px;
margin-bottom: 23px;
}
@media (min-width: 768px) {
.blog-card-four__title {
font-size: 24px;
}
}
.blog-card-four__title a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 500ms ease;
}
.blog-card-four__title a:hover {
background-size: 100% 1px;
}
.blog-card-four__title a:hover {
color: var(--accent-color);
}
.blog-card-four__author {
display: flex;
align-items: center;
}
.blog-card-four__author__image {
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
margin-right: 10px;
}
.blog-card-four__author__image img {
border-radius: 50%;
}
.blog-card-four__author__name {
font-size: 16px;
font-weight: 400;
color: var(--text-dark, #0B2038);
margin: 0;
line-height: 1;
margin-bottom: 6px;
}
.blog-card-four__author__designation {
font-size: 14px;
font-weight: 500;
color: var(--accent-color);
margin: 0;
line-height: 1;
}
.blog-card-four__rm {
position: relative;
width: 41px;
height: 40px;
line-height: 37px;
background-color: var(--cream, #fff);
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: cover;
mask-size: cover;
font-size: 15px;
color: var(--accent-color);
transition: all 500ms ease;
overflow: hidden;
display: inline-block;
text-align: center;
}
.blog-card-four__rm span {
display: inline-block;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.blog-card-four__rm:hover {
line-height: 42px;
background-color: var(--accent-color);
color: var(--cream, #fff);
}
.blog-card-four__rm:hover span {
animation: iconTranslateX 0.4s forwards;
}
@keyframes wave {
0% {
margin-inline-start: 0;
}
100% {
margin-inline-start: -1600px;
}
}
@media (max-width: 767px) {
.event-page {
padding: 80px 0;
}
.textcontnew,.textcontnew2{width: 92%; padding:4%;}
.rowcenter{ justify-content:center;
gap: 10px;
}
.textcontnew2{ margin:auto;}
}
.textcontnew,.textcontnew2{
background-color: #fff;
padding: 40px;
border-radius: 14px;
box-shadow: 0px 0px 60px 0px rgba(var(--text-dark3-rgb, 0, 0, 0), 0.07);
text-align:start;
}
.textcontnew *{line-height: 2;}
.textcontnew h2{font-size: 19px;font-weight: bold;}
.textcontnew h3{font-size: 17px;}
.sidebar__single {
background-color: #fff;
padding: 40px;
border-radius: 14px;
box-shadow: 0px 0px 60px 0px rgba(var(--text-dark3-rgb, 0, 0, 0), 0.07);
}
.sidebar__single + .sidebar__single {
margin-top: 30px;
}
.sidebar__title {
margin: 0;
line-height: 1em;
font-size: 20px;
font-weight: bold;
border-bottom: 1px solid var(--orange, #F25334);
padding-bottom: 26px;
margin-bottom: 30px;
}
@media (min-width: 768px) {
.sidebar__title {
font-size: 24px;
}
}
.sidebar__search {
position: relative;
margin: -10px;
}
.sidebar__search input[type=search],
.sidebar__search input[type=text] {
outline: none;
width: 100%;
height: 64px;
background-color: var(--text-muted, #FAF5F2);
font-size: 16px;
color: var(--text-dark, #7E8185);
border: 1px solid var(--orange, #FCE9DD);
padding-left: 30px;
padding-right: 30px;
transition: all 500ms ease;
border-radius: 8px;
}
.sidebar__search input[type=search]:focus,
.sidebar__search input[type=text]:focus {
color: var(--text-dark, #0B2038);
}
.sidebar__search button[type=submit] {
border: none;
outline: none;
background-color: rgba(0, 0, 0, 0);
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
width: auto;
font-size: 22px;
color: var(--text-dark, #0B2038);
}
.sidebar__posts {
margin-bottom: 0;
}
.sidebar__posts__item {
display: flex;
align-items: center;
}
.sidebar__posts__item:not(:last-of-type) {
border-bottom: 1px solid var(--orange, #FCE9DD);
margin-bottom: 15px;
padding-bottom: 15px;
}
.sidebar__posts__image {
flex-shrink: 0;
margin-left: 20px;
}
.sidebar__posts__image img {
border-radius: 6px;
width: 90px;
height: 70px;
}
.sidebar__posts__title {
margin: 0;
color: var(--text-dark, #0B2038);
font-size: 16px;
font-weight: bold;
line-height: 20px;
}
.sidebar__posts__title a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 500ms ease;
}
.sidebar__posts__title a:hover {
background-size: 100% 1px;
}
.sidebar__posts__meta {
margin: 0;
line-height: 1em;
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 10px;
}
.sidebar__posts__meta a {
display: inline-flex;
align-items: center;
color: var(--text-dark, #7E8185);
font-size: 14px;
line-height: 1em;
transition: all 500ms ease;
}
.sidebar__posts__meta a:hover {
color: var(--text-dark, #0B2038);
text-shadow: 0 0 1px currentColor;
}
.sidebar__posts__meta a i {
font-size: 16px;
color: var(--orange, #F25334);
margin-left: 10px;
}
.sidebar__categories {
margin-bottom: -18px;
margin-top: -18px;
}
.sidebar__categories li:not(:last-of-type) {
border-bottom: 1px solid var(--orange, #FCE9DD);
}
.sidebar__categories li a {
font-size: 16px;
color: var(--text-dark, #7E8185);
display: flex;
align-items: center;
transition: all 500ms ease;
padding: 7px 0;
}
.sidebar__categories li a::before {
content: "\f100";
font-family: "Font Awesome 5 Free";
font-weight: 900;
transition: all 500ms ease;
font-size: 16px;
color: var(--orange, #F25334);
margin-left: 8px;
}
.sidebar__categories li a:hover {
padding: 7px 20px;
background-color: var(--cream, #fff);
color: var(--text-dark, #0B2038);
text-shadow: 0 0 1px currentColor;
}
.sidebar__categories li a:hover::base {
text-shadow: 0 0 0px currentColor;
color: var(--orange, #26A6A1);
}
.sidebar__tags {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.sidebar__tags a {
background-color: var(--text-muted, #FAF5F2);
font-size: 16px;
font-weight: 500;
color: var(--text-dark, #7E8185);
transition: all 500ms ease;
display: inline-flex;
padding: 12px 16px;
line-height: 1;
border-radius: 5px;
}
.sidebar__tags a:hover {
color: var(--cream, #fff);
background-color: var(--orange, #F25334);
}
.sidebar__comments {
margin-top: -2px;
margin-bottom: -2px;
}
.sidebar__comments__item {
display: flex;
align-items: center;
}
.sidebar__comments__item:not(:last-of-type) {
margin-bottom: 26px;
}
.sidebar__comments__icon {
flex-shrink: 0;
width: 44px;
height: 44px;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--text-muted, #FAF5F2);
font-size: 24px;
color: var(--text-dark, #7E8185);
margin-right: 20px;
border-radius: 50%;
transition: all 500ms ease;
}
.sidebar__comments__item:hover .sidebar__comments__icon {
background-color: var(--orange, #F25334);
color: var(--cream, #fff);
}
.sidebar__comments__title {
margin: 0;
font-family: var(--kidearn-font, "DM Sans", sans-serif);
font-size: 16px;
line-height: 26px;
font-weight: 500;
color: var(--text-dark, #7E8185);
}
.sidebar__comments__title a {
color: inherit;
transition: all 500ms ease;
}
.sidebar__comments__title a:hover {
color: var(--text-dark, #0B2038);
}
.events-details {
padding: 80px 0;
}
@media (min-width: 992px) {
.events-details {
padding: 120px 0;
}
}
.events-details__image {
margin-bottom: 15px;
}
.events-details__image img {
height: auto;
max-width: 60%;
border-radius: 14px;display: block;
margin: 10px auto;
}
.events-details__title {
margin: 0;
font-size: 25px;
color: var(--text-dark, #0B2038);
margin-bottom: 2px;
font-size: 20px !important;
font-weight: bold;border-bottom: 1px solid var(--orange, #F25334);
padding-bottom: 10px;
text-align: center;
}
.events-details__titlee{text-align:right!important; direction:rtl!important;}
@media (min-width: 768px) {
.events-details__title {
font-size: 30px;
}
}
.events-details__text {
margin: 0;
font-size: 16px;
line-height: 30px;
margin-bottom: 45px;
}
.events-details__text + .events-details__title {
margin-top: 25px;
}
.events-details__text + .events-details__text {
margin-top: 25px;
}
.events-details__lists {
margin: 20px 0 30px;
padding: 0;
}
.events-details__lists li {
display: block;
position: relative;
padding: 0 0 0 26px;
font-size: 16px;
line-height: 30px;
font-weight: 600;
color: var(--text-dark, #0B2038);
}
.events-details__lists li span {
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
display: inline-block;
font-size: 16px;
line-height: 30px;
color: var(--orange, #F25334);
}
.events-details__categories {
margin-bottom: 10px;
}
.events-details__categories a {
background-color: var(--orange, #F25334);
line-height: 1;
color: var(--cream, #fff);
padding: 8px 10px;
border-radius: 12px;
font-size: 14px;
font-weight: 500;
transition: all 500ms ease;
}
.events-details__categories a:hover {
background-color: var(--text-dark, #0B2038);
color: var(--cream, #fff);
}
.events-details__social {
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.events-details__social a {
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--text-muted, #FAF5F2);
font-size: 14px;
color: var(--text-dark, #0B2038);
transition: all 500ms ease;
border-radius: 50%;
}
.events-details__social a:hover {
background-color: var(--orange, #F25334);
color: var(--cream, #fff);
}
.events-details__map {
position: relative;
margin-top: 10px;
}
.events-details__map::before {
content: "";
position: absolute;
bottom: -40px;
left: -40px;
right: -40px;
background-color: var(--orange, #F25334);
top: 82px;
border-radius: 14px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.events-details__map iframe {
height: 354px;
border-radius: 14px;
position: relative;
z-index: 10;
background-color: var(--cream, #fff);
mix-blend-mode: normal;
}
.events-details__info {
padding: 40px;
box-shadow: 0px 0px 60px 0px rgba(2, 2, 2, 0.07);
}
.events-details__info__title {
margin: 0;
color: var(--text-dark, #0B2038);
font-size: 20px;
font-weight: bold;
border-bottom: 1px solid var(--orange, #F25334);
padding-bottom: 20px;
margin-bottom: 20px;
margin-top: -5px;
}
@media (min-width: 768px) {
.events-details__info__title {
font-size: 24px;
}
}
.events-details__info__text {
font-size: 16px;
line-height: 30px;
margin: 0;
border-bottom: 1px solid var(--orange, #FCE9DD);
padding-bottom: 25px;
margin-bottom: 25px;
}
.events-details__info .kidearn-btn {
width: 100%;
margin-top: 10px;
}
.events-details__info__list {
margin-bottom: 0;
}
.events-details__info__list li + li {
padding-top: 30px;
margin-top: 30px;
border-top: 1px solid var(--orange, #FCE9DD);
}
.events-details__info__list__name {
font-size: 16px;
color: var(--text-dark, #0B2038);
line-height: 1;
}
.events-details__info__list__text {
margin: 0;
font-size: 16px;
color: var(--orange, #F25334);
line-height: 1;
margin-top: 18px;
}
.events-details__info__list__text a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 500ms ease;
}
.events-details__info__list__text a:hover {
background-size: 100% 1px;
}
.events-details__info__list__text a:hover {
color: var(--text-dark, #0B2038);
}
.about-four {
position: relative;
padding: 120px 0;
border-bottom: 1px solid #D2D2D2;
}
@media (max-width: 767px) {
.about-four {
padding: 80px 0;
}
}
.about-four__image {
position: relative;
z-index: 2;
padding-bottom: 49px;
}
@media (min-width: 1300px) {
.about-four__image {
display: flex;
justify-content: center;
}
}
@media (max-width: 1199px) {
.about-four__image {
padding-left: 60px;
}
}
@media (max-width: 767px) {
.about-four__image {
padding-left: 0;
}
}
.about-four__image__shape1 {
position: absolute;
left: -15px;
top: -21px;
}
@media (min-width: 1300px) {
.about-four__image__shape1 {
left: 60px;
}
}
.about-four__image__shape1 img {
animation: treeMove 4s linear 0s infinite;
}
.about-four__image__one {
position: relative;
display: inline-block;
border-radius: 50%;
}
.about-four__image__one img {
max-width: 100%;
height: auto;
border-radius: 50%;
}
.about-four__image__one-bottom {
position: absolute;
right: -17px;
bottom: 9px;
width: 208px;
height: 164px;
background-color: var(--orange, #FFAA23);
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: cover;
mask-size: cover;
animation: zoomBig2 3s linear infinite;
}
@media (max-width: 767px) {
.about-four__image__one-bottom {
display: none;
}
}
.about-four__image__two {
max-width: 300px;
border-radius: 50%;
width: 100%;
position: absolute;
bottom: 7px;
left: 0;
overflow: hidden;
border: 18px solid #fff;
}
@media (min-width: 1280px) {
.about-four__image__two {
left: -40px;
}
}
@media (max-width: 767px) {
.about-four__image__two {
display: none;
}
}
.about-four__image__two img {
width: 100%;
}
.about-four__image__bg-shape {
position: absolute;
left: -15px;
right: 10px;
bottom: 0;
z-index: -1;
}
@media (min-width: 1300px) {
.about-four__image__bg-shape {
/* left: -55px; */
}
}
.about-four__image__bg-shape img {
max-width: 100%;
}
.about-four__content {
position: relative;
}
@media (min-width: 1200px) {
.about-four__content {
padding: 0 12px 0 8px;
}
}
@media (max-width: 1199px) {
.about-four__content {
padding: 45px 0 0;
}
}
.about-four__content .sec-title__title {
margin-top: 0;
}
.about-four__content .sec-title {
padding-bottom: 21px;
}
.about-four__content__text {
font-weight: 700;
line-height: 30px;
margin: 0 0 25px;
}
.about-four__content .kidearn-btn {
font-size: 16px;
padding: 11px 50px;
}
.about-four__info {
position: relative;
min-height: 80px;
padding: 0 0 29px 100px;
margin-bottom: 35px;
border-bottom: 1px solid #D2D2D2;
}
.about-four__info:last-of-type {
border: none;
margin-bottom: 12px;
}
.about-four__info:hover .about-four__info__icon span {
transform: rotateY(180deg);
}
.about-four__info__icon {
font-size: 80px;
line-height: 80px;
color: var(--accent-color);
position: absolute;
left: 0;
top: 5px;
}
.about-four__info__icon span {
display: block;
-webkit-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.about-four__info__title {
font-size: 20px;
line-height: 24px;
font-weight: 400;
margin: 0 0 10px;
}
.about-four__info__text {
font-weight: 700;
line-height: 30px;
margin: 0;
}
.blog-details__meta {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 20px;
padding-top: 30px;
padding-bottom: 30px;
border-bottom: 1px solid var(--orange, #FCE9DD);
}
.nav-tabs{display:flex;justify-content: space-evenly;}
#activities{
/* background-image: url("../../img/bgdots.png")
,url("../../img/bgdots2.png"); */
background-position:center left,center right;
background-repeat:no-repeat;
padding-top: 40px;
}
#activities .tab-content {
padding: 60px;
border-radius: 20px;
}
.tab-pane h4 i{
margin-right:10px;
}
/* fade tab transition */
.fade {
opacity: 0;
transition: opacity 0.55s linear;
}
.fade.in {
opacity: 1;
}
#activities .tab-content {
background: #ffded8;
}
#activities .tab-content {
padding:60px; border-radius:20px;
}
.tab-content>.active {
display: block;
}
.navnn.nav-tabs > li {
/* float: none; */
/* padding: 0 10px 0; */
/* display: inline-block; */
}
.nav-tabs>li {
float: left;
margin-bottom: -1px;
}
.navnn>li {
position: relative;
display: block;
}
.navnn.nav-tabs > li > a {
position: relative;
display: block;
letter-spacing: 0.2px;
font-weight: 700;
min-height: 50px;
/* line-height: 57px; */
border: 0;
border-radius: 20px 20px 0px 0px;
padding: 10px 15px;
color: #fff !important;
background-color: #31263a;
}
.navnn.nav-tabs > li > a:hover{background-color: #f25334;}
.navnn.nav-tabs > li.active > a{background-color: #f25334;}
.panel-group {
margin-bottom: 20px;
}
.panel-group .panel {
margin-bottom: 0;
border-radius: 4px;
}
.panel {
border: 0;
background: transparent;
}
.panel-group .panel-heading {
border-bottom: 0px;
}
.panel-heading {
padding: 10px 0px;
}
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.panel-title {
font-size: 18px;
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 16px;
color: inherit;
}
.panel-heading a, .panel-heading a:hover, .nav-pills .navnn > li > a:focus {
background-color: #f25334;
}
.panel-heading a {
border-radius: 10px;
display: block;
text-transform: none;
color: #fff;
padding: 30px 10px;
border: 0px;
transition: all .2s ease-in-out;
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center;
font-weight: 700;
font-size: 18px;
}
.panel-heading [data-toggle="collapse"]:after {
content: "\e904";
font-family: 'icomoon' !important;
float: right;
font-size: 18px;
line-height: 22px; color:#fff;
}
.img-circle {
box-shadow: 6px 6px 0px rgba(103, 102, 102, 0.2);
}
.img-circle {
border-radius: 50%;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
.img-circle {
border-radius: 50%;
}
.nav-tabs {
display: flex;
justify-content: space-evenly;
}
.tabbable{
text-align: left;
}
.panel-heading a {
border-radius: 10px;
display: block;
text-transform: none;
color: #fff;
padding: 30px 10px;
border: 0px;
transition: all .2s ease-in-out;
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center;
font-weight: 700;
font-size: 18px;
}
.panel-heading [data-toggle="collapse"]:after {
content: "\e904";
font-family: 'icomoon' !important;
float: right;
font-size: 18px;
line-height: 22px; color:#fff;
}
.collapse.in {
display: block;
}
.panel-body
{
text-align: start;
}
.gallery-one {
padding-top: 80px;
padding-bottom: 35px;
}
@media (max-width: 767px) {
.gallery-one {
padding-top: 30px;
padding-bottom: 30px;
}
}
.gallery-one .container-fluid {
width: 100%;
max-width: 1572px;
}
.gallery-one .row {
--bs-gutter-x: 30px;
--bs-gutter-y: 30px;
}
.gallery-one--home-three {
position: relative;
padding: 0;
margin-bottom: -43px;
}
.gallery-one--home-three .container {
max-width: 1600px;
}
.gallery-one--home-four {
overflow: hidden;
position: relative;
padding: 0;
}
.gallery-one--home-four .container-fluid {
width: 100%;
max-width: 100%;
padding: 0;
}
.gallery-one--home-four .gallery-one__card,
.gallery-one--home-four .gallery-one__card img {
border-radius: 0;
}
@media (min-width: 992px) {
.gallery-one__carousel .owl-nav {
}
}
.gallery-one__filter__list {
display: inline-flex;
justify-content: center;
align-items: center;
margin-bottom: 60px;
flex-wrap: wrap;
gap: 15px;
}
.gallery-one__filter__list li {
cursor: pointer;
}
.gallery-one__filter__list li span {
display: block;
font-size: 16px;
background-color: var(--kidearn-gray, #FAF5F2);
transition: all 500ms ease;
font-weight: 700;
padding: 11px 54px;
border-radius: 12px;
color: var(--kidearn-black, #0B2038);
}
.gallery-one__filter__list li.active span, .gallery-one__filter__list li:hover span {
background-color: var(--orange, #F25334);
color: var(--kidearn-white, #fff);
}
.gallery-one__card {
height: 150px;
position: relative;
overflow: hidden;
border-radius: 0;
}
.gallery-one__card--mt140 {
margin-top: 140px;
}
@media (max-width: 991px) {
.gallery-one__card--mt140 {
margin-top: 70px;
}
}
@media (max-width: 767px) {
.gallery-one__card--mt140 {
margin-top: 0;
}
}
.gallery-one__card--mt70 {
margin-top: 70px;
}
@media (max-width: 991px) {
.gallery-one__card--mt70 {
margin-top: 0;
}
}
.gallery-one__card img {
transform: scale(1);
max-width: 100%;
transition: transform 500ms ease, opacity 500ms ease;
opacity: 1;
border-radius: 0;
height: 150px;
}
.gallery-one__card__hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(var(--kidearn-black-rgb, 11, 32, 56), 0.8);
display: flex;
justify-content: center;
align-items: center;
transform: scale(1, 0);
transition: transform 500ms ease;
transform-origin: bottom center;
}
.gallery-one__card__hover .img-popup {
position: relative;
}
.gallery-one__card:hover img {
transform: scale(1.05);
opacity: 0.9;
}
.gallery-one__card:hover .gallery-one__card__hover {
transform-origin: top center;
transform: scale(1, 1);
}
.gallery-one__card__icon {
width: 64px;
height: 64px;
border-radius: 32px;
display: block;
position: relative;
background-color: var(--orange, #F25334);
transition: background 500ms ease;
text-align: center;
font-size: 40px;
line-height: 64px;
color: #ffffff;
}
.gallery-one__card__icon::after, .gallery-one__card__icon::before {
/* content: ""; */
width: 3px;
height: 30px;
background-color: var(--kidearn-white, #fff);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: background 500ms ease;
border-radius: 1.5px;
}
.gallery-one__card__icon::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.gallery-one__card__icon:hover {
background-color: var(--kidearn-white, #fff);
color: #ef5234;
}
.gallery-one__card__icon:hover::after, .gallery-one__card__icon:hover::before {
background-color: var(--orange, #F25334);
}
.program-three {
position: relative;
padding: 96px 0;
background-color: var(--kidearn-gray, #FAF5F2);
}
.program-three__top-shape {
z-index: 2;
position: absolute;
top: -21px;
left: 0;
width: 100%;
height: 23px;
background-color: var(--orange, #F25334);
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: cover;
mask-size: cover;
}
.program-three__top-bg {
width: 100%;
height: 56.4%;
position: absolute;
left: 0;
top: 0;
background-color: var(--orange, #F25334);
}
.program-three__top-bg__inner {
background-position: left top;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: var(--orange, #F25334);
background-blend-mode: multiply;
}
.program-three__bottom-shape {
z-index: 2;
position: absolute;
bottom: -23px;
left: 0;
width: 100%;
height: 23px;
background-color: inherit;
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: cover;
mask-size: cover;
}
.program-three__shape1 {
position: absolute;
left: 5%;
bottom: 9%;
}
.program-three__shape1 img {
animation: treeMove 4s linear 0s infinite;
}
.program-three__shape2 {
position: absolute;
right: 5%;
bottom: 9%;
}
.program-three__shape2 img {
animation: treeMove 4s linear 0s infinite;
}
.program-three .container {
max-width: 1600px;
position: relative;
}
.program-three .sec-title__tagline {
color: var(--kidearn-secondary, #FFAA23);
}
.program-three .sec-title__title {
color: var(--kidearn-white, #fff);
}
@media (max-width: 767px) {
.program-three {
padding: 80px 0;
}
}
.program-three__item {
position: relative;
text-align: center;
background-color: var(--kidearn-white, #fff);
border-radius: 36px;
overflow: hidden;
transition: 0.3s;
padding: 0;
--accent-color: var(--orange, #F25334);
box-shadow: 0px 14px 40px 0px rgba(var(--kidearn-black2-rgb, 2, 9, 18), 0.08);
}
.program-three__item:hover .program-three__item__icon {
-webkit-animation-name: wobble-horizontal-on-hover;
animation-name: wobble-horizontal-on-hover;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
.program-three__item__image {
position: relative;
overflow: hidden;
width: 100%;
margin: 0;
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: cover;
mask-size: cover;
}
.program-three__item__image img {
width: 100%;
height: auto;
}
@keyframes wobble-horizontal-on-hover {
16.65% {
transform: translateX(8px);
}
33.3% {
transform: translateX(-6px);
}
49.95% {
transform: translateX(4px);
}
66.6% {
transform: translateX(-2px);
}
83.25% {
transform: translateX(1px);
}
100% {
transform: translateX(0);
}
}
.program-three__item__content {
position: relative;
padding: 0 32px 17px;
}
@media (min-width: 1200px) and (max-width: 1400px) {
.program-three__item__content {
padding-left: 25px;
padding-right: 25px;
}
}
.program-three__item__icon {
position: relative;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--orange);
color: var(--kidearn-white, #fff);
font-size: 50px;
margin: -58px auto 15px;
}
.program-three__item__icon span {
display: inline-block;
}
.program-three__item__title {
margin: 0;
font-size: 20px;
font-weight: 400;
transition: all 200ms ease;
margin-bottom: 8px;
}
.program-three__item__title a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat;
transition: all 500ms ease;
}
.program-three__item__title a:hover {
background-size: 100% 1px;
}
.program-three__item__title a:hover {
color: var(--orange);
}
.program-three__item__age {
color: var(--accent-color);
line-height: 1;
display: block;
margin: 0 0 21px;
transition: all 300ms ease;
}
.program-three__item__text {
line-height: 24px;
font-weight: 400;
display: block;
margin: 0 0 23px;
transition: all 300ms ease;
}
.program-three__item__rm {
position: relative;
width: 40px;
height: 40px;
line-height: 42px;
border-radius: 50%;
background-color: var(--orange);
font-size: 15px;
color: var(--kidearn-white, #fff);
transition: all 300ms ease;
overflow: hidden;
display: inline-block;
text-align: center;
}
.program-three__item__rm span {
display: inline-block;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.program-three__item__rm:hover {
background-color: var(--kidearn-black, #0B2038);
}
.program-three__item__rm:hover span {
animation: iconTranslateX 0.4s forwards;
}
.program-three--home-four {
padding-bottom: 0;
background-color: var(--kidearn-white, #fff);
}
.program-three--home-four .program-three__top-shape {
background-color: var(--kidearn-secondary, #FFAA23);
}
.program-three--home-four .program-three__top-bg {
background-color: var(--kidearn-secondary, #FFAA23);
height: 63%;
}
.program-three--home-four .program-three__top-bg__inner {
opacity: 0.75;
background-color: var(--kidearn-secondary, #FFAA23);
}
.program-three--home-four .sec-title__tagline {
color: var(--kidearn-white, #fff);
}
.program-three--home-four .program-three__item {
background-color: var(--kidearn-gray, #FAF5F2);
}
.program-page {
position: relative;
padding: 120px 0;
}
@media (max-width: 767px) {
.program-page {
padding: 80px 0;
}
}
.program-page .program-three__item {
box-shadow: 0px 14px 40px 0px rgba(var(--kidearn-black2-rgb, 2, 9, 18), 0.08);
}
.program-page .program-three__item__content {
padding-left: 32px;
padding-right: 32px;
}
.imggall{height:auto!important;}
a {
color: var(--kidearn-base, #F25334);
transition: all 400ms ease;
}
.gallery-one__card__hover a span {
font-size: 40px;
}