:root {

    --primary-color: #FF1919;

    --secondary-color: #2c3e50;

    --accent-color: #34495e;

    --white: #ffffff;

    --dark: #1a1a1a;

    --accent-shadow: rgba(52, 73, 94, 0.2);

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html,

body {

    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;

    line-height: 1.6;

    color: var(--secondary-color);

    overflow-x: hidden;

    width: 100%;

}

#home {

    position: relative;

}

#home_bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    filter: blur(1px) contrast(70%);

    object-fit: cover;

}

body.modal_open {

    overflow: hidden;

}



h1,

h2,

h3 {

    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;

    /* font-weight: 900; */

}



.highlight {

    color: var(--primary-color);

    font-weight: bold;

}



.header {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    background: transparent;

    z-index: 1000;

    padding: 2rem 0;

}



.nav-container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 2rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

    position: relative;

}

.hamburger-wrapper {

    position: relative;

}

.nav-right-group {

    display: flex;

    flex-wrap: nowrap;

    gap: 1rem;

}



.logo img {

    width: 150px;

}



.language-switcher {

    display: flex;

    gap: 0.5rem;

    align-items: center;

    top: 20px;

    right: 20px;

    z-index: 500;

    transition: all 0.3s ease;

    --webkit-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

}



.lang-btn {

    display: flex;

    align-items: center;

    gap: 0.3rem;

    padding: 0.5rem 0.8rem;

    border: 2px solid rgba(85, 85, 85, 0.3);

    background: rgba(85, 85, 85, 0.1);

    color: white;

    border-radius: 25px;

    cursor: pointer;

    transition: all 0.3s ease;

    --webkit-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    font-size: 0.85rem;

    font-weight: 500;

    backdrop-filter: blur(5px);

}



.lang-btn:hover {

    background: rgba(255, 255, 255, 0.2);

    border-color: var(--primary-color);

    transform: translateY(-2px);

    --webkit-transform: translateY(-2px);

    -o-transform: translateY(-2px);

}



.lang-btn.active {

    background: var(--primary-color);

    border-color: var(--primary-color);

    color: var(--dark);

}





.lang-btn .lang-text {

    font-size: 0.8rem;

    font-weight: 600;

}



.nav-menu {

    position: fixed;

    top: 20px;

    left: 50%;

    border-radius: 20px;

    transform: translateX(-50%);

    --webkit-transform: translateX(-50%);

    -o-transform: translateX(-50%);

    display: flex;

    list-style: none;

    gap: 0;

    background: var(--secondary-color);

    backdrop-filter: blur(5px);

    z-index: 1000;

    transition: all 0.3s ease;

    --webkit-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

}



.nav-menu li {

    margin: 0;

}



.nav-menu a {

    text-decoration: none;

    color: white;

    font-weight: 500;

    font-size: 0.95rem;

    padding: 0.8rem 1.5rem;

    border-radius: 30px;

    transition: all 0.3s ease;

    --webkit-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    display: block;

    position: relative;

    white-space: nowrap;

}



.nav-menu a:hover,

.nav-menu a.active {

    color: var(--white);

    background: var(--primary-color);



}



.nav-placeholder {

    width: 50px;

    height: 50px;

}



.hamburger {

    display: none;

    flex-direction: column;

    cursor: pointer;

    padding: 0.5rem;

}



.hamburger span {

    width: 25px;

    height: 3px;

    background: #FFF;

    margin: 3px 0;

    transition: 0.3s;

    --webkit-transition: 0.3s;

    -o-transition: 0.3s;

    border-radius: 2px;

}





.hero-section {

    height: 80vh;

    position: relative;

}



.hero-bg {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100vh;

    z-index: -1;

}



.hero-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

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

}



.hero-content-1 {

    position: relative;

    width: 100%;

    height: inherit;

    color: white;

    transition: opacity 0.5s ease;

    --webkit-transition: opacity 0.5s ease;

    -o-transition: opacity 0.5s ease;

    padding-left: 7%;

}



.hero-layout {

    max-width: 1200px;

    width: 100%;

    margin: 0 auto;

    padding: 0 2rem;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: center;

}



.hero-left {

    text-align: left;

}



.hero-title {

    font-size: 6rem;

    margin-bottom: 1rem;

    line-height: 0.9;

}



.hero-title .line-1 {

    display: block;

    margin-bottom: 0;

    color: var(--primary-color);

}



.hero-title .line-2 {

    display: block;

    color: white;

    white-space: nowrap;

}



.cta-button {

    display: inline-block;

    background: var(--primary-color);

    color: var(--white);

    padding: 15px 30px;

    text-decoration: none;

    border-radius: 50px;

    font-weight: bold;

    font-size: 1.1rem;

    transition: all 0.3s ease;

    --webkit-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    margin-top: 12vh;

}



.cta-button:hover {

    background: var(--dark);

    color: var(--white);

    transform: translateY(-2px);

    --webkit-transform: translateY(-2px);

    -o-transform: translateY(-2px);

}



.hero-right {

    text-align: left;

    padding-left: 1rem;

}



.hero-description {

    font-size: 2rem;

    line-height: 1.4;

    font-weight: 300;

    margin-bottom: 1rem;

}



.hero-content-2 {

    position: absolute;

    top: 26vh;

    width: 46%;

    right: 2%;

    text-align: center;

    color: white;

    opacity: 1;

    transition: opacity 0.5s ease;

    --webkit-transition: opacity 0.5s ease;

    -o-transition: opacity 0.5s ease;

    white-space: pre-wrap;

    word-wrap: break-word;



}



.hero-content-2 .lighter-bg {

    width: inherit;

    height: inherit;

    background-color: #e9e4e4;

    border-radius: 20px 20px;

    opacity: 0.3;

}



.hero-content-2 h2 {

    font-size: 1.2rem;

    font-weight: normal;

    opacity: 1;

    color: #FFF;

}



.hero-inner {

    max-width: clamp(400px, 70vw, 800px);

    width: 100%;

    padding: 0.5rem;

    text-align: left;

    margin-right: clamp(0px, 5vw, 3rem);

    position: absolute;

    top: 15%;

}



.hero-description {

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

    margin-bottom: clamp(0.5rem, 1.5vw, 1.5rem);

    font-weight: 300;

    line-height: 1.2;

    color: white;

}



.section {

    padding: 5rem 0;

    background: white;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 2rem;

}



.section-title {

    font-size: 2rem;

    text-align: center;

    margin-bottom: 3rem;

}



.section-subtitle {

    font-size: 1.3rem;

    text-align: center;

    margin-bottom: 4rem;

    color: var(--accent-color);

    max-width: 800px;

    margin-left: auto;

    margin-right: auto;

    font-weight: 300;

}



.about-grid {

    display: flex;

    margin-top: 3rem;

    gap: 3rem;

}

.about-grid:nth-child(even) {

    flex-direction: row-reverse;

}



.about-text {

    padding-right: 1rem;

}



.about-text p {

    font-size: 1.1rem;

    line-height: 1.6;

    font-weight: 300;

    margin-bottom: 2rem;

    color: var(--text-color, #333);

}



.about-text p:first-child {

    margin-bottom: 2.5rem;

}

.about-text p:first-child b{

    font-weight: 500 !important;

}



.about-text ul {

    list-style: none;

    padding: 0;

    margin: 2rem 0;

}



.about-text li {

    font-size: clamp(1rem, 2.2vw, 1.2rem);

    line-height: 1.5;

    font-weight: 300;

    margin-bottom: 1rem;

    padding-left: 2rem;

    position: relative;

}



.about-text li::before {

    content: "→";

    position: absolute;

    left: 0;

    color: var(--primary-color, #007bff);

    font-weight: 600;

    font-size: 1.2em;

}



.about-image,.contact-image {

    width: 800px;

    aspect-ratio: 1;

    border-radius: 20px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    --webkit-transition: transform 0.3s ease, box-shadow 0.3s ease;

    -o-transition: transform 0.3s ease, box-shadow 0.3s ease;

    overflow: hidden;

}

.contact-image {

    height: 200px;

}

.about-image img, .contact-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.about-image:hover {

    transform: translateY(-5px);

    --webkit-transform: translateY(-5px);

    -o-transform: translateY(-5px);

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

}



.timeline_wrapper {

    display: flex;

    justify-content: center;

    width: 60%;

    padding: 100px 0;

    color: #2c3e50;

}



.timeline_wrapper .timeline__title{

    max-width: 840px;

    margin: 0 auto;

    text-align: center;

    padding: 0 16px;

}

.timeline_wrapper .timeline__title h2{

    font-size: 48px;

    font-weight: 600;

    line-height: 56px;

    letter-spacing: -0.5px;

    text-transform: capitalize;

    margin-bottom: 16px;

}

.timeline_wrapper .timeline__title p{

    font-size: 18px;

    font-weight: 400;

    line-height: 28.8px;

    color: #959595;

}



.timeline_wrapper .timeline{

    padding-top: 64px;

}

.timeline_wrapper .timeline ul{

    padding-top: 100px;

}

.timeline_wrapper .timeline ul li {

	background: #2c3e50;

	position: relative;

	margin: 0 auto;

	width: 2px;

	margin-bottom: 48px;

	list-style-type: none;

}



.timeline_wrapper .timeline ul li:last-child {

	padding-bottom: 7px;

    width: 0;

    height: 0;

}



.timeline_wrapper .timeline ul li:before {

	content: '';

	background: #FF1919;

	position: absolute;

	left: 50%;

	top: -32px;

	transform: translateX(-50%);

	-webkit-transform: translateX(-50%);

	width: 16px;

	height: 16px;

	-webkit-border-radius: 50%;

	-moz-border-radius: 50%;

	border-radius: 50%;

}



.timeline_wrapper .timeline ul li .hidden {

	opacity: 0;

}



.timeline_wrapper .timeline ul li .content {

	position: relative;

	top: -100px;

	width: 289px;

}



.timeline_wrapper .timeline ul li .content .badge{

    font-size: 12px;

    line-height: 16px;

    text-transform: uppercase;

    color: #000000;

    display: inline-block;

    padding: 6px 12px;

    background: #2dcd71;

    border-radius: 1000px;

}



.timeline_wrapper .timeline ul li .content h3{

    font-size: 20px;

    font-weight: 600;

    line-height: 28px;

    color: #ffffff;

    margin: 16px 0 8px;

}



.timeline_wrapper .timeline ul li .content p{

	color: #acacac;

    font-size: 14px;

    font-weight: 400;

    line-height: 20px;

}



.timeline_wrapper .timeline ul li:nth-child(odd) .content {

	left: 70px;

}



.timeline_wrapper .timeline ul li:nth-child(odd) .content:before {

	left: -38px;

}



.timeline_wrapper .timeline ul li:nth-child(even) .content {

	left: calc(-289px - 70px);

}



.timeline_wrapper .timeline ul li:nth-child(even) .content:before {

	right: -38px;

}



@media (max-width: 768px) {



    .about-text {

        padding-right: 0;

        order: 1;

    }



    .about-text li {

        padding-left: 1.5rem;

    }

}



@media (max-width: 480px) {

    .about-text p:first-child {

        font-size: clamp(1.1rem, 4vw, 1.3rem);

    }



    .about-image {

        height: 200px;

        border-radius: 15px;

    }

}



.pillars {

    background: var(--primary-color);

    color: white;

}



.pillars-grid {

    display: flex;

    gap: 10px;

    margin-top: 10px;

}



.pillar-card {

    background: transparent;

    padding: 30px;

    border-radius: 12px;

    text-align: center;

    transition: transform 0.3s ease;

    --webkit-transition: transform 0.3s ease;

    -o-transition: transform 0.3s ease;

}



.pillar-card:hover {

    transform: translateY(-5px);

    --webkit-transform: translateY(-5px);

    -o-transform: translateY(-5px);

}



.pillar-title {

    font-size: 1.5rem;

    font-weight: 700;

    margin-bottom: 12px;

}



.pillar-description {

    line-height: 1.6;

}



@media (max-width: 768px) {

    .pillars-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }



    .pillar-card {

        padding: 30px 20px;

    }



        .timeline_wrapper {

        padding: 32px 0;

        background: #27272C;

    }

    .timeline_wrapper .timeline__title {

        text-align: left;

    }

    .timeline_wrapper .timeline {

        padding-top: 32px;

    }

    .timeline_wrapper .timeline ul li {

        margin-left: 48px !important;

    }

    .timeline_wrapper .timeline__title h2 {

        font-size: 32px;

        line-height: 44px;

        letter-spacing: 0.08px;

    }

	.timeline_wrapper .timeline ul li {

		margin-left: 20px;

	}



	.timeline_wrapper .timeline ul li .content {

		width: calc(100vw - 100px);

        transition: .2s;

	}



    .timeline_wrapper .timeline ul li .content p {

        min-height: 110px;

    }



	.timeline_wrapper .timeline ul li:nth-child(even) .content {

		left: 38px;

	}



	.timeline_wrapper .timeline ul li:nth-child(even) .content:before {

		left: -33px;

	}

    .timeline_wrapper .timeline ul li:nth-child(odd) .content {

        left: 38px;

    }

}



@media (max-width: 480px) {

    .pillar-card {

        padding: 25px 15px;

    }

}







.values-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 2rem;

    margin: 0 calc(-50vw + 50%);

}



.value-card {

    background: white;

    height: 150px;

    overflow: hidden;

    display: flex;

    align-items: center;

    position: relative;

    transition: transform 0.3s ease;

    --webkit-transition: transform 0.3s ease;

    -o-transition: transform 0.3s ease;

}



.value-card h3 {

    font-size: 1.5rem;

    margin-bottom: 1rem;

    color: var(--primary-color);

    opacity: 0.5;

    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;

    font-size: 6rem;

    white-space: nowrap;

    animation: scroll-left 15s linear infinite;

}



.value-card p {

    font-weight: 300;

}



.scrolling-wrapper {

    display: flex;

    white-space: nowrap;

    animation: scroll-seamless 15s linear infinite;

}



.scrolling-text {

    font-size: 6rem;

    margin: 0;

    color: var(--primary-color);

    opacity: 0.5;

    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;

    white-space: nowrap;

    padding-right: 4rem;

}



@keyframes scroll-seamless {

    0% {

        transform: translateX(0);

        --webkit-transform: translateX(0);

        -o-transform: translateX(0);

    }



    100% {

        transform: translateX(-50%);

        --webkit-transform: translateX(-50%);

        -o-transform: translateX(-50%);

    }

}



@media (max-width: 768px) {

    .value-card h3 {

        font-size: 2.5rem;

        letter-spacing: 0.3em;

    }



    .scrolling-text {

        font-size: 2.5rem;

        letter-spacing: 0.3em;

        padding-right: 2rem;

    }

}





.divisions-section {

    font-weight: 300;

    font-size: 5rem;

    line-height: 1.7;

    color: #d3d3d3;

    background: linear-gradient(to bottom, #555555 10%, #f5f5f5 100%);

    text-align: center;

}



.mavel-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    gap: 1rem;

    margin-top: 2.5rem;

}



.mavel-card {

    background: white;

    padding: 2.5rem;

    border-radius: 15px;

    border-left: 5px solid var(--primary-color);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    border: 2px solid #f0f0f0;

    transition: all 0.3s ease;

}



.mavel-card:hover {

    transform: translateY(-5px);

    --webkit-transform: translateY(-5px);

    -o-transform: translateY(-5px);

    border-color: var(--primary-color);

    border-radius: 15px;



}



.mavel-number {

    background: var(--primary-color);

    color: white;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    font-size: 1.2rem;

    margin-bottom: 1.5rem;

}



.mavel-card h3 {

    font-size: 1.6rem;

    margin-bottom: 1.5rem;

    color: var(--secondary-color);

}



.mavel-card p {

    font-weight: 300;

    font-size: 1.1rem;

    line-height: 1.7;

}



.meh {

    position: relative;

    background-color: white;

    padding: 4rem 0;

    overflow: hidden;

}



.meh::before,

.meh::after {

    content: '';

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    --webkit-transform: translateY(-50%);

    -o-transform: translateY(-50%);

    width: 500px;

    height: 500px;

    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;

    opacity: 0.3;

    z-index: 1;

}



.meh::before {

    left: 7%;

    background-image: url('images/designSx.png');

    mask: radial-gradient(circle at center, black 60%, transparent 80%);

    -webkit-mask: radial-gradient(circle at center, black 60%, transparent 80%);

}



.meh::after {

    right: 7%;

    background-image: url('images/designDx.png');

    mask: radial-gradient(circle at center, black 60%, transparent 90%);

    -webkit-mask: radial-gradient(circle at center, black 60%, transparent 80%);

}



.meh .container {

    position: relative;

    z-index: 2;

}



.meh-content {

    text-align: center;

    margin-bottom: 3rem;

}



.meh-list {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 2rem;

    margin-top: 3rem;

}



.meh-item {

    background: rgba(255, 255, 255, 0.3);

    text-align: center;

    backdrop-filter: blur(1px);

}



.meh-item h4 {

    color: var(--primary-color);

    font-size: 1.4rem;

    margin-bottom: 1rem;

    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;

}



.meh-item p {

    font-weight: 300;

}



.tech-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));

    gap: 3rem;

    margin-top: 2.5rem;

}



.tech-card {

    background: white;

    padding: 2.5rem;

    border-radius: 15px;

    border: 2px solid #f0f0f0;

    transition: all 0.3s ease;

    margin-top: 2.5rem;

    display: flex;

    gap: 2.5rem;



}

.tech_title {

    margin-top: 3rem;

}

.tech-card:hover {

    border-color: var(--primary-color);

    transform: translateY(-5px);

    --webkit-transform: translateY(-5px);

    -o-transform: translateY(-5px);

}



.tech-image {

    border-radius: 20px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    --webkit-transition: transform 0.3s ease, box-shadow 0.3s ease;

    -o-transition: transform 0.3s ease, box-shadow 0.3s ease;

    overflow: hidden;



}

.tech-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.tech-card h3 {

    color: var(--primary-color);

    text-align: center;

}



.tech-card p {

    font-weight: 300;

    margin-bottom: 1rem;

}



.benefits-list-wrapper {

    display: flex;

    align-items: center;

    justify-content: center;

}

.benefits-list {

    list-style: none;

    margin-top: 1.5rem;

    max-width: 60%;

}



.benefits-list li {

    padding: 0.8rem 0;

    border-bottom: 1px solid #eee;

    font-weight: 300;

}



.benefits-list li:before {

    content: "✓";

    color: var(--primary-color);

    font-weight: bold;

    margin-right: 0.5rem;

}



.tech-benefits {

    background: var(--primary-color);

    color: white;

    padding: 1rem;

    border-radius: 10px;

    margin-top: 1rem;

    font-weight: 500;

}



.stats-section {

    background: white;

    color: white;

}



.stat-section h3 {

    font-size: 1.0rem;

    margin-bottom: 1rem;

    color: var(--primary-color);

    font-size: 2rem;

    text-align: center;

}



.stats-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: 1.5rem;

    padding: 3rem;



}



.stat-card {

    position: relative;

    background: transparent;

    border-radius: 14px;

    padding: 1.8rem 1.5rem;

    box-shadow: 0 6px 14px var(--accent-shadow);

    cursor: default;

    overflow: visible;

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;

    --webkit-transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;

    -o-transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;

}



.stat-card:hover {

    transform: translateY(-8px) rotate(-1.5deg) scale(1.04);

    --webkit-transform: translateY(-8px) rotate(-1.5deg) scale(1.04);

    -o-transform: translateY(-8px) rotate(-1.5deg) scale(1.04);

    box-shadow: 0 15px 30px var(--accent-shadow);

    z-index: 10;

}



.stat-number {

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

    font-weight: 900;

    text-align: center;

    position: relative;

    color: var(--accent-color);

    animation: pulseColor 5.5s infinite ease-in-out;

}



.stat-label {

    margin-top: 1.25rem;

    font-size: 1.25rem;

    font-weight: 600;

    text-align: center;

    color: #555;

    letter-spacing: 0.05em;

}



@keyframes pulseColor {



    0%,

    30% {

        color: var(--primary-color);

    }



    60% {

        color: var(--accent-color);

    }



    100% {

        color: var(--primary-color);

    }

}







.contact {

    background: var(--secondary-color);

    color: white;

    position: relative;

    overflow: hidden;

}



.contact::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color) 100%);

    opacity: 0.9;

    z-index: 1;

}



.contact-card {

    background: #FFF;

    border-radius: 14px;

    padding: 1.8rem 1.5rem;

    box-shadow: 0 6px 14px var(--accent-shadow);

    cursor: default;

    overflow: visible;

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;

    --webkit-transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;

    -o-transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;

    display: flex;

    color: #555;

    margin-top: 2rem;

    gap: 2rem;

}

.contact-card > div:first-child {

    width: 100%;

}

.contact-grid .contact-card {

    display: flex;

    flex-direction: column;

}



.contact-grid .contact-card p {

    color: #555;

}



.contact .container {

    position: relative;

    z-index: 2;

    text-align: center;

}



/* .contact form .form-item {

    display: flex;

    justify-content: center;

    gap: 1rem;

    align-items: end;

}

.contact form .form-item input,

.contact form .form-item textarea {

  padding: 10px 6px;

  border: none;

  border-bottom: 2px solid #555;

  background: transparent;

  font-size: 16px;

  outline: none;

  resize: none;

}

 */



.contact-form {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.form-item {

    position: relative;

}



.form-item input,

.form-item textarea {

    width: 100%;

    padding: 10px 6px;

    border: none;

    border-bottom: 2px solid #555;

    background: transparent;

    font-size: 16px;

    outline: none;

    resize: none;

}



.form-item label {

    position: absolute;

    left: 6px;

    top: 50%;

    transform: translateY(-50%);

    --webkit-transform: translateY(-50%);

    -o-transform: translateY(-50%);



    font-size: 16px;

    color: grey;

    pointer-events: none;

    transition: all 0.3s ease;

    --webkit-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

}



.form-item.no-animation label {

    transform: none;

    --webkit-transform: none;

    -o-transform: none;

}



.form-item:has(textarea) label {

    top: 75%;

}



.form-item input:focus+label,

.form-item textarea:focus+label,

.form-item input:not(:placeholder-shown)+label,

.form-item textarea:not(:placeholder-shown)+label {

    top: -10px;

    font-size: 12px;

    color: #555;

}



.form-button {

    background-color: #555;

    color: white;

    border: none;

    padding: 12px 0;

    border-radius: 20px;

    font-size: 1rem;

    cursor: pointer;

    transition: background 0.3s;

    --webkit-transition: background 0.3s;

    -o-transition: background 0.3s;

}



.form-button:hover {

    background-color: #FF1919;

    color: white;

}



.form-button:active {

    background-color: #FF1919;

}



.contact-info {

    margin-bottom: 1.5rem;

    padding: 1rem;

    background: rgba(255, 255, 255, 0.05);

    border-radius: 10px;

    border-left: 4px solid var(--primary-color);

}



.contact-info strong {

    color: var(--primary-color);

    display: block;

    margin-bottom: 0.5rem;

    font-size: 0.9rem;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.contact-info span {

    font-size: 1.1rem;

    font-weight: 400;

}



.contact-card p {

    font-weight: 300;

    line-height: 1.7;

    font-size: 1rem;

    color: rgba(255, 255, 255, 0.9);

}



footer {

    padding: 2rem 0;

    text-align: center;

    color: #FFF !important;

    background-color: #1c2f40;

}

footer div {

    display: flex;

    flex-direction: column;

    align-items: center;

}

footer a {

    text-decoration: none;

    color: #FFF !important;

}

@media screen and (max-width: 768px) {

    .contact-grid {

        grid-template-columns: 1fr;

        gap: 2rem;

    }



    .contact-card {

        margin: 0 1rem;

        flex-direction: column-reverse;

    }



    .contact-content {

        padding: 2rem;

    }



    .contact-image {

        height: 200px;

    }

}



.footer {

    background: var(--dark);

    color: white;

    text-align: center;

    padding: 2rem 0;

}



.footer p {

    font-weight: 300;

}





html {

    scroll-behavior: smooth;

}

.section .section-intest {

    width: 100%;

    text-align: center;

    margin-bottom: 2rem;



}



.section .section-intest h1 {

    font-size: 2.6rem;

}



@media screen and (max-width: 970px) {

    .hero-title .line-1,.hero-title .line-2 {

        font-size: 3.5rem;

    }

    .pillars-grid {

        flex-direction: column;

    }

    .hero-inner {

       font-size: 4rem;

        top: 25%;

    }

    .about-image {

        height: 250px;

        margin-top: 2rem;

        max-width: -webkit-fill-available;

    }



    .nav-menu {



        position: fixed;

        /* display: none; */

        left: -100%;

        border-radius: 0;

        top: 0;

        flex-direction: column;

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

        backdrop-filter: blur(15px);

        width: 80%;

        right: 0;

        left: auto;

        transform: translateX(100%);

        --webkit-transform: translateY(100%);

        -o-transform: translateY(100%);

        text-align: center;

        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        --webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        -o-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

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

        border: 1px solid rgba(143, 226, 176, 0.3);

        padding: 20vh 0;

    }



    .nav-menu.active {

        transform: translateX(0);

        --webkit-transform: translateY(0);

        -o-transform: translateY(0);

        height: 100vh;

        width: 100vw;

        /* display: block; */

    }



    .nav-menu li {

        margin: 0.5rem 0;

    }



    .nav-menu a {

        font-size: 1rem;

        padding: 0.8rem 1.5rem;

        display: block;

        border-radius: 12px;

        color: var(--secondary-color);

        font-weight: 500;

        transition: all 0.3s ease;

        --webkit-transition: all 0.3s ease;

        -o-transition: all 0.3s ease;

        margin: 0 1rem;

    }



    .nav-menu a:hover {

        background: var(--primary-color);

        color: var(--dark);

        transform: translateY(-2px);

        --webkit-transform: translateY(-2px);

        -o-transform: translateY(-2px);

    }



    .hamburger {

        display: flex;

        flex-direction: column;

        cursor: pointer;

        padding: 0.5rem;

        top: 0;

        left: 0;

    }



    .hamburger span {

        width: 25px;

        height: 3px;

        background: #FFF;

        margin: 3px 0;

        transition: 0.3s;

        --webkit-transition: 0.3s;

        -o-transition: 0.3s;

        border-radius: 2px;

    }



    .hamburger.active span:nth-child(1) {

        transform: rotate(-45deg) translate(-5px, 6px);

        --webkit-transform: rotate(-45deg) translate(-5px, 6px);

        -o-transform: rotate(-45deg) translate(-5px, 6px);

    }



    .hamburger.active span:nth-child(2) {

        opacity: 0;

    }



    .hamburger.active span:nth-child(3) {

        transform: rotate(45deg) translate(-5px, -6px);

        --webkit-transform: rotate(45deg) translate(-5px, -6px);

        -o-transform: rotate(45deg) translate(-5px, -6px);

    }



    .nav-placeholder {

        display: none;

    }



    .language-switcher {

        gap: 0.3rem;

    }



    .lang-btn {

        padding: 0.4rem 0.6rem;

        font-size: 0.75rem;

    }



    .lang-btn .lang-text {

        font-size: 0.8rem;

    }



}

@media screen and (max-width: 768px) {

    .hero-subtitle {

        font-size: 1.2rem;

    }



    .about-grid {

        grid-template-columns: 1fr;

        gap: 2rem;

    }



    .section-title {

        font-size: 2.2rem;

    }



    .expertise::before,

    .expertise::after {

        width: 350px;

        height: 350px;

        opacity: 0.2;

    }



    .values-grid,

    .services-grid,

    .expertise-list,

    .tech-grid,

    .contact-grid {

        grid-template-columns: 1fr;

    }



    .stat-number {

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

    }



    .stat-label {

        font-size: 0.85rem;

    }

    .tech-card {

        flex-direction: column;

    }

    .tech-image img {

        height: 300px;

    }

}

@media (max-width: 678px) {



    .about-grid,.about-grid:nth-child(even) {

        flex-direction: column;

    }

    .hero-title .line-1, .hero-title .line-2 {

        font-size: 2.5rem;

    }



}

@media (max-width: 480px) {

    .container {

        padding: 0 1rem;

    }



    .hero-.hero-title .line-1, .hero-title .line-2 {

        font-size: 2rem;

    }

    .hero-subtitle {

        font-size: 1rem;

    }



    .section {

        padding: 3rem 0;

    }



    .section-title {

        font-size: 1.8rem;

    }



    .about-text p {

        font-size: 1.4rem !important;

        line-height: 1.4 !important;

    }

    .value-card,

    .pillar-card,

    .service-card,

    .tech-card,

    .contact-card {

        padding: 1.5rem;

    }



    .expertise::before {

        left: 50%;

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

        --webkit-transform: translate(-50%, -50%);

        -o-transform: translate(-50%, -50%);



        width: 250px;

        height: 250px;

        opacity: 0.15;

    }



    .expertise::after {

        display: none;

    }



    .stats-grid {

        grid-template-columns: 1fr;

    }



    .stat-card {

        padding: 1.5rem 1.2rem;

    }

}



#process {

    background-color: #FFF;

}

#process p {

    margin-top: 2.5rem;

}