/* Reset and Base Styles */
@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,200..900;1,7..72,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #ff6b35;
--secondary-color: #004e89;
--accent-color: #ffd23f;
--dark-bg: #1a1a1a;
--light-bg: #f5f5f5;
--text-dark: #333;
--text-light: #666;
--white: #ffffff;
--green: #4caf50;
}
body {
font-family: "Poppins", sans-serif;
line-height: 1.6;
color: var(--text-dark);
overflow-x: hidden;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.marquesec {
background:#0399ae;
padding:0px 0 0px 0;
}
.marquesec p {
font-size: 13px;
color: #fff;
padding: 0px;
margin: 0px;
line-height: 10px;
}
/* Header Styles */
.main-header {
position: fixed;
top: 25px;
z-index: 1000;
padding: 0px 0;
width: 100%;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
background: #f4f4f4;
padding: 10px 30px 10px 30px;
border-radius: 35px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
position: relative;
}
.logo a {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--secondary-color);
font-size: 24px;
font-weight: bold;
}
.logo img {
width: 80px;
}
.main-nav ul {
display: flex;
list-style: none;
gap: 30px;
margin-bottom: 0px;
}
.main-nav a {
text-decoration: none;
color: var(--text-dark);
font-weight: 500;
transition: color 0.3s;
}
.main-nav a:hover {
color: var(--primary-color);
}
.header-actions {
display: flex;
align-items: center;
gap: 20px;
}
.header-actions.mobile-actions {
display: none;
}
/* Mobile menu toggle: hidden on desktop, shown only in mobile media query */
.mobile-menu-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 10px;
background: transparent;
border: none;
cursor: pointer;
z-index: 1001;
transition: opacity 0.3s ease;
}
.mobile-menu-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--text-dark);
border-radius: 1px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.mobile-menu-toggle.active span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.mobile-menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.header-actions .btn-primary {
background: #0399ae;
color: var(--white);
padding: 10px 35px;
border-radius: 35px;
text-decoration: none;
font-weight: 600;
transition: background 0.3s;
}
.header-actions .btn-primary:hover {
background: #027a8a;
color: var(--white);
font-weight: 600;
transition: background 0.3s;
}
.search-icon, .user-icon {
color: var(--text-dark);
font-size: 20px;
text-decoration: none;
transition: color 0.3s;
}
.search-icon:hover, .user-icon:hover {
color: var(--primary-color);
}
.btn-primary {
background: var(--primary-color);
color: var(--white);
padding: 10px 25px;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
transition: background 0.3s;
}
.btn-primary:hover {
background: #e55a2a;
}
/* Hero Section */
.hero-section {
background-image: url('../images/banner-bg.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0);
z-index: 1;
}
.hero-section .container {
position: relative;
z-index: 2;
}
.hero-content {
display: grid;
grid-template-columns: 2fr 1fr 1.3fr;
gap: 10px;
align-items: flex-end;
margin: 40px 0 0 0;
}
.hero-text h1 {
font-size: 39px;
color: #000;
margin-bottom: 20px;
line-height: 1.2;
font-family: "Literata", serif;
}
.hero-subtitle {
font-size: 17px;
color: #727272;
margin-bottom: 30px;
font-weight: 300;
}
.btn-hero {
background: #0399ae;
color: var(--white);
padding: 11px 40px;
border-radius: 40px;
text-decoration: none;
font-weight: 500;
font-size: 18px;
display: inline-block;
transition: transform 0.3s, box-shadow 0.3s;
}
.btn-hero:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3);
}
.hero-image {
position: relative;
text-align: center;
}
.hero-image img {
width: 100%;
}
.hero-visual {
background: linear-gradient(135deg, #c8e6f5 0%, #ffffff 100%);
border-radius: 20px;
padding: 40px;
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/* Hero Query Form */
.hero-query-form {
background: var(--white);
border-radius: 18px;
padding: 25px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
border: 1px solid rgba(0, 0, 0, 0.08);
width: 90%;
margin: auto;
}
.hero-query-form h3 {
font-size: 22px;
font-weight: 700;
color: #000;
margin-bottom: 8px;
font-family: "Literata", serif;
text-align: center;
}
.hero-query-form .form-subtitle {
font-size: 13px;
color: var(--text-light);
text-align: center;
margin-bottom: 20px;
font-weight: 400;
}
.hero-query-form .query-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.hero-query-form .form-group {
display: flex;
flex-direction: column;
}
.hero-query-form .form-group input,
.hero-query-form .form-group select,
.hero-query-form .form-group textarea {
width: 100%;
padding: 10px 14px;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 10px;
font-size: 14px;
font-family: "Poppins", sans-serif;
transition: all 0.3s;
outline: none;
background: var(--white);
color: #000;
}
.hero-query-form .form-group input:focus,
.hero-query-form .form-group select:focus,
.hero-query-form .form-group textarea:focus {
border-color: #0399ae;
box-shadow: 0 0 0 3px rgba(3, 153, 174, 0.15);
}
.hero-query-form .form-group input::placeholder,
.hero-query-form .form-group textarea::placeholder {
color: #999;
}
.hero-query-form .form-group select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230399ae' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 35px;
}
.hero-query-form .form-group textarea {
resize: vertical;
min-height: 80px;
font-family: "Poppins", sans-serif;
}
.btn-query-submit {
background: #0399ae;
color: var(--white);
padding: 12px 20px;
border-radius: 10px;
border: none;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
font-family: "Poppins", sans-serif;
margin-top: 5px;
width: 100%;
}
.btn-query-submit:hover {
background: #027a8a;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(3, 153, 174, 0.3);
}
.accrediation-sec {
display: flex;
justify-content: space-between;
align-items: center;
margin: 40px 0 0 0;
gap: 8px;
}
.accrediation-item {
border: #cecece solid 1px;
padding: 10px 5px 10px 5px;
border-radius: 10px;
width: 25%;
text-align: center;
background: var(--white);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
cursor: pointer;
}
.accrediation-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
border-color: #0399ae;
}
.accrediation-item img {
width: 65px;
}
.accrediation-item p {
font-size: 13px;
line-height: 16px;
text-align: center;
}
.accrediation-item p span{
display: block;
font-weight: 600;
}
.floating-note {
background: var(--accent-color);
padding: 15px 25px;
border-radius: 10px;
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
color: var(--text-dark);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
/* High Paying Domains Section */
.highpaying-domain-section {
padding: 40px 0 0px 0;
margin-bottom: 0px;
}
.highpaying-domain-section h3 {
font-size: 24px;
color: #000;
margin-bottom: 20px;
font-family: "Literata", serif;
text-align: left;
}
.highpaying-domain-section .domains {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: flex-start;
align-items: center;
}
.highpaying-domain-section .domains a {
background: linear-gradient(135deg, rgba(3, 153, 174, 0.1) 0%, rgba(3, 153, 174, 0.5) 100%);
color: #000000;
padding: 7px 20px;
border-radius: 45px;
text-decoration: none;
font-weight: 500;
font-size: 13px;
display: inline-block;
transition: all 0.3s ease;
border: 2px solid rgba(3, 153, 174, 0.8);
position: relative;
overflow: hidden;
}
.highpaying-domain-section .domains a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #0399ae 0%, #027a8a 100%);
transition: left 0.3s ease;
z-index: -1;
}
.highpaying-domain-section .domains a:hover {
color: var(--white);
border-color: #0399ae;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(3, 153, 174, 0.3);
}
.highpaying-domain-section .domains a:hover::before {
left: 0;
}
@media (max-width: 768px) {
.highpaying-domain-section {
padding: 30px 0 40px;
margin-bottom: 20px;
}
.highpaying-domain-section h3 {
font-size: 24px;
margin-bottom: 20px;
}
.highpaying-domain-section .domains {
gap: 12px;
}
.highpaying-domain-section .domains a {
padding: 10px 20px;
font-size: 14px;
}
}
@media (max-width: 480px) {
.highpaying-domain-section .domains a {
padding: 8px 16px;
font-size: 13px;
}
}
/* Section Styles */
.section {
padding: 80px 0;
}
.section-title {
text-align: left;
font-size: 30px;
color: #000;
margin-bottom: 0;
font-weight: 500;
}
/* Top Courses Section */
.top-courses {
background: var(--white);
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
gap: 20px;
}
.section-header-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #0399ae;
font-weight: 600;
font-size: 15px;
text-decoration: none;
white-space: nowrap;
transition: color 0.3s ease, gap 0.3s ease;
}
.section-header-link i {
font-size: 12px;
transition: transform 0.3s ease;
}
.section-header-link:hover {
color: #027a8a;
gap: 12px;
}
.section-header-link:hover i {
transform: translateX(4px);
}
@media (max-width: 576px) {
.section-header {
flex-wrap: wrap;
}
.section-header-link {
font-size: 14px;
}
}
.info-banner {
background: #f8f9fa;
padding: 10px 20px;
border-radius: 30px;
display: flex;
align-items: center;
gap: 15px;
font-size: 14px;
color: var(--text-dark);
position: relative;
}
.close-banner {
background: transparent;
border: none;
color: var(--primary-color);
cursor: pointer;
font-size: 16px;
padding: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.close-banner:hover {
opacity: 0.7;
}
/* Courses Carousel */
.courses-carousel-wrapper {
position: relative;
margin-bottom: 40px;
}
.courses-carousel {
overflow: hidden;
position: relative;
}
.courses-track {
display: flex;
gap: 15px;
transition: transform 0.5s ease-in-out;
}
.course-card {
flex: 0 0 calc(25% - 22.5px);
min-width: 280px;
background: var(--white);
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
}
@media (max-width: 1200px) {
.course-card {
flex: 0 0 calc(33.333% - 20px);
}
}
@media (max-width: 768px) {
.course-card {
flex: 0 0 calc(50% - 15px);
}
}
@media (max-width: 480px) {
.course-card {
flex: 0 0 100%;
}
}
.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--white);
border: 1px solid #ddd;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.carousel-btn:hover {
background: #0399ae;
color: var(--white);
border-color: #0399ae;
box-shadow: 0 4px 15px rgba(3, 153, 174, 0.3);
}
.carousel-prev {
left: -20px;
}
.carousel-next {
right: -20px;
}
@media (max-width: 768px) {
.carousel-prev {
left: -10px;
}
.carousel-next {
right: -10px;
}
.carousel-btn {
width: 35px;
height: 35px;
font-size: 14px;
}
}
.course-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.course-badges {
position: absolute;
top: 15px;
left: 15px;
right: 15px;
display: flex;
justify-content: space-between;
align-items: flex-start;
z-index: 3;
}
.course-badge {
font-size: 11px;
font-weight: 600;
padding: 5px 12px;
border-radius: 20px;
display: inline-block;
}
.badge-yellow {
background: var(--accent-color);
color: var(--text-dark);
}
.badge-gray {
background: rgba(51, 51, 51, 0.9);
color: var(--white);
font-size: 10px;
padding: 4px 10px;
}
.course-image {
width: 100%;
height: 250px;
position: relative;
overflow: hidden;
}
.course-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.university-banner {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgb(187 148 225);
padding: 8px 15px;
font-size: 13px;
font-weight: 500;
color: var(--text-dark);
text-align: center;
}
.course-card:nth-child(2) .university-banner,
.course-card:nth-child(4) .university-banner {
background: rgba(186, 146, 229, 0.95);
}
.course-content {
padding: 20px;
}
.course-content .btn-view-course {
margin-bottom: 8px;
}
.course-content .btn-view-course:last-child {
margin-bottom: 0;
}
.course-title {
font-size: 15px;
font-weight: 600;
color: #000;
margin-bottom: 12px;
line-height: 1.4;
}
.course-title a {
color: #000;
text-decoration: none;
transition: color 0.3s;
}
.course-title a:hover {
color: #0399ae;
}
.course-rating {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 10px;
}
.course-rating i {
color: #000;
font-size: 16px;
}
.rating-value {
font-size: 14px;
font-weight: 600;
color: #000;
}
.course-duration {
color: var(--text-light);
font-size: 14px;
margin-bottom: 8px;
}
.course-price {
color: var(--text-dark);
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
}
.btn-view-course {
background: #0399ae;
color: var(--white);
padding: 12px 20px;
border-radius: 45px;
text-decoration: none;
display: inline-block;
font-weight: 500;
transition: background 0.3s;
width: 100%;
text-align: center;
font-size: 14px;
}
.btn-view-course:hover {
background: #555;
}
/* All Courses Page */
.courses-hero-section {
padding-bottom: 40px;
}
/* About University block (courses.php when ?university= is set) */
.about-university-block {
padding: 0 0 40px;
margin: 40px 0 0 0;
}
.about-university-card {
background: linear-gradient(135deg, rgba(3, 153, 174, 0.08) 0%, rgba(3, 153, 174, 0.03) 100%);
border: 1px solid rgba(3, 153, 174, 0.15);
border-radius: 16px;
padding: 32px 40px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.about-university-title {
font-size: 24px;
font-weight: 700;
color: #000;
margin-bottom: 16px;
font-family: "Literata", serif;
}
.about-university-text {
font-size: 16px;
line-height: 1.75;
color: var(--text-dark);
margin: 0;
}
@media (max-width: 768px) {
.about-university-block {
padding: 0 0 28px;
}
.about-university-card {
padding: 24px 20px;
}
.about-university-title {
font-size: 20px;
}
.about-university-text {
font-size: 15px;
}
}
.all-courses-section {
background: var(--white);
padding: 80px 0 60px;
}
.all-courses-section .section-header .section-title {
text-align: left;
}
.courses-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-top: 30px;
}
@media (max-width: 992px) {
.courses-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.all-courses-section {
padding: 60px 0 40px;
}
.courses-grid {
grid-template-columns: 1fr;
}
}
.course-carousel-indicators {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 40px;
}
.carousel-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ddd;
cursor: pointer;
transition: background 0.3s, transform 0.3s;
}
.carousel-dot.active {
background: #000;
transform: scale(1.2);
}
.carousel-dot.diamond {
width: 12px;
height: 12px;
border-radius: 0;
transform: rotate(45deg);
background: #ddd;
}
.carousel-dot.diamond.active {
background: #000;
transform: rotate(45deg) scale(1.2);
}
.carousel-dot:hover {
background: #999;
}
.carousel-dot.diamond:hover {
background: #999;
transform: rotate(45deg) scale(1.1);
}
/* Specializations Section */
.specializations {
background: linear-gradient(135deg, rgba(3, 153, 174, 0.08) 0%, rgba(3, 153, 174, 0.03) 100%);
position: relative;
overflow: hidden;
}
.specializations::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.6;
z-index: 1;
}
.specializations .container {
position: relative;
z-index: 2;
}
.specializations-header {
text-align: center;
margin-bottom: 50px;
}
.specializations-header .section-title {
color: #000;
font-size: 36px;
font-weight: 700;
margin-bottom: 15px;
font-family: "Literata", serif;
text-align: center;
}
.specializations-header .section-subtitle {
font-size: 18px;
color: var(--text-light);
font-weight: 300;
max-width: 600px;
margin: 0 auto;
}
.specializations-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
padding: 20px 0;
}
.specialization-card {
background: var(--white);
padding: 35px 25px;
border-radius: 15px;
text-align: center;
border: 2px solid transparent;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.specialization-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #0399ae, #027a8a);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s;
}
.specialization-card:hover::before {
transform: scaleX(1);
}
.specialization-card:hover {
transform: translateY(-8px);
border-color: rgba(3, 153, 174, 0.3);
box-shadow: 0 12px 35px rgba(3, 153, 174, 0.2);
}
.spec-icon-wrapper {
width: 70px;
height: 70px;
margin: 0 auto 20px;
background: linear-gradient(135deg, rgba(3, 153, 174, 0.1) 0%, rgba(3, 153, 174, 0.05) 100%);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.4s;
}
.spec-icon-wrapper::after {
content: '';
position: absolute;
inset: 0;
border-radius: 18px;
padding: 2px;
background: linear-gradient(135deg, #0399ae, #027a8a);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s;
}
.specialization-card:hover .spec-icon-wrapper {
background: linear-gradient(135deg, #0399ae 0%, #027a8a 100%);
transform: scale(1.1) rotate(-5deg);
box-shadow: 0 8px 25px rgba(3, 153, 174, 0.3);
}
.specialization-card:hover .spec-icon-wrapper::after {
opacity: 1;
}
.spec-icon-wrapper i {
font-size: 32px;
color: #0399ae;
z-index: 1;
transition: color 0.4s;
}
.specialization-card:hover .spec-icon-wrapper i {
color: var(--white);
}
.specialization-card h4 {
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
color: #000;
transition: color 0.3s;
}
.specialization-card:hover h4 {
color: #0399ae;
}
.specialization-card p {
font-size: 14px;
line-height: 1.6;
color: var(--text-light);
margin: 0;
}
@media (max-width: 768px) {
.specializations-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.specializations-header .section-title {
font-size: 28px;
}
.specializations-header .section-subtitle {
font-size: 16px;
}
.specialization-card {
padding: 30px 20px;
}
}
/* Universities Section */
.universities {
background: var(--white);
}
.universities-header {
text-align: center;
margin-bottom: 50px;
}
.universities-header .section-title {
color: #000;
font-size: 36px;
font-weight: 700;
margin-bottom: 0;
font-family: "Literata", serif;
text-align: center;
}
/* Universities Carousel */
.universities-carousel-wrapper {
position: relative;
margin-bottom: 40px;
}
.universities-carousel {
overflow: hidden;
position: relative;
}
.universities-track {
display: flex;
gap: 30px;
transition: transform 0.5s ease-in-out;
}
.university-card {
flex: 0 0 calc(33.333% - 20px);
min-width: 300px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
@media (max-width: 992px) {
.university-card {
flex: 0 0 calc(50% - 15px);
}
}
@media (max-width: 768px) {
.university-card {
flex: 0 0 100%;
}
}
.university-card:hover {
transform: translateY(-5px);
}
.carousel-prev-univ,
.carousel-next-univ {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--white);
border: 1px solid #ddd;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.carousel-prev-univ:hover,
.carousel-next-univ:hover {
background: #0399ae;
color: var(--white);
border-color: #0399ae;
box-shadow: 0 4px 15px rgba(3, 153, 174, 0.3);
}
.carousel-prev-univ {
left: -20px;
}
.carousel-next-univ {
right: -20px;
}
@media (max-width: 768px) {
.carousel-prev-univ {
left: -10px;
}
.carousel-next-univ {
right: -10px;
}
.carousel-prev-univ,
.carousel-next-univ {
width: 35px;
height: 35px;
font-size: 14px;
}
}
.university-image {
width: 100%;
height: 250px;
overflow: hidden;
position: relative;
}
.university-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.university-card:hover .university-image img {
transform: scale(1.05);
}
.university-content {
padding: 25px;
background: var(--white);
}
.university-content p {
font-size: 15px;
color: var(--text-light);
margin-bottom: 15px;
line-height: 1.6;
}
.university-name {
font-size: 22px;
font-weight: 600;
color: #000;
margin-bottom: 15px;
font-family: "Literata", serif;
}
.university-link {
background: #0399ae;
color: var(--white);
padding: 12px 20px;
border-radius: 45px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 500;
transition: all 0.3s;
font-size: 14px;
}
.university-link:hover {
background: #555;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.university-link i {
transition: transform 0.3s;
}
.university-link:hover i {
transform: translateX(5px);
}
/* Institutions Page */
.institutions-hero-section {
padding-bottom: 40px;
}
.all-universities-section {
background: var(--white);
padding: 80px 0 60px;
}
.all-universities-section .section-header .section-title {
text-align: left;
}
.universities-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-top: 30px;
}
@media (max-width: 992px) {
.universities-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.all-universities-section {
padding: 60px 0 40px;
}
.universities-grid {
grid-template-columns: 1fr;
}
}
/* Impact Section */
.impact-section {
background: #365162;
color: var(--white);
padding: 80px 0;
}
.impact-section .section-title{
color: #fff;
text-align: center;
}
.impact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
}
.impact-item {
text-align: center;
}
.impact-number {
font-size: 60px;
font-weight: 700;
color: var(--accent-color);
margin-bottom: 10px;
}
.impact-description {
font-size: 18px;
color: var(--white);
opacity: 0.9;
}
/* Why Choose Us Section */
.why-choose-us {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
color: var(--text-dark);
position: relative;
overflow: hidden;
}
.why-choose-us::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
z-index: 1;
}
.why-choose-us .container {
position: relative;
z-index: 2;
}
.why-choose-header {
text-align: center;
margin-bottom: 60px;
}
.why-choose-header .section-title {
color: #000;
font-size: 36px;
font-weight: 700;
margin-bottom: 15px;
font-family: "Literata", serif;
text-align: center;
}
.section-subtitle {
font-size: 18px;
color: var(--text-light);
font-weight: 300;
max-width: 600px;
margin: 0 auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
padding: 20px 0;
}
.feature-card {
background: var(--white);
backdrop-filter: blur(10px);
padding: 40px 30px;
border-radius: 20px;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(3, 153, 174, 0.1), transparent);
transition: left 0.5s;
}
.feature-card:hover::before {
left: 100%;
}
.feature-card:hover {
transform: translateY(-10px);
background: var(--white);
border-color: rgba(3, 153, 174, 0.3);
box-shadow: 0 15px 40px rgba(3, 153, 174, 0.15);
}
.feature-icon-wrapper {
width: 80px;
height: 80px;
margin: 0 auto 25px;
background: linear-gradient(135deg, #0399ae 0%, #027a8a 100%);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.4s;
}
.feature-icon-wrapper::after {
content: '';
position: absolute;
inset: -3px;
border-radius: 20px;
padding: 3px;
background: linear-gradient(135deg, #0399ae, #027a8a);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s;
}
.feature-card:hover .feature-icon-wrapper {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 10px 30px rgba(3, 153, 174, 0.4);
}
.feature-card:hover .feature-icon-wrapper::after {
opacity: 1;
}
.feature-icon-wrapper i {
font-size: 36px;
color: var(--white);
z-index: 1;
}
.feature-card h4 {
font-size: 20px;
font-weight: 600;
margin-bottom: 12px;
color: #000;
transition: color 0.3s;
}
.feature-card:hover h4 {
color: #0399ae;
}
.feature-card p {
font-size: 15px;
line-height: 1.6;
color: var(--text-light);
margin: 0;
}
@media (max-width: 768px) {
.features-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.why-choose-header .section-title {
font-size: 28px;
}
.section-subtitle {
font-size: 16px;
}
.feature-card {
padding: 30px 20px;
}
}
/* CTA Section Middle */
.cta-section-middle {
background: linear-gradient(135deg, #0399ae 0%, #027a8a 100%);
color: var(--white);
position: relative;
overflow: hidden;
}
.cta-section-middle::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('../images/cta-bg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.05;
z-index: 1;
}
.cta-section-middle::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
z-index: 1;
}
.cta-section-middle .container {
position: relative;
z-index: 2;
}
.cta-content-middle {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 60px;
align-items: center;
padding: 60px 0;
}
.cta-text h2 {
font-size: 42px;
font-weight: 700;
margin-bottom: 20px;
font-family: "Literata", serif;
line-height: 1.3;
color: var(--white);
}
.cta-text p {
font-size: 18px;
line-height: 1.8;
margin-bottom: 35px;
color: rgba(255, 255, 255, 0.95);
font-weight: 300;
}
.cta-buttons {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.btn-cta-primary {
background: var(--white);
color: #0399ae;
padding: 15px 40px;
border-radius: 45px;
text-decoration: none;
font-weight: 600;
font-size: 18px;
display: inline-block;
transition: all 0.3s;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
.btn-cta-primary:hover {
background: rgba(255, 255, 255, 0.95);
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
.btn-cta-secondary {
background: transparent;
color: var(--white);
padding: 15px 40px;
border-radius: 45px;
text-decoration: none;
font-weight: 600;
font-size: 18px;
display: inline-block;
transition: all 0.3s;
border: 2px solid var(--white);
}
.btn-cta-secondary:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-3px);
border-color: rgba(255, 255, 255, 0.8);
}
.cta-visual {
display: flex;
justify-content: center;
align-items: center;
}
.cta-icon-wrapper {
width: 250px;
height: 250px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
animation: float-cta 3s ease-in-out infinite;
}
.cta-icon-wrapper::before {
content: '';
position: absolute;
inset: -5px;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.3);
animation: pulse-cta 2s ease-in-out infinite;
}
@keyframes float-cta {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-15px);
}
}
@keyframes pulse-cta {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.7;
}
}
.cta-icon-wrapper i {
font-size: 100px;
color: var(--white);
z-index: 1;
position: relative;
}
@media (max-width: 992px) {
.cta-content-middle {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.cta-text h2 {
font-size: 36px;
}
.cta-icon-wrapper {
width: 200px;
height: 200px;
}
.cta-icon-wrapper i {
font-size: 80px;
}
}
@media (max-width: 768px) {
.cta-text h2 {
font-size: 28px;
}
.cta-text p {
font-size: 16px;
}
.cta-buttons {
flex-direction: column;
align-items: stretch;
}
.btn-cta-primary,
.btn-cta-secondary {
width: 100%;
text-align: center;
padding: 14px 30px;
font-size: 16px;
}
.cta-icon-wrapper {
width: 150px;
height: 150px;
}
.cta-icon-wrapper i {
font-size: 60px;
}
}
/* Placement Section */
.placement-section {
background: var(--light-bg);
padding: 80px 0;
}
.placement-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.placement-image {
background: linear-gradient(135deg, #c8e6f5 0%, #ffffff 100%);
border-radius: 20px;
padding: 40px;
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.placement-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 30px;
}
.stat-item {
text-align: center;
padding: 20px;
background: var(--white);
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.stat-number {
font-size: 32px;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 5px;
}
.stat-label {
font-size: 14px;
color: var(--text-light);
}
/* Benefits of Distance and Online Courses Section */
.benefits-online-section {
background: var(--white);
position: relative;
overflow: hidden;
}
.benefits-online-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(3, 153, 174, 0.04) 0%, rgba(3, 153, 174, 0.01) 100%);
z-index: 0;
}
.benefits-online-section .container {
position: relative;
z-index: 1;
}
.benefits-online-header {
text-align: center;
margin-bottom: 50px;
}
.benefits-online-header .section-title {
color: #000;
font-size: 36px;
font-weight: 700;
margin-bottom: 15px;
font-family: "Literata", serif;
text-align: center;
}
.benefits-online-header .section-subtitle {
font-size: 18px;
color: var(--text-light);
font-weight: 300;
max-width: 640px;
margin: 0 auto;
}
.benefits-online-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
padding: 0 0 20px;
}
.benefit-card {
background: var(--white);
padding: 35px 28px;
border-radius: 16px;
text-align: center;
border: 2px solid rgba(3, 153, 174, 0.12);
transition: all 0.35s ease;
position: relative;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.benefit-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #0399ae, #027a8a);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s ease;
}
.benefit-card:hover {
transform: translateY(-6px);
border-color: rgba(3, 153, 174, 0.25);
box-shadow: 0 12px 35px rgba(3, 153, 174, 0.15);
}
.benefit-card:hover::before {
transform: scaleX(1);
}
.benefit-icon-wrapper {
width: 72px;
height: 72px;
margin: 0 auto 22px;
background: linear-gradient(135deg, rgba(3, 153, 174, 0.12) 0%, rgba(3, 153, 174, 0.06) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.35s ease;
}
.benefit-icon-wrapper i {
font-size: 28px;
color: #0399ae;
transition: color 0.35s ease;
}
.benefit-card:hover .benefit-icon-wrapper {
background: linear-gradient(135deg, #0399ae 0%, #027a8a 100%);
transform: scale(1.08);
box-shadow: 0 8px 24px rgba(3, 153, 174, 0.3);
}
.benefit-card:hover .benefit-icon-wrapper i {
color: var(--white);
}
.benefit-card h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 12px;
color: #000;
font-family: "Literata", serif;
transition: color 0.3s ease;
}
.benefit-card:hover h3 {
color: #0399ae;
}
.benefit-card p {
font-size: 15px;
line-height: 1.65;
color: var(--text-light);
margin: 0;
}
@media (max-width: 992px) {
.benefits-online-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
@media (max-width: 768px) {
.benefits-online-header {
margin-bottom: 35px;
}
.benefits-online-header .section-title {
font-size: 28px;
}
.benefits-online-header .section-subtitle {
font-size: 16px;
}
.benefits-online-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.benefit-card {
padding: 28px 22px;
}
.benefit-icon-wrapper {
width: 64px;
height: 64px;
margin-bottom: 18px;
}
.benefit-icon-wrapper i {
font-size: 24px;
}
.benefit-card h3 {
font-size: 18px;
}
.benefit-card p {
font-size: 14px;
}
}
/* Testimonials Section */
.testimonials {
background: linear-gradient(135deg, rgba(3, 153, 174, 0.05) 0%, rgba(3, 153, 174, 0.02) 100%);
position: relative;
overflow: hidden;
}
.testimonials::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.4;
z-index: 1;
}
.testimonials .container {
position: relative;
z-index: 2;
}
.testimonials-header {
text-align: center;
margin-bottom: 50px;
}
.testimonials-header .section-title {
color: #000;
font-size: 36px;
font-weight: 700;
margin-bottom: 15px;
font-family: "Literata", serif;
text-align: center;
}
.testimonials-header .section-subtitle {
font-size: 18px;
color: var(--text-light);
font-weight: 300;
max-width: 600px;
margin: 0 auto;
}
/* Testimonials Carousel */
.testimonials-carousel-wrapper {
position: relative;
margin-bottom: 40px;
}
.testimonials-carousel {
overflow: hidden;
position: relative;
}
.testimonials-track {
display: flex;
gap: 30px;
transition: transform 0.5s ease-in-out;
}
.testimonial-card {
flex: 0 0 calc(33.333% - 20px);
min-width: 350px;
background: var(--white);
padding: 40px 35px;
border-radius: 20px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
border: 2px solid transparent;
}
.testimonial-card:hover {
transform: translateY(-8px);
border-color: rgba(3, 153, 174, 0.2);
box-shadow: 0 15px 40px rgba(3, 153, 174, 0.15);
}
.testimonial-quote-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, rgba(3, 153, 174, 0.1) 0%, rgba(3, 153, 174, 0.05) 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
transition: all 0.4s;
}
.testimonial-card:hover .testimonial-quote-icon {
background: linear-gradient(135deg, #0399ae 0%, #027a8a 100%);
transform: scale(1.1);
}
.testimonial-quote-icon i {
font-size: 24px;
color: #0399ae;
transition: color 0.4s;
}
.testimonial-card:hover .testimonial-quote-icon i {
color: var(--white);
}
.testimonial-text {
color: var(--text-dark);
font-size: 16px;
line-height: 1.8;
margin-bottom: 25px;
font-style: normal;
font-family: "Poppins", sans-serif;
}
.testimonial-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.testimonial-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 0;
}
.testimonial-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #0399ae 0%, #027a8a 100%);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 20px;
flex-shrink: 0;
}
.testimonial-info {
display: flex;
flex-direction: column;
}
.testimonial-name {
font-weight: 600;
color: #000;
font-size: 16px;
margin-bottom: 4px;
font-family: "Literata", serif;
}
.testimonial-role {
font-size: 13px;
color: var(--text-light);
font-weight: 400;
}
.course-rating {
display: flex;
gap: 3px;
align-items: center;
}
.course-rating i {
color: #ffd23f;
font-size: 14px;
}
.carousel-prev-testimonial,
.carousel-next-testimonial {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--white);
border: 1px solid #ddd;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.carousel-prev-testimonial:hover,
.carousel-next-testimonial:hover {
background: #0399ae;
color: var(--white);
border-color: #0399ae;
box-shadow: 0 4px 15px rgba(3, 153, 174, 0.3);
}
.carousel-prev-testimonial {
left: -20px;
}
.carousel-next-testimonial {
right: -20px;
}
@media (max-width: 992px) {
.testimonial-card {
flex: 0 0 calc(50% - 15px);
}
}
@media (max-width: 768px) {
.testimonial-card {
flex: 0 0 100%;
}
.carousel-prev-testimonial {
left: -10px;
}
.carousel-next-testimonial {
right: -10px;
}
.carousel-prev-testimonial,
.carousel-next-testimonial {
width: 35px;
height: 35px;
font-size: 14px;
}
.testimonials-header .section-title {
font-size: 28px;
}
.testimonials-header .section-subtitle {
font-size: 16px;
}
}
/* FAQ Section */
.faq-section {
background: linear-gradient(135deg, rgba(3, 153, 174, 0.05) 0%, rgba(3, 153, 174, 0.02) 100%);
position: relative;
overflow: hidden;
}
.faq-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.4;
z-index: 1;
}
.faq-section .container {
position: relative;
z-index: 2;
}
.faq-header {
text-align: center;
margin-bottom: 50px;
}
.faq-header .section-title {
color: #000;
font-size: 36px;
font-weight: 700;
margin-bottom: 15px;
font-family: "Literata", serif;
text-align: center;
}
.faq-header .section-subtitle {
font-size: 18px;
color: var(--text-light);
font-weight: 300;
max-width: 600px;
margin: 0 auto;
}
.faq-list {
max-width: 900px;
margin: 0 auto;
}
.faq-item {
background: var(--white);
margin-bottom: 20px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
border: 2px solid transparent;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.faq-item:hover {
border-color: rgba(3, 153, 174, 0.2);
box-shadow: 0 8px 30px rgba(3, 153, 174, 0.12);
}
.faq-item.active {
border-color: rgba(3, 153, 174, 0.4);
box-shadow: 0 10px 35px rgba(3, 153, 174, 0.15);
}
.faq-question {
padding: 25px 30px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s;
background: var(--white);
}
.faq-question:hover {
background: rgba(3, 153, 174, 0.03);
}
.faq-item.active .faq-question {
background: rgba(3, 153, 174, 0.05);
}
.faq-question-content {
display: flex;
align-items: center;
gap: 20px;
flex: 1;
}
.faq-number {
font-size: 18px;
font-weight: 700;
color: #0399ae;
font-family: "Literata", serif;
min-width: 35px;
opacity: 0.6;
transition: opacity 0.3s;
}
.faq-item.active .faq-number {
opacity: 1;
}
.faq-question-text {
font-size: 18px;
font-weight: 600;
color: #000;
font-family: "Literata", serif;
line-height: 1.5;
transition: color 0.3s;
}
.faq-item.active .faq-question-text {
color: #0399ae;
}
.faq-icon-wrapper {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(3, 153, 174, 0.1);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s;
flex-shrink: 0;
}
.faq-item:hover .faq-icon-wrapper {
background: rgba(3, 153, 174, 0.15);
}
.faq-item.active .faq-icon-wrapper {
background: linear-gradient(135deg, #0399ae 0%, #027a8a 100%);
transform: rotate(90deg);
}
.faq-icon {
font-size: 16px;
color: #0399ae;
transition: all 0.4s;
}
.faq-item.active .faq-icon {
color: var(--white);
transform: rotate(45deg);
}
.faq-answer {
padding: 0 30px;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
color: var(--text-light);
line-height: 1.8;
}
.faq-item.active .faq-answer {
max-height: 500px;
padding: 0 30px 25px 85px;
}
.faq-answer p {
font-size: 16px;
margin: 0;
color: var(--text-light);
font-family: "Poppins", sans-serif;
}
@media (max-width: 768px) {
.faq-question {
padding: 20px;
}
.faq-question-content {
gap: 15px;
}
.faq-number {
min-width: 30px;
font-size: 16px;
}
.faq-question-text {
font-size: 16px;
}
.faq-item.active .faq-answer {
padding: 0 20px 20px 65px;
}
.faq-header .section-title {
font-size: 28px;
}
.faq-header .section-subtitle {
font-size: 16px;
}
.faq-icon-wrapper {
width: 35px;
height: 35px;
}
.faq-icon {
font-size: 14px;
}
}
/* Blogs Section */
.blogs {
background: linear-gradient(135deg, rgba(3, 153, 174, 0.03) 0%, rgba(3, 153, 174, 0.01) 100%);
position: relative;
overflow: hidden;
}
.blogs::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.4;
z-index: 1;
}
.blogs .container {
position: relative;
z-index: 2;
}
.blogs-header {
text-align: center;
margin-bottom: 50px;
}
.blogs-header .section-title {
color: #000;
font-size: 36px;
font-weight: 700;
margin-bottom: 15px;
font-family: "Literata", serif;
text-align: center;
}
.blogs-header .section-subtitle {
font-size: 18px;
color: var(--text-light);
font-weight: 300;
max-width: 600px;
margin: 0 auto 30px;
}
.btn-blog-view-all {
background: #0399ae;
color: var(--white);
padding: 12px 35px;
border-radius: 45px;
text-decoration: none;
font-weight: 500;
font-size: 16px;
display: inline-block;
transition: all 0.3s;
box-shadow: 0 5px 15px rgba(3, 153, 174, 0.3);
}
.btn-blog-view-all:hover {
background: #027a8a;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(3, 153, 174, 0.4);
}
/* Blogs Carousel */
.blogs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-bottom: 40px;
}
.blog-card {
background: var(--white);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 2px solid transparent;
display: flex;
flex-direction: column;
}
@media (max-width: 992px) {
.blogs-grid {
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
}
@media (max-width: 768px) {
.blogs-grid {
grid-template-columns: 1fr;
gap: 25px;
}
}
.blog-card:hover {
transform: translateY(-8px);
border-color: rgba(3, 153, 174, 0.2);
box-shadow: 0 12px 35px rgba(3, 153, 174, 0.15);
}
.blog-image {
width: 100%;
height: 220px;
position: relative;
overflow: hidden;
transition: all 0.4s;
}
.blog-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s;
}
.blog-card:hover .blog-image img {
transform: scale(1.1);
}
.blog-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(3, 153, 174, 0.3) 0%, transparent 100%);
opacity: 0;
transition: opacity 0.4s;
z-index: 1;
}
.blog-card:hover .blog-image::before {
opacity: 1;
}
.carousel-prev-blog,
.carousel-next-blog {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--white);
border: 1px solid #ddd;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.carousel-prev-blog:hover,
.carousel-next-blog:hover {
background: #0399ae;
color: var(--white);
border-color: #0399ae;
box-shadow: 0 4px 15px rgba(3, 153, 174, 0.3);
}
.carousel-prev-blog {
left: -20px;
}
.carousel-next-blog {
right: -20px;
}
@media (max-width: 768px) {
.carousel-prev-blog {
left: -10px;
}
.carousel-next-blog {
right: -10px;
}
.carousel-prev-blog,
.carousel-next-blog {
width: 35px;
height: 35px;
font-size: 14px;
}
}
.blog-badge {
position: absolute;
top: 15px;
right: 15px;
background: var(--accent-color);
color: var(--text-dark);
padding: 6px 15px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
z-index: 2;
}
.blog-content {
padding: 25px;
flex: 1;
display: flex;
flex-direction: column;
}
.blog-date {
color: var(--text-light);
font-size: 13px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
font-weight: 400;
}
.blog-date i {
font-size: 12px;
color: #0399ae;
}
.blog-title {
font-size: 20px;
font-weight: 600;
color: #000;
margin-bottom: 12px;
font-family: "Literata", serif;
line-height: 1.4;
transition: color 0.3s;
flex: 1;
}
.blog-title a {
color: inherit;
text-decoration: none;
transition: color 0.3s;
}
.blog-title a:hover {
color: #0399ae;
}
.blog-card:hover .blog-title,
.blog-card:hover .blog-title a {
color: #0399ae;
}
.blog-excerpt {
font-size: 14px;
color: var(--text-light);
line-height: 1.6;
margin-bottom: 20px;
font-family: "Poppins", sans-serif;
}
.blog-link {
color: #0399ae;
text-decoration: none;
font-weight: 600;
font-size: 15px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s;
margin-top: auto;
}
.blog-link i {
transition: transform 0.3s;
}
.blog-link:hover {
color: #027a8a;
gap: 12px;
}
.blog-link:hover i {
transform: translateX(5px);
}
@media (max-width: 768px) {
.blogs-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.blogs-header .section-title {
font-size: 28px;
}
.blogs-header .section-subtitle {
font-size: 16px;
}
.blog-image {
height: 200px;
font-size: 60px;
}
.blog-content {
padding: 20px;
}
}
/* CTA Section */
.cta-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: var(--white);
padding: 80px 0;
text-align: center;
}
.cta-content h2 {
font-size: 36px;
margin-bottom: 20px;
}
.cta-content p {
font-size: 18px;
margin-bottom: 30px;
opacity: 0.9;
}
/* Footer */
.main-footer {
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
color: var(--white);
padding: 70px 0 30px 0;
position: relative;
overflow: hidden;
}
.main-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('../images/cta-bg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.05;
z-index: 1;
}
.main-footer .container {
position: relative;
z-index: 2;
}
.footer-content {
margin-bottom: 30px;
}
.footer-main {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 50px;
align-items: start;
}
.footer-logo-link {
display: inline-block;
margin-bottom: 15px;
transition: opacity 0.3s;
}
.footer-logo-link:hover {
opacity: 0.8;
}
.footer-logo-link img {
height: 50px;
width: auto;
filter: brightness(0) invert(1);
}
.footer-logo p {
font-size: 14px;
color: rgba(255,255,255,0.7);
margin-bottom: 20px;
}
.social-links {
display: flex;
gap: 12px;
margin-top: 20px;
}
.social-links a {
width: 38px;
height: 38px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
color: var(--white);
text-decoration: none;
}
.social-links a:hover {
background: #0399ae;
transform: translateY(-3px);
}
.footer-links-grid {
display: grid;
grid-template-columns: 1fr 2fr 2fr; /* first small, next two big */
gap: 20px;
}
.footer-link-group h4 {
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
color: var(--white);
font-family: "Literata", serif;
}
.footer-link-group ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-link-group ul li {
margin-bottom: 8px;
}
.footer-link-group a {
color: rgba(255,255,255,0.7);
text-decoration: none;
font-size: 14px;
transition: all 0.3s;
display: inline-block;
}
.footer-link-group a:hover {
color: #0399ae;
padding-left: 5px;
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.footer-accreditations {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.accreditation-badge {
background: rgba(255,255,255,0.1);
padding: 6px 12px;
border-radius: 5px;
font-size: 11px;
font-weight: 600;
color: rgba(255,255,255,0.9);
transition: all 0.3s;
}
.accreditation-badge:hover {
background: rgba(3, 153, 174, 0.3);
color: var(--white);
}
.footer-copyright {
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.footer-copyright p {
margin: 0;
font-size: 13px;
color: rgba(255,255,255,0.7);
}
.footer-copyright p a{
color: #0399ae;
text-decoration: none;
}
.footer-legal {
display: flex;
gap: 10px;
align-items: center;
font-size: 12px;
}
.footer-legal a {
color: rgba(255,255,255,0.7);
text-decoration: none;
transition: color 0.3s;
}
.footer-legal a:hover {
color: #0399ae;
}
.footer-legal span {
color: rgba(255,255,255,0.4);
}
@media (max-width: 992px) {
.footer-main {
grid-template-columns: 1fr;
gap: 30px;
}
.footer-links-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.main-footer {
padding: 30px 0 15px;
}
.footer-links-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.footer-bottom {
flex-direction: column;
text-align: center;
gap: 15px;
}
.footer-copyright {
text-align: center;
align-items: center;
}
.footer-accreditations {
justify-content: center;
}
}
/* Chat Widget */
.whatsapp-widget {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 1000;
}
.whatsapp-icon {
width: 60px;
height: 60px;
background: #25D366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 28px;
box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4);
transition: all 0.3s ease;
text-decoration: none;
animation: pulse 2s infinite;
}
.whatsapp-icon:hover {
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6);
background: #20BA5A;
}
@keyframes pulse {
0% {
box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4);
}
50% {
box-shadow: 0 5px 25px rgba(37, 211, 102, 0.6);
}
100% {
box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4);
}
}
/* Tablet Responsive */
@media (max-width: 992px) {
.main-nav ul {
gap: 20px;
}
.header-actions .btn-primary {
padding: 10px 25px;
font-size: 14px;
}
}
/* Mobile Responsive */
@media (max-width: 768px) {
.hero-content,
.placement-content {
grid-template-columns: 1fr;
}
.header-content {
padding: 10px 20px;
}
.logo img {
width: 70px;
}
.main-nav {
position: fixed;
top: 0;
right: -100%;
width: 85%;
max-width: 350px;
height: 100vh;
background: #fff;
box-shadow: -2px 0 15px rgba(0, 0, 0, 0.15);
transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
padding: 90px 25px 30px;
overflow-y: auto;
}
.main-nav.active {
right: 0;
}
.main-nav ul {
flex-direction: column;
gap: 0;
align-items: flex-start;
}
.main-nav ul li {
width: 100%;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.main-nav ul li:last-child {
border-bottom: none;
}
.main-nav a {
display: block;
padding: 18px 0;
font-size: 16px;
color: #333;
transition: all 0.3s ease;
font-weight: 500;
position: relative;
}
.main-nav a::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 2px;
background: #0399ae;
transition: width 0.3s ease;
}
.main-nav a:hover {
color: #0399ae;
padding-left: 15px;
}
.main-nav a:hover::before {
width: 8px;
}
.mobile-menu-toggle {
display: flex;
}
.header-actions.desktop-actions {
display: none;
}
.header-actions.mobile-actions {
display: flex;
width: 100%;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.header-actions.mobile-actions .btn-primary {
width: 100%;
text-align: center;
justify-content: center;
}
/* Mobile Menu Overlay */
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 999;
}
.mobile-menu-overlay.active {
opacity: 1;
visibility: visible;
}
.hero-text h1 {
font-size: 32px;
}
.section-title {
font-size: 28px;
}
.courses-grid,
.universities-grid {
grid-template-columns: 1fr;
}
.footer-content {
grid-template-columns: 1fr;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
}
/* Breadcrumb Section */
.breadcrumb-section {
background: var(--white);
padding: 20px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
margin-top: 0px;
}
.breadcrumb-nav {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
}
.breadcrumb-nav a {
color: var(--text-light);
text-decoration: none;
transition: color 0.3s;
}
.breadcrumb-nav a:hover {
color: #0399ae;
}
.breadcrumb-separator {
color: var(--text-light);
font-size: 12px;
}
.breadcrumb-current {
color: #000;
font-weight: 600;
}
/* Company Content Section */
.company-content-section {
background: var(--white);
padding: 60px 0;
}
.company-content-wrapper {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 20px;
align-items: start;
}
.company-text .section-title {
text-align: left;
margin-bottom: 10px;
font-size: 36px;
font-weight: 700;
color: #0399ae;
font-family: "Literata", serif;
}
.company-description {
line-height: 1.8;
}
.company-description p {
font-size: 15px;
color: var(--text-light);
margin-bottom: 10px;
text-align: justify;
}
.company-image {
position: relative;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
transition: all 0.4s;
}
.company-image:hover {
transform: translateY(-5px);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}
.company-image img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
transition: transform 0.4s;
}
.company-image:hover img {
transform: scale(1.05);
}
@media (max-width: 992px) {
.company-content-wrapper {
grid-template-columns: 1fr;
gap: 40px;
}
.company-image {
order: -1;
}
}
@media (max-width: 768px) {
.breadcrumb-section {
margin-top: 70px;
padding: 15px 0;
}
.company-content-section {
padding: 40px 0;
}
.company-text .section-title {
font-size: 28px;
}
.company-description p {
font-size: 15px;
text-align: left;
}
.company-stats {
grid-template-columns: 1fr;
}
}
/* About Us Page Styles */
.about-hero-section {
background: linear-gradient(135deg, rgba(3, 153, 174, 0.1) 0%, rgba(3, 153, 174, 0.05) 100%);
padding: 80px 0 60px;
text-align: center;
position: relative;
overflow: hidden;
}
.about-hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
z-index: 1;
}
.about-hero-content {
position: relative;
z-index: 2;
}
.about-hero-section h1 {
font-size: 46px;
font-weight: 700;
color: #000;
margin-bottom: 10px;
font-family: "Literata", serif;
padding: 20px 0 0 0;
}
.about-hero-subtitle {
font-size: 22px;
color: var(--text-light);
font-weight: 300;
max-width: 700px;
margin: 0 auto;
}
/* Mission & Vision Section */
.mission-vision-section {
background: var(--white);
padding: 80px 0;
}
.mission-vision-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
.mission-card,
.vision-card {
background: linear-gradient(135deg, rgba(3, 153, 174, 0.05) 0%, rgba(3, 153, 174, 0.02) 100%);
padding: 50px 40px;
border-radius: 20px;
text-align: center;
border: 2px solid transparent;
transition: all 0.4s;
}
.mission-card:hover,
.vision-card:hover {
border-color: rgba(3, 153, 174, 0.3);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(3, 153, 174, 0.15);
}
/* Contact Page Styles */
.contact-hero-section {
padding-bottom: 40px;
}
.contact-section {
background: var(--white);
padding: 80px 0 60px;
}
.contact-header .section-title {
text-align: center;
font-family: "Literata", serif;
font-size: 36px;
color: #000;
margin-bottom: 10px;
}
.contact-header .section-subtitle {
text-align: center;
max-width: 700px;
margin: 0 auto 40px;
color: var(--text-light);
}
.contact-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 30px;
align-items: flex-start;
}
.contact-form-card,
.contact-info-card {
background: linear-gradient(135deg, rgba(3, 153, 174, 0.04) 0%, rgba(3, 153, 174, 0.01) 100%);
border-radius: 18px;
padding: 30px 28px;
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(3, 153, 174, 0.1);
}
.contact-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.contact-form .form-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.contact-form .form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.contact-form label {
font-size: 14px;
font-weight: 500;
color: #000;
}
.contact-form input,
.contact-form textarea {
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.12);
padding: 10px 12px;
font-size: 14px;
outline: none;
transition: border-color 0.3s, box-shadow 0.3s;
}
.contact-form input:focus,
.contact-form textarea:focus {
border-color: #0399ae;
box-shadow: 0 0 0 3px rgba(3, 153, 174, 0.15);
}
.contact-form textarea {
resize: vertical;
}
.contact-submit-btn {
margin-top: 8px;
display: flex;
align-items: center;
gap: 8px;
background: #0399ae;
color: #fff;
text-align: center;
justify-content: center;
border: #0399ae solid 1px;
padding: 12px 0 12px 0;
}
.contact-submit-btn:hover{
background: #0399ae;
color: #fff;
}
.contact-submit-btn i {
font-size: 14px;
}
.contact-info-card h3 {
font-size: 24px;
font-family: "Literata", serif;
margin-bottom: 10px;
color: #000;
}
.contact-info-card > p {
font-size: 14px;
color: var(--text-light);
margin-bottom: 20px;
}
.contact-info-list {
display: flex;
flex-direction: column;
gap: 50px;
margin-bottom: 20px;
}
.contact-info-item {
display: flex;
gap: 14px;
align-items: flex-start;
}
.contact-info-icon {
width: 40px;
height: 40px;
border-radius: 12px;
background: linear-gradient(135deg, #0399ae 0%, #027a8a 100%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
flex-shrink: 0;
}
.contact-info-icon i {
font-size: 18px;
}
.contact-info-content h4 {
font-size: 15px;
font-weight: 600;
margin-bottom: 4px;
color: #000;
}
.contact-info-content p {
font-size: 16px;
color: var(--text-light);
margin: 0;
}
.contact-highlights {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 10px;
}
.contact-highlight {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text-light);
}
.contact-highlight i {
color: #0399ae;
}
.contact-map-section {
background: linear-gradient(135deg, rgba(3, 153, 174, 0.05) 0%, rgba(3, 153, 174, 0.02) 100%);
padding: 60px 0 80px;
}
.contact-map-content {
text-align: center;
margin-bottom: 30px;
}
.contact-map-content h3 {
font-size: 26px;
font-family: "Literata", serif;
margin-bottom: 10px;
color: #000;
}
.contact-map-content p {
font-size: 14px;
color: var(--text-light);
}
.contact-map-wrapper {
width: 100%;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.contact-map-wrapper iframe {
width: 100%;
height: 450px;
border: none;
display: block;
}
@media (max-width: 992px) {
.contact-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.contact-section {
padding: 60px 0 40px;
}
.contact-header .section-title {
font-size: 30px;
}
.contact-map-wrapper iframe {
height: 350px;
}
.whatsapp-widget {
bottom: 20px;
right: 20px;
}
.whatsapp-icon {
width: 55px;
height: 55px;
font-size: 24px;
}
}
.mission-icon,
.vision-icon {
width: 80px;
height: 80px;
margin: 0 auto 25px;
background: linear-gradient(135deg, #0399ae 0%, #027a8a 100%);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s;
}
.mission-card:hover .mission-icon,
.vision-card:hover .vision-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 10px 30px rgba(3, 153, 174, 0.4);
}
.mission-icon i,
.vision-icon i {
font-size: 36px;
color: var(--white);
}
.mission-card h3,
.vision-card h3 {
font-size: 28px;
font-weight: 700;
color: #000;
margin-bottom: 20px;
font-family: "Literata", serif;
}
.mission-card p,
.vision-card p {
font-size: 16px;
line-height: 1.8;
color: var(--text-light);
}
/* Our Story Section */
.our-story-section {
background: linear-gradient(135deg, rgba(3, 153, 174, 0.03) 0%, rgba(3, 153, 174, 0.01) 100%);
}
.story-content {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 60px;
align-items: start;
}
.story-text .section-title {
text-align: left;
margin-bottom: 20px;
}
.story-intro {
font-size: 18px;
color: var(--text-light);
margin-bottom: 40px;
line-height: 1.8;
}
.story-timeline {
position: relative;
padding-left: 40px;
}
.story-timeline::before {
content: '';
position: absolute;
left: 15px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, #0399ae 0%, rgba(3, 153, 174, 0.3) 100%);
}
.timeline-item {
position: relative;
margin-bottom: 40px;
padding-left: 30px;
}
.timeline-item::before {
content: '';
position: absolute;
left: -25px;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #0399ae;
border: 3px solid var(--white);
box-shadow: 0 0 0 3px rgba(3, 153, 174, 0.2);
}
.timeline-year {
font-size: 20px;
font-weight: 700;
color: #0399ae;
margin-bottom: 8px;
font-family: "Literata", serif;
}
.timeline-content h4 {
font-size: 20px;
font-weight: 600;
color: #000;
margin-bottom: 8px;
font-family: "Literata", serif;
}
.timeline-content p {
font-size: 15px;
color: var(--text-light);
line-height: 1.6;
}
.story-image {
display: flex;
align-items: center;
justify-content: center;
}
.story-visual {
width: 300px;
height: 300px;
background: linear-gradient(135deg, rgba(3, 153, 174, 0.1) 0%, rgba(3, 153, 174, 0.05) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.story-visual::before {
content: '';
position: absolute;
inset: -10px;
border-radius: 50%;
border: 3px solid rgba(3, 153, 174, 0.2);
animation: pulse 2s ease-in-out infinite;
}
.story-visual i {
font-size: 120px;
color: #0399ae;
z-index: 1;
position: relative;
}
/* Values Section */
.values-section {
background: var(--white);
}
.values-header {
text-align: center;
margin-bottom: 50px;
}
.values-header .section-title {
color: #000;
font-size: 36px;
font-weight: 700;
margin-bottom: 15px;
font-family: "Literata", serif;
text-align: center;
}
.values-header .section-subtitle {
font-size: 18px;
color: var(--text-light);
font-weight: 300;
max-width: 600px;
margin: 0 auto;
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.value-card {
background: linear-gradient(135deg, rgba(3, 153, 174, 0.05) 0%, rgba(3, 153, 174, 0.02) 100%);
padding: 35px 30px;
border-radius: 20px;
text-align: center;
border: 2px solid transparent;
transition: all 0.4s;
}
.value-card:hover {
border-color: rgba(3, 153, 174, 0.3);
transform: translateY(-8px);
box-shadow: 0 12px 35px rgba(3, 153, 174, 0.15);
}
.value-icon-wrapper {
width: 70px;
height: 70px;
margin: 0 auto 20px;
background: linear-gradient(135deg, #0399ae 0%, #027a8a 100%);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s;
}
.value-card:hover .value-icon-wrapper {
transform: scale(1.1) rotate(-5deg);
box-shadow: 0 10px 30px rgba(3, 153, 174, 0.4);
}
.value-icon-wrapper i {
font-size: 32px;
color: var(--white);
}
.value-card h4 {
font-size: 20px;
font-weight: 600;
color: #000;
margin-bottom: 12px;
font-family: "Literata", serif;
transition: color 0.3s;
}
.value-card:hover h4 {
color: #0399ae;
}
.value-card p {
font-size: 15px;
line-height: 1.6;
color: var(--text-light);
margin: 0;
}
/* Achievements Section */
.achievements-section {
background: linear-gradient(135deg, rgba(3, 153, 174, 0.05) 0%, rgba(3, 153, 174, 0.02) 100%);
}
.achievements-header {
text-align: center;
margin-bottom: 50px;
}
.achievements-header .section-title {
color: #000;
font-size: 36px;
font-weight: 700;
margin-bottom: 15px;
font-family: "Literata", serif;
text-align: center;
}
.achievements-header .section-subtitle {
font-size: 18px;
color: var(--text-light);
font-weight: 300;
max-width: 600px;
margin: 0 auto;
}
.achievements-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
}
.achievement-item {
background: var(--white);
padding: 35px 25px;
border-radius: 15px;
text-align: center;
border: 2px solid transparent;
transition: all 0.4s;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.achievement-item:hover {
border-color: rgba(3, 153, 174, 0.3);
transform: translateY(-5px);
box-shadow: 0 12px 35px rgba(3, 153, 174, 0.15);
}
.achievement-number {
font-size: 48px;
font-weight: 700;
color: #0399ae;
margin-bottom: 10px;
font-family: "Literata", serif;
line-height: 1;
}
.achievement-label {
font-size: 16px;
color: var(--text-light);
font-weight: 500;
}
/* Course Detail Page */
.course-detail-hero {
padding-bottom: 40px;
}
.course-detail-section {
background: var(--white);
padding: 70px 0 60px;
}
.course-detail-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 30px;
align-items: flex-start;
}
.course-detail-card {
background: #ffffff;
border-radius: 18px;
padding: 28px 24px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.05);
margin-bottom: 20px;
}
.course-detail-card .section-title {
text-align: left;
font-size: 26px;
margin-bottom: 12px;
}
.course-detail-text {
font-size: 15px;
color: var(--text-light);
margin-bottom: 18px;
line-height: 1.8;
}
.course-highlights {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.course-highlight-item {
display: flex;
align-items: flex-start;
gap: 10px;
}
.course-highlight-item i {
width: 34px;
height: 34px;
border-radius: 12px;
background: rgba(3, 153, 174, 0.08);
display: flex;
align-items: center;
justify-content: center;
color: #0399ae;
flex-shrink: 0;
}
.course-highlight-item h4 {
font-size: 15px;
margin: 0 0 2px;
color: #000;
}
.course-highlight-item p {
font-size: 13px;
margin: 0;
color: var(--text-light);
}
.curriculum-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin-top: 10px;
}
.curriculum-column h4 {
font-size: 15px;
font-weight: 600;
margin-bottom: 8px;
color: #000;
}
.curriculum-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.curriculum-column ul li {
font-size: 13px;
color: var(--text-light);
margin-bottom: 4px;
position: relative;
padding-left: 14px;
}
.curriculum-column ul li::before {
content: '•';
position: absolute;
left: 0;
color: #0399ae;
}
.inner-accreditations-sec{
padding: 0 0 0 0;
}
.inner-accreditations-sec .accrediation-sec {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0px 0 0 0;
gap: 12px;
}
.outcomes-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-top: 10px;
}
.outcome-item {
display: flex;
align-items: center;
gap: 10px;
}
.outcome-item i {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(3, 153, 174, 0.08);
display: flex;
align-items: center;
justify-content: center;
color: #0399ae;
flex-shrink: 0;
}
.outcome-item p {
margin: 0;
font-size: 14px;
color: var(--text-light);
}
.course-detail-sidebar {
display: flex;
flex-direction: column;
gap: 18px;
}
.course-summary-card {
background: #ffffff;
border-radius: 18px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.course-summary-image {
width: 100%;
height: 180px;
overflow: hidden;
}
.course-summary-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.course-summary-body {
padding: 18px 18px 20px;
}
.course-summary-body h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
color: #000;
font-family: "Literata", serif;
}
.course-summary-card h4 {
font-size: 16px;
font-weight: 600;
margin: 14px 18px 6px;
color: #000;
font-family: "Literata", serif;
}
.course-summary-list {
list-style: none;
padding: 0 18px 14px;
margin: 0;
}
.course-summary-list li {
font-size: 13px;
color: var(--text-light);
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 8px;
}
.course-summary-list i {
color: #0399ae;
font-size: 14px;
}
@media (max-width: 992px) {
.course-detail-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.course-detail-section {
padding: 60px 0 40px;
}
.course-highlights,
.curriculum-grid,
.outcomes-grid {
grid-template-columns: 1fr;
}
}
/* Program Benefits Section */
.program-benefits-section {
background: var(--white);
padding: 80px 0;
}
.program-benefits-header {
text-align: center;
margin-bottom: 50px;
}
.program-benefits-header .section-title {
color: #000;
font-size: 36px;
font-weight: 700;
margin-bottom: 15px;
font-family: "Literata", serif;
text-align: center;
}
.program-benefits-header .section-subtitle {
font-size: 18px;
color: var(--text-light);
font-weight: 300;
max-width: 700px;
margin: 0 auto;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
padding: 20px 0;
}
.benefit-card {
background: var(--white);
backdrop-filter: blur(10px);
padding: 35px 30px;
border-radius: 20px;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.benefit-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(3, 153, 174, 0.1), transparent);
transition: left 0.5s;
}
.benefit-card:hover::before {
left: 100%;
}
.benefit-card:hover {
transform: translateY(-10px);
background: var(--white);
border-color: rgba(3, 153, 174, 0.3);
box-shadow: 0 15px 40px rgba(3, 153, 174, 0.15);
}
.benefit-icon-wrapper {
width: 80px;
height: 80px;
margin: 0 auto 25px;
background: linear-gradient(135deg, #0399ae 0%, #027a8a 100%);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.4s;
}
.benefit-icon-wrapper::after {
content: '';
position: absolute;
inset: -3px;
border-radius: 20px;
padding: 3px;
background: linear-gradient(135deg, #0399ae, #027a8a);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s;
}
.benefit-card:hover .benefit-icon-wrapper {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 10px 30px rgba(3, 153, 174, 0.4);
}
.benefit-card:hover .benefit-icon-wrapper::after {
opacity: 1;
}
.benefit-icon-wrapper i {
font-size: 36px;
color: var(--white);
z-index: 1;
}
.benefit-card h4 {
font-size: 20px;
font-weight: 600;
margin-bottom: 12px;
color: #000;
transition: color 0.3s;
font-family: "Literata", serif;
}
.benefit-card:hover h4 {
color: #0399ae;
}
.benefit-card p {
font-size: 15px;
line-height: 1.6;
color: var(--text-light);
margin: 0;
}
@media (max-width: 992px) {
.benefits-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.program-benefits-section {
padding: 60px 0;
}
.program-benefits-header .section-title {
font-size: 28px;
}
.program-benefits-header .section-subtitle {
font-size: 16px;
}
.benefits-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.benefit-card {
padding: 30px 25px;
}
}
/* Course Query Form Section */
.course-query-section {
background: linear-gradient(135deg, rgba(3, 153, 174, 0.05) 0%, rgba(3, 153, 174, 0.02) 100%);
position: relative;
overflow: hidden;
}
.course-query-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.4;
z-index: 1;
}
.course-query-section .container {
position: relative;
z-index: 2;
}
.course-query-wrapper {
max-width: 900px;
margin: 0 auto;
}
.course-query-header {
text-align: center;
margin-bottom: 40px;
}
.course-query-header .section-title {
color: #000;
font-size: 32px;
font-weight: 700;
margin-bottom: 12px;
font-family: "Literata", serif;
text-align: center;
}
.course-query-header .section-subtitle {
font-size: 16px;
color: var(--text-light);
font-weight: 300;
max-width: 600px;
margin: 0 auto;
}
.course-query-form-card {
background: var(--white);
border-radius: 20px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.course-query-form .form-label {
font-size: 14px;
font-weight: 500;
color: #000;
margin-bottom: 8px;
}
.course-query-form .form-control,
.course-query-form .form-select {
font-size: 14px;
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.15);
padding: 10px 15px;
transition: all 0.3s;
}
.course-query-form .form-control:focus,
.course-query-form .form-select:focus {
border-color: #0399ae;
box-shadow: 0 0 0 0.2rem rgba(3, 153, 174, 0.15);
outline: none;
}
.course-query-form textarea.form-control {
resize: vertical;
min-height: 120px;
}
@media (max-width: 768px) {
.course-query-header .section-title {
font-size: 26px;
}
.course-query-form-card {
padding: 30px 20px;
}
}
/* Apply Now Modal */
.apply-modal .modal-content {
border-radius: 20px;
border: none;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.apply-modal .modal-body {
padding: 30px 30px 25px;
}
.apply-modal .modal-title {
font-family: "Literata", serif;
font-size: 24px;
font-weight: 700;
margin-bottom: 6px;
}
.apply-modal .modal-subtitle {
font-size: 14px;
color: var(--text-light);
margin-bottom: 18px;
}
.apply-form .form-label {
font-size: 13px;
font-weight: 500;
color: #000;
}
.apply-form .form-control,
.apply-form .form-select {
font-size: 14px;
border-radius: 10px;
}
.apply-modal-close {
position: absolute;
top: 12px;
right: 12px;
z-index: 5;
}
.modal-dialog .btn-cta-primary {
margin-top: 8px;
display: flex;
align-items: center;
gap: 8px;
background: #0399ae;
color: #fff;
text-align: center;
justify-content: center;
border: #0399ae solid 1px;
padding: 12px 0 12px 0;
}
.apply-modal-image {
border-radius: 18px;
overflow: hidden;
height: 100%;
min-height: 260px;
display: flex;
align-items: stretch;
justify-content: center;
padding: 0;
}
.apply-modal-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 768px) {
.apply-modal .modal-body {
padding: 20px 18px 18px;
}
.apply-modal-image {
margin-top: 10px;
min-height: 200px;
}
}
@media (max-width: 992px) {
.mission-vision-grid {
grid-template-columns: 1fr;
}
.story-content {
grid-template-columns: 1fr;
}
.story-visual {
width: 250px;
height: 250px;
}
.story-visual i {
font-size: 100px;
}
.values-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
}
@media (max-width: 768px) {
.about-hero-section h1 {
font-size: 36px;
}
.about-hero-subtitle {
font-size: 18px;
}
.mission-card,
.vision-card {
padding: 35px 25px;
}
.story-timeline {
padding-left: 30px;
}
.values-grid {
grid-template-columns: 1fr;
}
.achievements-grid {
grid-template-columns: repeat(2, 1fr);
}
.achievement-number {
font-size: 36px;
}
}
/* Blog Detail Section */
.blog-detail-section {
background: var(--white);
padding: 70px 0 60px;
}
.blog-detail-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 30px;
align-items: flex-start;
}
.blog-detail-card {
background: #ffffff;
border-radius: 18px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.blog-detail-meta {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.blog-detail-meta span {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-light);
margin-bottom: 0;
}
.blog-detail-meta i {
color: #0399ae;
}
.blog-detail-image {
width: 100%;
margin-bottom: 30px;
border-radius: 12px;
overflow: hidden;
}
.blog-detail-image img {
width: 100%;
height: auto;
display: block;
}
.blog-detail-content {
line-height: 1.8;
color: #333;
}
.blog-detail-content h2 {
font-size: 28px;
font-family: "Literata", serif;
color: #000;
margin-top: 35px;
margin-bottom: 15px;
font-weight: 600;
}
.blog-detail-content h2:first-of-type {
margin-top: 0;
}
.blog-detail-content p {
font-size: 16px;
margin-bottom: 20px;
color: #555;
font-family: "Poppins", sans-serif;
}
.blog-detail-content ul {
margin: 20px 0;
padding-left: 25px;
}
.blog-detail-content ul li {
font-size: 16px;
margin-bottom: 12px;
color: #555;
line-height: 1.7;
}
.blog-detail-content ul li strong {
color: #000;
font-weight: 600;
}
.blog-detail-share {
margin-top: 40px;
padding-top: 30px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.blog-detail-share h4 {
font-size: 18px;
margin-bottom: 15px;
color: #000;
font-family: "Literata", serif;
}
.social-share-buttons {
display: flex;
gap: 12px;
}
.social-share-btn {
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
transition: all 0.3s;
font-size: 18px;
}
.social-share-btn.facebook {
background: #1877f2;
}
.social-share-btn.twitter {
background: #1da1f2;
}
.social-share-btn.linkedin {
background: #0077b5;
}
.social-share-btn.whatsapp {
background: #25d366;
}
.social-share-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* Blog Sidebar */
.blog-detail-sidebar {
display: flex;
flex-direction: column;
gap: 25px;
}
.blog-sidebar-card {
background: #ffffff;
border-radius: 18px;
padding: 30px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.blog-sidebar-card h3 {
font-size: 22px;
font-family: "Literata", serif;
color: #000;
margin-bottom: 20px;
font-weight: 600;
}
.related-blog-item {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.related-blog-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.related-blog-item a {
text-decoration: none;
color: inherit;
display: block;
transition: color 0.3s;
}
.related-blog-item a:hover {
color: #0399ae;
}
.related-blog-item h4 {
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
color: #000;
line-height: 1.4;
}
.related-blog-date {
font-size: 13px;
color: var(--text-light);
}
.blog-sidebar-card p {
font-size: 14px;
color: #555;
margin-bottom: 20px;
line-height: 1.6;
}
.blog-sidebar-card .btn-cta-primary {
width: 100%;
text-align: center;
display: block;
}
@media (max-width: 992px) {
.blog-detail-layout {
grid-template-columns: 1fr;
}
.blog-detail-card {
padding: 30px;
}
.blog-detail-content h2 {
font-size: 24px;
}
}
@media (max-width: 768px) {
.blog-detail-section {
padding: 60px 0 40px;
}
.blog-detail-card {
padding: 25px;
}
.blog-detail-content h2 {
font-size: 22px;
}
.blog-detail-content p,
.blog-detail-content ul li {
font-size: 15px;
}
.blog-detail-meta {
flex-direction: column;
gap: 12px;
}
}