/* =====================================================
   INCYCOS
   PROFESSIONAL WEBSITE CSS
===================================================== */


/* =====================================================
   VARIABLES
===================================================== */

:root {

    --bg: #050816;
    --bg-secondary: #080d20;

    --card: rgba(13, 21, 48, 0.72);

    --text: #f7f9ff;
    --muted: #aeb8d0;

    --cyan: #00d4ff;
    --blue: #2563eb;
    --orange: #ff6b00;
    --purple: #8a2be2;
    --pink: #ff3cac;
    --green: #35e5aa;

    --border: rgba(255, 255, 255, 0.11);

    --radius: 24px;

    --shadow:
        0 25px 80px rgba(0, 0, 0, 0.4);

}


/* =====================================================
   RESET
===================================================== */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family: "Inter", Arial, sans-serif;

    background: var(--bg);

    color: var(--text);

    line-height: 1.6;

    overflow-x: hidden;

}


body.light {

    --bg: #f6f8ff;

    --bg-secondary: #ffffff;

    --card: rgba(255, 255, 255, 0.85);

    --text: #101a3d;

    --muted: #53607c;

    --border: rgba(15, 30, 70, 0.12);

}


a {

    text-decoration: none;

    color: inherit;

}


button,
input,
textarea,
select {

    font-family: inherit;

}


img {

    max-width: 100%;

    display: block;

}


/* =====================================================
   PRELOADER
===================================================== */

#preloader {

    position: fixed;

    inset: 0;

    z-index: 99999;

    background: #050816;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 12px;

    transition: 0.6s ease;

}


#preloader.hide {

    opacity: 0;

    visibility: hidden;

}


.loader-ring {

    width: 55px;

    height: 55px;

    border-radius: 50%;

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

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

    animation: spin 1s linear infinite;

}


.loader-text {

    font-family: "Space Grotesk";

    font-size: 22px;

    letter-spacing: 6px;

    font-weight: 700;

}


.loader-subtitle {

    font-size: 9px;

    letter-spacing: 3px;

    color: var(--muted);

}


@keyframes spin {

    to {
        transform: rotate(360deg);
    }

}


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

.navbar {

    height: 78px;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 6%;

    background: rgba(5, 8, 22, 0.55);

    backdrop-filter: blur(18px);

    border-bottom: 1px solid transparent;

    transition: .3s ease;

}


.navbar.scrolled {

    background: rgba(5, 8, 22, .9);

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

}


body.light .navbar {

    background: rgba(246,248,255,.85);

}


.logo img {

    width: 145px;

    height: 54px;

    object-fit: contain;

    border-radius: 8px;

}


nav {

    display: flex;

    align-items: center;

    gap: 27px;

}


.nav-link,
.drop-button {

    border: none;

    background: transparent;

    color: var(--muted);

    font-size: 13px;

    cursor: pointer;

    transition: .25s ease;

}


.nav-link:hover,
.nav-link.active,
.drop-button:hover {

    color: var(--text);

}


.contact-nav {

    padding: 10px 17px;

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

    border-radius: 50px;

    color: var(--cyan)!important;

}


.theme-toggle {

    width: 38px;

    height: 38px;

    border-radius: 50%;

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

    background: transparent;

    color: var(--text);

    cursor: pointer;

}


/* Dropdown */

.nav-dropdown {

    position: relative;

}


.dropdown-menu {

    position: absolute;

    top: 35px;

    left: -20px;

    width: 220px;

    padding: 10px;

    border-radius: 16px;

    background: rgba(5,8,22,.98);

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

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: .25s ease;

}


.nav-dropdown:hover .dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


.dropdown-menu a {

    display: block;

    padding: 10px 12px;

    border-radius: 9px;

    color: var(--muted);

    font-size: 12px;

}


.dropdown-menu a:hover {

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

    color: var(--cyan);

}


/* Mobile menu */

.menu-toggle {

    display: none;

    background: transparent;

    border: none;

    cursor: pointer;

}


.menu-toggle span {

    display: block;

    width: 27px;

    height: 2px;

    background: var(--text);

    margin: 5px;

}


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

.hero {

    min-height: 900px;

    padding: 150px 7% 100px;

    position: relative;

    display: flex;

    align-items: center;

    gap: 5%;

    overflow: hidden;

}


.hero-background {

    position: absolute;

    inset: 0;

    overflow: hidden;

}


.grid-background {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 65px 65px;

    opacity: .5;

}


.particles {

    position: absolute;

    inset: 0;

    background-image:

        radial-gradient(
            circle,
            rgba(0,212,255,.6) 1px,
            transparent 1px
        );

    background-size: 90px 90px;

    opacity: .09;

    animation: particleMove 25s linear infinite;

}


@keyframes particleMove {

    to {

        background-position:
            180px 180px;

    }

}


.glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

}


.glow-one {

    width: 500px;

    height: 500px;

    right: 0;

    top: 25%;

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

}


.glow-two {

    width: 400px;

    height: 400px;

    left: 0;

    bottom: 0;

    background: rgba(138,43,226,.1);

}


.hero-content {

    position: relative;

    z-index: 2;

    width: 55%;

}


.hero-label {

    color: var(--cyan);

    font-size: 10px;

    letter-spacing: 2.5px;

    font-weight: 700;

}


.status-dot {

    display: inline-block;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow: 0 0 15px var(--cyan);

    margin-right: 7px;

}


.hero h1 {

    font-family: "Space Grotesk";

    font-size: clamp(55px, 7vw, 95px);

    line-height: 1.02;

    letter-spacing: -5px;

    margin: 28px 0;

}


.orange {

    color: var(--orange);

}


.cyan {

    color: var(--cyan);

}


.purple {

    color: #9a7cff;

}


.hero-description {

    max-width: 620px;

    color: var(--muted);

    font-size: 18px;

}


.hero-buttons {

    display: flex;

    gap: 15px;

    margin-top: 32px;

}


.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 14px 23px;

    border-radius: 50px;

    font-size: 13px;

    font-weight: 700;

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

    transition: .25s ease;

    cursor: pointer;

}


.primary-btn {

    color: white;

    border: none;

    background:

        linear-gradient(
            100deg,
            var(--blue),
            var(--cyan)
        );

    box-shadow:
        0 12px 40px rgba(0,212,255,.18);

}


.primary-btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 18px 55px rgba(0,212,255,.3);

}


.secondary-btn {

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

}


.secondary-btn:hover {

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

}


.hero-stats {

    display: flex;

    gap: 30px;

    margin-top: 55px;

}


.stat {

    display: flex;

    flex-direction: column;

}


.stat strong {

    font-size: 12px;

    color: var(--cyan);

}


.stat span {

    color: var(--muted);

    font-size: 10px;

    letter-spacing: 1px;

}


/* Hero visual */

.hero-visual {

    width: 45%;

    height: 530px;

    position: relative;

    display: grid;

    place-items: center;

}


.outer-orbit,
.middle-orbit,
.inner-orbit {

    position: absolute;

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

    border-radius: 50%;

}


.outer-orbit {

    width: 540px;

    height: 540px;

}


.middle-orbit {

    width: 430px;

    height: 430px;

    border-color: rgba(138,43,226,.18);

}


.inner-orbit {

    width: 330px;

    height: 330px;

    border-color: rgba(0,212,255,.2);

}


.technology-card {

    width: 315px;

    height: 395px;

    position: relative;

    z-index: 3;

    border-radius: 30px;

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

    background:
        linear-gradient(
            145deg,
            rgba(16,32,72,.92),
            rgba(5,8,22,.78)
        );

    backdrop-filter: blur(20px);

    box-shadow: var(--shadow);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 16px;

    overflow: hidden;

    transform: rotate(4deg);

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

}


@keyframes cardFloat {

    50% {

        transform:
            rotate(1deg)
            translateY(-13px);

    }

}


.system-status {

    position: absolute;

    top: 20px;

    left: 20px;

    right: 20px;

    font-size: 8px;

    letter-spacing: 1.5px;

    color: var(--muted);

}


.system-status > span:last-child {

    float: right;

    color: var(--green);

}


.core-circle {

    width: 120px;

    height: 120px;

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

    border-radius: 50%;

    display: grid;

    place-items: center;

    box-shadow:
        0 0 50px rgba(0,212,255,.2);

}


.core-symbol {

    font-size: 48px;

    color: var(--cyan);

}


.technology-card h3 {

    text-align: center;

    font-family: "Space Grotesk";

    letter-spacing: 3px;

    font-size: 18px;

}


.network {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 8px;

    color: var(--muted);

}


.network i {

    width: 30px;

    border-top: 1px dashed var(--border);

}


.scan-line {

    position: absolute;

    left: 0;

    right: 0;

    height: 1px;

    background: var(--cyan);

    box-shadow: 0 0 20px var(--cyan);

    animation: scanning 3s linear infinite;

}


@keyframes scanning {

    from {
        top: -5%;
    }

    to {
        top: 105%;
    }

}


/* =====================================================
   MARQUEE
===================================================== */

.marquee {

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

    padding: 18px 0;

    overflow: hidden;

    white-space: nowrap;

    color: var(--muted);

    font-family: "Space Grotesk";

    letter-spacing: 3px;

}


.marquee-track {

    display: inline-block;

    animation:
        marqueeMove 22s linear infinite;

}


.marquee span {

    color: var(--cyan);

    margin: 0 25px;

}


@keyframes marqueeMove {

    to {

        transform: translateX(-40%);

    }

}


/* =====================================================
   GENERAL SECTION
===================================================== */

.section {

    padding: 120px 7%;

    position: relative;

}


.section-label {

    color: var(--muted);

    font-size: 10px;

    letter-spacing: 2px;

    font-weight: 700;

    margin-bottom: 45px;

}


.two-column {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8%;

}


.two-column h2,
.section-heading h2,
.solution-content h2,
.contact-information h2 {

    font-family: "Space Grotesk";

    font-size: clamp(42px, 5vw, 68px);

    line-height: 1.04;

    letter-spacing: -3px;

}


.two-column h2 span,
.section-heading h2 span,
.solution-content h2 span,
.contact-information h2 span {

    color: var(--cyan);

}


.about-text {

    color: var(--muted);

}


.large-text {

    color: var(--text)!important;

    font-size: 19px;

    margin-bottom: 22px;

}


.text-link {

    display: inline-block;

    color: var(--cyan);

    font-weight: 700;

    margin-top: 15px;

}


/* =====================================================
   PILLARS
===================================================== */

.pillars {

    display: grid;

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

    gap: 18px;

    margin-top: 70px;

}


.pillar {

    position: relative;

    padding: 30px;

    min-height: 270px;

    border-radius: var(--radius);

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.015)
        );

    transition: .3s ease;

}


.pillar:hover {

    transform: translateY(-7px);

    border-color:
        rgba(0,212,255,.35);

}


.pillar-number {

    color: var(--orange);

    font-size: 11px;

}


.pillar-icon {

    font-size: 28px;

    margin-top: 25px;

}


.pillar h3 {

    font-family: "Space Grotesk";

    font-size: 26px;

    margin: 12px 0;

}


.pillar p {

    color: var(--muted);

    font-size: 14px;

}


/* =====================================================
   SERVICES
===================================================== */

.services-section {

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0,212,255,.025),
            transparent
        );

}


.section-heading {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 50px;

    margin-bottom: 50px;

}


.section-heading > p {

    max-width: 430px;

    color: var(--muted);

}


.services-grid {

    display: grid;

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

    gap: 18px;

}


.service-card {

    position: relative;

    min-height: 320px;

    padding: 30px;

    border-radius: var(--radius);

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

    background: var(--card);

    overflow: hidden;

    transition: .3s ease;

}


.service-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow);

}


.service-card::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    right: -70px;

    top: -70px;

    border-radius: 50%;

    filter: blur(35px);

    opacity: .14;

}


.orange-card::after {
    background: var(--orange);
}

.blue-card::after {
    background: var(--blue);
}

.cyan-card::after {
    background: var(--cyan);
}

.purple-card::after {
    background: var(--purple);
}

.pink-card::after {
    background: var(--pink);
}

.green-card::after {
    background: var(--green);
}


.service-icon {

    width: 52px;

    height: 52px;

    border: 1px solid currentColor;

    border-radius: 14px;

    display: grid;

    place-items: center;

    font-weight: 700;

    margin-bottom: 45px;

}


.orange-card {
    color: var(--orange);
}

.blue-card {
    color: #5d8cff;
}

.cyan-card {
    color: var(--cyan);
}

.purple-card {
    color: #a47aff;
}

.pink-card {
    color: var(--pink);
}

.green-card {
    color: var(--green);
}


.service-number {

    position: absolute;

    top: 30px;

    right: 30px;

    color: var(--muted);

    font-size: 11px;

}


.service-card h3 {

    font-family: "Space Grotesk";

    font-size: 27px;

    color: var(--text);

    margin-bottom: 12px;

}


.service-card p {

    color: var(--muted);

    font-size: 13px;

}


.service-link {

    display: inline-block;

    margin-top: 22px;

    color: currentColor;

    font-size: 12px;

    font-weight: 700;

}


/* =====================================================
   SOLUTIONS
===================================================== */

.solution-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8%;

    align-items: center;

}


.solution-visual {

    min-height: 500px;

    position: relative;

    display: grid;

    place-items: center;

    border-radius: 30px;

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

    background:
        radial-gradient(
            circle,
            rgba(0,212,255,.09),
            transparent 55%
        );

    overflow: hidden;

}


.solution-glow {

    width: 280px;

    height: 280px;

    border-radius: 50%;

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

    box-shadow:
        0 0 100px rgba(0,212,255,.12);

    animation: pulse 4s infinite;

}


@keyframes pulse {

    50% {
        transform: scale(1.1);
        opacity: .6;
    }

}


.solution-center {

    position: absolute;

    text-align: center;

}


.solution-center span {

    color: var(--cyan);

    font-size: 10px;

    letter-spacing: 4px;

}


.solution-center strong {

    display: block;

    margin-top: 10px;

    font-family: "Space Grotesk";

    font-size: 24px;

}


.solution-node {

    position: absolute;

    width: 65px;

    height: 65px;

    border-radius: 50%;

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

    display: grid;

    place-items: center;

    color: var(--cyan);

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

    font-size: 11px;

    font-weight: 700;

    box-shadow:
        0 0 30px rgba(0,212,255,.12);

}


.node-one {
    top: 15%;
    left: 20%;
}

.node-two {
    top: 15%;
    right: 20%;
}

.node-three {
    bottom: 15%;
    left: 20%;
}

.node-four {
    bottom: 15%;
    right: 20%;
}


.solution-content h2 {

    margin-bottom: 40px;

}


.process-item {

    display: flex;

    gap: 20px;

    padding: 22px 0;

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

}


.process-number {

    color: var(--cyan);

    font-size: 12px;

    min-width: 30px;

}


.process-item h3 {

    font-family: "Space Grotesk";

    font-size: 20px;

    margin-bottom: 5px;

}


.process-item p {

    color: var(--muted);

    font-size: 13px;

}


/* =====================================================
   INDUSTRIES
===================================================== */

.industries {

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

}


.industry-grid {

    display: grid;

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

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

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

    margin-top: 50px;

}


.industry-grid div {

    padding: 32px;

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

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

    font-family: "Space Grotesk";

    font-size: 12px;

    letter-spacing: 2px;

    color: var(--muted);

    transition: .25s ease;

}


.industry-grid div:hover {

    color: var(--cyan);

    background:
        rgba(0,212,255,.04);

}


/* =====================================================
   EVENTS
===================================================== */

.event-container {

    display: grid;

    grid-template-columns:
        1.2fr .8fr;

    gap: 40px;

    align-items: center;

    padding: 55px;

    border-radius: 32px;

    border: 1px solid rgba(138,43,226,.3);

    background:
        radial-gradient(
            circle at 75% 50%,
            rgba(138,43,226,.15),
            transparent 40%
        );

}


.small-tag {

    font-size: 10px;

    color: var(--cyan);

    letter-spacing: 2px;

    font-weight: 700;

}


.event-container h2 {

    font-family: "Space Grotesk";

    font-size: clamp(40px, 4vw, 58px);

    line-height: 1.05;

    margin: 20px 0;

}


.event-container h2 span {

    color: #a47aff;

}


.event-container p {

    color: var(--muted);

    max-width: 600px;

    margin-bottom: 28px;

}


.event-visual {

    min-height: 300px;

    position: relative;

    display: grid;

    place-items: center;

}


.event-icon {

    font-size: 70px;

    z-index: 2;

    filter:
        drop-shadow(
            0 0 25px
            rgba(0,212,255,.5)
        );

}


.event-ring {

    position: absolute;

    border-radius: 50%;

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

}


.ring-one {

    width: 160px;

    height: 160px;

}


.ring-two {

    width: 240px;

    height: 240px;

}


.ring-three {

    width: 320px;

    height: 320px;

}


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

.contact-section {

    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(0,212,255,.07),
            transparent 35%
        );

}


.contact-grid {

    display: grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap: 8%;

    align-items: start;

}


.contact-information h2 {

    margin: 20px 0;

}


.contact-information > p {

    max-width: 520px;

    color: var(--muted);

}


.contact-points {

    margin-top: 40px;

}


.contact-points div {

    display: flex;

    gap: 20px;

    padding: 16px 0;

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

}


.contact-points strong {

    color: var(--cyan);

    font-size: 12px;

}


.contact-points span {

    font-size: 13px;

}


/* Form */

.form-container {

    padding: 32px;

    border-radius: 28px;

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

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

    backdrop-filter: blur(20px);

    box-shadow: var(--shadow);

}


.form-row {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 15px;

}


.form-group {

    margin-bottom: 17px;

}


.form-group label {

    display: block;

    color: var(--muted);

    font-size: 11px;

    font-weight: 700;

}


.form-group input,
.form-group textarea,
.form-group select {

    width: 100%;

    margin-top: 7px;

    padding: 13px 14px;

    border-radius: 12px;

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

    background:
        rgba(0,0,0,.18);

    color: var(--text);

    outline: none;

    transition: .2s ease;

}


.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {

    border-color: var(--cyan);

    box-shadow:
        0 0 0 3px
        rgba(0,212,255,.07);

}


.form-group textarea {

    resize: vertical;

}


.form-group select option {

    background: #081027;

    color: white;

}


.submit-button {

    width: 100%;

}


.form-status {

    min-height: 24px;

    text-align: center;

    margin-top: 13px;

    font-size: 12px;

}


.form-status.success {

    color: var(--green);

}


.form-status.error {

    color: #ff7373;

}


.privacy-text {

    color: #68728a;

    text-align: center;

    font-size: 10px;

    margin-top: 10px;

}


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

footer {

    padding: 70px 7% 25px;

    background: #030611;

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

}


.footer-content {

    display: grid;

    grid-template-columns:
        2fr 1fr 1fr 1fr;

    gap: 40px;

}


.footer-brand img {

    width: 150px;

    height: 55px;

    object-fit: contain;

}


.footer-brand p {

    color: var(--muted);

    font-size: 12px;

    margin-top: 12px;

}


.footer-column h4 {

    font-size: 11px;

    letter-spacing: 1.5px;

    margin-bottom: 16px;

}


.footer-column a {

    display: block;

    color: var(--muted);

    font-size: 12px;

    margin: 10px 0;

    transition: .2s;

}


.footer-column a:hover {

    color: var(--cyan);

}


.footer-bottom {

    display: flex;

    justify-content: space-between;

    gap: 20px;

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

    margin-top: 55px;

    padding-top: 20px;

    color: #68728a;

    font-size: 9px;

    letter-spacing: 1px;

}


/* =====================================================
   REVEAL ANIMATION
===================================================== */

.reveal {

    opacity: 0;

    transform:
        translateY(25px);

    transition:
        .8s ease;

}


.reveal.visible {

    opacity: 1;

    transform: none;

}


.delay-one {

    transition-delay: .15s;

}


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

@media(max-width: 1000px) {

    .navbar {

        padding: 10px 5%;

    }


    .menu-toggle {

        display: block;

    }


    nav {

        position: absolute;

        top: 78px;

        left: 4%;

        right: 4%;

        display: none;

        flex-direction: column;

        align-items: stretch;

        padding: 15px;

        background:
            rgba(5,8,22,.98);

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

        border-radius: 18px;

    }


    .navbar.menu-open nav {

        display: flex;

    }


    .nav-link,
    .drop-button {

        padding: 10px;

    }


    .dropdown-menu {

        position: static;

        display: none;

        width: 100%;

        opacity: 1;

        visibility: visible;

        transform: none;

        background: transparent;

        border: none;

    }


    .nav-dropdown:hover .dropdown-menu {

        display: none;

    }


    .nav-dropdown.open .dropdown-menu {

        display: block;

    }


    .hero {

        flex-direction: column;

        padding-top: 140px;

    }


    .hero-content,
    .hero-visual {

        width: 100%;

    }


    .hero-visual {

        height: 450px;

    }


    .two-column,
    .solution-grid,
    .contact-grid,
    .event-container {

        grid-template-columns: 1fr;

    }


    .services-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .pillars {

        grid-template-columns: 1fr;

    }


    .section-heading {

        display: block;

    }


    .section-heading > p {

        margin-top: 20px;

    }


    .industry-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .footer-content {

        grid-template-columns:
            1fr 1fr;

    }

}


@media(max-width: 600px) {

    .navbar {

        height: 70px;

    }


    .logo img {

        width: 125px;

        height: 48px;

    }


    .hero {

        padding:
            120px 5% 70px;

    }


    .hero h1 {

        font-size: 52px;

        letter-spacing: -3px;

    }


    .hero-description {

        font-size: 15px;

    }


    .hero-buttons {

        flex-direction: column;

        align-items: stretch;

    }


    .hero-stats {

        gap: 17px;

        flex-wrap: wrap;

    }


    .hero-visual {

        height: 390px;

    }


    .technology-card {

        width: 280px;

        height: 360px;

    }


    .outer-orbit {

        width: 350px;

        height: 350px;

    }


    .middle-orbit {

        width: 300px;

        height: 300px;

    }


    .inner-orbit {

        width: 240px;

        height: 240px;

    }


    .section {

        padding: 80px 5%;

    }


    .two-column h2,
    .section-heading h2,
    .solution-content h2,
    .contact-information h2 {

        font-size: 42px;

        letter-spacing: -2px;

    }


    .services-grid {

        grid-template-columns: 1fr;

    }


    .form-row {

        grid-template-columns: 1fr;

    }


    .form-container {

        padding: 22px;

    }


    .event-container {

        padding: 28px;

    }


    .industry-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .industry-grid div {

        padding: 20px;

        font-size: 10px;

    }


    .footer-content {

        grid-template-columns: 1fr;

    }


    .footer-bottom {

        display: block;

    }


    .footer-bottom span {

        display: block;

        margin: 8px 0;

    }

}