/*


|--------------------------------------------------------------------------


| Studia | 21 - Main Stylesheet


| Premium Architecture & Interior Design


|--------------------------------------------------------------------------


*/





/* ============================================


   CSS VARIABLES


   ============================================ */


:root {


    /* Colors */


    --bg-primary:    #F5F0E8;
--bg-secondary:  #EDE8DF;
--bg-card:       #FDFAF5;
--accent:        #9C7A3C;
--accent-hover:  #7A5E2A;
--accent-dark:   #6B5123;
--accent-gold: #f9b437;
--text-primary:  #1A1612;
--text-secondary:#4A3F35;
--text-muted:    #8C7E72;
--text-white: #ffffff;
--border-color:  rgba(26, 22, 18, 0.10);
--border-hover:  rgba(26, 22, 18, 0.20);
--shadow-sm: 0 2px 10px rgba(26, 22, 18, 0.08);
--shadow-md: 0 5px 30px rgba(26, 22, 18, 0.12);
--shadow-lg: 0 10px 50px rgba(26, 22, 18, 0.16);
--shadow-accent: 0 10px 40px rgba(156, 122, 60, 0.18);




    /* Typography */

--font-heading: 'Lato', sans-serif;
--font-body: 'Lato', sans-serif;




    /* Spacing */


    --section-padding: 120px 0;


    --section-padding-sm: 80px 0;





    /* Transitions */


    --transition-fast: 0.2s ease;


    --transition-normal: 0.3s ease;


    --transition-slow: 0.5s ease;


    --transition-smooth: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);


}





/* ============================================


   RESET & BASE


   ============================================ */


*,


*::before,


*::after {


    margin: 0;


    padding: 0;


    box-sizing: border-box;


}





html {


    scroll-behavior: smooth;


    overflow-x: hidden;


}





body {


    font-family: var(--font-body);


    font-size: 16px;


    font-weight: 300;


    line-height: 1.7;


    color: var(--text-primary);


    background-color: var(--bg-primary);


    overflow-x: hidden;


    -webkit-font-smoothing: antialiased;


    -moz-osx-font-smoothing: grayscale;


}





::selection {


    background: var(--accent);


    color: var(--bg-primary);


}





::-webkit-scrollbar {


    width: 8px;


}





::-webkit-scrollbar-track {


    background: var(--bg-primary);


}





::-webkit-scrollbar-thumb {


    background: var(--accent);


    border-radius: 4px;


}





::-webkit-scrollbar-thumb:hover {


    background: var(--accent-hover);


}





a {


    color: var(--accent);


    text-decoration: none;


    transition: var(--transition-normal);


}





a:hover {


    color: var(--accent-hover);


}





img {


    max-width: 100%;


    height: auto;


}





/* ============================================


   TYPOGRAPHY


   ============================================ */


h1, h2, h3, h4, h5, h6 {


    font-family: var(--font-heading);


    font-weight: 600;


    line-height: 1.2;


    color: var(--text-primary);


}





h1 {


    font-size: clamp(2.5rem, 5vw, 4.5rem);


    font-weight: 300;


}





h2 {


    font-size: clamp(2rem, 4vw, 3.5rem);


    font-weight: 400;


}





h3 {


    font-size: clamp(1.5rem, 3vw, 2.5rem);


    font-weight: 500;


}





h4 {


    font-size: clamp(1.25rem, 2vw, 1.75rem);


}





h5 {


    font-size: 1.25rem;


}





h6 {


    font-size: 1rem;


}





.section-subtitle {


    display: inline-block;


    font-family: var(--font-body);


    font-size: 0.75rem;


    font-weight: 500;


    letter-spacing: 3px;


    text-transform: uppercase;


    color: var(--accent-gold);


    margin-bottom: 15px;


    position: relative;


    padding-left: 40px;


}





.section-subtitle::before {


    content: '';


    position: absolute;


    left: 0;


    top: 50%;


    width: 30px;


    height: 1px;


    background: var(--accent-gold);


}





.section-title {


    margin-bottom: 20px;


}





.section-description {


    font-size: 17px;


    color: var(--text-secondary);


    max-width: 600px;


}





.text-accent {


    color: var(--accent) !important;


}





.font-heading {


    font-family: var(--font-heading);


}





/* ============================================


   BUTTONS


   ============================================ */


.btn {


    font-family: var(--font-body);


    font-size: 0.875rem;


    font-weight: 500;


    letter-spacing: 1px;


    text-transform: uppercase;


    padding: 15px 25px;


    border-radius: 2px;


    border: none;


    cursor: pointer;


    transition: var(--transition-normal);


    display: inline-flex;


    align-items: center;


    justify-content: center;


    gap: 10px;


    position: relative;


    overflow: hidden;


}





.btn::before {


    content: '';


    position: absolute;


    top: 0;


    left: -100%;


    width: 100%;


    height: 100%;


    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);


    transition: var(--transition-slow);


}





.btn:hover::before {


    left: 100%;


}





.btn-primary {


    background: var(--accent);


    color: var(--bg-primary);


}





.btn-primary:hover {


    background: var(--accent-hover);


    color: var(--bg-primary);


    transform: translateY(-2px);


    box-shadow: var(--shadow-accent);


}





.btn-outline-light {


    background: transparent;


    color: var(--text-primary);


    border: 1px solid rgba(255, 255, 255, 0.3);


}





.btn-outline-light:hover {


    background: var(--text-primary);


    color: var(--bg-primary);


    transform: translateY(-2px);


}





.btn-outline-accent {


    background: transparent;


    color: var(--accent);


    border: 1px solid var(--accent);


}





.btn-outline-accent:hover {


    background: var(--accent);


    color: var(--bg-primary);


}





.btn-sm {


    padding: 10px 25px;


    font-size: 0.8rem;


}





.btn-lg {


    padding: 18px 45px;


    font-size: 0.9rem;


}





/* ============================================


   PAGE LOADER


   ============================================ */


.page-loader {


    position: fixed;


    top: 0;


    left: 0;


    width: 100%;


    height: 100%;


    background: var(--bg-primary);


    z-index: 99999;


    display: flex;


    align-items: center;


    justify-content: center;


}





.loader-content {


    text-align: center;


}





.loader-logo {


    margin-bottom: 30px;


}





.loader-logo .logo-text,


.loader-logo .logo-number {


    font-family: var(--font-heading);


    font-size: 3rem;


    font-weight: 300;


    color: var(--text-primary);


}





.loader-logo .logo-divider {


    font-family: var(--font-heading);


    font-size: 3rem;


    font-weight: 300;


    color: var(--accent);


    margin: 0 10px;


}





.loader-bar {


    width: 200px;


    height: 2px;


    background: var(--border-color);


    margin: 0 auto;


    position: relative;


    overflow: hidden;


}





.loader-bar::after {


    content: '';


    position: absolute;


    top: 0;


    left: -100%;


    width: 100%;


    height: 100%;


    background: var(--accent);


    animation: loaderBar 1.5s ease-in-out infinite;


}





@keyframes loaderBar {


    0% { left: -100%; }


    50% { left: 0; }


    100% { left: 100%; }


}





/* ============================================


   SCROLL PROGRESS


   ============================================ */


.scroll-progress {


    position: fixed;


    top: 0;


    left: 0;


    width: 0;


    height: 3px;


    background: var(--accent);


    z-index: 10001;


    transition: width 0.1s ease;


}





/* ============================================


   NAVBAR


   ============================================ */


#mainNav {


    padding: 20px 0;


    transition: var(--transition-normal);


    background: transparent;


    z-index: 1000;


}





#mainNav.scrolled {


    padding: 12px 0;


    background: rgba(245, 240, 232, 0.97);


    backdrop-filter: blur(20px);


    border-bottom: 1px solid var(--border-color);


}





.navbar-brand {


    display: flex;


    align-items: center;


    gap: 0;


    text-decoration: none !important;


}





.brand-text {


    font-family: var(--font-heading);


    font-size: 1.75rem;


    font-weight: 300;


    color: var(--text-white);


    transition: var(--transition-normal);


}

.scrolled .brand-text{
    color: var(--text-primary) !important;
}





.brand-divider {


    font-family: var(--font-heading);


    font-size: 1.75rem;


    font-weight: 300;


    color: var(--accent);


    margin: 0 8px;


}





.brand-number {


    font-family: var(--font-heading);


    font-size: 1.75rem;


    font-weight: 600;


    color: var(--accent);


}





#mainNav .nav-link {


    font-size: 0.85rem;


    font-weight: 400;


    letter-spacing: 0.5px;


    color: var(--text-primary);


    padding: 10px 18px;


    position: relative;


    transition: var(--transition-normal);


}





#mainNav .nav-link::after {


    content: '';


    position: absolute;


    bottom: 5px;


    left: 18px;


    right: 18px;


    height: 1px;


    background: var(--accent);


    transform: scaleX(0);


    transition: var(--transition-normal);


    transform-origin: right;


}





#mainNav .nav-link:hover::after,


#mainNav .nav-link.active::after {


    transform: scaleX(1);


    transform-origin: left;


}





#mainNav .nav-link:hover,


#mainNav .nav-link.active {


    color: var(--accent-gold);


}





.dropdown-menu {


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    border-radius: 4px;


    padding: 15px 0;


    margin-top: 10px;


    box-shadow: var(--shadow-lg);


    min-width: 220px;


}





.dropdown-item {


    color: var(--text-secondary);


    padding: 10px 25px;


    font-size: 0.875rem;


    transition: var(--transition-normal);


}





.dropdown-item:hover {


    background: transparent;


    color: var(--accent);


    padding-left: 30px;


}





/* ============================================


   HERO SECTION


   ============================================ */


.hero-section {


    position: relative;


    height: 100vh;


    min-height: 700px;


    display: flex;


    align-items: center;


    justify-content: center;


    overflow: hidden;


}





.hero-bg {


    position: absolute;


    top: 0;


    left: 0;


    width: 100%;


    height: 100%;


    z-index: 1;


}





.hero-bg img,


.hero-bg video {


    width: 100%;


    height: 100%;


    object-fit: cover;


}





.hero-overlay {


    position: absolute;


    top: 0;


    left: 0;


    width: 100%;


    height: 100%;


    background: linear-gradient(


        to bottom,


        rgba(13, 13, 13, 0.4) 0%,


        rgba(13, 13, 13, 0.6) 50%,


        rgba(13, 13, 13, 0.9) 100%


    );


    z-index: 2;


}





.hero-content {


    position: relative;


    z-index: 3;


    text-align: center;


    max-width: 900px;


    padding: 0 20px;


}





.hero-title {


    font-family: var(--font-heading);


    font-size: clamp(3rem, 6vw, 6rem);


    font-weight: 300;


    color: var(--text-primary);


    margin-bottom: 20px;


    line-height: 1.1;


}





.hero-title .highlight {


    color: var(--accent-gold);


    font-style: italic;


}





.hero-subtitle {


    font-size: clamp(1rem, 2vw, 1.25rem);


    font-weight: 300;


    color: var(--text-white);


    margin-bottom: 50px;


    max-width: 600px;


    margin-left: auto;


    margin-right: auto;


    line-height: 1.8;


}





.hero-buttons {


    display: flex;


    gap: 20px;


    justify-content: center;


    flex-wrap: wrap;


}





.hero-scroll-indicator {


    position: absolute;


    bottom: 40px;


    left: 50%;


    transform: translateX(-50%);


    z-index: 3;


    text-align: center;


    animation: scrollBounce 2s ease-in-out infinite;


}





.hero-scroll-indicator span {


    display: block;


    font-size: 0.7rem;


    text-transform: uppercase;


    letter-spacing: 3px;


    color: var(--accent);


    margin-bottom: 10px;


}





.hero-scroll-indicator .scroll-line {


    width: 1px;


    height: 50px;


    background: var(--accent);


    margin: 0 auto;


    position: relative;


    overflow: hidden;


}





.hero-scroll-indicator .scroll-line::after {


    content: '';


    position: absolute;


    top: -100%;


    left: 0;


    width: 100%;


    height: 100%;


    background: var(--text-primary);


    animation: scrollLine 2s ease-in-out infinite;


}





@keyframes scrollBounce {


    0%, 100% { transform: translateX(-50%) translateY(0); }


    50% { transform: translateX(-50%) translateY(10px); }


}





@keyframes scrollLine {


    0% { top: -100%; }


    100% { top: 100%; }


}





/* ============================================


   SECTIONS


   ============================================ */


.section {
    padding: var(--section-padding);
    position: relative;
}

/* ============================================
   DATA-ANIMATE — scroll reveal
   JS (main.js) adds .animated when element enters viewport
   Without this CSS, elements with data-animate stay visible
   but get no animation. With it they fade/slide in cleanly.
   ============================================ */
[data-animate] {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-animate="fade-up"]    { transform: translateY(40px); }
[data-animate="fade-left"]  { transform: translateX(-40px); }
[data-animate="fade-right"] { transform: translateX(40px); }
[data-animate="fade-in"]    { transform: none; }

[data-animate].animated {
    opacity: 1 !important;
    transform: none !important;
}





.section-sm {


    padding: var(--section-padding-sm);


}





.section-dark {


    background: var(--bg-secondary);


}





.section-card {


    background: var(--bg-card);


}





.section-bordered {


    border-top: 1px solid var(--border-color);


    border-bottom: 1px solid var(--border-color);


}





/* ============================================


   ABOUT SECTION


   ============================================ */


.about-section {


    overflow: hidden;


}





.about-image-wrapper {


    position: relative;


    overflow: hidden;


    border-radius: 4px;


}





.about-image-wrapper img {


    width: 100%;


    height: 500px;


    object-fit: cover;


    transition: transform 0.8s ease;


}





.about-image-wrapper:hover img {


    transform: scale(1.05);


}





.about-experience-badge {


    position: absolute;


    bottom: 30px;


    right: -20px;


    background: var(--accent);


    color: var(--bg-primary);


    padding: 30px;


    text-align: center;


    z-index: 2;


}





.about-experience-badge .number {


    font-family: var(--font-heading);


    font-size: 3.5rem;


    font-weight: 700;


    line-height: 1;


}





.about-experience-badge .text {


    font-size: 0.75rem;


    text-transform: uppercase;


    letter-spacing: 2px;


}





.about-features {


    display: grid;


    grid-template-columns: repeat(3, 1fr);


    gap: 30px;


    margin-top: 40px;


}





.about-feature-item {


    text-align: center;


    padding: 30px 20px;


    border: 1px solid var(--border-color);


    transition: var(--transition-normal);


}





.about-feature-item:hover {


    border-color: var(--accent);


    transform: translateY(-5px);


}





.about-feature-item i {


    font-size: 2rem;


    color: var(--accent);


    margin-bottom: 15px;


}





.about-feature-item h5 {


    font-family: var(--font-heading);


    font-size: 1.1rem;


    margin-bottom: 8px;


}





.about-feature-item p {


    font-size: 0.875rem;


    color: var(--text-secondary);


    margin-bottom: 0;


}





/* ============================================


   SERVICES


   ============================================ */


.services-grid {


    display: grid;


    grid-template-columns: repeat(3, 1fr);


    gap: 30px;


}





.service-card {


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    padding: 50px 35px;


    text-align: center;


    transition: var(--transition-normal);


    position: relative;


    overflow: hidden;


}





.service-card::before {


    content: '';


    position: absolute;


    top: 0;


    left: 0;


    width: 100%;


    height: 3px;


    background: var(--accent);


    transform: scaleX(0);


    transition: var(--transition-normal);


}





.service-card:hover {


    transform: translateY(-10px);


    border-color: var(--accent);


    box-shadow: var(--shadow-lg);


}





.service-card:hover::before {


    transform: scaleX(1);


}





.service-icon {


    width: 80px;


    height: 80px;


    display: flex;


    align-items: center;


    justify-content: center;


    margin: 0 auto 25px;


    border: 2px solid var(--border-color);


    border-radius: 50%;


    transition: var(--transition-normal);


}





.service-icon i {


    font-size: 2rem;


    color: var(--accent);


    transition: var(--transition-normal);


}





.service-card:hover .service-icon {


    background: var(--accent);


    border-color: var(--accent);


}





.service-card:hover .service-icon i {


    color: var(--bg-primary);


}





.service-card h4 {


    font-family: var(--font-heading);


    font-size: 1.5rem;


    margin-bottom: 15px;


}





.service-card p {


    font-size: 0.9rem;


    color: var(--text-secondary);


    margin-bottom: 25px;


}





.service-card .learn-more {


    font-size: 0.8rem;


    text-transform: uppercase;


    letter-spacing: 2px;


    color: var(--accent);


    display: inline-flex;


    align-items: center;


    gap: 10px;


    transition: var(--transition-normal);


}





.service-card .learn-more i {


    font-size: 0.75rem;


    transition: var(--transition-normal);


}





.service-card:hover .learn-more {


    color: var(--text-primary);


}





.service-card:hover .learn-more i {


    transform: translateX(5px);


}





/* ============================================


   PROJECTS


   ============================================ */


.projects-filter {


    display: flex;


    justify-content: center;


    flex-wrap: wrap;


    gap: 15px;


    margin-bottom: 50px;


}





.filter-btn {


    font-size: 0.8rem;


    font-weight: 500;


    letter-spacing: 1px;


    text-transform: uppercase;


    padding: 10px 25px;


    background: transparent;


    border: 1px solid var(--border-color);


    color: var(--text-secondary);


    cursor: pointer;


    transition: var(--transition-normal);


}





.filter-btn:hover,


.filter-btn.active {


    background: var(--accent);


    border-color: var(--accent);


    color: var(--bg-primary);


}





.projects-grid {


    display: grid;


    grid-template-columns: repeat(3, 1fr);


    gap: 25px;


}





.project-card {


    position: relative;


    overflow: hidden;


    border-radius: 4px;


    aspect-ratio: 4/3;


    cursor: pointer;


}





.project-card img {


    width: 100%;


    height: 100%;


    object-fit: cover;


    transition: transform 0.8s ease;


}





.project-card-overlay {


    position: absolute;


    bottom: 0;


    left: 0;


    width: 100%;


    height: auto;


    background: linear-gradient(to top, rgba(13, 13, 13, 0.9) 0%, rgb(13 13 13 / 51%) 60%);


    display: flex;


    flex-direction: column;


    justify-content: flex-end;


    padding: 30px;


    opacity: 0;


    transition: var(--transition-normal);


}





.project-card:hover img {


    transform: scale(1.1);


}





.project-card:hover .project-card-overlay {


    opacity: 1;


}





.project-category {


    font-size: 0.7rem;


    text-transform: uppercase;


    letter-spacing: 2px;


    color: var(--accent-gold);


    margin-bottom: 8px;
    font-weight: 500;


}





.project-title {


    font-family: var(--font-heading);


    font-size: 1.5rem;


    color: var(--text-white);


    margin-bottom: 5px;


}





.project-location {


    font-size: 0.85rem;


    color: var(--accent-gold);


    display: flex;


    align-items: center;


    gap: 8px;


}





.project-location i {


    font-size: 0.75rem;


    color: var(--accent);


}





.project-card .view-project {


    position: absolute;


    top: 50%;


    left: 50%;


    transform: translate(-50%, -50%) scale(0);


    width: 60px;


    height: 60px;


    background: var(--accent);


    border-radius: 50%;


    display: flex;


    align-items: center;


    justify-content: center;


    transition: var(--transition-normal);


    z-index: 2;


}





.project-card .view-project i {


    color: var(--bg-primary);


    font-size: 1.2rem;


}





.project-card:hover .view-project {


    transform: translate(-50%, -50%) scale(1);


}





/* Masonry Layout */


.projects-masonry {


    columns: 3;


    column-gap: 25px;


}





.projects-masonry .project-card {


    break-inside: avoid;


    margin-bottom: 25px;


    aspect-ratio: auto;


    height: auto;


}





.projects-masonry .project-card:nth-child(odd) {


    aspect-ratio: 3/4;


}





.projects-masonry .project-card:nth-child(even) {


    aspect-ratio: 4/3;


}





/* ============================================


   QUOTE / PHILOSOPHY


   ============================================ */


.quote-section {


    padding: 150px 0;


    position: relative;


    overflow: hidden;


}





.quote-section .quote-bg {


    position: absolute;


    top: 0;


    left: 0;


    width: 100%;


    height: 100%;


    object-fit: cover;


    opacity: 0.5;
    background-color: #000;


}





.quote-content {


    position: relative;


    z-index: 2;


    max-width: 900px;


    margin: 0 auto;


    text-align: center;


}





.quote-icon {


    font-size: 4rem;


    color: var(--accent);


    margin-bottom: 30px;


    opacity: 1;


}





.quote-text {


    font-family: var(--font-heading);


    font-size: clamp(1.5rem, 3vw, 2.5rem);


    font-weight: 400;


    font-style: italic;


    line-height: 1.6;


    color: var(--text-white);


    margin-bottom: 30px;


}





.quote-author {


    font-size: 0.9rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 10px 10px;
    background: #000;


}





/* ============================================


   STATS / COUNTERS


   ============================================ */


.stats-section {


    padding: 80px 0;


    background: var(--bg-secondary);


    border-top: 1px solid var(--border-color);


    border-bottom: 1px solid var(--border-color);


}





.stats-grid {


    display: grid;


    grid-template-columns: repeat(4, 1fr);


    gap: 30px;


}





.stat-item {


    text-align: center;


    padding: 30px 20px;


}





.stat-number {


    font-family: var(--font-heading);


    font-size: 3.5rem;


    font-weight: 700;


    color: var(--accent);


    line-height: 1;


    margin-bottom: 10px;


}





.stat-label {


    font-size: 0.85rem;


    text-transform: uppercase;


    letter-spacing: 2px;


    color: var(--text-secondary);


}





/* ============================================


   PROCESS / TIMELINE


   ============================================ */


.process-timeline {


    position: relative;


    padding: 50px 0;


}





.process-timeline::before {


    content: '';


    position: absolute;


    left: 50%;


    top: 0;


    bottom: 0;


    width: 1px;


    background: var(--border-color);


    transform: translateX(-50%);


}





.process-step {


    position: relative;


    display: flex;


    align-items: center;


    margin-bottom: 60px;


}





.process-step:nth-child(even) {


    flex-direction: row-reverse;


}





.process-step-content {


    width: 45%;


    padding: 40px;


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    transition: var(--transition-normal);


}





.process-step-content:hover {


    border-color: var(--accent);


    transform: translateY(-5px);


}





.process-step-number {


    position: absolute;


    left: 50%;


    transform: translateX(-50%);


    width: 60px;


    height: 60px;


    background: var(--accent);


    border-radius: 50%;


    display: flex;


    align-items: center;


    justify-content: center;


    font-family: var(--font-heading);


    font-size: 1.5rem;


    font-weight: 700;


    color: var(--bg-primary);


    z-index: 2;


}





.process-step-content h4 {


    font-family: var(--font-heading);


    font-size: 1.5rem;


    margin-bottom: 10px;


}





.process-step-content p {


    font-size: 0.9rem;


    color: var(--text-secondary);


    margin-bottom: 0;


}





/* ============================================


   FOUNDERS


   ============================================ */


.founders-section {


    overflow: hidden;


}





.founders-grid {


    display: grid;


    grid-template-columns: repeat(2, 1fr);


    gap: 40px;


}





.founder-card {


    position: relative;


    overflow: hidden;


    border-radius: 4px;


    background: var(--bg-card);


    border: 1px solid var(--border-color);


}





.founder-image {


    position: relative;


    overflow: hidden;


    height: 450px;
    display: none;


}





.founder-image img {


    width: 100%;


    height: 100%;


    object-fit: cover;


    transition: transform 0.8s ease;


}





.founder-card:hover .founder-image img {


    transform: scale(1.05);


}





.founder-info {


    padding: 30px;


    text-align: center;


}





.founder-info h4 {


    font-family: var(--font-heading);


    font-size: 1.75rem;


    margin-bottom: 5px;


}





.founder-info .designation {


    font-size: 0.85rem;


    color: var(--accent);


    text-transform: uppercase;


    letter-spacing: 2px;


    margin-bottom: 15px;


}





.founder-info .bio {


    font-size: 0.9rem;


    color: var(--text-secondary);


}





/* ============================================


   TESTIMONIALS


   ============================================ */


.testimonial-card {


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    padding: 50px 40px;


    position: relative;


    margin: 20px;


}





.testimonial-card .quote-icon {


    font-size: 3rem;


    color: var(--accent);


    opacity: 0.3;


    margin-bottom: 20px;


}





.testimonial-text {


    font-family: var(--font-heading);


    font-size: 1.25rem;


    font-style: italic;


    line-height: 1.8;


    color: var(--text-primary);


    margin-bottom: 30px;


}





.testimonial-author {


    display: flex;


    align-items: center;


    gap: 20px;


}





.testimonial-author-image {


    width: 60px;


    height: 60px;


    border-radius: 50%;


    overflow: hidden;


    border: 2px solid var(--accent);


}





.testimonial-author-image img {


    width: 100%;


    height: 100%;


    object-fit: cover;


}





.testimonial-author-name {


    font-family: var(--font-heading);


    font-size: 1.1rem;


    color: var(--text-primary);


    margin-bottom: 3px;


}





.testimonial-author-designation {


    font-size: 0.8rem;


    color: var(--text-secondary);


}





.testimonial-rating {


    color: var(--accent);


    margin-bottom: 20px;


}





.testimonial-rating i {


    font-size: 0.9rem;


}





/* ============================================


   CTA SECTION


   ============================================ */


.cta-section {


    padding: 100px 0;


    background: var(--bg-secondary);


    position: relative;


    overflow: hidden;


}





.cta-content {


    text-align: center;


    position: relative;


    z-index: 2;


}





.cta-title {


    font-family: var(--font-heading);


    font-size: clamp(2rem, 4vw, 3.5rem);


    margin-bottom: 20px;


}





.cta-subtitle {


    font-size: 1.1rem;


    color: var(--text-secondary);


    margin-bottom: 40px;


    max-width: 600px;


    margin-left: auto;


    margin-right: auto;


}





/* ============================================


   CONTACT


   ============================================ */


.contact-section {


    overflow: hidden;


}





.contact-info-card {


    padding: 40px;


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    border-radius: 4px;


    height: 100%;


    transition: var(--transition-normal);


}





.contact-info-card:hover {


    border-color: var(--accent);


    transform: translateY(-5px);


}





.contact-info-card .icon {


    width: 60px;


    height: 60px;


    display: flex;


    align-items: center;


    justify-content: center;


    background: rgba(199, 166, 106, 0.1);


    border-radius: 50%;


    margin-bottom: 20px;


}





.contact-info-card .icon i {


    font-size: 1.25rem;


    color: var(--accent);


}





.contact-info-card h5 {


    font-family: var(--font-heading);


    font-size: 1.25rem;


    margin-bottom: 10px;


}





.contact-info-card p {


    color: var(--text-secondary);


    font-size: 0.9rem;


    margin-bottom: 0;


}





.contact-info-card a {


    color: var(--text-secondary);


}





.contact-info-card a:hover {


    color: var(--accent);


}





/* Contact Form */


.contact-form-wrapper {


    padding: 50px;


    background: var(--bg-card);


    border: 1px solid var(--border-color);


}





.form-group {


    margin-bottom: 25px;


}





.form-group label {


    display: block;


    font-size: 0.8rem;


    font-weight: 500;


    text-transform: uppercase;


    letter-spacing: 1px;


    color: var(--text-secondary);


    margin-bottom: 8px;


}





.form-control,


.form-select {


    width: 100%;


    padding: 15px 20px;


    background: var(--bg-primary);


    border: 1px solid var(--border-color);


    border-radius: 2px;


    color: var(--text-primary);


    font-family: var(--font-body);


    font-size: 0.9rem;


    transition: var(--transition-normal);


}





.form-control:focus,


.form-select:focus {


    background: var(--bg-primary);


    border-color: var(--accent);


    color: var(--text-primary);


    box-shadow: none;


    outline: none;


}





textarea.form-control {


    min-height: 150px;


    resize: vertical;


}





.form-select option {


    background: var(--bg-card);


    color: var(--text-primary);


}





/* ============================================


   BREADCRUMBS


   ============================================ */


.breadcrumb-section {


    padding: 30px 0 30px;


    background: var(--bg-secondary);


    border-bottom: 1px solid var(--border-color);


}





.breadcrumb-custom {


    list-style: none;


    display: flex;


    flex-wrap: wrap;


    gap: 10px;


    margin: 0;


    padding: 0;


}





.breadcrumb-item {


    font-size: 0.8rem;


    color: var(--text-secondary);


}





.breadcrumb-item a {


    color: var(--text-secondary);


    text-decoration: none;


}





.breadcrumb-item a:hover {


    color: var(--accent);


}





/* .breadcrumb-item::after {


    content: '/';


    margin-left: 10px;


    color: var(--text-muted);


} */





.breadcrumb-item:last-child::after {


    display: none;


}





.breadcrumb-item.active {


    color: var(--accent);


}





/* ============================================


   SOCIAL SIDEBAR


   ============================================ */


.social-sidebar {


    position: fixed;


    left: 20px;


    bottom: 50%;


    transform: translateY(50%);


    z-index: 999;


    display: flex;


    flex-direction: column;


    gap: 15px;


}





.social-sidebar-item {


    width: 40px;


    height: 40px;


    display: flex;


    align-items: center;


    justify-content: center;


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    border-radius: 50%;


    color: var(--text-secondary);


    font-size: 0.85rem;


    transition: var(--transition-normal);


    text-decoration: none;


}





.social-sidebar-item:hover {


    background: var(--accent);


    border-color: var(--accent);


    color: var(--bg-primary);


    transform: scale(1.1);


}





/* ============================================


   SCROLL TO TOP


   ============================================ */


.scroll-to-top {


    position: fixed;


    right: 20px;


    bottom: 20px;


    width: 50px;


    height: 50px;


    background: var(--accent);


    border: none;


    border-radius: 50%;


    color: var(--bg-primary);


    font-size: 1rem;


    cursor: pointer;


    z-index: 998;


    opacity: 0;


    visibility: hidden;


    transform: translateY(20px);


    transition: var(--transition-normal);


    display: flex;


    align-items: center;


    justify-content: center;


}





.scroll-to-top.visible {


    opacity: 1;


    visibility: visible;


    transform: translateY(0);


}





.scroll-to-top:hover {


    background: var(--accent-hover);


    transform: translateY(-5px);


    box-shadow: var(--shadow-accent);


}





/* ============================================


   WHATSAPP FLOAT


   ============================================ */


.whatsapp-float {


    position: fixed;


    right: 20px;


    bottom: 85px;


    width: 55px;


    height: 55px;


    background: #25D366;


    border-radius: 50%;


    display: flex;


    align-items: center;


    justify-content: center;


    color: white;


    font-size: 1.5rem;


    z-index: 998;


    box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4);


    transition: var(--transition-normal);


    text-decoration: none;


}





.whatsapp-float:hover {


    transform: scale(1.1);


    color: white;


    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.5);


}





/* ============================================


   FOOTER


   ============================================ */


.footer {


    padding: 80px 0 0;


    background: var(--bg-secondary);


    border-top: 1px solid var(--border-color);


    position: relative;


}





.footer-brand {


    display: flex;


    align-items: center;


    gap: 0;


}





.footer-brand .brand-text {


    font-size: 2rem;


}





.footer-brand .brand-divider {


    font-size: 2rem;


}





.footer-brand .brand-number {


    font-size: 2rem;


}





.footer-description {


    font-size: 0.9rem;


    color: var(--text-secondary);


    line-height: 1.8;


}





.footer-social {


    display: flex;


    gap: 12px;


}





.footer-social .social-icon {


    width: 42px;


    height: 42px;


    display: flex;


    align-items: center;


    justify-content: center;


    border: 1px solid var(--border-color);


    border-radius: 50%;


    color: var(--text-secondary);


    transition: var(--transition-normal);


}





.footer-social .social-icon:hover {


    background: var(--accent);


    border-color: var(--accent);


    color: var(--bg-primary);


}





.footer-title {


    font-family: var(--font-heading);


    font-size: 1.25rem;


    margin-bottom: 25px;


    position: relative;


    padding-bottom: 15px;


}





.footer-title::after {


    content: '';


    position: absolute;


    bottom: 0;


    left: 0;


    width: 30px;


    height: 2px;


    background: var(--accent);


}





.footer-links {


    list-style: none;


    padding: 0;


    margin: 0;


}





.footer-links li {


    margin-bottom: 12px;


}





.footer-links a {


    color: var(--text-secondary);


    font-size: 0.9rem;


    transition: var(--transition-normal);


    display: flex;


    align-items: center;


    gap: 8px;


}





.footer-links a::before {


    content: '\f105';


    font-family: 'Font Awesome 6 Free';


    font-weight: 900;


    font-size: 0.75rem;


    color: var(--accent);


    transition: var(--transition-normal);


}





.footer-links a:hover {


    color: var(--accent);


    padding-left: 5px;


}





.footer-contact {


    list-style: none;


    padding: 0;


    margin: 0;


}





.footer-contact li {


    display: flex;


    align-items: flex-start;


    gap: 15px;


    margin-bottom: 20px;


    color: var(--text-secondary);


    font-size: 0.9rem;


}





.footer-contact li i {


    color: var(--accent);


    font-size: 1rem;


    margin-top: 3px;


    width: 20px;


    text-align: center;


}





.footer-contact li a {


    color: var(--text-secondary);


}





.footer-contact li a:hover {


    color: var(--accent);


}





/* Newsletter */


.footer-newsletter {


    padding: 40px;


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    margin-bottom: 40px;


}





.newsletter-title {


    font-family: var(--font-heading);


    font-size: 1.75rem;


    margin-bottom: 5px;


}





.newsletter-subtitle {


    color: var(--text-secondary);


    font-size: 0.9rem;


    margin-bottom: 0;


}





.newsletter-form .input-group {


    border: 1px solid var(--border-color);


    border-radius: 2px;


    overflow: hidden;


    background: var(--bg-primary);


}





.newsletter-form .form-control {


    background: transparent;


    border: none;


    padding: 15px 20px;


    color: var(--text-primary);


}





.newsletter-form .form-control:focus {


    box-shadow: none;


}





.newsletter-form .btn {


    border-radius: 0;


    padding: 15px 30px;


}





/* Footer Bottom */


.footer-bottom {


    padding: 25px 0;


    border-top: 1px solid var(--border-color);


}





.copyright-text {


    font-size: 0.85rem;


    color: var(--text-secondary);


}





.copyright-text strong {


    color: var(--text-primary);


}





.footer-legal {


    list-style: none;


    display: flex;


    gap: 20px;


    margin: 0;


    padding: 0;


    justify-content: flex-end;


}





.footer-legal a {


    font-size: 0.85rem;


    color: var(--text-secondary);


}





.footer-legal a:hover {


    color: var(--accent);


}





.footer-decoration {


    position: absolute;


    top: 0;


    left: 50%;


    transform: translateX(-50%);


    width: 100px;


    height: 3px;


    background: var(--accent);


}





/* ============================================


   NOTIFICATIONS


   ============================================ */


.notification-toast {


    position: fixed;


    top: 100px;


    right: 20px;


    padding: 20px 30px;


    border-radius: 4px;


    color: white;


    font-size: 0.9rem;


    z-index: 99999;


    transform: translateX(150%);


    transition: var(--transition-normal);


    max-width: 400px;


}





.notification-toast.show {


    transform: translateX(0);


}





.notification-toast.success {


    background: #28a745;


}





.notification-toast.error {


    background: #dc3545;


}





.notification-toast.info {


    background: #17a2b8;


}





/* ============================================


   FORM MESSAGES


   ============================================ */


.form-message {


    padding: 15px 20px;


    border-radius: 4px;


    margin-bottom: 20px;


    font-size: 0.9rem;


    display: none;


}





.form-message.success {


    display: block;


    background: rgba(40, 167, 69, 0.1);


    border: 1px solid rgba(40, 167, 69, 0.3);


    color: #28a745;


}





.form-message.error {


    display: block;


    background: rgba(220, 53, 69, 0.1);


    border: 1px solid rgba(220, 53, 69, 0.3);


    color: #dc3545;


}





/* ============================================


   LIGHTBOX


   ============================================ */


.lightbox {


    position: fixed;


    top: 0;


    left: 0;


    width: 100%;


    height: 100%;


    background: rgba(0, 0, 0, 0.95);


    z-index: 10000;


    display: flex;


    align-items: center;


    justify-content: center;


    opacity: 0;


    visibility: hidden;


    transition: var(--transition-normal);


}





.lightbox.active {


    opacity: 1;


    visibility: visible;


}





.lightbox-content {


    max-width: 90%;


    max-height: 90%;


    position: relative;


}





.lightbox-content img {


    max-width: 100%;


    max-height: 90vh;


    border-radius: 4px;


}





.lightbox-close {


    position: absolute;


    top: -50px;


    right: 0;


    width: 40px;


    height: 40px;


    background: transparent;


    border: 1px solid rgba(255, 255, 255, 0.3);


    border-radius: 50%;


    color: white;


    font-size: 1rem;


    cursor: pointer;


    display: flex;


    align-items: center;


    justify-content: center;


    transition: var(--transition-normal);


}





.lightbox-close:hover {


    background: var(--accent);


    border-color: var(--accent);


}





.lightbox-nav {


    position: absolute;


    top: 50%;


    transform: translateY(-50%);


    width: 50px;


    height: 50px;


    background: transparent;


    border: 1px solid rgba(255, 255, 255, 0.3);


    border-radius: 50%;


    color: white;


    font-size: 1.2rem;


    cursor: pointer;


    display: flex;


    align-items: center;


    justify-content: center;


    transition: var(--transition-normal);


}





.lightbox-nav:hover {


    background: var(--accent);


    border-color: var(--accent);


}





.lightbox-prev {


    left: -70px;


}





.lightbox-next {


    right: -70px;


}





/* ============================================


   LOADING SPINNER


   ============================================ */


.spinner {


    width: 40px;


    height: 40px;


    border: 3px solid var(--border-color);


    border-top-color: var(--accent);


    border-radius: 50%;


    animation: spin 1s linear infinite;


}





@keyframes spin {


    to { transform: rotate(360deg); }


}





.loading-overlay {


    position: absolute;


    top: 0;


    left: 0;


    width: 100%;


    height: 100%;


    background: rgba(13, 13, 13, 0.8);


    display: flex;


    align-items: center;


    justify-content: center;


    z-index: 100;


}





/* ============================================


   PAGINATION


   ============================================ */


.pagination-wrapper {


    margin-top: 50px;


    display: flex;


    justify-content: center;


}





.pagination {


    display: flex;


    gap: 5px;


}





.pagination .page-link {


    padding: 12px 18px;


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    color: var(--text-secondary);


    font-size: 0.85rem;


    transition: var(--transition-normal);


}





.pagination .page-link:hover {


    background: var(--accent);


    border-color: var(--accent);


    color: var(--bg-primary);


}





.pagination .page-item.active .page-link {


    background: var(--accent);


    border-color: var(--accent);


    color: var(--bg-primary);


}





/* ============================================


   LOAD MORE BUTTON


   ============================================ */


.load-more-wrapper {


    text-align: center;


    margin-top: 50px;


}





/* ============================================


   SINGLE PROJECT PAGE


   ============================================ */


.project-hero {


    height: 70vh;


    min-height: 500px;


    position: relative;


    overflow: hidden;


}





.project-hero img {


    width: 100%;


    height: 100%;


    object-fit: cover;


}





.project-hero-overlay {


    position: absolute;


    bottom: 0;


    left: 0;


    width: 100%;


    padding: 80px 0;


    background: linear-gradient(to top, rgba(13, 13, 13, 1) 0%, #0000001a 100%);


}

.project-hero-overlay .display-3{
    color: var(--text-white);
}





.project-details-grid {


    display: grid;


    grid-template-columns: repeat(4, 1fr);


    gap: 30px;


    padding: 40px 0;


    border-bottom: 1px solid var(--border-color);


}





.project-detail-item label {


    display: block;


    font-size: 0.75rem;


    text-transform: uppercase;


    letter-spacing: 2px;


    color: var(--text-muted);


    margin-bottom: 8px;


}





.project-detail-item span {


    font-size: 1rem;


    color: var(--text-primary);


}





.project-gallery-grid {


    display: grid;


    grid-template-columns: repeat(2, 1fr);


    gap: 25px;


    margin-top: 60px;


}





.project-gallery-grid .gallery-item {


    overflow: hidden;


    border-radius: 4px;


    cursor: pointer;


    position: relative;


}





.project-gallery-grid .gallery-item img {


    width: 100%;


    height: 350px;


    object-fit: cover;


    transition: transform 0.8s ease;


}





.project-gallery-grid .gallery-item:hover img {


    transform: scale(1.05);


}





.next-project-section {


    padding: 100px 0;


    background: var(--bg-secondary);


    text-align: center;


    border-top: 1px solid var(--border-color);


}





/* ============================================


   SERVICES DETAIL


   ============================================ */


.service-hero {


    height: 60vh;


    min-height: 400px;


    position: relative;


    display: flex;


    align-items: center;


}





.service-hero-overlay {


    position: absolute;


    inset: 0;


    background: linear-gradient(135deg, rgba(13, 13, 13, 0.9), rgba(13, 13, 13, 0.6));


}





.service-hero-content {


    position: relative;


    z-index: 2;


}





.service-detail-section {


    padding: 80px 0;


}





.service-detail-card {


    padding: 50px;


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    border-radius: 4px;


    margin-bottom: 40px;


}





.service-detail-card h3 {


    font-family: var(--font-heading);


    margin-bottom: 20px;


}





.benefits-list {


    list-style: none;


    padding: 0;


}





.benefits-list li {


    padding: 12px 0;


    border-bottom: 1px solid var(--border-color);


    display: flex;


    align-items: center;


    gap: 15px;


    color: var(--text-secondary);


}





.benefits-list li i {


    color: var(--accent);


}





.service-gallery {


    display: grid;


    grid-template-columns: repeat(3, 1fr);


    gap: 20px;


}





.service-gallery .gallery-item {


    overflow: hidden;


    border-radius: 4px;


}





.service-gallery .gallery-item img {


    width: 100%;


    height: 250px;


    object-fit: cover;


    transition: transform 0.5s ease;


}





.service-gallery .gallery-item:hover img {


    transform: scale(1.05);


}





/* ============================================


   FAQ SECTION


   ============================================ */


.faq-section {


    padding: 80px 0;


}





.faq-item {


    border-bottom: 1px solid var(--border-color);


}





.faq-question {


    width: 100%;


    padding: 25px 0;


    background: transparent;


    border: none;


    color: var(--text-primary);


    font-family: var(--font-body);


    font-size: 1rem;


    font-weight: 400;


    text-align: left;


    cursor: pointer;


    display: flex;


    align-items: center;


    justify-content: space-between;


    gap: 20px;


    transition: var(--transition-normal);


}





.faq-question:hover {


    color: var(--accent);


}





.faq-question .icon {


    font-size: 1rem;


    color: var(--accent);


    transition: var(--transition-normal);


}





.faq-item.active .faq-question .icon {


    transform: rotate(180deg);


}





.faq-answer {


    max-height: 0;


    overflow: hidden;


    transition: max-height 0.3s ease;


}





.faq-answer-content {


    padding: 0 0 25px;


    color: var(--text-secondary);


    line-height: 1.8;


}





/* ============================================


   MAP


   ============================================ */


.map-section {


    height: 400px;


    border-top: 1px solid var(--border-color);


    border-bottom: 1px solid var(--border-color);


}





.map-section iframe {


    width: 100%;


    height: 100%;


    border: none;


    filter: grayscale(100%) invert(92%) contrast(0.83);


}





/* ============================================


   WHY US SECTION


   ============================================ */


.why-us-card {


    padding: 40px;


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    border-radius: 4px;


    text-align: center;


    transition: var(--transition-normal);


    height: 100%;


}





.why-us-card:hover {


    border-color: var(--accent);


    transform: translateY(-10px);


    box-shadow: var(--shadow-lg);


}





.why-us-icon {


    width: 80px;


    height: 80px;


    margin: 0 auto 25px;


    display: flex;


    align-items: center;


    justify-content: center;


    background: rgba(199, 166, 106, 0.1);


    border-radius: 50%;


    transition: var(--transition-normal);


}





.why-us-icon i {


    font-size: 2rem;


    color: var(--accent);


}





.why-us-card:hover .why-us-icon {


    background: var(--accent);


}





.why-us-card:hover .why-us-icon i {


    color: var(--bg-primary);


}





.why-us-card h4 {


    font-family: var(--font-heading);


    font-size: 1.4rem;


    margin-bottom: 15px;


}





.why-us-card p {


    font-size: 0.9rem;


    color: var(--text-secondary);


    margin-bottom: 0;


}





/* ============================================


   DESIGN PROCESS STEP


   ============================================ */


.process-steps-horizontal {


    display: grid;


    grid-template-columns: repeat(7, 1fr);


    gap: 20px;


    padding: 60px 0;


}





.process-step-card {


    text-align: center;


    padding: 30px 15px;


    position: relative;


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    border-radius: 4px;


    transition: var(--transition-normal);


}





.process-step-card:hover {


    border-color: var(--accent);


    transform: translateY(-5px);


}





.process-step-card .step-number {


    font-family: var(--font-heading);


    font-size: 2.5rem;


    font-weight: 700;


    color: var(--accent);


    opacity: 0.5;


    margin-bottom: 15px;


}





.process-step-card h5 {


    font-family: var(--font-heading);


    font-size: 1.1rem;


    margin-bottom: 10px;


}





.process-step-card p {


    font-size: 0.8rem;


    color: var(--text-secondary);


    margin-bottom: 0;


}





/* ============================================


   SEARCH SECTION


   ============================================ */


.search-section {


    padding: 150px 0 80px;


    background: var(--bg-secondary);


}





.search-form-large .input-group {


    border: 1px solid var(--border-color);


    border-radius: 4px;


    overflow: hidden;


    background: var(--bg-card);


}





.search-form-large .form-control {


    background: transparent;


    border: none;


    padding: 20px 25px;


    font-size: 1rem;


    color: var(--text-primary);


}





.search-form-large .form-control:focus {


    box-shadow: none;


}





.search-form-large .btn {


    padding: 20px 40px;


}





/* ============================================


   PAGE HERO (Inner Pages)


   ============================================ */


.page-hero {


    padding: 180px 0 80px;


    background: var(--bg-secondary);


    text-align: center;


    position: relative;


    overflow: hidden;


}





.page-hero::before {


    content: '';


    position: absolute;


    top: 0;


    left: 0;


    width: 100%;


    height: 100%;


    background: radial-gradient(circle at 50% 50%, rgba(199, 166, 106, 0.05) 0%, transparent 70%);


}





.page-hero h1 {


    margin-bottom: 15px;


    position: relative;


}





.page-hero p {


    font-size: 1.1rem;


    color: var(--text-secondary);


    max-width: 600px;


    margin: 0 auto;


    position: relative;


}





/* ============================================


   UTILITY CLASSES


   ============================================ */


.overflow-hidden {


    overflow: hidden;


}





.relative {


    position: relative;


}





.accent-line {


    width: 50px;


    height: 2px;


    background: var(--accent);


    margin-bottom: 20px;


}





.accent-line-center {


    width: 50px;


    height: 2px;


    background: var(--accent);


    margin: 0 auto 20px;


}





.gsap-reveal {


    opacity: 0;


    transform: translateY(50px);


}





.gsap-reveal-left {


    opacity: 0;


    transform: translateX(-50px);


}





.gsap-reveal-right {


    opacity: 0;


    transform: translateX(50px);


}





.gsap-reveal-scale {


    opacity: 0;


    transform: scale(0.9);


}





/* ============================================


   TEAM SECTION


   ============================================ */


.team-grid {


    display: grid;


    grid-template-columns: repeat(4, 1fr);


    gap: 30px;


}





.team-card {


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    border-radius: 4px;


    overflow: hidden;


    transition: var(--transition-normal);


}





.team-card:hover {


    border-color: var(--accent);


    transform: translateY(-10px);


}





.team-card-image {


    position: relative;


    overflow: hidden;


    height: 300px;


}





.team-card-image img {


    width: 100%;


    height: 100%;


    object-fit: cover;


    transition: transform 0.8s ease;


}





.team-card:hover .team-card-image img {


    transform: scale(1.05);


}





.team-card-social {


    position: absolute;


    bottom: 0;


    left: 0;


    width: 100%;


    padding: 15px;


    background: linear-gradient(to top, rgba(13, 13, 13, 0.9), transparent);


    display: flex;


    gap: 10px;


    transform: translateY(100%);


    transition: var(--transition-normal);


}





.team-card:hover .team-card-social {


    transform: translateY(0);


}





.team-card-social a {


    width: 35px;


    height: 35px;


    display: flex;


    align-items: center;


    justify-content: center;


    background: var(--accent);


    border-radius: 50%;


    color: var(--bg-primary);


    font-size: 0.8rem;


    text-decoration: none;


}





.team-card-info {


    padding: 20px;


    text-align: center;


}





.team-card-info h5 {


    font-family: var(--font-heading);


    font-size: 1.25rem;


    margin-bottom: 5px;


}





.team-card-info .designation {


    font-size: 0.8rem;


    color: var(--accent);


    text-transform: uppercase;


    letter-spacing: 1px;


}





/* ============================================


   HORIZONTAL SCROLL SECTION


   ============================================ */


.horizontal-scroll-section {


    overflow: hidden;


    padding: 100px 0;


}





.horizontal-scroll-wrapper {


    display: flex;


    gap: 30px;


    width: max-content;


}





.horizontal-scroll-card {


    width: 400px;


    flex-shrink: 0;


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    border-radius: 4px;


    overflow: hidden;


    transition: var(--transition-normal);


}





.horizontal-scroll-card:hover {


    border-color: var(--accent);


}





.horizontal-scroll-card img {


    width: 100%;


    height: 300px;


    object-fit: cover;


}





.horizontal-scroll-card-content {


    padding: 30px;


}





.horizontal-scroll-card-content h4 {


    font-family: var(--font-heading);


    font-size: 1.4rem;


    margin-bottom: 10px;


}





.horizontal-scroll-card-content p {


    font-size: 0.9rem;


    color: var(--text-secondary);


}



/* ============================================

   TEAM — TEXT-ONLY CARDS (no photos)

   Photos can be re-added in future by restoring

   .team-card-image block and switching to .team-grid

   ============================================ */

.team-text-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 30px;

}



@media (max-width: 991px) {

    .team-text-grid { grid-template-columns: 1fr; }

}



.team-text-card {

    background: var(--bg-card);

    border: 1px solid var(--border-color);

    border-radius: 4px;

    padding: 35px 30px;

    display: flex;

    gap: 24px;

    align-items: flex-start;

    transition: border-color var(--transition-normal), transform var(--transition-normal);

}



.team-text-card:hover {

    border-color: var(--accent);

    transform: translateY(-4px);

}



.principal-card {

    border-left: 3px solid var(--accent);

}



.team-text-initials {

    flex-shrink: 0;

    width: 58px;

    height: 58px;

    border-radius: 50%;

    background: rgba(199, 166, 106, 0.12);

    border: 1px solid var(--accent);

    color: var(--accent);

    font-family: var(--font-heading);

    font-size: 1rem;

    font-weight: 600;

    display: flex;

    align-items: center;

    justify-content: center;

    letter-spacing: 0.5px;

}



.team-text-body { flex: 1; min-width: 0; }



.team-text-body h5 {

    font-family: var(--font-heading);

    font-size: 1.3rem;

    margin-bottom: 4px;

    color: var(--text-primary);

}



.team-text-body .designation {

    font-size: 0.75rem;

    color: var(--accent);

    text-transform: uppercase;

    letter-spacing: 1.5px;

    margin-bottom: 12px;

}



.team-text-desc {

    font-size: 0.9rem;

    color: var(--text-secondary);

    line-height: 1.7;

    margin-bottom: 14px;

}



.team-text-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

}



.team-text-meta span {

    font-size: 0.78rem;

    color: var(--text-secondary);

    display: flex;

    align-items: center;

    gap: 4px;

}



.team-text-meta i {

    color: var(--accent);

    font-size: 0.75rem;

}

* ============================================
   POLICY PAGES (Privacy Policy, Terms & Conditions)
   ============================================ */
.policy-intro {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.85;
    border-left: 3px solid var(--accent);
    padding-left: 20px;
}
 
.policy-section {}
 
.policy-heading {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
 
.policy-subheading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 18px 0 8px;
}
 
.policy-section p {
    color: var(--text-secondary);
    line-height: 1.85;
    margin-bottom: 12px;
}
 
.policy-list {
    color: var(--text-secondary);
    line-height: 1.85;
    padding-left: 20px;
    margin-bottom: 14px;
}
 
.policy-list li {
    margin-bottom: 6px;
}
 
.policy-contact-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 35px 40px;
}
 
.policy-contact-details {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
}
 
.policy-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}
 
.policy-contact-item i {
    color: var(--accent);
    font-size: 0.9rem;
    margin-top: 3px;
    width: 16px;
    flex-shrink: 0;
}
 
.policy-contact-item a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-normal);
}
 
.policy-contact-item a:hover {
    color: var(--accent);
}
 
.page-hero-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-top: 8px;
}