body{
font-family:'Plus Jakarta Sans',sans-serif;
background:var(--bg);
color:var(--text);
overflow-x:hidden;
font-weight:700;
padding-top:150px;
}

/* NAVBAR */

.navbar{
background:#fff;
padding:5px 0;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
position:fixed;
top:40px;
left:0;
width:100%;
z-index:999;
}

@media(max-width:576px) {
    .navbar { top: 34px !important; }
}

.navbar-brand{
font-size:28px;
font-weight:700;
color:#091e42;
display:flex;
align-items:center;
gap:6px;
}

/* DESKTOP MENU */

.nav-menu{
display:flex;
align-items:center;
gap:28px;
}

.nav-menu a{
text-decoration:none;
color:#222;
font-weight:700;
font-size:18px;
transition:0.3s;
}

.nav-menu a:hover{
color:#00a2ff;
}

/* BOOK BUTTON */

.book-btn{
background:#00a2ff;
padding:12px 28px;
border-radius:50px;
font-weight:700;
color:#fff;
text-decoration:none;
display:flex;
align-items:center;
gap:8px;
transition:0.3s;
position:relative;
overflow:hidden;
animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0% { box-shadow: 0 0 5px rgba(0, 162, 255, 0.4); }
  50% { box-shadow: 0 0 15px rgba(0, 162, 255, 0.7); }
  100% { box-shadow: 0 0 5px rgba(0, 162, 255, 0.4); }
}

.book-btn::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -150%;
  width: 80px;
  height: 200%;
  background: rgba(255, 255, 255, 0.4);
  transform: rotate(30deg);
  transition: 0.8s;
}

.book-btn:hover::before {
  left: 150%;
}

.book-btn:hover{
background:#00a2ff;
color:#000;
box-shadow: 0 0 30px rgba(0, 162, 255, 0.8);
transform: translateY(-2px);
}

/* MOBILE TOGGLER */

.menu-btn{
background:#091e42;
color:white;
border:none;
width:45px;
height:45px;
border-radius:8px;
font-size:20px;
}

/* MOBILE SIDEBAR */

.mobile-sidebar{
position:fixed;
top:0;
left:-100%;
width:280px;
height:100%;
background:#fff;
padding:30px;
transition:0.4s;
z-index:9999;
}

.mobile-sidebar.active{
left:0;
}

/* CLOSE BUTTON */

.close-menu{
position:absolute;
top:20px;
right:20px;
background:#091e42;
color:#fff;
border:none;
width:40px;
height:40px;
border-radius:8px;
}

/* MOBILE LINKS */

.mobile-sidebar a{
display:block;
padding:14px 0;
text-decoration:none;
color:#222;
font-weight:700;
font-size:18px;
transition:0.3s;
}

.mobile-sidebar a:hover{
color:#00a2ff;
}

/* OVERLAY */

.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
opacity:0;
visibility:hidden;
transition:0.4s;
z-index:9998;
}

.overlay.active{
opacity:1;
visibility:visible;
}

/* RESPONSIVE */

@media (max-width:991px){

.nav-menu{
display:none;
}

.book-btn{
display:none;
}

}
:root{
--primary:#7c3aed;
--bg:#f9faff;
--text:#0f172a;
--muted:#64748b;
}



.hero-section{
padding:80px 0 60px;
}

.about-split-row {
  display: flex;
  align-items: stretch; /* Stretch to match height */
  gap: 50px;
  margin-top: 40px;
}

.about-split-img {
  width: 100%;
  height: 100%; /* Fill container height */
  object-fit: cover; /* Cover while maintaining aspect ratio */
  border-radius: 30px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  min-height: 400px; /* Fallback for small content */
}

.about-split-content {
  text-align: left;
}

.about-split-title {
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 25px;
  line-height: 1.2;
}

.about-split-text {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 30px;
}

@media (max-width: 991px) {
  .about-split-row {
    flex-direction: column;
    text-align: center;
  }
  .about-split-content {
    text-align: center;
  }
  .about-split-title {
    font-size: 32px;
  }
}

/* VIDEO */

.video-container-perspective{
perspective:1200px;
max-width:1100px;
margin:auto;
}

.video-card{
position:relative;
border-radius:40px;
overflow:hidden;

transform-style:preserve-3d;
transform:rotateX(25deg) scale(.95);
transform-origin:top center;
}

.video-card img{
width:100%;
display:block;
}

/* PLAY BUTTON */

.play-btn-overlay{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:100px;
height:100px;
background:var(--primary);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
box-shadow:0 15px 40px rgba(124,58,237,.4);
transition:.3s;
}

.play-btn-overlay:hover{
transform:translate(-50%,-50%) scale(1.1);
}

.play-icon{
width:0;
height:0;
border-top:15px solid transparent;
border-bottom:15px solid transparent;
border-left:25px solid white;
margin-left:6px;
}

/* ABOUT PAGE STATS */

.as-section{
background:#1c2954; /* Royal Navy Background */
padding:50px 0; /* Reduced to decrease height */
color:#fff;
}

.as-item{
text-align:center;
padding:20px;
}

.as-number{
font-size:54px;
font-weight:800;
color:#fff;
margin-bottom: 8px;
}

.as-text{
color:rgba(255,255,255,0.7);
font-weight:700;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
}

.as-divider{
border-right:1px solid rgba(255,255,255,0.15);
}

@media(max-width:768px){
.as-section{ padding:60px 0 20px; }
.as-number{ font-size:38px; margin-top:10px; }
.as-divider{ border-right:none; border-bottom:1px solid rgba(255,255,255,0.1); }
.as-item:last-child .as-divider{ border-bottom:none; }
}



/* About Section */

.values-section{
padding:60px 0 10px;

}

/* Title */

.section-title{
font-size:56px;
font-weight:800;
margin-bottom:100px;
}

/* Cards */

.value-card{
padding:55px 45px;
border-radius:30px;
height:100%;
transition:0.4s;
}

.value-card:hover{
transform:translateY(-10px);
box-shadow:0 30px 60px rgba(0,0,0,0.08);
}

/* Card colors */

.card-pink{
background:#e4b9d6;
}

.card-beige{
background:#e6d2c1;
}

.card-green{
background:#cde6bd;
}

/* Icon */

.icon-circle{
width:70px;
height:70px;
border-radius:50%;
border:2px dashed #333;
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
margin-bottom:25px;
}

/* Heading */

.value-title{
font-size:26px;
font-weight:700;
margin-bottom:15px;
}

/* Text */

.value-text{
font-size:17px;
line-height:1.8;
color:#333;
}

/* Mobile */

@media(max-width:991px){

.section-title{
font-size:32px;
text-align:center;
margin-bottom:40px;
}

.value-card{
padding:30px 20px;
text-align:center;
}

.icon-circle{
margin:0 auto 20px;
}

}
/**************/



/* Section */

.about-section{
padding:60px 0 10px;

}

/* Heading */

.section-title{
font-size:56px;
font-weight:800;
text-align:center;
max-width:900px;
margin:auto;
line-height:1.2;
margin-bottom:100px;
}

/* Image */

.about-img{
border-radius:28px;
width:100%;
}

/* Floating Card */

.analytics-card{

position:absolute;
bottom:20px;
left:20px;

background:#fff;
border-radius:14px;
padding:18px;

box-shadow:0 20px 40px rgba(0,0,0,0.12);

width:180px;

}

.analytics-card h6{
font-size:13px;
margin-bottom:4px;
color:#777;
}

.analytics-card strong{
font-size:18px;
}

.analytics-card img{
width:100%;
margin-top:10px;
}

/* Content */

.about-content{
padding-left:50px;
}

.about-block{
margin-bottom:50px;
padding-left:20px;
border-left:4px solid var(--primary);
}

.about-title{
font-size:30px;
font-weight:700;
margin-bottom:15px;
}

.about-text{
color:#555;
line-height:1.8;
font-size:16px;
text-align:justify;
}

/* Mobile */

@media(max-width:991px){

.about-section .section-title{
font-size:30px;
margin-bottom:30px;
}

.about-content{
padding-left:0;
margin-top:30px;
text-align:center;
}

.about-img{
margin-bottom:20px;
}

.analytics-card{
width:140px;
padding:12px;
left:10px;
bottom:10px;
}

.analytics-card strong{
font-size:14px;
}

}
/************/



/* SECTION */

.testimonial-section{
padding:60px 0 20px;
text-align:center;

}

/* TITLE */

.section-title{
font-size:52px;
font-weight:800;
max-width:900px;
margin:auto;
margin-bottom:40px;
}

.section-desc{
max-width:650px;
margin:10px auto 40px;
color:#666;
font-size:18px;
}

/* MARQUEE */

.marquee{
overflow:hidden;
width:100%;
}

.marquee-track{
display:flex;
gap:30px;
width:max-content;
animation:scroll 35s linear infinite;
}

.marquee:hover .marquee-track{
animation-play-state:paused;
}

@keyframes scroll{
0%{transform:translateX(0);}
100%{transform:translateX(-50%);}
}

/* CARD */

.testimonial-card{

width:380px;
padding:30px;

border-radius:22px;

display:flex;
flex-direction:column;
justify-content:space-between;

text-align:left;

font-size:16px;
line-height:1.6;

}

/* COLORS */

.c1{background:#cde9da;}
.c2{background:#ead1e7;}
.c3{background:#e9dfd5;}
.c4{background:#efe7c9;}
.c5{background:#dcd4ef;}

/* NAME TAG */

.name-tag{
display:flex;
align-items:center;
gap:10px;
margin-top:15px;
}

.name-badge{
padding:6px 14px;
border-radius:8px;
font-weight:600;
font-size:14px;
}

.b1{background:#7be1b0;}
.b2{background:#f3a3d8;}
.b3{background:#e7cdb6;}
.b4{background:#e6db8d;}
.b5{background:#8e5df6;color:white;}

.name-tag img{
width:32px;
height:32px;
border-radius:50%;
}

/* MOBILE FIX */

@media(max-width:768px){

.testimonial-section .section-title{
font-size:28px;
}

.section-desc{
font-size:15px;
padding:0 15px;
margin-bottom:30px;
}

.testimonial-card{
width:280px;
padding:20px;
}

.marquee-track{
gap:15px;
}

.name-badge{
font-size:12px;
padding:4px 10px;
}

}


/* ==================== HERO SECTION (index.html) ==================== */

.hs-wrap{
background:#0d121f;
border-radius:35px;
margin:40px;
padding:100px 90px;
color:#fff;
position:relative;
overflow:hidden;
box-shadow:0 20px 50px rgba(0,0,0,0.3);
}

.text-blue{
color:#00a2ff;
}

.hs-title{
font-size:64px;
font-weight:700;
line-height:1.1;
margin-bottom:30px;
}

.hs-text{
color:#b8c0cc;
font-size:18px;
max-width:520px;
margin-bottom:40px;
}

.hs-btn-main{
background:#f5c518;
color:#000;
padding:14px 32px;
border-radius:40px;
font-weight:600;
border:none;
transition:0.3s;
}

.hs-btn-main:hover{
background:#fff;
color:#000;
}

.hs-btn-outline{
border:1px solid #f5c518;
color:#f5c518;
padding:14px 32px;
border-radius:40px;
margin-left:15px;
transition:0.3s;
}

.hs-btn-outline:hover{
background:#fff;
color:#000;
border-color:#fff;
}

.hs-image-area{
position:relative;
height:600px;
}

.hs-img1{
position:absolute;
right:0;
top:-90px;
width:780px;
animation:hsFloat 5s ease-in-out infinite;
}

.hs-img2{
position:absolute;
right:30px;
bottom:-20px;
width:350px;
animation:hsFloat 5s ease-in-out infinite;
animation-delay:1.5s;
}

@keyframes hsFloat{
0%{ transform:translateY(0px); }
50%{ transform:translateY(-35px); }
100%{ transform:translateY(0px); }
}

@media(max-width:992px){
.hs-wrap{ padding:30px 30px 55px; margin:20px; }
.hs-title{ font-size:38px; }
.hs-text{ font-size:16px; }
.hs-image-area{ margin-top:20px; height:280px; position:relative; }
.hs-img1{ position:absolute; right:0; top:0; width:100%; }
.hs-img2{ position:absolute; right:10px; bottom:0; width:45%; }
}

@media(max-width:576px){
.hs-wrap{ padding:25px 20px 50px; margin:10px; border-radius:20px; }
.hs-title{ font-size:30px; }
.hs-btn-main, .hs-btn-outline{ padding:10px 20px; font-size:14px; }
.hs-btn-outline{ margin-left:8px; }
.hs-image-area{ margin-top:20px; height:220px; }
.hs-img1{ width:100%; }
.hs-img2{ width:48%; right:5px; position:absolute; bottom:0; }
}
/***********/
/*bubble */
/* HERO SECTION */

.about-hero{
position:relative;
background:#243e63;
height:340px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:#fff;
overflow:hidden;
}

/* BIG BUBBLE BASE */

.big-bubble{
position:absolute;
border-radius:50%;
background:rgba(255,255,255,0.06);
animation:float 12s ease-in-out infinite;
}

/* BIG BUBBLE POSITIONS */

.bb1{
width:500px;
height:500px;
top:-220px;
left:-200px;
animation-duration:14s;
}

.bb2{
width:420px;
height:420px;
bottom:-200px;
right:-160px;
animation-duration:16s;
}

.bb3{
width:350px;
height:350px;
top:30%;
left:20%;
animation-duration:18s;
}

.bb4{
width:300px;
height:300px;
bottom:10%;
right:30%;
}


/* ABOUT HERO SECTION */

.about-hero{
position:relative;
background:#1c2954 !important;
height:340px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:#fff;
overflow:hidden;
}

/* BIG BUBBLE BASE */

.big-bubble{
position:absolute;
border-radius:50%;
background:rgba(255,255,255,0.06);
animation:float 12s ease-in-out infinite;
}

/* BIG BUBBLE POSITIONS */

.bb1{
width:500px;
height:500px;
top:-220px;
left:-200px;
animation-duration:14s;
}

.bb2{
width:420px;
height:420px;
bottom:-200px;
right:-160px;
animation-duration:16s;
}

.bb3{
width:350px;
height:350px;
top:30%;
left:20%;
animation-duration:18s;
}

.bb4{
width:300px;
height:300px;
bottom:10%;
right:30%;
animation-duration:20s;
}

/* FLOAT ANIMATION */

@keyframes float{
0%{ transform:translateY(0px); }
50%{ transform:translateY(-40px); }
100%{ transform:translateY(0px); }
}

/* TITLE */

.about-title{
font-size:60px;
font-weight:700;
letter-spacing:1px;
position:relative;
z-index:2;
}

/* BREADCRUMB */

.breadcrumb-custom{
margin-top:10px;
font-size:18px;
opacity:0.9;
position:relative;
z-index:2;
}

.breadcrumb-custom span{
margin:0 8px;
}

/* HOME LINK */

.breadcrumb-custom a{
color:#fff;
text-decoration:none;
font-weight:500;
}

.breadcrumb-custom a:hover{
color:#00a2ff;
}

/* MOBILE RESPONSIVE */

@media(max-width:768px){
.about-hero{ height:240px; }
.about-title{ font-size:38px; }
.breadcrumb-custom{ font-size:16px; }
.big-bubble{ opacity:0.5; }
}

/* ==================== FOOTER ==================== */

.site-footer {
    background-color: #24262b; /* Match happy.html background */
    padding: 60px 0 10px;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
}

.site-footer .container {
    max-width: 1170px;
    margin: auto;
}

.site-footer .row {
    display: flex;
    flex-wrap: wrap;
}

.footer-col {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 0 15px;
}

.footer-col h4 {
    font-size: 18px;
    color: #ffffff;
    text-transform: capitalize;
    margin-bottom: 25px;
    font-weight: 500;
    position: relative;
}

.footer-col h4::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    background-color: #00a2ff; /* Royal Cyan Accent */
    height: 2px;
    box-sizing: border-box;
    width: 50px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li:not(:last-child) {
    margin-bottom: 10px;
}

.footer-col ul li a, .footer-col p {
    font-size: 15px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-weight: 300;
    display: block;
    transition: all 0.3s ease;
    line-height: 1.6;
    text-align: left;
}

.footer-col ul li a:hover {
    color: #00a2ff;
    padding-left: 8px;
}

.footer-col p {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    text-align: left;
}

.footer-col p i {
    color: #00a2ff;
    margin-right: 12px;
    margin-top: 5px;
    font-size: 16px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.footer-col .social-links {
    margin-top: 20px;
}

.footer-col .social-links a {
    display: inline-block;
    height: 40px;
    width: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 0 10px 10px 0;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    color: #ffffff;
    transition: all 0.5s ease;
    font-size: 16px;
}

.footer-col .social-links a:hover {
    color: #24262b;
    background-color: #00a2ff;
}

/* Footer Bottom Divider and Text */
.footer-bottom {
    background-color: #24262b;
    padding: 20px 0;
    text-align: center;
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    position: relative;
    margin-top: 20px;
}

.footer-bottom::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.footer-bottom p {
    margin: 0;
    text-align: center;
}

/* RESPONSIVE FOOTER */
@media(max-width: 991px) {
    .footer-col {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 25px;
    }
}

@media(max-width: 574px) {
    .footer-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}