body {
font-family: "Poppins", sans-serif !important;
}
/* Styling */
.timeline {
margin: 4em auto;
position: relative;
padding-left: 140px;
}
.timeline:before {
background-color: black;
content: '';
margin-left: 140px;
position: absolute;
top: 0;
left: 2em;
width: 2px;
height: 100%;
}
.timeline-event {
position: relative;
}
.timeline-event:hover .timeline-event-icon {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
background-color: #e67817;
}
.timeline-event:hover .timeline-event-thumbnail {
-moz-box-shadow: inset 40em 0 0 0 #f0f0f0;
-webkit-box-shadow: inset 40em 0 0 0 #f0f0f0;
box-shadow: inset 40em 0 0 0 #f0f0f0;
}
.timeline-event-copy {
padding: 2em;
position: relative;
top: -1.875em;
left: 4em;
width: 80%;
}
.timeline-event-copy h3 {
font-size: 1.75em;
}
.timeline-event-copy h4 {
font-size: 1.2em;
margin-bottom: 1.2em;
}
.timeline-event-copy strong {
font-weight: 700;
}
.timeline-event-copy p:not(.timeline-event-thumbnail) {
padding-bottom: 1.2em;
}
.timeline-event-icon {
-moz-transition: -moz-transform 0.2s ease-in;
-o-transition: -o-transform 0.2s ease-in;
-webkit-transition: -webkit-transform 0.2s ease-in;
transition: transform 0.2s ease-in;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background-color: black;
outline: 10px solid white;
display: block;
margin: 0.5em 0.5em 0.5em -0.5em;
position: absolute;
top: 0;
left: 2em;
width: 1em;
height: 1em;
}
.timeline-event-thumbnail {
-moz-transition: box-shadow 0.5s ease-in 0.1s;
-o-transition: box-shadow 0.5s ease-in 0.1s;
-webkit-transition: box-shadow 0.5s ease-in;
-webkit-transition-delay: 0.1s;
transition: box-shadow 0.5s ease-in 0.1s;
color: #ef662f;
font-size: 1.5em;
background-color: #f5f5f5;
-moz-box-shadow: inset 0 0 0 0em #ef795a;
-webkit-box-shadow: inset 0 0 0 0em #ef795a;
box-shadow: inset 0 0 0 0em #ef795a;
display: inline-block;
margin-bottom: 1.2em;
padding: 0.25em 1em 0.2em 1em;
}
.enquiry {
text-decoration: none;
z-index: 600;
position: fixed;
top: 125px;
right: 0px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
padding-top: 8px;
}
.premium-intro {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #fb5310, #ff7a2f, #fb5310);
padding: 20px 0;
color: #fff;
}
.intro-title {
font-size: 24px;
font-weight: 800;
margin-top: 20px !important;
}
.intro-title span {
font-weight: 700;
color: #fff3e8;
}
.intro-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 28px;
background: #ffffff;
color: #ef662f;
font-size: 15px;
font-weight: 900;
border-radius: 30px;
margin-top: 8px !important;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.intro-btn i {
transition: transform 0.3s ease;
}
.intro-btn:hover {
background: #fff3e8;
transform: translateY(-2px);
}
.intro-btn:hover i {
transform: translateX(5px);
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
/* ===== PROGRAMS PROFESSIONAL SECTION ===== */
.programs-pro-section {
padding: 10px 0;
margin-top: 10px;
font-family: 'Poppins', sans-serif;
}
/* CARD */
.program-pro-card {
background: #ffffff;
border: 1px solid #ececec;
border-radius: 7px;
padding: 20px 10px;
height: 100%;
/* EQUAL HEIGHT */
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border: 2px dotted #d95522;
}
/* ICON BOX */
.icon-box {
width: 64px;
height: 64px;
border-radius: 10px;
background: #fff4ef;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}
.icon-box i {
font-size: 26px;
color: #ef662f;
}
/* TITLE */
.program-pro-card h5 {
font-size: 16.5px;
font-weight: 700;
/* SAME TITLE HEIGHT */
color: #222;
}
/* TEXT */
.program-pro-card p {
font-size: 14.2px;
line-height: 1.8;
color: #555;
margin: 0;
flex-grow: 1;
/* CONTENT BALANCE */
}
/* RESPONSIVE */
@media (max-width: 768px) {
.program-pro-card {
padding: 30px 22px;
}
}
.luxury-legacy {
position: relative;
background-size: cover;
background-position: center;
padding: 50px 0;
}
.luxury-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #408992b2, #408992a2, #05363cab);
}
.luxury-legacy .container {
position: relative;
z-index: 2;
}
/* LEFT CONTENT */
.luxury-text {
color: #fff;
margin-top: 80px;
}
.luxury-tag {
font-size: 17px;
letter-spacing: 3px;
margin-bottom: -10px;
color: white;
font-weight: 900;
}
.luxury-text h2 {
font-size: 44px;
font-weight: 700;
line-height: 1.2;
margin: 18px 0;
}
.luxury-text p {
font-size: 16px;
line-height: 28px;
color: #d8d8d8;
max-width: 90%;
}
.luxury-stat {
border: 1px solid white;
padding: 20px;
padding-bottom: 10px !important;
text-align: center;
justify-content: center;
}
/* STATS GRID */
.luxury-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px 30px;
padding-left: 40px;
}
.luxury-icon {
font-size: 34px;
color: white;
margin-bottom: 12px;
margin-top: 12px;
}
.luxury-stat h1 {
font-size: 40px;
font-weight: 700;
color: #fff;
margin: 0;
}
.luxury-stat h1 span {
color: white;
}
.luxury-stat p {
font-size: 14px;
letter-spacing: 1px;
color: white;
text-transform: uppercase;
margin-top: 8px;
}
.premium-advantages {
padding: 70px 0;
font-family: 'Poppins', sans-serif;
background: #f8f9fc;
}
/* LEFT */
.adv-title {
margin-top: 100px;
top: 300px !important;
}
.adv-tag {
font-size: 12px;
letter-spacing: 2px;
color: #ef662f;
font-weight: 700;
}
.adv-title h2 {
font-size: 30px;
font-weight: 700;
margin: 14px 0;
}
.adv-title p {
font-size: 15px;
line-height: 25px;
color: #555;
}
/* COMPACT CARD */
.adv-card.compact {
background: #fff;
padding: 18px 20px;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
display: flex;
align-items: flex-start;
gap: 16px;
margin-top: 20px;
}
.adv-card.compact i {
font-size: 28px;
color: #ef662f;
flex-shrink: 0;
margin-top: 4px;
}
.adv-card.compact h5 {
font-size: 16.5px;
font-weight: 600;
margin-bottom: 6px;
}
.adv-card.compact p {
font-size: 14px;
line-height: 22px;
color: #666;
margin: 0;
}
.popular-category-section {
position: relative;
padding: 90px 0;
background: url("https://images.unsplash.com/photo-1573164574572-cb89e39749b4?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YnVzaW5lc3MlMjBtZWV0aW5nfGVufDB8fDB8fHww") center/cover no-repeat;
font-family: 'Poppins', sans-serif;
}
.popular-category-section::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, #408992b2, #408992a2, #05363cab);
}
.popular-category-section .container {
position: relative;
max-width: 1280px;
margin: auto;
text-align: center;
color: #fff;
z-index: 1;
}
/* Badge */
.popular-category-section .badge {
display: inline-block;
background: white;
color: black;
padding: 6px 18px;
font-size: 12px;
font-weight: 500;
border-radius: 20px;
margin-bottom: 10px;
letter-spacing: 0.6px;
}
/* Heading */
.popular-category-section .title {
font-size: 38px;
font-weight: 800;
margin-bottom: 40px;
margin-top: 10px;
}
/* GRID */
.category-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
/* CARD – CLEAN & PREMIUM */
.cat-card {
background: #ffffff;
padding: 26px 24px;
border-radius: 5px;
font-size: 18px;
font-weight: 600;
color: #1f2d3d;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
border: 3px dotted orange;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
transition: all 0.25s ease;
}
.cat-card img {
width: 40px;
height: 40px;
object-fit: contain;
}
/* SAFE HOVER */
.cat-card:hover {
border-color: #9a6b45;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}
/* Responsive */
@media (max-width: 992px) {
.category-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.category-grid {
grid-template-columns: 1fr;
}
.popular-category-section .title {
font-size: 32px;
}
}
/* ===== ULTRA PREMIUM ASSOCIATION SECTION ===== */
.assoc-ultra-section {
overflow: hidden;
width: 100%;
}
/* FULL ROW */
.assoc-row {
background: linear-gradient(135deg, #fb5310, #ff7a2f, #fb5310);
min-height: 480px;
font-family: 'Poppins', sans-serif;
}
/* LEFT SIDE ORANGE GRADIENT */
.assoc-left {
display: flex;
align-items: center;
padding: 80px;
padding-right: 0px !important;
}
.assoc-left-content {
max-width: 600px;
color: #fff;
margin-left: 80px;
}
.assoc-tag {
display: inline-block;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.25);
padding: 6px 18px;
border-radius: 30px;
margin-bottom: 18px;
}
.assoc-left-content h4 {
font-size: 30px;
font-weight: 700;
margin-bottom: 10px;
color: white !important;
}
.assoc-divider {
width: 80px;
height: 3px;
background: #fff;
margin-bottom: 20px;
}
.assoc-left-content p {
font-size: 16px;
line-height: 1.9;
text-align: justify;
opacity: 0.95;
}
/* RIGHT SIDE */
.assoc-right {
display: flex;
align-items: center;
}
/* SLIDER CARD */
.assoc-slider {
width: 94%;
background: #fff;
border-radius: 18px;
padding: 18px;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.30);
margin-top: 100px;
}
/* SLIDES */
.assoc-slides {
position: relative;
text-align: center;
}
.assoc-slide {
display: none;
width: 100%;
height: auto;
object-fit: contain;
/* IMAGE FULL VISIBLE */
border-radius: 14px;
}
.assoc-slide.active {
display: block;
}
/* DOTS */
.assoc-dots {
text-align: center;
margin-top: 16px;
}
.assoc-dots span {
width: 26px;
height: 4px;
background: #ccc;
border-radius: 20px;
margin: 0 4px;
display: inline-block;
cursor: pointer;
transition: 0.3s;
}
.assoc-dots span.active {
background: #fb5310;
}
/* RESPONSIVE */
@media(max-width: 768px) {
.assoc-left {
padding: 50px 25px;
text-align: center;
}
.assoc-divider {
margin: 0 auto 20px;
}
.assoc-slider {
width: 95%;
}
}
/* ===== Softpro Video Section ===== */
.sp-video-section {
padding: 70px 0;
background: linear-gradient(135deg, #f8f9fb, #ffffff);
}
.sp-video-title {
text-align: center;
font-size: 28px;
font-weight: 700;
color: #1f2937;
margin-bottom: 10px;
letter-spacing: 1px;
}
.sp-video-line {
width: 80px;
height: 4px;
background: #ef662f;
margin: 0 auto 40px;
border-radius: 50px;
}
.sp-video-row {
row-gap: 30px;
}
/* Video Card */
.sp-video-card {
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
transition: all 0.4s ease;
}
.sp-video-card iframe {
width: 100%;
height: 260px;
border: none;
}
/* Caption */
.sp-video-caption {
padding: 15px 10px;
text-align: center;
}
.sp-video-caption h4 {
font-size: 16px;
font-weight: 600;
color: #111827;
margin-bottom: 6px;
}
.sp-video-caption p {
font-size: 14px;
color: #6b7280;
margin: 0;
}
/* Hover Effect */
.sp-video-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 25px 55px rgba(0, 0, 0, 0.18);
}
/* Button */
.sp-video-btn-wrap {
text-align: center;
margin-top: 50px;
}
.sp-video-btn {
display: inline-block;
padding: 14px 35px;
background: #ef662f;
color: #ffffff;
font-size: 15px;
font-weight: 600;
border-radius: 50px;
text-decoration: none;
box-shadow: 0 12px 30px rgba(239, 102, 47, 0.35);
transition: all 0.3s ease;
}
.sp-video-btn i {
margin-left: 10px;
transition: transform 0.3s ease;
}
.sp-video-btn:hover i {
transform: translateX(6px);
}
/* Responsive */
@media (max-width: 768px) {
.sp-video-card iframe {
height: 220px;
}
}
/* ===== LEARNING PLATFORM (PREMIUM) ===== */
.learning-platform-section {
padding: 40px 0;
background: linear-gradient(180deg, #fff7f3, #ffffff);
}
/* TITLE */
.lp-title {
text-align: center;
font-size: 32px;
font-weight: 700;
color: #ef662f;
margin-bottom: 60px;
letter-spacing: 0.5px;
font-family: 'Poppins', sans-serif;
}
/* MAIN ROW CARD */
.lp-row {
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
padding: 50px 40px;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(10px);
}
/* LEFT CARD */
.lp-card {
background: linear-gradient(145deg, #ffffff, #fff1ea);
border-radius: 18px;
padding: 30px 10px;
box-shadow: 0 15px 35px rgba(239, 102, 47, 0.15);
transition: transform 0.4s ease;
}
.lp-card:hover {
transform: translateY(-8px);
}
/* LOGO */
.lp-logo {
max-width: 100%;
height: auto;
margin-bottom: 35px;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
}
/* BUTTON */
.lp-btn {
width: 100%;
background: linear-gradient(135deg, #ef662f, #ff8c5a);
color: #fff;
border: none;
padding: 16px;
font-size: 16px;
font-weight: 600;
border-radius: 10px;
transition: all 0.35s ease;
box-shadow: 0 10px 25px rgba(239, 102, 47, 0.35);
}
.lp-btn i {
margin-left: 10px;
}
.lp-btn:hover {
background: linear-gradient(135deg, #d95522, #ef662f);
box-shadow: 0 15px 35px rgba(239, 102, 47, 0.5);
}
/* RIGHT CONTENT */
.lp-content-card {
padding-left: 20px;
}
.lp-content-card p {
font-size: 15.2px;
line-height: 1.9;
color: #444;
margin-bottom: 18px;
font-family: 'Poppins', sans-serif;
}
/* HIGHLIGHT TEXT */
.lp-highlight {
background: #fff4ee;
border-left: 5px solid #ef662f;
padding: 16px 18px;
font-weight: 500;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.lp-row {
padding: 30px 20px;
}
.lp-title {
font-size: 26px;
}
.lp-content-card {
padding-left: 0;
}
}
/* ===== PARTNERS SECTION ===== */
.sp-partners-section {
position: relative;
padding: 90px 0;
background-image: url('img/bg1.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: 'Poppins', sans-serif;
z-index: 1;
/* navbar ke niche */
}
.sp-partners-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #408992b2, #408992a2, #05363cab);
z-index: 0;
}
.sp-partners-container {
position: relative;
z-index: 2;
}
/* ===== HEADING ===== */
.sp-partners-head {
margin-bottom: 50px;
}
.sp-partners-tag {
color: white;
font-weight: 700;
letter-spacing: 3px;
font-size: 13px;
}
.sp-partners-head h2 {
font-size: 42px;
font-weight: 700;
color: #fff;
margin: 10px 0;
}
.sp-partners-head p {
color: #d1d1d1;
max-width: 600px;
margin: auto;
font-size: 16px;
}
/* ===== SLIDER CARDS ===== */
.sp-partners-slider .sp-partner-card {
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 14px;
padding: 25px;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
.sp-partner-card img {
max-width: 120px;
max-height: 100px;
filter: grayscale(100%);
opacity: 0.85;
transition: all 0.4s ease;
}
/* Hover */
.sp-partner-card:hover {
transform: translateY(-8px);
border-color: #ef662f;
background: rgba(255, 255, 255, 1);
}
.sp-partner-card:hover img {
filter: grayscale(0);
opacity: 1;
transform: scale(1.05);
}
/* ===== OWL FIX (SCOPED) ===== */
.sp-partners-slider .owl-stage {
display: flex;
align-items: center;
}
.sp-partners-slider .owl-item {
padding: 10px;
}
.fullstack-section {
background: #f8f9fa;
padding: 60px 0;
}
.section-heading h4 {
font-weight: 800;
margin-bottom: 10px;
line-height: 27px;
font-size: 22px;
}
.section-tag {
display: inline-block;
font-size: 17px;
letter-spacing: 1px;
color: #ef662f;
font-weight: 800;
margin-bottom: 6px;
}
.section-heading p {
color: #555;
font-size: 15px;
line-height: 1.6;
}
.program-list {
list-style: none;
padding: 0;
margin: 0;
}
.program-card {
position: relative;
width: 100%;
max-width: 280px;
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
height: 350px;
}
.program-card img {
width: 100%;
height: 350px;
object-fit: contain;
padding: 15px;
}
.program-card:hover {
transform: translateY(-8px);
}
.program-overlay {
position: absolute;
bottom: 0;
width: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
color: #fff;
padding: 15px;
text-align: center;
}
.excellence-section {
background: url('https://www.ccl.org/wp-content/uploads/2020/11/even-conservative-organizations-can-innovate-center-for-creative-leadership.jpg') center/cover fixed no-repeat;
padding: 100px 0;
position: relative;
z-index: 1;
color: white;
}
.excellence-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.75);
z-index: -1;
}
.excellence-section .sub-title {
text-transform: uppercase;
font-weight: 600;
color: #ffc107;
font-size: 16px;
letter-spacing: 2px;
margin-bottom: 4px;
}
.excellence-section h2 {
font-size: 42px;
font-weight: 600;
}
.institute-card {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
color: #fff;
border-radius: 0px;
overflow: hidden;
transition: all 0.3s ease-in-out;
height: 100%;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
text-align: center;
}
.institute-card img {
width: 100%;
height: 220px;
object-fit: cover;
border-bottom: 3px solid white;
}
.institute-card h6 {
padding: 15px;
font-size: 16px;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.text-light {
color: white !important;
}
.btn-learn-more {
background-color: white;
color: white;
padding: 8px 20px;
font-weight: 600;
border-radius: 30px;
text-transform: uppercase;
font-size: 13px;
transition: 0.3s ease-in-out;
margin-bottom: 20px;
display: inline-block;
}
.btn-learn-more:hover {
background-color: #e0a800;
text-decoration: none;
color: #fff;
}
@media (max-width: 767px) {
.excellence-section h2 {
font-size: 28px;
}
.institute-card img {
height: 180px;
}
}
/* ===== EVENTS SECTION ===== */
.events-premium {
padding: 50px 0;
background: #fff;
}
.events-heading {
max-width: 750px;
margin: 0 auto 35px;
}
.events-title {
color: #ef662f;
font-weight: 800;
font-size: 32px;
margin-bottom: 10px;
}
.events-heading p {
color: #6b7280;
font-size: 15px;
}
/* Swiper */
.events-swiper {
padding-bottom: 50px;
}
.swiper-slide {
height: auto;
}
/* Card */
.event-card {
background: #fff;
border: 1px dashed #ef662f;
padding: 10px;
transition: 0.3s;
}
.event-card img {
width: 100%;
height: 250px;
object-fit: center !important;
}
.event-info {
padding: 14px;
text-align: center;
font-weight: 600;
background: #f9fafb;
}
/* Pagination */
.swiper-pagination-bullet {
background: #d1d5db;
opacity: 1;
}
.swiper-pagination-bullet-active {
background: #ef662f;
}
/* Responsive */
@media (max-width: 768px) {
.events-title {
font-size: 26px;
}
.event-card img {
height: 220px;
}
}
/* ========== SIMPLE PROFESSIONAL DESIGN ========== */
:root {
--primary: linear-gradient(to right, #ff6b35ff, #ff9b3dff);
--primary-light: #34495e;
--secondary: #FF6B35;
--accent: #e74c3c;
--light: #ffffff;
--off-white: #f8f9fa;
--gray: #7f8c8d;
--gray-light: #ecf0f1;
--border: #dfe6e9;
--shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
--radius: 8px;
}
/* HEADER */
.inner-head {
background-image: linear-gradient(to right, #ff6b35bc, #ff9b3daf), url('https://images.unsplash.com/photo-1423666639041-f56000c27a9a?q=80&w=1174&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
padding: 160px 0 70px !important;
background-size: cover;
position: relative;
overflow: hidden;
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
.inner-head::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
background-size: 500px;
opacity: 0.3;
}
.inner-head h4 {
font-size: 48px;
font-weight: 700;
color: white;
position: relative;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
body {
font-family: "Poppins", sans-serif;
color: var(--primary);
background: var(--light);
line-height: 1.6;
font-weight: 400;
}
.breadcrumb {
background: transparent;
padding: 0;
margin-bottom: 0;
}
.breadcrumb a {
color: rgba(255, 255, 255, 0.8);
}
.breadcrumb li.active {
color: var(--secondary);
}
/* MAIN CONTENT */
.main-content {
padding: 60px 0;
}
/* SECTION HEADER */
.section-header {
margin-bottom: 40px;
}
.section-title {
font-size: 28px;
font-weight: 700;
color: var(--primary);
margin-bottom: 15px;
position: relative;
padding-bottom: 15px;
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background: var(--secondary);
}
.section-subtitle {
font-size: 18px;
color: black;
margin-bottom: 20px;
font-weight: 700;
color: var(--secondary);
padding: 20px;
border-left: 4px solid var(--secondary);
box-shadow: var(--shadow);
}
/* CONTENT BOX */
.content-box {}
.content-box h3 {
font-size: 22px;
color: var(--primary);
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid var(--gray-light);
}
.content-box p {
margin-bottom: 20px;
font-size: 17px;
text-align: justify;
line-height: 34px;
margin-top: 20px;
color: black;
}
/* HIGHLIGHT SECTION */
.highlight-box {
background: var(--off-white);
border-left: 4px solid;
border: 2px dashed var(--secondary);
padding: 25px;
border-radius: 0px;
}
.highlight-box h4 {
color: var(--secondary) !important;
font-size: 22px;
}
/* STATS */
.stats-container {
display: flex;
flex-direction: column;
gap: 20px;
margin: 40px 0;
}
.stat-box {
flex: 1;
min-width: 200px;
background: var(--light);
padding: 25px;
border-radius: 0px;
box-shadow: var(--shadow);
text-align: center;
border-top: 4px solid var(--secondary);
}
.stat-number {
font-size: 36px;
font-weight: 700;
color: var(--secondary);
margin-bottom: 10px;
}
.stat-label {
font-size: 16px;
color: var(--primary);
font-weight: 700;
margin-top: -10px;
}
/* PARTNERSHIPS */
.partnerships {
margin: 50px 0;
padding: 30px;
background: var(--off-white);
border: 1px solid var(--secondary);
border-radius: 0px;
}
.partnership-item {
display: flex;
align-items: center;
padding: 20px;
background: white;
box-shadow: var(--shadow);
margin-bottom: 15px;
border-radius: 0px;
border-left: 4px solid var(--secondary);
}
.partnership-icon {
width: 60px;
height: 60px;
background: var(--secondary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
font-size: 24px;
}
.partnership-content h4 {
margin-bottom: 5px;
font-size: 19px !important;
color: var(--secondary);
}
.partnership-content p {
color: var(--primary);
margin: 0;
font-size: 17px;
}
/* LIST STYLES */
.feature-list {
list-style: none;
padding: 0;
margin: 25px 0;
}
.feature-list li {
padding: 12px 0;
padding-left: 35px;
font-size: 16px;
position: relative;
border-bottom: 1px solid var(--gray-light);
}
.feature-list li:last-child {
border-bottom: none;
}
.feature-list li::before {
content: '✓';
position: absolute;
left: 0;
top: 12px;
width: 24px;
height: 24px;
background: var(--secondary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
}
/* CTA BUTTON */
.cta-button {
display: inline-block;
background: var(--secondary);
color: white;
padding: 15px 35px;
border-radius: var(--radius);
font-weight: 600;
text-decoration: none;
margin-top: 20px;
transition: all 0.3s ease;
border: none;
cursor: pointer;
font-size: 16px;
}
.cta-button:hover {
background: var(--primary);
color: white;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.2);
}
/* RESPONSIVE */
@media (max-width: 768px) {
.inner-head {
padding: 40px 0 20px;
}
.inner-head h4 {
font-size: 28px;
}
.section-title {
font-size: 24px;
}
.stats-container {
flex-direction: column;
}
.stat-box {
min-width: 100%;
}
}
.training-section {
padding: 60px 0;
font-family: "Poppins", sans-serif;
}
.training-container {
max-width: 1200px;
margin: auto;
padding: 0 20px;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 40px;
align-items: center;
}
/* LEFT CONTENT */
.training-content .section-title {
font-size: 25px;
font-weight: 800;
line-height: 40px;
color: #222;
}
.training-content p {
font-size: 16px;
line-height: 1.8;
color: #555;
margin-bottom: 15px;
}
/* RIGHT IMAGE */
.training-image img {
width: 100%;
border-radius: 0px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
margin-top: 40px;
border: 3px dashed var(--secondary);
padding: 10px;
}
/* RESPONSIVE */
@media (max-width: 900px) {
.training-container {
grid-template-columns: 1fr;
}
.training-content {
order: 2;
text-align: center;
}
.training-image {
order: 1;
}
}
/* ========== PREMIUM ASSOCIATIONS PAGE DESIGN ========== */
:root {
--primary: #e34a13ff;
--primary-light: #FF6B35;
--secondary: #F97316;
--accent: white;
--dark: #0F172A;
--light: #FFFFFF;
--off-white: #F8FAFC;
--gray: #64748B;
--gray-light: #E2E8F0;
--gradient-primary: linear-gradient(135deg, #FF6B35 0%, #FF9A3D 100%);
--gradient-secondary: linear-gradient(135deg, #F97316 0%, #F59E0B 100%);
--shadow-xl: 0 25px 50px rgba(30, 58, 138, 0.15);
--shadow-lg: 0 15px 35px rgba(30, 58, 138, 0.1);
--shadow-md: 0 8px 25px rgba(30, 58, 138, 0.08);
--radius-xl: 24px;
--radius-lg: 16px;
--radius-md: 12px;
--transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}
/* HERO SECTION */
.associations-hero {
background: linear-gradient(135deg, rgba(30, 58, 138, 0.9), rgba(59, 130, 246, 0.9)), url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
min-height: 70vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding: 140px 0 80px;
background-size: cover;
background-position: center;
clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}
.associations-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
background-size: 150px;
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 1000px;
margin: 0 auto;
padding: 0 40px;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
color: var(--light);
padding: 12px 30px;
border-radius: 50px;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 30px;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.hero-title {
font-size: 4.2rem;
font-weight: 900;
color: var(--light);
margin-bottom: 20px;
line-height: 1.1;
}
.hero-title span {
color: var(--accent);
position: relative;
}
.hero-title span::after {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
height: 4px;
background: var(--gradient-secondary);
opacity: 0.5;
border-radius: 2px;
}
.hero-subtitle {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.9);
max-width: 700px;
margin: 0 auto;
font-weight: 400;
}
/* PARTNERSHIPS INTRO */
.partnerships-intro {
padding: 100px 0;
background: var(--light);
text-align: center;
}
.intro-container {
max-width: 1000px;
margin: 0 auto;
padding: 0 40px;
}
.intro-title {
font-size: 3rem;
font-weight: 800;
color: var(--primary);
/* margin-bottom: 25px; */
position: relative;
display: inline-block;
}
/* .intro-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: var(--gradient-secondary);
border-radius: 2px;
} */
.intro-text {
font-size: 1.5rem;
color: var(--gray);
max-width: 800px;
margin: 0 auto;
line-height: 1.8;
}
/* ASSOCIATIONS GRID */
.associations-grid {
padding: 0 0 120px;
background: var(--off-white);
}
.associations-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
}
/* ASSOCIATION CARD - RIGHT IMAGE */
.association-card-right {
display: flex;
align-items: center;
background: var(--light);
border-radius: 0px;
overflow: hidden;
box-shadow: var(--shadow-lg);
margin-bottom: 60px;
transition: var(--transition);
border: 1px solid var(--gray-light);
}
.association-card-right:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
border-color: var(--secondary);
}
.association-content {
flex: 1;
padding: 50px 60px;
}
.association-logo-container {
width: 250px;
height: 250px;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
background: linear-gradient(135deg, rgba(30, 58, 138, 0.05), rgba(59, 130, 246, 0.05));
position: relative;
overflow: hidden;
}
.association-logo-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--gradient-secondary);
}
.association-logo {
max-width: 180px;
max-height: 180px;
object-fit: contain;
transition: var(--transition);
opacity: 0.8;
}
.association-title {
font-size: 2rem;
font-weight: 800;
color: var(--primary);
margin-bottom: 20px;
line-height: 1.3;
}
.association-type {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--gradient-secondary);
color: var(--light);
padding: 8px 20px;
border-radius: 50px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 20px;
}
.association-description {
font-size: 1.6rem;
color: var(--gray);
line-height: 34px;
margin-bottom: 25px;
}
.association-highlight {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(249, 115, 22, 0.1);
color: var(--secondary);
padding: 12px 25px;
border-radius: 0px;
font-weight: 600;
font-size: 1.4rem;
margin-top: 20px;
border-left: 4px solid var(--secondary);
}
/* ASSOCIATION CARD - LEFT IMAGE */
.association-card-left {
display: flex;
align-items: center;
background: var(--light);
border-radius: 0px;
overflow: hidden;
box-shadow: var(--shadow-lg);
margin-bottom: 60px;
transition: var(--transition);
border: 1px solid var(--gray-light);
flex-direction: row-reverse;
}
.association-card-left:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
border-color: var(--secondary);
}
.association-card-left .association-logo-container::before {
left: 0;
right: auto;
}
/* PARTNERSHIP STATS */
.partnership-stats {
padding: 80px 0;
background: var(--gradient-primary);
color: var(--light);
text-align: center;
position: relative;
overflow: hidden;
}
.stats-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
position: relative;
z-index: 2;
}
.stats-title {
font-size: 2.8rem;
font-weight: 800;
margin-bottom: 60px;
color: var(--light);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
}
.stat-item {
padding: 40px 30px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: var(--transition);
}
.stat-item:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-10px);
}
.stat-number {
font-size: 3.5rem;
font-weight: 900;
color: var(--accent);
margin-bottom: 10px;
line-height: 1;
}
.stat-label {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.9);
font-weight: 600;
}
/* MOUs SECTION */
.mous-section {
padding: 100px 0;
background: var(--light);
}
.mous-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
}
.mous-header {
text-align: center;
margin-bottom: 70px;
}
.mous-title {
font-size: 2.8rem;
font-weight: 800;
color: var(--primary);
margin-bottom: 15px;
position: relative;
display: inline-block;
}
.mous-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: var(--gradient-secondary);
border-radius: 2px;
}
.mous-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.mou-card {
background: var(--light);
padding: 40px 35px;
border-radius: 0px;
box-shadow: var(--shadow-md);
transition: var(--transition);
border-top: 4px solid var(--secondary);
text-align: center;
}
.mou-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.mou-icon {
width: 70px;
height: 70px;
background: var(--gradient-secondary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
color: var(--light);
font-size: 1.8rem;
}
.mou-card-title {
font-size: 1.7rem;
color: var(--primary);
margin-bottom: 15px;
font-weight: 700;
}
.mou-card-text {
color: var(--gray);
font-size: 1.5rem;
line-height: 30px;
margin: 0;
margin-top: -20px;
}
/* RESPONSIVE */
@media (max-width: 1200px) {
.hero-title {
font-size: 3.5rem;
}
.intro-title {
font-size: 2.5rem;
}
.association-card-right,
.association-card-left {
flex-direction: column;
}
.association-content {
padding: 40px;
}
.association-logo-container {
width: 100%;
height: 200px;
}
}
@media (max-width: 992px) {
.associations-hero {
min-height: 60vh;
padding: 120px 0 60px;
}
.hero-title {
font-size: 2.8rem;
}
.intro-title {
font-size: 2.2rem;
}
.association-title {
font-size: 1.8rem;
}
}
@media (max-width: 768px) {
.associations-hero {
min-height: 50vh;
padding: 100px 0 40px;
}
.hero-title {
font-size: 2.3rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.intro-title {
font-size: 2rem;
}
.association-content {
padding: 30px;
}
.associations-container,
.mous-container,
.stats-container {
padding: 0 20px;
}
.stats-grid {
grid-template-columns: 1fr;
}
.mous-grid {
grid-template-columns: 1fr;
}
}
body {
font-family: "Poppins", sans-serif;
}
/* HEADER */
.inner-head {
background-image: linear-gradient(to right, #ff6b35bc, #ff9b3daf), url('https://images.unsplash.com/photo-1423666639041-f56000c27a9a?q=80&w=1174&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
padding: 160px 0 70px;
background-size: cover;
position: relative;
overflow: hidden;
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
.inner-head::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
background-size: 500px;
opacity: 0.3;
}
.inner-head h4 {
font-size: 48px;
font-weight: 700;
color: white;
position: relative;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* ========== ULTRA PREMIUM ADVISORY BOARD DESIGN ========== */
:root {
--primary: #0F172A;
--primary-light: #1E293B;
--secondary: #D97706;
--accent: #F59E0B;
--accent-light: #FBBF24;
--light: #FFFFFF;
--off-white: #F8FAFC;
--gray: #000000ff;
--gray-light: #E2E8F0;
--gradient-dark: linear-gradient(135deg, #FF6B35 0%, #FF9A3D 100%);
;
--gradient-gold: linear-gradient(135deg, #D97706 0%, #F59E0B 50%, #FBBF24 100%);
--shadow-xl: 0 25px 50px rgba(15, 23, 42, 0.15);
--shadow-lg: 0 15px 35px rgba(15, 23, 42, 0.1);
--shadow-md: 0 8px 25px rgba(15, 23, 42, 0.08);
--radius-xl: 24px;
--radius-lg: 16px;
--radius-md: 12px;
--transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
color: var(--primary);
background: var(--off-white);
line-height: 1.7;
overflow-x: hidden;
}
/* HERO SECTION */
.advisory-hero {
background: var(--gradient-dark);
min-height: 70vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding: 120px 0 80px;
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
.advisory-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 30%, rgba(217, 119, 6, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(217, 119, 6, 0.05) 0%, transparent 50%);
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(217, 119, 6, 0.15);
backdrop-filter: blur(10px);
color: var(--accent-light);
padding: 12px 28px;
border-radius: 50px;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 30px;
border: 1px solid rgba(217, 119, 6, 0.3);
}
.hero-title {
font-size: 4.5rem;
font-weight: 900;
color: var(--light);
margin-bottom: 20px;
line-height: 1.1;
}
.hero-title span {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
}
.hero-subtitle {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.85);
max-width: 700px;
margin: 0 auto 40px;
font-weight: 400;
}
/* SECTION INTRO */
.section-intro {
padding: 100px 0;
text-align: center;
background: var(--light);
}
.intro-container {
max-width: 1000px;
margin: 0 auto;
padding: 0 40px;
}
.intro-title {
font-size: 2.2rem;
font-weight: 800;
color: var(--primary);
/* margin-bottom: 25px; */
position: relative;
display: inline-block;
}
/* .intro-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: var(--gradient-gold);
border-radius: 2px;
} */
.intro-text {
font-size: 1.2rem;
color: var(--gray);
max-width: 800px;
margin: 0 auto;
line-height: 1.8;
}
/* ADVISORY SECTIONS */
.advisory-sections {
padding: 0 0 100px;
}
.section-header {
text-align: center;
margin-bottom: 70px;
padding: 0 40px;
}
.section-title {
font-size: 2.8rem;
font-weight: 800;
color: var(--primary);
margin-bottom: 15px;
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 100%;
height: 3px;
background: var(--gradient-gold);
border-radius: 2px;
}
.section-subtitle {
font-size: 1.7rem;
color: var(--gray);
max-width: 600px;
margin: 0 auto;
}
/* ADVISORS GRID */
.advisors-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
}
.advisors-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: 35px;
margin-bottom: 100px;
}
/* ADVISOR CARD */
.advisor-card {
background: var(--light);
border-radius: 0px;
overflow: hidden;
box-shadow: var(--shadow-lg);
transition: var(--transition);
position: relative;
border: 1px solid var(--gray-light);
}
.advisor-card:hover {
transform: translateY(-15px);
box-shadow: var(--shadow-xl);
border-color: var(--accent);
}
.advisor-header {
background: var(--gradient-dark);
padding: 40px 30px 30px;
position: relative;
overflow: hidden;
}
.advisor-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--gradient-gold);
}
.advisor-badge {
position: absolute;
top: 25px;
right: 25px;
background: var(--gradient-gold);
color: var(--primary);
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
box-shadow: 0 5px 15px rgba(217, 119, 6, 0.3);
z-index: 2;
}
.advisor-name {
font-size: 1.8rem;
font-weight: 800;
color: var(--light);
margin-bottom: 8px;
line-height: 1.3;
}
.advisor-title {
font-size: 1.4rem;
color: white;
font-weight: 600;
margin-bottom: 15px;
}
.advisor-org {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.1);
padding: 8px 16px;
border-radius: var(--radius-md);
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.9);
}
.advisor-body {
padding: 35px 30px;
}
.advisor-details {
list-style: none;
padding: 0;
margin: 0;
}
.advisor-details li {
padding: 18px 0;
border-bottom: 1px solid var(--gray-light);
display: flex;
align-items: flex-start;
gap: 15px;
font-size: 15px !important;
}
.advisor-details li:last-child {
border-bottom: none;
}
.detail-icon {
width: 24px;
height: 24px;
background: linear-gradient(135deg, rgba(217, 119, 6, 0.1), rgba(245, 158, 11, 0.1));
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
flex-shrink: 0;
font-size: 0.9rem;
}
.detail-text {
color: var(--gray);
font-size: 1.4rem;
line-height: 1.6;
flex: 1;
}
.advisor-footer {
padding: 25px 30px;
background: rgba(245, 158, 11, 0.05);
border-top: 1px solid var(--gray-light);
display: flex;
justify-content: space-between;
align-items: center;
}
.advisor-type {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--gradient-gold);
color: var(--primary);
padding: 8px 20px;
border-radius: 50px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.advisor-location {
font-size: 13px;
color: var(--gray);
font-weight: 500;
display: flex;
align-items: center;
gap: 5px;
}
/* HONORARY BANNER */
.honorary-banner {
background: var(--gradient-gold);
padding: 25px 0;
text-align: center;
color: var(--primary);
margin: 80px 0;
position: relative;
overflow: hidden;
}
.honorary-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
background-size: 80px;
}
.banner-content {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
padding: 0 40px;
}
.banner-title {
font-size: 2rem;
font-weight: 800;
margin-bottom: 10px;
}
.banner-text {
font-size: 1.1rem;
opacity: 0.9;
}
/* RESPONSIVE */
@media (max-width: 1200px) {
.hero-title {
font-size: 3.8rem;
}
.intro-title {
font-size: 2.8rem;
}
.advisors-grid {
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}
}
@media (max-width: 992px) {
.advisory-hero {
min-height: 60vh;
padding: 100px 0 60px;
}
.hero-title {
font-size: 3rem;
}
.intro-title {
font-size: 2.4rem;
}
.section-title {
font-size: 2.2rem;
}
}
@media (max-width: 768px) {
.advisory-hero {
min-height: 50vh;
padding: 80px 0 40px;
}
.hero-title {
font-size: 2.4rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.intro-title {
font-size: 2rem;
}
.section-title {
font-size: 1.8rem;
}
.advisors-grid {
grid-template-columns: 1fr;
padding: 0 20px;
}
.advisors-container {
padding: 0 20px;
}
}
/* ANIMATIONS */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
opacity: 0;
animation: fadeInUp 0.8s ease forwards;
}
.delay-1 {
animation-delay: 0.2s;
}
.delay-2 {
animation-delay: 0.4s;
}
body {
font-family: "Poppins", sans-serif;
}
/* HEADER */
.inner-head {
background-image: linear-gradient(to right, #ff6b35bc, #ff9b3daf), url('https://images.unsplash.com/photo-1423666639041-f56000c27a9a?q=80&w=1174&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
padding: 160px 0 70px;
background-size: cover;
position: relative;
overflow: hidden;
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
.inner-head::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
background-size: 500px;
opacity: 0.3;
}
.inner-head h4 {
font-size: 48px;
font-weight: 700;
color: white;
position: relative;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
:root {
--primary: #1f2a44;
--gold: #FF6B35;
--light: #f8f9fa;
--text: #333;
--muted: #6c757d;
}
body {
font-family: "Poppins", sans-serif;
color: var(--text);
background: #fff;
}
/* COMMON */
.sp-section {
padding: 40px 0;
}
.sp-subtitle {
text-align: center;
color: var(--gold);
letter-spacing: 3px;
font-weight: 600;
margin-bottom: 8px;
}
.sp-title {
text-align: center;
font-size: 40px;
font-family: "Poppins", sans-serif;
color: var(--primary);
}
/* PROFILE */
.sp-profile-wrap {
max-width: 1200px;
margin: auto;
display: grid;
grid-template-columns: 420px 1fr;
gap: 30px;
align-items: center;
}
.sp-profile-img {
position: relative;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 20px 45px rgba(0, 0, 0, .18);
}
.sp-profile-img img {
width: 100%;
height: 430px;
object-fit: cover;
background-position: top;
border: 2px dashed #FF6B35;
padding: 10px;
}
.sp-profile-name {
font-size: 30px;
font-family: "Poppins", sans-serif;
color: var(--primary);
}
.sp-profile-name span {
color: var(--gold);
}
.sp-profile-role {
font-size: 16px;
color: #1f2a44;
font-weight: 600;
margin: 5px 0 25px;
}
.sp-badges span {
display: inline-block;
border: 1px solid #FF6B35;
padding: 8px 18px;
border-radius: 30px;
font-size: 13px;
margin: 4px;
background: #fafafa;
color: #FF6B35;
font-weight: 600;
margin-top: -20px;
}
.sp-profile-desc {
margin-top: 25px;
font-size: 15px;
line-height: 2.0;
}
.sp-quote {
margin-top: 30px;
padding: 25px;
background: white;
border-left: 5px solid var(--gold);
font-style: italic;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
/* TIMELINE */
.sp-timeline {
max-width: 1000px;
margin: 20px auto 0;
}
.sp-time-item {
position: relative;
padding: 30px 30px 30px 90px;
background: #fff;
border-radius: 5px;
border: 2px dotted black;
box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
margin-bottom: 10px;
font-size: 18px;
font-weight: 700;
}
.sp-time-item::before {
content: '';
position: absolute;
left: 30px;
top: 35px;
width: 12px;
height: 12px;
background: var(--gold);
border-radius: 50%;
}
.sp-year {
font-size: 24px;
font-weight: 700;
color: var(--gold);
margin-bottom: 5px;
}
/* MEETINGS */
.sp-meet-grid {
max-width: 1200px;
margin: 60px auto 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 35px;
}
.sp-meet-card {
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
transition: .4s;
}
.sp-meet-card:hover {
transform: translateY(-6px);
}
.sp-meet-card img {
width: 100%;
height: 240px;
object-fit: cover;
}
.sp-meet-body {
padding: 22px;
}
.sp-meet-body h4 {
color: var(--primary);
}
.sp-meet-body p {
font-size: 14px;
color: var(--muted);
}
/* ACHIEVEMENTS */
.sp-ach-grid {
max-width: 1100px;
margin: 60px auto 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 35px;
}
.sp-ach {
padding: 40px 30px;
background: #fff;
border-radius: 16px;
text-align: center;
box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
}
.sp-ach i {
font-size: 42px;
color: var(--gold);
margin-bottom: 18px;
}
/* RESPONSIVE */
@media(max-width:900px) {
.sp-profile-wrap {
grid-template-columns: 1fr;
text-align: center;
}
.sp-profile-img img {
height: auto;
}
}
/* HEADER */
.inner-head {
background-image: linear-gradient(to right, #ff6b35bc, #ff9b3daf), url('https://images.unsplash.com/photo-1423666639041-f56000c27a9a?q=80&w=1174&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
padding: 160px 0 70px;
background-size: cover;
position: relative;
overflow: hidden;
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
.inner-head::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
background-size: 500px;
opacity: 0.3;
}
.inner-head h4 {
font-size: 48px;
font-weight: 700;
color: white;
position: relative;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* ========== PREMIUM ORANGE GRADIENT CONTACT PAGE ========== */
:root {
--primary: #FF6B35;
--primary-light: #FF9A3D;
--primary-dark: #E55A2E;
--secondary: #2D3047;
--accent: #FFD166;
--light: #FFFFFF;
--dark: #1A1A2E;
--gray: #64748B;
--gray-light: #F1F5F9;
--gradient-orange: linear-gradient(135deg, #FF6B35 0%, #FF9A3D 100%);
--gradient-orange-dark: linear-gradient(135deg, #E55A2E 0%, #FF7B35 100%);
--gradient-secondary: linear-gradient(135deg, #2D3047 0%, #414762 100%);
--shadow-lg: 0 20px 40px rgba(255, 107, 53, 0.12);
--shadow-sm: 0 5px 15px rgba(0, 0, 0, 0.05);
--radius-xl: 20px;
--radius-lg: 15px;
--radius-md: 10px;
--transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}
body {
background: #F9FAFB;
font-family: "Poppins", sans-serif;
color: var(--dark);
line-height: 1.7;
overflow-x: hidden;
position: relative;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 20% 80%, rgba(255, 107, 53, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 154, 61, 0.05) 0%, transparent 50%);
z-index: -1;
}
/* HEADER */
.inner-head {
background-image: linear-gradient(to right, #ff6b35bc, #ff9b3daf), url('https://images.unsplash.com/photo-1423666639041-f56000c27a9a?q=80&w=1174&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') !important;
padding: 160px 0 70px;
background-size: cover;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
.inner-head::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
background-size: 500px;
opacity: 0.3;
}
.inner-head h4 {
font-size: 48px;
font-weight: 700;
color: white;
position: relative;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.inner-head h4 span {}
.breadcrumb {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: 50px;
padding: 12px 25px;
display: inline-block;
margin-top: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.breadcrumb a {
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
transition: var(--transition);
}
.breadcrumb a:hover {
color: var(--accent);
transform: translateX(3px);
}
.breadcrumb li.active {
color: var(--accent);
font-weight: 600;
}
.breadcrumb-item+.breadcrumb-item::before {
color: rgba(255, 255, 255, 0.6);
}
/* SECTION */
.contact-section {
padding: 100px 0;
position: relative;
margin-top: -50px;
}
/* FORM */
.contact-form {
background: var(--light);
border-radius: 0px;
padding: 40px;
box-shadow: var(--shadow-lg);
position: relative;
z-index: 1;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
}
.contact-form::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255, 107, 53, 0.1) 0%, transparent 70%);
border-radius: 50%;
transform: translate(150px, -150px);
}
.contact-form h3 {
font-size: 26px;
font-weight: 700;
margin-bottom: 20px;
color: var(--secondary);
position: relative;
display: inline-block;
}
.contact-form h3::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 60px;
height: 4px;
background: var(--gradient-orange);
border-radius: 2px;
}
.contact-form p {
color: var(--gray);
margin-bottom: 45px;
max-width: 500px;
font-size: 14px;
line-height: 1.8;
}
.form-group {
margin-bottom: 30px;
position: relative;
}
.form-control {
height: 60px;
border-radius: var(--radius-md);
border: 1px solid black;
padding: 15px 20px;
font-size: 16px;
font-weight: 500;
transition: var(--transition);
background: var(--light);
color: var(--dark);
}
.form-control:focus {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.15);
background: var(--light);
transform: translateY(-2px);
}
textarea.form-control {
height: auto;
min-height: 180px;
resize: vertical;
padding-top: 20px;
}
/* Form Icons */
.form-group i {
position: absolute;
right: 40px;
top: 50%;
font-size: 15px !important;
transform: translateY(-50%);
color: var(--gray);
transition: var(--transition);
z-index: 3;
}
.form-group:focus-within i {
color: var(--primary);
}
textarea.form-control+i {
top: 25px;
transform: none;
}
/* BUTTON */
.btn-submit {
background: var(--gradient-orange);
color: white;
padding: 20px 60px;
border-radius: 50px;
font-size: 17px;
font-weight: 600;
border: none;
transition: var(--transition);
position: relative;
overflow: hidden;
box-shadow: 0 10px 20px rgba(255, 107, 53, 0.25);
letter-spacing: 0.5px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 200px;
}
.btn-submit:hover {
background: var(--gradient-orange-dark);
transform: translateY(-5px) scale(1.02);
box-shadow: 0 15px 30px rgba(255, 107, 53, 0.35);
color: white;
}
.btn-submit:active {
transform: translateY(-2px);
}
.btn-submit::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: 0.6s;
}
.btn-submit:hover::before {
left: 100%;
}
/* INFO */
/* .contact-info {
padding-left: 50px;
} */
.info-box {
background: var(--light);
border-radius: 0px !important;
padding: 30px 30px;
box-shadow: var(--shadow-sm);
margin-bottom: 15px;
transition: var(--transition);
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
}
.info-box:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px rgba(255, 107, 53, 0.15);
border-color: var(--primary-light);
}
.info-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
background: var(--gradient-orange);
}
.info-box h6 {
font-size: 18px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--primary);
margin-bottom: 10px;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
}
.info-box p {
font-size: 17px;
line-height: 1.8;
margin: 0;
color: var(--secondary);
font-weight: 500;
}
.info-box i {
color: var(--primary);
font-size: 20px;
width: 30px;
height: 30px;
background: rgba(255, 107, 53, 0.1);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.info-box .contact-icon {
position: absolute;
top: 25px;
right: 25px;
font-size: 45px;
opacity: 0.08;
color: var(--primary);
z-index: 0;
}
/* MAP */
.map-wrapper {
height: 500px;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-lg);
position: relative;
margin-top: 30px;
border: 1px solid rgba(255, 255, 255, 0.8);
}
.map-wrapper iframe {
width: 100%;
height: 100%;
border: none;
filter: grayscale(10%) contrast(1.1) saturate(0.9);
}
.map-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255, 107, 53, 0.05) 0%, transparent 30%);
pointer-events: none;
}
.map-title {
position: absolute;
top: 30px;
left: 30px;
background: var(--gradient-orange);
color: white;
padding: 12px 25px;
border-radius: 50px;
font-weight: 600;
font-size: 15px;
z-index: 2;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* Stats */
.contact-stats {
display: flex;
justify-content: space-between;
margin-top: 30px;
gap: 20px;
}
.stat-box {
background: var(--light);
border-radius: 0px;
padding: 20px;
text-align: center;
flex: 1;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.stat-box:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(255, 107, 53, 0.1);
}
.stat-number {
font-size: 30px;
font-weight: 800;
background: var(--gradient-orange);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
line-height: 1;
}
.stat-label {
color: var(--gray);
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
}
/* Responsive */
/* @media (max-width: 1200px) {
.contact-info {
padding-left: 30px;
}
} */
@media (max-width: 992px) {
.contact-info {
padding-left: 0;
margin-top: 50px;
}
.contact-form {
padding: 40px;
}
.inner-head {
padding: 80px 0 60px;
}
.contact-stats {
flex-wrap: wrap;
}
}
@media (max-width: 768px) {
.inner-head {
padding: 60px 0 40px;
clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
}
.inner-head h4 {
font-size: 36px;
}
.contact-section {
padding: 70px 0;
margin-top: -30px;
}
.contact-form {
padding: 30px;
}
.btn-submit {
width: 100%;
}
.contact-stats {
margin-top: 40px;
}
}
/* Animation */
@keyframes floatIn {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.float-in {
animation: floatIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.delay-1 {
animation-delay: 0.1s;
}
.delay-2 {
animation-delay: 0.2s;
}
.delay-3 {
animation-delay: 0.3s;
}
.delay-4 {
animation-delay: 0.4s;
}
/* ========== MULTI MAP PREMIUM SECTION ========== */
.multi-map-section {
padding: 30px 0;
background: #F9FAFB;
}
.section-head .sub-title {
color: var(--primary);
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
}
.section-head h2 {
font-size: 35px;
font-weight: 800;
color: var(--secondary);
margin-bottom: 35px;
}
.map-card {
height: 240px;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
transition: all 0.4s ease;
background: #fff;
}
.map-card iframe {
width: 100%;
height: 100%;
border: none;
filter: grayscale(15%) contrast(1.1);
}
.map-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 50px rgba(255, 107, 53, 0.25);
}
.map-info {
text-align: center;
margin-top: 15px;
}
.map-info h5 {
font-size: 17px;
font-weight: 700;
color: var(--secondary);
margin-bottom: 3px;
}
.map-info p {
font-size: 14px;
color: var(--gray);
margin: 0;
}
/* Responsive */
@media(max-width: 992px) {
.map-card {
height: 220px;
}
}
@media(max-width: 768px) {
.map-card {
height: 260px;
}
.section-head h2 {
font-size: 32px;
}
}
:root {
--brand: #ef662f;
--brand2: #ff7a45;
--ink: #0f172a;
--muted: #64748b;
--bg: #f6f8fc;
--card: #ffffff;
--ring: rgba(239, 102, 47, .18);
--shadow: 0 18px 45px rgba(15, 23, 42, .12);
--shadow2: 0 10px 22px rgba(15, 23, 42, .10);
--radius: 14px;
}
/* Head section (if theme already styles .inner-head, this only enhances) */
.inner-head {
background: linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(15, 23, 42, .86));
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.inner-head h4 {
letter-spacing: .2px;
font-weight: 800;
}
.inner-head h4 span {
color: var(--brand);
}
.breadcrumb {
background: transparent;
padding: 0;
margin: 8px 0 0;
}
.breadcrumb>li+li:before {
color: rgba(255, 255, 255, .45);
}
.breadcrumb a {
color: rgba(255, 255, 255, .75);
}
.breadcrumb .active {
color: rgba(255, 255, 255, .55);
}
/* Modern card container */
.register-shell {
padding: 26px 22px;
background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .92));
border-radius: var(--radius);
box-shadow: var(--shadow);
border: 1px solid rgba(15, 23, 42, .06);
max-width: 1000px;
margin: 40px auto;
position: relative;
overflow: hidden;
}
.register-shell:before {
content: "";
position: absolute;
top: -120px;
right: -140px;
width: 340px;
height: 340px;
background: radial-gradient(circle at 30% 30%, rgba(239, 102, 47, .25), transparent 60%);
filter: blur(2px);
pointer-events: none;
}
.register-shell:after {
content: "";
position: absolute;
bottom: -120px;
left: -140px;
width: 320px;
height: 320px;
background: radial-gradient(circle at 70% 70%, rgba(15, 23, 42, .12), transparent 60%);
filter: blur(2px);
pointer-events: none;
}
/* Form spacing */
form#myf {
position: relative;
z-index: 2;
}
.mb-3 {
margin-bottom: 16px;
}
/* Labels */
label {
font-weight: 700;
margin-bottom: 8px;
display: block;
color: var(--ink);
font-size: 14.5px;
}
label small {
color: var(--muted);
font-weight: 600;
}
/* Controls */
.form-control {
width: 100%;
height: auto;
padding: 12px 14px;
font-size: 16px;
line-height: 1.5;
border-radius: 12px;
border: 1.7px solid var(--brand) !important;
box-shadow: none !important;
transition: all .18s ease;
background: rgba(255, 255, 255, .98);
}
.form-control:focus {
border-color: var(--brand) !important;
box-shadow: 0 0 0 4px var(--ring) !important;
outline: none;
}
select.form-control {
appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, rgba(15, 23, 42, .65) 50%),
linear-gradient(135deg, rgba(15, 23, 42, .65) 50%, transparent 50%),
linear-gradient(to right, transparent, transparent);
background-position:
calc(100% - 18px) calc(50% - 2px),
calc(100% - 12px) calc(50% - 2px),
0 0;
background-size: 6px 6px, 6px 6px, 100% 100%;
background-repeat: no-repeat;
padding-right: 38px;
}
/* Checkbox */
.form-check {
margin-top: 18px;
margin-bottom: 18px;
padding: 14px 14px 12px;
border-radius: 12px;
background: rgba(15, 23, 42, .03);
border: 1px solid rgba(15, 23, 42, .06);
clear: both;
position: relative;
z-index: 2;
}
.form-check-input {
transform: translateY(2px);
margin-right: 8px;
accent-color: var(--brand);
}
.form-check-label {
font-size: 14px;
color: rgba(15, 23, 42, .86);
font-weight: 600;
line-height: 1.45;
}
.form-check-label a {
color: var(--brand);
font-weight: 800;
text-decoration: none;
border-bottom: 1px dashed rgba(239, 102, 47, .55);
}
.form-check-label a:hover {
border-bottom-style: solid;
}
/* Buttons */
.btn {
border-radius: 12px;
padding: 11px 14px;
font-weight: 800;
letter-spacing: .2px;
box-shadow: var(--shadow2);
border: 0;
transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn:active {
transform: translateY(1px);
}
.btn-default {
background: #ffffff;
color: var(--ink);
border: 1px solid rgba(15, 23, 42, .12);
box-shadow: none;
}
.btn-default:hover {
background: rgba(15, 23, 42, .03);
box-shadow: var(--shadow2);
}
.btn-primary {
background: linear-gradient(135deg, var(--brand), var(--brand2));
color: #fff;
}
.btn-primary:hover {
opacity: .96;
transform: translateY(-1px);
}
.btn-primary[disabled] {
opacity: .55 !important;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
/* Modal polish */
.modal-header {
background: #0f172a;
color: #fff;
border: 0;
}
.modal-title {
font-weight: 800;
letter-spacing: .2px;
}
.modal-footer {
background: #f8fafc;
border: 0;
}
.modal-footer .btn {
border-radius: 10px;
padding: 9px 16px;
box-shadow: none;
}
.modal-footer .btn:hover {
opacity: .95;
}
/* Small helpers */
.cta-wrapp {
margin-top: 26px;
}
.cta-wrapp h4 {
font-weight: 800;
}
/* Responsive tweaks */
@media (max-width: 767px) {
.register-shell {
margin: 20px 12px;
padding: 18px 14px;
}
.btn {
padding: 12px 14px;
}
}
/* keep your old class too (no functional change) */
.jcf-select {
border: 2px solid #ef662f !important;
font-style: normal !important;
}
/* Professional T&C checkbox alignment */
#tcBlock.form-check {
display: flex;
align-items: flex-start;
/* text ke top ke saath checkbox align */
gap: 10px;
padding: 14px 16px;
border-radius: 12px;
}
#tcBlock .form-check-input {
margin: 3px 0 0 0;
/* checkbox top pe thoda set */
width: 18px;
height: 18px;
flex: 0 0 18px;
}
#tcBlock .form-check-label {
margin: 0;
line-height: 1.45;
font-size: 14px;
font-weight: 600;
}
#tcBlock .form-check-label a {
white-space: nowrap;
/* “Privacy Policy” break na ho */
}
/* ====== Page Base ====== */
.course-page {
background: #fff;
}
.course-hero {
padding: 40px 0 25px;
}
.course-hero .rating {
color: #f39c12;
font-size: 14px;
margin-bottom: 10px;
}
.course-hero .rating small {
color: #888;
font-size: 13px;
}
.course-hero h1 {
font-size: 44px;
font-weight: 800;
margin: 10px 0 12px;
color: #111;
font-family: "Poppins", sans-serif;
}
.course-hero p.lead {
font-size: 16px;
line-height: 26px;
color: #555;
margin-bottom: 18px;
max-width: 520px;
font-family: "Poppins", sans-serif;
font-weight: 400;
}
.hero-points {
margin: 18px 0 18px;
}
.hero-point {
margin: 10px 0;
color: #222;
font-weight: 600;
}
.hero-point i {
color: #2ecc71;
margin-right: 8px;
}
.hero-actions {
margin-top: 18px;
}
.btn-softpro {
background: #ef662f;
border-color: #ef662f;
color: #fff;
padding: 10px 22px;
border-radius: 8px;
}
.btn-softpro:hover {
background: #d95420;
border-color: #d95420;
color: #fff;
}
.btn-outline-softpro {
background: #fff;
border: 2px solid #ef662f;
color: #ef662f;
padding: 9px 22px;
border-radius: 8px;
}
.btn-outline-softpro:hover {
background: #ef662f;
color: #fff;
}
/* ====== Hero Right (Video Card) ====== */
.hero-media {
/* border-radius: 14px; */
overflow: hidden;
box-shadow: 0 18px 40px rgba(0, 0, 0, .10);
position: relative;
border: 2px dashed #ef662f;
padding: 5px;
}
.hero-media img {
width: 100%;
display: block;
/* min-height: 450px; */
}
.hero-media .play {
width: 70px;
height: 70px;
border-radius: 50%;
background: rgba(255, 255, 255, .92);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 12px 26px rgba(0, 0, 0, .15);
}
.hero-media .play:after {
content: "";
display: block;
width: 0;
height: 0;
border-left: 16px solid #ef662f;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
margin-left: 4px;
}
/* ====== Tabs (Overview, Course info...) ====== */
.course-tabs-wrap {
padding: 10px 0 5px;
}
.course-tabs {
background: #fff;
border-radius: 40px;
padding: 10px;
box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
display: inline-block;
}
.course-tabs .nav>li>a {
border-radius: 30px;
padding: 10px 18px;
font-weight: 600;
color: #666;
}
.course-tabs .nav>li.active>a,
.course-tabs .nav>li.active>a:focus,
.course-tabs .nav>li.active>a:hover {
background: #ef662f;
color: #fff;
}
/* ====== Section: Objectives + Stack ====== */
.section-block {
padding: 30px 0 60px;
}
.section-title {
font-size: 36px;
font-weight: 800;
margin: 0 0 18px;
color: #111;
}
.mini-title {
color: #2b61ff;
font-weight: 700;
margin-bottom: 12px;
}
.obj-list {
margin: 0;
padding-left: 18px;
color: #555;
}
.obj-list li {
margin: 10px 0;
line-height: 26px;
}
.stack-card {
padding: 18px;
border-radius: 16px;
background: #fff;
}
.stack-badges {
margin-top: 10px;
}
.stack-badge {
display: inline-block;
background: #fdebe4;
color: #ef662f;
padding: 10px 14px;
border-radius: 10px;
font-weight: 700;
margin: 6px 8px 0 0;
font-size: 13px;
min-width: 90px;
text-align: center;
}
.meta-row {
margin-top: 18px;
color: #333;
}
.meta-item {
margin: 10px 0;
color: #444;
font-weight: 600;
}
.meta-item i {
color: #2b61ff;
margin-right: 10px;
}
/* ====== Make your old content look clean ====== */
.card-box {
border: 1px solid #eee;
/* border-radius: 12px; */
padding: 16px;
background: #fff;
box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
}
.card-box ul li {
font-size: 17px;
font-family: 'poppins', sans-serif !important;
}
.contact-box p {
margin-bottom: 14px;
font-size: 14px !important;
font-family: 'poppins', sans-serif !important;
}
.contact-box .labelname {
color: #ef662f;
font-weight: 700;
}
hr.soft {
border-top: 1px solid #f2f2f2;
margin: 18px 0;
}
/* ====== Responsive ====== */
@media (max-width:991px) {
.course-hero h1 {
font-size: 34px;
}
.course-tabs {
display: block;
border-radius: 18px;
}
}
.course-row {
margin-top: 30px;
}
.course-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
margin-bottom: 30px;
transition: 0.3s ease;
overflow: hidden;
}
.course-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
.course-img {
padding: 25px;
background: #f9f9f9;
}
.course-content {
padding: 20px;
}
.course-content h4 {
font-weight: 600;
margin-bottom: 5px;
}
.cert {
color: #777;
font-size: 14px;
margin-bottom: 10px;
}
.stars .fa {
color: #ef662f;
margin: 0 2px;
}
.btn-modern {
background: #ef662f;
color: #fff;
border-radius: 25px;
padding: 8px 20px;
margin-top: 15px;
transition: 0.3s ease;
}
.btn-modern:hover {
background: #d9541f;
color: #fff;
}
.section-header h2 {
font-size: 34px;
font-weight: 700;
color: #000000;
margin: 0px;
}
.section-header p {
color: #5a5a5a;
margin-bottom: 10px;
margin-bottom: 0px;
}
.food-card {
border-radius: 14px;
overflow: hidden;
background: #fff;
transition: 0.3s ease;
margin-bottom: 30px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
border: 2px dashed #ef662f;
height: 100% !important;
}
.food-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}
.card-img img {
width: 100%;
height: 180px;
object-fit: cover;
}
.card-body-custom {
background: #ffffff;
padding: 20px 10px;
text-align: left;
text-align: center;
}
.card-body-custom h4 {
color: #ef662f;
font-size: 18px;
font-weight: 600;
margin-bottom: 5px;
}
.card-body-custom p {
color: #ef662f;
font-size: 13px;
margin-bottom: 0px;
}
.card-body-custom a {
display: inline-block;
font-size: 13px;
background-color: #ef662f;
text-decoration: none;
font-weight: 500;
color: #fff;
border-radius: 20px;
padding: 7px 15px;
}
.food-card {
width: 100%;
min-height: 350px;
max-height: 350px;
display: flex;
flex-direction: column;
}
.why-softpro {
padding: 40px 20px;
background-image: linear-gradient(to right, #ff6b35ff, #ff9b3dff);
font-family: 'Poppins', sans-serif;
}
.panel-body p ul li{
font-family: 'Poppins', sans-serif !important;
font-size: 18px !important;
}
.why-softpro {
padding: 40px 20px;
background-image: linear-gradient(to right, #ff6b35ff, #ff9b3dff);
font-family: 'Poppins', sans-serif;
}
.panel-body p ul li {
font-family: 'Poppins', sans-serif !important;
font-size: 18px !important;
}