/*
* Conseil Marocain de la Jeunesse pour la Diplomatie et la Coopération Internationale
* Website Stylesheet
*/
/* ========== GLOBAL STYLES ========== */
:root {
--primary-red: #c1272d; /* Moroccan flag red */
--primary-green: #006233; /* Moroccan flag green */
--primary-gold: #ffd700; /* Gold accent color */
--dark-green: #004d29; /* Darker shade of green for hover states */
--light-gold: #ffe866; /* Lighter shade of gold */
--text-dark: #333333; /* Dark text color */
--text-light: #ffffff; /* Light text color */
--bg-light: #f5f5f5; /* Light background color */
--bg-dark: #1a1a1a; /* Dark background color */
--gray-light: #e0e0e0; /* Light gray for borders */
--gray-medium: #999999; /* Medium gray for secondary text */
--box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Standard box shadow */
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
color: var(--text-dark);
line-height: 1.6;
overflow-x: hidden;
background-color: var(--bg-light);
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.3;
margin-bottom: 1rem;
}
p {
margin-bottom: 1rem;
}
a {
text-decoration: none;
color: var(--primary-green);
transition: color 0.3s ease;
}
a:hover {
color: var(--dark-green);
}
ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
}
.section-title {
text-align: center;
font-size: 2.2rem;
margin-bottom: 2.5rem;
position: relative;
padding-bottom: 1rem;
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(to right, var(--primary-red), var(--primary-green));
}
.text-center {
text-align: center;
}
section {
padding: 5rem 0;
position: relative;
}
/* ========== TOP BAR ========== */
.top-bar {
background-color: var(--primary-green);
color: var(--text-light);
padding: 8px 0;
font-size: 0.85rem;
}
.top-bar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.contact-info span {
margin-right: 20px;
}
.contact-info i {
margin-right: 5px;
}
.top-right {
display: flex;
align-items: center;
}
.social-icons a {
color: var(--text-light);
margin-left: 15px;
transition: color 0.3s ease;
}
.social-icons a:hover {
color: var(--primary-gold);
}
/* Language Switcher */
.language-switcher {
position: relative;
margin-right: 20px;
}
.active-lang {
background: transparent;
border: 1px solid var(--text-light);
color: var(--text-light);
padding: 3px 8px;
border-radius: 3px;
cursor: pointer;
font-size: 0.8rem;
transition: all 0.3s ease;
}
.active-lang:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.language-dropdown {
position: absolute;
top: 100%;
left: 0;
background-color: white;
border-radius: 4px;
box-shadow: var(--box-shadow);
width: 120px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
z-index: 1000;
}
.language-dropdown.active {
opacity: 1;
visibility: visible;
transform: translateY(5px);
}
.language-dropdown a {
display: block;
padding: 8px 12px;
color: var(--text-dark);
font-size: 0.85rem;
border-bottom: 1px solid var(--gray-light);
transition: background-color 0.3s ease;
}
.language-dropdown a:last-child {
border-bottom: none;
}
.language-dropdown a:hover {
background-color: rgba(0, 98, 51, 0.1);
}
.top-bar a:not(.language-dropdown a) {
color: var(--text-light); /* White for email and social icons */
}
.top-bar a:not(.language-dropdown a):hover {
color: var(--primary-gold); /* Gold on hover */
}
/* ========== HEADER ========== */
/* Header */
/* ========== HEADER ========== */
/* Header */
header {
background-color: var(--text-light);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding-bottom: 0;
margin-bottom: 0;
}
.header-main {
display: flex;
align-items: center;
justify-content: center; /* Center the contents */
padding: 10px 0;
position: relative; /* For absolute positioning of the toggle */
}
.logo {
display: flex;
align-items: center;
justify-content: center;
}
.logo-bg {
position: relative;
margin-right: 0;
}
.header-logo {
width: 120px;
height: 120px;
object-fit: contain;
}
/* Remove moroccan-pattern styles */
.moroccan-pattern {
display: none;
}
/* Remove logo-text styles since it's no longer in the HTML */
.logo-text {
display: none;
}
.mobile-menu-toggle {
display: none;
font-size: 1.5rem;
color: var(--primary-green);
cursor: pointer;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
/* Mobile Menu Header (Close Button Only) */
.mobile-menu-header {
display: none; /* Hidden by default, shown on mobile */
background-color: #fff;
padding: 20px;
display: flex;
justify-content: flex-end;
align-items: center;
border-bottom: 1px solid #eee;
}
.mobile-menu-close {
display: none; /* Hidden by default, shown on mobile */
}
.mobile-menu-close i {
font-size: 1.5rem;
color: var(--text-dark);
cursor: pointer;
}
/* Responsive Styles for Mobile Menu */
@media (max-width: 768px) {
.mobile-menu-toggle {
display: block; /* Show the toggle on mobile */
}
.mobile-menu-header {
display: flex; /* Show the header on mobile */
background-color: #fff;
padding: 20px;
justify-content: flex-end;
align-items: center;
border-bottom: 1px solid #eee;
}
.mobile-menu-close {
display: block; /* Show the close button on mobile */
}
.mobile-menu-close i {
font-size: 1.5rem;
color: var(--text-dark);
cursor: pointer;
}
.main-menu {
position: fixed;
top: 0;
left: -100%;
width: 80%;
height: 100vh;
background-color: #fff;
flex-direction: column;
align-items: stretch;
transition: left 0.3s ease;
z-index: 1000;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
overflow-y: auto; /* Allow scrolling if menu content is long */
}
.main-menu.active {
left: 0;
}
.main-menu > li > a {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--text-dark);
padding: 15px 20px;
margin: 0;
border-radius: 0;
border-bottom: 1px solid #eee;
font-weight: 500;
font-size: 1rem;
}
.main-menu > li > a:hover,
.main-menu > li > a.active {
background-color: var(--primary-green);
color: var(--text-light);
}
.dropdown.active > a {
background-color: var(--primary-green);
color: var(--text-light);
}
.main-menu a.highlight-btn {
background-color: var(--primary-gold);
color: var(--primary-red);
padding: 15px 20px;
border-radius: 0;
border-bottom: 1px solid #eee;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.main-menu a.highlight-btn:hover {
background-color: var(--light-gold);
animation-play-state: paused;
}
.dropdown-menu {
position: static;
background-color: #fff;
box-shadow: none;
transform: none;
opacity: 1;
visibility: visible;
display: none;
}
.dropdown.active .dropdown-menu {
display: block;
}
.sub-dropdown-menu {
position: static;
background-color: #fff;
box-shadow: none;
transform: none;
opacity: 1;
visibility: visible;
display: none;
}
.sub-dropdown.active .sub-dropdown-menu {
display: block;
}
.dropdown-menu a {
color: var(--text-dark);
padding: 12px 30px;
border-bottom: 1px solid #eee;
font-weight: 400;
font-size: 0.95rem;
}
.sub-dropdown-menu a {
color: var(--text-dark);
padding: 10px 40px;
border-bottom: 1px solid #eee;
font-weight: 400;
font-size: 0.9rem;
}
.dropdown-menu li:last-child a,
.sub-dropdown-menu li:last-child a {
border-bottom: none;
}
.dropdown:hover .dropdown-menu,
.sub-dropdown:hover .sub-dropdown-menu {
display: none; /* Prevent hover on mobile */
}
.dropdown.active .dropdown-icon,
.sub-dropdown.active .sub-dropdown-icon {
transform: rotate(180deg);
}
.dropdown-icon,
.sub-dropdown-icon {
margin-left: auto;
}
}
.header-logo, .footer-logo-img {
width: 400px;
height: 400px;
object-fit: contain;
}
.footer-logo-img {
width: 50px;
height: 50px;
}
/* Navigation */
nav {
background-color: var(--primary-red);
}
.main-menu {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap; /* Allow wrapping for smaller screens */
}
.main-menu li {
position: relative;
}
.main-menu > li > a {
display: flex;
align-items: center;
color: var(--text-light);
padding: 15px 25px;
font-weight: 500;
font-size: 1.1rem;
transition: all 0.3s ease;
border-radius: 4px;
margin: 5px;
}
.main-menu > li > a:hover,
.main-menu > li > a.active {
background-color: var(--primary-green);
color: var(--text-light);
}
.main-menu i {
margin-right: 8px;
}
.main-menu a.highlight-btn {
background-color: var(--primary-gold);
color: var(--primary-red);
padding: 10px 25px;
border-radius: 25px;
animation: pulse 2s infinite;
}
.main-menu a.highlight-btn:hover {
background-color: var(--light-gold);
animation-play-state: paused;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* Dropdown Styles */
.dropdown:hover .dropdown-menu {
display: block;
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: var(--text-light);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
border-radius: 4px;
min-width: 200px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
z-index: 100;
}
.dropdown-menu li {
border-bottom: 1px solid var(--gray-light);
}
.dropdown-menu li:last-child {
border-bottom: none;
}
.dropdown-menu a {
display: block;
color: var(--text-dark);
padding: 12px 20px;
font-weight: 400;
font-size: 1rem;
transition: all 0.3s ease;
}
.dropdown-menu a:hover {
background-color: var(--primary-green);
color: var(--text-light);
}
.dropdown-icon {
margin-left: 5px;
transition: transform 0.3s ease;
}
.dropdown:hover .dropdown-icon {
transform: rotate(180deg);
}
/* Sub-Dropdown Styles */
.sub-dropdown {
position: relative;
}
.sub-dropdown:hover .sub-dropdown-menu {
display: block;
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.sub-dropdown-menu {
display: none;
position: absolute;
top: 0;
left: 100%;
background-color: var(--text-light);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
border-radius: 4px;
min-width: 250px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
z-index: 100;
}
.sub-dropdown-menu li {
border-bottom: 1px solid var(--gray-light);
}
.sub-dropdown-menu li:last-child {
border-bottom: none;
}
.sub-dropdown-menu a {
display: block;
color: var(--text-dark);
padding: 10px 20px;
font-weight: 400;
font-size: 0.95rem;
transition: all 0.3s ease;
}
.sub-dropdown-menu a:hover {
background-color: var(--primary-green);
color: var(--text-light);
}
.sub-dropdown-icon {
margin-left: 5px;
transition: transform 0.3s ease;
}
.sub-dropdown:hover .sub-dropdown-icon {
transform: rotate(180deg);
}
/* Responsive Styles */
@media (max-width: 768px) {
.mobile-menu-toggle {
display: block; /* Show the toggle on mobile */
}
.main-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--primary-red);
flex-direction: column;
transform: translateY(-10px);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 99;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.main-menu.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.main-menu > li > a {
padding: 15px 20px;
margin: 0;
border-radius: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.main-menu a.highlight-btn {
border-radius: 0;
}
.dropdown-menu {
position: static;
background-color: var(--bg-light);
box-shadow: none;
transform: none;
opacity: 1;
visibility: visible;
display: none;
}
.dropdown.active .dropdown-menu {
display: block;
}
.sub-dropdown-menu {
position: static;
background-color: #f0f0f0;
box-shadow: none;
transform: none;
opacity: 1;
visibility: visible;
display: none;
}
.sub-dropdown.active .sub-dropdown-menu {
display: block;
}
.dropdown-menu a,
.sub-dropdown-menu a {
color: var(--text-dark);
padding: 10px 30px;
}
.sub-dropdown-menu a {
padding-left: 40px; /* Indent sub-sub-items */
}
.dropdown:hover .dropdown-menu,
.sub-dropdown:hover .sub-dropdown-menu {
display: none; /* Prevent hover on mobile */
}
.dropdown.active .dropdown-icon,
.sub-dropdown.active .sub-dropdown-icon {
transform: rotate(180deg);
}
}
/* ========== HERO SECTION ========== */
.hero {
background: linear-gradient(135deg, var(--primary-green), var(--primary-red));
color: var(--text-light);
text-align: center;
padding: 7rem 0;
position: relative;
overflow: hidden;
}
.hero-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('data:image/svg+xml;utf8,');
z-index: 1;
}
.hero .container {
position: relative;
z-index: 2;
}
.hero h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.hero p {
font-size: 1.1rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2rem;
}
.hero-btn {
display: inline-block;
background-color: var(--primary-gold);
color: var(--text-dark);
padding: 12px 30px;
border-radius: 50px;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.hero-btn:hover {
background-color: var(--light-gold);
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
/* Animation classes */
.animate-fade-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.animate-fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* ========== NEWS SECTION ========== */
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
margin-bottom: 2rem;
}
.news-card {
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: var(--box-shadow);
transition: transform 0.3s ease, box-shadow 0.3s ease;
opacity: 0;
transform: translateY(20px);
}
.news-card.visible {
opacity: 1;
transform: translateY(0);
animation: fadeInUp 0.7s ease-out forwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.news-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.news-img {
height: 200px;
background-size: cover;
background-position: center;
border-bottom: 3px solid var(--primary-green);
}
.news-content {
padding: 20px;
}
.news-date {
color: var(--gray-medium);
font-size: 0.85rem;
margin-bottom: 10px;
}
.news-date i {
margin-right: 5px;
}
.news-title {
font-size: 1.2rem;
margin-bottom: 10px;
color: var(--primary-red);
}
.news-excerpt {
color: var(--text-dark);
margin-bottom: 15px;
}
.read-more {
color: var(--primary-green);
font-weight: 500;
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
}
.read-more i {
margin-left: 5px;
transition: transform 0.3s ease;
}
.read-more:hover i {
transform: translateX(5px);
}
.view-all-btn {
display: block; /* تحويل الزر إلى عنصر كتلة */
margin: 0 auto; /* توسيط الزر أفقيًا */
width: fit-content; /* ضمان أن العرض يتناسب مع المحتوى */
background-color: #28a745; /* لون أخضر كنموذج */
color: white;
padding: 10px 25px;
border-radius: 50px;
text-align: center; /* توسيط النص داخل الزر */
}
.view-all-btn:hover {
background-color: var(--primary-green);
color: white;
}
.view-all-btn i {
margin-left: 5px;
transition: transform 0.3s ease;
}
.view-all-btn:hover i {
transform: translateX(5px);
}
/* ========== ABOUT SECTION ========== */
.about {
background-color: white;
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.about-img {
height: 400px;
background-size: cover;
background-position: center;
border-radius: 8px;
box-shadow: var(--box-shadow);
position: relative;
}
.about-img::before {
content: '';
position: absolute;
top: 15px;
left: 15px;
right: -15px;
bottom: -15px;
border: 3px solid var(--primary-gold);
border-radius: 8px;
z-index: -1;
}
.about-text h3 {
color: var(--primary-green);
font-size: 1.8rem;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 10px;
}
.about-text h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: var(--primary-red);
}
.about-btn {
display: inline-flex;
align-items: center;
background-color: var(--primary-green);
color: white;
padding: 10px 25px;
border-radius: 4px;
font-weight: 500;
transition: all 0.3s ease;
margin-top: 1rem;
}
.about-btn:hover {
background-color: var(--dark-green);
color: white;
}
.about-btn i {
margin-left: 8px;
transition: transform 0.3s ease;
}
.about-btn:hover i {
transform: translateX(5px);
}
.read-more-btn button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
.read-more-btn button:hover {
background-color: #0056b3;
}
.news-author {
font-size: 0.9em;
color: #666;
margin: 10px 0;
}
.news-author i {
margin-right: 5px;
}
.article-author {
font-size: 0.9em;
color: #666;
margin-top: 10px;
}
.article-author i {
margin-right: 5px;
}
.pagination-section .page-btn {
padding: 5px 10px;
margin: 0 5px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #fff;
cursor: pointer;
}
.pagination-section .page-btn.active {
background-color: #007bff;
color: white;
}
.pagination-section .nav-btn {
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.pagination-section .nav-btn:hover {
background-color: #0056b3;
}
/* ========== STATISTICS SECTION ========== */
.stats {
background-color: var(--primary-green);
color: white;
}
.stats .section-title {
color: white;
}
.stats .section-title::after {
background: linear-gradient(to right, var(--primary-gold), var(--text-light));
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
text-align: center;
}
.stat-item {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 30px 20px;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.stat-item:hover {
transform: translateY(-10px);
background-color: rgba(255, 255, 255, 0.2);
}
.stat-number {
font-size: 3rem;
font-weight: 700;
color: var(--primary-gold);
margin-bottom: 10px;
}
.stat-label {
font-size: 1.1rem;
font-weight: 500;
}
/* ========== JOIN US SECTION ========== */
.join-us {
background-color: var(--bg-light);
position: relative;
overflow: hidden;
}
.pattern-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('data:image/svg+xml;utf8,');
z-index: 1;
}
.join-us .container {
position: relative;
z-index: 2;
}
.join-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: start;
}
.join-text h3 {
color: var(--primary-red);
font-size: 1.8rem;
margin-bottom: 1.5rem;
}
.benefits-list {
margin-top: 2rem;
}
.benefits-list li {
margin-bottom: 12px;
display: flex;
align-items: center;
}
.benefits-list i {
color: var(--primary-green);
margin-right: 10px;
font-size: 1.2rem;
}
.join-form {
background-color: white;
border-radius: 8px;
padding: 30px;
box-shadow: var(--box-shadow);
}
.join-form h3 {
color: var(--primary-green);
font-size: 1.5rem;
margin-bottom: 1.5rem;
text-align: center;
}
.form-group {
margin-bottom: 20px;
}
input, select, textarea {
width: 100%;
padding: 12px 15px;
border: 1px solid var(--gray-light);
border-radius: 4px;
font-family: inherit;
font-size: 1rem;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--primary-green);
box-shadow: 0 0 0 3px rgba(0, 98, 51, 0.1);
}
textarea {
min-height: 120px;
resize: vertical;
}
.submit-btn {
width: 100%;
background-color: var(--primary-red);
color: white;
border: none;
padding: 12px;
border-radius: 4px;
font-weight: 500;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease;
}
.submit-btn:hover {
background-color: #a02025;
}
.submit-btn i {
margin-left: 8px;
}
/* ========== CONTACT SECTION ========== */
.contact {
background-color: #f5f5f5;
}
.contact-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
}
.contact-info {
display: grid;
grid-template-columns: 1fr;
gap: 25px;
}
.contact-item {
display: flex;
align-items: flex-start;
}
.contact-item i {
font-size: 1.5rem;
color: var(--primary-green);
margin-right: 15px;
margin-top: 5px;
}
.contact-item h3 {
font-size: 1.2rem;
margin-bottom: 5px;
color: var(--primary-red);
}
.contact-form {
background-color: var(--bg-light);
border-radius: 8px;
padding: 30px;
box-shadow: var(--box-shadow);
}
/* ========== FOOTER ========== */
footer {
background-color: var(--bg-dark);
color: var(--text-light);
padding: 5rem 0 0;
position: relative;
overflow: hidden;
}
.footer-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('data:image/svg+xml;utf8,');
z-index: 1;
}
footer .container {
position: relative;
z-index: 2;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-bottom: 3rem;
}
.footer-col h3 {
color: var(--primary-gold);
position: relative;
padding-bottom: 15px;
margin-bottom: 20px;
}
.footer-col h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background-color: var(--primary-red);
}
.footer-logo {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.footer-title {
font-size: 1.8rem;
font-weight: 700;
margin-left: 15px;
background: linear-gradient(45deg, var(--primary-red), var(--primary-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.footer-social {
margin-top: 20px;
}
.footer-social a {
display: inline-block;
color: var(--text-light);
background-color: rgba(255, 255, 255, 0.1);
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 50%;
margin-right: 10px;
transition: all 0.3s ease;
}
.footer-social a:hover {
background-color: var(--primary-green);
color: white;
transform: translateY(-3px);
}
.footer-col ul li {
margin-bottom: 10px;
}
.footer-col ul li a {
color: var(--gray-light);
transition: all 0.3s ease;
display: inline-block;
}
.footer-col ul li a:hover {
color: var(--primary-gold);
transform: translateX(5px);
}
/* Default styles for the newsletter form (desktop) */
.newsletter-form {
display: flex;
margin-bottom: 50px;
}
.newsletter-form input {
flex: 1;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: none;
}
.newsletter-form button {
background-color: var(--primary-red);
color: white;
border: none;
padding: 0 15px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.newsletter-form button:hover {
background-color: #a02025;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.newsletter-form {
flex-direction: column; /* Stack elements vertically */
width: 100%; /* Full width of the container */
}
.newsletter-form input {
width: 100%; /* Full width for input */
margin-bottom: 20px; /* Space between input and button */
border-radius: 10px; /* Rounded corners on all sides */
}
.newsletter-form button {
width: auto; /* Button sizes based on content */
padding: 20px 50px; /* Consistent larger padding */
border-radius: 10px; /* Rounded corners */
font-size: 26px; /* Consistent font size */
}
.newsletter-form button i {
font-size: 22px; /* Consistent icon size */
}
}
.contact-quick {
margin-top: 20px;
}
.contact-quick div {
margin-bottom: 10px;
display: flex;
align-items: center;
}
.contact-quick i {
color: var(--primary-gold);
margin-right: 10px;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 20px 0;
text-align: center;
font-size: 0.9rem;
color: var(--gray-medium);
}
/* ========== BACK TO TOP BUTTON ========== */
.back-to-top {
position: fixed;
right: 30px;
bottom: 30px;
width: 50px;
height: 50px;
background-color: var(--primary-green);
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s ease;
z-index: 99;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.back-to-top.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
background-color: var(--primary-red);
}
/* ========== RESPONSIVE STYLES ========== */
@media (max-width: 1024px) {
.about-content,
.join-content,
.contact-content {
grid-template-columns: 1fr;
gap: 30px;
}
.about-img {
height: 350px;
}
.header-main {
padding: 10px 0;
}
.logo-text h1 {
font-size: 1rem;
}
.logo-text h2 {
font-size: 0.7rem;
}
}
@media (max-width: 768px) {
.hero h2 {
font-size: 2rem;
}
.section-title {
font-size: 1.8rem;
}
.mobile-menu-toggle {
display: block;
}
.main-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--primary-red);
flex-direction: column;
transform: translateY(-10px);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 99;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.main-menu.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.mobile-menu-toggle.active i::before {
content: "\f00d";
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.top-bar .container {
flex-direction: column;
}
.top-right {
margin-top: 10px;
}
.contact-info span {
display: block;
margin-bottom: 5px;
}
}
@media (max-width: 576px) {
section {
padding: 3rem 0;
}
.hero {
padding: 4rem 0;
}
.hero h2 {
font-size: 1.7rem;
}
.hero p {
font-size: 1rem;
}
.logo {
flex-direction: column;
text-align: center;
}
.logo-bg {
margin-right: 0;
margin-bottom: 10px;
}
.stats-grid {
grid-template-columns: 1fr;
}
.footer-content {
grid-template-columns: 1fr;
}
}
/* ========== CONTACT PAGE STYLES ========== */
.contact-page-main {
background-color: var(--bg-light);
padding: 5rem 0;
position: relative;
overflow: hidden;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 50px;
}
/* Contact Info Styles */
.contact-info-panel {
display: flex;
flex-direction: column;
gap: 20px;
}
.contact-card {
background-color: white;
border-radius: 8px;
box-shadow: var(--box-shadow);
padding: 25px;
transition: transform 0.3s ease;
}
.contact-card:hover {
transform: translateY(-5px);
}
.contact-icon {
width: 60px;
height: 60px;
background-color: rgba(0, 98, 51, 0.1);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 15px;
}
.contact-icon i {
font-size: 1.8rem;
color: var(--primary-green);
}
.contact-card h3 {
color: var(--primary-red);
font-size: 1.2rem;
margin-bottom: 10px;
}
.contact-card p {
color: var(--text-dark);
margin: 0;
line-height: 1.6;
}
.contact-social {
background-color: white;
border-radius: 8px;
box-shadow: var(--box-shadow);
padding: 25px;
}
.contact-social h3 {
color: var(--primary-red);
font-size: 1.2rem;
margin-bottom: 15px;
}
.social-grid {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.social-btn {
display: flex;
justify-content: center;
align-items: center;
width: 45px;
height: 45px;
background-color: var(--primary-green);
color: white;
border-radius: 50%;
transition: all 0.3s ease;
}
.social-btn:hover {
background-color: var(--primary-red);
transform: translateY(-3px);
}
/* Contact Form Styles */
.contact-form-panel {
background-color: white;
border-radius: 8px;
box-shadow: var(--box-shadow);
padding: 30px;
}
.form-header {
margin-bottom: 25px;
}
.form-header h2 {
color: var(--primary-green);
font-size: 1.8rem;
margin-bottom: 10px;
position: relative;
padding-bottom: 15px;
}
.form-header h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: var(--primary-red);
}
.form-header p {
color: var(--gray-medium);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(--text-dark);
}
.form-group .required {
color: var(--primary-red);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px 15px;
border: 1px solid var(--gray-light);
border-radius: 4px;
font-family: inherit;
font-size: 1rem;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-green);
box-shadow: 0 0 0 3px rgba(0, 98, 51, 0.1);
}
.form-group textarea {
min-height: 150px;
resize: vertical;
}
.checkbox-group {
display: flex;
align-items: center;
gap: 10px;
}
.checkbox-group input {
width: auto;
}
.checkbox-group label {
margin-bottom: 0;
}
.submit-btn {
background-color: var(--primary-red);
color: white;
border: none;
padding: 14px 30px;
border-radius: 4px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
}
.submit-btn:hover {
background-color: #a02025;
transform: translateY(-2px);
}
.submit-btn i {
margin-left: 8px;
}
/* FAQ Section */
.faq-section {
padding: 5rem 0;
background-color: #f9f9f9;
}
.faq-section .section-title {
color: var(--primary-green);
font-size: 2.2rem;
text-align: center;
margin-bottom: 3rem;
position: relative;
padding-bottom: 15px;
}
.faq-section .section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 70px;
height: 3px;
background-color: var(--primary-red);
}
.faq-container {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
background-color: white;
border-radius: 8px;
box-shadow: var(--box-shadow);
margin-bottom: 20px;
overflow: hidden;
}
.faq-question {
padding: 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-question h3 {
font-size: 1.1rem;
color: var(--primary-red);
margin: 0;
}
.faq-icon {
color: var(--primary-green);
transition: transform 0.3s ease;
}
.faq-item.active .faq-icon i {
transform: rotate(180deg);
}
.faq-answer {
padding: 0 20px 20px;
display: none;
}
.faq-item.active .faq-answer {
display: block;
}
/* Map Section */
.map-section {
padding: 0;
position: relative;
}
.map-container {
position: relative;
height: 400px;
}
.map-placeholder {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.map-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.map-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 30px;
}
.map-card {
background-color: white;
border-radius: 8px;
box-shadow: var(--box-shadow);
padding: 25px;
max-width: 350px;
}
.map-card h3 {
color: var(--primary-green);
font-size: 1.3rem;
margin-bottom: 15px;
}
.map-card p {
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.map-card p i {
color: var(--primary-red);
}
.directions-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: var(--primary-green);
color: white;
padding: 10px 15px;
border-radius: 4px;
margin-top: 10px;
transition: all 0.3s ease;
}
.directions-btn:hover {
background-color: var(--primary-red);
transform: translateY(-2px);
}
/* Newsletter Section */
.newsletter-section {
background-color: var(--primary-green);
color: white;
padding: 4rem 0;
position: relative;
overflow: hidden;
}
.pattern-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
}
.newsletter-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
align-items: center;
}
.newsletter-text h2 {
font-size: 2rem;
margin-bottom: 15px;
}
.newsletter-form .form-group {
display: flex;
margin-bottom: 10px;
}
.newsletter-form input[type="email"] {
flex: 1;
padding: 14px;
border: none;
border-radius: 4px 0 0 4px;
font-size: 1rem;
}
.newsletter-form button {
background-color: var(--primary-red);
color: white;
border: none;
padding: 0 20px;
border-radius: 0 4px 4px 0;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: background-color 0.3s ease;
}
.newsletter-form button:hover {
background-color: #a02025;
}
.form-consent {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.9rem;
}
.form-consent input {
width: auto;
}
/* Animation classes */
.animate-fade-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.animate-fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Responsive styles */
@media (max-width: 992px) {
.contact-grid {
grid-template-columns: 1fr;
}
.contact-info-panel {
order: 2;
}
.contact-form-panel {
order: 1;
margin-bottom: 30px;
}
.newsletter-content {
grid-template-columns: 1fr;
gap: 20px;
text-align: center;
}
}
@media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr;
}
.map-overlay {
justify-content: center;
}
.newsletter-form .form-group {
flex-direction: column;
}
.newsletter-form input[type="email"] {
border-radius: 4px;
margin-bottom: 10px;
}
.newsletter-form button {
border-radius: 4px;
width: 100%;
justify-content: center;
}
}
@media (max-width: 576px) {
.contact-page-main,
.faq-section {
padding: 3rem 0;
}
.contact-form-panel,
.contact-card,
.contact-social {
padding: 20px;
}
.map-container {
height: 350px;
}
.map-card {
max-width: 280px;
}
}
.programs {
background-color: #ffffff;
}
.programs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
margin-bottom: 2rem;
}
.program-card {
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: var(--box-shadow);
transition: transform 0.3s ease, box-shadow 0.3s ease;
opacity: 0;
transform: translateY(20px);
}
.program-card.visible {
opacity: 1;
transform: translateY(0);
animation: fadeInUp 0.7s ease-out forwards;
}
.program-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.program-img {
height: 200px;
background-size: cover;
background-position: center;
border-bottom: 3px solid var(--primary-green);
}
.program-content {
padding: 20px;
}
.program-title {
font-size: 1.2rem;
margin-bottom: 10px;
color: var(--primary-red);
}
.program-excerpt {
color: var(--text-dark);
margin-bottom: 15px;
}
.youth-ambassadors {
background-color: var(--bg-light);
padding: 5rem 0;
}
.ambassadors-content {
display: flex;
flex-direction: column;
gap: 30px;
}
.ambassador-text {
text-align: center;
}
.ambassador-text h3 {
font-size: 1.8rem;
color: var(--primary-green);
margin-bottom: 1rem;
}
.ambassador-text p {
font-size: 1.1rem;
color: var(--text-dark);
max-width: 800px;
margin: 0 auto;
}
/* Ambassador Grid */
.ambassadors-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
/* Ambassador Card */
.ambassador-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: var(--box-shadow);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
text-align: center;
}
.ambassador-card:hover {
transform: translateY(-5px);
}
/* Ambassador Image */
.ambassador-img {
width: 100%;
height: 350px; /* زيادة الارتفاع ليكون الصورة أكبر */
object-fit: cover; /* Ensure the image covers the area without distortion */
border-bottom: 3px solid var(--primary-green);
}
/* Ambassador Content */
.ambassador-content {
padding: 15px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.ambassador-content h3 {
font-size: 1.2rem;
color: var(--primary-red);
margin-bottom: 5px;
}
.ambassador-content p {
font-size: 0.9rem;
color: var(--text-dark);
margin-bottom: 10px;
flex-grow: 1;
}
/* Contact Link */
.ambassador-contact {
margin-top: auto;
}
.contact-link {
display: inline-flex;
align-items: center;
color: var(--primary-green);
font-weight: 500;
font-size: 0.9rem;
padding: 8px 12px;
border: 1px solid var(--primary-green);
border-radius: 4px;
transition: all 0.3s ease;
}
.contact-link i {
margin-right: 8px;
}
.contact-link:hover {
background-color: var(--primary-green);
color: var(--text-light);
border-color: var(--primary-green);
transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* View All Button */
.view-all-btn {
display: block; /* لضمان أن الزر يأخذ عرضه الطبيعي */
background-color: transparent;
color: var(--primary-green);
border: 2px solid var(--primary-green);
padding: 10px 25px;
border-radius: 50px;
font-weight: 500;
transition: all 0.3s ease;
margin-top: 2rem;
margin-left: auto;
margin-right: auto;
text-align: center; /* لضمان أن النص داخل الزر في المنتصف */
}
.view-all-btn:hover {
background-color: var(--primary-green);
color: white;
}
.view-all-btn i {
margin-left: 5px;
transition: transform 0.3s ease;
}
.view-all-btn:hover i {
transform: translateX(5px);
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.ambassadors-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}
.ambassador-img {
height: 350px; /* زيادة الارتفاع للشاشات الصغيرة */
}
.ambassador-content h3 {
font-size: 1rem;
}
.ambassador-content p {
font-size: 0.85rem;
}
}
/* Centre Média Section */
.media-center {
background-color: #f9f9f9; /* Light background to distinguish the section */
padding: 5rem 0;
}
.media-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
}
@media (max-width: 768px) {
.media-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
}
.media-card {
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: var(--box-shadow);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.media-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.media-img {
height: 0;
padding-bottom: 80%; /* 5:4 aspect ratio for responsive images */
background-size: cover;
background-position: center;
border-bottom: 3px solid var(--primary-green);
}
.media-content {
padding: 20px;
}
.media-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--primary-red);
margin-bottom: 10px;
}
.media-excerpt {
font-size: 1rem;
line-height: 1.5;
margin-bottom: 15px;
}
.read-more {
display: inline-flex;
align-items: center;
background-color: var(--primary-green);
color: white;
padding: 8px 15px;
border-radius: 4px;
text-decoration: none;
transition: background-color 0.3s ease;
cursor: pointer;
}
.read-more:hover {
background-color: var(--dark-green);
}
.read-more i {
margin-left: 5px;
}
/* Educational Resources Section */
.educational-resources {
margin-top: 3rem;
}
.resources-title {
font-size: 1.8rem;
color: var(--primary-green);
margin-bottom: 1.5rem;
text-align: center;
}
.resources-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.resource-card {
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: var(--box-shadow);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.resource-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.resource-card h4 {
font-size: 1.2rem;
color: var(--primary-red);
margin-bottom: 10px;
}
.resource-card p {
font-size: 1rem;
margin-bottom: 15px;
}
/* Upcoming Events Section */
.upcoming-events {
margin-top: 3rem;
}
.events-title {
font-size: 1.8rem;
color: var(--primary-green);
margin-bottom: 1.5rem;
text-align: center;
}
.events-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.event-item {
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: var(--box-shadow);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.event-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.event-item h4 {
font-size: 1.2rem;
color: var(--primary-red);
margin-bottom: 5px;
}
.event-item p {
font-size: 1rem;
margin-bottom: 10px;
}
/* Styling for Read More Links in Resources and Events */
.resource-card .read-more,
.event-item .read-more {
display: inline-flex;
align-items: center;
background-color: var(--primary-green);
color: white;
padding: 8px 15px;
border-radius: 4px;
text-decoration: none;
transition: background-color 0.3s ease;
}
.resource-card .read-more:hover,
.event-item .read-more:hover {
background-color: var(--dark-green);
}
.resource-card .read-more i,
.event-item .read-more i {
margin-left: 5px;
}
.animate-card {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.animate-card.visible {
opacity: 1;
transform: translateY(0);
}
.regulations {
background-color: var(--bg-light);
}
.regulations-content {
display: grid;
gap: 30px;
}
.regulation-item {
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: var(--box-shadow);
}
.regulation-item h3 {
font-size: 1.2rem;
color: var(--primary-red);
margin-bottom: 10px;
}
.partnerships {
background-color: white;
}
.partners-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 30px;
}
.partner-card {
text-align: center;
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: var(--box-shadow);
transition: transform 0.3s ease;
}
.partner-card:hover {
transform: translateY(-5px);
}
.partner-logo {
width: 100px;
height: 100px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin: 0 auto 15px;
}
.partner-card h3 {
font-size: 1.2rem;
color: var(--primary-red);
margin-bottom: 10px;
}
.president-message {
margin-top: 3rem;
text-align: center;
}
.president-message h3 {
font-size: 1.8rem;
color: var(--text-light);
margin-bottom: 1.5rem;
}
.president-content {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 20px;
display: inline-block;
max-width: 600px;
}
.president-img {
width: 200px;
height: 200px;
border-radius: 50%;
margin-bottom: 15px;
}
.president-content p {
color: var(--text-light);
margin-bottom: 15px;
}
.intro-video {
margin-top: 3rem;
text-align: center;
}
.intro-video h3 {
font-size: 1.8rem;
color: var(--text-light);
margin-bottom: 1.5rem;
}
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
max-width: 800px;
margin: 0 auto;
border: 3px solid var(--primary-gold);
border-radius: 8px;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.org-structure {
margin-top: 3rem;
text-align: center;
}
.org-structure h3 {
font-size: 1.8rem;
color: var(--primary-green);
margin-bottom: 1.5rem;
}
.structure-img {
max-width: 100%;
border-radius: 8px;
box-shadow: var(--box-shadow);
}
.leadership-team {
margin-top: 3rem;
}
.leadership-team h3 {
font-size: 1.8rem;
color: var(--primary-green);
margin-bottom: 1.5rem;
text-align: center;
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.team-card {
text-align: center;
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: var(--box-shadow);
}
.team-img {
width: 100px;
height: 100px;
background-size: cover;
background-position: center;
border-radius: 50%;
margin: 0 auto 15px;
}
.team-card h4 {
font-size: 1.1rem;
color: var(--primary-red);
margin-bottom: 5px;
}
.strategic-partners {
margin-top: 3rem;
text-align: center;
}
.strategic-partners h3 {
font-size: 1.8rem;
color: var(--primary-green);
margin-bottom: 1.5rem;
}
.partners-logos {
display: flex;
justify-content: center;
gap: 20px;
}
.partners-logos img {
width: 100px;
height: 100px;
object-fit: contain;
}
.criteria-list, .process-list {
margin-top: 1rem;
}
.criteria-list li, .process-list li {
margin-bottom: 10px;
display: flex;
align-items: center;
}
.criteria-list i {
color: var(--primary-green);
margin-right: 10px;
}
.join-text h4 {
font-size: 1.2rem;
color: var(--primary-red);
margin-top: 1.5rem;
margin-bottom: 0.5rem;
}
/* contact page */
/* Loading Spinner */
.loading-spinner {
display: none;
}
.submit-btn.loading .btn-text {
display: none;
}
.submit-btn.loading .loading-spinner {
display: inline-block;
}
/* Form Message */
.form-message {
margin-top: 15px;
text-align: center;
font-weight: 500;
}
.form-message.success {
color: var(--primary-green);
}
.form-message.error {
color: var(--primary-red);
}
/* Mobile Menu */
.mobile-menu {
position: fixed;
top: 0;
left: -100%; /* Hidden off-screen to the left */
width: 80%; /* Adjust width as needed */
max-width: 300px; /* More professional width */
height: 100%;
background-color: #a71e2d; /* Red background to match desktop */
z-index: 1000;
transition: left 0.3s ease;
overflow-y: auto;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3); /* Add shadow for depth */
}
.mobile-menu.active {
left: 0; /* Slides in when active */
}
.mobile-menu-close {
background: none;
border: none;
font-size: 28px; /* Larger close button */
color: var(--text-light);
position: absolute;
top: 15px;
right: 15px;
cursor: pointer;
}
.mobile-menu-list {
list-style: none;
padding: 20px;
margin: 0;
}
.mobile-menu-list li {
margin-bottom: 8px; /* Reduced spacing for a tighter layout */
}
.mobile-menu-list a {
color: var(--text-light);
text-decoration: none;
font-size: 1rem; /* Smaller font size for professionalism */
display: flex;
align-items: center;
padding: 10px 15px;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.mobile-menu-list a i {
margin-right: 10px;
}
.mobile-menu-list a:hover {
background-color: #1a3c34; /* Dark green hover effect */
}
.mobile-menu-list .active {
background-color: #1a3c34; /* Green for active item */
}
.mobile-menu-list .highlight-btn {
background-color: #f4c430; /* Yellow for Rejoignez-nous */
color: #a71e2d;
border-radius: 4px;
}
/* Dropdown Styles */
.mobile-menu-list .dropdown-menu,
.mobile-menu-list .sub-dropdown-menu {
display: none;
list-style: none;
padding-left: 20px;
background-color: #8b1a27; /* Slightly darker red for hierarchy */
}
.mobile-menu-list .dropdown.active > .dropdown-menu,
.mobile-menu-list .sub-dropdown.active > .sub-dropdown-menu {
display: block;
}
.mobile-menu-list .dropdown-toggle,
.mobile-menu-list .sub-dropdown-toggle {
display: flex;
justify-content: space-between;
align-items: center;
}
.mobile-menu-list .dropdown-icon,
.mobile-menu-list .sub-dropdown-icon {
font-size: 0.8rem;
transition: transform 0.3s ease;
}
.mobile-menu-list .dropdown.active .dropdown-icon,
.mobile-menu-list .sub-dropdown.active .sub-dropdown-icon {
transform: rotate(180deg);
}
/* Responsive Design */
@media (max-width: 768px) {
.desktop-menu {
display: none;
}
.mobile-menu-toggle {
display: block;
}
}
@media (min-width: 769px) {
.mobile-menu {
display: none !important;
}
.mobile-menu-toggle {
display: none;
}
}
.mobile-menu-list a:hover {
background-color: var(--primary-gold);
color: var(--primary-red);
}
.mobile-menu-list a {
font-size: 1.1rem;
font-weight: 500;
padding: 15px 20px;
margin-bottom: 12px;
}
.mobile-menu {
transform: translateX(-100%);
transition: transform 0.4s ease-in-out;
}
.mobile-menu.active {
transform: translateX(0);
}
.mobile-menu-close {
font-size: 32px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
padding: 10px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
}
.mobile-menu-close:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.mobile-menu {
box-shadow: 2px 0 15px rgba(0, 0, 0, 0.3);
}
/* ADVISORS PAGE */
/* Advisory Board Section */
.advisory-board {
background-color: var(--bg-light);
padding: 5rem 0;
}
.advisors-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 30px;
}
.advisor-card {
background-color: white;
border-radius: 8px;
box-shadow: var(--box-shadow);
text-align: center;
padding: 20px;
transition: transform 0.3s ease;
}
.advisor-card:hover {
transform: translateY(-5px);
}
.advisor-card img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 15px;
}
.advisor-card h2 {
font-size: 1.2rem;
color: var(--primary-red);
margin-bottom: 10px;
}
.advisor-card p {
font-size: 0.9rem;
color: var(--text-dark);
}
/* Responsive Design */
@media (max-width: 768px) {
.advisors-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
}
@media (max-width: 576px) {
.advisors-grid {
grid-template-columns: 1fr;
}
}
/* Partnerships PAGE */
/* ========== PARTNERSHIPS PAGE ========== */
.partnerships {
background-color: var(--bg-light);
padding: 5rem 0;
}
.section-intro {
font-size: 1.1rem;
color: var(--text-dark);
max-width: 800px;
margin: 0 auto 2rem;
text-align: center;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.section-intro.visible {
opacity: 1;
transform: translateY(0);
}
.partnership-form {
background-color: white;
border-radius: 12px;
box-shadow: var(--box-shadow);
padding: 40px;
max-width: 900px;
margin: 0 auto;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.partnership-form.visible {
opacity: 1;
transform: translateY(0);
}
.partnership-form .form-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
margin-bottom: 30px;
}
.partnership-form .form-group {
position: relative;
margin-bottom: 20px;
}
.partnership-form .form-group.full-width {
grid-column: 1 / -1;
}
.partnership-form .form-group input,
.partnership-form .form-group textarea {
width: 100%;
padding: 12px 12px 12px 0;
border: none;
border-bottom: 2px solid var(--gray-light);
font-family: 'Poppins', sans-serif;
font-size: 0.95rem;
color: var(--text-dark);
background: transparent;
transition: border-bottom-color 0.3s ease, box-shadow 0.3s ease;
box-sizing: border-box;
}
.partnership-form .form-group input:focus,
.partnership-form .form-group textarea:focus {
outline: none;
border-bottom-color: var(--primary-green);
box-shadow: 0 2px 0 0 rgba(0, 128, 0, 0.2);
}
.partnership-form .form-group textarea {
min-height: 120px;
resize: vertical;
}
.partnership-form .form-group label {
position: absolute;
top: 12px;
left: 0;
font-size: 0.95rem;
color: #888;
transition: all 0.3s ease;
pointer-events: none;
}
.partnership-form .form-group label .required {
color: var(--primary-red);
}
.partnership-form .form-group label.floating {
top: -10px;
font-size: 0.75rem;
color: var(--primary-green);
}
/* Custom Dropdown Styling */
.partnership-form .custom-dropdown {
position: relative;
width: 100%;
z-index: 1;
}
.partnership-form .custom-dropdown .dropdown-selected {
width: 100%;
padding: 12px 40px 12px 0;
border: none;
border-bottom: 2px solid var(--gray-light);
font-family: 'Poppins', sans-serif;
font-size: 0.95rem;
color: var(--text-dark);
background: transparent;
cursor: pointer;
transition: border-bottom-color 0.3s ease, box-shadow 0.3s ease;
position: relative;
}
.partnership-form .custom-dropdown .dropdown-selected::after {
content: '\f078';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 0.8rem;
color: #333;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.partnership-form .custom-dropdown .dropdown-options {
display: none;
position: absolute;
top: calc(100% + 5px);
left: 0;
right: 0;
background-color: white;
border: 1px solid var(--gray-light);
border-radius: 6px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
z-index: 2000;
max-height: 150px;
overflow-y: auto;
list-style: none;
padding: 0;
margin: 0;
}
.partnership-form .custom-dropdown .dropdown-options.active {
display: block;
}
.partnership-form .custom-dropdown .dropdown-options li {
padding: 12px;
font-family: 'Poppins', sans-serif;
font-size: 0.95rem;
color: var(--text-dark);
cursor: pointer;
transition: background-color 0.3s ease;
}
.partnership-form .custom-dropdown .dropdown-options li:hover {
background-color: #f5f5f5;
}
.partnership-form .custom-dropdown.error .dropdown-selected {
border-bottom-color: var(--primary-red);
box-shadow: 0 2px 0 0 rgba(255, 0, 0, 0.2);
}
/* Form Footer */
.partnership-form .form-footer {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 20px;
}
.partnership-form .checkbox-group {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.partnership-form .checkbox-group input {
width: auto;
margin: 0;
}
.partnership-form .checkbox-group label {
font-size: 0.9rem;
margin-bottom: 0;
line-height: 1.4;
position: static;
color: var(--text-dark);
}
.partnership-form .checkbox-group label a.privacy-link {
color: var(--primary-green);
text-decoration: none;
transition: color 0.3s ease;
}
.partnership-form .checkbox-group label a.privacy-link:hover {
color: #006400;
}
.partnership-form .submit-btn {
background: linear-gradient(90deg, var(--primary-green), var(--primary-red));
color: white;
border: none;
padding: 12px 30px;
border-radius: 6px;
font-family: 'Poppins', sans-serif;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
min-width: 160px;
justify-content: center;
}
.partnership-form .submit-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.partnership-form .submit-btn.loading .btn-text {
display: none;
}
.partnership-form .submit-btn.loading .loading-spinner {
display: inline-block;
}
.partnership-form .loading-spinner {
display: none;
}
.partnership-form .form-message {
margin-top: 20px;
text-align: center;
font-size: 0.9rem;
}
.partnership-form .form-message.success {
color: var(--primary-green);
}
.partnership-form .form-message.error {
color: var(--primary-red);
}
/* Responsive Design for Partnership Form */
@media (max-width: 768px) {
.partnership-form .form-grid {
grid-template-columns: 1fr;
}
.partnership-form .form-footer {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.partnership-form .submit-btn {
width: 100%;
max-width: 300px;
}
}
@media (max-width: 576px) {
.partnerships {
padding: 3rem 0;
}
.partnership-form {
padding: 25px;
}
.section-title {
font-size: 1.8rem;
}
.section-intro {
font-size: 1rem;
}
}
/* President PAGE */
/* ========== PRESIDENT'S NOTE PAGE ========== */
.presidents-note {
background-color: var(--bg-light);
padding: 5rem 0;
}
.note-content {
display: flex;
align-items: center;
gap: 50px;
margin-bottom: 3rem;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.note-content.visible {
opacity: 1;
transform: translateY(0);
}
.note-image {
width: 300px;
height: 300px;
object-fit: cover;
border-radius: 8px;
box-shadow: var(--box-shadow);
}
.note-text {
flex: 1;
}
.section-intro {
font-size: 1.1rem;
color: var(--text-dark);
margin-bottom: 1.5rem;
}
.speech {
background-color: white;
border-left: 4px solid var(--primary-red);
padding: 20px;
border-radius: 4px;
box-shadow: var(--box-shadow);
}
.speech h2 {
font-size: 1.4rem;
color: var(--primary-red);
margin-bottom: 1rem;
}
.speech blockquote {
font-style: italic;
color: var(--text-dark);
margin: 0;
}
.speech blockquote p {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 1rem;
}
.message-form {
background-color: white;
border-radius: 8px;
box-shadow: var(--box-shadow);
padding: 30px;
max-width: 800px;
margin: 0 auto;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.message-form.visible {
opacity: 1;
transform: translateY(0);
}
.form-title {
font-size: 1.5rem;
color: var(--primary-red);
margin-bottom: 1.5rem;
text-align: center;
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
.form-group.full-width {
grid-column: 1 / -1;
}
.form-group label {
display: block;
font-size: 0.9rem;
font-weight: 500;
color: var(--text-dark);
margin-bottom: 8px;
}
.form-group .required {
color: var(--primary-red);
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid var(--gray-light);
border-radius: 4px;
font-family: 'Poppins', sans-serif;
font-size: 0.9rem;
transition: border-color 0.3s ease;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-green);
}
.form-group textarea {
min-height: 120px;
resize: vertical;
}
.checkbox-group {
display: flex;
align-items: center;
gap: 10px;
}
.checkbox-group input {
width: auto;
}
.checkbox-group label {
font-size: 0.85rem;
margin-bottom: 0;
}
.submit-btn {
background-color: var(--primary-red);
color: white;
border: none;
padding: 12px 20px;
border-radius: 4px;
font-family: 'Poppins', sans-serif;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
transition: background-color 0.3s ease, transform 0.3s ease;
width: 100%;
justify-content: center;
}
.submit-btn:hover {
background-color: #a02025;
transform: translateY(-2px);
}
.submit-btn.loading .btn-text {
display: none;
}
.submit-btn.loading .loading-spinner {
display: inline-block;
}
.loading-spinner {
display: none;
}
.form-message {
margin-top: 15px;
text-align: center;
font-size: 0.9rem;
}
.form-message.success {
color: var(--primary-green);
}
.form-message.error {
color: var(--primary-red);
}
/* Responsive Design */
@media (max-width: 768px) {
.note-content {
flex-direction: column;
text-align: center;
}
.note-image {
width: 100%;
max-width: 400px;
height: auto;
}
.form-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 576px) {
.presidents-note {
padding: 3rem 0;
}
.message-form {
padding: 20px;
}
.section-title {
font-size: 1.8rem;
}
.section-intro {
font-size: 1rem;
}
.form-title {
font-size: 1.3rem;
}
.speech h2 {
font-size: 1.2rem;
}
.speech blockquote p {
font-size: 0.95rem;
}
}
/* ORGANIGRAME CHART */
/* Additional CSS for National Office Page */
.national-office {
background-color: var(--bg-light);
padding: 5rem 0;
}
.department-list ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-bottom: 30px;
padding: 0;
list-style: none;
}
.department-list a {
color: var(--primary-green);
font-weight: 500;
padding: 8px 15px;
border-radius: 4px;
text-decoration: none;
transition: background-color 0.3s ease, color 0.3s ease;
}
.department-list a:hover,
.department-list a.active {
background-color: var(--primary-green);
color: white;
}
.department {
display: none;
margin-bottom: 50px;
text-align: center;
}
.department.active {
display: block;
animation: fadeIn 0.5s ease-in;
}
.department h2 {
font-size: 1.8rem;
color: var(--primary-green);
margin-bottom: 20px;
}
.org-chart-container {
width: 100%;
overflow-x: auto;
margin-top: 20px;
}
.google-visualization-orgchart-table {
margin: 0 auto;
}
.google-visualization-orgchart-lineleft,
.google-visualization-orgchart-lineright,
.google-visualization-orgchart-linebottom {
border-color: var(--primary-green) !important;
}
.google-visualization-orgchart-node {
border: none !important;
background: none !important;
padding: 0 !important;
}
.department-head,
.org-node {
display: flex;
flex-direction: column;
align-items: center;
}
.department-head .name,
.org-node .name {
background-color: var(--primary-green);
color: white;
padding: 10px 20px;
border-radius: 4px;
font-weight: bold;
font-size: 1rem;
margin-bottom: 5px;
text-align: center;
width: 180px; /* Fixed width for all name boxes */
box-sizing: border-box;
}
.org-node .name {
background-color: white;
color: var(--text-dark);
border: 1px solid var(--primary-green);
}
.department-head .position,
.org-node .position {
font-size: 0.9rem;
color: var(--text-dark);
text-align: center;
width: 180px; /* Same fixed width as name boxes for alignment */
box-sizing: border-box;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* RTL Support */
html[dir="rtl"] .department-list ul {
flex-direction: row-reverse;
}
html[dir="rtl"] .department h2,
html[dir="rtl"] .department-head .name,
html[dir="rtl"] .org-node .name,
html[dir="rtl"] .department-head .position,
html[dir="rtl"] .org-node .position {
text-align: right;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.department-list ul {
flex-direction: column;
align-items: center;
}
.department-list a {
width: 100%;
text-align: center;
padding: 10px;
}
.department-head .name,
.org-node .name {
font-size: 0.9rem;
padding: 8px 15px;
width: 150px; /* Adjusted width for smaller screens */
}
.department-head .position,
.org-node .position {
font-size: 0.8rem;
width: 150px; /* Same adjusted width for alignment */
}
.department h2 {
font-size: 1.5rem;
}
}
/* Additional CSS for News Page */
.news-page {
background-color: var(--bg-light);
padding: 5rem 0;
}
.news-header {
text-align: center;
margin-bottom: 3rem;
}
.news-header h1 {
font-size: 2.5rem;
color: var(--primary-green);
margin-bottom: 1rem;
}
.news-header p {
font-size: 1.1rem;
color: var(--text-dark);
max-width: 800px;
margin: 0 auto;
}
.news-archive {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
margin-bottom: 3rem;
}
.news-card {
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: var(--box-shadow);
transition: transform 0.3s ease, box-shadow 0.3s ease;
opacity: 0;
transform: translateY(20px);
}
.news-card.visible {
opacity: 1;
transform: translateY(0);
animation: fadeInUp 0.7s ease-out forwards;
}
.news-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.news-img {
height: 200px;
background-size: cover;
background-position: center;
border-bottom: 3px solid var(--primary-green);
}
.news-content {
padding: 20px;
}
.news-date {
color: var(--gray-medium);
font-size: 0.85rem;
margin-bottom: 10px;
}
.news-date i {
margin-right: 5px;
}
.news-title {
font-size: 1.2rem;
margin-bottom: 10px;
color: var(--primary-red);
}
.news-excerpt {
color: var(--text-dark);
margin-bottom: 15px;
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 2rem;
}
.pagination a {
background-color: var(--primary-green);
color: white;
padding: 10px 15px;
border-radius: 4px;
font-size: 0.9rem;
transition: background-color 0.3s ease;
}
.pagination a:hover {
background-color: var(--dark-green);
}
.pagination a.disabled {
background-color: var(--gray-light);
cursor: not-allowed;
pointer-events: none;
}
.pagination a.active {
background-color: var(--primary-red);
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.news-archive {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.news-header h1 {
font-size: 2rem;
}
.news-header p {
font-size: 1rem;
}
}
@media (max-width: 576px) {
.news-page {
padding: 3rem 0;
}
.news-archive {
grid-template-columns: 1fr;
}
.news-header h1 {
font-size: 1.8rem;
}
}
/* General Administration Page */
/* Existing styles.css content */
:root {
--primary-red: #c1272d;
--primary-green: #006233;
--primary-gold: #ffd700;
--dark-green: #004d29;
--light-gold: #ffe866;
--text-dark: #333333;
--text-light: #ffffff;
--bg-light: #f5f5f5;
--bg-dark: #1a1a1a;
--gray-light: #e0e0e0;
--gray-medium: #999999;
--box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* Additional Styles for General Administration Page */
.general-administration {
background-color: var(--bg-light);
padding: 5rem 0;
}
.section-intro {
font-size: 1.1rem;
color: var(--text-dark);
max-width: 800px;
margin: 0 auto 2rem;
text-align: center;
}
.leadership-team {
margin-top: 3rem;
text-align: center;
}
.leadership-team h3 {
font-size: 1.8rem;
color: var(--primary-green);
margin-bottom: 1.5rem;
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.team-card {
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: var(--box-shadow);
transition: transform 0.3s ease;
}
.team-card:hover {
transform: translateY(-5px);
}
.team-img {
width: 100px;
height: 100px;
background-size: cover;
background-position: center;
border-radius: 50%;
margin: 0 auto 15px;
}
.team-card h4 {
font-size: 1.1rem;
color: var(--primary-red);
margin-bottom: 5px;
}
.team-card p {
font-size: 0.9rem;
color: var(--text-dark);
margin-bottom: 10px;
}
.contact-link {
display: inline-flex;
align-items: center;
color: var(--primary-green);
font-weight: 500;
font-size: 0.9rem;
padding: 8px 12px;
border: 1px solid var(--primary-green);
border-radius: 4px;
transition: all 0.3s ease;
}
.contact-link i {
margin-right: 8px;
}
.contact-link:hover {
background-color: var(--primary-green);
color: var(--text-light);
border-color: var(--primary-green);
transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.team-grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 15px;
}
.team-img {
width: 80px;
height: 80px;
}
.team-card h4 {
font-size: 1rem;
}
.team-card p {
font-size: 0.85rem;
}
}
@media (max-width: 576px) {
.general-administration {
padding: 3rem 0;
}
.section-title {
font-size: 1.8rem;
}
.section-intro {
font-size: 1rem;
}
.leadership-team h3 {
font-size: 1.5rem;
}
}
/* Regulations Page */
.regulation-description {
max-width: 800px;
margin: 20px auto;
text-align: center;
font-size: 1.1rem;
color: #333; /* Dark color for visibility */
line-height: 1.6;
padding: 0 15px;
}
.regulation-description p {
margin: 0;
}
/* Existing CSS (ensure these are in styles.css) */
.regulations-content {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.regulation-item {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.3s ease;
}
.regulation-item:hover {
transform: translateY(-5px);
}
.regulation-icon {
font-size: 2.5rem;
color: var(--primary-color); /* Replace with your CSS variable, e.g., --primary-red or --primary-green */
margin-bottom: 15px;
}
.regulation-item h3 {
font-size: 1.5rem;
color: var(--text-dark); /* Replace with your CSS variable */
margin-bottom: 10px;
}
.regulation-item p {
font-size: 1rem;
color: var(--text-color); /* Replace with your CSS variable */
margin-bottom: 15px;
}
.faq-section {
margin: 40px 0;
}
.faq-container {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
background: #fff;
border-radius: 8px;
margin-bottom: 10px;
overflow: hidden;
}
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
cursor: pointer;
background: var(--primary-color); /* Replace with your CSS variable */
color: #fff;
}
.faq-question h3 {
font-size: 1.2rem;
margin: 0;
}
.faq-icon i {
transition: transform 0.3s ease;
}
.faq-item.active .faq-icon i {
transform: rotate(180deg);
}
.faq-answer {
display: none;
padding: 15px 20px;
background: #f9f9f9;
}
.faq-item.active .faq-answer {
display: block;
}
/* ========== PRESS RELEASES PAGE ========== */
.press-releases {
background-color: #f9f9f9;
padding: 5rem 0;
}
.press-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.press-card {
background-color: white;
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.press-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.press-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.press-date {
font-size: 0.9rem;
color: #666;
display: flex;
align-items: center;
}
.press-date i {
margin-right: 0.5rem;
}
.press-label {
background-color: var(--primary-red);
color: white;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
text-transform: uppercase;
}
.press-title {
font-size: 1.4rem;
margin-bottom: 0.5rem;
color: var(--primary-green);
font-weight: 600;
}
.press-excerpt {
font-size: 1rem;
margin-bottom: 1rem;
color: var(--text-dark);
}
.press-link {
display: inline-flex;
align-items: center;
background-color: var(--primary-green);
color: white;
padding: 0.5rem 1rem;
border-radius: 4px;
text-decoration: none;
font-weight: 500;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.press-link:hover {
background-color: var(--dark-green);
transform: scale(1.05);
}
.press-link i {
margin-left: 0.5rem;
}
/* Enhanced Animation */
.press-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.press-card:hover::before {
left: 100%;
}
/* Responsive Design */
@media (max-width: 768px) {
.press-grid {
grid-template-columns: 1fr;
}
}
/* Photo Gallery */
.photo-gallery {
background-color: var(--bg-light);
padding: 5rem 0;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-item:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.gallery-item:hover img {
transform: scale(1.1);
}
.gallery-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.6);
color: var(--text-light);
padding: 1rem;
text-align: center;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.gallery-item:hover .gallery-overlay {
transform: translateY(0);
}
.gallery-overlay p {
margin: 0;
font-size: 1rem;
}
/* Animation */
.animate-fade-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.animate-fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Responsive Design */
@media (max-width: 768px) {
.gallery-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
/*
* Moroccan Youth Council for Diplomacy and International Cooperation
* CSS for About Us, Vision, and Mission Sections
*/
/* About Section */
.about {
background-color: var(--bg-gray);
padding: 5rem 0;
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.about-img {
height: 400px;
background-size: cover;
background-position: center;
border-radius: 8px;
box-shadow: var(--box-shadow);
position: relative;
}
.about-img::before {
content: '';
position: absolute;
top: 15px;
left: 15px;
right: -15px;
bottom: -15px;
border: 3px solid var(--primary-gold);
border-radius: 8px;
z-index: -1;
}
.about-text h3 {
color: var(--primary-green);
font-size: 1.8rem;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 10px;
}
.about-text h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: var(--primary-red);
}
.about-text p {
font-size: 1rem;
color: var(--text-dark);
margin-bottom: 1rem;
}
/* Vision Section */
.vision {
background-color: white;
padding: 5rem 0;
}
.vision .about-text {
max-width: 800px;
margin: 0 auto;
position: relative;
padding: 2rem;
background-color: white;
border-radius: 8px;
box-shadow: var(--box-shadow);
}
.vision .about-text::before {
content: '';
position: absolute;
top: 15px;
left: 15px;
right: -15px;
bottom: -15px;
border: 3px solid var(--primary-gold);
border-radius: 8px;
z-index: -1;
}
/* Mission Section */
.mission {
background-color: var(--bg-gray);
padding: 5rem 0;
}
.benefits-list {
margin-top: 1rem;
}
.benefits-list li {
margin-bottom: 12px;
display: flex;
align-items: center;
}
.benefits-list i {
color: var(--primary-green);
margin-right: 10px;
font-size: 1.2rem;
}
/* Animation Classes */
.animate-fade-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.animate-fade-in.visible {
opacity: 1;
transform: translateY(0);
}
.animate-card {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.animate-card.visible {
opacity: 1;
transform: translateY(0);
}
/* Responsive Styles */
@media (max-width: 1024px) {
.about-content,
.mission .about-content {
grid-template-columns: 1fr;
gap: 30px;
}
.about-img {
height: 350px;
}
.vision .about-text {
padding: 1.5rem;
}
}
@media (max-width: 768px) {
.about,
.vision,
.mission {
padding: 3rem 0;
}
.about-text h3 {
font-size: 1.5rem;
}
.about-img {
height: 300px;
}
.vision .about-text {
padding: 1rem;
}
.vision .about-text::before {
top: 10px;
left: 10px;
right: -10px;
bottom: -10px;
}
}
@media (max-width: 576px) {
.about-text h3 {
font-size: 1.3rem;
}
.about-text p {
font-size: 0.95rem;
}
.about-img {
height: 250px;
}
.vision .about-text {
padding: 0.8rem;
}
}
/*Terms Page */
/* Existing styles from about-sections.css */
.about {
background-color: var(--bg-gray);
padding: 5rem 0;
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.about-img {
height: 400px;
background-size: cover;
background-position: center;
border-radius: 8px;
box-shadow: var(--box-shadow);
position: relative;
}
.about-img::before {
content: '';
position: absolute;
top: 15px;
left: 15px;
right: -15px;
bottom: -15px;
border: 3px solid var(--primary-gold);
border-radius: 8px;
z-index: -1;
}
.about-text h3 {
color: var(--primary-green);
font-size: 1.8rem;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 10px;
}
.about-text h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: var(--primary-red);
}
.about-text p {
font-size: 1rem;
color: var(--text-dark);
margin-bottom: 1rem;
}
.vision {
background-color: white;
padding: 5rem 0;
}
.vision .about-text {
max-width: 800px;
margin: 0 auto;
position: relative;
padding: 2rem;
background-color: white;
border-radius: 8px;
box-shadow: var(--box-shadow);
}
.vision .about-text::before {
content: '';
position: absolute;
top: 15px;
left: 15px;
right: -15px;
bottom: -15px;
border: 3px solid var(--primary-gold);
border-radius: 8px;
z-index: -1;
}
.mission {
background-color: var(--bg-gray);
padding: 5rem 0;
}
.benefits-list {
margin-top: 1rem;
}
.benefits-list li {
margin-bottom: 12px;
display: flex;
align-items: center;
}
.benefits-list i {
color: var(--primary-green);
margin-right: 10px;
font-size: 1.2rem;
}
.animate-fade-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.animate-fade-in.visible {
opacity: 1;
transform: translateY(0);
}
.animate-card {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.animate-card.visible {
opacity: 1;
transform: translateY(0);
}
/* New styles for Terms Section */
.terms {
background-color: var(--bg-gray);
padding: 5rem 0;
}
.terms-content {
max-width: 800px;
margin: 0 auto;
position: relative;
padding: 2rem;
background-color: white;
border-radius: 8px;
box-shadow: var(--box-shadow);
}
.terms-content::before {
content: '';
position: absolute;
top: 15px;
left: 15px;
right: -15px;
bottom: -15px;
border: 3px solid var(--primary-gold);
border-radius: 8px;
z-index: -1;
}
.terms-content h3 {
color: var(--primary-green);
font-size: 1.8rem;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 10px;
}
.terms-content h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: var(--primary-red);
}
.terms-content p, .terms-content ul {
font-size: 1rem;
color: var(--text-dark);
margin-bottom: 1rem;
}
/* Responsive Styles */
@media (max-width: 1024px) {
.about-content,
.mission .about-content {
grid-template-columns: 1fr;
gap: 30px;
}
.about-img {
height: 350px;
}
.vision .about-text, .terms-content {
padding: 1.5rem;
}
}
@media (max-width: 768px) {
.about,
.vision,
.mission,
.terms {
padding: 3rem 0;
}
.about-text h3, .terms-content h3 {
font-size: 1.5rem;
}
.about-img {
height: 300px;
}
.vision .about-text, .terms-content {
padding: 1rem;
}
.vision .about-text::before, .terms-content::before {
top: 10px;
left: 10px;
right: -10px;
bottom: -10px;
}
}
@media (max-width: 576px) {
.about-text h3, .terms-content h3 {
font-size: 1.3rem;
}
.about-text p, .terms-content p, .terms-content ul {
font-size: 0.95rem;
}
.about-img {
height: 250px;
}
.vision .about-text, .terms-content {
padding: 0.8rem;
}
}
/* Privacy Page */
/* Existing styles for About, Vision, Mission, Terms */
.about {
background-color: var(--bg-gray);
padding: 5rem 0;
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.about-img {
height: 400px;
background-size: cover;
background-position: center;
border-radius: 8px;
box-shadow: var(--box-shadow);
position: relative;
}
.about-img::before {
content: '';
position: absolute;
top: 15px;
left: 15px;
right: -15px;
bottom: -15px;
border: 3px solid var(--primary-gold);
border-radius: 8px;
z-index: -1;
}
.about-text h3 {
color: var(--primary-green);
font-size: 1.8rem;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 10px;
}
.about-text h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: var(--primary-red);
}
.about-text p {
font-size: 1rem;
color: var(--text-dark);
margin-bottom: 1rem;
}
.vision {
background-color: white;
padding: 5rem 0;
}
.vision .about-text {
max-width: 800px;
margin: 0 auto;
position: relative;
padding: 2rem;
background-color: white;
border-radius: 8px;
box-shadow: var(--box-shadow);
}
.vision .about-text::before {
content: '';
position: absolute;
top: 15px;
left: 15px;
right: -15px;
bottom: -15px;
border: 3px solid var(--primary-gold);
border-radius: 8px;
z-index: -1;
}
.mission {
background-color: var(--bg-gray);
padding: 5rem 0;
}
.benefits-list {
margin-top: 1rem;
}
.benefits-list li {
margin-bottom: 12px;
display: flex;
align-items: center;
}
.benefits-list i {
color: var(--primary-green);
margin-right: 10px;
font-size: 1.2rem;
}
.terms {
background-color: var(--bg-gray);
padding: 5rem 0;
}
.terms-content {
max-width: 800px;
margin: 0 auto;
position: relative;
padding: 2rem;
background-color: white;
border-radius: 8px;
box-shadow: var(--box-shadow);
}
.terms-content::before {
content: '';
position: absolute;
top: 15px;
left: 15px;
right: -15px;
bottom: -15px;
border: 3px solid var(--primary-gold);
border-radius: 8px;
z-index: -1;
}
.terms-content h3 {
color: var(--primary-green);
font-size: 1.8rem;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 10px;
}
.terms-content h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: var(--primary-red);
}
.terms-content p, .terms-content ul {
font-size: 1rem;
color: var(--text-dark);
margin-bottom: 1rem;
}
.terms-content a {
color: var(--primary-green);
text-decoration: underline;
}
.terms-content a:hover {
color: var(--primary-red);
}
/* New styles for Privacy Section */
.privacy {
background-color: var(--bg-gray);
padding: 5rem 0;
}
.privacy-content {
max-width: 800px;
margin: 0 auto;
position: relative;
padding: 2rem;
background-color: white;
border-radius: 8px;
box-shadow: var(--box-shadow);
}
.privacy-content::before {
content: '';
position: absolute;
top: 15px;
left: 15px;
right: -15px;
bottom: -15px;
border: 3px solid var(--primary-gold);
border-radius: 8px;
z-index: -1;
}
.privacy-content h3 {
color: var(--primary-green);
font-size: 1.8rem;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 10px;
}
.privacy-content h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: var(--primary-red);
}
.privacy-content p, .privacy-content ul {
font-size: 1rem;
color: var(--text-dark);
margin-bottom: 1rem;
}
.privacy-content a {
color: var(--primary-green);
text-decoration: underline;
}
.privacy-content a:hover {
color: var(--primary-red);
}
/* Responsive Styles */
@media (max-width: 1024px) {
.about-content,
.mission .about-content {
grid-template-columns: 1fr;
gap: 30px;
}
.about-img {
height: 350px;
}
.vision .about-text, .terms-content, .privacy-content {
padding: 1.5rem;
}
}
@media (max-width: 768px) {
.about,
.vision,
.mission,
.terms,
.privacy {
padding: 3rem 0;
}
.about-text h3, .terms-content h3, .privacy-content h3 {
font-size: 1.5rem;
}
.about-img {
height: 300px;
}
.vision .about-text, .terms-content, .privacy-content {
padding: 1rem;
}
.vision .about-text::before, .terms-content::before, .privacy-content::before {
top: 10px;
left: 10px;
right: -10px;
bottom: -10px;
}
}
@media (max-width: 576px) {
.about-text h3, .terms-content h3, .privacy-content h3 {
font-size: 1.3rem;
}
.about-text p, .terms-content p, .terms-content ul, .privacy-content p, .privacy-content ul {
font-size: 0.95rem;
}
.about-img {
height: 250px;
}
.vision .about-text, .terms-content, .privacy-content {
padding: 0.8rem;
}
}
/* Document page */
/* Existing styles for About, Vision, Mission, Terms, Privacy, Documents */
.about {
background-color: var(--bg-gray);
padding: 5rem 0;
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.about-img {
height: 400px;
background-size: cover;
background-position: center;
border-radius: 8px;
box-shadow: var(--box-shadow);
position: relative;
}
.about-img::before {
content: '';
position: absolute;
top: 15px;
left: 15px;
right: -15px;
bottom: -15px;
border: 3px solid var(--primary-gold);
border-radius: 8px;
z-index: -1;
}
.about-text h3 {
color: var(--primary-green);
font-size: 1.8rem;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 10px;
}
.about-text h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: var(--primary-red);
}
.about-text p {
font-size: 1rem;
color: var(--text-dark);
margin-bottom: 1rem;
}
.vision {
background-color: white;
padding: 5rem 0;
}
.vision .about-text {
max-width: 800px;
margin: 0 auto;
position: relative;
padding: 2rem;
background-color: white;
border-radius: 8px;
box-shadow: var(--box-shadow);
}
.vision .about-text::before {
content: '';
position: absolute;
top: 15px;
left: 15px;
right: -15px;
bottom: -15px;
border: 3px solid var(--primary-gold);
border-radius: 8px;
z-index: -1;
}
.mission {
background-color: var(--bg-gray);
padding: 5rem 0;
}
.benefits-list {
margin-top: 1rem;
}
.benefits-list li {
margin-bottom: 12px;
display: flex;
align-items: center;
}
.benefits-list i {
color: var(--primary-green);
margin-right: 10px;
font-size: 1.2rem;
}
.terms {
background-color: var(--bg-gray);
padding: 5rem 0;
}
.terms-content {
max-width: 800px;
margin: 0 auto;
position: relative;
padding: 2rem;
background-color: white;
border-radius: 8px;
box-shadow: var(--box-shadow);
}
.terms-content::before {
content: '';
position: absolute;
top: 15px;
left: 15px;
right: -15px;
bottom: -15px;
border: 3px solid var(--primary-gold);
border-radius: 8px;
z-index: -1;
}
.terms-content h3 {
color: var(--primary-green);
font-size: 1.8rem;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 10px;
}
.terms-content h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: var(--primary-red);
}
.terms-content p, .terms-content ul {
font-size: 1rem;
color: var(--text-dark);
margin-bottom: 1rem;
}
.terms-content a {
color: var(--primary-green);
text-decoration: underline;
}
.terms-content a:hover {
color: var(--primary-red);
}
.privacy {
background-color: var(--bg-gray);
padding: 5rem 0;
}
.privacy-content {
max-width: 800px;
margin: 0 auto;
position: relative;
padding: 2rem;
background-color: white;
border-radius: 8px;
box-shadow: var(--box-shadow);
}
.privacy-content::before {
content: '';
position: absolute;
top: 15px;
left: 15px;
right: -15px;
bottom: -15px;
border: 3px solid var(--primary-gold);
border-radius: 8px;
z-index: -1;
}
.privacy-content h3 {
color: var(--primary-green);
font-size: 1.8rem;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 10px;
}
.privacy-content h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: var(--primary-red);
}
.privacy-content p, .privacy-content ul {
font-size: 1rem;
color: var(--text-dark);
margin-bottom: 1rem;
}
.privacy-content a {
color: var(--primary-green);
text-decoration: underline;
}
.privacy-content a:hover {
color: var(--primary-red);
}
.documents {
background-color: var(--bg-gray);
padding: 5rem 0;
}
.documents-content {
max-width: 800px;
margin: 0 auto;
position: relative;
padding: 2rem;
background-color: white;
border-radius: 8px;
box-shadow: var(--box-shadow);
}
.documents-content::before {
content: '';
position: absolute;
top: 15px;
left: 15px;
right: -15px;
bottom: -15px;
border: 3px solid var(--primary-gold);
border-radius: 8px;
z-index: -1;
}
.documents-content h3 {
color: var(--primary-green);
font-size: 1.8rem;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 10px;
}
.documents-content h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: var(--primary-red);
}
.documents-content h4 {
font-size: 1.2rem;
color: var(--text-dark);
margin-bottom: 0.5rem;
}
.documents-content p, .documents-content ul {
font-size: 1rem;
color: var(--text-dark);
margin-bottom: 1rem;
}
.documents-content a {
color: var(--primary-green);
text-decoration: underline;
}
.documents-content a:hover {
color: var(--primary-red);
}
.document-list {
list-style: none;
padding: 0;
margin: 1.5rem 0;
}
.document-list li {
margin-bottom: 1.5rem;
}
.document-item {
display: flex;
align-items: center;
background-color: #f9f9f9;
padding: 1rem;
border-radius: 6px;
transition: background-color 0.3s ease;
}
.document-item:hover {
background-color: #f1f1f1;
}
.document-item i {
font-size: 2rem;
color: var(--primary-green);
margin-right: 1rem;
}
.document-info {
flex: 1;
}
.document-info p {
font-size: 0.9rem;
color: var(--text-dark);
margin: 0;
}
.download-btn {
display: inline-block; /* Ensure button is visible */
padding: 0.5rem 1rem;
background-color: white; /* Changed to white as requested */
color: var(--text-dark); /* Dark text for readability */
text-decoration: none;
border: 1px solid var(--primary-green); /* Border for contrast */
border-radius: 4px;
transition: background-color 0.3s ease, color 0.3s ease;
}
.download-btn:hover {
background-color: var(--primary-green); /* Green background on hover */
color: white; /* White text on hover */
border-color: var(--primary-green);
}
/* Responsive Styles */
@media (max-width: 1024px) {
.about-content,
.mission .about-content {
grid-template-columns: 1fr;
gap: 30px;
}
.about-img {
height: 350px;
}
.vision .about-text, .terms-content, .privacy-content, .documents-content {
padding: 1.5rem;
}
}
@media (max-width: 768px) {
.about,
.vision,
.mission,
.terms,
.privacy,
.documents {
padding: 3rem 0;
}
.about-text h3, .terms-content h3, .privacy-content h3, .documents-content h3 {
font-size: 1.5rem;
}
.about-img {
height: 300px;
}
.vision .about-text, .terms-content, .privacy-content, .documents-content {
padding: 1rem;
}
.vision .about-text::before, .terms-content::before, .privacy-content::before, .documents-content::before {
top: 10px;
left: 10px;
right: -10px;
bottom: -10px;
}
.document-item {
flex-direction: column;
align-items: flex-start;
}
.document-item i {
margin-bottom: 0.5rem;
}
.download-btn {
margin-top: 0.5rem;
}
}
@media (max-width: 576px) {
.about-text h3, .terms-content h3, .privacy-content h3, .documents-content h3 {
font-size: 1.3rem;
}
.about-text p, .terms-content p, .terms-content ul, .privacy-content p, .privacy-content ul, .documents-content p, .documents-content ul {
font-size: 0.95rem;
}
.about-img {
height: 250px;
}
.vision .about-text, .terms-content, .privacy-content, .documents-content {
padding: 0.8rem;
}
}
/* Contact Page*/
/* ========== CONTACT SECTION ========== */
.contact {
background: linear-gradient(to bottom, var(--bg-gray), #f5f7fa);
padding: 5rem 0;
position: relative;
overflow: hidden;
}
.contact::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 20px 20px;
opacity: 0.3;
z-index: 0;
}
.contact .container {
position: relative;
z-index: 1;
}
.contact-intro {
font-size: 1.2rem;
color: var(--text-dark);
text-align: center;
margin-bottom: 3rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.contact-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 12px;
padding: 2.5rem;
margin-bottom: 2rem;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
.card-title {
color: var(--primary-red);
font-size: 1.8rem;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 10px;
}
.contact-card form {
display: flex;
flex-direction: column;
}
.contact-card .form-group {
position: relative;
margin-bottom: 2rem;
padding: 0;
margin: 0;
min-height: 3rem;
}
.contact-card .form-group input,
.contact-card .form-group textarea {
width: 100%;
padding: 0.5rem 0;
border: none;
border-bottom: 2px solid #ddd;
background: transparent;
font-size: 1rem;
color: var(--text-dark);
box-sizing: border-box;
transition: border-bottom-color 0.3s ease;
position: relative;
z-index: 2;
}
.contact-card .form-group input::placeholder,
.contact-card .form-group textarea::placeholder {
color: transparent;
}
.contact-card .form-group textarea {
resize: vertical;
padding-top: 0.5rem;
}
.contact-card .form-group label {
position: absolute;
top: 0.5rem;
left: 0;
font-size: 1rem;
color: #888;
transition: all 0.3s ease;
pointer-events: none;
border: none;
background: none;
z-index: 1;
}
.contact-card .form-group input:focus,
.contact-card .form-group textarea:focus {
border-bottom-color: var(--primary-green);
outline: none;
}
.contact-card .form-group input:focus + label,
.contact-card .form-group textarea:focus + label,
.contact-card .form-group input:not(:placeholder-shown) + label,
.contact-card .form-group textarea:not(:placeholder-shown) + label {
top: -1rem;
font-size: 0.85rem;
color: var(--primary-green);
}
.contact-card .submit-btn {
display: inline-block;
padding: 0.75rem 2rem;
background: linear-gradient(90deg, var(--primary-green), var(--primary-red));
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
font-size: 1.1rem;
font-weight: 500;
transition: transform 0.3s ease, box-shadow 0.3s ease;
width: 100%;
text-align: center;
box-sizing: border-box;
}
.contact-card .submit-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.contact-card .form-message {
margin-top: 1rem;
font-size: 1rem;
}
.contact-card .form-message .success {
color: var(--primary-green);
}
.contact-card .form-message .error {
color: var(--primary-red);
}
.contact-info-list {
list-style: none;
padding: 0;
}
.contact-info-item {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
transition: transform 0.3s ease;
}
.contact-info-item:hover {
transform: translateX(10px);
}
.contact-info-item i {
font-size: 1.5rem;
color: var(--primary-gold);
margin-right: 1rem;
}
.contact-info-item span {
font-size: 1rem;
color: var(--text-dark);
}
.contact-info-item a {
color: var(--primary-green);
text-decoration: none;
}
.contact-info-item a:hover {
color: var(--primary-red);
text-decoration: underline;
}
/* Faq Page */
/* Existing styles for About, Vision, Mission, Terms, Privacy, Documents */
.about {
background-color: var(--bg-gray);
padding: 5rem 0;
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.about-img {
height: 400px;
background-size: cover;
background-position: center;
border-radius: 8px;
box-shadow: var(--box-shadow);
position: relative;
}
.about-img::before {
content: '';
position: absolute;
top: 15px;
left: 15px;
right: -15px;
bottom: -15px;
border: 3px solid var(--primary-gold);
border-radius: 8px;
z-index: -1;
}
.about-text h3 {
color: var(--primary-green);
font-size: 1.8rem;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 10px;
}
.about-text h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: var(--primary-red);
}
.about-text p {
font-size: 1rem;
color: var(--text-dark);
margin-bottom: 1rem;
}
.vision {
background-color: white;
padding: 5rem 0;
}
.vision .about-text {
max-width: 800px;
margin: 0 auto;
position: relative;
padding: 2rem;
background-color: white;
border-radius: 8px;
box-shadow: var(--box-shadow);
}
.vision .about-text::before {
content: '';
position: absolute;
top: 15px;
left: 15px;
right: -15px;
bottom: -15px;
border: 3px solid var(--primary-gold);
border-radius: 8px;
z-index: -1;
}
.mission {
background-color: var(--bg-gray);
padding: 5rem 0;
}
.benefits-list {
margin-top: 1rem;
}
.benefits-list li {
margin-bottom: 12px;
display: flex;
align-items: center;
}
.benefits-list i {
color: var(--primary-green);
margin-right: 10px;
font-size: 1.2rem;
}
.terms {
background-color: var(--bg-gray);
padding: 5rem 0;
}
.terms-content {
max-width: 800px;
margin: 0 auto;
position: relative;
padding: 2rem;
background-color: white;
border-radius: 8px;
box-shadow: var(--box-shadow);
}
.terms-content::before {
content: '';
position: absolute;
top: 15px;
left: 15px;
right: -15px;
bottom: -15px;
border: 3px solid var(--primary-gold);
border-radius: 8px;
z-index: -1;
}
.terms-content h3 {
color: var(--primary-green);
font-size: 1.8rem;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 10px;
}
.terms-content h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: var(--primary-red);
}
.terms-content p, .terms-content ul {
font-size: 1rem;
color: var(--text-dark);
margin-bottom: 1rem;
}
.terms-content a {
color: var(--primary-green);
text-decoration: underline;
}
.terms-content a:hover {
color: var(--primary-red);
}
.privacy {
background-color: var(--bg-gray);
padding: 5rem 0;
}
.privacy-content {
max-width: 800px;
margin: 0 auto;
position: relative;
padding: 2rem;
background-color: white;
border-radius: 8px;
box-shadow: var(--box-shadow);
}
.privacy-content::before {
content: '';
position: absolute;
top: 15px;
left: 15px;
right: -15px;
bottom: -15px;
border: 3px solid var(--primary-gold);
border-radius: 8px;
z-index: -1;
}
.privacy-content h3 {
color: var(--primary-green);
font-size: 1.8rem;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 10px;
}
.privacy-content h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: var(--primary-red);
}
.privacy-content p, .privacy-content ul {
font-size: 1rem;
color: var(--text-dark);
margin-bottom: 1rem;
}
.privacy-content a {
color: var(--primary-green);
text-decoration: underline;
}
.privacy-content a:hover {
color: var(--primary-red);
}
.documents {
background-color: var(--bg-gray);
padding: 5rem 0;
}
.documents-content {
max-width: 800px;
margin: 0 auto;
position: relative;
padding: 2rem;
background-color: white;
border-radius: 8px;
box-shadow: var(--box-shadow);
}
.documents-content::before {
content: '';
position: absolute;
top: 15px;
left: 15px;
right: -15px;
bottom: -15px;
border: 3px solid var(--primary-gold);
border-radius: 8px;
z-index: -1;
}
.documents-content h3 {
color: var(--primary-green);
font-size: 1.8rem;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 10px;
}
.documents-content h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: var(--primary-red);
}
.documents-content h4 {
font-size: 1.2rem;
color: var(--text-dark);
margin-bottom: 0.5rem;
}
.documents-content p, .documents-content ul {
font-size: 1rem;
color: var(--text-dark);
margin-bottom: 1rem;
}
.documents-content a {
color: var(--primary-green);
text-decoration: underline;
}
.documents-content a:hover {
color: var(--primary-red);
}
.document-list {
list-style: none;
padding: 0;
margin: 1.5rem 0;
}
.document-list li {
margin-bottom: 1.5rem;
}
.document-item {
display: flex;
align-items: center;
background-color: #f9f9f9;
padding: 1rem;
border-radius: 6px;
transition: background-color 0.3s ease;
}
.document-item:hover {
background-color: #f1f1f1;
}
.document-item i {
font-size: 2rem;
color: var(--primary-green);
margin-right: 1rem;
}
.document-info {
flex: 1;
}
.document-info p {
font-size: 0.9rem;
color: var(--text-dark);
margin: 0;
}
.download-btn {
display: inline-block;
padding: 0.5rem 1rem;
background-color: white;
color: var(--text-dark);
text-decoration: none;
border: 1px solid var(--primary-green);
border-radius: 4px;
transition: background-color 0.3s ease, color 0.3s ease;
}
.download-btn:hover {
background-color: var(--primary-green);
color: white;
border-color: var(--primary-green);
}
/* ========== CONTACT SECTION ========== */
.contact {
background: linear-gradient(to bottom, var(--bg-gray), #f5f7fa);
padding: 5rem 0;
position: relative;
overflow: hidden;
}
.contact::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 20px 20px;
opacity: 0.3;
z-index: 0;
}
.contact .container {
position: relative;
z-index: 1;
}
.contact-intro {
font-size: 1.2rem;
color: var(--text-dark);
text-align: center;
margin-bottom: 3rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.contact-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 12px;
padding: 2.5rem;
margin-bottom: 2rem;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
.card-title {
color: var(--primary-red);
font-size: 1.8rem;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 10px;
}
.contact-card form {
display: flex;
flex-direction: column;
}
.contact-card .form-group {
position: relative;
margin-bottom: 2rem;
padding: 0;
margin: 0;
min-height: 3rem;
}
.contact-card .form-group input,
.contact-card .form-group textarea {
width: 100%;
padding: 0.5rem 0;
border: none;
border-bottom: 2px solid #ddd;
background: transparent;
font-size: 1rem;
color: var(--text-dark);
box-sizing: border-box;
transition: border-bottom-color 0.3s ease;
position: relative;
z-index: 2;
}
.contact-card .form-group input::placeholder,
.contact-card .form-group textarea::placeholder {
color: transparent;
}
.contact-card .form-group textarea {
resize: vertical;
padding-top: 0.5rem;
}
.contact-card .form-group label {
position: absolute;
top: 0.5rem;
left: 0;
font-size: 1rem;
color: #888;
transition: all 0.3s ease;
pointer-events: none;
border: none;
background: none;
z-index: 1;
}
.contact-card .form-group input:focus,
.contact-card .form-group textarea:focus {
border-bottom-color: var(--primary-green);
outline: none;
}
.contact-card .form-group input:focus + label,
.contact-card .form-group textarea:focus + label,
.contact-card .form-group input:not(:placeholder-shown) + label,
.contact-card .form-group textarea:not(:placeholder-shown) + label {
top: -1rem;
font-size: 0.85rem;
color: var(--primary-green);
}
.contact-card .submit-btn {
display: inline-block;
padding: 0.75rem 2rem;
background: linear-gradient(90deg, var(--primary-green), var(--primary-red));
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
font-size: 1.1rem;
font-weight: 500;
transition: transform 0.3s ease, box-shadow 0.3s ease;
width: 100%;
text-align: center;
box-sizing: border-box;
}
.contact-card .submit-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.contact-card .form-message {
margin-top: 1rem;
font-size: 1rem;
}
.contact-card .form-message .success {
color: var(--primary-green);
}
.contact-card .form-message .error {
color: var(--primary-red);
}
.contact-info-list {
list-style: none;
padding: 0;
}
.contact-info-item {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
transition: transform 0.3s ease;
}
.contact-info-item:hover {
transform: translateX(10px);
}
.contact-info-item i {
font-size: 1.5rem;
color: var(--primary-gold);
margin-right: 1rem;
}
.contact-info-item span {
font-size: 1rem;
color: var(--text-dark);
}
.contact-info-item a {
color: var(--primary-green);
text-decoration: none;
}
.contact-info-item a:hover {
color: var(--primary-red);
text-decoration: underline;
}
/* FAQ Section */
.faq {
background: linear-gradient(to bottom, var(--bg-gray), #f5f7fa);
padding: 5rem 0;
position: relative;
overflow: hidden;
}
.faq::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 20px 20px;
opacity: 0.3;
z-index: 0;
}
.faq .container {
position: relative;
z-index: 1;
}
.faq-intro {
font-size: 1.2rem;
color: var(--text-dark);
text-align: center;
margin-bottom: 3rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.faq-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 12px;
padding: 2.5rem;
margin-bottom: 2rem;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.faq-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
.faq-list {
margin-top: 1rem;
}
.faq-item {
border-bottom: 1px solid #ddd;
margin-bottom: 0.5rem;
}
.faq-question {
width: 100%;
text-align: left;
background: none;
border: none;
padding: 1rem 0;
font-size: 1.1rem;
color: var(--text-dark);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: color 0.3s ease;
}
.faq-question:hover {
color: var(--primary-green);
}
.faq-icon i {
transition: transform 0.3s ease;
}
.faq-item.active .faq-icon i {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding: 0 1rem;
}
.faq-answer p {
margin: 1rem 0;
color: var(--text-dark);
font-size: 1rem;
}
/* New Animation */
.animate-scale {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.animate-scale.visible {
opacity: 1;
transform: scale(1);
}
/* Responsive Styles */
@media (max-width: 1024px) {
.about-content,
.mission .about-content {
grid-template-columns: 1fr;
gap: 30px;
}
.about-img {
height: 350px;
}
.vision .about-text, .terms-content, .privacy-content, .documents-content {
padding: 1.5rem;
}
}
@media (max-width: 768px) {
.about,
.vision,
.mission,
.terms,
.privacy,
.documents,
.contact,
.faq {
padding: 3rem 0;
}
.about-text h3, .terms-content h3, .privacy-content h3, .documents-content h3, .card-title {
font-size: 1.5rem;
}
.about-img {
height: 300px;
}
.vision .about-text, .terms-content, .privacy-content, .documents-content {
padding: 1rem;
}
.vision .about-text::before, .terms-content::before, .privacy-content::before, .documents-content::before {
top: 10px;
left: 10px;
right: -10px;
bottom: -10px;
}
.document-item {
flex-direction: column;
align-items: flex-start;
}
.document-item i {
margin-bottom: 0.5rem;
}
.download-btn {
margin-top: 0.5rem;
}
.contact-card,
.faq-card {
padding: 1.5rem;
}
.faq-question {
font-size: 1rem;
}
}
@media (max-width: 576px) {
.about-text h3, .terms-content h3, .privacy-content h3, .documents-content h3, .card-title {
font-size: 1.3rem;
}
.about-text p, .terms-content p, .terms-content ul, .privacy-content p, .privacy-content ul, .documents-content p, .documents-content ul, .contact-intro, .contact-info-item span, .faq-intro, .faq-answer p {
font-size: 0.95rem;
}
.about-img {
height: 250px;
}
.vision .about-text, .terms-content, .privacy-content, .documents-content {
padding: 0.8rem;
}
.contact-card,
.faq-card {
padding: 1rem;
}
.faq-question {
font-size: 0.95rem;
}
}
/* code of the national office new */
/* Root variables for new luxurious theming */
:root {
--primary-color: #1c2526; /* Charcoal for sophistication */
--secondary-color: #3e1f47; /* Plum for richness */
--gold-accent: #ffd700; /* Vibrant gold for luxury */
--background-color: #fefaf6; /* Cream for warmth */
--text-color: #2d2d2d; /* Dark text for clarity */
--shadow-color: rgba(0, 0, 0, 0.3);
--transition-speed: 0.3s;
--glow-color: rgba(255, 215, 0, 0.4);
}
/* Department card styling with refined sizing */
.department-card {
background: radial-gradient(circle, #ffffff, #fefaf6);
border-radius: 18px;
padding: 2.5rem;
box-shadow: 0 10px 20px var(--shadow-color), 0 3px 6px rgba(0, 0, 0, 0.1);
border: 2px solid transparent;
background-image: linear-gradient(white, white), linear-gradient(45deg, var(--gold-accent), var(--primary-color));
background-origin: border-box;
background-clip: content-box, border-box;
transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease;
position: relative;
overflow: hidden;
min-height: 320px;
}
.department-card:hover {
transform: translateY(-10px) scale(1.03);
box-shadow: 0 14px 28px var(--shadow-color), 0 5px 10px rgba(0, 0, 0, 0.15);
border-color: var(--gold-accent);
animation: bounceLuxury 0.4s ease;
}
@keyframes bounceLuxury {
0%, 100% { transform: translateY(-10px) scale(1.03); }
50% { transform: translateY(-12px) scale(1.04); }
}
.department-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, var(--gold-accent), var(--primary-color));
opacity: 0;
transition: opacity var(--transition-speed) ease;
}
.department-card:hover::before {
opacity: 1;
}
.department-card h3 {
color: var(--primary-color);
font-family: 'Poppins', sans-serif;
font-size: 2.1rem;
font-weight: 700;
margin-bottom: 1.5rem;
letter-spacing: 0.05em;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
transition: transform var(--transition-speed) ease;
}
.department-card:hover h3 {
transform: translateY(-3px);
}
.department-card p {
color: var(--text-color);
font-family: 'Poppins', sans-serif;
font-size: 1.15rem;
line-height: 1.7;
margin-bottom: 2rem;
}
/* Toggle chart button with shimmering gold effect */
.toggle-chart-btn {
background: var(--primary-color);
color: #ffffff;
padding: 1rem 2.25rem;
border-radius: 12px;
border: 1px solid var(--gold-accent);
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
transition: background var(--transition-speed) ease, transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease;
display: inline-flex;
align-items: center;
gap: 0.75rem;
position: relative;
overflow: hidden;
}
.toggle-chart-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(90deg, transparent, var(--gold-accent), transparent);
transition: left 0.5s ease;
}
.toggle-chart-btn:hover::before {
left: 100%;
}
.toggle-chart-btn::after {
content: '\f078'; /* Font Awesome chevron-down */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 0.9rem;
transition: transform var(--transition-speed) ease;
}
.toggle-chart-btn:hover {
background: var(--secondary-color);
border-color: var(--gold-accent);
transform: scale(1.1);
box-shadow: 0 6px 12px var(--shadow-color);
}
.toggle-chart-btn:focus {
outline: none;
box-shadow: 0 0 0 4px var(--glow-color);
}
.toggle-chart-btn.active::after {
transform: rotate(180deg);
}
/* Org chart container with simplified toggle and zoom-in animation */
.org-chart-container {
display: none;
margin-top: 2rem;
padding: 2rem;
background: radial-gradient(circle, var(--background-color), #f5f5f5);
border-radius: 16px;
border: 1px solid var(--gold-accent);
box-shadow: 0 6px 12px var(--shadow-color);
}
.org-chart-container.active {
display: block;
animation: zoomInLuxury 0.6s ease-in-out;
}
/* Zoom-in animation for org chart */
@keyframes zoomInLuxury {
0% {
opacity: 0;
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* Org chart node with gold accents and subtle bounce */
.org-node {
padding: 14px;
text-align: center;
background: linear-gradient(145deg, #ffffff, #fefaf6);
border: 2px solid var(--gold-accent);
border-radius: 10px;
min-width: 200px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 4px 8px var(--shadow-color);
transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, background var(--transition-speed) ease;
}
.org-node:hover {
transform: scale(1.08) translateY(-2px);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 8px 16px var(--shadow-color);
background: linear-gradient(145deg, #fefaf6, #ffffff);
}
.org-node .name {
font-family: 'Poppins', sans-serif;
font-weight: 700;
color: var(--primary-color);
font-size: 1.1rem;
margin-bottom: 0.3rem;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
transition: transform var(--transition-speed) ease;
}
.org-node:hover .name {
transform: translateY(-1px);
}
.org-node .position {
font-family: 'Poppins', sans-serif;
font-size: 0.9rem;
color: #455a64;
font-style: italic;
}
/* Google Org Chart connector lines with gold styling */
.google-visualization-orgchart-linebottom,
.google-visualization-orgchart-lineright,
.google-visualization-orgchart-lineleft {
border-color: var(--gold-accent) !important;
border-width: 2px !important;
}
/* Responsive adjustments for luxury design */
@media (max-width: 768px) {
.department-card {
padding: 2rem;
border-radius: 14px;
min-height: 280px;
}
.department-card h3 {
font-size: 1.9rem;
}
.department-card p {
font-size: 1.05rem;
}
.toggle-chart-btn {
width: 100%;
padding: 0.9rem;
font-size: 0.95rem;
}
.org-chart-container {
padding: 1.5rem;
}
.org-node {
min-width: 180px;
padding: 12px;
}
.org-node .name {
font-size: 1rem;
}
.org-node .position {
font-size: 0.85rem;
}
}
@media (max-width: 480px) {
.department-card {
padding: 1.5rem;
border-radius: 12px;
min-height: 260px;
}
.toggle-chart-btn {
padding: 0.8rem;
font-size: 0.9rem;
}
.org-node {
min-width: 160px;
padding: 10px;
}
}
/* international office page */
/* International Office Styling */
/* Root variables for luxurious theming (aligned with website palette) */
:root {
--primary-color: #0f1c33; /* Rich navy for depth */
--secondary-color: #5e1e2a; /* Deep burgundy for warmth */
--gold-accent: #e6b800; /* Bright gold for opulence */
--background-color: #f9ece6; /* Soft ivory for elegance */
--text-color: #1a2426; /* Charcoal for clarity */
--shadow-color: rgba(0, 0, 0, 0.25);
--transition-speed: 0.3s;
--glow-color: rgba(230, 184, 0, 0.4);
}
/* International office section styling */
.international-office {
background: var(--background-color);
padding: 4rem 0;
font-family: 'Poppins', sans-serif;
}
/* General Administration Section */
.general-administration {
background: #ffffff;
border-radius: 12px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 8px 16px var(--shadow-color);
transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.general-administration:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px var(--shadow-color);
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
.team-card {
text-align: center;
padding: 1rem;
background: var(--background-color);
border-radius: 8px;
border: 1px solid var(--gold-accent);
transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.team-card:hover {
transform: scale(1.05);
box-shadow: 0 4px 8px var(--shadow-color);
}
.team-img {
width: 100%;
height: 300px;
background-size: cover;
background-position: center;
border-radius: 8px;
margin-bottom: 1rem;
}
.team-card h4 {
font-size: 1.2rem;
font-weight: 600;
color: var(--primary-color);
margin-bottom: 0.5rem;
}
.team-card p {
font-size: 0.9rem;
color: var(--text-color);
font-style: italic;
}
/* Directorate accordion section */
.directorate-section {
background: #ffffff;
border-radius: 12px;
margin-bottom: 1.5rem;
box-shadow: 0 8px 16px var(--shadow-color);
overflow: hidden;
transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.directorate-section:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px var(--shadow-color);
}
.directorate-header {
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
color: #ffffff;
padding: 1.5rem;
font-family: 'Poppins', sans-serif;
font-size: 1.8rem;
font-weight: 600;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.directorate-header::after {
content: '\f078'; /* Font Awesome chevron-down */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 1rem;
transition: transform var(--transition-speed) ease;
}
.directorate-header.active::after {
transform: rotate(180deg);
}
.directorate-header:hover::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(90deg, transparent, var(--gold-accent), transparent);
transition: left 0.5s ease;
left: 100%;
}
/* Country list styling */
.country-list {
display: none;
padding: 1.5rem;
background: var(--background-color);
border-top: 1px solid var(--gold-accent);
}
.country-list.active {
display: block;
animation: slideDown 0.4s ease-in-out;
}
@keyframes slideDown {
0% { opacity: 0; transform: translateY(-10px); }
100% { opacity: 1; transform: translateY(0); }
}
.country-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
.country-item {
background: #ffffff;
border-radius: 8px;
padding: 1rem;
text-align: center;
cursor: pointer;
border: 1px solid var(--primary-color);
transition: transform var(--transition-speed) ease, border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.country-item:hover {
transform: scale(1.05);
border-color: var(--gold-accent);
box-shadow: 0 4px 8px var(--shadow-color);
}
.country-item a {
font-family: 'Poppins', sans-serif;
font-size: 1rem;
font-weight: 500;
color: var(--text-color);
text-decoration: none;
}
.country-item a:hover {
color: var(--gold-accent);
}
/* Org chart container */
.org-chart-container {
display: none;
margin-top: 1rem;
padding: 1.5rem;
background: #ffffff;
border-radius: 10px;
border: 1px solid var(--gold-accent);
box-shadow: 0 4px 8px var(--shadow-color);
}
.org-chart-container.active {
display: block;
animation: fadeInChart 0.5s ease-in-out;
}
@keyframes fadeInChart {
0% { opacity: 0; transform: scale(0.95); }
100% { opacity: 1; transform: scale(1); }
}
/* Org chart node styling */
.org-node {
padding: 10px;
text-align: center;
background: linear-gradient(145deg, #ffffff, var(--background-color));
border: 1px solid var(--gold-accent);
border-radius: 6px;
min-width: 120px;
box-shadow: 0 2px 4px var(--shadow-color);
transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.org-node:hover {
transform: scale(1.1);
box-shadow: 0 4px 8px var(--shadow-color);
}
.org-node .name {
font-family: 'Poppins', sans-serif;
font-weight: 600;
color: var(--primary-color);
font-size: 0.9rem;
}
.org-node .position {
font-family: 'Poppins', sans-serif;
font-size: 0.8rem;
color: #4a4a4a;
font-style: italic;
}
/* Google Org Chart connector lines */
.google-visualization-orgchart-linebottom,
.google-visualization-orgchart-lineright,
.google-visualization-orgchart-lineleft {
border-color: var(--gold-accent) !important;
border-width: 1px !important;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.international-office {
padding: 2rem 0;
}
.general-administration {
padding: 1.5rem;
}
.team-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.team-img {
height: 150px;
}
.team-card h4 {
font-size: 1rem;
}
.team-card p {
font-size: 0.85rem;
}
.directorate-header {
font-size: 1.5rem;
padding: 1.25rem;
}
.country-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.country-item {
padding: 0.75rem;
}
.org-node {
min-width: 100px;
padding: 8px;
}
.org-node .name {
font-size: 0.85rem;
}
.org-node .position {
font-size: 0.75rem;
}
}
@media (max-width: 480px) {
.general-administration {
padding: 1rem;
}
.team-grid {
grid-template-columns: 1fr;
}
.team-img {
height: 300px;
}
.directorate-header {
font-size: 1.3rem;
padding: 1rem;
}
.country-grid {
grid-template-columns: 1fr;
}
.country-item {
padding: 0.5rem;
}
}