:root {
--primary: #1a3f83;
/* Deep Navy Blue */
--accent: #ffca05;
/* Yellow accent color */
--light: #ffffff;
/* White */
--dark: #00122e;
/* Darker navy for contrast */
--secondary: #194486;
/* Lighter navy for elements */
--text: #333333;
/* Dark Gray for text */
--transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
}
/* Add this to your existing CSS (in the head section of your HTML file) */
html {
scroll-behavior: smooth !important;
}
/* For Safari and some mobile browsers that don't support scroll-behavior */
body {
-webkit-overflow-scrolling: touch !important;
}
/* Global Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
background-color: var(--primary);
color: var(--light);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
.btn-custom {
background: var(--accent);
color: var(--primary);
padding: 14px 36px;
border-radius: 30px;
font-weight: 700;
position: relative;
overflow: hidden;
z-index: 1;
border: none;
text-transform: uppercase;
text-decoration: none !important;
font-size: 14px;
letter-spacing: 2px;
transition: var(--transition);
box-shadow: 0 10px 30px rgba(255, 219, 29, 0.3);
}
.btn-custom::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: var(--light);
z-index: -1;
transition: 0.5s var(--ease-out-expo);
border-radius: 30px;
}
.btn-custom:hover {
color: var(--primary);
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(255, 219, 29, 0.5);
}
.btn-custom:hover::before {
width: 100%;
}
/* Header Styles */
.header {
position: fixed;
width: 100%;
z-index: 1000;
padding: 15px 0;
transition: all 0.4s ease;
background-color: transparent;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo-container {
position: relative;
z-index: 10;
}
.logo {
height: 50px;
transition: var(--transition);
}
/* New Mobile Navigation Design */
.mobile-menu-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
display: none;
justify-content: center;
align-items: center;
cursor: pointer;
position: relative;
z-index: 100;
transition: var(--transition);
}
.mobile-menu-btn:hover {
background: rgba(255, 255, 255, 0.2);
}
.mobile-menu-icon {
position: relative;
width: 20px;
height: 2px;
background-color: var(--accent);
transition: var(--transition);
}
.mobile-menu-icon::before,
.mobile-menu-icon::after {
content: '';
position: absolute;
width: 20px;
height: 2px;
background-color: var(--accent);
transition: var(--transition);
}
.mobile-menu-icon::before {
transform: translateY(-8px);
}
.mobile-menu-icon::after {
transform: translateY(8px);
}
.mobile-menu-btn.active .mobile-menu-icon {
background-color: transparent;
}
.mobile-menu-btn.active .mobile-menu-icon::before {
transform: translateY(0) rotate(45deg);
}
.mobile-menu-btn.active .mobile-menu-icon::after {
transform: translateY(0) rotate(-45deg);
}
.nav-container {
display: flex;
align-items: center;
}
.nav-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav-item {
margin: 0 20px;
position: relative;
}
.nav-link {
font-size: 14px;
/* Reduced from 16px */
font-weight: 500;
padding: 8px 0;
text-transform: uppercase;
letter-spacing: 1px;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--accent);
transition: var(--transition);
}
.nav-link:hover,
.nav-link.active {
color: var(--accent);
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
.nav-button {
margin-left: 30px;
}
.nav-button .btn-custom {
padding: 8px 20px;
/* Reduced from 10px 24px */
font-size: 13px;
/* Reduced from 14px */
text-decoration: none !important;
/* Remove underline */
border-bottom: none !important;
position: relative;
overflow: hidden;
}
/* Scrolled Header */
.header.scrolled {
background-color: var(--dark);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
padding: 10px 0;
}
.header.scrolled .logo {
height: 50px;
}
.mobile-menu {
position: fixed;
top: 0;
right: -100%;
width: 100%;
height: 100vh;
background: rgba(26, 63, 131, 0.95);
/* Changed to match --primary color with transparency */
backdrop-filter: blur(10px);
z-index: 99;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: 0.5s var(--ease-out-expo);
opacity: 0;
}
.mobile-menu.active {
right: 0;
opacity: 1;
}
.mobile-nav-menu {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}
.mobile-nav-item {
margin: 15px 0;
opacity: 0;
transform: translateY(20px);
transition: 0.5s var(--ease-out-expo);
}
.mobile-menu.active .mobile-nav-item {
opacity: 1;
transform: translateY(0);
}
.mobile-menu.active .mobile-nav-item:nth-child(1) {
transition-delay: 0.1s;
}
.mobile-menu.active .mobile-nav-item:nth-child(2) {
transition-delay: 0.2s;
}
.mobile-menu.active .mobile-nav-item:nth-child(3) {
transition-delay: 0.3s;
}
.mobile-menu.active .mobile-nav-item:nth-child(4) {
transition-delay: 0.4s;
}
.mobile-menu.active .mobile-nav-item:nth-child(5) {
transition-delay: 0.5s;
}
.mobile-nav-link {
color: var(--light);
text-decoration: none;
font-size: 14px;
/* Reduced from 16px */
font-weight: 600;
display: inline-block;
padding: 6px 15px;
/* Reduced padding */
position: relative;
text-transform: uppercase;
letter-spacing: 1.5px;
/* Slightly reduced letter spacing */
transition: var(--transition);
}
.mobile-nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background: var(--accent);
bottom: 0;
left: 50%;
transform: translateX(-50%);
transition: 0.3s var(--ease-out-expo);
}
.mobile-nav-link.active,
.mobile-nav-link:hover {
color: var(--accent);
}
.mobile-nav-link.active::after,
.mobile-nav-link:hover::after {
width: 60%;
}
.mobile-nav-button {
margin-top: 30px;
opacity: 0;
transform: translateY(20px);
text-decoration: none !important;
transition: 0.5s var(--ease-out-expo);
}
.mobile-menu.active .mobile-nav-button {
opacity: 1;
transform: translateY(0);
text-decoration: none !important;
border-bottom: none !important;
transition-delay: 0.6s;
}
.mobile-nav-social {
margin-top: 50px;
display: flex;
justify-content: center;
opacity: 0;
transform: translateY(20px);
transition: 0.5s var(--ease-out-expo);
}
.mobile-menu.active .mobile-nav-social {
opacity: 1;
transform: translateY(0);
transition-delay: 0.7s;
}
.mobile-social-icon {
width: 45px;
height: 45px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin: 0 10px;
color: var(--light);
font-size: 18px;
transition: var(--transition);
text-decoration: none;
}
.mobile-social-icon:hover {
background: var(--accent);
color: var(--primary);
transform: translateY(-5px);
}
/* Complete Hero Section CSS with corrections for laptop screens */
/* Complete Hero Section CSS */
/* Hero Section - Base Styles */
.hero {
position: relative;
height: 100vh !important;
/* Full viewport height */
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
background-color: #001b54;
/* Exact color match from image */
z-index: 1;
padding-top: 0;
padding-bottom: 0;
}
/* Canvas Background & Particle Effects */
#particles-js {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(0, 46, 138, 0.8) 0%, rgba(0, 28, 84, 0.95) 100%);
z-index: 2;
}
/* 3D Grid Background */
.grid-background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image:
linear-gradient(rgba(0, 28, 84, 0.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 28, 84, 0.3) 1px, transparent 1px);
background-size: 50px 50px;
perspective: 1000px;
transform-style: preserve-3d;
transform: rotateX(60deg) scale(2.5);
opacity: 0.15;
z-index: 1;
}
/* Hero Content */
.hero-container {
position: relative;
z-index: 10;
display: flex;
align-items: center;
height: 100%;
}
.hero-content {
position: relative;
z-index: 3;
max-width: 550px;
padding: 0 20px 0 30px;
}
/* Logo styling */
.hero-logo {
margin-bottom: 15px;
transform: translateY(30px);
opacity: 0;
animation: fadeInUp 0.8s forwards 0.1s;
}
.logo-img {
height: 60px;
width: auto;
}
.hero-date {
font-size: 14px;
color: var(--accent);
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 15px;
display: inline-block;
background: rgba(0, 0, 0, 0.2);
padding: 8px 20px;
border-left: 4px solid var(--accent);
position: relative;
overflow: hidden;
transform: translateY(30px);
opacity: 0;
animation: fadeInUp 0.8s forwards 0.2s;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(5px);
border-radius: 0 4px 4px 0;
}
.hero-date::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(255, 219, 29, 0.1), transparent);
z-index: -1;
}
.hero-date::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 219, 29, 0.2), transparent);
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200%);
}
}
.hero-title-wrapper {
position: relative;
margin-bottom: 10px;
transform: translateY(30px);
opacity: 0;
animation: fadeInUp 0.8s forwards 0.4s;
perspective: 1000px;
}
.hero-title {
font-size: 50px;
line-height: 1.1;
color: #ffffff;
font-weight: 800;
text-transform: uppercase;
position: relative;
margin-bottom: 0;
text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
letter-spacing: -1px;
}
.hero-title .connect {
color: #ffcb05;
/* Yellow color from image */
display: inline-block;
position: relative;
overflow: hidden;
}
.hero-title .connect::before {
content: '';
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
height: 8px;
background-color: #ffcb05;
opacity: 0.3;
transform: skewX(-20deg);
}
.hero-subtitle {
font-size: 20px;
color: #ffffff;
margin-bottom: 25px;
font-weight: 300;
transform: translateY(30px);
opacity: 0;
animation: fadeInUp 0.8s forwards 0.6s;
letter-spacing: 1px;
}
/* 3D Glowing Effect */
.glow-effect {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: radial-gradient(circle at 50% 50%,
rgba(0, 46, 138, 0.5) 0%,
transparent 70%);
filter: blur(60px);
z-index: 0;
opacity: 0.8;
animation: pulseGlow 8s ease-in-out infinite;
}
@keyframes pulseGlow {
0%,
100% {
opacity: 0.5;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.2);
}
}
/* Enhanced Button */
.hero-buttons {
display: flex;
align-items: center;
transform: translateY(30px);
opacity: 0;
animation: fadeInUp 0.8s forwards 1s;
}
.hero-btn {
background: #ffcb05;
/* Yellow color from image */
color: #001b54;
/* Dark blue color */
font-weight: 700;
padding: 12px 28px;
border-radius: 50px;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 2px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
z-index: 1;
box-shadow: 0 15px 30px rgba(255, 203, 5, 0.3);
transition: all 0.4s ease;
}
.hero-btn i {
margin-left: 10px;
transition: transform 0.3s ease;
}
.hero-btn:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(255, 203, 5, 0.4);
color: #001b54;
text-decoration: none;
}
.hero-btn:hover i {
transform: translateX(5px);
}
/* Animated Decoration Elements */
.decoration-element {
position: absolute;
z-index: 2;
border-radius: 50%;
background: #ffcb05;
/* Yellow color from image */
opacity: 0.1;
filter: blur(20px);
}
.element-1 {
width: 300px;
height: 300px;
top: -100px;
right: -100px;
animation: float1 10s infinite ease-in-out;
}
.element-2 {
width: 200px;
height: 200px;
bottom: -50px;
left: -50px;
animation: float2 15s infinite ease-in-out;
}
.element-3 {
width: 150px;
height: 150px;
top: 30%;
left: 10%;
animation: float3 12s infinite ease-in-out;
}
@keyframes float1 {
0%,
100% {
transform: translate(0, 0);
}
50% {
transform: translate(-30px, 30px);
}
}
@keyframes float2 {
0%,
100% {
transform: translate(0, 0);
}
50% {
transform: translate(40px, -20px);
}
}
@keyframes float3 {
0%,
100% {
transform: translate(0, 0);
}
50% {
transform: translate(20px, 40px);
}
}
/* Geometric Shapes */
.accent-shape {
position: absolute;
z-index: 2;
background-color: #ffcb05;
/* Yellow color from image */
opacity: 0.7;
}
.accent-1 {
top: 15%;
right: 10%;
width: 60px;
height: 60px;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
transform: rotate(15deg);
animation: float 8s ease-in-out infinite;
}
.accent-2 {
bottom: 20%;
right: 20%;
width: 40px;
height: 40px;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
transform: rotate(-25deg);
animation: float 10s ease-in-out infinite reverse;
}
.accent-3 {
top: 25%;
left: 15%;
width: 50px;
height: 50px;
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
transform: rotate(45deg);
animation: float 9s ease-in-out infinite;
}
.accent-4 {
bottom: 30%;
left: 10%;
width: 35px;
height: 35px;
border-radius: 8px;
transform: rotate(30deg);
animation: float 7s ease-in-out infinite reverse;
}
@keyframes float {
0%,
100% {
transform: translate(0, 0) rotate(15deg);
}
50% {
transform: translate(15px, -15px) rotate(30deg);
}
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Hero image styles - New addition */
.hero-image-wrapper {
position: relative;
z-index: 5;
display: flex;
justify-content: flex-end;
align-items: center;
height: 100%;
padding: 0;
animation: fadeIn 1s forwards 0.8s;
opacity: 0;
max-width: 550px;
margin-left: auto;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
transform: perspective(1000px) rotateY(-5deg);
transition: all 0.4s ease;
}
.hero-image-wrapper:hover {
transform: perspective(1000px) rotateY(0deg);
}
.hero-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
transition: transform 0.6s ease;
}
.hero-image-wrapper:hover .hero-image {
transform: scale(1.05);
}
.image-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: linear-gradient(to top, rgba(0, 27, 84, 0.9), transparent);
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0 0 12px 12px;
}
.overlay-text {
text-align: center;
color: white;
}
.attendees-count {
display: block;
font-size: 32px;
font-weight: 800;
color: #ffcb05;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
margin-bottom: 5px;
}
.attendees-label {
display: block;
font-size: 14px;
font-weight: 600;
letter-spacing: 2px;
}
/* Responsive styles */
@media (min-width: 2749px) {
.hero-title {
font-size: 70px !important;
}
.hero-image-wrapper {
max-width: 600px;
}
}
@media (min-width: 1800px) {
.hero-title {
font-size: 55px !important;
}
.hero-image-wrapper {
max-width: 580px;
}
}
/* Laptop screens */
@media (min-width: 992px) and (max-width: 1366px) {
.hero-title {
font-size: 44px;
}
.hero-subtitle {
font-size: 18px;
margin-bottom: 20px;
}
.hero-btn {
padding: 10px 24px;
font-size: 13px;
}
.hero-image-wrapper {
max-width: 480px;
}
}
/* Further adjust for smaller laptops */
@media (max-height: 768px) and (min-width: 992px) {
.hero-title {
font-size: 40px;
}
.hero-subtitle {
font-size: 16px;
margin-bottom: 20px;
}
.hero-image-wrapper {
max-width: 450px;
}
}
@media (max-width: 1200px) {
.hero-title {
font-size: 42px;
}
.hero-subtitle {
font-size: 17px;
margin-bottom: 22px;
}
.hero-image-wrapper {
max-width: 460px;
}
}
@media (max-width: 991px) {
.hero {
height: auto !important;
min-height: 100vh;
padding: 60px 0;
}
.nav-container {
display: none;
}
.mobile-menu-btn {
display: flex;
}
.hero-title {
font-size: 38px;
}
.hero-subtitle {
font-size: 16px;
}
.hero-btn {
padding: 10px 22px;
font-size: 12px;
}
.hero-image-wrapper {
justify-content: center;
margin: 30px auto 0;
max-width: 450px;
transform: perspective(1000px) rotateY(0deg);
}
.hero-content {
padding: 0 15px;
}
}
@media (max-width: 767px) {
.hero {
min-height: auto !important; /* Override the min-height: 100vh */
height: auto !important;
padding: 130px 0 70px 0px;
}
.hero-content {
text-align: center;
margin: 0 auto;
max-width: 100%;
}
.hero-title {
font-size: 34px;
}
.hero-date {
font-size: 13px;
}
.hero-subtitle {
font-size: 15px;
margin-bottom: 20px; /* Reduced margin from 25px */
}
.hero-buttons {
flex-direction: column;
align-items: center;
}
.hero-btn {
padding: 10px 20px; /* Slightly smaller padding */
}
.decoration-element {
opacity: 0.05;
}
/* Image still hidden on mobile as requested */
.hero-image-wrapper {
display: none;
}
}
/* Even smaller screens */
@media (max-width: 575px) {
.hero {
min-height: auto !important;
/* Override the min-height: 100vh */
height: auto !important;
padding: 130px 0 70px 0px;
/* Reduced padding from 100px to 60px */
}
.hero-content {
text-align: center;
margin: 0 auto;
max-width: 100%;
}
.hero-title {
font-size: 34px;
}
.hero-date {
font-size: 13px;
}
.hero-subtitle {
font-size: 15px;
margin-bottom: 20px;
/* Reduced margin from 25px */
}
.hero-buttons {
flex-direction: column;
align-items: center;
}
.hero-btn {
padding: 10px 20px;
/* Slightly smaller padding */
}
.decoration-element {
opacity: 0.05;
}
/* Image still hidden on mobile as requested */
.hero-image-wrapper {
display: none;
}
}
/* Extra small screens */
@media (max-width: 375px) {
.hero {
min-height: auto !important;
/* Override the min-height: 100vh */
height: auto !important;
padding: 130px 0 70px 0px;
/* Reduced padding from 100px to 60px */
}
.hero-content {
text-align: center;
margin: 0 auto;
max-width: 100%;
}
.hero-title {
font-size: 34px;
}
.hero-date {
font-size: 13px;
}
.hero-subtitle {
font-size: 15px;
margin-bottom: 20px;
/* Reduced margin from 25px */
}
.hero-buttons {
flex-direction: column;
align-items: center;
}
.hero-btn {
padding: 10px 20px;
/* Slightly smaller padding */
}
.decoration-element {
opacity: 0.05;
}
/* Image still hidden on mobile as requested */
.hero-image-wrapper {
display: none;
}
}
/* Ensure the container takes full height */
.h-100 {
height: 100% !important;
}
/* ========== OVERVIEW SECTION STYLES ========== */
.overview-section {
background-color: #ffffff;
padding: 60px 0;
/* Further reduced from 90px */
position: relative;
overflow: hidden;
}
.section-header {
margin-bottom: 30px;
/* Further reduced from 50px */
}
.section-tag {
display: none;
/* Hide the tag as requested */
}
.section-title {
font-size: 36px;
/* Reduced from 48px */
font-weight: 800;
color: var(--primary);
margin-top: 15px;
/* Added space since tag is removed */
margin-bottom: 20px;
position: relative;
text-transform: uppercase;
line-height: 1.2;
}
.section-title .accent {
color: var(--accent);
position: relative;
display: inline-block;
}
.section-description {
font-size: 15px;
/* Reduced from 18px */
line-height: 1.7;
color: #666;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.divider {
width: 80px;
height: 4px;
background-color: var(--accent);
margin: 15px 0;
/* Further reduced from 20px */
}
/* Main content area */
.overview-content {
padding-right: 30px;
}
.overview-content-title {
font-size: 30px;
/* Reduced from 36px */
font-weight: 700;
color: var(--primary);
margin-bottom: 15px;
/* Reduced from 20px */
line-height: 1.3;
}
.overview-content-text {
font-size: 15px;
/* Reduced from 17px */
line-height: 1.8;
color: #444;
margin-bottom: 25px;
/* Reduced from 30px */
}
/* New Join Us text styling */
.join-us-text {
font-size: 15px;
line-height: 1.7;
color: #444;
margin-bottom: 15px;
/* Reduced from 20px */
font-weight: 500;
}
.overview-list {
padding-left: 0;
list-style: none;
margin-bottom: 25px;
/* Reduced from 30px */
}
.overview-list-item {
position: relative;
padding-left: 35px;
margin-bottom: 15px;
/* Reduced from 20px */
font-size: 15px;
/* Reduced from 17px */
color: #444;
}
.overview-list-item:last-child {
margin-bottom: 0;
}
.overview-list-item i {
position: absolute;
left: 0;
top: 5px;
color: var(--accent);
font-size: 18px;
/* Reduced from 20px */
}
.register-btn {
display: inline-flex;
align-items: center;
background-color: var(--accent);
color: var(--primary);
font-weight: 600;
padding: 14px 32px;
/* Reduced from 15px 35px */
border-radius: 5px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
border: 2px solid var(--accent);
font-size: 14px;
/* Reduced from 16px */
}
.register-btn:hover {
background-color: transparent;
color: var(--accent);
}
.register-btn i {
margin-left: 10px;
transition: all 0.3s ease;
}
.register-btn:hover i {
transform: translateX(5px);
}
/* Optional container for CTA elements */
.cta-container {
margin-bottom: 10px;
}
/* ========== LAPTOP IMAGE CONTAINER STYLES ========== */
.laptop-image-container {
position: relative;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
margin-bottom: 25px;
/* Reduced from 30px */
}
.laptop-image {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s ease;
border-radius: 10px;
}
.laptop-image-container:hover .laptop-image {
transform: scale(1.03);
}
.laptop-image-container::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(to bottom, rgba(0, 28, 84, 0.1), rgba(0, 28, 84, 0.4));
border-radius: 10px;
pointer-events: none;
}
.attendees-overlay {
position: absolute;
bottom: 20px;
right: 20px;
background-color: white;
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
text-align: center;
min-width: 180px;
z-index: 10;
}
.attendees-overlay .number {
font-size: 38px;
font-weight: 800;
color: var(--primary);
line-height: 1.1;
margin-bottom: 5px;
}
.attendees-overlay .text {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
color: #666;
}
/* Feature grid styling */
.overview-grid {
margin-top: 40px;
}
.overview-grid .row {
margin-left: -10px;
/* Reduced horizontal margins */
margin-right: -10px;
row-gap: 15px;
/* Reduced row gap */
display: flex;
justify-content: center;
/* Further reduced from 25px */
}
.overview-grid .col-lg-4,
.overview-grid .col-md-6 {
padding-left: 10px;
/* Reduced padding */
padding-right: 10px;
display: flex;
}
.overview-box {
background-color: #f9f9f9;
border-radius: 10px;
padding: 25px;
/* Reduced padding */
transition: all 0.3s ease;
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
/* Ensure full width of column */
display: flex;
flex-direction: column;
align-items: flex-start;
/* Align content to start */
}
.overview-box:hover {
background-color: var(--primary);
transform: translateY(-10px);
box-shadow: 0 25px 50px rgba(0, 28, 84, 0.2);
}
.overview-box:hover .overview-box-title,
.overview-box:hover .overview-box-description {
color: white;
}
.overview-box:hover .overview-box-icon {
background-color: var(--accent);
}
.overview-box:hover .overview-box-icon i {
color: var(--primary);
}
.overview-box-number {
position: absolute;
top: -20px;
right: -10px;
font-size: 110px;
/* Reduced from 120px */
font-weight: 900;
color: rgba(0, 28, 84, 0.05);
transition: all 0.3s ease;
}
.overview-box:hover .overview-box-number {
color: rgba(255, 255, 255, 0.1);
}
.overview-box-icon {
width: 100%;
min-height: 65px;
border-radius: 10px;
background-color: rgba(0, 28, 84, 0.1);
display: flex;
align-items: center;
margin-bottom: 20px;
transition: all 0.3s ease;
padding: 15px 20px;
}
.overview-box-icon i {
font-size: 26px;
color: var(--primary);
transition: all 0.3s ease;
margin-right: 15px;
display: flex;
align-items: center;
}
.overview-box-title {
font-size: 24px;
font-weight: 700;
color: var(--primary);
margin-bottom: 15px;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.overview-box-description {
font-size: 14px;
/* Reduced from 16px */
color: #666;
line-height: 1.7;
transition: all 0.3s ease;
}
.accent-border {
position: relative;
}
.accent-border::before {
content: '';
position: absolute;
left: -15px;
top: 0;
height: 100%;
width: 4px;
background-color: var(--accent);
border-radius: 4px;
}
.yellow-shape {
position: absolute;
width: 300px;
height: 300px;
background-color: rgba(255, 219, 29, 0.2);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
z-index: 0;
}
.shape-1 {
top: -150px;
right: -150px;
animation: floatAnimation 8s ease-in-out infinite;
}
.shape-2 {
bottom: -150px;
left: -150px;
animation: floatAnimation 10s ease-in-out infinite reverse;
}
@keyframes floatAnimation {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(20px) rotate(5deg);
}
}
/* Background Elements */
.highlights-bg-circle {
position: absolute;
border-radius: 50%;
background-color: rgba(0, 28, 84, 0.03);
z-index: 0;
}
.circle-1 {
width: 500px;
height: 500px;
top: -250px;
right: -100px;
}
.circle-2 {
width: 400px;
height: 400px;
bottom: -200px;
left: -200px;
}
.highlights-accent {
position: absolute;
z-index: 0;
}
.accent-1 {
top: 20%;
right: 5%;
width: 60px;
height: 60px;
background-color: rgba(255, 219, 29, 0.15);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
animation: rotateHighlight 12s linear infinite;
}
.accent-2 {
bottom: 15%;
left: 10%;
width: 80px;
height: 80px;
background-color: rgba(255, 219, 29, 0.15);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
animation: floatHighlight 12s ease-in-out infinite;
}
@keyframes rotateHighlight {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes floatHighlight {
0%,
100% {
transform: translate(0, 0);
}
50% {
transform: translate(20px, -30px);
}
}
/* ========== RESPONSIVE STYLES ========== */
@media (max-width: 1199px) {
.overview-section {
padding: 50px 0;
/* Further reduced */
}
.overview-content-title {
font-size: 28px;
margin-bottom: 10px;
/* Further reduced */
}
.section-title {
font-size: 32px;
margin-bottom: 15px;
/* Further reduced */
}
.section-header {
margin-bottom: 25px;
/* Further reduced */
}
.overview-content-text,
.overview-list-item,
.join-us-text {
font-size: 14px;
margin-bottom: 15px;
/* Further reduced */
}
.overview-content-text {
margin-bottom: 20px;
/* Further reduced */
}
.overview-list {
margin-bottom: 20px;
/* Further reduced */
}
.attendees-overlay .number {
font-size: 34px;
}
.overview-grid {
margin-top: 20px;
/* Further reduced */
}
.overview-box {
padding: 25px;
/* Further reduced */
}
.overview-box-icon {
margin-bottom: 15px;
/* Further reduced */
}
}
@media (max-width: 991px) {
.overview-section {
padding: 70px 0;
/* Reduced from 80px */
}
.section-title {
font-size: 30px;
}
.overview-content {
padding-right: 0;
margin-bottom: 40px;
/* Reduced from 50px */
}
.overview-grid .row {
row-gap: 20px;
justify-content: center;
}
.laptop-image-container {
margin-bottom: 30px;
}
.attendees-overlay {
bottom: 15px;
right: 15px;
padding: 12px 18px;
}
}
@media (max-width: 767px) {
.overview-section {
padding: 40px 0;
}
.section-header {
margin-bottom: 40px;
/* Reduced from 50px */
}
.section-title {
font-size: 26px;
}
.section-description {
font-size: 14px;
line-height: 1.6;
}
.overview-content-title {
font-size: 24px;
}
.overview-content-text,
.join-us-text {
font-size: 14px;
line-height: 1.7;
}
.overview-list-item {
font-size: 14px;
margin-bottom: 15px;
padding-left: 30px;
}
.overview-list-item i {
font-size: 16px;
}
.overview-box {
padding: 30px;
}
.overview-grid {
margin-top: 10px;
}
.overview-grid .row {
row-gap: 15px;
margin-left: -8px;
margin-right: -8px;
}
.overview-grid .col-lg-4,
.overview-grid .col-md-6 {
padding-left: 8px;
padding-right: 8px;
}
.overview-box {
padding: 20px;
}
.overview-box-title {
font-size: 22px;
}
.overview-box-icon .overview-box-title {
font-size: 18px;
}
/* Fix mobile spacing between register button and image */
.overview-content {
margin-bottom: 30px;
/* Reduced from 50px */
}
.laptop-image-container {
margin-top: -20px;
/* Added negative margin to pull image up */
position: relative;
margin-bottom: 20px;
}
.join-us-text {
margin-bottom: 15px;
/* Reduced from 20px */
}
.register-btn {
margin-bottom: 10px;
/* Add some bottom margin to the button */
}
.attendees-overlay {
bottom: 15px;
right: 15px;
padding: 12px 15px;
min-width: 150px;
}
.attendees-overlay .number {
font-size: 32px;
}
.attendees-overlay .text {
font-size: 11px;
}
}
@media (max-width: 575px) {
.overview-section {
padding: 50px 0;
}
.section-title {
font-size: 24px;
}
.overview-content-title {
font-size: 22px;
}
.overview-box {
padding: 25px;
}
.overview-box-number {
font-size: 90px;
}
.overview-box-icon {
width: 100%;
min-height: 55px;
margin-bottom: 20px;
padding: 12px 15px;
}
.overview-box-icon i {
font-size: 22px;
margin-right: 12px;
}
.overview-box-title {
font-size: 20px;
}
.overview-box-icon .overview-box-title {
font-size: 16px;
}
.overview-box-description {
font-size: 13px;
line-height: 1.6;
}
.overview-grid .row {
row-gap: 15px;
}
.overview-box {
padding: 15px;
}
/* Further reduce spacing on extra small devices */
.overview-content {
margin-bottom: 20px;
/* Further reduce */
}
.laptop-image-container {
margin-top: -25px;
/* Pull image up more on smaller screens */
}
}
@media (max-width: 480px) {
.overview-section {
padding: 40px 0;
/* Reduce section padding */
}
.laptop-image-container {
margin-top: -30px;
/* Pull image up even more */
}
/* Reduce space between list items */
.overview-list-item {
margin-bottom: 12px;
/* Reduced from 15px */
}
/* Make divider smaller */
.divider {
margin: 15px 0;
/* Reduced from 25px */
}
.attendees-overlay {
bottom: 10px;
right: 10px;
padding: 10px;
min-width: 120px;
}
.attendees-overlay .number {
font-size: 28px;
}
}
/* Who Should Attend Section Styles - Updated */
.who-attend-section {
background-color: var(--primary);
background-image: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
padding: 60px 0;
/* Reduced padding from 100px to 80px */
position: relative;
overflow: hidden;
}
/* Decorative elements - unchanged */
.who-attend-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;
background-image: url('data:image/svg+xml;utf8,');
}
.wave-shape {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-image: url('data:image/svg+xml;utf8,');
background-size: cover;
background-repeat: no-repeat;
}
.floating-diamonds {
position: absolute;
opacity: 0.2;
}
.diamond-1 {
top: 10%;
right: 5%;
width: 120px;
height: 120px;
background-color: var(--accent);
transform: rotate(45deg);
animation: floatDiamond 15s ease-in-out infinite;
}
.diamond-2 {
bottom: 15%;
left: 5%;
width: 80px;
height: 80px;
background-color: var(--accent);
transform: rotate(45deg);
animation: floatDiamond 12s ease-in-out infinite reverse;
}
.diamond-3 {
top: 40%;
left: 15%;
width: 60px;
height: 60px;
background-color: var(--accent);
transform: rotate(45deg);
animation: floatDiamond 18s ease-in-out infinite;
}
@keyframes floatDiamond {
0%,
100% {
transform: translate(0, 0) rotate(45deg);
}
50% {
transform: translate(20px, -30px) rotate(45deg);
}
}
/* Section header - Updated */
.who-attend-header {
margin-bottom: 40px;
/* Reduced from 50px */
text-align: center;
position: relative;
z-index: 2;
}
/* Removed who-attend-tag styles since it's not used anymore */
.who-attend-title {
font-size: 36px;
font-weight: 800;
color: white;
margin-bottom: 20px;
position: relative;
text-transform: uppercase;
line-height: 1.2;
}
.who-attend-divider {
width: 80px;
height: 4px;
background-color: var(--accent);
margin: 20px auto;
}
.who-attend-description {
font-size: 16px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.9);
max-width: 700px;
margin: 0 auto;
}
/* Attendee cards - Updated with centered content and improved text alignment */
.row {
margin-left: -15px;
margin-right: -15px;
row-gap: 30px;
}
.col-xl-3,
.col-lg-6,
.col-md-6 {
padding-left: 15px;
padding-right: 15px;
}
.attendee-card {
background-color: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 30px 25px;
height: 100%;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
z-index: 2;
text-align: center;
/* Center align all content */
display: flex;
flex-direction: column;
align-items: center;
/* Center align icons and text horizontally */
}
.attendee-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
z-index: -1;
}
.attendee-card:hover {
transform: translateY(-15px);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 219, 29, 0.3);
}
.attendee-card:hover .attendee-icon {
background-color: var(--accent);
transform: rotateY(180deg);
}
.attendee-card:hover .attendee-icon i {
color: var(--primary);
}
.attendee-icon {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: all 0.4s ease;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.attendee-icon i {
font-size: 28px;
color: var(--accent);
transition: all 0.4s ease;
}
.attendee-title {
font-size: 20px;
font-weight: 700;
color: white;
margin-bottom: 12px;
text-align: center;
/* Ensure centered text */
width: 100%;
}
.attendee-description {
font-size: 15px;
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
margin-bottom: 0;
text-align: center;
/* Ensure centered text */
width: 100%;
}
/* Responsive styles - Updated for improved spacing */
@media (min-width: 1400px) {
.who-attend-section {
padding: 70px 0;
/* Slightly increased for larger screens */
}
.who-attend-title {
font-size: 36px;
}
.who-attend-description {
font-size: 16px;
}
.attendee-title {
font-size: 20px;
}
.attendee-description {
font-size: 15px;
}
}
@media (max-width: 1200px) {
.who-attend-section {
padding: 70px 0;
/* Reduced for better spacing */
}
.who-attend-title {
font-size: 34px;
}
.attendee-card {
padding: 28px 22px;
}
.attendee-icon {
width: 65px;
height: 65px;
}
.attendee-icon i {
font-size: 26px;
}
}
@media (max-width: 991px) {
.who-attend-section {
padding: 60px 0;
/* Further reduced for tablet */
}
.who-attend-title {
font-size: 32px;
}
.row {
row-gap: 25px;
}
}
@media (max-width: 767px) {
.who-attend-section {
padding: 50px 0;
/* Further reduced for mobile */
}
.who-attend-title {
font-size: 30px;
}
.who-attend-description {
font-size: 15px;
}
.attendee-icon {
width: 60px;
height: 60px;
margin-bottom: 15px;
}
.attendee-icon i {
font-size: 24px;
}
.attendee-title {
font-size: 19px;
}
.row {
row-gap: 20px;
}
}
@media (max-width: 575px) {
.who-attend-section {
padding: 40px 0;
/* Minimum padding for small screens */
}
.who-attend-title {
font-size: 28px;
}
.attendee-card {
padding: 25px 18px;
}
.attendee-title {
font-size: 18px;
}
.attendee-description {
font-size: 14px;
line-height: 1.5;
}
}
/* Highlights Section Styles */
.highlights-section {
background-color: white;
padding: 60px 0;
position: relative;
overflow: hidden;
}
/* Background Elements */
.highlights-bg-circle {
position: absolute;
border-radius: 50%;
background-color: rgba(0, 28, 84, 0.03);
z-index: 0;
}
.circle-1 {
width: 500px;
height: 500px;
top: -250px;
right: -100px;
}
.circle-2 {
width: 400px;
height: 400px;
bottom: -200px;
left: -200px;
}
.highlights-accent {
position: absolute;
z-index: 0;
}
.accent-1 {
top: 20%;
right: 5%;
width: 60px;
height: 60px;
background-color: rgba(255, 219, 29, 0.15);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
animation: rotateHighlight 12s linear infinite;
}
.accent-2 {
bottom: 15%;
left: 10%;
width: 80px;
height: 80px;
background-color: rgba(255, 219, 29, 0.15);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
animation: floatHighlight 12s ease-in-out infinite;
}
@keyframes rotateHighlight {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes floatHighlight {
0%,
100% {
transform: translate(0, 0);
}
50% {
transform: translate(20px, -30px);
}
}
/* Section Header */
.highlights-header {
text-align: center;
margin-bottom: 70px;
position: relative;
z-index: 1;
}
.highlights-subtitle {
color: var(--primary);
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
background-color: rgba(0, 28, 84, 0.05);
padding: 8px 20px;
border-radius: 50px;
display: inline-block;
margin-bottom: 20px;
}
.highlights-title {
font-size: 36px;
font-weight: 800;
color: var(--primary);
margin-bottom: 25px;
position: relative;
text-transform: uppercase;
line-height: 1.2;
}
.highlights-description {
font-size: 16px;
line-height: 1.7;
color: #555;
max-width: 700px;
margin: 0 auto;
}
/* Row styling to add gaps between cards */
.row {
margin-left: -15px;
margin-right: -15px;
row-gap: 30px;
/* Add row gap between cards */
}
.col-lg-6 {
padding-left: 15px;
padding-right: 15px;
}
/* Highlights Card */
.highlight-box {
background-color: white;
border-radius: 20px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
height: 100%;
position: relative;
z-index: 1;
transition: all 0.4s ease;
overflow: hidden;
}
.highlight-box:hover {
transform: translateY(-15px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.highlight-box:hover .highlight-icon {
background-color: var(--accent);
}
.highlight-box:hover .highlight-icon i {
color: var(--primary);
}
.highlight-box:hover .highlight-title::after {
width: 80px;
}
.highlight-box:hover .highlight-number {
color: var(--accent);
}
.highlight-top {
padding: 30px;
border-bottom: 1px solid #f5f5f5;
position: relative;
}
.highlight-icon {
width: 70px;
height: 70px;
border-radius: 15px;
background-color: rgba(0, 28, 84, 0.05);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
transition: all 0.4s ease;
}
.highlight-icon i {
font-size: 30px;
color: var(--primary);
transition: all 0.4s ease;
}
.highlight-title {
font-size: 22px;
font-weight: 700;
color: var(--primary);
margin-bottom: 15px;
position: relative;
padding-bottom: 15px;
}
.highlight-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background-color: var(--accent);
transition: all 0.4s ease;
}
.highlight-text {
font-size: 15px;
color: #666;
line-height: 1.7;
}
.highlight-number {
position: absolute;
top: 25px;
right: 25px;
font-size: 60px;
font-weight: 900;
color: rgba(0, 28, 84, 0.05);
transition: all 0.4s ease;
}
.highlight-items {
padding: 30px;
}
.highlight-list {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.highlight-list-item {
padding: 12px 0;
display: flex;
align-items: flex-start;
border-bottom: 1px dashed #f0f0f0;
}
.highlight-list-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.highlight-check {
margin-right: 15px;
min-width: 24px;
height: 24px;
background-color: rgba(0, 28, 84, 0.05);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px;
}
.highlight-check i {
font-size: 12px;
color: var(--primary);
}
.highlight-list-text {
font-size: 15px;
color: #444;
line-height: 1.6;
}
/* Key Takeaways Card */
.takeaway-box {
background-color: var(--primary);
border-radius: 20px;
overflow: hidden;
height: 100%;
box-shadow: 0 15px 50px rgba(0, 28, 84, 0.2);
position: relative;
z-index: 1;
}
.takeaway-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px);
background-size: 20px 20px;
z-index: -1;
}
.takeaway-top {
padding: 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
}
.takeaway-title {
font-size: 22px;
font-weight: 700;
color: white;
margin-bottom: 15px;
position: relative;
padding-bottom: 15px;
}
.takeaway-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background-color: var(--accent);
}
.takeaway-text {
font-size: 15px;
color: rgba(255, 255, 255, 0.8);
line-height: 1.7;
}
.takeaway-items {
padding: 30px;
}
.takeaway-list {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.takeaway-list-item {
padding: 12px 0;
display: flex;
align-items: flex-start;
border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
.takeaway-list-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.takeaway-check {
margin-right: 15px;
min-width: 24px;
height: 24px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px;
}
.takeaway-check i {
font-size: 12px;
color: var(--accent);
}
.takeaway-list-text {
font-size: 15px;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
}
/* CTA Banner - Centered and Narrower */
.highlights-cta {
margin-top: 70px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
padding: 0 15px;
/* Added horizontal padding for smaller screens */
}
.highlights-cta-inner {
background-color: var(--primary);
padding: 60px;
position: relative;
z-index: 2;
overflow: hidden;
border-radius: 20px;
width: 60%;
/* Reduced to 60% on large screens */
max-width: 1000px;
/* Adjusted max-width */
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.highlights-cta-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(45deg,
rgba(255, 219, 29, 0.05) 25%,
transparent 25%,
transparent 50%,
rgba(255, 219, 29, 0.05) 50%,
rgba(255, 219, 29, 0.05) 75%,
transparent 75%,
transparent);
background-size: 20px 20px;
z-index: -1;
animation: movePattern 15s linear infinite;
opacity: 0.5;
}
@keyframes movePattern {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
.highlights-cta-circle {
position: absolute;
border-radius: 50%;
background-color: rgba(255, 219, 29, 0.1);
z-index: -1;
}
.cta-circle-1 {
width: 300px;
height: 300px;
top: -150px;
right: -50px;
}
.cta-circle-2 {
width: 200px;
height: 200px;
bottom: -100px;
left: -50px;
}
.highlights-cta-title {
font-size: 38px;
font-weight: 800;
color: white;
margin-bottom: 25px;
max-width: 800px;
line-height: 1.2;
}
.highlights-cta-text {
font-size: 18px;
color: rgba(255, 255, 255, 0.9);
max-width: 700px;
margin-bottom: 35px;
line-height: 1.7;
}
.btn-cta {
background-color: var(--accent);
color: var(--primary);
font-weight: 700;
padding: 16px 40px;
border-radius: 50px;
display: inline-flex;
align-items: center;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 16px;
transition: all 0.3s ease;
box-shadow: 0 10px 20px rgba(255, 219, 29, 0.3);
position: relative;
overflow: hidden;
z-index: 1;
}
.btn-cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: white;
transition: all 0.4s ease;
z-index: -1;
}
.btn-cta:hover {
color: var(--primary);
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(255, 219, 29, 0.4);
}
.btn-cta:hover::before {
width: 100%;
}
.btn-cta i {
margin-left: 10px;
transition: all 0.3s ease;
}
.btn-cta:hover i {
transform: translateX(5px);
}
/* Responsive Adjustments */
@media (max-width: 1400px) {
.highlights-cta-inner {
width: 70%;
/* Slightly wider on smaller large screens */
}
}
@media (max-width: 1200px) {
.highlights-cta-inner {
width: 80%;
padding: 50px 40px;
}
.highlights-cta-title {
font-size: 34px;
}
.highlights-cta-text {
font-size: 16px;
}
}
@media (max-width: 991px) {
.highlights-cta-inner {
width: 100%;
padding: 40px 30px;
}
.highlights-cta-title {
font-size: 32px;
}
.highlights-cta-text {
font-size: 15px;
}
}
@media (max-width: 767px) {
/* Adjust CTA container */
.highlights-cta {
margin-top: 50px;
/* Increased from 40px */
padding: 0;
width: 100%;
}
/* Make CTA exactly 95% width - increased from 90% */
.highlights-cta-inner {
width: 95%;
padding: 35px 25px;
/* Increased from 30px 20px */
margin: 0 auto;
border-radius: 18px;
/* Increased from 15px */
}
/* Optimize text sizes - increased font sizes */
.highlights-cta-title {
font-size: 26px;
/* Increased from 22px */
margin-bottom: 18px;
/* Increased from 15px */
letter-spacing: -0.3px;
/* Adjusted from -0.5px */
}
.highlights-cta-text {
font-size: 15px;
/* Increased from 13px */
margin-bottom: 24px;
/* Increased from 20px */
line-height: 1.6;
/* Increased from 1.5 */
}
/* Larger button */
.btn-cta {
padding: 12px 24px;
/* Increased from 10px 20px */
font-size: 14px;
/* Increased from 12px */
letter-spacing: 1px;
}
/* Increase size of decorative elements */
.highlights-cta-circle {
opacity: 0.5;
transform: scale(0.8);
/* Increased from 0.7 */
}
}
@media (max-width: 575px) {
/* Maintain increased width for smaller screens */
.highlights-cta-inner {
width: 92%;
/* Slightly reduced from 95% but still larger than original 90% */
padding: 30px 20px;
/* Increased from 25px 15px */
border-radius: 15px;
/* Increased from 12px */
}
/* Larger text size compared to original */
.highlights-cta-title {
font-size: 22px;
/* Increased from 20px */
margin-bottom: 12px;
/* Increased from 10px */
}
.highlights-cta-text {
font-size: 14px;
/* Increased from 12px */
margin-bottom: 18px;
/* Increased from 15px */
line-height: 1.5;
/* Increased from 1.4 */
}
/* Larger button for small screens */
.btn-cta {
padding: 10px 20px;
/* Increased from 8px 18px */
font-size: 13px;
/* Increased from 11px */
border-radius: 40px;
}
/* Make pattern slightly more visible */
.highlights-cta-pattern {
opacity: 0.35;
/* Slightly increased from 0.3 */
}
}
/* For very small devices */
@media (max-width: 375px) {
.highlights-cta-inner {
padding: 25px 15px;
/* Increased from 20px 12px */
}
.highlights-cta-title {
font-size: 20px;
/* Increased from 18px */
}
.highlights-cta-text {
font-size: 13px;
/* Increased from 11px */
line-height: 1.4;
/* Increased from 1.3 */
}
.btn-cta {
padding: 9px 18px;
/* Increased from 7px 16px */
font-size: 12px;
/* Increased from 10px */
}
}
/* Schedule Section Styles */
.schedule-section {
background-color: var(--light);
padding: 100px 0;
position: relative;
overflow: hidden;
}
/* Background Texture */
.schedule-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.03;
background-image: url('data:image/svg+xml;utf8,');
background-size: 20px 20px;
}
/* Decorative Elements */
.schedule-shape {
position: absolute;
opacity: 0.07;
}
.schedule-shape-1 {
width: 300px;
height: 300px;
border-radius: 50%;
top: -150px;
right: -100px;
background-color: var(--primary);
}
.schedule-shape-2 {
width: 200px;
height: 200px;
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
bottom: -100px;
left: -50px;
background-color: var(--accent);
animation: floatAnimation 15s ease-in-out infinite;
}
@keyframes floatAnimation {
0%,
100% {
transform: translate(0, 0) rotate(0deg);
}
50% {
transform: translate(30px, -50px) rotate(10deg);
}
}
/* Section Header */
.schedule-header {
text-align: center;
margin-bottom: 50px;
position: relative;
z-index: 1;
}
/* Hide the Program Details subtitle */
.schedule-subtitle {
display: none;
}
.schedule-title {
font-size: 36px;
font-weight: 800;
color: var(--primary);
margin-bottom: 20px;
position: relative;
text-transform: uppercase;
line-height: 1.2;
}
.schedule-divider {
width: 70px;
height: 4px;
background-color: var(--accent);
margin: 0 auto 25px;
}
.schedule-description {
font-size: 16px;
line-height: 1.7;
color: var(--text);
max-width: 700px;
margin: 0 auto;
}
/* Schedule Timeline */
.schedule-timeline {
position: relative;
z-index: 1;
padding-left: 60px;
}
.timeline-line {
position: absolute;
top: 0;
left: 29px;
width: 2px;
height: 100%;
background-color: rgba(0, 51, 102, 0.1);
}
.timeline-item {
position: relative;
margin-bottom: 35px;
transition: all 0.4s ease;
}
.timeline-item:last-child {
margin-bottom: 0;
}
.timeline-item:hover {
transform: translateX(10px);
}
.timeline-item:hover .timeline-dot {
background-color: var(--accent);
transform: scale(1.2);
}
.timeline-item:hover .timeline-time {
background-color: var(--accent);
color: var(--primary);
}
.timeline-item:hover .timeline-card {
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
border-color: var(--accent);
}
.timeline-dot {
position: absolute;
top: 25px;
left: -60px;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: rgba(0, 51, 102, 0.3);
border: 3px solid #fff;
z-index: 2;
transition: all 0.4s ease;
box-shadow: 0 0 0 4px rgba(0, 51, 102, 0.05);
}
/* Updated time display styling */
.timeline-time {
background-color: rgba(0, 51, 102, 0.05);
border: 1px solid rgba(0, 51, 102, 0.1);
padding: 8px 18px;
border-radius: 50px;
font-weight: 600;
color: var(--primary);
display: inline-block;
transition: all 0.4s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
font-size: 14px;
text-align: left;
min-width: 160px;
}
.timeline-card {
background-color: var(--light);
border: 1px solid rgba(0, 51, 102, 0.08);
border-radius: 15px;
padding: 25px;
transition: all 0.4s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.timeline-card-header {
margin-bottom: 15px;
position: relative;
padding-right: 60px;
text-align: left;
}
.timeline-topic {
font-size: 22px;
font-weight: 700;
color: var(--primary);
margin-bottom: 5px;
}
.timeline-subtitle {
font-size: 15px;
color: var(--primary);
margin-bottom: 0;
font-weight: 600;
opacity: 0.8;
}
.timeline-tag {
position: absolute;
top: 0;
right: 0;
background-color: rgba(255, 215, 0, 0.1);
color: var(--primary);
font-size: 11px;
font-weight: 600;
padding: 5px 12px;
border-radius: 50px;
text-transform: uppercase;
}
.timeline-content {
color: var(--text);
font-size: 15px;
line-height: 1.7;
margin-bottom: 15px;
text-align: left;
}
.timeline-list {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.timeline-list-item {
position: relative;
padding-left: 28px;
margin-bottom: 10px;
color: var(--text);
font-size: 15px;
}
.timeline-list-item:last-child {
margin-bottom: 0;
}
.timeline-list-item i {
position: absolute;
left: 0;
top: 5px;
color: var(--accent);
font-size: 14px;
}
/* Helper class for time alignment */
.text-center {
text-align: center;
}
.mb-3 {
margin-bottom: 1rem;
}
/* Responsive Styles */
@media (max-width: 1200px) {
.schedule-section {
padding: 90px 0;
}
.schedule-title {
font-size: 34px;
}
.timeline-topic {
font-size: 20px;
}
}
@media (max-width: 991px) {
.schedule-section {
padding: 80px 0;
}
.schedule-title {
font-size: 32px;
}
.schedule-timeline {
padding-left: 30px;
}
.timeline-line {
left: 14px;
}
.timeline-dot {
width: 16px;
height: 16px;
left: -30px;
top: 20px;
}
.timeline-time {
font-size: 13px;
min-width: 140px;
}
.timeline-card-header {
padding-right: 0;
}
.timeline-tag {
position: relative;
top: auto;
right: auto;
display: inline-block;
margin-top: 10px;
}
.timeline-content {
font-size: 14px;
}
.timeline-list-item {
font-size: 14px;
}
}
@media (max-width: 767px) {
.schedule-section {
padding: 70px 0;
}
.schedule-header {
margin-bottom: 40px;
}
.schedule-title {
font-size: 30px;
}
.schedule-description {
font-size: 15px;
}
.timeline-card {
padding: 20px;
}
.timeline-topic {
font-size: 18px;
}
.timeline-item {
margin-bottom: 25px;
}
}
@media (max-width: 575px) {
.schedule-section {
padding: 60px 0;
}
.schedule-title {
font-size: 26px;
}
.timeline-time {
font-size: 12px;
min-width: 120px;
padding: 6px 14px;
}
.timeline-content {
font-size: 14px;
}
.timeline-list-item {
font-size: 14px;
padding-left: 24px;
}
.timeline-list-item i {
font-size: 12px;
}
.timeline-card {
padding: 18px;
}
}
/* Locations Section Styles */
.locations-section {
background-color: var(--light);
padding: 70px 0;
position: relative;
overflow: hidden;
}
/* Background Elements */
.locations-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(rgba(0, 28, 84, 0.02) 3px, transparent 3px);
background-size: 30px 30px;
z-index: 0;
}
.locations-shape {
position: absolute;
z-index: 0;
}
.locations-shape-1 {
top: -100px;
right: -50px;
width: 300px;
height: 300px;
background-color: rgba(0, 28, 84, 0.02);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}
.locations-shape-2 {
bottom: -100px;
left: -100px;
width: 400px;
height: 400px;
background-color: rgba(255, 202, 5, 0.03);
border-radius: 50%;
}
/* Section Header */
.locations-header {
text-align: center;
margin-bottom: 60px;
position: relative;
z-index: 1;
}
.locations-subtitle {
color: var(--primary);
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
background-color: rgba(0, 28, 84, 0.05);
padding: 8px 20px;
border-radius: 50px;
display: inline-block;
margin-bottom: 20px;
}
.locations-title {
font-size: 36px;
font-weight: 800;
color: var(--primary);
margin-bottom: 20px;
position: relative;
text-transform: uppercase;
line-height: 1.2;
}
.locations-divider {
width: 80px;
height: 4px;
background-color: var(--accent);
margin: 0 auto 30px;
}
.locations-description {
font-size: 16px;
line-height: 1.7;
color: var(--text);
max-width: 800px;
margin: 0 auto;
}
/* Locations Grid */
.locations-grid {
position: relative;
z-index: 1;
}
.location-card {
position: relative;
border-radius: 15px;
overflow: hidden;
margin-bottom: 30px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
height: 100%;
cursor: pointer;
background-color: white;
border: 1px solid rgba(0, 28, 84, 0.05);
}
.location-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.location-card:hover .location-image img {
transform: scale(1.1);
}
.location-card:hover .location-name {
color: var(--accent);
}
.location-image {
position: relative;
height: 180px;
overflow: hidden;
}
.location-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.location-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0, 28, 84, 0.3) 0%, rgba(0, 28, 84, 0.9) 100%);
z-index: 1;
}
.location-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
z-index: 2;
}
.location-date {
font-size: 13px;
color: var(--accent);
font-weight: 600;
margin-bottom: 6px;
background-color: rgba(0, 0, 0, 0.2);
display: inline-block;
padding: 4px 10px;
border-radius: 30px;
}
.location-name {
font-size: 22px;
font-weight: 700;
color: white;
margin-bottom: 15px;
transition: all 0.3s ease;
}
.location-register-btn {
display: inline-block;
background-color: var(--accent);
color: var(--primary);
font-size: 12px;
font-weight: 600;
padding: 8px 20px;
border-radius: 50px;
text-decoration: none;
transition: all 0.3s ease;
border: 2px solid var(--accent);
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.location-register-btn:hover {
background-color: white;
color: var(--primary);
border-color: white;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
/* Map Section */
.map-section {
margin-top: 60px;
position: relative;
z-index: 1;
}
.map-title {
font-size: 22px;
font-weight: 700;
color: var(--primary);
margin-bottom: 30px;
text-align: center;
}
.map-container {
height: 450px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.map-container iframe {
width: 100%;
height: 100%;
border: none;
}
/* Responsive Styles */
@media (max-width: 1200px) {
.locations-title {
font-size: 34px;
}
.location-name {
font-size: 20px;
}
}
@media (max-width: 991px) {
.locations-section {
padding: 70px 0;
}
.locations-title {
font-size: 32px;
}
.map-container {
height: 400px;
}
}
@media (max-width: 767px) {
.locations-section {
padding: 60px 0;
}
.locations-title {
font-size: 30px;
}
.locations-description {
font-size: 15px;
}
.map-container {
height: 350px;
}
}
@media (max-width: 575px) {
.locations-section {
padding: 50px 0;
}
.locations-title {
font-size: 28px;
}
.location-image {
height: 140px;
}
.location-content {
padding: 15px;
}
.location-name {
font-size: 16px;
margin-bottom: 8px;
}
.location-date {
font-size: 11px;
padding: 3px 8px;
}
.location-register-btn {
font-size: 11px;
padding: 6px 15px;
}
.map-container {
height: 300px;
}
.col-6 {
padding-left: 8px;
padding-right: 8px;
}
.row {
margin-left: -8px;
margin-right: -8px;
}
}
/* Enhanced Testimonials Section Styles */
.testimonials-section {
background-color: var(--primary);
background-image: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
}
/* Background Elements */
.testimonials-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.05;
background-image: url('data:image/svg+xml;utf8,');
background-size: 20px 20px;
}
/* Decorative Elements */
.testimonials-shape {
position: absolute;
background-color: var(--accent);
opacity: 0.1;
}
.testimonials-shape-1 {
width: 300px;
height: 300px;
border-radius: 50%;
top: -150px;
right: -100px;
}
.testimonials-shape-2 {
width: 200px;
height: 200px;
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
bottom: -100px;
left: -50px;
animation: floatTestimonial 15s ease-in-out infinite;
}
@keyframes floatTestimonial {
0%,
100% {
transform: translate(0, 0) rotate(0deg);
}
50% {
transform: translate(30px, -50px) rotate(10deg);
}
}
/* Enhanced Testimonials Section Styles */
.testimonials-section {
background-color: var(--primary);
background-image: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
padding: 70px 0;
position: relative;
overflow: hidden;
}
/* Background Elements */
.testimonials-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.05;
background-image: url('data:image/svg+xml;utf8,');
background-size: 20px 20px;
}
/* Decorative Elements */
.testimonials-shape {
position: absolute;
background-color: var(--accent);
opacity: 0.1;
}
.testimonials-shape-1 {
width: 300px;
height: 300px;
border-radius: 50%;
top: -150px;
right: -100px;
}
.testimonials-shape-2 {
width: 200px;
height: 200px;
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
bottom: -100px;
left: -50px;
animation: floatTestimonial 15s ease-in-out infinite;
}
@keyframes floatTestimonial {
0%,
100% {
transform: translate(0, 0) rotate(0deg);
}
50% {
transform: translate(30px, -50px) rotate(10deg);
}
}
/* Section Header */
.testimonials-header {
text-align: center;
margin-bottom: 60px;
position: relative;
z-index: 1;
}
.testimonials-subtitle {
color: var(--accent);
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
background: rgba(255, 215, 0, 0.1);
padding: 8px 20px;
border-radius: 50px;
display: inline-block;
margin-bottom: 20px;
backdrop-filter: blur(5px);
}
.testimonials-title {
font-size: 36px;
font-weight: 800;
color: white;
margin-bottom: 25px;
position: relative;
text-transform: uppercase;
line-height: 1.2;
}
.testimonials-divider {
width: 80px;
height: 4px;
background-color: var(--accent);
margin: 0 auto 30px;
}
.testimonials-description {
font-size: 16px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.9);
max-width: 700px;
margin: 0 auto;
}
/* Testimonials Container */
.testimonials-container {
position: relative;
z-index: 2;
}
/* Testimonial Cards */
.testimonial-slide {
display: none;
/* Hide by default */
}
.testimonial-slide.active-slide {
display: block;
/* Show when active */
animation: fadeIn 0.6s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.testimonial-card {
background-color: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 35px;
position: relative;
transition: all 0.4s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 25px;
height: 100%;
display: flex;
flex-direction: column;
min-height: 280px;
/* Set minimum height for consistency */
}
.testimonial-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
border-color: rgba(255, 215, 0, 0.3);
}
.testimonial-quote {
position: absolute;
top: -22px;
left: 35px;
width: 45px;
height: 45px;
background-color: var(--accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
font-size: 20px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
z-index: 1;
}
.testimonial-content {
font-size: 16px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 0px !important;
font-style: italic;
flex: 1;
/* Allow content to fill available space */
overflow: hidden;
/* Prevent overflow */
}
/* Fix for testimonial author alignment */
.testimonial-author {
display: flex;
align-items: flex-start;
/* Align items to the top */
margin-top: auto;
/* Push to bottom of card */
position: relative;
}
/* Fixed positioning for avatar */
.testimonial-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
margin-right: 18px;
border: 2px solid var(--accent);
flex-shrink: 0;
/* Prevent image from shrinking */
background-color: #fff;
}
/* Make sure the image fills the avatar container */
.testimonial-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Critical fix for positioning the info */
.testimonial-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 1px;
/* Adjust this value as needed */
}
.testimonial-name {
font-size: 18px;
font-weight: 700;
color: white;
margin: 0 0 4px 0;
/* Reset margin to ensure consistent positioning */
line-height: 1.2;
}
.testimonial-position {
font-size: 14px;
color: var(--accent);
line-height: 1.2;
margin: 0 0 5px 0;
/* Reset margin to ensure consistent positioning */
}
.testimonial-rating {
margin-top: 4px;
line-height: 1;
}
.testimonial-rating i {
color: var(--accent);
font-size: 13px;
margin-right: 2px;
}
/* Navigation Controls */
.testimonial-navigation {
display: flex;
justify-content: center;
margin-top: 30px;
}
.testimonial-nav-btn {
width: 45px;
height: 45px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin: 0 10px;
cursor: pointer;
transition: all 0.3s ease;
color: white;
font-size: 18px;
border: none;
}
.testimonial-nav-btn:hover {
background-color: var(--accent);
color: var(--primary);
transform: translateY(-3px);
}
.testimonial-dots {
display: flex;
justify-content: center;
margin-top: 20px;
}
.testimonial-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.2);
margin: 0 5px;
cursor: pointer;
transition: all 0.3s ease;
border: none;
padding: 0;
}
.testimonial-dot.active {
background-color: var(--accent);
width: 25px;
border-radius: 10px;
}
/* CTA Banner */
.testimonial-cta {
margin-top: 60px;
text-align: center;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 40px;
position: relative;
z-index: 1;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.testimonial-cta-title {
font-size: 26px;
font-weight: 700;
color: white;
margin-bottom: 15px;
}
.testimonial-cta-text {
font-size: 15px;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 30px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.7;
}
.testimonial-cta-btn {
display: inline-block;
background-color: var(--accent);
color: var(--primary);
font-weight: 600;
padding: 14px 35px;
border-radius: 50px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
font-size: 15px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.testimonial-cta-btn:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
background-color: white;
color: var(--primary);
}
/* Responsive Styles - Enhanced for all screen sizes */
@media (max-width: 1200px) {
.testimonials-title {
font-size: 34px;
}
.testimonial-content {
font-size: 15px;
}
.testimonial-card {
padding: 30px;
}
}
@media (max-width: 991px) {
.testimonials-section {
padding: 70px 0;
}
.testimonials-title {
font-size: 32px;
}
.testimonial-card {
padding: 28px;
}
.testimonial-content {
font-size: 15px;
}
.testimonial-cta-title {
font-size: 24px;
}
.testimonial-avatar {
width: 55px;
height: 55px;
}
}
@media (max-width: 767px) {
.testimonials-section {
padding: 60px 0;
}
.testimonials-title {
font-size: 30px;
}
.testimonials-description {
font-size: 15px;
}
.testimonial-content {
font-size: 14px;
}
.testimonial-cta {
padding: 30px;
}
.testimonial-cta-title {
font-size: 22px;
}
/* Force full width for single column on mobile */
.testimonial-slide {
width: 100%;
}
.testimonial-avatar {
width: 50px;
height: 50px;
}
.testimonial-card {
min-height: 260px;
}
}
@media (max-width: 575px) {
.testimonials-section {
padding: 50px 0;
}
.testimonials-title {
font-size: 26px;
}
.testimonial-card {
padding: 22px;
min-height: 240px;
}
.testimonial-content {
font-size: 14px;
}
.testimonial-avatar {
width: 45px;
height: 45px;
}
.testimonial-name {
font-size: 15px;
}
.testimonial-nav-btn {
width: 38px;
height: 38px;
font-size: 15px;
}
.testimonial-cta-btn {
padding: 12px 25px;
font-size: 13px;
}
.testimonial-quote {
width: 38px;
height: 38px;
font-size: 16px;
top: -19px;
left: 25px;
}
}
/* About University Section Styles */
.about-university-section {
background-color: #ffffff;
padding: 80px 0;
position: relative;
overflow: hidden;
}
/* Background Elements */
.about-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(rgba(0, 51, 102, 0.02) 3px, transparent 3px);
background-size: 30px 30px;
z-index: 0;
}
.about-shape {
position: absolute;
z-index: 0;
}
.about-shape-1 {
top: -50px;
right: -50px;
width: 200px;
height: 200px;
background-color: rgba(0, 51, 102, 0.02);
border-radius: 50%;
}
.about-shape-2 {
bottom: -100px;
left: -100px;
width: 300px;
height: 300px;
background-color: rgba(255, 215, 0, 0.05);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
animation: floatAbout 20s ease-in-out infinite;
}
@keyframes floatAbout {
0%,
100% {
transform: translate(0, 0) rotate(0deg);
}
50% {
transform: translate(30px, -50px) rotate(10deg);
}
}
/* Section Header */
.about-header {
text-align: center;
margin-bottom: 60px;
position: relative;
z-index: 1;
}
.about-subtitle {
display: none;
}
.about-title {
font-size: 38px;
font-weight: 800;
color: var(--primary);
margin-bottom: 25px;
position: relative;
text-transform: uppercase;
line-height: 1.2;
}
.grade-title {
font-size: 28px;
font-weight: 800;
color: var(--primary);
margin-bottom: 25px;
position: relative;
text-transform: uppercase;
line-height: 1.2;
}
.about-divider {
width: 80px;
height: 4px;
background-color: var(--accent);
margin: 0 auto 30px;
}
.about-description {
font-size: 16px;
line-height: 1.7;
color: var(--text);
max-width: 800px;
margin: 0 auto;
}
/* About Content */
.about-content {
position: relative;
z-index: 1;
}
.about-image {
position: relative;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}
/* Make image larger */
.larger-image {
height: 100%;
display: flex;
align-items: center;
}
.about-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 15px;
}
.about-image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0, 51, 102, 0) 0%, rgba(0, 51, 102, 0.6) 100%);
}
.about-badge {
position: absolute;
top: 20px;
right: 20px;
background-color: var(--accent);
color: var(--primary);
padding: 10px 20px;
border-radius: 50px;
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.about-text-content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 20px;
}
.about-text-title {
font-size: 32px;
font-weight: 700;
color: var(--primary);
margin-bottom: 20px;
line-height: 1.3;
}
.about-text-description {
font-size: 15px;
line-height: 1.8;
color: var(--text);
margin-bottom: 30px;
}
/* Feature highlights section */
.feature-highlights {
display: flex;
flex-direction: column;
gap: 25px;
}
.about-highlight {
display: flex;
align-items: flex-start;
}
.about-highlight-icon {
background-color: rgba(0, 51, 102, 0.1);
color: var(--primary);
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-right: 20px;
flex-shrink: 0;
transition: all 0.3s ease;
}
.about-highlight:hover .about-highlight-icon {
background-color: var(--primary);
color: white;
transform: scale(1.1);
}
.about-highlight-text {
flex: 1;
}
.about-highlight-title {
font-size: 18px;
font-weight: 700;
color: var(--primary);
margin-bottom: 8px;
}
.about-highlight-desc {
font-size: 14px;
color: var(--text);
line-height: 1.6;
}
/* Stats Section */
.university-stats {
margin-top: 80px;
position: relative;
z-index: 1;
}
.stats-card {
background-color: white;
border-radius: 15px;
padding: 25px 20px;
text-align: center;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
height: 100%;
transition: all 0.4s ease;
position: relative;
top: 0;
border: 1px solid #f5f5f5;
}
.stats-card:hover {
top: -10px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
border-color: var(--accent);
}
.stats-icon {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: rgba(0, 51, 102, 0.05);
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: var(--primary);
margin: 0 auto 15px;
transition: all 0.4s ease;
}
.stats-card:hover .stats-icon {
background-color: var(--primary);
color: white;
}
.stats-number {
font-size: 36px;
font-weight: 800;
color: var(--primary);
margin-bottom: 8px;
line-height: 1;
}
.stats-text {
font-size: 15px;
color: var(--text);
font-weight: 500;
}
/* Accreditation Logos */
.accreditation-section {
margin-top: 80px;
position: relative;
z-index: 1;
text-align: center;
}
.accreditation-title {
font-size: 22px;
font-weight: 700;
color: var(--primary);
margin-bottom: 40px;
text-align: center;
}
.accreditation-logos {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 30px;
}
.accreditation-logo {
width: 200px;
height: 180px;
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px 10px;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
overflow: hidden;
}
.accreditation-logo:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.accreditation-logo img {
max-width: 95%;
max-height: 85px;
transition: all 0.3s ease;
margin-bottom: 5px;
}
.logo-name {
margin-top: 15px;
font-size: 14px;
font-weight: 700;
color: #000000;
max-width: 100%;
padding: 0 5px;
word-break: break-word;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
/* CTA Section - Centered */
.about-cta {
margin-top: 80px;
background-color: var(--primary);
background-image: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
border-radius: 15px;
padding: 50px 40px;
position: relative;
width: 60%;
/* Keep the width at 60% */
max-width: 1200px;
/* Add maximum width */
margin-left: auto;
/* Center horizontally */
margin-right: auto;
/* Center horizontally */
overflow: hidden;
z-index: 1;
}
.about-cta-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px);
background-size: 20px 20px;
z-index: -1;
}
.about-cta-content {
text-align: center;
position: relative;
z-index: 1;
}
.about-cta-title {
font-size: 32px;
font-weight: 800;
color: white;
margin-bottom: 20px;
}
.about-cta-description {
font-size: 16px;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 30px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
line-height: 1.7;
}
.about-cta-btn {
display: inline-block;
background-color: var(--accent);
color: var(--primary);
font-weight: 700;
padding: 15px 35px;
border-radius: 50px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
font-size: 15px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.about-cta-btn:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
background-color: white;
color: var(--primary);
}
/* Responsive Styles */
@media (max-width: 1200px) {
.about-title {
font-size: 34px;
}
.grade-title {
font-size: 24px;
}
.about-text-title {
font-size: 30px;
}
.stats-number {
font-size: 32px;
}
.about-cta-title {
font-size: 30px;
}
}
@media (max-width: 991px) {
.about-university-section {
padding: 70px 0;
}
.about-title {
font-size: 32px;
}
.grade-title {
font-size: 22px;
}
.about-text-title {
font-size: 28px;
margin-top: 40px;
}
.about-text-content {
padding-left: 0;
margin-top: 30px;
}
.stats-card {
margin-bottom: 30px;
}
.about-cta {
padding: 40px 30px;
}
.about-cta-title {
font-size: 28px;
}
.accreditation-logo {
width: 150px;
height: 120px;
}
}
@media (max-width: 767px) {
.about-university-section {
padding: 60px 0;
}
.about-title {
font-size: 30px;
}
.grade-title {
font-size: 20px;
}
.about-description {
font-size: 15px;
}
.about-text-title {
font-size: 26px;
}
.col-6 {
padding-left: 10px;
padding-right: 10px;
}
.stats-card {
margin-bottom: 20px;
padding: 20px 15px;
}
.stats-icon {
width: 60px;
height: 60px;
font-size: 24px;
margin-bottom: 10px;
}
.stats-number {
font-size: 28px;
margin-bottom: 5px;
}
.stats-text {
font-size: 14px;
}
.about-cta {
padding: 30px 20px;
width: 100%;
}
.about-cta-title {
font-size: 26px;
}
.about-cta-description {
font-size: 15px;
}
.accreditation-logo {
width: 140px;
height: 120px;
margin: 10px;
}
.about-highlight-icon {
width: 50px;
height: 50px;
font-size: 20px;
}
.logo-name {
font-size: 13px;
}
.accreditation-logos {
gap: 15px;
}
}
@media (max-width: 575px) {
.about-university-section {
padding: 50px 0;
}
.about-title {
font-size: 28px;
}
.about-text-title {
font-size: 24px;
}
.stats-card {
margin-bottom: 15px;
}
.stats-number {
font-size: 26px;
}
.stats-text {
font-size: 13px;
}
.about-cta-title {
font-size: 24px;
}
.about-cta-btn {
padding: 12px 30px;
font-size: 14px;
}
.accreditation-logo {
width: 130px;
height: 120px;
margin: 8px;
padding: 10px 8px;
}
.logo-name {
font-size: 12px;
margin-top: 10px;
line-height: 1.2;
}
.accreditation-logo img {
max-height: 65px;
}
.accreditation-logos {
gap: 8px;
}
}
/* Standard Footer Styles */
.standard-footer {
background-color: #000a30;
color: #fff;
padding: 70px 0 20px;
position: relative;
}
/* Top Footer */
.footer-top {
margin-bottom: 40px;
}
.footer-logo {
display: inline-block;
margin-bottom: 25px;
}
.footer-logo img {
max-height: 30px;
width: auto;
}
.footer-about {
margin-bottom: 25px;
}
.footer-title {
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}
.footer-title:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 50px;
height: 2px;
background-color: var(--accent);
}
.footer-text {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
line-height: 1.7;
margin-bottom: 20px;
}
.footer-contact {
margin-bottom: 30px;
}
.contact-item {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
}
.contact-icon {
color: var(--accent);
font-size: 18px;
margin-right: 15px;
margin-top: 3px;
}
.contact-text {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
line-height: 1.5;
}
/* Quick Links */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links a {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
text-decoration: none;
transition: all 0.3s ease;
display: block;
position: relative;
padding-left: 15px;
}
.footer-links a:before {
content: '›';
position: absolute;
left: 0;
top: 0;
color: var(--accent);
transition: all 0.3s ease;
}
.footer-links a:hover {
color: var(--accent);
padding-left: 20px;
}
.footer-links a:hover:before {
left: 5px;
}
/* Updated Registration Button */
.register-container {
margin-top: 25px;
text-align: center;
}
.register-btn {
display: inline-block;
background-color: var(--accent);
color: var(--primary);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 10px 25px;
border-radius: 50px;
text-decoration: none;
position: relative;
overflow: hidden;
z-index: 1;
box-shadow: 0 5px 15px rgba(255, 219, 29, 0.3);
transition: all 0.3s ease;
}
.register-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
transition: all 0.4s ease;
z-index: -1;
}
.register-btn:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(255, 219, 29, 0.5);
color: var(--primary);
}
.register-btn:hover::before {
left: 100%;
}
.register-btn i {
margin-left: 10px;
transition: all 0.3s ease;
}
.register-btn:hover i {
transform: translateX(5px);
}
.register-tagline {
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
margin-top: 15px;
font-style: italic;
}
/* Social Media */
.footer-social {
margin-top: 25px;
display: flex;
flex-direction: column;
align-items: center;
/* Center align the content */
}
.social-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
color: #fff;
text-align: center;
/* Ensure text is centered */
}
.social-list {
display: flex;
list-style: none;
padding: 0;
margin: 0;
justify-content: center;
align-items: center;
}
.social-item {
margin: 0 10px;
/* Increased spacing between icons */
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.1);
color: #fff;
border-radius: 50%;
transition: all 0.3s ease;
text-decoration: none;
}
.social-link i {
font-size: 18px;
/* Ensure consistent icon size */
}
.social-link:hover {
background-color: var(--accent);
color: var(--primary);
transform: translateY(-3px);
text-decoration: none;
}
/* Footer Bottom */
.footer-bottom {
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
}
.copyright {
color: rgba(255, 255, 255, 0.6);
font-size: 13px;
}
.copyright a {
color: var(--accent);
text-decoration: none;
}
.copyright a:hover {
text-decoration: underline;
}
/* Back to Top Button */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 40px;
height: 40px;
background-color: var(--accent);
color: var(--primary);
border: none;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s ease;
z-index: 99;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.back-to-top.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
background-color: white;
}
/* Responsive Styles */
@media (max-width: 991px) {
.footer-widget {
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.standard-footer {
padding: 50px 0 20px;
}
.social-item {
margin: 0 8px;
/* Slightly reduced spacing on smaller screens */
}
.social-link {
width: 35px;
height: 35px;
}
.social-link i {
font-size: 16px;
}
.footer-title {
margin-top: 20px;
}
.back-to-top {
width: 35px;
height: 35px;
font-size: 16px;
bottom: 20px;
right: 20px;
}
}