/* Headings: Montserrat, Orbitron, or Bebas Neue*/
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Tektur:wght@400..900&display=swap&family=Orbitron:wght@400..900&display=swap');

/* Body Text: Inter, Open Sans, or Poppins */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

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

:root {
    /* Background */
    --Light-Gray: #F5F7FA;
    /* Primary color(Accent and CTAs) */
    --Electric-Blue: #007BFF;
    /* Text */
    --Dark-Gray: #2D2D2D;
    /* Secondary accents */
    --Cool-Silver: #B0BEC5;
/* ///////////////////////////////////////////////////// */
    /* Dark mode */
    /* Background  */
    --Deep-Charcoal: #121212;
    /* Primary Color (Accent & CTAs): */
     --Hyper-Blue: #3F8EFC;
    /* Text  */
    --Light-Grey: #E0E0E0; 
    /* Secondary Accents  */
    --Futuristic-Teal: #18A999;
}

body {
    background: var(--Light-Gray);
    font-family: "Open Sans", sans-serif;
    color: var(--Dark-Gray);
    cursor: default;
    scroll-behavior: smooth;
}

img {
    width: 100%;
    max-width: 100%;
}

ul {
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

h1 {
    font-family: 'Tektur', sans-serif;
}

button {
    cursor: pointer;
}

.loader {
    position: relative;
    width: 75px;
    height: 100px;
    background-repeat: no-repeat;
    background-image: linear-gradient(var(--Hyper-Blue) 50px, transparent 0), linear-gradient(var(--Electric-Blue) 50px, transparent 0), linear-gradient(var(--Deep-Charcoal) 50px, transparent 0); 
    background-size: 12px 100%;
    background-position: 0px 90px, 15px 78px, 30px 66px, 45px 58px, 60px 50px;
    transform: rotate(-15deg);
    border-radius: 8px;
    animation: pillerPushUp 4s linear infinite;
  }
  
  .loader:after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 10px;
    height: 10px;
    background: var(--Electric-Blue);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
    animation: ballStepUp 4s linear infinite;
  }

@keyframes pillerPushUp {
  0% , 40% , 100% {
    background-position: 0px 90px, 15px 78px, 30px 66px
}
  50% ,  90% {
    background-position: 0px 50px, 15px 58px, 30px 66px, 45px 78px, 60px 90px
}
}

@keyframes ballStepUp {
    0% {transform: translate(0,0)}
    5% {transform: translate(4px, -7px)}
    10% {transform: translate(8px, -14px)}
    15% {transform: translate(15px, -10px)}
    20% {transform: translate(23px, -15px)}
    25% {transform: translate(27px, -22px)}
    30% {transform: translate(30px, -20px)}
    35% {transform: translate(31px, -10px)}
    40% {transform: translate(32px, 0)}
    45% {transform: translate(31px, -10px)}
    50% {transform: translate(30px, -20px)}
    55% {transform: translate(27px, -25px)}
    60% {transform: translate(23px, -30px)}
    65% {transform: translate(19px, -27px)}
    70% {transform: translate(15px, -25px)}
    75% {transform: translate(11px, -32px)}
    80% {transform: translate(7px, -37px)}
    85% {transform: translate(5px, -20px)}
    90% {transform: translate(3px, -10px)}
    95% {transform: translate(2px, -6px)}
    100% {transform: translate(0,0)}
  }

.loader-container {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(10px);
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 30;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
    

/* Navigation styles */
.nav-links {
    display: none;
}

.hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.left {
    background: var(--Deep-Charcoal);
    display: none;
    width: 100%;
    text-align: center;
}

.left img {
    width: 50%;
    margin: 0 auto;
}

.top {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
}

.nav-cta {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
}


#hamburger, #close {
    width: 11%;
}

.logo {
    font-family: "Orbitron", sans-serif;
    font-size: 2rem;
}

nav.mobile-nav {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    opacity: 0;
    visibility: hidden;
    z-index: 100;
    transform: translateX(-100%);
    transition: all 0.5s ease-in;
}

nav.mobile-nav.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: 0 20px;
    margin-top: 30px;
}

.mobile-nav-links li a {
    color: var(--Electric-Blue);
    font-size: 1.3rem;
    font-family: "Open Sans", sans-serif;
}

/* Hero styles */
.welcome {
    font-size: 3.8em;
    margin: 30px auto;
    letter-spacing: 0.5rem;
    width: 95%;
    text-align: center;
}

.right-paragraph {
    padding: 0 10px;
}

.right-paragraph p {
    font-size: 1.1rem;
    margin: 20px auto;
    width: 90%;
    line-height: 1.5rem;
}

.right-paragraph p strong {
    font-size: 1.2rem;
    color: var(--Electric-Blue);
}

/* About styles */
.about-us {
    padding: 15px;
}

.about-us-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-us-container h2 {
    font-size: 2rem;
    font-family: "Tektur", sans-serif;
}

.about-us-container h3 {
    font-size: 1.7rem;
    font-family: "Tektur", sans-serif;
}

.team {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.team-member {
    background: var(--Cool-Silver);
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-self: flex-end;
    padding: 10px;
    border-radius: 7px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.team-member:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.team-member img {
    border-radius: 7px;
    width: 330px;
    height: 350px;
    object-fit: fill;
    margin: 0 auto;
    display: block;
}

.team-member h4 {
    font-size: 1.3rem;
}

.position {
    font-size: .85rem;
    margin-bottom: 20px;
}

.timeline {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 20px auto;
}

.values h3 {
    margin-bottom: 15px;
}

.values ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Products styles */
.products {
    padding: 15px;
}

.products-container, .product-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.products-container h2 {
    font-size: 2rem;
    font-family: "Tektur", sans-serif;
}

.product-item {
    background: var(--Cool-Silver);
    color: var(--Dark-Gray);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 90%;
    margin: 0 auto;
}

.product-item img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 270px;
    max-width: 100%;
}

.product-item p {
    font-size: .85rem;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 30px;
}

.product-item h3 {
    width: 90%;
    margin: 5px auto;
}

/* Testimonials styles */
.testimonials {
    padding: 15px;
}

.testimonials-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.testimonials-container h2 {
    font-size: 2rem;
    font-family: "Tektur", sans-serif;
}

.testimonial-item {
    background: #ececec;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    padding: 25px;
    border-radius: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    margin: 10px 0;
}

.testimonial-item p {
    margin-bottom: 10px;
}

.testimonial-item h4 {
    font-style: italic;
}

.testimonial-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Blog section */
.blog {
    padding: 15px;
}

.blog-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog-container h2 {
    font-size: 2rem;
    font-family: "Tektur", sans-serif;
}

.blog-posts {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog-post {
    background: var(--Cool-Silver);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 85%;
    margin: 0 auto;
}

.blog-post img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    max-width: 100%;
}

.blog-post p {
    font-size: .85rem;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 20px;
}

.blog-post h3 {
    width: 90%;
    margin: 5px auto;
}

/* Contact styles */
.contact {
    padding: 15px;
}

.contact-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-left {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-left h2 {
    font-size: 2rem;
    font-family: "Tektur", sans-serif;
}

form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

form label {
    font-size: 1.1rem;
    font-weight: 600;
}

#name, #email, #message {
    font-family: "Open-sans", sans-serif;
    padding: 15px;
    border: none;
    border-radius: 7px;
    font-size: .9rem;
    font-style: italic;
}

#submit {
    font-family: "Open-sans", sans-serif;
    font-weight: 600;
    background: var(--Electric-Blue);
    font-size: .9rem;
    padding: 15px;
    border: none;
    border-radius: 7px;
    color: #fff;
}

.location {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 10px auto;
}

.socials a img {
    width: 38px;
    height: 38px;
}

/* Footer styles */
.footer-container {
    background: var(--Electric-Blue);
    color: #fff;
    font-size: .8rem;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Map styles */
#map {
    height: 300px;
    width: 100%;
    border-radius: 7px;
}

@media (min-width: 700px) {
    .nav-cta, .mobile-nav {
        display: none;
    }

    .left {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--Deep-Charcoal);
        height: 100%;
        width: 50%;
    }

    .right {
        padding-top: 20px;
        width: 60%;
    }

    .nav-links {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 60%;
        margin: 0 auto;
    }

    .nav-links li a {
        color: var(--Dark-Gray);
        text-decoration: none;
        font-size: .7rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    .nav-links li a:hover {
        text-decoration: underline;
        text-underline-offset: 5px;
    }

    .hero-container {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 0px;
        height: 50vh;
    }

    h1.welcome {
        font-size: 3rem;
        margin: 20px auto;
        margin-top: 50px;
    }
    
    .right-paragraph p {
        font-size: .8rem;
    }
    
    .right-paragraph p strong {
        font-size: 1rem;
    }

    .about-us {
        padding-top: 55px;
        width: 95%;
        margin: 0 auto;
        max-width: 1200px;
    }

    .about-us-container h2, .about-us-container h3, .about-us-container p {
       text-align: center;
       line-height: 1.5rem;
    }

    .team {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    
    .team h3 {
        margin-top: 20px;
    }

    .team-member {
        width: 350px;
        margin: 0 auto;
    }

    p.position {
        text-align: left;
    }

    .event p {
        margin-left: 0;
        text-align: left;
    }

    .timeline {
        margin: 30px;
    }

    .event {
        width: 60%;
        margin: 0 auto;
    }

    .values ul {
        width: 55%;
        margin: 0 auto;
    }

    .products {
        padding-top: 55px;
        width: 90%;
        margin: 0 auto;
        max-width: 1200px;
    }

    .products-container h2 {
        text-align: center;
    }

    .products-container p {
        width: 70%;
        margin: 0 auto;
    }

    .product-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-top: 20px;
    }

    .product-item {
        width: 100%;
    }

    .product-item p {
        width: 90%;
        margin: 0 auto;
        margin-bottom: 30px;
    }

    .testimonials {
        width: 90%;
        margin: 20px auto;
        max-width: 1200px;
    }

    .testimonials h2 {
        text-align: center;
    }

    .testimonial-item {
        width: 70%;
        margin: 10px auto;
    }

    .blog {
        width: 90%;
        margin: 20px auto;
        max-width: 1200px;
    }

    .blog-container h2 {
        text-align: center;
    }

    .blog-container p {
        width: 90%;
        margin: 0 auto;
        text-align: center;
    }

    .blog-posts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 90%;
        margin: 0 auto;
    }

    .blog-post {
        width: 100%;
    }

    .blog-post img {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        height: 200px;
        max-width: 100%;
    }

    .blog-post p {
        width: 90%;
        margin: 0 auto;
        margin-bottom: 20px;
        text-align: left;
    }

    .contact {
        width: 80%;
        margin: 20px auto;
        max-width: 1200px;
    }

    .contact-left h2 {
        text-align: center;
    }

    .p-intro {
        text-align: center;
    }

    #map {
        height: 400px; 
    }
}

@media (min-width: 1000px) {
    .hero-container {
        height: 70vh;
    }

    h1.welcome {
        margin-top: 70px;
    }

    .product-item {
        width: 40%;
    }
}

@media (min-width: 1200px) {
    .hero-container {
        height: 100vh;
    }

    .left {
        width: 50%;
    }

    .nav-links {
        gap: 30px;
        width: 60%;
        margin: 0 auto;
    }

    .nav-links li a {
        font-size: .8rem;
    }

    .right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 30px 40px;
        width: 50%;
    }

    h1.welcome {
        font-size: 3rem;
        margin: 10px auto;
        margin-top: 130px;
    }

    .team {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .team-member {
        width: 90%;
    }

    .team-member img {
        height: 350px;
        object-fit: fill;
    }

    .product-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .product-item {
        width: 80%;
    }

    .blog-posts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-content: center;
        gap: 40px;
        width: 55%;
        margin: 0 auto;
    }

    .blog-post {
        width: 100%;
    }

    .contact-container {
        flex-direction: row;
    }

    .contact-left {
        width: 80%;
    }

    #map {
        height: 700px;  
    }
}