/* ==============================
   CSS VARIABLES (THEME COLORS)
================================ */
:root {
  --primary-blue: #272757;
  --primary-blue-light: #e6e8f5;
  --bg-about: #f4f5fb;
  --bg-services: #e6e8f5;
  --bg-portfolio: #d6daf0;
  --bg-team: #c4c9e8;
  --bg-contact: #eef0fa;
  --white: #ffffff;
  --text-dark: #1e1e2f;
  --shadow-blue: rgba(39, 39, 87, 0.15);
  --shadow-blue-strong: rgba(39, 39, 87, 0.25);
  --accent-yellow: #fbbf24;
}

/* Apply theme classes */
.bg-about { background-color: var(--bg-about); }
.bg-services { background-color: var(--bg-services); }
.bg-portfolio { background-color: var(--bg-portfolio); }
.bg-team { background-color: var(--bg-team); }
.bg-contact { background-color: var(--bg-contact); }

/* Accent element */
.accent-line {
  width: 60px;
  height: 4px;
  background-color: var(--accent-yellow);
  margin: 10px auto;
  border: none;
}

/* ==============================
   SCROLL SNAP
================================ */
html {
  scroll-snap-type: y mandatory;
}

.section {
  scroll-snap-align: start;
}

/* ==============================
   GENERAL
================================ 
body {
  font-family: 'Roboto', sans-serif;
  scroll-behavior: smooth;
  color: var(--text-dark);
  margin: 0;
  padding: 0;
  background-color: var(--white);
}
*/
body {
    font-family: 'Inter', sans-serif; /* Clean, modern body text */
    font-size: 16px;
    line-height: 1.7;
    color: #e0e0e0; /* Softer white for dark backgrounds */
}

h1, h2, h3, h4, .navbar-brand {
    font-family: 'Montserrat', sans-serif; /* Bold, high-end headings */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Enhancing the headings for the dark theme */
.section-title-white {
    font-weight: 800;
    margin-bottom: 20px;
}

/* Utility Colors */
.bg-blue {
  background-color: var(--primary-blue);
}

.text-blue {
  color: var(--primary-blue);
}

/* ==============================
   SECTIONS
================================ */

/* ==============================
   SECTION BASE
================================ */
.section {
    min-height: 100vh;
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ==============================
   SECTION HEADER (Unified)
================================ */
.section-header {
    margin-bottom: 3rem;
    text-align: center;
}

.section-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--primary-blue);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.section-title-white {
    font-size: 2.8rem;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.section-title-white:hover {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}

.header-accent {
    width: 70px;
    height: 5px;
    background: linear-gradient(90deg, #5eafff, #c48eff);
    margin: 0 auto 20px auto;
    border-radius: 4px;
}

.section-subtitle-white {
    font-size: 1.2rem;
    color: #a0a0c0;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}


/* Glassmorphism Styles */
.glass-box {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 30px;
    transition: all 0.3s ease;
    color: #ffffff;
}

.glass-box:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-10px);
}

.glass-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    background: linear-gradient(45deg, #00d2ff, #3a7bd5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* Ensure the 5-column grid forces equal distribution */
@media (min-width: 992px) {
    .service-grid-5 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* Improve text readability inside the tiles */
.service-box-dark p {
    font-size: 0.85rem;
    color: #d7d9ff;
    margin: 0;
    line-height: 1.4; /* Added for better text spacing */
}

/* Reset the link to act as a proper layout wrapper */
.service-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

/* Remove hover underlines or weird outline behaviors */
.service-link:focus, 
.service-link:active {
    outline: none;
}


/* ==============================
   SERVICES SECTION
================================ */
.services-section {
    background: linear-gradient(135deg, #1f1f45, #272757);
    padding: 100px 0;
    overflow: hidden;
}

/* ==============================
   THE SEPARATE TILE STYLE
================================ */
.service-box-dark {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 30px;
    
    /* Box Shape & Layout */
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    
    /* Removed margin: 15px; to prevent overlapping */
    
    /* Depth & Shadow */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.service-box-dark:hover {
    transform: translateY(-15px) scale(1.05);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.2);
}

/* ==============================
   CONTENT ELEMENTS
================================ */
.service-box-dark i {
    font-size: 3rem;
    margin-bottom: 20px;
}

.service-box-dark h5 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.service-box-dark p {
    font-size: 0.9rem;
    color: #d7d9ff;
    margin: 0;
}

/* ==============================
   ACCENT COLORS
================================ */
.design i { color: #ff5e5e; }
.uiux i { color: #5effc4; }
.dev i { color: #5eafff; }
.market i { color: #ffdb5e; }
.seo i { color: #c48eff; }


/* +++++++++++++++++++++++ */
/* service.html css */

/* Custom Indigo Palette */
:root {
  --primary-blue: #0f0f2d;
  --accent-gold: #fbbf24;
}

body { font-family: 'Inter', sans-serif; background-color: #f8f9fa; }

/* Header with Accent */
.section-header-gold {
    text-align: center;
    padding: 80px 0;
}
.header-accent {
    width: 60px;
    height: 4px;
    background: var(--accent-gold);
    margin: 15px auto;
}

/* Service Card Design */
.service-card {
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.service-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-gold);
}

.icon-box { 
    font-size: 3rem; 
    color: var(--primary-blue); 
    margin-bottom: 25px; 
}



:root {
    --primary-indigo: #0f0f2d;
    --accent-gold: #fbbf24;
    --bg-light: #f8f9fa;
    --text-dark: #333;
}

body {
    background-color: var(--bg-light);
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
}

/* Navbar */
.navbar {
    background-color: var(--primary-indigo) !important;
}

/* Section Header */
.header-accent {
    width: 60px;
    height: 4px;
    background: var(--accent-gold);
    margin: 15px auto;
}

/* Service Card Component */
.service-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 16px;
    border: 2px solid #eef2f7; /* Subtle border */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
}

.service-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-gold);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.icon-box {
    font-size: 3rem;
    color: var(--primary-indigo);
    margin-bottom: 25px;
    transition: color 0.3s ease;
}

.service-card:hover .icon-box {
    color: var(--accent-gold);
}

.service-card h5 {
    font-weight: 700;
    color: var(--primary-indigo);
    margin-bottom: 15px;
}


/* ==============================
   TEAM SECTION - PREMIUM STYLE
================================ */
.team-section {
    background: linear-gradient(135deg, #1f1f45, #272757);
    padding: 100px 0;
}

.team-card-dark {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px 20px;
    color: #ffffff;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    
    /* Perfect Center Alignment */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Ensure the image block doesn't force a left-align */
.team-card-dark img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
    transition: border-color 0.4s ease;
    display: block; /* Removes baseline spacing */
}

.team-card-dark h5 {
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 1.2rem;
}

.team-card-dark span {
    font-size: 0.9rem;
    color: #fbbf24; /* Gold accent */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}

/* Hover States */
.team-card-dark:hover {
    transform: translateY(-15px);
    background: rgba(255, 255, 255, 0.1);
    border-color: #fbbf24;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.team-card-dark:hover img {
    border-color: #fbbf24;
}

/* Section Backgrounds */
/* Hero Content Wrapper */
.hero-content {
  /* background: #272757; */
  padding: 40px;
  border-radius: 18px;
}

/* Hero Title */
.hero-title {
  color: #272757;
  font-weight: 700;
 /* text-transform: uppercase; */
  line-height: 1.3;
}

/* Hero Subtitle */
.hero-subtitle {
  color: #272757;
  margin-top: 12px;
  font-size: 1.05rem;
}

/* Dark Button */
.btn-dark-custom {
  background-color: #272757;
  color: #ffffff;
  border: none;
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* Button Hover */
.btn-dark-custom:hover {
  background-color: var(--white);
  color: var(--primary-blue);
  border : 2px solid var(--primary-blue);
  transform: translateY(-2px);
}


#about {
  background-color: var(--bg-about);
}

#services {
  background-color: var(--bg-services);
}

#portfolio {
  background-color: var(--bg-portfolio);
}

#team {
  background-color: var(--bg-team);
}

#contact {
  background-color: var(--bg-contact);
}

/* ==============================
   HERO
================================ */
.hero-img {
  width: 100%;
  max-width: 450px;
  height: auto;
}

/* ==============================
   BOX / CONTAINER
================================ */
.box {
  background: var(--white);
  padding: 40px;
  border-radius: 15px;
  border: 2px solid var(--primary-blue);
  box-shadow: 0 10px 30px var(--shadow-blue);
  width: 100%;
  max-width: 900px;
}

/* ==============================
   NAVBAR
================================ */

/* Custom class for the blue background if not already defined */


.navbar-brand img {
    /* Smooth transition for hover effects */
    transition: transform 0.3s ease;
}

.navbar-brand:hover img {
    transform: scale(1.08);
}

/* Ensure nav-links stay vertically centered with the taller logo */
.navbar-nav .nav-link {
    line-height: 60px; /* Matches the height of the logo image */
    padding-top: 0;
    padding-bottom: 0;
}

.navbar {
  padding: 1rem 2rem;
}

.navbar .nav-link {
  transition: color 0.3s ease;
}

.navbar .nav-link:hover {
  color: var(--accent-yellow) !important;
}



.architectural-card {
    background: var(--white);
    padding: 30px;
    border: 2px solid var(--primary-blue);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers items horizontally */
    justify-content: center; /* Centers items vertically */
    text-align: center;
    transition: all 0.3s ease;
}

/* Specific fix for the left-side cards to keep them left-aligned */
.left-card {
    align-items: flex-start;
    text-align: left;
}

.architectural-card:hover {
    background: var(--primary-blue-light);
    border-color: var(--accent-yellow); /* Accent change on hover */
}

/* About Section */
.about-section {
  background-color: #f4f5fb;
}

/* About content box */
.about-box {
    background: #ffffff;
    padding: 30px; /* Reduced slightly to save horizontal room */
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(39, 39, 87, 0.12);
  

    /* The Gradient Border Trick */
    border: 3px solid transparent; /* Required for the background-origin */
    background-image: linear-gradient(white, white), 
                      linear-gradient(135deg, #272757, #6a11cb, #2575fc);
    background-origin: border-box;
    background-clip: padding-box, border-box;


    box-sizing: border-box; /* ADDED */
    width: 100%;            /* Ensure it stays responsive */
}
/* Stats */

.about-stat {
    background: var(--primary-blue);
    color: #ffffff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(39, 39, 87, 0.25);
    transition: transform 0.3s ease;
    position: relative;
    box-sizing: border-box;
    margin-bottom: 20px;
    overflow: hidden;
    min-height: 140px;
    height: 140px;        /* ADD - forces equal height */
    display: flex;        /* ADD */
    flex-direction: column; /* ADD */
    justify-content: flex-start; /* ADD */
}

.stat-anim-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 30px;
    z-index: 0;        /* Behind text */
    transform: scale(1.8);
    transform-origin: bottom right;
    transition: transform 0.4s ease-in-out;
    pointer-events: none;
    opacity: 0.25;     /* Subtle background icon */
}

.about-stat:hover .stat-anim-icon {
    transform: scale(2.2);
    transition: transform 0.3s ease;
}

.about-stat:hover {
    transform: translateY(-6px);
}

.about-stat h3 {
    font-size: 2rem;
    font-weight: 700;
    position: relative;
    z-index: 1;        /* Above icon */
}

.about-stat p {
    font-size: 0.9rem;
    opacity: 0.9;
    position: relative;
    z-index: 1;        /* Above icon */
}

.info-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    
    /* The Gradient Left Border Trick */
    border-left: 6px solid transparent; /* Width of the stripe */
    border-image: linear-gradient(to bottom, #272757, #6a11cb, #2575fc) 1;
    border-image-slice: 1; /* Ensures the gradient stretches the full height */
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
   
}

/* Optional: Add hover effect to make the gradient "pop" */
.info-card:hover {
    transform: translateX(5px);
    box-shadow: 5px 0 15px rgba(0,0,0,0.1);
}

.info-card i {
    font-size: 24px;
    color: var(--primary-blue);
    display: block;
}
.info-card p {
    font-size: 0.9rem;
    margin: 0;
}

.accent-line {
    width: 100%;
    border: solid var(--primary-blue);
    margin: 10px 0;
}


/* ==============================
   SERVICE & TEAM CARDS
================================ */

/* Base Card Styling */
.service-box-dark {
    background: #1a1a3a;
    padding: 40px 25px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #ffffff;
}

/* Icon Styling */
.service-box-dark i {
    font-size: 3rem;
    margin-bottom: 25px;
    transition: all 0.4s ease;
}

.service-box-dark h5 {
    font-size: 1.25rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.service-box-dark p {
    font-size: 0.95rem;
    color: #b0b0d0;
    line-height: 1.5;
}

/* Interactive Hover States */
.service-box-dark:hover {
    transform: translateY(-15px) scale(1.03);
    box-shadow: 0 25px 40px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Specific Accent Colors per Service */
.design i { color: #ff5e5e; }
.uiux i { color: #5effc4; }
.dev i { color: #5eafff; }
.market i { color: #ffdb5e; }
.seo i { color: #c48eff; }

.service-box-dark:hover i {
    transform: scale(1.15) rotate(-5deg);
    filter: drop-shadow(0 0 10px currentColor); /* Adds the "glow" effect */
}


/* ==============================
   PORTFOLIO - REFINED
================================ */

.portfolio-section {
  background-color: #f4f5fb;
  padding: 80px 0;
}

.portfolio-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(39, 39, 87, 0.15);
  cursor: pointer;
  height: 100%;
  /* Added border for architectural feel */
  border: 2px solid transparent; 
  transition: all 0.4s ease;
}

.portfolio-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 15, 45, 0.2), rgba(15, 15, 45, 0.95));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 25px;
  opacity: 0;
  transition: opacity 0.35s ease;
  color: #ffffff;
}

/* Gold Accent on Hover */
.portfolio-card:hover {
  border-color: var(--accent-gold, #fbbf24);
  transform: translateY(-5px);
}

.portfolio-card:hover img {
  transform: scale(1.1);
}

.portfolio-card:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-overlay h5 {
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--accent-gold, #fbbf24); /* Using gold for the title */
}

.portfolio-overlay span {
  font-size: 0.85rem;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Contact Form Styling */
.form-control {
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #ffffff;
}

.form-control:focus {
    border-color: #fbbf24; /* Gold highlight on focus */
    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.25);
}

/* Button hover effect */
.btn:hover {
    background-color: #fbbf24 !important;
    color: #0f0f2d !important;
    transition: all 0.3s ease;
}

/* ==============================
   FOOTER
================================ */
footer {
  font-size: 0.9rem;
  background-color: var(--white);
}

/* ==============================
   RESPONSIVE (MOBILE)
================================ */
@media (max-width: 768px) {
  .hero-img {
    margin-top: 30px;
  }

  .box {
    padding: 25px;
  }

  .section {
    padding: 60px 0;
  }
}


/* Ensure 5-column layout for desktop */
@media (min-width: 992px) {
    .col-lg-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}



.icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.icon-wrapper i {
    font-size: 7rem;
    color: var(--primary-blue);
    animation: floatIcon 3s infinite ease-in-out;
}

.bg-blue .icon-wrapper i {
    color: var(--accent-yellow) !important;
}

@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-25px); }
}

/* Styling for the highlighted 'Services' link */
.navbar .nav-link.active {
    color: var(--accent-yellow) !important; /* Your Gold Accent */
    border-bottom: 2px solid var(--accent-yellow);
    font-weight: 700;
}

/* Optional: Subtle transition for hover effect */
.navbar .nav-link {
    transition: all 0.3s ease-in-out;
}

.nav-link:hover {
    color: var(--accent-yellow) !important;
}