/* --- GLOBAL CORE STYLES --- */
/* Colors from Frontier Advisory logo:
   Purple:  #5B2D8E
   Teal:    #4AABCF
   Text:    #4A7BA7 (logo text color)
*/

:root {
    --primary:       #5B2D8E;
    --primary-light: #7B4DB8;
    --primary-dark:  #3a1a5c;

    --teal:          #4AABCF;
    --teal-light:    #6DC4E0;
    --teal-pale:     #e8f7fc;

    --bg-main:  #f8fafc;
    --bg-soft:  #f0eaf8;
    --surface:  rgba(255,255,255,0.72);

    --text-main: #1a1030;
    --text-soft: #64748b;

    --border: rgba(91,45,142,0.12);

    --shadow-soft:  0 10px 30px rgba(91,45,142,0.08);
    --shadow-hover: 0 25px 60px rgba(91,45,142,0.16);

    --blur: blur(18px);

    --radius-xl: 28px;
    --radius-lg: 22px;

    --transition: all .45s cubic-bezier(0.16, 1, 0.3, 1);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}



html{
    scroll-behavior:smooth;
    overflow-x:hidden;
}

html:not(.js-ready){
    scroll-padding-top:0;
}

body{
    font-family:'Inter',sans-serif;

    background:
        radial-gradient(circle at top right, rgba(74,171,207,0.10), transparent 30%),
        radial-gradient(circle at bottom left, rgba(91,45,142,0.07), transparent 30%),
        var(--bg-main);

    color:var(--text-main);

    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

body{
    line-height:1.65;
    letter-spacing:-0.01em;
}

h1,h2,h3,h4{
    font-family:'Manrope','Inter',sans-serif;
    letter-spacing:-0.03em;
}

p{
    font-size:16px;
    line-height:1.85;
    color:var(--text-soft);
}

section{
    padding:100px 0;
}

.container{
    width:100%;
    max-width:1400px;
    margin:auto;
}

section{
    position:relative;
    z-index:2;
}

/* --- SCROLL ANIMATION --- */

.fade-up{
    opacity:0;
    filter:blur(8px);
    transform:translateY(50px);
    transition:
        opacity 1.2s cubic-bezier(0.215,0.610,0.355,1),
        filter 1.2s cubic-bezier(0.215,0.610,0.355,1),
        transform 1.4s cubic-bezier(0.16,1,0.3,1);
    will-change:opacity,transform,filter;
}

.fade-up.active{
    opacity:1 !important;
    filter:blur(0) !important;
    transform:translateY(0) !important;
}

/* --- NAVBAR --- */

/* Update the Navbar container */
.navbar {
    display: flex;
    align-items: center;
    padding: 15px 5%;
    background: rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(91, 45, 142, 0.10);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    gap: clamp(24px, 4vw, 56px);
    padding-right: clamp(0px, 3vw, 40px);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.navbar.scrolled{
    padding:14px 70px;
    background:rgba(255,255,255,0.92);
    box-shadow:0 12px 40px rgba(91,45,142,0.10);
}

/* --- LOGO --- */

.logo img {
  width: 190px; /* Increase this value to make the logo larger */
  height: auto;
}

/* If you are using the official-logo-img class */
.official-logo-img {
    height: clamp(34px, 4vh, 44px);
    width: auto;
    object-fit: contain;
    display: block;
    cursor: pointer;
}



/* --- NAV CONTAINER --- */




.nav-links a{
    text-decoration:none;
    color:#475569;
    font-size:15px;
    font-weight:500;
    transition:.3s;
    white-space:nowrap;
}

.nav-links a:hover{
    color:#5B2D8E;
}

/* --- HEADER ACTIONS --- */

.header-actions{
    display:flex;
    align-items:center;
    gap:18px;
    flex-shrink:0;
}

/* --- SWITCH BUTTONS --- */

/* Container for the pill */
.switch-wrapper {
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 999px;
    background: white;
    border: 1px solid rgba(91, 45, 142, 0.15);
    gap: 2px;
    flex-shrink: 0;
}

/* Individual buttons */
.switch-btn {
    padding: 8px 24px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    background: transparent;
    color: #475569;
    cursor: pointer;
    transition: all 0.3s ease; /* Smooth color transition */
    white-space: nowrap;
}

/* Hover effect for inactive button */
.switch-btn:not(.active):hover {
    background: rgba(91, 45, 142, 0.05); /* Very light purple tint on hover */
    color: #5B2D8E;
}

/* Active state styling */
.switch-btn.active {
    background: #5B2D8E;
    color: white;
    box-shadow: 0 4px 12px rgba(91, 45, 142, 0.25);
}

/* Fix Login button alignment/spacing */
.login-btn {
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 8px 20px;
  color: #5B2D8E;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}

.login-btn svg{
    stroke:#5B2D8E;
    transition:.3s ease;
}

.login-btn:hover{
    background:#5B2D8E;
    color:white;
    border-color:#5B2D8E;
}

.login-btn:hover svg{
    stroke:white;
}

/* --- MOBILE MENU --- */

.mobile-menu-toggle{
    display:none;
}

/* --- HERO SECTION --- */

.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:220px 100px 160px;
    overflow:hidden;
    background-image:var(--hero-bg, none);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.hero::before{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    top:-120px;
    right:-100px;
    background:radial-gradient(circle, rgba(74,171,207,0.18), transparent 70%);
    filter:blur(80px);
    z-index:0;
}

.hero::after{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    bottom:-80px;
    left:-60px;
    background:radial-gradient(circle, rgba(91,45,142,0.10), transparent 70%);
    filter:blur(80px);
    z-index:0;
}

.hero-content{
    position:relative;
    z-index:2;
    max-width:760px;
}

.hero-subtitle{
    color:var(--teal);
    font-size:18px;
    font-weight:600;
    margin-bottom:20px;
}

.hero h1{
    font-size:clamp(54px,7vw,92px);
    line-height:1.05;
    letter-spacing:-3px;
    margin-bottom:30px;
    color:#1a1030;
    overflow-wrap:break-word;
    word-break:break-word;
}

.hero-text{
    font-size:20px;
    line-height:1.9;
    max-width:640px;
    color:var(--text-soft);
    margin-bottom:40px;
}

.hero-buttons{
    display:flex;
    align-items:center;
    gap:20px;
}

/* --- BUTTONS --- */

.primary-btn{
    position:relative;
    overflow:hidden;
    border:none;
    padding:16px 32px;
    border-radius:18px;
    background:linear-gradient(135deg, #5B2D8E, #3a1a5c);
    color:white;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    box-shadow:0 20px 40px rgba(91,45,142,0.22);
}

.primary-btn:hover{
    transform:translateY(-6px);
    box-shadow:0 30px 60px rgba(91,45,142,0.30);
}

.primary-btn::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.18), transparent);
    transform:translateX(-120%);
    transition:.8s ease;
}

.primary-btn:hover::before{
    transform:translateX(120%);
}

.secondary-btn{
    border:1px solid rgba(91,45,142,0.20);
    background:white;
    color:#5B2D8E;
    padding:16px 32px;
    border-radius:18px;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}

.secondary-btn:hover{
    transform:translateY(-6px);
    background:#5B2D8E;
    color:white;
    box-shadow:0 20px 40px rgba(91,45,142,0.15);
}

/* --- SECTION HEADER --- */

.section-header{
    margin-bottom:70px;
}

.section-subtitle{
    color:var(--teal);
    font-size:18px;
    font-weight:600;
    margin-bottom:20px;
}

.section-header h2{
    font-size:54px;
    line-height:1.2;
    color:#1a1030;
}

/* --- SECTION BACKGROUND GLOW --- */

.services,
.insights,
.team,
.careers,
.contact,
.community-section{
    position:relative;
}

.services::before,
.insights::before,
.team::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(91,45,142,0.04);
    filter:blur(120px);
    z-index:-1;
}

.services::before{
    top:-100px;
    left:-100px;
}

.insights::before{
    bottom:-100px;
    right:-100px;
}

/* --- SERVICES --- */

.services{
    padding:120px 80px;
    background:linear-gradient(to bottom,#ffffff,#f8fafc);
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.service-card{
    position:relative;
    background:rgba(255,255,255,0.82);
    backdrop-filter:blur(22px);
    border:1px solid rgba(91,45,142,0.10);
    border-radius:30px;
    padding:42px;
    overflow:hidden;
    transition:var(--transition);
    box-shadow:var(--shadow-soft);
    cursor:pointer;
}

.service-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-hover);
    border-color:rgba(74,171,207,0.25);
}

.service-icon{
    width:70px;
    height:70px;
    border-radius:20px;
    background:linear-gradient(135deg, #5B2D8E, #4AABCF);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    margin-bottom:30px;
}

.service-card h3{
    font-size:28px;
    margin-bottom:18px;
    color:#1a1030;
}

.service-card p{
    color:#64748b;
    line-height:1.8;
}

/* --- INSIGHTS --- */

.insights{
    padding:120px 80px;
    background:#f8fafc;
}

.insights-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.insight-card{
    background:white;
    border-radius:24px;
    overflow:hidden;
    border:1px solid rgba(91,45,142,0.08);
    transition:.4s;
}

.insight-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(91,45,142,0.10);
}

.insight-image{
    width:100%;
    height:240px;
    background:linear-gradient(135deg, #5B2D8E, #4AABCF);
    position:relative;
    overflow:hidden;
}

.insight-content{
    padding:35px;
}

.insight-tag{
    display:inline-block;
    padding:8px 16px;
    background:rgba(74,171,207,0.10);
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    color:#4AABCF;
    margin-bottom:20px;
}

.insight-content h3{
    font-size:28px;
    line-height:1.3;
    margin-bottom:20px;
    color:#1a1030;
}

.insight-content p{
    color:#64748b;
    line-height:1.8;
    margin-bottom:30px;
}

.read-btn{
    border:none;
    background:#5B2D8E;
    color:white;
    padding:14px 22px;
    border-radius:12px;
    cursor:pointer;
    font-weight:600;
    transition:.3s;
}

.read-btn:hover{
    background:#4AABCF;
}

/* --- COMMUNITY --- */

.community-section{
    padding:120px 80px;
    background:#f0eaf8;
}

.community-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:40px;
}

.create-post-box,
.feed-card,
.sidebar-box{
    background:white;
    padding:30px;
    border-radius:20px;
    border:1px solid rgba(91,45,142,0.10);
    box-shadow:0 4px 6px -1px rgba(91,45,142,0.05);
}

.create-post-box{
    margin-bottom:30px;
}

.create-post-box textarea{
    width:100%;
    height:100px;
    padding:15px;
    border-radius:12px;
    border:1px solid rgba(91,45,142,0.15);
    resize:none;
    margin-bottom:15px;
    font-family:'Inter',sans-serif;
    transition:.3s;
}

.create-post-box textarea:focus{
    outline:none;
    border-color:#4AABCF;
}

.feed-container{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.feed-user-info{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:20px;
}

.user-avatar-placeholder{
    width:48px;
    height:48px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, #5B2D8E, #4AABCF);
    color:white;
    font-weight:700;
}

.feed-post-text{
    line-height:1.8;
    color:#334155;
    margin-bottom:20px;
}

.feed-actions{
    display:flex;
    gap:20px;
    padding-top:15px;
    border-top:1px solid #f0eaf8;
}

.feed-actions button{
    border:none;
    background:transparent;
    cursor:pointer;
    color:#64748b;
    font-weight:600;
    transition:.3s;
}

.feed-actions button:hover{
    color:#5B2D8E;
}

.trending-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:15px;
}

.trending-list li{
    display:flex;
    justify-content:space-between;
}

.trending-list a{
    color:#5B2D8E;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.trending-list a:hover{
    color:#4AABCF;
}

/* --- TEAM --- */

.team{
    padding:120px 80px;
    background:white;
}

.team-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.team-card{
    background:#f8fafc;
    border-radius:24px;
    overflow:hidden;
    border:1px solid rgba(91,45,142,0.08);
    transition:.4s;
}

.team-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(91,45,142,0.12);
}

.team-image{
    width:100%;
    height:320px;
    background:linear-gradient(135deg, #5B2D8E, #4AABCF);
}

.team-content{
    padding:35px;
}

.team-content h3{
    font-size:28px;
    margin-bottom:10px;
    color:#1a1030;
}

.team-content span{
    display:block;
    color:#4AABCF;
    font-weight:600;
    margin-bottom:20px;
}

.team-content p{
    color:#64748b;
    line-height:1.8;
    margin-bottom:30px;
}

.linkedin-btn{
    border:none;
    background:#5B2D8E;
    color:white;
    padding:14px 24px;
    border-radius:12px;
    cursor:pointer;
    font-weight:600;
    transition:.3s;
}

.linkedin-btn:hover{
    background:#4AABCF;
}

/* --- CAREERS --- */

.careers{
    padding:120px 80px;
    background:#f8fafc;
}



.careers-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:70px;
    align-items:center;
}

.careers-text{
    font-size:18px;
    line-height:1.9;
    color:#64748b;
    margin:30px 0 40px;
}

.careers-buttons{
    display:flex;
    gap:20px;
}

.careers-right{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.career-card{
    background:white;
    padding:35px;
    border-radius:24px;
    border:1px solid rgba(91,45,142,0.10);
    transition:.4s;
    cursor:pointer;
}

.career-card:hover{
    transform:translateX(10px);
    border-color:#4AABCF;
    box-shadow:0 15px 35px rgba(74,171,207,0.12);
}

/* --- CONTACT --- */


/* --- CONTACT SECTION --- */
.contact {
    padding: 120px 80px;
    background: white;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start; 
}

.contact-info {
    margin-top: 40px;
    display: flex;
    flex-direction: column; 
    gap: 25px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 18px;
}

.contact-item i {
    width: 45px;
    height: 45px;
    background: rgba(91, 45, 142, 0.1);
    color: #5b2d8e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.contact-form {
    background: #f8fafc;
    padding: 45px;
    border-radius: 24px;
    border: 1px solid rgba(91,45,142,0.10);
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 80px; 
    padding: 100px 5%;
    align-items: center;
}

.contact-left .section-subtitle {
    color: #5b2d8e;
    font-weight: 600;
    margin-bottom: 15px;
}

.contact-left h2 {
    font-size: 48px;
    margin-bottom: 20px;
    line-height: 1.2;
}

.contact-text{
    font-size:18px;
    line-height:1.9;
    color:#64748b;
    margin:30px 0 40px;
}



.contact-form{
    background:#f8fafc;
    padding:45px;
    border-radius:24px;
    border:1px solid rgba(91,45,142,0.10);
    display:flex;
    flex-direction:column;
    gap:20px;
}
.contact-section {
    padding: 50px 5%;
    text-align: center;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:18px;
    border-radius:14px;
    border:1px solid rgba(91,45,142,0.15);
    outline:none;
    font-size:16px;
    font-family:'Inter',sans-serif;
    transition:border-color .3s;
}

.contact-form input:focus,
.contact-form textarea:focus{
    border-color:#4AABCF;
}.contact-form textarea{
    height:160px;
    resize:none;
}

/* --- FOOTER --- */

.footer{
    background:linear-gradient(135deg, #3a1a5c, #1a2a4a);
    color:white;
    padding:70px clamp(20px, 6vw, 80px) 30px;
}

.footer-top{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    margin-bottom:40px;
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,0.10);
    padding-top:30px;
    text-align:center;
    color:rgba(255,255,255,0.45);
}

.footer-links{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 28px;
}

.footer-links a{
    color:rgba(255,255,255,0.65);
    text-decoration:none;
    font-size:14px;
    transition:.3s;
}

.footer-links a:hover{
    color:#4AABCF;
}

/* --- MODAL --- */

.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(26,16,48,0.55);
    backdrop-filter:blur(8px);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    pointer-events:none;
    transition:opacity .4s ease;
    z-index:2000;
}

.modal-overlay.open{
    opacity:1;
    pointer-events:auto;
}

.modal-box{
    position:relative;
    width:100%;
    max-width:450px;
    background:white;
    padding:45px;
    border-radius:28px;
    border:1px solid rgba(91,45,142,0.12);
    box-shadow:0 25px 50px -12px rgba(91,45,142,0.25);
    transform:translateY(-30px);
    transition:transform .4s ease;
}

.modal-overlay.open .modal-box{
    transform:translateY(0);
}

.close-modal{
    position:absolute;
    top:20px;
    right:25px;
    background:transparent;
    border:none;
    font-size:30px;
    cursor:pointer;
    color:#64748b;
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:20px;
}

.form-group input{
    padding:14px 16px;
    border-radius:12px;
    border:1px solid rgba(91,45,142,0.15);
    outline:none;
    transition:border-color .3s;
}

.form-group input:focus{
    border-color:#4AABCF;
}

/* --- HOVER PERFORMANCE --- */

.service-card,
.insight-card,
.team-card,
.career-card,
.feed-card{
    will-change:transform;
}

body.menu-open{
    overflow:hidden;
}

body.menu-open::before{
    content:'';
    position:fixed;
    inset:0;
    background:rgba(15,23,42,0.55);
    backdrop-filter:blur(3px);
    z-index:999;
    animation:overlayFadeIn .3s ease forwards;
}

@keyframes overlayFadeIn{
    from{opacity:0;}
    to{opacity:1;}
}

/* --- RESPONSIVE --- */

@media (max-width:1200px){

    .navbar{
        padding:16px 30px;
    }

    .nav-container{
        gap:20px;
        padding-right:0;
    }

    .nav-links{
        gap:18px;
    }

    .nav-links a{
        font-size:14px;
    }

    .header-actions{
        gap:12px;
    }

    .switch-btn{
        padding:7px 16px;
        font-size:13px;
    }

    .hero{
        padding:140px 40px 80px;
        min-height:80vh;
    }

    .hero h1{
        font-size:clamp(40px,6.5vw,64px);
    }

    .services,
    .insights,
    .team,
    .careers,
    .contact,
    .community-section{
        padding:100px 40px;
    }

    .insights-grid,
    .team-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:992px){

    .navbar{
        justify-content:space-between;
    }

    .mobile-menu-toggle{
        display:flex;
        flex-direction:column;
        gap:6px;
        background:transparent;
        border:none;
        cursor:pointer;
        z-index:1100;
    }

    .mobile-menu-toggle span{
        width:28px;
        height:3px;
        background:#5B2D8E;
        border-radius:999px;
        transition:.3s ease;
    }

    .mobile-menu-toggle.open span:nth-child(1){
        transform:translateY(9px) rotate(45deg);
    }

    .mobile-menu-toggle.open span:nth-child(2){
        opacity:0;
    }

    .mobile-menu-toggle.open span:nth-child(3){
        transform:translateY(-9px) rotate(-45deg);
    }

    .nav-container{
        position:fixed;
        top:0;
        right:-100%;
        width:80%;
        max-width:400px;
        height:100vh;
        background:white;
        flex-direction:column;
        justify-content:flex-start;
        padding:120px 40px 40px;
        gap:40px;
        transition:.4s cubic-bezier(0.16,1,0.3,1);
        z-index:1050;
        border-left:1px solid rgba(91,45,142,0.12);
    }

    .nav-container.open{
        right:0;
    }

    .nav-container{
        overflow-y:auto;
        overflow-x:hidden;
    }

    .nav-links{
        flex-direction:column;
        gap:30px;
    }

    .header-actions{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        width:100%;
        min-width:0;
        gap:14px;
        margin-left:0;
        justify-content:flex-start;
    }

    .switch-wrapper,
    .login-btn,
    .lang-switch{
        width:100%;
        max-width:100%;
        min-width:0;
        box-sizing:border-box;
        justify-content:center;
    }

            .services-grid,
            .insights-grid,
            .team-grid,
            .careers-grid,
            .contact,
            .community-grid{
                grid-template-columns:1fr;
            }

    .hero h1{
        font-size:clamp(34px,8vw,48px);
    }


    .contact-grid {
        grid-template-columns: 1fr; 
        gap: 40px;
        padding: 50px 20px;
    }
}

@media (max-width:576px){

    .navbar{
        padding:15px 20px;
    }

    .logo img{
        height:38px;
        width:auto;
    }

    .frontier{
    font-size:26px;
    font-weight:800;
    letter-spacing:3px;
}

.capital{
    font-size:12px;
    letter-spacing:8px;
    color:#4A7BA7;
    margin-top:2px;
}

    .hero{
        padding:100px 20px 80px;
        text-align:center;
        min-height:100svh;
        background-size:cover;
        background-position:center center;
        background-attachment:scroll;
    }

    .hero h1{
        font-size:clamp(28px,10vw,38px);
        letter-spacing:-1.5px;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .primary-btn,
    .secondary-btn{
        width:100%;
    }

    .services,
    .insights,
    .team,
    .careers,
    .contact,
    .community-section{
        padding:80px 20px;
    }

    .section-header h2{
        font-size:34px;
    }

    .service-card,
    .insight-content,
    .team-content,
    .contact-form,
    .feed-card,
    .sidebar-box,
    .create-post-box{
        padding:25px;
    }

    .modal-box{
        padding:30px 20px;
        border-radius:20px;
    }
}







.section-title{font-size:42px;line-height:1.15;}
.nav-links a{font-size:14px;font-weight:500;letter-spacing:.02em;}
.card,.service-card,.insight-card{border-radius:24px;transition:var(--transition);}
.card:hover,.service-card:hover,.insight-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover);}
@media(max-width:768px){.section-title{font-size:32px;} .navbar{padding:14px 22px;} section{padding:70px 0;}}

/* ── Our Clients Section ────────────────────── */
.clients-section {
  padding: 80px 0;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  overflow: hidden;
}
.clients-header {
  text-align: center;
  margin-bottom: 50px;
}
.clients-header h2 {
  font-size: 38px;
  color: #0f172a;
  margin-bottom: 12px;
}
.clients-sub {
  color: #64748b;
  font-size: 16px;
  max-width: 500px;
  margin: 0 auto;
}
.clients-track-wrapper {
  overflow: hidden;
  position: relative;
  padding: 10px 0;
}
.clients-track-wrapper::before,
.clients-track-wrapper::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.clients-track-wrapper::before {
  left: 0;
  background: linear-gradient(to right, #f8fafc, transparent);
}
.clients-track-wrapper::after {
  right: 0;
  background: linear-gradient(to left, #f8fafc, transparent);
}
.clients-track {
  display: flex;
  gap: 40px;
  align-items: center;
  width: max-content;
  animation: scrollClients 28s linear infinite;
}
.clients-track:hover { animation-play-state: paused; }
@keyframes scrollClients {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.client-logo-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  height: 80px;
  transition: box-shadow .25s, transform .25s;
  flex-shrink: 0;
}
.client-logo-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transform: translateY(-3px);
}
.client-logo-card img {
  max-width: 120px;
  max-height: 44px;
  object-fit: contain;
  filter: grayscale(1) opacity(.6);
  transition: filter .25s;
}
.client-logo-card:hover img { filter: grayscale(0) opacity(1); }
.client-logo-placeholder {
  font-size: 14px;
  font-weight: 700;
  color: #475569;
  letter-spacing: .04em;
  text-align: center;
}
.clients-empty {
  text-align: center;
  padding: 40px;
  color: #94a3b8;
  font-size: 14px;
}

/* ============================================
   OUR CLIENTS SECTION
============================================ */
.clients-section {
  padding: 90px 0;
  background: #f8fafc;
  overflow: hidden;
}

.clients-track-wrap {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.clients-track {
  display: flex;
  gap: 32px;
  width: max-content;
  animation: clientsScroll 28s linear infinite;
}

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

@keyframes clientsScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.client-logo-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  height: 90px;
  flex-shrink: 0;
  transition: box-shadow .3s, transform .3s;
  cursor: default;
  position: relative;
}

.client-logo-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transform: translateY(-3px);
}

/* Client name tooltip on hover */
.client-logo-card[data-name]::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #0f172a;
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 10;
}
.client-logo-card[data-name]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.client-logo-card img {
  max-height: 44px;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .7;
  transition: .3s;
}

.client-logo-card:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

.client-logo-card .client-name-placeholder {
  font-size: 15px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: .5px;
  text-align: center;
  transition: .3s;
}

.client-logo-card:hover .client-name-placeholder {
  color: #3156a3;
}

/* ── Contact Form Card ─────────────────────────────────── */
.contact-form-card {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    border: 1px solid #f1f5f9;
}
/* ── Language Switch (EN / AR) ──────────────────────────────── */
.lang-switch{display:flex;align-items:center;gap:2px;background:#f1f5f9;border-radius:99px;padding:3px;border:1px solid #e2e8f0;flex-shrink:0}
.lang-btn{background:none;border:none;cursor:pointer;padding:6px 12px;border-radius:99px;font-size:12px;font-weight:700;color:#475569;transition:.2s;font-family:'Inter',sans-serif;letter-spacing:.03em;line-height:1;white-space:nowrap;flex-shrink:0}
.lang-btn.active{background:#5B2D8E;color:white;box-shadow:0 2px 8px rgba(91,45,142,.25)}
.lang-btn:hover:not(.active){background:#e2e8f0;color:#0f172a}

/* ── RTL overrides ──────────────────────────────────────────── */
[dir="rtl"] .navbar{direction:rtl}
[dir="rtl"] .nav-links{padding-right:0}
[dir="rtl"] .sb-item i,[dir="rtl"] .sb-footer a i{margin-right:0;margin-left:11px}
[dir="rtl"] .hero-content,[dir="rtl"] .careers-left,[dir="rtl"] .contact-left{text-align:right}
[dir="rtl"] .hero-buttons,[dir="rtl"] .careers-buttons{justify-content:flex-start}
[dir="rtl"] .footer-top{direction:rtl}
[dir="rtl"] .footer-links{direction:rtl}
[dir="rtl"] .contact-card-item{flex-direction:row-reverse;text-align:right}
[dir="rtl"] .section-header{text-align:right}
[dir="rtl"] .mobile-menu-toggle{margin-left:0;margin-right:auto}
[dir="rtl"] body{font-family:'Tajawal','Inter',sans-serif}
/* ── Login/Signup/Forgot Modal ────────────────────────────────── */
/* ── Login/Signup/Forgot Modal ──────────────────────────────── */
.modal-header{margin-bottom:8px}
.modal-header h3{font-size:22px;color:#0f172a;margin-bottom:4px}
.modal-header p{font-size:14px;color:#64748b;margin-bottom:20px}
.form-actions{display:flex;justify-content:flex-end;margin:-4px 0 12px}
.forgot-pass{font-size:13px;color:#5B2D8E;text-decoration:none;font-weight:500;transition:opacity .2s}
.forgot-pass:hover{opacity:.7;text-decoration:underline}
.modal-submit-btn{width:100%;margin-top:8px}
/* ── Password Toggle ──────────────────────────────────────────── */
.password-wrapper{position:relative;width:100%}
.password-wrapper input{padding-right:44px;width:100%}
.pw-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#94a3b8;padding:4px;display:flex;align-items:center}
.pw-toggle:hover{color:#5B2D8E}
.pw-toggle svg{width:18px;height:18px}
/* ── Mobile: clients scroll speed + card size ── */
@media (max-width: 768px) {
  .clients-track {
    gap: 16px;
    animation-duration: 20s;
  }
  .client-logo-card {
    min-width: 130px;
    height: 70px;
    padding: 14px 20px;
  }
  .client-logo-card img {
    max-height: 34px;
    max-width: 100px;
  }
  /* Disable tooltip on touch devices */
  .client-logo-card[data-name]::after {
    display: none;
  }
}

/* ── Mobile: contact cards stack ── */
@media (max-width: 576px) {
  .contact-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Hide top bar on mobile ── */
@media (max-width: 768px) {
  .top-bar { display: none !important; }
  .navbar  { top: 0 !important; }
}