@font-face {
    font-family: PTSerif;
    src: url("../fonts/PTSerif-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Robo;
    src: url("../fonts/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf") format("truetype");
}

@font-face {
    font-family: LatoBlack;
    src: url("../fonts/Lato-Black.ttf") format("truetype");
}

@font-face {
    font-family: LatoBold;
    src: url("../fonts/Lato-Bold.ttf") format("truetype");
}

@font-face {
    font-family: LatoRegular;
    src: url("../fonts/Lato-Regular.ttf") format("truetype");
}

:root {
    /* Professional Dark Theme Colors */
    --color-primary: #2563EB;
    --color-primary-dark: #1D4ED8;
    --color-primary-light: #3B82F6;
    --color-secondary: #059669;
    --color-secondary-dark: #047857;
    --color-accent: #7C2D12;
    --color-accent-dark: #991B1B;
    --color-accent-light: #DC2626;
    
    /* Dark Theme Neutrals */
    --color-neutral-dark: #0F172A;
    --color-neutral-gray: #64748B;
    --color-neutral-light: #94A3B8;
    --color-neutral-lighter: #CBD5E1;
    
    /* Dark Theme Backgrounds */
    --color-background: #0A0A0A;
    --color-background-alt: #111111;
    --color-background-dark: #1A1A1A;
    --color-background-darker: #0D0D0D;
    --color-surface: #1A1A1A;
    --color-surface-light: #262626;
    --color-navbar-bg: rgba(10, 10, 10, 0.95);
    --color-footer-bg: #000000;
    
    /* Dark Theme Text */
    --color-text: #FFFFFF;
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #E2E8F0;
    --color-text-tertiary: #94A3B8;
    --color-text-accent: #00D4FF;
    --color-highlight: #33DDFF;
    --color-muted: #374151;
    --color-border: #374151;
    --color-border-light: #4B5563;
    
    /* Dark Theme Shadows */
    --color-shadow: rgba(0, 0, 0, 0.3);
    --color-shadow-light: rgba(0, 0, 0, 0.1);
    --color-shadow-dark: rgba(0, 0, 0, 0.5);

    /* Professional Gradients */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary-light) 100%);
    --gradient-hero: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 50%, #0F172A 100%);
    --gradient-card: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-light) 100%);
    --gradient-dark: linear-gradient(135deg, #000000 0%, #1A1A1A 100%);
    --gradient-professional: linear-gradient(135deg, #2563EB 0%, #059669 50%, #7C2D12 100%);

    /* Professional Button Colors */
    --button-primary-bg: var(--color-primary);
    --button-primary-hover: var(--color-primary-dark);
    --button-primary-active: #1E40AF;
    --button-primary-text: #FFFFFF;
    --button-primary-shadow: rgba(37, 99, 235, 0.3);

    --button-secondary-bg: var(--color-secondary);
    --button-secondary-hover: var(--color-secondary-dark);
    --button-secondary-active: #065F46;
    --button-secondary-text: #FFFFFF;
    --button-secondary-shadow: rgba(5, 150, 105, 0.3);

    --button-accent-bg: var(--color-accent);
    --button-accent-hover: var(--color-accent-dark);
    --button-accent-active: #7F1D1D;
    --button-accent-text: #FFFFFF;
    --button-accent-shadow: rgba(124, 45, 18, 0.3);

    --button-ghost-bg: transparent;
    --button-ghost-hover: rgba(37, 99, 235, 0.1);
    --button-ghost-active: rgba(37, 99, 235, 0.2);
    --button-ghost-text: var(--color-primary);
    --button-ghost-border: var(--color-primary);

    /* Dark Theme Input Colors */
    --input-bg: var(--color-surface);
    --input-text: var(--color-text-primary);
    --input-border: var(--color-border);
    --input-focus: var(--color-primary);
    --input-focus-shadow: rgba(0, 212, 255, 0.2);

    /* Dark Theme Card Colors */
    --card-bg: var(--color-surface);
    --card-shadow: rgba(0, 0, 0, 0.3);
    --card-hover-shadow: rgba(0, 0, 0, 0.5);

    --link-color: var(--color-primary);
    --link-hover: var(--color-primary-dark);

    --success-bg: #C6F6D5;
    --success-text: #276749;

    --error-bg: #FED7D7;
    --error-text: #C53030;

    --warning-bg: #FEFCBF;
    --warning-text: #D69E2E;

    --info-bg: #BEE3F8;
    --info-text: #3182CE;

    --disabled-bg: #EDF2F7;
    --disabled-text: #A0AEC0;

    --global-padding-x: 6rem;
    --global-padding-y: 4rem;

    --border-radius-sm: 4px;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;

    --transition-fast: 0.15s ease;
    --transition: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* MAIN STUFF */

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

body {
    line-height: 1.5;
    font-size: 16px;
    font-weight: 400;

    background: var(--color-background);
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(0, 212, 255, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(124, 58, 237, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(255, 107, 53, 0.03) 0%, transparent 50%);
    color: var(--color-text-primary);

    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    min-height: 100vh;
    min-height: 100dvh;
}

h1 {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--color-text-primary);
}

h2 {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1.25rem;
    color: var(--color-text-primary);
}

h3 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 1rem;
    color: var(--color-text-primary);
}

h4 { font-size: 1.25rem;  font-weight: 600; margin-bottom: 0.75rem; }
h5 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; }
h6 { font-size: 1rem;     font-weight: 600; margin-bottom: 0.5rem; }

h1, h2, h3, h4, h5, h6, a {
    font-family: LatoBold;
}

p {
    font-family: LatoRegular;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    color: var(--color-text-secondary);
    font-weight: 400;
}

input, textarea {
    border: 1px solid var(--color-text-secondary);
    border-radius: 0px;
    font-family: Robo;
    font-size: 1rem;
    padding: 0.25rem;
}

input::focus-visible, textarea::focus-visible {
    border-radius: 1px;
}

/* MAIN STUFF 2 */

.container,
.footer__container {
    padding: var(--global-padding-y) var(--global-padding-x);
}

.divider-vertical {
    border-left: 1px solid rgba(0, 0, 0, 0.10);
    margin: 0 2rem;
}

.divider,
.divider2 {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

.divider {
    margin: 0.5rem 0;
}

.divider2 {
    margin: 2rem 0;
}

.btn__primary {
    border-color: transparent !important;
    background: var(--button-primary-bg) !important;
    color: var(--button-primary-text) !important;
}

.btn__primary:hover {
    background: var(--button-primary-hover) !important;
}

.btn__primary:active {
    background: var(--button-primary-active) !important;
}

.btn__secondary {
    border: 2px solid;
    border-color: var(--button-secondary-hover) !important;
    background: var(--button-secondary-bg) !important;
    color: var(--button-secondary-text) !important;
}

.btn__secondary:hover {
    background: var(--button-secondary-hover) !important;
}

.btn__secondary:active {
    background: var(--button-secondary-active) !important;
}

.btn {
    transition: all 0.15s;
    color: var(--button-accent-bg);
    text-decoration: none;
    display: inline-flex;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: bold;
    border: 2px solid var(--button-accent-bg);
    background: transparent;
    border-radius: 5px;
    backdrop-filter: blur(5px);
}

.btn:hover {
    border-color: transparent;
    background-color: var(--button-accent-hover);
    color: var(--color-background-alt);
}

.btn:active {
    background-color: var(--button-accent-active);
}

.btn.active {
    background-color: #007BFF;
    color: white;
}

.grid__container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 50px;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s ease;
}

.grid__container.fade-out {
    opacity: 0;
}

.grid__item {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    padding: 20px;
    width: 100%;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.grid__item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border-color: var(--color-primary);
}

.grid__item p {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 8px;
    margin: 0;
    font-size: 1.25rem;
    color: var(--color-text-secondary);
}

.grid__item p i {
    color: var(--color-primary);
    width: 25px;
}

.grid__item h3 {
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

.grid__item img {
    user-select: none;
    margin-bottom: 20px;
    border-radius: 20px;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

.grid__item-info {
    display: flex;
    flex-direction: column;
}

.category-heading {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.category-heading.fade-out {
  opacity: 0;
}

/* MAIN STUFF 3 */

@keyframes fade {
    0% { opacity: 0; }
    5% { opacity: 1; }
    20% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity: 0; }
}

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

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fallback-hide {
    to {
        opacity: 0;
        pointer-events: none;
    }
}

@keyframes slide {
    0% {
        transform: translateX(100%);
    }
    5% {
        transform: translateX(0%);
    }
    33.33% {
        transform: translateX(0%);
    }
    38.33% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/*
==================
    INDEX.HTML
==================
*/

#hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--gradient-hero);
    min-height: 100vh;
}

#hero .container {
    padding: 12rem var(--global-padding-x);
    position: relative;
    z-index: 2;
}

#hero h1 {
    color: var(--color-text-primary);
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    background: var(--gradient-professional);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(37, 99, 235, 0.3);
}

#hero p {
    color: var(--color-text-secondary);
    font-size: 1.25rem;
    margin-bottom: 2rem;
    max-width: 600px;
}

#hero__cta-buttons {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 30% 20%, rgba(37, 99, 235, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(5, 150, 105, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(124, 45, 18, 0.05) 0%, transparent 50%);
    z-index: 1;
}

#hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://cdn.create.vista.com/api/media/medium/384000362/stock-photo-smiling-workman-looking-camera-while-repairing-air-conditioner?token=");
    background-position: center right;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.1;
    z-index: 0;
}

#about {
    background: var(--gradient-dark);
    position: relative;
    overflow: hidden;
}

#about__container {
    position: relative;
    z-index: 2;
}

#about__section-label {
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.about__intro h2 {
    color: var(--color-text-primary);
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.about__intro p {
    color: var(--color-text-secondary);
    font-size: 1.125rem;
    line-height: 1.7;
}

#about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(37, 99, 235, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(5, 150, 105, 0.1) 0%, transparent 50%);
    z-index: 1;
}

.about__intro-feature-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
}

.about__intro {
    width: 90%;
    padding-right: 3rem;
    position: relative;
}

.about__content {
    width: 100%;
}

.about__feature {
    display: flex;
    align-items: center;
}

.about__features {
    width: 70%;
    padding-left: 3rem;
    background: var(--color-surface);
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    margin-left: 2rem;
    border: 1px solid var(--color-border);
    backdrop-filter: blur(10px);
}

.about__feature-info {
    width: 100%;
}

.about__image {
    width: 20%;
    opacity: 85%;
    margin-right: 20px
}

.about__feature-label {
    color: var(--color-text-primary);
    font-family: LatoBold;
    font-size: 1.75rem;
    margin: 0;
}

.about__feature-description {
    margin: 0;
    color: var(--color-text-secondary);
}

.about__feature-number {
    color: var(--color-primary);
    font-family: LatoBlack;
    font-weight: 700;
    font-size: 3rem;
    margin-bottom: 0;
    text-shadow: 0 0 20px rgba(37, 99, 235, 0.3);
}

/* Founder Section */
#founder {
    background: var(--gradient-dark);
    position: relative;
    overflow: hidden;
}

#founder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 80% 20%, rgba(37, 99, 235, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(5, 150, 105, 0.1) 0%, transparent 50%);
    z-index: 1;
}

.founder__content {
    display: flex;
    align-items: center;
    gap: 4rem;
    position: relative;
    z-index: 2;
}

.founder__image {
    flex: 0 0 300px;
}

.founder__image-placeholder {
    width: 300px;
    height: 300px;
    background: var(--gradient-professional);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--color-background);
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.3);
    position: relative;
    overflow: hidden;
}

.founder__image-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-professional);
    border-radius: 50%;
    opacity: 0.8;
    z-index: 1;
}

.founder__image-placeholder i {
    position: relative;
    z-index: 2;
}

.founder__info {
    flex: 1;
}

.founder__label {
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.founder__name {
    color: var(--color-text-primary);
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: var(--gradient-professional);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.founder__title {
    color: var(--color-secondary);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
}

.founder__description {
    color: var(--color-text-secondary);
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.founder__achievements {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.achievement {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--color-surface);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    backdrop-filter: blur(10px);
}

.achievement i {
    color: var(--color-primary);
    font-size: 1.25rem;
}

.achievement span {
    color: var(--color-text-primary);
    font-weight: 600;
}

.founder__quote {
    background: var(--color-surface);
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    border-left: 4px solid var(--color-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.founder__quote blockquote {
    color: var(--color-text-secondary);
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.founder__quote cite {
    color: var(--color-primary);
    font-weight: 600;
    font-style: normal;
}

#clientele {
    background: var(--color-background-dark);
    overflow: hidden;
}

.logos__container img {
    user-select: none;
}

.brand__logos-container {
    padding: 1.25rem 0;
    align-items: center;
}

.logos__slide-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.logos__slide {
    white-space: nowrap;
    display: inline-flex;
    animation: logos-slide 30s linear infinite;
    will-change: transform;
}

.brand__logos-container:hover .logos__slide {
    animation-play-state: paused;
}
.logos__slide-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        var(--color-background-dark),
        transparent 4rem,
        transparent calc(100% - 4rem),
        var(--color-background-dark) 100%
    );
    z-index: 1;
    pointer-events: none;
}

.brand__logos-container img {
    height: 3rem;
    width: auto;
    margin: 0 35px;
    flex-shrink: 0;
}

#clientele__logos-container {
    margin-bottom: 30px;
}

.brand__logos-container img {
    height: 3rem;
    width:  auto;
    margin: 0 35px;
    flex-shrink: 0;
}

#clientele__logos-container {
    margin-bottom: 30px;
}

.logos__arranged {
    display: grid;
    gap: 2rem;
    justify-items: center;
    grid-template-columns: repeat(4, 1fr);
}

.logos__arranged img {
    width: 100%;
    height: 100px;
    padding: 1.2rem;
    background: white;
}


#section__projects-overview {
    background:
        radial-gradient(circle at bottom left, rgba(50, 50, 150, 0.25), var(--color-background-dark)),
        linear-gradient(to top, var(--color-background-dark), transparent);
    position: relative;
}

#section__projects-overview .btn {
    display: flex;
    margin: auto;
    width: fit-content;
}

#section__assurance {
    background-image:
        linear-gradient(#24609A 2px, transparent 2px),
        linear-gradient(to right,  #24609A 2px, transparent 2px);
    background-size: 32px 32px;
    background-color: #205689;
    text-align: center;
    position: relative;
    z-index: -2;
}

#section__assurance::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    z-index: -1;
    background-image: linear-gradient(to top, #205689, transparent);
}

#section__assurance .container {
    padding: 7.5rem var(--global-padding-y);
    margin: auto;
    max-width: 65vw;
    z-index: 5;
}

#section__assurance h1 {
    color: var(--color-background);
}

#section__assurance p {
    color: var(--color-background-dark);
}

/*
==================
    PROJECTS.HTML
==================
*/

/* Professional Projects Header */
.projects__header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    padding: 2rem 0;
    position: relative;
    overflow: hidden;
}

.projects__header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    z-index: 1;
}

.projects__header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    gap: 2rem;
}

.projects__header-left,
.projects__header-center,
.projects__header-right {
    flex: 1;
}

.projects__header-center {
    text-align: center;
}

.projects__header-right {
    text-align: right;
}

/* Professional Back Button */
.projects__back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    text-decoration: none;
    border-radius: var(--border-radius-lg);
    font-family: LatoBold;
    font-size: 1rem;
    transition: all var(--transition);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.projects__back-button:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateX(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.projects__back-button i {
    font-size: 1.125rem;
    transition: transform var(--transition);
}

.projects__back-button:hover i {
    transform: translateX(-2px);
}

/* Professional Title Styling */
.projects__title {
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.projects__subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.125rem;
    font-weight: 400;
    margin: 0;
    font-family: LatoRegular;
}

/* Contact Info */
.projects__contact-info {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-radius: var(--border-radius);
    font-family: LatoRegular;
    font-size: 0.95rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.projects__contact-info i {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Projects Main Section */
.projects__main {
    padding: 3rem 0;
    background: var(--color-background-alt);
}

.projects__filter-buttons {
    display: flex;
    gap: 1rem;
    padding-bottom: 50px;
    justify-content: center;
    flex-wrap: wrap;
}

/*
==================
    SERVICES.HTML
==================
*/

/* Professional Services Header */
.services__header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    padding: 2rem 0;
    position: relative;
    overflow: hidden;
}

.services__header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    z-index: 1;
}

.services__header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    gap: 2rem;
}

.services__header-left,
.services__header-center,
.services__header-right {
    flex: 1;
}

.services__header-center {
    text-align: center;
}

.services__header-right {
    text-align: right;
}

/* Professional Back Button */
.services__back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    text-decoration: none;
    border-radius: var(--border-radius-lg);
    font-family: LatoBold;
    font-size: 1rem;
    transition: all var(--transition);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.services__back-button:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateX(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.services__back-button i {
    font-size: 1.125rem;
    transition: transform var(--transition);
}

.services__back-button:hover i {
    transform: translateX(-2px);
}

/* Professional Title Styling */
.services__title {
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.services__subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.125rem;
    font-weight: 400;
    margin: 0;
    font-family: LatoRegular;
}

/* Contact Info */
.services__contact-info {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-radius: var(--border-radius);
    font-family: LatoRegular;
    font-size: 0.95rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.services__contact-info i {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Services Main Section */
.services__main {
    padding: 3rem 0;
    background: var(--color-background-alt);
}

.services__overview {
    text-align: center;
    margin-bottom: 4rem;
}

.services__overview h2 {
    color: var(--color-text-primary);
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.services__overview p {
    color: var(--color-text-secondary);
    font-size: 1.125rem;
    max-width: 800px;
    margin: 0 auto;
}

/* Services Grid */
.services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.service__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.service__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: var(--color-primary);
}

.service__icon {
    width: 80px;
    height: 80px;
    background: var(--gradient-professional);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
}

.service__icon i {
    font-size: 2rem;
    color: white;
}

.service__card h3 {
    color: var(--color-text-primary);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.service__card p {
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.service__features {
    list-style: none;
    padding: 0;
}

.service__features li {
    color: var(--color-text-secondary);
    padding: 0.5rem 0;
    position: relative;
    padding-left: 1.5rem;
}

.service__features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: bold;
}

/* Why Choose Us */
.why__choose-us {
    margin-bottom: 4rem;
}

.why__choose-us h2 {
    text-align: center;
    color: var(--color-text-primary);
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

.why__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.why__item {
    text-align: center;
    padding: 2rem;
    background: var(--color-surface);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

.why__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.why__item i {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.why__item h4 {
    color: var(--color-text-primary);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.why__item p {
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* CTA Section */
.services__cta {
    text-align: center;
    background: var(--color-surface);
    padding: 3rem;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
}

.services__cta h2 {
    color: var(--color-text-primary);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.services__cta p {
    color: var(--color-text-secondary);
    font-size: 1.125rem;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/*
==================
    ABOUT.HTML
==================
*/

/* Professional About Page Header */
.about__page-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    padding: 2rem 0;
    position: relative;
    overflow: hidden;
}

.about__page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    z-index: 1;
}

.about__page-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    gap: 2rem;
}

.about__page-header-left,
.about__page-header-center,
.about__page-header-right {
    flex: 1;
}

.about__page-header-center {
    text-align: center;
}

.about__page-header-right {
    text-align: right;
}

/* Professional Back Button */
.about__page-back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    text-decoration: none;
    border-radius: var(--border-radius-lg);
    font-family: LatoBold;
    font-size: 1rem;
    transition: all var(--transition);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.about__page-back-button:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateX(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.about__page-back-button i {
    font-size: 1.125rem;
    transition: transform var(--transition);
}

.about__page-back-button:hover i {
    transform: translateX(-2px);
}

/* Professional Title Styling */
.about__page-title {
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.about__page-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.125rem;
    font-weight: 400;
    margin: 0;
    font-family: LatoRegular;
}

/* Contact Info */
.about__page-contact-info {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-radius: var(--border-radius);
    font-family: LatoRegular;
    font-size: 0.95rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.about__page-contact-info i {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
}

/* About Page Main Section */
.about__page-main {
    padding: 3rem 0;
    background: var(--color-background-alt);
}

/* Company Overview */
.company__overview {
    text-align: center;
    margin-bottom: 4rem;
}

.company__overview h2 {
    color: var(--color-text-primary);
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.company__overview p {
    color: var(--color-text-secondary);
    font-size: 1.125rem;
    max-width: 800px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

.company__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.stat__item {
    text-align: center;
    padding: 2rem;
    background: var(--color-surface);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

.stat__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.stat__number {
    color: var(--color-primary);
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 20px rgba(37, 99, 235, 0.3);
}

.stat__label {
    color: var(--color-text-secondary);
    font-size: 1rem;
    font-weight: 600;
}

/* Mission & Vision */
.mission__vision {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.mission__card,
.vision__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.mission__card:hover,
.vision__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.mission__icon,
.vision__icon {
    width: 80px;
    height: 80px;
    background: var(--gradient-professional);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
}

.mission__icon i,
.vision__icon i {
    font-size: 2rem;
    color: white;
}

.mission__card h3,
.vision__card h3 {
    color: var(--color-text-primary);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.mission__card p,
.vision__card p {
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* CEO Section */
.ceo__section {
    margin-bottom: 4rem;
}

.ceo__section h2 {
    text-align: center;
    color: var(--color-text-primary);
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

.ceo__content {
    display: flex;
    align-items: center;
    gap: 4rem;
    background: var(--color-surface);
    padding: 3rem;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.ceo__image {
    flex: 0 0 300px;
}

.ceo__image-placeholder {
    width: 300px;
    height: 300px;
    background: var(--gradient-professional);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--color-background);
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.3);
    position: relative;
    overflow: hidden;
}

.ceo__image-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-professional);
    border-radius: 50%;
    opacity: 0.8;
    z-index: 1;
}

.ceo__image-placeholder i {
    position: relative;
    z-index: 2;
}

.ceo__info {
    flex: 1;
}

.ceo__name {
    color: var(--color-text-primary);
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: var(--gradient-professional);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ceo__title {
    color: var(--color-secondary);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.ceo__description {
    color: var(--color-text-secondary);
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.ceo__achievements {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.ceo__achievements .achievement {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--color-background-alt);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    backdrop-filter: blur(10px);
}

.ceo__achievements .achievement i {
    color: var(--color-primary);
    font-size: 1.25rem;
}

.ceo__achievements .achievement span {
    color: var(--color-text-primary);
    font-weight: 600;
}

.ceo__quote {
    background: var(--color-background-alt);
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    border-left: 4px solid var(--color-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.ceo__quote blockquote {
    color: var(--color-text-secondary);
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.ceo__quote cite {
    color: var(--color-primary);
    font-weight: 600;
    font-style: normal;
}

/* Values Section */
.values__section {
    margin-bottom: 4rem;
}

.values__section h2 {
    text-align: center;
    color: var(--color-text-primary);
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

.values__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.value__card {
    text-align: center;
    padding: 2rem;
    background: var(--color-surface);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

.value__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.value__card i {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.value__card h4 {
    color: var(--color-text-primary);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.value__card p {
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Why Choose Section */
.why__choose-section {
    margin-bottom: 4rem;
}

.why__choose-section h2 {
    text-align: center;
    color: var(--color-text-primary);
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

.why__choose-section .why__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.why__choose-section .why__item {
    text-align: center;
    padding: 2rem;
    background: var(--color-surface);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

.why__choose-section .why__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.why__choose-section .why__item i {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.why__choose-section .why__item h4 {
    color: var(--color-text-primary);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.why__choose-section .why__item p {
    color: var(--color-text-secondary);
    line-height: 1.6;
}


/*
====================
    CONTACT.HTML
====================
*/
#get-in-touch {
    background: var(--color-background-dark);
    text-align: center;
}

#get-in-touch h1 {
    margin-top: 0;
    margin-bottom: 10px;
}

#get-in-touch p {
    margin-bottom: 0;
}

.lets-talk__container-contents {
    display: flex;
}

.lets-talk__container-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

.lets-talk__container-content-office-items {
    display: flex;
}

.lets-talk__container-content-office-items div {
    width: auto;
}

#lets-talk__left {
    padding-right: 4rem;
}

#lets-talk__right {
    padding-left: 4rem;
}

.lets-talk__container-content input,
.lets-talk__container-content textarea {
    margin-bottom: 30px;
}

.lets-talk__container-content textarea {
    resize: vertical;
    min-height: 100px;
}

/*
===================
    FOOTER.HTMl
===================
*/
footer {
    position: relative;
    background: linear-gradient(to top, var(--color-text), black);
}

footer p {
    color: var(--color-background-dark);
}

footer h2,
footer h3,
footer a,
footer ul {
    color: var(--color-background);
}

#footer__container-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
}

#footer__logo img {
    height: 150px;
}

#footer__navigations {
    width: 30%;
}

#footer__navigations ul {
    list-style: none;
    line-height: 2;
}

footer a {
    font-family: LatoRegular;
    text-decoration: none;
    color: var(--color-background);
    position: relative;
    transition: color 0.25s;
}

footer a:hover {
    color: deepskyblue;
}

footer a::before {
    bottom: -3px;
    border-bottom: 2px solid var(--color-background-dark);
    content: "";
    width: 0;
    position: absolute;
    transition: width 0.25s;
}

footer a:hover::before {
    width: 100%;
}

.footer__container-bottom {
    display: flex;
}

#footer__bottom {
    background: #0C0C0C;
}

#footer__bottom .footer__container {
    padding: 2rem var(--global-padding-x);
}

#footer__bottom .footer__container p {
    margin: 0;
}

.footer__container .divider-vertical,
.footer__container .divider2 {
    border-bottom-color: #1f1f1f;
    border-left-color:   #1f1f1f;
}

.footer__element h3,
.footer__element p,
.footer__element a {
    margin: 0;
}

.footer__bottom-element a,
.footer__bottom-element p {
    margin: 0;
    font-size: 1rem;
}

.footer__bottom-element {
    margin-bottom: 1rem;
}

/*
===================
    NAVBAR.HTML
===================
*/
nav {
/*    position: fixed;*/
    z-index: 100;
    width: 100%;
    background: var(--color-navbar-bg);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--color-border);
}

.navbar__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem var(--global-padding-x);
}

.navbar__container h2,
.navbar__container p {
    margin: 0;
}

.navbar__container img {
    height: 50px;
    margin-right: auto;
}

.navbar__container ul {
    display: flex;
    align-items: center;
    list-style: none;
    font-size: 1rem;
}

.navbar__container li {
    margin: 0 1.5rem;
}

.navbar__container a {
    color: var(--color-text-primary);
    text-decoration: none;
    font-family: LatoBlack;
    position: relative;
    transition: color 0.3s ease;
}

.navbar__container a::before {
    content: "";
    width: 0;
    bottom: -5px;
    border-bottom: 2px solid var(--color-primary);
    position: absolute;
    margin: auto;
    transition: 0.3s ease;
    left: 50%;
    transform: translateX(-50%);
}

.navbar__container a:hover {
    color: var(--color-primary);
}

.navbar__container a:hover::before {
    width: 100%;
    border-bottom-color: var(--color-primary);
}

/* ==================
   RESPONSIVE DESIGN
   ================== */

/* Large Desktops */
@media (max-width: 1440px) {
    :root {
        --global-padding-x: 4rem;
        --global-padding-y: 3rem;
    }
}

/* Tablets and Small Desktops */
@media (max-width: 1024px) {
    :root {
        --global-padding-x: 3rem;
        --global-padding-y: 2.5rem;
    }

    h1 {
        font-size: 2.25rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.375rem;
    }

    #hero .container {
        padding: 10rem var(--global-padding-x);
    }

    .about__intro-feature-container {
        flex-direction: column;
        gap: 2rem;
    }

    .about__intro,
    .about__features {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .about__features {
        padding: 1.5rem;
    }

    /* Founder Section Responsive */
    .founder__content {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .founder__image {
        flex: none;
    }

    .founder__image-placeholder {
        width: 250px;
        height: 250px;
        font-size: 3rem;
    }

    .founder__name {
        font-size: 2.5rem;
    }

    .founder__achievements {
        justify-content: center;
    }

    /* Grid Layout */
    .grid__container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* Projects Header Responsive */
    .projects__header-content {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }

    .projects__header-left,
    .projects__header-center,
    .projects__header-right {
        flex: none;
    }

    .projects__header-right {
        text-align: center;
    }

    .projects__title {
        font-size: 2rem;
    }

    .projects__subtitle {
        font-size: 1rem;
    }

    /* Footer */
    #footer__container-top {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    #footer__navigations {
        width: 100%;
    }

    /* Contact Section */
    .lets-talk__container-contents {
        flex-direction: column;
        gap: 2rem;
    }

    #lets-talk__left,
    #lets-talk__right {
        padding: 0;
        width: 100%;
    }

    .lets-talk__container-content-office-items {
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
    }
}

/* Tablets */
@media (max-width: 768px) {
    :root {
        --global-padding-x: 2rem;
        --global-padding-y: 2rem;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    #hero .container {
        padding: 7rem var(--global-padding-x);
    }
    
    .navbar__container {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem var(--global-padding-x);
    }

    .navbar__container ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .navbar__container li {
        margin: 0 0.75rem;
    }

    .slide {
        animation: slide 10s infinite ease;
    }

    /* Projects Header Mobile */
    .projects__header {
        padding: 1.5rem 0;
    }

    .projects__header-content {
        gap: 1rem;
    }

    .projects__back-button {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }

    .projects__title {
        font-size: 1.75rem;
    }

    .projects__subtitle {
        font-size: 0.95rem;
    }

    .projects__contact-info {
        padding: 0.625rem 1rem;
        font-size: 0.85rem;
    }

    /* Founder Section Mobile */
    .founder__image-placeholder {
        width: 200px;
        height: 200px;
        font-size: 2.5rem;
    }

    .founder__name {
        font-size: 2rem;
    }

    .founder__achievements {
        flex-direction: column;
        gap: 1rem;
    }

    .achievement {
        justify-content: center;
    }

    /* Grid Layout */
    .grid__container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Logos */
    .logos__arranged {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .logos__arranged img {
        height: 80px;
        padding: 1rem;
    }

    .brand__logos-container img {
        height: 4.5rem;
        margin: 0 25px;
    }

    /* About Features */
    .about__feature {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .about__image {
        width: 60px;
        margin-right: 0;
    }

    .about__feature-number {
        font-size: 2rem;
    }

    .about__feature-label {
        font-size: 1.25rem;
    }

    #section__assurance .container {
        max-width: 85vw;
    }

    /* Footer */
    .footer__container-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    #footer__logo img {
        height: 100px;
    }
}

/* Mobile Devices */
@media (max-width: 480px) {
    :root {
        --global-padding-x: 1rem;
        --global-padding-y: 1.5rem;
    }

    h1 {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }

    h2 {
        font-size: 1.375rem;
        margin-bottom: 0.875rem;
    }

    h3 {
        font-size: 1.125rem;
        margin-bottom: 0.75rem;
    }

    p {
        font-size: 1rem;
    }

    .navbar__container ul {
        font-size: 0.9rem;
    }

    .navbar__container li {
        margin: 0 0.5rem;
    }

    .slide {
        animation: slide 8s infinite ease;
    }

    .btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.9rem;
    }

    /* Projects Header Small Mobile */
    .projects__header {
        padding: 1rem 0;
    }

    .projects__back-button {
        padding: 0.625rem 1rem;
        font-size: 0.85rem;
    }

    .projects__back-button span {
        display: none;
    }

    .projects__title {
        font-size: 1.5rem;
    }

    .projects__subtitle {
        font-size: 0.9rem;
    }

    .projects__contact-info {
        padding: 0.5rem 0.875rem;
        font-size: 0.8rem;
    }

    .logos__arranged {
        grid-template-columns: 1fr;
    }

    .logos__arranged img {
        height: 70px;
    }

    .brand__logos-container img {
        height: 4rem;
        margin: 0 15px;
    }

    .about__features {
        padding: 1rem;
    }

    .about__feature-number {
        font-size: 1.75rem;
    }

    .about__feature-label {
        font-size: 1.125rem;
    }

    .lets-talk__container-content input,
    .lets-talk__container-content textarea {
        margin-bottom: 1rem;
    }

    #footer__bottom .footer__container {
        padding: 1.5rem var(--global-padding-x);
    }

    .footer__list {
        font-size: 1rem;
    }
}

@media (max-width: 360px) {
    :root {
        --global-padding-x: 0.75rem;
    }

    .navbar__container ul {
        font-size: 0.85rem;
    }

    .navbar__container li {
        margin: 0 0.375rem;
    }

    .btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.85rem;
    }

    #section__assurance .container {
        padding: 4rem var(--global-padding-y);
        margin: auto;
        max-width: 90vw;
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .navbar__container a::before,
    footer a::before {
        border-bottom-width: 1.5px;
    }
}

@media print {
    .navbar__container,
    footer {
        display: none;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .container {
        padding: 1rem !important;
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    .navbar__container {
        padding: 0.5rem var(--global-padding-x);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .slide {
        animation: none;
    }
    
    /*.logos__slide {
        animation: none;
    }*/
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-background: #1a1a1a;
        --color-text: #ffffff;
        --color-text-primary: #ffffff;
        --color-text-secondary: #cccccc;
    }
}

@media (hover: none) and (pointer: coarse) {
    .navbar__container a:hover::before,
    footer a:hover::before {
        width: 0;
    }
    
    .btn:hover {
        background-color: var(--button-accent-bg);
    }
}