:root {
--navy: #002244;
--blue: #354a9e;
--white: #ffffff;
--light: #f7f9fc;
--text: #172033;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Poppins", sans-serif;
background: #ffffff;
color: var(--text);
overflow-x: hidden;
}
/* =========================================================
NAVBAR
========================================================= */
.main-navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
padding: 18px 0;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(0, 34, 68, 0.08);
transition: all 0.3s ease;
}
.main-navbar.scrolled {
padding: 11px 0;
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 8px 30px rgba(0, 34, 68, 0.08);
}
/* =========================================================
NAVBAR LOGO
========================================================= */
.navbar-brand {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--navy);
font-size: 20px;
font-weight: 800;
letter-spacing: -0.5px;
}
.brand-mark {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 11px;
color: #ffffff;
background: linear-gradient(145deg, #354a9e, #002244);
box-shadow: 0 8px 20px rgba(53, 74, 158, 0.2);
}
.brand-mark i {
font-size: 19px;
}
.brand-text {
line-height: 1;
}
.brand-text span {
display: block;
margin-top: 4px;
font-size: 8px;
font-weight: 600;
letter-spacing: 2px;
color: #697386;
}
/* =========================================================
NAVIGATION
========================================================= */
.navbar-nav {
gap: 4px;
}
.navbar-nav .nav-link {
position: relative;
padding: 9px 13px !important;
color: #354052;
font-size: 16px;
font-weight: 500;
transition: all 0.25s ease;
}
.navbar-nav .nav-link::after {
content: "";
position: absolute;
left: 13px;
right: 13px;
bottom: 3px;
height: 2px;
border-radius: 10px;
background: linear-gradient(90deg, #354a9e, #002244);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.25s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
color: var(--blue);
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
transform: scaleX(1);
}
/* =========================================================
MOBILE BUTTON
========================================================= */
.navbar-toggler {
border: 0;
padding: 7px;
box-shadow: none !important;
}
.navbar-toggler:focus {
box-shadow: none;
}
.navbar-toggler-icon {
width: 24px;
height: 24px;
}
/* =========================================================
HERO
========================================================= */
.hero {
position: relative;
min-height: 70vh;
display: flex;
align-items: center;
padding: 130px 20px 80px;
background-image: url("./images/hero-image.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
/* =========================================================
HERO OVERLAY
========================================================= */
.hero::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at 50% 40%,
rgba(255, 255, 255, 0.08),
transparent 45%
);
pointer-events: none;
}
/* =========================================================
HERO BOTTOM FADE
========================================================= */
.hero::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 140px;
background: linear-gradient(
to bottom,
transparent,
rgba(255, 255, 255, 0.15)
);
pointer-events: none;
}
/* =========================================================
HERO CONTENT AREA
========================================================= */
.hero-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 570px;
margin-left: max(0px, calc((100vw - 1320px) / 2));
text-align: center;
}
/* =========================================================
BIG LOGO
========================================================= */
.hero-logo-wrap {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: 0 0 30px;
}
.hero-logo-box {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 10px;
}
.hero-logo {
display: block;
width: min(800px, 100%);
max-height: 350px;
object-fit: contain;
filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.2));
animation: logoReveal 0.9s ease both;
}
/* =========================================================
LOGO ANIMATION
========================================================= */
@keyframes logoReveal {
from {
opacity: 0;
transform: translateY(18px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* =========================================================
DATE + LOCATION
========================================================= */
.hero-details {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 14px;
width: 100%;
margin-top: 5px;
}
/* =========================================================
DETAIL CARD
========================================================= */
.hero-detail {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 13px 20px;
color: #000;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.42);
border-radius: 14px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
font-size: 14px;
font-weight: 500;
animation: detailReveal 0.8s ease both;
}
.hero-detail:nth-child(2) {
animation-delay: 0.12s;
}
/* =========================================================
DETAIL ICON
========================================================= */
.hero-detail i {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 9px;
background: rgba(255, 255, 255, 0.18);
font-size: 15px;
}
/* =========================================================
DETAIL ANIMATION
========================================================= */
@keyframes detailReveal {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================================================
SCROLL INDICATOR
========================================================= */
.hero-scroll {
position: absolute;
z-index: 3;
left: 50%;
bottom: 27px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
color: #ffffff;
font-size: 9px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
opacity: 0.85;
}
.scroll-line {
position: relative;
width: 1px;
height: 30px;
background: rgba(255, 255, 255, 0.45);
overflow: hidden;
}
.scroll-line::after {
content: "";
position: absolute;
top: -30px;
left: 0;
width: 1px;
height: 30px;
background: #ffffff;
animation: scrollLine 1.8s infinite;
}
@keyframes scrollLine {
0% {
transform: translateY(0);
}
100% {
transform: translateY(60px);
}
}
/* =========================================================
HERO SECOND SECTION
========================================================= */
.hero2 {
background-image: linear-gradient(
145deg,
#ffffff,
#ffffff,
#ffffff
);
border-top: 2px dashed #000;
border-bottom: 2px dashed #000;
}
.hero2 h4 {
font-weight: 500;
}
/* =========================================================
RESPONSIVE - TABLET
========================================================= */
@media (max-width: 1199.98px) {
.hero-content {
max-width: 500px;
margin-left: 30px;
}
.hero-logo {
width: min(500px, 100%);
}
}
/* =========================================================
RESPONSIVE - MOBILE
========================================================= */
@media (max-width: 991.98px) {
.main-navbar {
padding: 14px 0;
}
.navbar-collapse {
margin-top: 12px;
padding: 12px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 15px 40px rgba(0, 34, 68, 0.1);
}
.navbar-nav .nav-link {
padding: 11px 12px !important;
}
.navbar-nav .nav-link::after {
display: none;
}
.hero {
min-height: 100svh;
padding: 120px 20px 70px;
background-position: center;
}
.hero-content {
max-width: 500px;
margin-left: 20px;
margin-right: 20px;
}
.hero-logo {
width: min(480px, 100%);
max-height: 210px;
}
}
/* =========================================================
RESPONSIVE - SMALL MOBILE
========================================================= */
@media (max-width: 575.98px) {
.navbar-brand {
font-size: 17px;
}
.brand-mark {
width: 34px;
height: 34px;
border-radius: 9px;
}
.brand-mark i {
font-size: 16px;
}
.hero {
padding: 110px 15px 65px;
}
.hero-content {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
padding: 0 5px;
}
.hero-logo {
width: 95vw;
max-height: 170px;
}
.hero-logo-wrap {
margin-bottom: 25px;
}
.hero-details {
flex-direction: column;
gap: 10px;
width: 100%;
}
.hero-detail {
width: auto;
justify-content: center;
padding: 11px 16px;
font-size: 12px;
}
.hero-detail i {
width: 27px;
height: 27px;
}
.hero-scroll {
bottom: 18px;
}
}
/* =========================================================
PREVIOUS EDITIONS STATISTICS
========================================================= */
.previous-stats-section {
position: relative;
padding: 64px 20px 48px;
background: linear-gradient(
110deg,
#12345f 0%,
#30479a 52%,
#082c52 100%
);
overflow: hidden;
}
.previous-stats-section::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
top: -300px;
left: 50%;
transform: translateX(-50%);
background: rgba(255, 255, 255, 0.04);
border-radius: 50%;
pointer-events: none;
}
.previous-stats-section .container {
position: relative;
z-index: 2;
}
.stats-heading {
margin-bottom: 30px;
}
.stats-heading h2 {
margin: 0;
color: #ffffff;
font-size: 34px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.5px;
}
.stats-heading-line {
width: 50px;
height: 3px;
margin: 18px auto 0;
background: #ffffff;
border-radius: 10px;
}
.stats-row {
max-width: 1350px;
margin-left: auto;
margin-right: auto;
}
.stat-card {
min-height: 142px;
padding: 16px 15px 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #ffffff;
border-radius: 15px;
text-align: center;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 16px 35px rgba(0, 0, 0, 0.18);
}
.stat-icon {
height: 43px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3px;
}
.stat-icon i {
font-size: 32px;
color: #111111;
}
.stat-number {
color: #172033;
font-size: 32px;
font-weight: 700;
line-height: 1.1;
margin-top: 1px;
}
.stat-label {
margin-top: 6px;
color: #172033;
font-size: 16px;
font-weight: 400;
line-height: 1.2;
}
@media (max-width: 991.98px) {
.previous-stats-section {
padding: 55px 20px 45px;
}
.stats-heading h2 {
font-size: 30px;
}
.stat-card {
min-height: 145px;
}
}
@media (max-width: 575.98px) {
.previous-stats-section {
padding: 45px 15px 35px;
}
.stats-heading {
margin-bottom: 25px;
}
.stats-heading h2 {
font-size: 25px;
}
.stats-heading-line {
margin-top: 14px;
}
.stat-card {
min-height: 140px;
border-radius: 13px;
}
.stat-icon i {
font-size: 29px;
}
.stat-number {
font-size: 29px;
}
.stat-label {
font-size: 15px;
}
}
/* =========================================================
PARTNERS SECTION
========================================================= */
.partners-section {
position: relative;
padding: 75px 20px 80px;
background: #ffffff;
overflow: hidden;
}
.partners-section .container {
position: relative;
z-index: 2;
}
.partners-heading {
text-align: center;
margin-bottom: 38px;
}
.partners-heading h2 {
margin: 0;
color: #172033;
font-size: 34px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.5px;
}
.partners-heading-line {
width: 50px;
height: 3px;
margin: 17px auto 0;
background: #354a9e;
border-radius: 10px;
}
.partner-image-wrap {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.partner-image {
display: block;
width: min(100%, 350px);
height: auto;
object-fit: contain;
border-radius: 16px;
/*box-shadow: 0 15px 45px rgba(0, 34, 68, 0.1);*/
transition:
transform 0.35s ease,
box-shadow 0.35s ease;
}
/*.partner-image:hover {*/
/* transform: translateY(-5px);*/
/* box-shadow: 0 20px 55px rgba(0, 34, 68, 0.15);*/
/*}*/
@media (max-width: 991.98px) {
.partners-section {
padding: 60px 20px 65px;
}
.partners-heading h2 {
font-size: 30px;
}
.partner-image {
width: 100%;
}
}
@media (max-width: 575.98px) {
.partners-section {
padding: 48px 15px 50px;
}
.partners-heading {
margin-bottom: 28px;
}
.partners-heading h2 {
font-size: 25px;
}
.partners-heading-line {
margin-top: 13px;
}
.partner-image {
border-radius: 12px;
}
}
/* =========================================================
EVENT STATISTICS + ABOUT SECTION
========================================================= */
.event-info-section {
position: relative;
width: 100%;
padding: 70px 20px 80px;
background: #ffffff;
overflow: hidden;
}
.event-info-section .container {
position: relative;
z-index: 2;
max-width: 1320px;
}
/* =========================================================
SECTION HEADING
========================================================= */
.event-info-heading {
text-align: center;
margin-bottom: 32px;
}
.event-info-heading h2 {
margin: 0;
color: #002b72;
font-size: 32px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.3px;
}
.event-info-heading-line {
width: 55px;
height: 2px;
margin: 13px auto 0;
background: #002b72;
border-radius: 10px;
}
/* =========================================================
STATISTICS CARDS
========================================================= */
.event-stats-row {
width: 100%;
max-width: 1120px;
margin: 0 auto;
}
.event-stat-card {
width: 100%;
min-height: 78px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 15px;
border-radius: 7px;
background: linear-gradient(
135deg,
#002b72 0%,
#354a9e 55%,
#173b85 100%
);
color: #ffffff;
text-align: center;
box-shadow: 0 8px 20px rgba(0, 34, 68, 0.18);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.event-stat-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 28px rgba(0, 34, 68, 0.23);
}
.event-stat-number {
font-size: 20px;
font-weight: 700;
line-height: 1.15;
margin-bottom: 5px;
}
.event-stat-label {
font-size: 11px;
font-weight: 500;
line-height: 1.2;
}
/* =========================================================
TWO IMAGES ABOVE
========================================================= */
.event-charts-row {
width: 100%;
max-width: 1150px;
margin: 35px auto 65px;
}
.event-chart-box {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.event-chart-image {
display: block;
width: 100%;
max-width: 540px;
height: auto;
object-fit: contain;
}
/* =========================================================
TEXT + RIGHT IMAGE
========================================================= */
.event-description-row {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.event-description {
padding-right: 35px;
}
.event-description p {
margin: 0 0 17px;
color: #172033;
font-size: 14px;
font-weight: 400;
line-height: 1.55;
text-align: left;
}
.event-description strong {
color: #002b72;
font-weight: 700;
}
.event-description .highlight-text {
margin-top: 12px;
margin-bottom: 0;
color: #002b72;
font-size: 15px;
font-weight: 700;
line-height: 1.45;
}
/* =========================================================
RIGHT SIDE IMAGE
========================================================= */
.event-side-image-wrap {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding-left: 15px;
}
.event-side-image {
display: block;
width: 100%;
max-width: 470px;
height: auto;
object-fit: contain;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1400px) {
.event-info-section {
padding-top: 0px;
padding-bottom: 90px;
}
.event-info-section .container {
max-width: 1380px;
}
.event-info-heading h2 {
font-size: 34px;
}
.event-stat-card {
min-height: 82px;
}
.event-stat-number {
font-size: 21px;
}
.event-stat-label {
font-size: 12px;
}
.event-charts-row {
max-width: 1200px;
}
.event-chart-image {
max-width: 560px;
}
.event-description p {
font-size: 16px;
line-height: 1.58;
}
.event-description .highlight-text {
font-size: 15px;
}
.event-side-image {
max-width: 500px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.event-info-section {
padding: 60px 20px 70px;
}
.event-info-section .container {
max-width: 960px;
}
.event-info-heading {
margin-bottom: 30px;
}
.event-info-heading h2 {
font-size: 30px;
}
.event-stat-card {
min-height: 76px;
}
.event-stat-number {
font-size: 19px;
}
.event-stat-label {
font-size: 11px;
}
.event-charts-row {
margin-top: 30px;
margin-bottom: 45px;
}
.event-chart-image {
max-width: 100%;
}
.event-description {
padding-right: 0;
}
.event-description p {
font-size: 14px;
line-height: 1.55;
}
.event-description .highlight-text {
font-size: 14px;
}
.event-side-image-wrap {
padding-left: 0;
margin-top: 25px;
}
.event-side-image {
max-width: 430px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 575.98px) {
.event-info-section {
padding: 48px 15px 55px;
}
.event-info-heading {
margin-bottom: 25px;
}
.event-info-heading h2 {
font-size: 25px;
}
.event-info-heading-line {
width: 48px;
margin-top: 11px;
}
.event-stats-row {
--bs-gutter-x: 10px;
--bs-gutter-y: 10px;
}
.event-stat-card {
min-height: 72px;
padding: 9px 6px;
border-radius: 7px;
}
.event-stat-number {
font-size: 18px;
}
.event-stat-label {
font-size: 10px;
}
.event-charts-row {
margin-top: 25px;
margin-bottom: 35px;
}
.event-chart-box {
margin-bottom: 15px;
}
.event-chart-image {
width: 100%;
max-width: 100%;
}
.event-description {
padding: 0;
}
.event-description p {
margin-bottom: 14px;
font-size: 13px;
line-height: 1.55;
}
.event-description .highlight-text {
font-size: 13px;
line-height: 1.45;
}
.event-side-image-wrap {
margin-top: 25px;
}
.event-side-image {
width: 92%;
max-width: 350px;
}
}
/* =========================================================
FEATURED SPEAKERS SECTION
========================================================= */
/* =========================================================
FEATURED SPEAKERS SECTION
========================================================= */
.featured-speakers-section {
position: relative;
padding: 112px 20px 85px;
background: #f7f9fc;
overflow: hidden;
}
.featured-speakers-section .container {
position: relative;
z-index: 2;
max-width: 1320px;
}
/* =========================================================
SPEAKERS HEADING
========================================================= */
.speakers-heading {
text-align: center;
margin-bottom: 42px;
}
.speakers-heading h2 {
margin: 0;
color: #002b72;
font-size: 32px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.3px;
}
.speakers-heading-line {
width: 55px;
height: 2px;
margin: 13px auto 0;
background: #002b72;
border-radius: 10px;
}
/* =========================================================
SPEAKER ROW
========================================================= */
.speakers-row {
max-width: 1240px;
margin: 0 auto;
}
/* =========================================================
SPEAKER CARD
========================================================= */
.speaker-card {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid rgba(0, 34, 68, 0.07);
border-radius: 14px;
overflow: hidden;
text-align: center;
box-shadow: 0 8px 25px rgba(0, 34, 68, 0.07);
transition:
transform 0.35s ease,
box-shadow 0.35s ease;
}
.speaker-card:hover {
transform: translateY(-7px);
box-shadow: 0 18px 40px rgba(0, 34, 68, 0.14);
}
/* =========================================================
TOP ACCENT
========================================================= */
.speaker-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(
90deg,
#354a9e,
#002244
);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 3;
}
.speaker-card:hover::before {
opacity: 1;
}
/* =========================================================
SPEAKER IMAGE
========================================================= */
.speaker-image-wrap {
position: relative;
width: 100%;
padding: 18px 18px 0;
overflow: hidden;
}
.speaker-image-wrap::after {
content: "";
position: absolute;
left: 18px;
right: 18px;
bottom: 0;
height: 1px;
background: rgba(0, 34, 68, 0.06);
}
.speaker-image {
display: block;
width: 100%;
height: 270px;
object-fit: cover;
object-position: center top;
border-radius: 10px;
transition: transform 0.45s ease;
}
.speaker-card:hover .speaker-image {
transform: scale(1.025);
}
/* =========================================================
SPEAKER INFORMATION
========================================================= */
.speaker-info {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 21px 15px 20px;
}
.speaker-name {
margin: 0 0 7px;
color: #172033;
font-size: 17px;
font-weight: 700;
line-height: 1.3;
}
.speaker-designation {
margin: 0 0 5px;
color: #354a9e;
font-size: 12px;
font-weight: 600;
line-height: 1.45;
}
.speaker-company {
margin: 0;
color: #697386;
font-size: 11px;
font-weight: 500;
line-height: 1.4;
}
/* =========================================================
LINKEDIN BUTTON - TOP RIGHT OF IMAGE
========================================================= */
.speaker-linkedin {
position: absolute;
top: 28px;
right: 28px;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0;
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 50%;
background: #ffffff;
color: #354a9e;
font-size: 15px;
text-decoration: none;
z-index: 5;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.14);
transition:
background 0.3s ease,
color 0.3s ease,
border-color 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
}
.speaker-linkedin:hover {
background: #354a9e;
color: #ffffff;
border-color: #354a9e;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(53, 74, 158, 0.22);
}
.speaker-linkedin i {
line-height: 1;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.featured-speakers-section {
padding: 60px 20px 70px;
}
.speakers-heading {
margin-bottom: 35px;
}
.speakers-heading h2 {
font-size: 30px;
}
.speaker-image {
height: 260px;
}
.speaker-name {
font-size: 16px;
}
.speaker-designation {
font-size: 12px;
}
.speaker-company {
font-size: 11px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 575.98px) {
.featured-speakers-section {
padding: 50px 15px 55px;
}
.speakers-heading {
margin-bottom: 28px;
}
.speakers-heading h2 {
font-size: 25px;
}
.speakers-heading-line {
width: 48px;
margin-top: 11px;
}
.speaker-image-wrap {
padding: 14px 14px 0;
}
.speaker-image-wrap::after {
left: 14px;
right: 14px;
}
.speaker-image {
height: 280px;
border-radius: 9px;
}
.speaker-info {
padding: 18px 12px 20px;
}
.speaker-name {
font-size: 16px;
}
.speaker-designation {
font-size: 11px;
}
.speaker-company {
font-size: 10px;
}
.speaker-linkedin {
top: 23px;
right: 23px;
width: 32px;
height: 32px;
font-size: 14px;
margin-top: 0;
}
}
/* =========================================================
KEY THEMES SECTION
========================================================= */
.key-themes-section {
position: relative;
padding: 85px 20px 90px;
background: #ffffff;
overflow: hidden;
}
/* Very subtle background decoration */
.key-themes-section::before {
content: "";
position: absolute;
width: 420px;
height: 420px;
top: -250px;
right: -180px;
background: rgba(53, 74, 158, 0.035);
border-radius: 50%;
pointer-events: none;
}
.key-themes-section::after {
content: "";
position: absolute;
width: 320px;
height: 320px;
bottom: -210px;
left: -150px;
background: rgba(53, 74, 158, 0.025);
border-radius: 50%;
pointer-events: none;
}
.key-themes-section .container {
position: relative;
z-index: 2;
max-width: 1320px;
}
/* =========================================================
HEADING
========================================================= */
.key-themes-heading {
text-align: center;
margin-bottom: 48px;
}
.key-themes-heading h2 {
margin: 0;
color: #002b72;
font-size: 34px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.5px;
}
.key-themes-heading-line {
width: 55px;
height: 3px;
margin: 16px auto 0;
background: #002b72;
border-radius: 10px;
}
/* =========================================================
THEMES GRID
========================================================= */
.key-themes-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 22px;
max-width: 1280px;
margin: 0 auto;
}
/* =========================================================
THEME CARD
========================================================= */
.theme-card {
position: relative;
min-height: 205px;
padding: 26px 24px 25px;
background: #ffffff;
border: 1px solid #edf0f6;
border-radius: 18px;
box-shadow: 0 8px 30px rgba(0, 34, 68, 0.07);
overflow: hidden;
display: flex;
flex-direction: column;
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
}
/* Top accent line */
.theme-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, #354a9e, #002244);
opacity: 0;
transition: opacity 0.3s ease;
}
/* Hover */
.theme-card:hover {
transform: translateY(-7px);
border-color: rgba(53, 74, 158, 0.18);
box-shadow: 0 18px 45px rgba(0, 34, 68, 0.12);
}
.theme-card:hover::before {
opacity: 1;
}
/* =========================================================
CARD TOP
========================================================= */
.theme-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 22px;
}
/* =========================================================
ICON
========================================================= */
.theme-icon {
width: 54px;
height: 54px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #ffffff;
background: linear-gradient(145deg, #5067d7, #354a9e);
box-shadow: 0 8px 20px rgba(53, 74, 158, 0.18);
transition: transform 0.3s ease;
}
.theme-icon i {
font-size: 23px;
}
.theme-card:hover .theme-icon {
transform: scale(1.08) rotate(-3deg);
}
/* Different icon colors */
.theme-card:nth-child(2) .theme-icon {
background: linear-gradient(145deg, #15b98a, #079c73);
}
.theme-card:nth-child(3) .theme-icon {
background: linear-gradient(145deg, #f7a10b, #e58200);
}
.theme-card:nth-child(4) .theme-icon {
background: linear-gradient(145deg, #19b4d0, #0795b2);
}
.theme-card:nth-child(5) .theme-icon {
background: linear-gradient(145deg, #8950f5, #7040db);
}
.theme-card:nth-child(6) .theme-icon {
background: linear-gradient(145deg, #ef3f91, #d82d79);
}
.theme-card:nth-child(7) .theme-icon {
background: linear-gradient(145deg, #ff6a1a, #f4510a);
}
.theme-card:nth-child(8) .theme-icon {
background: linear-gradient(145deg, #17b7a9, #079b91);
}
.theme-card:nth-child(9) .theme-icon {
background: linear-gradient(145deg, #f13c3c, #df2929);
}
.theme-card:nth-child(10) .theme-icon {
background: linear-gradient(145deg, #12b98a, #079c73);
}
.theme-card:nth-child(11) .theme-icon {
background: linear-gradient(145deg, #13afd0, #0796b3);
}
.theme-card:nth-child(12) .theme-icon {
background: linear-gradient(145deg, #ed3c91, #d92b78);
}
/* =========================================================
NUMBER
========================================================= */
.theme-number {
color: #dce5fa;
font-size: 35px;
font-weight: 700;
line-height: 1;
letter-spacing: -1px;
}
/* =========================================================
THEME TEXT
========================================================= */
.theme-text {
margin: auto 0 0;
color: #172033;
font-size: 14px;
font-weight: 500;
line-height: 1.55;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1199.98px) {
.key-themes-section {
padding: 70px 20px 75px;
}
.key-themes-heading {
margin-bottom: 40px;
}
.key-themes-heading h2 {
font-size: 31px;
}
.key-themes-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.theme-card {
min-height: 210px;
padding: 23px 21px;
}
.theme-number {
font-size: 32px;
}
.theme-text {
font-size: 13.5px;
}
}
/* =========================================================
SMALL TABLET
========================================================= */
@media (max-width: 991.98px) {
.key-themes-section {
padding: 60px 20px 70px;
}
.key-themes-heading {
margin-bottom: 35px;
}
.key-themes-heading h2 {
font-size: 29px;
}
.key-themes-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.theme-card {
min-height: 205px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 575.98px) {
.key-themes-section {
padding: 50px 15px 55px;
}
.key-themes-heading {
margin-bottom: 30px;
}
.key-themes-heading h2 {
font-size: 25px;
line-height: 1.3;
}
.key-themes-heading-line {
width: 48px;
height: 2px;
margin-top: 12px;
}
.key-themes-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.theme-card {
min-height: 0;
padding: 21px 20px 23px;
border-radius: 15px;
}
.theme-card-top {
margin-bottom: 18px;
}
.theme-icon {
width: 50px;
height: 50px;
}
.theme-icon i {
font-size: 21px;
}
.theme-number {
font-size: 30px;
}
.theme-text {
font-size: 13px;
line-height: 1.55;
}
}
/* =========================================================
KEY THEMES SECTION
========================================================= */
.key-themes-section {
position: relative;
padding: 95px 20px 105px;
background: linear-gradient(
135deg,
#f7f9fc 0%,
#ffffff 45%,
#eef3fb 100%
);
overflow: hidden;
}
/* =========================================================
BACKGROUND DECORATION
========================================================= */
.key-themes-section::before {
content: "";
position: absolute;
width: 600px;
height: 600px;
top: -300px;
right: -220px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(53, 74, 158, 0.08),
transparent 68%
);
pointer-events: none;
}
.key-themes-section::after {
content: "";
position: absolute;
width: 450px;
height: 450px;
bottom: -260px;
left: -200px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(0, 43, 114, 0.06),
transparent 68%
);
pointer-events: none;
}
.key-themes-section .container {
position: relative;
z-index: 2;
max-width: 1320px;
}
/* =========================================================
HEADER
========================================================= */
.key-themes-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 50px;
margin-bottom: 55px;
padding-bottom: 30px;
border-bottom: 1px solid rgba(0, 43, 114, 0.12);
}
/* Small Label */
.key-themes-label {
position: relative;
min-width: 170px;
padding-left: 18px;
color: #354a9e;
font-size: 11px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
}
.key-themes-label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 4px;
height: 30px;
transform: translateY(-50%);
border-radius: 10px;
background: linear-gradient(to bottom, #354a9e, #002244);
}
/* Main Heading */
.key-themes-title-wrap {
flex: 1;
max-width: 880px;
}
.key-themes-title-wrap h2 {
margin: 0;
color: #002b72;
font-size: 32px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.3px;
}
.key-themes-title-wrap h2 span {
color: #354a9e;
}
.key-themes-title-wrap p {
margin: 10px auto 0;
max-width: 650px;
color: #687386;
font-size: 13px;
font-weight: 400;
line-height: 1.6;
}
/* =========================================================
THEMES GRID
========================================================= */
.themes-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px 20px;
}
/* =========================================================
THEME ITEM
========================================================= */
.theme-item {
position: relative;
display: grid;
grid-template-columns: 42px 54px 1fr 36px;
align-items: center;
min-height: 142px;
padding: 22px 22px 22px 18px;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(0, 43, 114, 0.08);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 34, 68, 0.055);
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Left accent */
.theme-item::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(to bottom, #354a9e, #002244);
transform: scaleY(0);
transform-origin: center;
transition: transform 0.3s ease;
}
.theme-item:hover {
transform: translateY(-5px);
border-color: rgba(53, 74, 158, 0.2);
box-shadow: 0 18px 45px rgba(0, 34, 68, 0.11);
}
.theme-item:hover::before {
transform: scaleY(1);
}
/* =========================================================
NUMBER
========================================================= */
.theme-number {
color: #b9c8e8;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
align-self: start;
padding-top: 3px;
}
/* =========================================================
ICON
========================================================= */
.theme-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
color: #ffffff;
font-size: 19px;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.theme-item:hover .theme-icon {
transform: rotate(-5deg) scale(1.08);
}
/* Icon Colors */
.theme-blue {
background: #4d6ff2;
}
.theme-green {
background: #09a979;
}
.theme-orange {
background: #ed8b00;
}
.theme-cyan {
background: #0ca5c4;
}
.theme-purple {
background: #8050e8;
}
.theme-pink {
background: #e73583;
}
.theme-red {
background: #ee3036;
}
.theme-teal {
background: #0ca79e;
}
.theme-coral {
background: #f04c49;
}
.theme-sky {
background: #119fbe;
}
.theme-magenta {
background: #df3182;
}
/* =========================================================
CONTENT
========================================================= */
.theme-content {
padding: 0 15px;
}
.theme-content h3 {
margin: 0 0 6px;
color: #172033;
font-size: 16px;
font-weight: 650;
line-height: 1.3;
}
.theme-content p {
margin: 0;
color: #687386;
font-size: 12px;
font-weight: 400;
line-height: 1.55;
}
/* =========================================================
ARROW
========================================================= */
.theme-arrow {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(0, 43, 114, 0.1);
border-radius: 50%;
color: #354a9e;
font-size: 13px;
opacity: 0.45;
transition: all 0.3s ease;
}
.theme-item:hover .theme-arrow {
color: #ffffff;
background: #002b72;
border-color: #002b72;
opacity: 1;
transform: translate(2px, -2px);
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1400px) {
.key-themes-section {
padding-top: 105px;
padding-bottom: 115px;
}
.key-themes-header {
margin-bottom: 60px;
}
.theme-item {
min-height: 150px;
padding: 24px 24px 24px 20px;
}
.theme-content h3 {
font-size: 17px;
}
.theme-content p {
font-size: 13px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.key-themes-section {
padding: 70px 20px 80px;
}
.key-themes-header {
align-items: flex-start;
flex-direction: column;
gap: 22px;
margin-bottom: 40px;
}
.key-themes-label {
min-width: auto;
}
.key-themes-title-wrap {
max-width: 100%;
}
.key-themes-title-wrap h2 {
font-size: 38px;
}
.themes-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.theme-item {
grid-template-columns:
34px
48px
1fr
30px;
min-height: 150px;
padding: 18px 15px;
}
.theme-icon {
width: 43px;
height: 43px;
font-size: 17px;
}
.theme-content {
padding: 0 10px;
}
.theme-content h3 {
font-size: 14px;
}
.theme-content p {
font-size: 11px;
}
.theme-arrow {
width: 28px;
height: 28px;
font-size: 11px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 575.98px) {
.key-themes-section {
padding: 55px 15px 65px;
}
.key-themes-header {
margin-bottom: 32px;
padding-bottom: 23px;
}
.key-themes-title-wrap h2 {
font-size: 29px;
letter-spacing: -0.8px;
}
.key-themes-title-wrap p {
margin-top: 13px;
font-size: 12px;
line-height: 1.65;
}
.key-themes-label {
font-size: 9px;
letter-spacing: 2px;
}
.key-themes-label::before {
height: 24px;
}
.themes-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.theme-item {
grid-template-columns:
32px
46px
1fr
28px;
min-height: 125px;
padding: 17px 13px;
}
.theme-number {
font-size: 10px;
}
.theme-icon {
width: 42px;
height: 42px;
border-radius: 12px;
font-size: 16px;
}
.theme-content {
padding: 0 8px;
}
.theme-content h3 {
margin-bottom: 5px;
font-size: 14px;
}
.theme-content p {
font-size: 11px;
line-height: 1.5;
}
.theme-arrow {
width: 27px;
height: 27px;
font-size: 10px;
}
}
/* =========================================================
WHO SHOULD ATTEND
========================================================= */
.who-attend-section {
position: relative;
width: 100%;
padding: 95px 20px 100px;
/*background: linear-gradient(*/
/*135deg,*/
/*#f8fbff 0%,*/
/*#ffffff 48%,*/
/*#f5f8fd 100%*/
/*);*/
overflow: hidden;
}
/* =========================================================
BACKGROUND DECORATION
========================================================= */
.who-attend-section::before {
content: "";
position: absolute;
width: 520px;
height: 520px;
left: -260px;
top: -230px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(53, 74, 158, 0.08),
transparent 68%
);
pointer-events: none;
}
.who-attend-section::after {
content: "";
position: absolute;
width: 420px;
height: 420px;
right: -220px;
bottom: -220px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(0, 43, 114, 0.06),
transparent 68%
);
pointer-events: none;
}
.who-attend-section .container {
position: relative;
z-index: 2;
max-width: 1320px;
}
/* =========================================================
MAIN LAYOUT
========================================================= */
.who-attend-layout {
display: grid;
grid-template-columns:
minmax(0, 0.9fr)
minmax(0, 1.1fr);
align-items: center;
gap: 80px;
}
/* =========================================================
LEFT VISUAL
========================================================= */
.who-attend-visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 520px;
}
/* Image background panel */
.who-attend-image-box {
position: relative;
width: 100%;
max-width: 540px;
min-height: 480px;
display: flex;
align-items: center;
justify-content: center;
padding: 45px 35px;
border-radius: 35px;
}
/* Decorative circle */
.who-attend-image-box::before {
content: "";
position: absolute;
width: 330px;
height: 330px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: linear-gradient(
145deg,
rgba(53, 74, 158, 0.1),
rgba(53, 74, 158, 0.02)
);
}
/* Decorative ring */
.who-attend-image-box::after {
content: "";
position: absolute;
width: 410px;
height: 410px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px dashed rgba(53, 74, 158, 0.16);
}
/* Glow */
.who-attend-image-glow {
position: absolute;
width: 180px;
height: 180px;
top: 20px;
right: 15px;
border-radius: 50%;
background: rgba(53, 74, 158, 0.1);
filter: blur(35px);
}
/* Actual image */
.who-attend-image {
position: relative;
z-index: 3;
display: block;
width: 100%;
max-width: 455px;
height: auto;
object-fit: contain;
filter: drop-shadow(0 25px 25px rgba(0, 34, 68, 0.12));
transition: transform 0.45s ease;
}
.who-attend-image-box:hover .who-attend-image {
transform: translateY(-7px) scale(1.015);
}
/* =========================================================
IMAGE LABEL
========================================================= */
.who-attend-image-label {
position: absolute;
z-index: 5;
left: 25px;
bottom: 22px;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 10px 16px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(0, 34, 68, 0.08);
border-radius: 50px;
color: #172033;
font-size: 11px;
font-weight: 600;
box-shadow: 0 10px 25px rgba(0, 34, 68, 0.1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.label-dot {
width: 8px;
height: 8px;
flex-shrink: 0;
border-radius: 50%;
background: #354a9e;
box-shadow: 0 0 0 4px rgba(53, 74, 158, 0.12);
}
/* =========================================================
RIGHT CONTENT
========================================================= */
.who-attend-content {
width: 100%;
}
/* =========================================================
EYEBROW
========================================================= */
.who-attend-eyebrow {
display: inline-flex;
align-items: center;
margin-bottom: 12px;
color: #354a9e;
font-size: 11px;
font-weight: 700;
letter-spacing: 2.2px;
text-transform: uppercase;
}
/* =========================================================
HEADING
========================================================= */
.who-attend-heading h2 {
margin: 0;
max-width: 650px;
color: #002b72;
font-size: 38px;
font-weight: 700;
line-height: 1.18;
letter-spacing: -0.7px;
}
.who-attend-heading h2 span {
color: #354a9e;
}
.who-attend-line {
width: 58px;
height: 3px;
margin: 17px 0 16px;
border-radius: 10px;
background: linear-gradient(90deg, #354a9e, #002244);
}
.who-attend-heading p {
margin: 0 0 30px;
color: #697386;
font-size: 14px;
font-weight: 400;
line-height: 1.6;
}
/* =========================================================
AUDIENCE GRID
========================================================= */
.who-attend-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
}
/* =========================================================
AUDIENCE ITEM
========================================================= */
.who-attend-item {
position: relative;
min-height: 82px;
display: flex;
align-items: center;
padding: 12px 18px 12px 13px;
background: #ffffff;
border: 1px solid rgba(0, 43, 114, 0.08);
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0, 34, 68, 0.055);
overflow: hidden;
cursor: default;
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
}
.who-attend-item:hover {
transform: translateY(-4px);
border-color: rgba(53, 74, 158, 0.2);
box-shadow: 0 15px 32px rgba(0, 34, 68, 0.11);
}
/* =========================================================
LEFT ACCENT
========================================================= */
.who-attend-item::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(to bottom, #354a9e, #002244);
opacity: 0;
transition: opacity 0.3s ease;
}
.who-attend-item:hover::before {
opacity: 1;
}
/* =========================================================
NUMBER
========================================================= */
.who-attend-number {
width: 35px;
flex-shrink: 0;
color: #cbd7f1;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
}
/* =========================================================
ICON
========================================================= */
.who-attend-icon {
width: 43px;
height: 43px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
margin-right: 13px;
border-radius: 12px;
color: #354a9e;
background: #eef3ff;
font-size: 17px;
transition:
background 0.3s ease,
color 0.3s ease;
}
.who-attend-item:hover .who-attend-icon {
color: #ffffff;
background: linear-gradient(145deg, #354a9e, #002244);
}
/* =========================================================
TEXT
========================================================= */
.who-attend-text {
min-width: 0;
}
.who-attend-text span {
display: block;
color: #172033;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1400px) {
.who-attend-section {
padding-top: 105px;
padding-bottom: 110px;
}
.who-attend-layout {
gap: 95px;
}
.who-attend-heading h2 {
font-size: 42px;
}
.who-attend-heading p {
font-size: 15px;
}
.who-attend-item {
min-height: 88px;
}
.who-attend-text span {
font-size: 15px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1199.98px) {
.who-attend-layout {
grid-template-columns:
minmax(0, 0.85fr)
minmax(0, 1.15fr);
gap: 45px;
}
.who-attend-image-box {
min-height: 420px;
}
.who-attend-heading h2 {
font-size: 34px;
}
.who-attend-item {
padding-right: 12px;
}
.who-attend-number {
width: 27px;
}
.who-attend-icon {
width: 39px;
height: 39px;
margin-right: 10px;
}
.who-attend-text span {
font-size: 13px;
}
}
/* =========================================================
TABLET / SMALL LAPTOP
========================================================= */
@media (max-width: 991.98px) {
.who-attend-section {
padding: 75px 20px 80px;
}
.who-attend-layout {
grid-template-columns: 1fr;
gap: 55px;
}
.who-attend-visual {
min-height: auto;
}
.who-attend-image-box {
max-width: 650px;
min-height: 430px;
margin: 0 auto;
}
.who-attend-image {
max-width: 480px;
}
.who-attend-content {
max-width: 760px;
margin: 0 auto;
}
.who-attend-heading {
text-align: center;
}
.who-attend-heading h2 {
margin-left: auto;
margin-right: auto;
}
.who-attend-line {
margin-left: auto;
margin-right: auto;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 575.98px) {
.who-attend-section {
padding: 55px 15px 65px;
}
.who-attend-layout {
gap: 38px;
}
.who-attend-image-box {
min-height: 310px;
padding: 25px 18px;
border-radius: 25px;
}
.who-attend-image-box::before {
width: 230px;
height: 230px;
}
.who-attend-image-box::after {
width: 285px;
height: 285px;
}
.who-attend-image {
max-width: 330px;
}
.who-attend-image-label {
left: 15px;
bottom: 14px;
padding: 8px 12px;
font-size: 9px;
}
.who-attend-eyebrow {
font-size: 9px;
letter-spacing: 1.7px;
margin-bottom: 9px;
}
.who-attend-heading h2 {
font-size: 27px;
line-height: 1.22;
}
.who-attend-heading p {
margin-bottom: 23px;
font-size: 12px;
}
.who-attend-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.who-attend-item {
min-height: 70px;
padding: 10px 13px;
border-radius: 13px;
}
.who-attend-number {
width: 30px;
font-size: 10px;
}
.who-attend-icon {
width: 38px;
height: 38px;
margin-right: 11px;
border-radius: 10px;
font-size: 15px;
}
.who-attend-text span {
font-size: 13px;
}
}
/* =========================================================
MODERN AWARDS SECTION
========================================================= */
/* =========================================================
AWARDS SECTION
========================================================= */
.awards-modern-section {
position: relative;
padding: 85px 20px 90px;
background: #11274c;
overflow: hidden;
}
/* Subtle background detail */
.awards-modern-section::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
top: -280px;
right: -180px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.035);
}
.awards-modern-section::after {
content: "";
position: absolute;
width: 350px;
height: 350px;
bottom: -220px;
left: -180px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.035);
}
.awards-modern-section .container {
position: relative;
z-index: 2;
max-width: 1200px;
}
/* =========================================================
MAIN HEADING
========================================================= */
.awards-header {
max-width: 820px;
margin: 0 auto 55px;
text-align: center;
}
.awards-header h2 {
margin: 0;
color: #d8b83f;
font-size: 34px;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.1px;
}
.awards-heading-line {
width: 58px;
height: 2px;
margin: 16px auto 20px;
border-radius: 10px;
background: #d8b83f;
}
.awards-intro {
margin: 0 0 13px;
color: #ffffff;
font-size: 13px;
font-weight: 500;
line-height: 1.6;
}
.awards-description {
max-width: 720px;
margin: 0 auto;
color: rgba(255, 255, 255, 0.78);
font-size: 11px;
font-weight: 400;
line-height: 1.65;
}
/* =========================================================
AWARD GROUP
========================================================= */
.award-group {
margin-bottom: 52px;
}
.award-group-heading {
position: relative;
margin-bottom: 22px;
padding-bottom: 13px;
text-align: center;
}
.award-group-heading::after {
content: "";
display: block;
width: 100%;
max-width: 430px;
height: 1px;
margin: 13px auto 0;
background: rgba(255, 255, 255, 0.25);
}
.award-group-heading h3 {
margin: 0;
color: #d8b83f;
font-size: 19px;
font-weight: 600;
line-height: 1.35;
}
/* =========================================================
AWARD GRID
========================================================= */
.award-grid {
display: grid;
gap: 12px;
}
/* Excellence = 4 columns */
.excellence-grid {
grid-template-columns: repeat(4, 1fr);
}
/* Leadership = 4 columns */
.leadership-grid {
grid-template-columns: repeat(4, 1fr);
}
/* =========================================================
AWARD CARD
========================================================= */
.award-item {
position: relative;
min-height: 72px;
display: flex;
align-items: center;
gap: 10px;
padding: 11px 12px;
background: rgba(255, 255, 255, 0.015);
border: 1px solid rgba(255, 255, 255, 0.20);
border-radius: 4px;
transition:
background 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease;
}
.award-item:hover {
background: rgba(255, 255, 255, 0.055);
border-color: rgba(216, 184, 63, 0.65);
transform: translateY(-2px);
}
/* =========================================================
ICON
========================================================= */
.award-icon {
width: 31px;
height: 31px;
flex: 0 0 31px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #ffffff;
color: #11274c;
font-size: 13px;
line-height: 1;
}
.award-icon i {
line-height: 1;
}
/* =========================================================
AWARD TITLE
========================================================= */
.award-item h4 {
margin: 0;
color: #ffffff;
font-size: 10px;
font-weight: 500;
line-height: 1.35;
}
/* =========================================================
LEADERSHIP LAST ROW
7 ITEMS = 4 + 3
========================================================= */
.leadership-grid .award-item:nth-child(5) {
grid-column: 1;
}
.leadership-grid .award-item:nth-child(7) {
grid-column: 3;
}
/* =========================================================
TEAM AWARD
========================================================= */
.team-award-box {
width: fit-content;
min-width: 300px;
max-width: 100%;
margin: 5px auto 0;
display: flex;
align-items: center;
justify-content: center;
gap: 11px;
padding: 11px 18px;
background: rgba(255, 255, 255, 0.015);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 4px;
transition:
background 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease;
}
.team-award-box:hover {
background: rgba(255, 255, 255, 0.055);
border-color: rgba(216, 184, 63, 0.65);
transform: translateY(-2px);
}
.team-award-icon {
width: 31px;
height: 31px;
flex: 0 0 31px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #ffffff;
color: #11274c;
font-size: 13px;
}
.team-award-content {
text-align: left;
}
.team-award-box span {
display: block;
margin-bottom: 3px;
color: #d8b83f;
font-size: 9px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}
.team-award-box h3 {
margin: 0;
color: #ffffff;
font-size: 11px;
font-weight: 500;
line-height: 1.4;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.awards-modern-section {
padding: 70px 20px 75px;
}
.awards-header {
margin-bottom: 45px;
}
.awards-header h2 {
font-size: 30px;
}
.excellence-grid,
.leadership-grid {
grid-template-columns: repeat(2, 1fr);
}
.leadership-grid .award-item:nth-child(5),
.leadership-grid .award-item:nth-child(7) {
grid-column: auto;
}
.award-item {
min-height: 70px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.awards-modern-section {
padding: 55px 15px 65px;
}
.awards-header {
margin-bottom: 38px;
}
.awards-header h2 {
font-size: 25px;
line-height: 1.3;
}
.awards-heading-line {
width: 48px;
margin-top: 12px;
margin-bottom: 17px;
}
.awards-intro {
font-size: 12px;
}
.awards-description {
font-size: 10px;
line-height: 1.6;
}
.award-group {
margin-bottom: 40px;
}
.award-group-heading {
margin-bottom: 18px;
}
.award-group-heading h3 {
font-size: 18px;
}
.award-group-heading::after {
max-width: 300px;
}
.excellence-grid,
.leadership-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.leadership-grid .award-item:nth-child(5),
.leadership-grid .award-item:nth-child(7) {
grid-column: auto;
}
.award-item {
min-height: 65px;
padding: 10px 12px;
}
.award-icon {
width: 30px;
height: 30px;
flex-basis: 30px;
font-size: 12px;
}
.award-item h4 {
font-size: 10.5px;
}
.team-award-box {
width: 100%;
min-width: 0;
padding: 11px 14px;
}
.team-award-box h3 {
font-size: 11px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 575.98px) {
.awards-header h2 {
font-size: 23px;
}
.award-group-heading h3 {
font-size: 17px;
}
.award-item h4 {
font-size: 10px;
}
.team-award-box {
justify-content: flex-start;
}
}
/* =========================================================
WHY ATTEND
========================================================= */
.why-attend-section {
position: relative;
padding: 90px 20px 100px;
background: #ffffff;
overflow: hidden;
}
.why-attend-section::after {
content: "";
position: absolute;
width: 450px;
height: 450px;
left: -250px;
bottom: -250px;
border-radius: 50%;
background: rgba(53, 74, 158, 0.045);
}
.why-attend-section .container {
position: relative;
z-index: 2;
max-width: 1320px;
}
/* HEADER */
.why-attend-header {
text-align: center;
max-width: 850px;
margin: 0 auto 60px;
}
.why-attend-header h2 {
margin: 0;
color: #002b72;
font-size: 38px;
font-weight: 700;
line-height: 1.25;
}
.why-heading-line {
width: 60px;
height: 3px;
margin: 18px auto;
border-radius: 10px;
background: #002b72;
}
.why-attend-header p {
max-width: 720px;
margin: 0 auto;
color: #687386;
font-size: 16px;
line-height: 1.7;
}
/* GRID */
.why-attend-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 1100px;
margin: 0 auto;
}
/* CARD */
.why-card {
position: relative;
min-height: 155px;
display: grid;
grid-template-columns: 42px 58px 1fr;
align-items: center;
gap: 18px;
padding: 25px 28px;
border-radius: 18px;
background: #f7f9fc;
border: 1px solid rgba(0, 43, 114, 0.07);
transition:
transform 0.3s ease,
background 0.3s ease,
box-shadow 0.3s ease;
}
.why-card:hover {
transform: translateY(-5px);
background: #ffffff;
box-shadow: 0 18px 40px rgba(0, 34, 68, 0.1);
}
/* NUMBER */
.why-number {
align-self: start;
color: #d8e2f8;
font-size: 24px;
font-weight: 800;
line-height: 1;
}
/* ICON */
.why-icon {
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px;
background: linear-gradient(135deg, #354a9e, #002b72);
color: #ffffff;
font-size: 21px;
box-shadow: 0 8px 20px rgba(53, 74, 158, 0.18);
}
/* TEXT */
.why-card h3 {
margin: 0 0 7px;
color: #172033;
font-size: 17px;
font-weight: 700;
line-height: 1.3;
}
.why-card p {
margin: 0;
color: #697386;
font-size: 13px;
font-weight: 400;
line-height: 1.6;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1400px) {
.awards-modern-section,
.why-attend-section {
padding-top: 100px;
padding-bottom: 110px;
}
.awards-header h2,
.why-attend-header h2 {
font-size: 40px;
}
.award-grid {
gap: 20px;
}
.award-item {
min-height: 110px;
padding: 23px 25px;
}
.award-item h4 {
font-size: 16px;
}
.why-attend-grid {
max-width: 1150px;
}
.why-card {
min-height: 165px;
padding: 28px 30px;
}
.why-card h3 {
font-size: 18px;
}
.why-card p {
font-size: 14px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.awards-modern-section,
.why-attend-section {
padding: 70px 20px 80px;
}
.awards-header,
.why-attend-header {
margin-bottom: 45px;
}
.awards-header h2,
.why-attend-header h2 {
font-size: 32px;
}
.award-grid {
grid-template-columns: repeat(2, 1fr);
}
.why-attend-grid {
grid-template-columns: 1fr;
max-width: 800px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 575.98px) {
.awards-modern-section,
.why-attend-section {
padding: 55px 15px 65px;
}
.section-kicker {
font-size: 10px;
letter-spacing: 1.5px;
}
.awards-header h2,
.why-attend-header h2 {
font-size: 27px;
}
.awards-header p,
.why-attend-header p {
font-size: 13px;
}
.award-group {
margin-bottom: 45px;
}
.award-group-heading {
gap: 14px;
}
.award-group-heading > span {
width: 48px;
height: 48px;
border-radius: 13px;
font-size: 15px;
}
.award-group-heading h3 {
font-size: 19px;
}
.award-group-heading p {
font-size: 12px;
}
.award-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.award-item {
min-height: 90px;
padding: 17px;
gap: 14px;
border-radius: 14px;
}
.award-icon {
width: 43px;
height: 43px;
border-radius: 11px;
font-size: 17px;
}
.award-item h4 {
font-size: 14px;
}
.team-award-box {
padding: 20px;
gap: 14px;
text-align: left;
}
.team-award-icon {
width: 48px;
height: 48px;
}
.team-award-box h3 {
font-size: 14px;
}
.why-attend-grid {
gap: 14px;
}
.why-card {
min-height: 145px;
grid-template-columns: 30px 48px 1fr;
gap: 12px;
padding: 20px;
}
.why-number {
font-size: 18px;
}
.why-icon {
width: 48px;
height: 48px;
border-radius: 12px;
font-size: 18px;
}
.why-card h3 {
font-size: 15px;
}
.why-card p {
font-size: 12px;
line-height: 1.5;
}
}
/* =========================================================
COMMON SPONSOR SECTION STYLES
========================================================= */
.sponsor-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
/* =========================================================
COMMON SECTION HEADING
========================================================= */
.sponsor-section-heading {
text-align: center;
margin-bottom: 48px;
}
.sponsor-heading-label {
display: block;
margin-bottom: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.8px;
color: #6d7682;
text-transform: uppercase;
}
.sponsor-section-heading h2 {
margin: 0;
color: #0e2a57;
font-size: 40px;
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.4px;
}
.sponsor-section-heading h4 {
margin: 0;
color: #0e2a57;
font-size: 23px;
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.4px;
}
.sponsor-heading-line {
width: 48px;
height: 3px;
margin: 16px auto 0;
background: #0e2a57;
}
/* =========================================================
WHY TO SPONSOR
========================================================= */
.why-sponsor-section {
padding: 80px 0 0px;
background: #f7f9fc;
}
/* Main two-column layout */
.why-sponsor-layout {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(400px, 0.9fr);
gap: 65px;
align-items: center;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.why-sponsor-content {
max-width: 680px;
}
.why-sponsor-content > p {
margin: 0 0 19px;
color: #3f4650;
font-size: 16px;
line-height: 1.7;
}
.why-sponsor-content > p:last-of-type {
margin-bottom: 32px;
}
.why-sponsor-content strong {
color: #172f56;
font-weight: 700;
}
/* =========================================================
WHY SPONSOR POINTS
========================================================= */
.why-sponsor-points {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.why-sponsor-point {
display: grid;
grid-template-columns: 46px 1fr;
gap: 16px;
padding: 17px 18px;
background: #ffffff;
border: 1px solid #e2e6eb;
border-radius: 4px;
}
.why-point-number {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
color: #0e2a57;
background: #f0f3f7;
font-size: 13px;
font-weight: 700;
}
.why-sponsor-point h3 {
margin: 1px 0 5px;
color: #0e2a57;
font-size: 16px;
line-height: 1.35;
font-weight: 700;
}
.why-sponsor-point p {
margin: 0;
color: #626a75;
font-size: 14px;
line-height: 1.55;
}
/* =========================================================
RIGHT VISUAL
========================================================= */
.why-sponsor-visual {
position: relative;
}
.why-sponsor-image-wrap {
width: 100%;
height: 455px;
overflow: hidden;
background: #e9edf2;
border: 1px solid #dfe3e8;
}
.why-sponsor-image-wrap img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Small information card */
.why-sponsor-side-card {
position: absolute;
left: -35px;
bottom: 28px;
width: 290px;
padding: 25px 26px;
background: #ffffff;
border: 1px solid #e1e5ea;
box-shadow: 0 12px 35px rgba(20, 35, 55, 0.12);
}
.why-side-label {
display: block;
margin-bottom: 9px;
color: #68717d;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
}
.why-sponsor-side-card h3 {
margin: 0 0 10px;
color: #0e2a57;
font-size: 19px;
line-height: 1.4;
font-weight: 700;
}
.why-sponsor-side-card p {
margin: 0;
color: #5e6671;
font-size: 14px;
line-height: 1.6;
}
/* =========================================================
WHAT YOU GAIN AS A SPONSOR
========================================================= */
.sponsor-gain-section {
padding: 85px 0 95px;
/* background: #ffffff; */
}
/* =========================================================
THREE CARDS IN ONE ROW
========================================================= */
.sponsor-gain-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px 24px;
}
/* =========================================================
SPONSOR CARD
========================================================= */
.sponsor-gain-card {
overflow: hidden;
background: #ffffff;
border: 1px solid #dfe3e8;
border-radius: 4px;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.sponsor-gain-card:hover {
transform: translateY(-4px);
border-color: #cfd5dc;
box-shadow: 0 12px 30px rgba(14, 42, 87, 0.1);
}
/* =========================================================
CARD IMAGE
========================================================= */
.sponsor-gain-image {
width: 100%;
height: 230px;
overflow: hidden;
background: #eef1f4;
}
.sponsor-gain-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s ease;
}
.sponsor-gain-card:hover .sponsor-gain-image img {
transform: scale(1.035);
}
/* =========================================================
CARD CONTENT
========================================================= */
.sponsor-gain-content {
position: relative;
padding: 23px 23px 27px;
}
/* Number */
.sponsor-card-number {
display: block;
margin-bottom: 8px;
color: #87909c;
font-size: 11px;
line-height: 1;
font-weight: 700;
letter-spacing: 1.2px;
}
/* Title */
.sponsor-gain-content h3 {
margin: 0 0 11px;
color: #0e2a57;
font-size: 18px;
line-height: 1.4;
font-weight: 700;
}
/* Description */
.sponsor-gain-content p {
margin: 0;
color: #505862;
font-size: 14.5px;
line-height: 1.65;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
.why-sponsor-layout {
grid-template-columns: minmax(0, 1fr) minmax(350px, 0.85fr);
gap: 45px;
}
.why-sponsor-image-wrap {
height: 420px;
}
.why-sponsor-side-card {
left: -20px;
}
.sponsor-gain-grid {
gap: 22px;
}
.sponsor-gain-image {
height: 210px;
}
}
/* =========================================================
TABLET / SMALL LAPTOP
========================================================= */
@media (max-width: 900px) {
.why-sponsor-section {
padding: 65px 0 75px;
}
.why-sponsor-layout {
grid-template-columns: 1fr;
gap: 45px;
}
.why-sponsor-content {
max-width: 100%;
}
.why-sponsor-visual {
max-width: 650px;
width: 100%;
margin: 0 auto;
}
.why-sponsor-image-wrap {
height: 400px;
}
.why-sponsor-side-card {
left: 25px;
bottom: 25px;
}
.sponsor-gain-section {
padding: 70px 0 80px;
}
.sponsor-gain-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.sponsor-container {
padding-left: 16px;
padding-right: 16px;
}
/* Heading */
.sponsor-section-heading {
margin-bottom: 35px;
}
.sponsor-heading-label {
font-size: 10px;
letter-spacing: 1.4px;
}
.sponsor-section-heading h2 {
font-size: 27px;
}
/* Why Sponsor */
.why-sponsor-section {
padding: 55px 0 65px;
}
.why-sponsor-content > p {
font-size: 15px;
line-height: 1.65;
}
.why-sponsor-point {
grid-template-columns: 40px 1fr;
gap: 13px;
padding: 15px;
}
.why-point-number {
width: 38px;
height: 38px;
font-size: 12px;
}
.why-sponsor-point h3 {
font-size: 15px;
}
.why-sponsor-point p {
font-size: 13px;
}
/* Right Image */
.why-sponsor-image-wrap {
height: 330px;
}
.why-sponsor-side-card {
position: relative;
left: auto;
bottom: auto;
width: calc(100% - 30px);
margin: -35px auto 0;
padding: 20px;
}
.why-sponsor-side-card h3 {
font-size: 17px;
}
/* Gain Section */
.sponsor-gain-section {
padding: 60px 0 70px;
}
.sponsor-gain-grid {
grid-template-columns: 1fr;
gap: 22px;
}
.sponsor-gain-image {
height: 220px;
}
.sponsor-gain-content {
padding: 20px;
}
.sponsor-gain-content h3 {
font-size: 17px;
}
.sponsor-gain-content p {
font-size: 14px;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 380px) {
.sponsor-section-heading h2 {
font-size: 24px;
}
.why-sponsor-image-wrap {
height: 280px;
}
.sponsor-gain-image {
height: 200px;
}
}
/* =========================================================
TESTIMONIAL SECTION
========================================================= */
.testimonials-section {
background: #f7f9fc;
padding: 90px 0 100px;
position: relative;
}
/* HEADING */
.section-heading {
max-width: 760px;
margin: 0 auto 55px;
}
.section-kicker {
display: inline-block;
color: #0e3b78;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 10px;
}
.section-heading h2 {
margin: 0;
color: #0e2f63;
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
.heading-line {
width: 48px;
height: 3px;
background: #0e2f63;
margin: 17px auto 18px;
}
.section-heading p {
margin: 0;
color: #657184;
font-size: 16px;
line-height: 1.7;
}
/* CAROUSEL */
.testimonial-carousel {
max-width: 1000px;
margin: 0 auto;
padding: 0 55px 55px;
}
/* CARD */
.testimonial-card {
background: #ffffff;
border: 1px solid #e3e8ef;
border-radius: 12px;
padding: 55px 70px 50px;
min-height: 330px;
position: relative;
box-shadow: 0 12px 35px rgba(14, 47, 99, 0.07);
display: flex;
align-items: center;
}
/* QUOTE */
.testimonial-quote-icon {
position: absolute;
top: 30px;
left: 45px;
width: 48px;
height: 48px;
border-radius: 50%;
background: #edf3fb;
color: #0e3b78;
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
}
.testimonial-content {
width: 100%;
text-align: center;
}
/* TESTIMONIAL TEXT */
.testimonial-text {
max-width: 800px;
margin: 0 auto 35px;
color: #26364d;
font-size: 20px;
line-height: 1.75;
font-weight: 400;
}
/* AUTHOR */
.testimonial-author {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.author-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
background: #0e2f63;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 700;
}
.testimonial-author h4 {
margin: 0 0 4px;
color: #0e2f63;
font-size: 17px;
font-weight: 700;
}
.testimonial-author span {
display: block;
color: #788496;
font-size: 14px;
}
/* CAROUSEL ARROWS */
.testimonial-control {
width: 45px;
height: 45px;
top: 50%;
transform: translateY(-50%);
opacity: 1;
}
.testimonial-control.carousel-control-prev {
left: 0;
}
.testimonial-control.carousel-control-next {
right: 0;
}
.testimonial-arrow {
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid #d9e1eb;
background: #ffffff;
color: #0e2f63;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: all 0.25s ease;
}
.testimonial-arrow:hover {
background: #0e2f63;
color: #ffffff;
border-color: #0e2f63;
}
/* INDICATORS */
.testimonial-indicators {
bottom: 0;
margin-bottom: 0;
gap: 7px;
}
.testimonial-indicators button {
width: 8px;
height: 8px;
border: 0;
border-radius: 50%;
background: #bdc8d7;
opacity: 1;
padding: 0;
margin: 0 2px;
}
.testimonial-indicators button.active {
width: 25px;
border-radius: 10px;
background: #0e2f63;
}
/* =========================================================
FOOTER
========================================================= */
.main-footer {
background: #0c1e38;
color: #ffffff;
padding: 70px 0 25px;
}
/* FOOTER MAIN */
.footer-main {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.8fr);
gap: 100px;
}
/* LOGO */
/* =========================
FOOTER LOGO
========================= */
.footer-logo {
display: flex;
align-items: center;
margin-bottom: 22px;
}
.footer-logo img {
display: block;
width: 390px;
max-width: 100%;
height: auto;
object-fit: contain;
}
/* Tablet */
@media (max-width: 991px) {
.footer-logo img {
width: 300px;
}
}
/* Mobile */
@media (max-width: 575px) {
.footer-logo {
justify-content: center;
}
.footer-logo img {
width: 300px;
}
}
/* FOOTER NAV */
.footer-nav-text {
color: #c7d0dc;
font-size: 15px;
display: flex;
gap: 12px;
align-items: center;
margin-bottom: 30px;
}
.footer-nav-text span {
color: #65748a;
}
/* FOOTER DESCRIPTION */
.footer-about p {
max-width: 700px;
color: #d5dce5;
font-size: 15px;
line-height: 1.75;
margin: 0;
}
.footer-about p strong {
color: #ffffff;
}
/* SOCIAL */
.footer-social {
display: flex;
gap: 10px;
margin-top: 38px;
}
.footer-social a {
width: 40px;
height: 40px;
border: 1px solid #3a4b63;
border-radius: 50%;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.25s ease;
}
.footer-social a:hover {
background: #ffffff;
color: #0c1e38;
border-color: #ffffff;
}
/* CONTACT */
.footer-contact {
padding-top: 3px;
}
.footer-contact h3 {
color: #ffffff;
font-size: 21px;
line-height: 1.55;
font-weight: 400;
margin: 0 0 30px;
}
.contact-person {
display: flex;
flex-direction: column;
margin-bottom: 27px;
}
.contact-person strong {
color: #ffffff;
font-size: 16px;
font-weight: 700;
margin-bottom: 3px;
}
.contact-person span {
color: #d2d9e2;
font-size: 15px;
line-height: 1.6;
}
.contact-person b {
color: #ffffff;
}
/* FOOTER BOTTOM */
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.12);
margin-top: 55px;
padding-top: 22px;
text-align: center;
}
.footer-bottom p {
color: #bfc8d4;
font-size: 14px;
margin: 0;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 991px) {
.testimonials-section {
padding: 70px 0 85px;
}
.testimonial-carousel {
padding-left: 45px;
padding-right: 45px;
}
.testimonial-card {
padding: 50px 45px;
}
.testimonial-text {
font-size: 18px;
}
.footer-main {
grid-template-columns: 1fr;
gap: 50px;
}
.footer-contact {
padding-top: 0;
}
}
@media (max-width: 767px) {
.section-heading {
margin-bottom: 40px;
}
.section-heading h2 {
font-size: 32px;
}
.section-heading p {
font-size: 15px;
}
.testimonial-carousel {
padding: 0 0 50px;
}
.testimonial-card {
min-height: 390px;
padding: 65px 25px 40px;
}
.testimonial-quote-icon {
left: 50%;
transform: translateX(-50%);
top: 22px;
}
.testimonial-text {
font-size: 17px;
line-height: 1.65;
}
.testimonial-control {
display: none;
}
.footer-logo {
font-size: 38px;
}
.footer-nav-text {
flex-wrap: wrap;
gap: 8px;
}
.main-footer {
padding: 55px 0 22px;
}
}
@media (max-width: 480px) {
.testimonial-card {
min-height: 420px;
padding-left: 20px;
padding-right: 20px;
}
.testimonial-text {
font-size: 16px;
}
.testimonial-author h4 {
font-size: 15px;
}
.testimonial-author span {
font-size: 13px;
}
.footer-contact h3 {
font-size: 19px;
}
}
/* =========================================================
FINAL UNIFIED SECTION TITLE STYLE
========================================================= */
.site-section-heading {
width: 100%;
max-width: 100%;
margin: 0 auto 48px;
padding: 0;
text-align: center;
}
.site-section-heading h2 {
margin: 0;
color: #0e2f63;
font-size: 40px;
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.4px;
}
.site-section-heading > div[class*="line"] {
width: 48px;
height: 3px;
margin: 18px auto 0;
background: #0e2f63;
}
.site-section-heading .section-kicker,
.site-section-heading .sponsor-heading-label,
.site-section-heading .who-attend-eyebrow,
.site-section-heading > p {
display: none !important;
}
/* Keep Key Themes centered and visually consistent with all other sections. */
.key-themes-header {
display: block;
text-align: center;
margin-bottom: 48px;
}
.key-themes-title-wrap.site-section-heading {
max-width: 100%;
}
.who-attend-heading h2 span {
color: inherit;
}
.awards-header.site-section-heading h2 {
font-size: 40px;
}
/* =========================================================
WHY TO SPONSOR — SIMPLE TEXT-ONLY LAYOUT
========================================================= */
.why-sponsor-section {
background: #f7f9fc;
}
.why-sponsor-section .sponsor-container {
max-width: 1180px;
margin: 0 auto;
}
.why-sponsor-single {
display: block !important;
max-width: 980px;
margin: 0 auto;
}
.why-sponsor-single .why-sponsor-content {
width: 100%;
max-width: 980px;
margin: 0 auto;
}
.why-sponsor-single .why-sponsor-content p {
margin: 0 0 20px;
color: #26364d;
font-size: 17px;
line-height: 1.8;
}
.why-sponsor-single .why-sponsor-content p:last-child {
margin-bottom: 0;
}
/* =========================================================
WHAT YOU GAIN — 3 CARDS PER ROW, IMAGE ABOVE TEXT
========================================================= */
.sponsor-gain-grid.three-column-gain {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
}
.sponsor-gain-card {
height: 100%;
background: #fff;
border: 1px solid #e1e6ed;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(14, 47, 99, 0.06);
}
.sponsor-gain-image {
width: 100%;
height: 230px;
overflow: hidden;
background: #eef2f7;
}
.sponsor-gain-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.sponsor-gain-content {
padding: 24px 24px 26px;
}
.sponsor-gain-content .sponsor-card-number {
display: none;
}
.sponsor-gain-content h3 {
margin: 0 0 10px;
color: #0e2f63;
font-size: 19px;
line-height: 1.4;
font-weight: 700;
}
.sponsor-gain-content p {
margin: 0;
color: #59677a;
font-size: 15px;
line-height: 1.7;
}
/* Testimonials keeps the Bootstrap carousel but follows the same heading system. */
.testimonials-section .section-heading.site-section-heading {
margin-bottom: 48px;
}
@media (max-width: 991.98px) {
.site-section-heading h2,
.awards-header.site-section-heading h2 {
font-size: 34px;
}
.sponsor-gain-grid.three-column-gain {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.why-sponsor-single {
max-width: 100%;
}
}
@media (max-width: 767.98px) {
.site-section-heading {
margin-bottom: 36px;
}
.site-section-heading h2,
.awards-header.site-section-heading h2 {
font-size: 30px;
}
.sponsor-gain-grid.three-column-gain {
grid-template-columns: 1fr;
gap: 22px;
}
.sponsor-gain-image {
height: 220px;
}
.why-sponsor-single .why-sponsor-content p {
font-size: 15px;
line-height: 1.75;
}
}
/* =========================================================
TESTIMONIALS SECTION
========================================================= */
.testimonials-section {
position: relative;
padding: 75px 20px 85px;
background: #f7f9fc;
overflow: hidden;
}
/* =========================================================
SECTION HEADING
========================================================= */
.testimonials-section .section-heading {
max-width: 760px;
margin: 0 auto 40px;
}
.testimonials-section .section-heading h2 {
margin: 0;
color: #002b72;
font-size: 34px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.3px;
}
.testimonials-section .heading-line {
width: 55px;
height: 2px;
margin: 13px auto 0;
background: #002b72;
border-radius: 10px;
}
/* =========================================================
CAROUSEL WRAPPER
========================================================= */
.testimonial-carousel {
position: relative;
width: 100%;
max-width: 1080px;
margin: 0 auto;
padding: 0 65px 50px;
overflow: hidden;
}
/*
IMPORTANT:
Keeps the carousel viewport from showing
two testimonial cards during movement.
*/
.testimonial-carousel .carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
border-radius: 16px;
}
/* =========================================================
CAROUSEL ITEM
========================================================= */
.testimonial-carousel .carousel-item {
width: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
perspective: 1000px;
}
/* =========================================================
TESTIMONIAL CARD
========================================================= */
.testimonial-card {
position: relative;
width: 100%;
height: 340px;
padding: 58px 75px 45px;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border: 1px solid #e1e7ef;
border-radius: 16px;
box-shadow:
0 10px 30px rgba(0, 34, 68, 0.07);
overflow: hidden;
}
/* =========================================================
QUOTE ICON
========================================================= */
.testimonial-quote-icon {
position: absolute;
top: 25px;
left: 30px;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #edf3fb;
color: #0e3b78;
font-size: 22px;
}
/* =========================================================
CONTENT
========================================================= */
.testimonial-content {
width: 100%;
max-width: 850px;
text-align: center;
}
/* =========================================================
TESTIMONIAL TEXT
========================================================= */
.testimonial-text {
margin: 0 auto 25px;
color: #344054;
font-size: 16px;
line-height: 1.65;
font-weight: 400;
max-width: 820px;
}
/* =========================================================
AUTHOR
========================================================= */
.testimonial-author {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.testimonial-author h4 {
margin: 0 0 4px;
color: #002b72;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
}
.testimonial-author span {
display: block;
color: #697386;
font-size: 12px;
line-height: 1.4;
}
/* =========================================================
CAROUSEL CONTROLS
========================================================= */
.testimonial-control {
position: absolute;
top: 50%;
width: 44px;
height: 44px;
transform: translateY(-50%);
opacity: 1;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
.testimonial-control.carousel-control-prev {
left: 5px;
}
.testimonial-control.carousel-control-next {
right: 5px;
}
/* =========================================================
ARROW
========================================================= */
.testimonial-arrow {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid #d8e0ea;
background: #ffffff;
color: #002b72;
font-size: 15px;
box-shadow:
0 5px 15px rgba(0, 34, 68, 0.08);
transition:
background 0.25s ease,
color 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease;
}
.testimonial-arrow:hover {
background: #002b72;
color: #ffffff;
border-color: #002b72;
transform: scale(1.05);
}
/* =========================================================
INDICATORS
========================================================= */
.testimonial-indicators {
position: absolute;
bottom: 5px;
left: 0;
right: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
z-index: 5;
}
.testimonial-indicators button {
width: 7px;
height: 7px;
margin: 0 !important;
padding: 0;
border: 0;
border-radius: 50%;
background: #b8c4d3;
opacity: 1;
transition:
width 0.25s ease,
background 0.25s ease;
}
.testimonial-indicators button.active {
width: 22px;
border-radius: 10px;
background: #002b72;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1400px) {
.testimonials-section {
padding-top: 85px;
padding-bottom: 95px;
}
.testimonial-carousel {
max-width: 1120px;
}
.testimonial-card {
height: 350px;
}
.testimonial-text {
font-size: 17px;
line-height: 1.65;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991.98px) {
.testimonials-section {
padding: 60px 20px 70px;
}
.testimonials-section .section-heading {
margin-bottom: 32px;
}
.testimonials-section .section-heading h2 {
font-size: 30px;
}
.testimonial-carousel {
padding-left: 55px;
padding-right: 55px;
}
.testimonial-card {
height: 350px;
padding:
55px
50px
40px;
}
.testimonial-text {
font-size: 15px;
line-height: 1.6;
}
.testimonial-quote-icon {
left: 25px;
top: 23px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 575.98px) {
.testimonials-section {
padding: 50px 15px 60px;
}
.testimonials-section .section-heading {
margin-bottom: 28px;
}
.testimonials-section .section-heading h2 {
font-size: 25px;
}
.testimonials-section .heading-line {
width: 48px;
margin-top: 11px;
}
.testimonial-carousel {
padding:
0
42px
42px;
}
.testimonial-card {
height: 390px;
padding:
55px
25px
35px;
}
.testimonial-quote-icon {
width: 38px;
height: 38px;
top: 18px;
left: 18px;
font-size: 20px;
}
.testimonial-text {
font-size: 13px;
line-height: 1.6;
margin-bottom: 22px;
}
.testimonial-author h4 {
font-size: 14px;
}
.testimonial-author span {
font-size: 11px;
}
.testimonial-control {
width: 36px;
height: 36px;
}
.testimonial-control.carousel-control-prev {
left: 0;
}
.testimonial-control.carousel-control-next {
right: 0;
}
.testimonial-arrow {
width: 36px;
height: 36px;
font-size: 13px;
}
.testimonial-indicators {
bottom: 0;
}
}
p.text-center.wsa-text {
font-weight: 500;
}
/* =====================================================
HOW THE SPONSORSHIP WORKS
====================================================== */
.sponsorship-works-section {
background: #ffffff;
padding: 90px 0 100px;
}
/* USE YOUR EXISTING WEBSITE HEADING
.section-heading
.site-section-heading
.heading-line
*/
.sponsorship-works-section .section-heading {
margin-bottom: 55px;
}
/* =====================================================
SPONSORSHIP GRID
====================================================== */
.sponsorship-works-grid {
max-width: 1150px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid #e3e8ef;
border-left: 1px solid #e3e8ef;
}
/* =====================================================
INDIVIDUAL ITEM
====================================================== */
.sponsorship-work {
position: relative;
padding: 35px 30px 38px;
background: #ffffff;
border-right: 1px solid #e3e8ef;
border-bottom: 1px solid #e3e8ef;
min-height: 220px;
transition:
background 0.25s ease,
box-shadow 0.25s ease;
}
/* HOVER */
.sponsorship-work:hover {
background: #f7f9fc;
}
/* =====================================================
ICON
====================================================== */
.sponsorship-work-icon {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: #edf3fb;
color: #0e2f63;
font-size: 20px;
margin-bottom: 25px;
transition: all 0.25s ease;
}
.sponsorship-work:hover .sponsorship-work-icon {
background: #0e2f63;
color: #ffffff;
}
/* =====================================================
NUMBER
====================================================== */
.sponsorship-work-number {
position: absolute;
top: 35px;
right: 28px;
color: #c4ccd7;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
}
/* =====================================================
CONTENT
====================================================== */
.sponsorship-work-content h3 {
margin: 0 0 10px;
color: #0e2f63;
font-size: 17px;
line-height: 1.35;
font-weight: 700;
}
.sponsorship-work-content p {
margin: 0;
color: #687587;
font-size: 14px;
line-height: 1.7;
}
/* =====================================================
LAST ITEM
====================================================== */
.sponsorship-work-last {
grid-column: 1 / -1;
min-height: auto;
display: flex;
align-items: flex-start;
gap: 25px;
}
.sponsorship-work-last .sponsorship-work-icon {
flex: 0 0 50px;
margin-bottom: 0;
}
.sponsorship-work-last .sponsorship-work-content {
padding-top: 2px;
}
.sponsorship-work-last .sponsorship-work-number {
top: 35px;
right: 28px;
}
/* =====================================================
TABLET
====================================================== */
@media (max-width: 991px) {
.sponsorship-works-section {
padding: 70px 0 80px;
}
.sponsorship-works-grid {
grid-template-columns: repeat(2, 1fr);
}
.sponsorship-work-last {
grid-column: 1 / -1;
}
}
/* =====================================================
MOBILE
====================================================== */
@media (max-width: 575px) {
.sponsorship-works-section {
padding: 60px 0 70px;
}
.sponsorship-works-section .section-heading {
margin-bottom: 40px;
}
.sponsorship-works-grid {
grid-template-columns: 1fr;
}
.sponsorship-work,
.sponsorship-work-last {
grid-column: auto;
min-height: auto;
display: block;
padding: 28px 22px 30px;
}
.sponsorship-work-icon,
.sponsorship-work-last .sponsorship-work-icon {
margin-bottom: 20px;
}
.sponsorship-work-number,
.sponsorship-work-last .sponsorship-work-number {
top: 30px;
right: 22px;
}
.sponsorship-work-content h3 {
font-size: 16px;
}
.sponsorship-work-content p {
font-size: 13px;
}
}
/* GOLD PARTNER TITLE */
.partner-category-title {
text-align: center;
margin: 35px 0 25px;
}
.partner-category-title h3 {
margin: 0;
color: #0e2f63;
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
/* =========================================================
PARTNER DETAIL SECTION
========================================================= */
.partner-detail-section {
background: #ffffff;
padding: 100px 0 100px;
font-family: "Poppins", sans-serif;
color: #111827;
}
/* =========================================================
SECTION HEADING
========================================================= */
.partner-detail-heading {
text-align: center;
padding-top: 20px;
}
.partner-detail-heading h2 {
margin: 0;
color: #12358f;
font-size: 32px;
line-height: 1.2;
font-weight: 600;
letter-spacing: -0.5px;
}
.partner-detail-heading span {
display: block;
width: 48px;
height: 3px;
background: #0b2545;
margin: 16px auto 0;
}
/* =========================================================
DIVIDER
========================================================= */
.partner-detail-divider {
width: 100%;
height: 1px;
background: #d5d5d5;
/* margin: 42px 0 0; */
}
/* =========================================================
PARTNER TYPE
========================================================= */
.partner-detail-type {
padding: 22px 0 5px;
}
.partner-detail-type h3 {
margin: 0;
color: #111827;
font-size: 25px;
line-height: 1.3;
font-weight: 600;
}
/* =========================================================
MAIN CONTENT
========================================================= */
.partner-detail-content {
display: grid;
grid-template-columns: 38% 62%;
align-items: center;
gap: 20px;
}
/* =========================================================
LOGO AREA
========================================================= */
.partner-detail-logo {
display: flex;
align-items: center;
justify-content: center;
min-height: 500px;
padding: 30px 50px;
}
.partner-logo-box {
width: 100%;
max-width: 390px;
min-height: 220px;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
}
.partner-logo-box img {
display: block;
width: auto;
max-width: 300px;
max-height: 150px;
height: auto;
object-fit: contain;
}
/* =========================================================
DESCRIPTION
========================================================= */
.partner-detail-description {
padding: 0 0 10px;
}
.partner-detail-description p {
margin: 0 0 20px;
color: #172033;
font-size: 15.5px;
line-height: 1.65;
font-weight: 400;
}
.partner-detail-description p strong {
color: #101828;
font-weight: 700;
}
/* =========================================================
WEBSITE
========================================================= */
.partner-website {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
padding-top: 4px;
}
.partner-website span {
color: #172033;
font-size: 15.5px;
line-height: 1.6;
}
.partner-website a {
display: inline-flex;
align-items: center;
gap: 6px;
color: #12358f;
font-size: 15.5px;
font-weight: 600;
text-decoration: none;
transition: all 0.25s ease;
}
.partner-website a i {
font-size: 14px;
transition: transform 0.25s ease;
}
.partner-website a:hover {
color: #0b2545;
}
.partner-website a:hover i {
transform: translate(2px, -2px);
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1400px) {
.partner-detail-section .container {
max-width: 1230px;
}
.partner-detail-content {
grid-template-columns: 36% 64%;
gap: 25px;
}
.partner-detail-description p {
font-size: 15.5px;
line-height: 1.62;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.partner-detail-section {
padding-bottom: 70px;
}
.partner-detail-heading h2 {
font-size: 29px;
}
.partner-detail-divider {
margin-top: 35px;
}
.partner-detail-content {
grid-template-columns: 1fr;
gap: 10px;
}
.partner-detail-logo {
min-height: 250px;
padding: 30px 20px 15px;
}
.partner-logo-box {
min-height: 180px;
}
.partner-detail-description {
padding: 15px 0 0;
}
.partner-detail-type {
padding-bottom: 10px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.partner-detail-section {
padding: 0 0 55px;
}
.partner-detail-heading {
padding-top: 10px;
}
.partner-detail-heading h2 {
font-size: 26px;
}
.partner-detail-heading span {
width: 42px;
height: 3px;
margin-top: 13px;
}
.partner-detail-divider {
margin-top: 30px;
}
.partner-detail-type {
padding: 14px 0 8px;
}
.partner-detail-type h3 {
font-size: 21px;
}
.partner-detail-logo {
min-height: 190px;
padding: 20px 10px;
}
.partner-logo-box {
min-height: 150px;
}
.partner-logo-box img {
max-width: 230px;
max-height: 110px;
}
.partner-detail-description {
padding-top: 5px;
}
.partner-detail-description p {
font-size: 14px;
line-height: 1.7;
margin-bottom: 17px;
}
.partner-website {
display: block;
margin-top: 10px;
}
.partner-website span,
.partner-website a {
font-size: 14px;
}
.partner-website a {
margin-top: 4px;
}
}
/* =========================================================
EDITION DROPDOWN
========================================================= */
.edition-dropdown {
position: relative;
}
/* Desktop dropdown */
.edition-dropdown .edition-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 235px;
max-height: 450px;
margin: 0;
padding: 8px 0;
overflow-y: auto;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 8px;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
list-style: none;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition:
opacity 0.25s ease,
visibility 0.25s ease,
transform 0.25s ease;
z-index: 9999;
}
/* =========================================================
DESKTOP HOVER
========================================================= */
@media (min-width: 992px) {
.edition-dropdown:hover .edition-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.edition-dropdown:hover .dropdown-indicator {
transform: rotate(180deg);
}
}
/* Dropdown items */
.edition-dropdown .edition-menu li {
margin: 0;
padding: 0;
}
/* Dropdown links */
.edition-dropdown .edition-menu li a {
display: block;
padding: 10px 18px;
color: #172033;
background: #ffffff;
font-family: "Poppins", sans-serif;
font-size: 13.5px;
font-weight: 500;
line-height: 1.4;
text-decoration: none;
transition:
background 0.2s ease,
color 0.2s ease,
padding-left 0.2s ease;
}
/* Hover */
.edition-dropdown .edition-menu li a:hover {
color: #12358f;
background: #f3f6fb;
padding-left: 23px;
}
/* Arrow */
.edition-dropdown .dropdown-indicator {
margin-left: 5px;
font-size: 10px;
transition: transform 0.25s ease;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 991px) {
.edition-dropdown {
width: 100%;
}
.edition-dropdown .edition-menu {
position: static;
width: 100%;
min-width: 0;
max-height: 300px;
margin: 5px 0 10px;
padding: 5px 0;
overflow-y: auto;
border: 0;
border-radius: 5px;
box-shadow: none;
background: rgba(0, 0, 0, 0.03);
opacity: 0;
visibility: hidden;
transform: none;
display: none;
}
/* Opened by JavaScript */
.edition-dropdown.mobile-open .edition-menu {
display: block;
opacity: 1;
visibility: visible;
}
.edition-dropdown .edition-menu li a {
padding: 11px 20px;
font-size: 14px;
}
.edition-dropdown .edition-menu li a:hover {
padding-left: 25px;
}
/* Rotate arrow */
.edition-dropdown.mobile-open
.dropdown-indicator {
transform: rotate(180deg);
}
}
/* =========================================================
VENUE PAGE
========================================================= */
.venue-page-section {
padding: 75px 0 100px;
background: #ffffff;
font-family: "Poppins", sans-serif;
}
/* =========================================================
HEADING
========================================================= */
.venue-heading {
text-align: center;
margin-bottom: 48px;
}
.venue-heading h1 {
margin: 0;
color: #12358f;
font-size: 36px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.5px;
}
.venue-heading span {
display: block;
width: 48px;
height: 3px;
margin: 16px auto 18px;
background: #0b2545;
}
.venue-heading p {
max-width: 680px;
margin: 0 auto;
color: #5c6678;
font-size: 15px;
font-weight: 400;
line-height: 1.7;
}
/* =========================================================
VENUE GRID
========================================================= */
.venue-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
align-items: stretch;
}
/* =========================================================
IMAGE
========================================================= */
.venue-image-wrap {
position: relative;
min-height: 460px;
overflow: hidden;
border-radius: 12px;
background: #eef1f5;
}
.venue-image {
width: 100%;
height: 100%;
min-height: 460px;
display: block;
object-fit: cover;
transition: transform 0.6s ease;
}
.venue-image-wrap:hover .venue-image {
transform: scale(1.03);
}
/* Image caption */
.venue-image-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 70px 30px 28px;
color: #ffffff;
background: linear-gradient(
to top,
rgba(5, 15, 35, 0.88),
rgba(5, 15, 35, 0)
);
}
.venue-caption-label {
display: block;
margin-bottom: 5px;
color: rgba(255, 255, 255, 0.8);
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.venue-image-caption h2 {
margin: 0;
color: #ffffff;
font-size: 27px;
font-weight: 600;
}
/* =========================================================
MAP
========================================================= */
.venue-map-wrap {
min-height: 460px;
overflow: hidden;
border-radius: 12px;
background: #f3f5f8;
box-shadow:
0 12px 35px rgba(0, 0, 0, 0.08);
}
.venue-map {
width: 100%;
height: 100%;
min-height: 460px;
display: block;
border: 0;
}
/* =========================================================
ADDRESS
========================================================= */
.venue-address {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin: 35px auto 0;
padding: 28px 35px;
max-width: 600px;
text-align: left;
background: #f7f9fc;
border: 1px solid #e5e9f0;
border-radius: 12px;
}
/* Address icon */
.venue-address-icon {
flex: 0 0 52px;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #12358f;
color: #ffffff;
font-size: 21px;
}
/* Address content */
.venue-address-content span {
display: block;
margin-bottom: 3px;
color: #667085;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
}
.venue-address-content h3 {
margin: 0;
color: #172033;
font-size: 20px;
font-weight: 600;
}
.venue-address-content p {
margin: 2px 0 0;
color: #667085;
font-size: 14px;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1200px) {
.venue-page-section .container {
max-width: 1180px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.venue-page-section {
padding: 60px 0 75px;
}
.venue-heading {
margin-bottom: 35px;
}
.venue-heading h1 {
font-size: 32px;
}
.venue-grid {
grid-template-columns: 1fr;
gap: 22px;
}
.venue-image-wrap,
.venue-map-wrap {
min-height: 400px;
}
.venue-image,
.venue-map {
min-height: 400px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.venue-page-section {
padding: 45px 0 60px;
}
.venue-heading {
margin-bottom: 28px;
}
.venue-heading h1 {
font-size: 28px;
}
.venue-heading p {
padding: 0 10px;
font-size: 14px;
line-height: 1.65;
}
.venue-grid {
gap: 18px;
}
.venue-image-wrap,
.venue-map-wrap {
min-height: 300px;
border-radius: 9px;
}
.venue-image,
.venue-map {
min-height: 300px;
}
.venue-image-caption {
padding: 55px 20px 20px;
}
.venue-image-caption h2 {
font-size: 22px;
}
.venue-address {
justify-content: flex-start;
margin-top: 25px;
padding: 20px;
gap: 13px;
}
.venue-address-icon {
flex: 0 0 44px;
width: 44px;
height: 44px;
font-size: 18px;
}
.venue-address-content h3 {
font-size: 18px;
}
.venue-address-content p {
font-size: 13px;
}
}
/* =========================================================
CONTACT PAGE
========================================================= */
.contact-page-section {
background: #ffffff;
padding: 42px 0 90px;
font-family: "Poppins", sans-serif;
color: #111827;
}
/* =========================================================
CONTACT HEADING
========================================================= */
.contact-heading {
text-align: center;
margin-bottom: 30px;
}
.contact-heading h1 {
margin: 0;
color: #12358f;
font-size: 36px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.5px;
margin-top: 30px;
}
.contact-heading h1 span {
color: #12358f;
}
.contact-heading-line {
width: 48px;
height: 3px;
margin: 18px auto 0;
background: #0b2545;
}
/* =========================================================
CONTACT CONTENT
========================================================= */
.contact-content {
display: grid;
grid-template-columns: 56% 44%;
align-items: center;
max-width: 1280px;
margin: 0 auto;
}
/* =========================================================
MAP
========================================================= */
.contact-map-wrap {
width: 100%;
height: 450px;
overflow: hidden;
background: #f3f5f8;
}
.contact-map {
display: block;
width: 100%;
height: 450px;
border: 0;
}
/* =========================================================
CONTACT DETAILS
========================================================= */
.contact-details {
padding: 20px 40px 20px 55px;
}
/* =========================================================
COMPANY TITLE
========================================================= */
.contact-company-title {
margin-bottom: 34px;
}
.contact-company-title h2 {
display: inline-block;
margin: 0;
color: #12358f;
font-size: 30px;
font-weight: 700;
line-height: 1.2;
}
.contact-company-title span {
display: block;
width: 65px;
height: 5px;
margin-top: 7px;
background: #12358f;
}
/* =========================================================
DETAIL ITEM
========================================================= */
.contact-detail-item {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 17px;
}
/* =========================================================
ICON
========================================================= */
.contact-detail-icon {
flex: 0 0 16px;
width: 16px;
padding-top: 4px;
color: #07527a;
font-size: 14px;
text-align: center;
}
/* =========================================================
TEXT
========================================================= */
.contact-detail-text {
color: #111827;
font-size: 15.5px;
line-height: 1.45;
font-weight: 500;
}
.contact-detail-text strong {
font-weight: 600;
}
.contact-detail-text a {
color: #111827;
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
}
.contact-detail-text a:hover {
color: #12358f;
}
/* =========================================================
ADDRESS
========================================================= */
.contact-address-item {
margin-top: 3px;
}
.contact-address-item .contact-detail-text {
max-width: 430px;
}
.contact-address-item p {
margin: 3px 0 0;
color: #111827;
font-size: 15.5px;
line-height: 1.4;
font-weight: 600;
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width: 1400px) {
.contact-page-section .container {
max-width: 1400px;
}
.contact-content {
max-width: 1300px;
}
.contact-map-wrap,
.contact-map {
height: 450px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.contact-page-section {
padding: 50px 0 70px;
}
.contact-heading {
margin-bottom: 35px;
}
.contact-heading h1 {
font-size: 30px;
}
.contact-content {
grid-template-columns: 1fr;
max-width: 750px;
}
.contact-map-wrap,
.contact-map {
height: 400px;
}
.contact-details {
padding: 40px 30px 10px;
}
.contact-company-title {
margin-bottom: 28px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.contact-page-section {
padding: 40px 0 55px;
}
.contact-heading {
margin-bottom: 28px;
}
.contact-heading h1 {
font-size: 27px;
}
.contact-heading-line {
width: 42px;
margin-top: 14px;
}
.contact-content {
display: flex;
flex-direction: column;
width: 100%;
}
.contact-map-wrap,
.contact-map {
width: 100%;
height: 320px;
}
.contact-details {
width: 100%;
padding: 35px 20px 10px;
}
.contact-company-title {
margin-bottom: 25px;
}
.contact-company-title h2 {
font-size: 26px;
}
.contact-company-title span {
width: 55px;
height: 4px;
}
.contact-detail-item {
gap: 10px;
margin-bottom: 16px;
}
.contact-detail-icon {
flex: 0 0 15px;
width: 15px;
font-size: 13px;
}
.contact-detail-text {
font-size: 14px;
}
.contact-address-item p {
font-size: 14px;
line-height: 1.5;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.contact-map-wrap,
.contact-map {
height: 290px;
}
.contact-details {
padding-left: 15px;
padding-right: 15px;
}
}
/* =========================================================
EVENT PRICING
========================================================= */
.event-pricing-section {
position: relative;
padding: 100px 0 110px;
background: #f7f9fc;
overflow: hidden;
}
/* Subtle background decoration */
.event-pricing-section::before {
content: "";
position: absolute;
width: 420px;
height: 420px;
top: -220px;
right: -150px;
border-radius: 50%;
background: rgba(28, 57, 142, 0.05);
pointer-events: none;
}
.event-pricing-section::after {
content: "";
position: absolute;
width: 300px;
height: 300px;
bottom: -180px;
left: -120px;
border-radius: 50%;
background: rgba(28, 57, 142, 0.04);
pointer-events: none;
}
.event-pricing-section .container {
position: relative;
z-index: 2;
}
/* =========================================================
HEADING
========================================================= */
.pricing-heading-wrap {
margin-bottom: 48px;
}
.pricing-eyebrow {
display: inline-block;
margin-bottom: 9px;
color: #1c398e;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.pricing-title {
margin: 0;
color: #002b72;
font-size: 38px;
font-weight: 700;
line-height: 1.25;
}
.pricing-line {
width: 55px;
height: 4px;
margin-top: 15px;
border-radius: 10px;
background: #c99a2e;
}
.pricing-subtitle {
max-width: 650px;
margin: 17px 0 0;
color: #687386;
font-size: 15px;
line-height: 1.8;
}
/* =========================================================
PRICING ROW
========================================================= */
.pricing-row {
align-items: stretch;
}
/* =========================================================
PRICING CARD
========================================================= */
.pricing-card {
position: relative;
height: 100%;
/* padding: 38px 30px 30px; */
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid #e4e8f0;
border-radius: 22px;
box-shadow: 0 15px 45px rgba(17, 39, 86, 0.08);
transition:
transform 0.35s ease,
box-shadow 0.35s ease,
border-color 0.35s ease;
}
.pricing-card:hover {
transform: translateY(-8px);
border-color: rgba(28, 57, 142, 0.25);
box-shadow: 0 25px 55px rgba(17, 39, 86, 0.14);
}
/* =========================================================
FEATURED CARD
========================================================= */
.featured-card {
border: 1.5px solid rgba(28, 57, 142, 0.35);
box-shadow: 0 20px 55px rgba(28, 57, 142, 0.14);
}
/* .featured-card::before {
content: "POPULAR";
position: absolute;
top: -13px;
right: 25px;
padding: 6px 13px;
color: #ffffff;
background: #1c398e;
border-radius: 30px;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
} */
/* =========================================================
CARD CONTENT
========================================================= */
.pricing-card-top {
flex: 1;
}
.pricing-label {
display: block;
margin-bottom: 13px;
color: #1c398e;
font-size: 14px;
font-weight: 700;
}
.pricing-date {
margin: 0 0 27px;
color: #657084;
font-size: 14px;
line-height: 1.6;
}
/* =========================================================
PRICE
========================================================= */
.pricing-main {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 27px;
}
.pricing-amount {
color: #1c398e;
font-size: clamp(32px, 3vw, 39px);
line-height: 1;
font-weight: 800;
letter-spacing: -1px;
}
.pricing-tax {
color: #1c398e;
font-size: 13px;
font-weight: 500;
}
/* =========================================================
DETAIL ROWS
========================================================= */
.pricing-details {
border-top: 1px solid #e2e6ed;
}
.pricing-detail-row {
min-height: 53px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border-bottom: 1px solid #e2e6ed;
color: #17213a;
font-size: 14px;
}
.pricing-detail-row span {
font-weight: 500;
}
.pricing-detail-row strong {
color: #1c398e;
font-weight: 700;
white-space: nowrap;
}
/* =========================================================
BUTTON
========================================================= */
.pricing-btn {
width: 100%;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 22px;
border-radius: 50px;
color: #ffffff;
background: #1c398e;
text-decoration: none;
font-size: 14px;
font-weight: 700;
box-shadow: 0 10px 25px rgba(28, 57, 142, 0.18);
transition:
background 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
}
.pricing-btn:hover {
color: #ffffff;
background: #142b70;
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(28, 57, 142, 0.25);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.event-pricing-section {
padding: 80px 0 90px;
}
.pricing-heading-wrap {
margin-bottom: 40px;
}
.pricing-card {
padding: 32px 26px 27px;
}
.pricing-amount {
font-size: 34px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.event-pricing-section {
padding: 65px 0 70px;
}
.pricing-heading-wrap {
margin-bottom: 35px;
}
.pricing-title {
font-size: 31px;
}
.pricing-subtitle {
font-size: 14px;
line-height: 1.7;
}
.pricing-card {
border-radius: 18px;
padding: 30px 23px 25px;
}
.pricing-card:hover {
transform: none;
}
.pricing-amount {
font-size: 33px;
}
.pricing-detail-row {
min-height: 50px;
font-size: 13px;
}
.pricing-btn {
min-height: 47px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.event-pricing-section {
padding: 55px 0 60px;
}
.pricing-title {
font-size: 28px;
}
.pricing-card {
padding: 27px 20px 23px;
}
.pricing-amount {
font-size: 30px;
}
.pricing-tax {
font-size: 12px;
}
.pricing-date {
font-size: 13px;
}
.pricing-detail-row {
font-size: 12.5px;
}
}
/* =========================================================
REGISTRATION PAGE
========================================================= */
.registration-page {
position: relative;
min-height: 100vh;
padding: 100px 20px 100px;
background:
radial-gradient(
circle at 8% 8%,
rgba(28, 57, 142, 0.055),
transparent 30%
),
radial-gradient(
circle at 92% 90%,
rgba(201, 154, 46, 0.055),
transparent 30%
),
#f6f8fc;
font-family: "Poppins", sans-serif;
}
/* =========================================================
FORM SHELL
========================================================= */
.registration-form-shell {
width: 100%;
max-width: 630px;
margin: 0 auto;
position: relative;
}
/* =========================================================
TOP DECORATIVE LINE
========================================================= */
.registration-form-shell::before {
content: "";
position: absolute;
top: -2px;
left: 50%;
width: 70px;
height: 4px;
transform: translateX(-50%);
background: #c99a2e;
border-radius: 20px;
z-index: 5;
}
/* =========================================================
REGISTRATION FORM CARD
========================================================= */
.registration-form {
position: relative;
width: 100%;
padding: 55px 60px 60px;
background: #ffffff;
border: 1px solid #e5e9f1;
border-radius: 24px;
box-shadow:
0 20px 60px rgba(20, 43, 112, 0.08);
}
/* =========================================================
FORM HEADING
========================================================= */
.registration-form-heading {
text-align: center;
margin: 0 0 42px;
}
.registration-form-heading h1 {
margin: 0;
color: #1c398e;
font-family: "Poppins", sans-serif;
font-size: clamp(28px, 4vw, 40px);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.5px;
}
/* Gold underline */
.registration-form-heading h1::after {
content: "";
display: block;
width: 48px;
height: 3px;
margin: 14px auto 0;
background: #c99a2e;
border-radius: 10px;
}
/* =========================================================
FORM FIELDS
ONE FIELD PER LINE
========================================================= */
.registration-fields {
width: 100%;
display: flex;
flex-direction: column;
gap: 17px;
}
/* =========================================================
ALL INPUTS
========================================================= */
.registration-fields > input,
.registration-fields > select {
width: 100%;
height: 54px;
padding: 0 17px;
margin: 0;
background: #ffffff;
border: 1px solid #dce2eb;
border-radius: 10px;
color: #17213a;
font-family: "Poppins", sans-serif;
font-size: 13.5px;
font-weight: 400;
outline: none;
transition:
border-color 0.25s ease,
box-shadow 0.25s ease,
background 0.25s ease;
}
/* =========================================================
PLACEHOLDER
========================================================= */
.registration-fields input::placeholder {
color: #8993a5;
opacity: 1;
}
/* =========================================================
SELECT
========================================================= */
.registration-fields select {
color: #687386;
cursor: pointer;
appearance: auto;
}
/* =========================================================
INPUT FOCUS
========================================================= */
.registration-fields > input:focus,
.registration-fields > select:focus,
.city-country-row input:focus {
background: #ffffff;
border-color: #1c398e;
box-shadow:
0 0 0 3px rgba(28, 57, 142, 0.08);
}
/* =========================================================
CITY + COUNTRY
ONLY THESE TWO ARE SIDE-BY-SIDE
========================================================= */
.city-country-row {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 17px;
margin: 0;
}
/* City and Country inputs */
.city-country-row input {
width: 100%;
height: 54px;
padding: 0 17px;
margin: 0;
background: #ffffff;
border: 1px solid #dce2eb;
border-radius: 10px;
color: #17213a;
font-family: "Poppins", sans-serif;
font-size: 13.5px;
font-weight: 400;
outline: none;
transition:
border-color 0.25s ease,
box-shadow 0.25s ease;
}
/* =========================================================
PACKAGE / CATEGORY
========================================================= */
#pricing1,
#registrationPackage {
width: 100%;
}
/* Disabled package */
#registrationPackage:disabled {
background: #f7f8fa;
color: #9aa3b2;
cursor: not-allowed;
border-color: #e1e5eb;
}
/* =========================================================
OTHER SPECIFY
========================================================= */
.other-specify-input {
display: none;
}
/* =========================================================
SOURCE SECTION
========================================================= */
.registration-source-section {
margin-top: 34px;
padding: 24px 25px;
background: #f8f9fc;
border: 1px solid #e7ebf2;
border-radius: 14px;
}
/* Source heading */
.registration-source-title {
margin: 0 0 18px;
color: #1c398e;
font-size: 14px;
font-weight: 700;
line-height: 1.5;
}
/* Source options */
.registration-source-options {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px 30px;
}
/* Individual option */
.registration-source-option {
position: relative;
display: inline-flex;
align-items: center;
gap: 9px;
margin: 0;
color: #4d596d;
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
/* =========================================================
HIDE NATIVE RADIO
========================================================= */
.registration-source-option input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
/* =========================================================
CUSTOM RADIO
========================================================= */
.registration-radio {
position: relative;
display: inline-block;
width: 18px;
height: 18px;
flex: 0 0 18px;
background: #ffffff;
border: 1.5px solid #b9c2d1;
border-radius: 50%;
transition:
border-color 0.2s ease,
background 0.2s ease;
}
/* Checked radio */
.registration-source-option input:checked + .registration-radio {
background: #1c398e;
border-color: #1c398e;
}
/* Inner dot */
.registration-source-option input:checked + .registration-radio::after {
content: "";
position: absolute;
width: 6px;
height: 6px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #ffffff;
border-radius: 50%;
}
/* =========================================================
RECAPTCHA
========================================================= */
.registration-captcha {
width: 100%;
min-height: 78px;
margin-top: 28px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
/* =========================================================
CONSENT
========================================================= */
.registration-consent {
margin-top: 24px;
padding: 17px 19px;
background: #f8f9fc;
border-left: 3px solid #c99a2e;
border-radius: 6px;
}
.registration-consent label {
display: block;
margin: 0;
}
.registration-consent span {
display: block;
margin: 0;
color: #697487;
font-size: 11.5px;
font-weight: 400;
line-height: 1.75;
}
/* =========================================================
SUBMIT BUTTON
========================================================= */
.registration-submit {
width: 100%;
min-height: 56px;
margin-top: 28px;
padding: 0 25px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
border: 0;
border-radius: 10px;
background: #1c398e;
color: #ffffff;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1;
cursor: pointer;
box-shadow:
0 12px 28px rgba(28, 57, 142, 0.20);
transition:
background 0.25s ease,
transform 0.25s ease,
box-shadow 0.25s ease;
}
/* Arrow */
.registration-submit i {
font-size: 17px;
transition:
transform 0.25s ease;
}
/* Hover */
.registration-submit:hover {
background: #142b70;
color: #ffffff;
transform: translateY(-2px);
box-shadow:
0 16px 32px rgba(28, 57, 142, 0.25);
}
.registration-submit:hover i {
transform: translateX(5px);
}
/* Active */
.registration-submit:active {
transform: translateY(0);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.registration-page {
padding: 65px 20px 80px;
}
.registration-form {
padding: 48px 40px 50px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.registration-page {
padding: 45px 15px 60px;
}
.registration-form {
padding: 40px 22px 35px;
border-radius: 18px;
}
.registration-form-heading {
margin-bottom: 30px;
}
.registration-form-heading h1 {
font-size: 28px;
}
/* ---------------------------------------------
CITY + COUNTRY
STACK ON MOBILE
--------------------------------------------- */
.city-country-row {
grid-template-columns: 1fr;
gap: 15px;
}
/* ---------------------------------------------
INPUT HEIGHT
--------------------------------------------- */
.registration-fields > input,
.registration-fields > select,
.city-country-row input {
height: 52px;
}
/* ---------------------------------------------
SOURCE
--------------------------------------------- */
.registration-source-section {
margin-top: 27px;
padding: 20px;
}
.registration-source-options {
flex-direction: column;
align-items: flex-start;
gap: 13px;
}
/* ---------------------------------------------
CAPTCHA
--------------------------------------------- */
.registration-captcha {
max-width: 100%;
overflow-x: auto;
padding-bottom: 3px;
}
/* ---------------------------------------------
BUTTON
--------------------------------------------- */
.registration-submit {
min-height: 54px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.registration-page {
padding: 35px 10px 50px;
}
.registration-form {
padding: 35px 17px 30px;
border-radius: 16px;
}
.registration-form-heading h1 {
font-size: 25px;
}
.registration-fields {
gap: 14px;
}
.registration-fields > input,
.registration-fields > select,
.city-country-row input {
height: 51px;
padding-left: 15px;
padding-right: 15px;
font-size: 13px;
}
.registration-source-section {
padding: 18px;
}
.registration-source-title {
font-size: 13px;
}
.registration-consent {
padding: 14px 15px;
}
.registration-consent span {
font-size: 10.5px;
line-height: 1.7;
}
.registration-submit {
min-height: 52px;
font-size: 13px;
}
}
.nomination-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: fit-content;
min-width: 190px;
min-height: 52px;
margin: 30px auto 0;
padding: 0 25px;
background: #ffffff;
color: #1c398e;
border: 1px solid #ffffff;
border-radius: 50px;
text-decoration: none;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-weight: 700;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
transition: all 0.3s ease;
}
.nomination-btn:hover {
background: #c99a2e;
color: #ffffff;
border-color: #c99a2e;
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}
.nomination-btn i {
transition: transform 0.3s ease;
}
.nomination-btn:hover i {
transform: translateX(5px);
}
.city-country-row {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.city-country-row input {
width: 100%;
}
/* =========================================================
NOMINATION PAGE
UBS FORUMS
========================================================= */
:root {
--ubs-blue: #1c398e;
--ubs-blue-dark: #142b70;
--ubs-gold: #c99a2e;
--ubs-gold-light: #e5c56b;
--nomination-bg: #f6f8fc;
--nomination-border: #e2e7f0;
--nomination-text: #17213a;
--nomination-muted: #6f7890;
--white: #ffffff;
}
/* =========================================================
PAGE
========================================================= */
body {
font-family: "Poppins", sans-serif;
background: var(--nomination-bg);
color: var(--nomination-text);
}
/* =========================================================
HERO
========================================================= */
.nomination-hero {
position: relative;
overflow: hidden;
padding: 110px 0 95px;
background:
radial-gradient(
circle at 85% 20%,
rgba(201, 154, 46, 0.18),
transparent 32%
),
radial-gradient(
circle at 10% 90%,
rgba(255, 255, 255, 0.08),
transparent 30%
),
linear-gradient(
135deg,
#142b70 0%,
#1c398e 55%,
#10265f 100%
);
color: #fff;
}
.nomination-hero::before {
content: "";
position: absolute;
width: 420px;
height: 420px;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 50%;
right: -150px;
top: -180px;
}
.nomination-hero::after {
content: "";
position: absolute;
width: 250px;
height: 250px;
border: 1px solid rgba(201,154,46,0.22);
border-radius: 50%;
left: -120px;
bottom: -130px;
}
.nomination-hero-content {
position: relative;
z-index: 2;
max-width: 820px;
}
.nomination-eyebrow {
display: inline-flex;
align-items: center;
padding: 8px 16px;
margin-bottom: 20px;
border: 1px solid rgba(255,255,255,0.25);
border-radius: 50px;
color: #f4d47e;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
}
.nomination-hero h1 {
margin: 0 0 18px;
font-size: clamp(38px, 5vw, 68px);
line-height: 1.08;
font-weight: 800;
letter-spacing: -1.5px;
}
.nomination-hero p {
max-width: 720px;
margin: 0;
color: rgba(255,255,255,0.78);
font-size: 17px;
line-height: 1.8;
}
/* =========================================================
FORM SECTION
========================================================= */
.nomination-section {
padding: 80px 0 100px;
background:
radial-gradient(
circle at 0% 0%,
rgba(28,57,142,0.05),
transparent 28%
),
var(--nomination-bg);
}
.nomination-wrapper {
max-width: 1080px;
margin: 0 auto;
background: #fff;
border: 1px solid var(--nomination-border);
border-radius: 22px;
box-shadow:
0 20px 60px rgba(20,43,112,0.08);
overflow: hidden;
}
/* =========================================================
FORM HEADER
========================================================= */
.nomination-header {
display: flex;
align-items: center;
gap: 20px;
padding: 38px 42px;
border-bottom: 1px solid var(--nomination-border);
background:
linear-gradient(
135deg,
#ffffff 0%,
#f8faff 100%
);
}
.nomination-header-icon {
flex: 0 0 62px;
width: 62px;
height: 62px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
background: linear-gradient(
135deg,
var(--ubs-blue),
var(--ubs-blue-dark)
);
color: #fff;
font-size: 28px;
box-shadow:
0 10px 25px rgba(28,57,142,0.18);
}
.section-kicker {
display: block;
margin-bottom: 3px;
color: var(--ubs-gold);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.nomination-header h2 {
margin: 0;
color: var(--nomination-text);
font-size: 27px;
font-weight: 700;
}
.nomination-header p {
margin: 5px 0 0;
color: var(--nomination-muted);
font-size: 14px;
}
/* =========================================================
CLOSED NOTICE
========================================================= */
.nomination-closed {
display: flex;
align-items: center;
gap: 16px;
margin: 30px 42px 0;
padding: 18px 20px;
background: #fff7f7;
border: 1px solid #f0caca;
border-left: 4px solid #d62828;
border-radius: 12px;
}
.nomination-closed-icon {
flex: 0 0 40px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #ffe1e1;
color: #d62828;
font-size: 18px;
}
.nomination-closed strong {
display: block;
margin-bottom: 3px;
color: #a51f1f;
font-size: 15px;
}
.nomination-closed p {
margin: 0;
color: #7e5353;
font-size: 13px;
}
/* =========================================================
FORM SECTIONS
========================================================= */
.form-section {
padding: 38px 42px;
border-bottom: 1px solid var(--nomination-border);
}
.form-section:last-of-type {
border-bottom: 0;
}
.form-section-heading {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 28px;
}
.form-heading-icon {
flex: 0 0 42px;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 11px;
background: rgba(28,57,142,0.08);
color: var(--ubs-blue);
font-size: 18px;
}
.form-section-heading h3 {
margin: 2px 0 3px;
color: var(--nomination-text);
font-size: 18px;
font-weight: 700;
}
.form-section-heading p {
margin: 0;
color: var(--nomination-muted);
font-size: 13px;
}
/* =========================================================
LABELS
========================================================= */
.nomination-label {
display: block;
margin-bottom: 9px;
color: #27314a;
font-size: 13px;
font-weight: 600;
}
.nomination-label span {
color: #d62828;
}
/* =========================================================
INPUTS
========================================================= */
.input-wrap,
.select-wrap {
position: relative;
}
.input-wrap > i,
.select-wrap > i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #8490a8;
font-size: 16px;
z-index: 2;
pointer-events: none;
}
.input-wrap input,
.select-wrap select,
#message {
width: 100%;
border: 1px solid #dce2ec;
background: #fff;
color: #17213a;
border-radius: 10px;
font-family: "Poppins", sans-serif;
font-size: 13px;
outline: none;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
background 0.2s ease;
}
.input-wrap input,
.select-wrap select {
height: 50px;
padding: 0 15px 0 44px;
}
.select-wrap select {
appearance: auto;
cursor: pointer;
}
#message {
display: block;
min-height: 125px;
padding: 14px 16px;
resize: vertical;
}
.input-wrap input::placeholder,
#message::placeholder {
color: #a3abbc;
}
.input-wrap input:focus,
.select-wrap select:focus,
#message:focus {
border-color: var(--ubs-blue);
background: #fff;
box-shadow:
0 0 0 4px rgba(28,57,142,0.08);
}
.input-wrap:focus-within > i,
.select-wrap:focus-within > i {
color: var(--ubs-blue);
}
/* =========================================================
SELECT
========================================================= */
.select-wrap select {
padding-left: 44px;
}
.select-wrap select option {
color: #17213a;
}
/* =========================================================
UPLOAD
========================================================= */
.upload-box {
display: flex;
align-items: center;
gap: 20px;
padding: 25px;
border: 1px dashed #bfc9db;
border-radius: 14px;
background: #f9fbff;
transition:
border-color 0.2s ease,
background 0.2s ease;
}
.upload-box:hover {
border-color: var(--ubs-blue);
background: #f6f8ff;
}
.upload-icon {
flex: 0 0 56px;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: rgba(28,57,142,0.09);
color: var(--ubs-blue);
font-size: 25px;
}
.upload-title {
display: block;
margin-bottom: 3px;
color: var(--nomination-text);
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
.upload-content p {
margin: 0 0 10px;
color: var(--nomination-muted);
font-size: 12px;
}
.upload-content input[type="file"] {
width: 100%;
max-width: 430px;
padding: 7px;
border: 1px solid #dce2ec;
border-radius: 7px;
background: #fff;
color: #566078;
font-size: 12px;
}
.upload-content small {
display: block;
margin-top: 8px;
color: #8993a7;
font-size: 11px;
}
.upload-note {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 15px;
padding: 12px 14px;
border-radius: 8px;
background: #f8f9fc;
color: #6e778c;
font-size: 11px;
line-height: 1.6;
}
.upload-note i {
margin-top: 2px;
color: var(--ubs-gold);
}
.upload-note a {
color: var(--ubs-blue);
font-weight: 600;
text-decoration: none;
}
.upload-note a:hover {
text-decoration: underline;
}
/* =========================================================
SUBMIT
========================================================= */
.nomination-submit {
padding: 34px 42px 42px;
text-align: center;
background:
linear-gradient(
180deg,
#ffffff 0%,
#f8faff 100%
);
}
.nomination-submit-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-width: 245px;
padding: 14px 24px;
border: 0;
border-radius: 50px;
background: linear-gradient(
135deg,
var(--ubs-blue),
var(--ubs-blue-dark)
);
color: #fff;
font-family: "Poppins", sans-serif;
font-size: 13px;
font-weight: 600;
cursor: not-allowed;
opacity: 0.55;
box-shadow:
0 10px 25px rgba(28,57,142,0.15);
}
.nomination-submit-btn i {
font-size: 17px;
}
.submit-note {
margin: 12px 0 0;
color: #a0a8b8;
font-size: 11px;
}
#contact_results {
margin-top: 15px;
}
/* =========================================================
INVALID INPUT
========================================================= */
.nomination-error {
border-color: #d62828 !important;
box-shadow:
0 0 0 3px rgba(214,40,40,0.08) !important;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 991px) {
.nomination-hero {
padding: 90px 0 75px;
}
.nomination-section {
padding: 55px 0 70px;
}
.nomination-wrapper {
border-radius: 16px;
}
.nomination-header {
padding: 30px;
}
.nomination-closed {
margin-left: 30px;
margin-right: 30px;
}
.form-section {
padding: 32px 30px;
}
.nomination-submit {
padding-left: 30px;
padding-right: 30px;
}
}
@media (max-width: 767px) {
.nomination-hero {
padding: 75px 0 65px;
}
.nomination-hero h1 {
font-size: 38px;
letter-spacing: -0.7px;
}
.nomination-hero p {
font-size: 14px;
line-height: 1.7;
}
.nomination-header {
align-items: flex-start;
gap: 15px;
padding: 25px 20px;
}
.nomination-header-icon {
flex-basis: 52px;
width: 52px;
height: 52px;
font-size: 22px;
}
.nomination-header h2 {
font-size: 21px;
}
.nomination-closed {
margin: 22px 20px 0;
padding: 15px;
}
.form-section {
padding: 28px 20px;
}
.form-section-heading {
margin-bottom: 22px;
}
.form-heading-icon {
flex-basis: 38px;
width: 38px;
height: 38px;
font-size: 16px;
}
.form-section-heading h3 {
font-size: 16px;
}
.form-section-heading p {
font-size: 12px;
}
.upload-box {
align-items: flex-start;
flex-direction: column;
padding: 20px;
}
.upload-content {
width: 100%;
}
.upload-content input[type="file"] {
max-width: 100%;
}
.nomination-submit {
padding: 28px 20px 32px;
}
.nomination-submit-btn {
width: 100%;
min-width: 0;
}
}
@media (max-width: 480px) {
.nomination-hero h1 {
font-size: 32px;
}
.nomination-eyebrow {
font-size: 10px;
letter-spacing: 1.2px;
}
.nomination-closed {
align-items: flex-start;
}
.nomination-closed-icon {
flex-basis: 34px;
width: 34px;
height: 34px;
font-size: 15px;
}
.input-wrap input,
.select-wrap select {
height: 48px;
}
}
/* =========================================================
AWARDS NOMINATION PAGE
SAME UI STYLE AS REGISTRATION FORM
========================================================= */
#main {
font-family: "Poppins", sans-serif;
}
/* =========================================================
MAIN NOMINATION SECTION
========================================================= */
#main > section {
position: relative;
min-height: 100vh;
padding: 80px 20px 100px !important;
background:
radial-gradient(
circle at 8% 8%,
rgba(28, 57, 142, 0.055),
transparent 30%
),
radial-gradient(
circle at 92% 90%,
rgba(201, 154, 46, 0.055),
transparent 30%
),
#f6f8fc !important;
}
/* =========================================================
STEPS TO NOMINATE
========================================================= */
#main .form-style:first-child {
width: 100%;
max-width: 630px;
margin: 0 auto 28px;
position: relative;
}
/* Steps card */
#main .form-style:first-child .alert {
position: relative;
width: 100%;
margin: 0;
padding: 28px 30px !important;
background: #ffffff !important;
border: 1px solid #e5e9f1 !important;
border-radius: 18px;
box-shadow:
0 12px 35px rgba(20, 43, 112, 0.06) !important;
}
/* Gold decorative line */
/* Steps heading */
#main .form-style:first-child .alert-heading {
margin: 0 0 15px;
color: #1c398e;
font-family: "Poppins", sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1.3;
}
/* Steps content */
#main .form-style:first-child .alert p {
margin: 0;
color: #697487;
font-family: "Poppins", sans-serif;
font-size: 12.5px;
font-weight: 400;
line-height: 1.8;
}
/* Hide old HR */
#main .form-style:first-child .alert hr {
display: none;
}
/* =========================================================
MAIN FORM SHELL
========================================================= */
#main .form-style:last-of-type {
width: 100%;
max-width: 630px;
margin: 0 auto;
position: relative;
}
/* =========================================================
FORM CARD
========================================================= */
#main .form-style:last-of-type > .col-md-8 {
position: relative;
width: 100%;
max-width: 630px;
margin: 0 auto !important;
padding: 55px 60px 60px !important;
background: #ffffff !important;
border: 1px solid #e5e9f1;
border-radius: 24px;
box-shadow:
0 20px 60px rgba(20, 43, 112, 0.08) !important;
}
/* =========================================================
FORM HEADING
========================================================= */
#main .form-style:last-of-type h2 {
position: relative;
margin: 0 0 42px !important;
padding: 0 0 17px;
text-align: center;
color: #1c398e !important;
font-family: "Poppins", sans-serif;
font-size: clamp(28px, 4vw, 40px);
font-weight: 800 !important;
line-height: 1.2;
letter-spacing: -0.5px;
}
/* Gold underline */
#main .form-style:last-of-type h2::after {
content: "";
display: block;
width: 48px;
height: 3px;
margin: 14px auto 0;
background: #c99a2e;
border-radius: 10px;
}
/* =========================================================
CLOSED STATUS
========================================================= */
#main .form-style:last-of-type h2 {
color: #1c398e !important;
}
/* =========================================================
FORM ROWS
========================================================= */
#contact_body {
width: 100%;
}
/* Bootstrap row spacing */
#contact_body .row {
margin-left: 0;
margin-right: 0;
}
/* =========================================================
INPUT / SELECT / TEXTAREA
========================================================= */
#contact_body input[type="text"],
#contact_body input[type="email"],
#contact_body input[type="tel"],
#contact_body select,
#contact_body textarea {
width: 100% !important;
margin: 0;
background: #ffffff;
border: 1px solid #dce2eb !important;
border-radius: 10px;
color: #17213a !important;
font-family: "Poppins", sans-serif;
font-size: 13.5px;
font-weight: 400;
outline: none;
transition:
border-color 0.25s ease,
box-shadow 0.25s ease,
background 0.25s ease;
}
/* =========================================================
TEXT / EMAIL / PHONE INPUTS
========================================================= */
#contact_body input[type="text"],
#contact_body input[type="email"],
#contact_body input[type="tel"] {
height: 54px;
padding: 0 17px !important;
}
/* =========================================================
PLACEHOLDERS
========================================================= */
#contact_body input::placeholder,
#contact_body textarea::placeholder {
color: #8993a5;
opacity: 1;
}
/* =========================================================
SELECT
========================================================= */
#contact_body select {
height: 54px;
padding: 0 17px !important;
color: #687386 !important;
cursor: pointer;
appearance: auto;
}
/* Category option colors */
#contact_body select option {
color: #17213a;
}
#contact_body select optgroup {
color: #1c398e;
font-weight: 700;
}
/* =========================================================
TEXTAREA
========================================================= */
#contact_body textarea {
min-height: 110px;
padding: 15px 17px !important;
resize: vertical;
line-height: 1.6;
}
/* =========================================================
FOCUS
========================================================= */
#contact_body input[type="text"]:focus,
#contact_body input[type="email"]:focus,
#contact_body input[type="tel"]:focus,
#contact_body select:focus,
#contact_body textarea:focus {
background: #ffffff;
border-color: #1c398e !important;
box-shadow:
0 0 0 3px rgba(28, 57, 142, 0.08);
}
/* =========================================================
FORM FIELD SPACING
========================================================= */
/* Your HTML contains
, remove them visually */
#contact_body br {
display: none;
}
/* Each Bootstrap column */
#contact_body .row > [class*="col-"] {
margin-bottom: 17px;
padding-left: 0;
padding-right: 0;
}
/* Two-column rows */
#contact_body .row > .col-lg-6:first-child {
padding-right: 8.5px;
}
#contact_body .row > .col-lg-6:last-child {
padding-left: 8.5px;
}
/* =========================================================
ATTACHMENT
========================================================= */
#contact_body input[type="file"] {
width: 100%;
height: 54px;
padding: 8px 12px;
background: #ffffff;
border: 1px solid #dce2eb;
border-radius: 10px;
color: #697487;
font-family: "Poppins", sans-serif;
font-size: 12px;
cursor: pointer;
transition:
border-color 0.25s ease,
box-shadow 0.25s ease;
}
#contact_body input[type="file"]:focus {
border-color: #1c398e;
box-shadow:
0 0 0 3px rgba(28, 57, 142, 0.08);
outline: none;
}
/* File selector button */
#contact_body input[type="file"]::file-selector-button {
height: 36px;
margin-right: 10px;
padding: 0 14px;
border: none;
border-radius: 7px;
background: #1c398e;
color: #ffffff;
font-family: "Poppins", sans-serif;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: background 0.25s ease;
}
#contact_body input[type="file"]::file-selector-button:hover {
background: #142b70;
}
/* =========================================================
ATTACHMENT LABEL
========================================================= */
#contact_body label {
display: block;
width: 100%;
margin: 0;
color: #17213a !important;
font-family: "Poppins", sans-serif;
font-size: 13px;
font-weight: 500;
}
/* Attachment text */
#contact_body label > span {
display: block;
margin-bottom: 9px;
color: #1c398e;
font-size: 13px;
font-weight: 600;
}
/* Attachment note */
#contact_body label p {
margin: 10px 0 0;
color: #8993a5;
font-family: "Poppins", sans-serif;
font-size: 10.5px;
font-weight: 400;
line-height: 1.7;
}
/* =========================================================
SUBMIT BUTTON
========================================================= */
#contact_body .btn-get-started {
width: 380px;
max-width: 100%;
min-height: 56px;
margin: 5px auto 0 !important;
padding: 0 35px !important;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
border: 0 !important;
border-radius: 10px;
background: #1c398e !important;
color: #ffffff !important;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
text-align: center;
cursor: pointer;
box-shadow: 0 12px 28px rgba(28, 57, 142, 0.20);
transition:
background 0.25s ease,
transform 0.25s ease,
box-shadow 0.25s ease;
}
#contact_body .btn-get-started:hover {
background: #142b70 !important;
transform: translateY(-2px);
box-shadow: 0 15px 32px rgba(28, 57, 142, 0.25);
}
/* =========================================================
DISABLED / CLOSED BUTTON
========================================================= */
#contact_body .btn-get-started {
background: #aeb5c4 !important;
color: #ffffff !important;
opacity: 0.85;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
/* =========================================================
DISABLED FORM FIELDS
========================================================= */
#contact_body input:disabled,
#contact_body select:disabled,
#contact_body textarea:disabled {
background: #f7f8fa !important;
color: #9aa3b2 !important;
border-color: #e1e5eb !important;
cursor: not-allowed;
box-shadow: none !important;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
#main > section {
padding: 65px 20px 80px !important;
}
#main .form-style:last-of-type > .col-md-8 {
padding: 48px 40px 50px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
#main > section {
padding: 45px 15px 60px !important;
}
/* Steps */
#main .form-style:first-child .alert {
padding: 25px 22px !important;
border-radius: 16px;
}
#main .form-style:first-child .alert-heading {
font-size: 19px;
}
#main .form-style:first-child .alert p {
font-size: 11.5px;
line-height: 1.75;
}
/* Main form */
#main .form-style:last-of-type > .col-md-8 {
padding: 40px 22px 35px !important;
border-radius: 18px;
}
/* Heading */
#main .form-style:last-of-type h2 {
margin-bottom: 30px !important;
font-size: 28px;
}
/* Stack columns */
#contact_body .row > .col-lg-6:first-child,
#contact_body .row > .col-lg-6:last-child {
padding-left: 0;
padding-right: 0;
}
/* Inputs */
#contact_body input[type="text"],
#contact_body input[type="email"],
#contact_body input[type="tel"],
#contact_body select {
height: 52px;
}
#contact_body textarea {
min-height: 105px;
}
/* Button */
#contact_body .btn-get-started {
min-height: 54px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
#main > section {
padding: 35px 10px 50px !important;
}
#main .form-style:first-child .alert {
padding: 22px 18px !important;
border-radius: 15px;
}
#main .form-style:last-of-type > .col-md-8 {
padding: 35px 17px 30px !important;
border-radius: 16px;
}
#main .form-style:last-of-type h2 {
font-size: 25px;
margin-bottom: 28px !important;
}
#main .form-style:last-of-type h2::before {
font-size: 8px;
padding: 4px 10px;
}
#contact_body input[type="text"],
#contact_body input[type="email"],
#contact_body input[type="tel"],
#contact_body select {
height: 51px;
padding-left: 15px !important;
padding-right: 15px !important;
font-size: 13px;
}
#contact_body textarea {
padding: 13px 15px !important;
font-size: 13px;
}
#contact_body input[type="file"] {
font-size: 11px;
}
#contact_body label p {
font-size: 10px;
}
#contact_body .btn-get-started {
min-height: 52px;
font-size: 13px;
}
}
/* =========================================================
EVENT PRICING SECTION
========================================================= */
.event-pricing-section {
position: relative;
padding: 6px 0 105px;
background:
radial-gradient(
circle at 8% 15%,
rgba(28, 57, 142, 0.045),
transparent 30%
),
radial-gradient(
circle at 92% 85%,
rgba(201, 154, 46, 0.045),
transparent 30%
),
#f7f9fc;
font-family: "Poppins", sans-serif;
overflow: hidden;
}
/* =========================================================
HEADER
========================================================= */
.pricing-section-header {
text-align: center;
margin-bottom: 48px;
}
.pricing-section-header h2{
margin: 0;
color: #0e2a57;
font-size: 40px;
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.4px;
}
.pricing-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
color: #c99a2e;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.pricing-eyebrow::before,
.pricing-eyebrow::after {
content: "";
width: 28px;
height: 1px;
background: #c99a2e;
}
.pricing-section-header p {
max-width: 620px;
margin: 16px auto 0;
color: #6d778b;
font-size: 13px;
font-weight: 400;
line-height: 1.8;
}
/* =========================================================
PRICING LIST
========================================================= */
.pricing-list {
display: flex;
flex-direction: column;
gap: 22px;
}
/* =========================================================
PRICING CARD
========================================================= */
.pricing-card {
position: relative;
width: 100%;
background: #ffffff;
border: 1px solid #e4e8f0;
border-radius: 18px;
box-shadow:
0 12px 35px rgba(20, 43, 112, 0.055);
overflow: hidden;
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
}
.pricing-card:hover {
transform: translateY(-4px);
border-color: rgba(28, 57, 142, 0.18);
box-shadow:
0 20px 45px rgba(20, 43, 112, 0.10);
}
/* GOLD TOP LINE */
/* .pricing-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: #c99a2e;
} */
/* =========================================================
INNER
========================================================= */
.pricing-card-inner {
display: grid;
grid-template-columns:
1.05fr
1fr
1fr;
min-height: 205px;
}
/* =========================================================
PLAN
========================================================= */
.pricing-plan {
position: relative;
padding: 38px 38px 34px;
display: flex;
flex-direction: column;
justify-content: center;
border-right: 1px solid #e8ebf1;
background:
linear-gradient(
135deg,
rgba(28, 57, 142, 0.035),
rgba(255, 255, 255, 0)
);
}
.pricing-number {
position: absolute;
top: 23px;
right: 30px;
color: #d9dee8;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
}
.pricing-plan h3 {
margin: 0 0 7px;
color: #1c398e;
font-size: 22px;
font-weight: 700;
line-height: 1.3;
}
.pricing-plan h3 sup {
position: relative;
top: -0.35em;
font-size: 11px;
}
.pricing-validity {
color: #7d8798;
font-size: 11.5px;
font-weight: 500;
line-height: 1.6;
}
.pricing-price {
margin-top: 17px;
color: #17213a;
font-size: 32px;
font-weight: 800;
line-height: 1;
}
.pricing-price span {
margin-right: 3px;
color: #1c398e;
font-size: 21px;
font-weight: 700;
}
.pricing-label {
margin-top: 7px;
color: #9aa3b2;
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.5px;
text-transform: uppercase;
}
/* =========================================================
PRICING OPTION
========================================================= */
.pricing-option {
position: relative;
padding: 34px 32px;
display: flex;
flex-direction: column;
justify-content: center;
border-right: 1px solid #e8ebf1;
}
.pricing-option:last-child {
border-right: 0;
}
/* =========================================================
ICON
========================================================= */
.pricing-option-icon {
width: 38px;
height: 38px;
margin-bottom: 14px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(28, 57, 142, 0.07);
color: #1c398e;
font-size: 17px;
}
/* =========================================================
OPTION CONTENT
========================================================= */
.pricing-option-content {
display: flex;
flex-direction: column;
}
.pricing-option-label {
margin-bottom: 7px;
color: #667085;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.15px;
}
.pricing-option-content strong {
color: #17213a;
font-size: 19px;
font-weight: 700;
line-height: 1.35;
}
.pricing-option-content strong small {
color: #7d8798;
font-size: 10px;
font-weight: 500;
}
/* =========================================================
ACTION
========================================================= */
.pricing-action {
width: fit-content;
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
color: #1c398e;
font-size: 15px;
font-weight: 700;
text-decoration: none;
transition:
color 0.25s ease,
gap 0.25s ease;
}
.pricing-action i {
font-size: 14px;
transition: transform 0.25s ease;
}
.pricing-action:hover {
color: #c99a2e;
gap: 11px;
}
.pricing-action:hover i {
transform: translateX(2px);
}
/* =========================================================
STANDARD RATE
========================================================= */
.pricing-card-standard {
border-color: rgba(28, 57, 142, 0.18);
box-shadow:
0 15px 45px rgba(20, 43, 112, 0.075);
}
.pricing-card-standard::before {
background: #1c398e;
}
.pricing-card-standard .pricing-plan {
background:
linear-gradient(
135deg,
rgba(28, 57, 142, 0.055),
rgba(255, 255, 255, 0)
);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.event-pricing-section {
padding: 75px 0 85px;
}
.pricing-section-header {
margin-bottom: 40px;
}
.pricing-card-inner {
grid-template-columns: 1fr 1fr;
}
.pricing-plan {
grid-column: 1 / -1;
min-height: 170px;
border-right: 0;
border-bottom: 1px solid #e8ebf1;
}
.pricing-option {
min-height: 180px;
}
.pricing-option:last-child {
border-left: 1px solid #e8ebf1;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.event-pricing-section {
padding: 60px 15px 70px;
}
.pricing-section-header {
margin-bottom: 32px;
}
.pricing-section-header h2 {
font-size: 30px;
}
.pricing-section-header p {
font-size: 12px;
line-height: 1.7;
}
.pricing-list {
gap: 18px;
}
.pricing-card {
border-radius: 15px;
}
.pricing-card-inner {
display: block;
}
.pricing-plan {
min-height: auto;
padding: 32px 25px 28px;
border-bottom: 1px solid #e8ebf1;
}
.pricing-number {
top: 18px;
right: 22px;
}
.pricing-plan h3 {
font-size: 20px;
}
.pricing-price {
font-size: 29px;
margin-top: 15px;
}
.pricing-option {
min-height: auto;
padding: 27px 25px;
border-right: 0;
border-bottom: 1px solid #e8ebf1;
}
.pricing-option:last-child {
border-left: 0;
border-bottom: 0;
}
.pricing-option-icon {
width: 35px;
height: 35px;
margin-bottom: 11px;
font-size: 15px;
}
.pricing-option-content strong {
font-size: 18px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.event-pricing-section {
padding: 50px 12px 60px;
}
.pricing-section-header h2 {
font-size: 27px;
}
.pricing-plan {
padding: 29px 21px 25px;
}
.pricing-option {
padding: 24px 21px;
}
.pricing-option-content strong {
font-size: 17px;
}
}
/* =========================================================
EVENT GALLERY
========================================================= */
.event-gallery-section {
padding: 90px 0 100px;
background: #ffffff;
font-family: "Poppins", sans-serif;
}
/* =========================================================
SECTION HEADER
========================================================= */
.event-gallery-section .pricing-section-header {
text-align: center;
margin-bottom: 48px;
}
.event-gallery-section .pricing-section-header h2 {
margin: 0;
color: #0e2a57;
font-size: 40px;
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.4px;
}
.event-gallery-section .pricing-section-header h2 span {
color: #1c398e;
}
/* =========================================================
GALLERY ITEM
========================================================= */
.event-gallery-lightbox {
display: block;
width: 100%;
text-decoration: none;
outline: none;
}
/* =========================================================
IMAGE WRAPPER
========================================================= */
.event-gallery-image {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
border-radius: 12px;
background: #f2f4f8;
}
/* =========================================================
IMAGE
========================================================= */
.event-gallery-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition:
transform 0.4s ease;
}
/* =========================================================
HOVER
========================================================= */
.event-gallery-lightbox:hover .event-gallery-image img {
transform: scale(1.05);
}
/* =========================================================
FOCUS
========================================================= */
.event-gallery-lightbox:focus-visible {
outline: 2px solid #1c398e;
outline-offset: 4px;
border-radius: 12px;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.event-gallery-section {
padding: 75px 0 80px;
}
.event-gallery-section .pricing-section-header {
margin-bottom: 38px;
}
.event-gallery-section .pricing-section-header h2 {
font-size: 34px;
}
.event-gallery-image {
height: 230px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.event-gallery-section {
padding: 60px 12px 70px;
}
.event-gallery-section .pricing-section-header {
margin-bottom: 30px;
}
.event-gallery-section .pricing-section-header h2 {
font-size: 30px;
}
.event-gallery-image {
height: 180px;
border-radius: 9px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.event-gallery-section {
padding: 50px 10px 60px;
}
.event-gallery-section .pricing-section-header h2 {
font-size: 27px;
}
.event-gallery-image {
height: 145px;
border-radius: 8px;
}
}