@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
    --primary: #f97316;
    --primary-light: #fb923c;
    --secondary: #0b2239;
    --accent: #0f766e;
    --background: #07131f;
    --card-bg: rgba(255, 255, 255, .05);
    --border: rgba(255, 255, 255, .08);
    --text: #ffffff;
    --text-light: #c7d2de;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--background);
    color: var(--text);
    overflow-x: hidden;
}

/* ================= BACKGROUND ================= */

.background {
    position: fixed;
    inset: 0;
    z-index: -2;

    background:
        radial-gradient(circle at top left, var(--primary) 0%, transparent 28%),
        radial-gradient(circle at bottom right, var(--accent) 0%, transparent 30%),
        linear-gradient(135deg, #07131f, #0d2238);
}

.background::after {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(90px);
}


.services {

    width: min(1300px, 92%);
    margin: 120px auto;
}

.services h2 {

    text-align: center;

    font-size: 48px;

    font-weight: 700;

    margin-bottom: 60px;
}

.cards {

    display: grid;

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

    gap: 30px;
}

.card {

    background: rgba(255, 255, 255, .05);

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 24px;

    overflow: hidden;

    backdrop-filter: blur(18px);

    transition: .4s;
}

.card:hover {

    transform: translateY(-12px);

    border-color: rgba(249, 115, 22, .5);

    box-shadow:
        0 20px 45px rgba(249, 115, 22, .15),
        0 10px 30px rgba(0, 0, 0, .35);
}

.card img {

    width: 100%;

    height: 240px;

    object-fit: cover;

    transition: .5s;
}

.card:hover img {

    transform: scale(1.05);
}

.content {

    padding: 30px;
}

.content h3 {

    font-size: 24px;

    margin-bottom: 15px;
}

.content p {

    color: #c7d2de;

    line-height: 1.8;
}

/* ================= CONTACT ================= */

.contact {

    width: min(1300px, 92%);

    margin: 130px auto 80px;

    text-align: center;
}

.contact-header {

    max-width: 700px;

    margin: auto auto 60px;
}

.contact-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 22px;

    border-radius: 40px;

    background: rgba(249, 115, 22, .12);

    border: 1px solid rgba(249, 115, 22, .35);

    margin-bottom: 25px;
}

.contact-header h2 {

    font-size: 48px;

    margin-bottom: 20px;
}

.contact-header p {

    color: #c7d2de;

    line-height: 1.8;
}

.contact-grid {

    display: grid;

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

    gap: 25px;
}

.contact-card {

    background: rgba(255, 255, 255, .05);

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 22px;

    padding: 40px 30px;

    backdrop-filter: blur(18px);

    transition: .35s;
}

.contact-card:hover {

    transform: translateY(-10px);

    border-color: rgba(249, 115, 22, .45);

    box-shadow: 0 20px 45px rgba(249, 115, 22, .15);
}

.contact-card .social-icon {

    width: 72px;
    height: 72px;

    margin: auto auto 20px;

    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 30px;

    color: #fff;

    background: linear-gradient(135deg, var(--primary), var(--primary-light));

    box-shadow: 0 15px 35px rgba(249, 115, 22, .35);
}

.contact-card h3 {

    font-size: 24px;

    margin-bottom: 12px;
}

.contact-card p,
.contact-card a {

    color: #c7d2de;

    text-decoration: none;

    transition: .3s;
}

.contact-card a:hover {

    color: var(--primary-light);
}

.social-links {

    display: flex;

    justify-content: center;

    gap: 18px;

    margin-top: 60px;
}

.social-links a {

    width: 60px;
    height: 60px;

    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    color: #fff;

    font-size: 22px;

    text-decoration: none;

    background: rgba(255, 255, 255, .05);

    border: 1px solid rgba(255, 255, 255, .08);

    transition: .35s;
}

.social-links a:hover {

    transform: translateY(-6px);

    background: linear-gradient(135deg, var(--primary), var(--primary-light));

    box-shadow: 0 15px 35px rgba(249, 115, 22, .35);
}

/* ================= FOOTER ================= */

footer {

    padding: 35px 20px;

    text-align: center;

    color: #9fb0bf;

    border-top: 1px solid rgba(255, 255, 255, .08);

    margin-top: 80px;
}

footer strong {

    color: #fff;
}

::-webkit-scrollbar {

    width: 10px;
}

::-webkit-scrollbar-track {

    background: #07131f;
}

::-webkit-scrollbar-thumb {

    background: linear-gradient(var(--primary),
            var(--primary-light));

    border-radius: 50px;
}



/* ================= HERO ================= */

.hero {

    width: min(1400px, 90%);
    min-height: 100vh;

    margin: auto;
    padding: 80px 0;

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

    position: relative;
}

/* ================= Background Glow ================= */

.hero-blur {

    position: absolute;
    border-radius: 50%;
    filter: blur(160px);
    z-index: -2;
}

/* ================= Company ================= */

.company-logo {

    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 30px;
}

.logo-circle {

    width: 75px;
    height: 75px;

    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    background: linear-gradient(135deg, #f97316, #fb923c);

    color: #fff;

    font-size: 30px;

    box-shadow: 0 15px 35px rgba(249, 115, 22, .35);
}

.company-info {

    display: flex;
    flex-direction: column;
}

.company-name {

    font-size: 34px;
    font-weight: 700;

    letter-spacing: 2px;
}

.company-subtitle {

    color: #9fb3c8;

    letter-spacing: 4px;

    font-size: 14px;
}

/* ================= Badge ================= */

.badge {

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 12px 24px;

    border-radius: 50px;

    background: rgba(255, 255, 255, .08);

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

    backdrop-filter: blur(20px);

    margin-bottom: 30px;
}

.badge i {

    color: #f97316;
}

/* ================= Title ================= */

.hero h1 {

    font-size: 72px;

    line-height: 1.08;

    font-weight: 800;

    margin-bottom: 25px;

    background: linear-gradient(90deg, #ffffff, #d7f5ff);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ================= Paragraph ================= */

.hero p {

    color: #b7c4d3;

    font-size: 19px;

    line-height: 1.9;

    max-width: 650px;

    margin-bottom: 40px;
}

/* ================= Buttons ================= */

.buttons {

    display: flex;
    gap: 20px;

    margin-bottom: 55px;

    flex-wrap: wrap;
}

.buttons a {

    text-decoration: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 18px 38px;

    border-radius: 50px;

    font-weight: 600;

    transition: .35s;
}

.primary {

    color: #fff;

    background: linear-gradient(135deg, #f97316, #fb923c);

    box-shadow: 0 18px 35px rgba(249, 115, 22, .35);
}

.primary:hover {

    transform: translateY(-6px);

    box-shadow: 0 25px 45px rgba(249, 115, 22, .45);
}

.secondary {

    color: #fff;

    border: 1px solid rgba(255, 255, 255, .15);

    background: rgba(255, 255, 255, .05);
}

.secondary:hover {

    background: rgba(255, 255, 255, .1);

    transform: translateY(-6px);
}

/* ================= Stats ================= */

.stats {

    display: flex;

    gap: 25px;

    flex-wrap: wrap;
}

.stat-card {

    flex: 1;

    min-width: 170px;

    background: rgba(255, 255, 255, .05);

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 20px;

    padding: 25px;

    text-align: center;

    backdrop-filter: blur(20px);

    transition: .35s;
}

.stat-card:hover {

    transform: translateY(-8px);

    border-color: #f97316;
}

.stat-card i {

    font-size: 28px;

    color: #f97316;

    margin-bottom: 18px;
}

.stat-card h2 {

    font-size: 34px;

    color: #fff;

    margin-bottom: 8px;
}

.stat-card span {

    color: #9fb3c8;
}

/* ================= Right Side ================= */

.hero-image {

    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image img {

    width: 100%;
    max-width: 650px;

    position: relative;

    z-index: 3;

    animation: float 5s ease-in-out infinite;

    filter: drop-shadow(0 30px 45px rgba(0, 0, 0, .45));
}

/* ================= Orange Glow ================= */

.image-glow {

    position: absolute;

    width: 420px;
    height: 420px;

    background: #f97316;

    border-radius: 50%;

    filter: blur(120px);

    opacity: .25;

    z-index: 1;
}

/* ================= Floating Circles ================= */

.circle {

    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, .12);

    animation: rotate 18s linear infinite;
}

.circle-1 {

    width: 460px;
    height: 460px;
}

.circle-2 {

    width: 560px;
    height: 560px;

    animation-duration: 25s;
}

.circle-3 {

    width: 660px;
    height: 660px;

    animation-duration: 35s;
}

/* ================= Animations ================= */

@keyframes float {

    0%,
    100% {

        transform: translateY(0);
    }

    50% {

        transform: translateY(-18px);
    }
}

@keyframes rotate {

    from {

        transform: rotate(0deg);
    }

    to {

        transform: rotate(360deg);
    }
}

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

@media (max-width:1200px) {

    .hero {

        grid-template-columns: 1fr;
        text-align: center;
        gap: 70px;
        padding: 120px 0 80px;
    }

    .hero-content {

        order: 2;
    }

    .hero-image {

        order: 1;
    }

    .company-logo {

        justify-content: center;
    }

    .hero p {

        margin-inline: auto;
    }

    .buttons {

        justify-content: center;
    }

    .stats {

        justify-content: center;
    }

    .hero-image img {

        max-width: 550px;
    }

    .circle-3 {

        width: 520px;
        height: 520px;
    }

    .circle-2 {

        width: 440px;
        height: 440px;
    }

    .circle-1 {

        width: 360px;
        height: 360px;
    }

}


@media (max-width:992px) {

    .hero {

        padding-top: 140px;
    }

    .hero h1 {

        font-size: 58px;
    }

    .hero p {

        font-size: 18px;
    }

    .stats {

        gap: 18px;
    }

    .stat-card {

        min-width: 200px;
    }

    .services h2,
    .contact-header h2 {

        font-size: 42px;
    }

    .cards {

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

    .contact-grid {

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

}


@media (max-width:768px) {

    .hero {

        width: 92%;
        gap: 50px;
    }

    .company-logo {

        flex-direction: column;
        gap: 15px;
    }

    .company-name {

        font-size: 28px;
    }

    .company-subtitle {

        letter-spacing: 2px;
        font-size: 12px;
    }

    .hero h1 {

        font-size: 42px;
        line-height: 1.15;
    }

    .hero p {

        font-size: 16px;
    }

    .buttons {

        flex-direction: column;
        width: 100%;
    }

    .buttons a {

        width: 100%;
    }

    .stats {

        display: grid;
        grid-template-columns: 1fr;
    }

    .stat-card {

        width: 100%;
    }

    .hero-image {
        margin-bottom: 20px;
    }

    .hero-image img {

        max-width: 360px;
    }

    .image-glow {

        width: 260px;
        height: 260px;
    }

    .circle-1 {

        width: 260px;
        height: 260px;
    }

    .circle-2 {

        width: 320px;
        height: 320px;
    }

    .circle-3 {

        width: 380px;
        height: 380px;
    }

    .cards {

        grid-template-columns: 1fr;
    }

    .contact-grid {

        grid-template-columns: 1fr;
    }

    .services h2,
    .contact-header h2 {

        font-size: 34px;
    }

}


@media (max-width:480px) {

    .hero {

        padding-top: 120px;
    }

    .logo-circle {

        width: 60px;
        height: 60px;
        font-size: 22px;
    }

    .company-name {

        font-size: 24px;
    }

    .hero h1 {

        font-size: 34px;
    }

    .hero p {

        font-size: 15px;
    }

    .badge {

        font-size: 14px;
        padding: 10px 18px;
    }

    .buttons a {

        padding: 15px 20px;
    }

    .hero-image {
        margin-bottom: 50px;
    }

    .hero-image img {

        max-width: 300px;
    }

    .stat-card {

        padding: 20px;
    }

    .stat-card h2 {

        font-size: 28px;
    }

    .social-links {

        flex-wrap: wrap;
    }

    .social-links a {

        width: 50px;
        height: 50px;
    }

}