:root {
            --Ascend_red_orange: #ee5028;
            --Ascend-dark-gray: #2c3337;
            --Ascend-brown: #56433c;
            --Ascend-lbrown: #f3f0eb;
            --Ascend-light-green: #5eb28c;
            --Ascend-light-blue: #007bff;
            --Ascend-teal: #007c91;
            --Ascend-lightblue: #e6f0f9;
            
            --Ascend-white: #fff;
            --text-gray: #666;
            --text-dark: #333;
            --text-white: #fff;

        }
        
        body {
            font-family: 'Montserrat', sans-serif;
            margin: 0;
            padding: 0;
            line-height: 1.6;
            text-align: justify;
        }

        .container {
            max-width: 1200px;
            margin: auto;
            padding: 0 20px;
        }

        .header {
            height: 120px;
     background-color: #fff;
           background-image: linear-gradient(to bottom, #ffffff, #f5f5f5, #ebebeb, #e2e2e2, #d8d8d8);
            padding: 0px 0;
            border-bottom: 2px solid #eee;

        }

    .left-div {
        width: 45%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.2); /* White with 70% opacity */
        display: flex;
        justify-content: left;
        align-items: left;
        text-align: center;
        padding: 20px;
        box-sizing: border-box;
        transform: translateY(100%);
        animation: slide-up 1s forwards;
      }
    .content-box {
      width: 90%; /* 50% of the background-container */
      height: 30%; /* 30% of the background-container */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start; /* Aligns content to the left */
      text-align: left;
      padding: 20px;
      box-sizing: border-box;
      transform: translateY(100%); /* Start position for the slide-up animation */
      animation: slideUp 1s forwards; /* Apply the animation */
    }
   

    .content-box h1 {
      margin: 0;
      align-self: center; /* Centers the h1 horizontally within the content-box */
    }
      @keyframes slide-up {
        from {
          transform: translateY(100%);
        }
        to {
          transform: translateY(0);
        }
      }
      .button{
        border:1px solid #fff;
        border-radius: 8px;
        display: inline-block;
        position: relative;
        width: 220px;
        height: 60px;
        position: relative;
        color: #fff;
        font-size: 0.97em;
        text-align: center;
        margin: 0 auto;
        -webkit-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
        text-transform: uppercase;
        text-decoration: none;
      }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 24px;
            width:50%;
            font-weight: bold;
            color: #ee5028;
        }

        .nav-links {
            list-style: none;
            margin: 0;
            padding: 0;
            display: none;
        }

        .nav-links li {
            margin-left: 20px;
        }

        .nav-links a {
            font-size: 18px;
            text-decoration: none;
            color: #333;
            font-weight: bold;
            transition: color 0.3s ease;
        }

        .nav-links a:hover {
            color: #ed5127;
        }

        .menu-toggle {
            display: block;
            cursor: pointer;
            font-size: 24px;
            color: #333;
        }
        
        @media (min-width: 768px) {
            .nav-links {
                display: flex;
            }
            .menu-toggle {
                display: none;
            }
            
            
        }

        .mobile-nav {
            display: none;
            position: absolute;
            top: 120px;
            left: 0;
            width: 100%;
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            z-index:9999;
        }

        .mobile-nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .mobile-nav li {
            padding: 15px 0;
            border-bottom: 1px solid #eee;
        }

        .mobile-nav a {
            text-decoration: none;
            color: #333;
            font-weight: bold;
            display: block;
            width: 100%;
        }

        .hero-section {
            background-color: #ee5028;
            color: #fff;
            padding: 0px 0;
            text-align: center;
        }

        .hero-section h1 {
            font-size: 40px;
            margin-bottom:5px;
            width: 100%;
        }

        .hero-section p {
            text-align: left;
            font-size: 18px;
            max-width: 400px;
            margin: auto;
            width: 95%;
        }
        .hero-section-container{
            background-image: url(https://images.unsplash.com/39/lIZrwvbeRuuzqOoWJUEn_Photoaday_CSD%20%281%20of%201%29-5.jpg?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
        }
        .hero-button {
        border:1px solid #fff;
        border-radius: 8px;
        display: inline-block;
        position: relative;
        width: 220px;
        height: 60px;
        position: relative;
        color: #fff;
        font-size: 0.97em;
        text-align: center;
        margin: 0 auto;
        -webkit-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
        text-transform: uppercase;
        text-decoration: none;
        }

         .hero-button a{
        border:1px solid #fff;
        border-radius: 8px;
        display: inline-block;
        position: relative;
        width: 220px;
        height: 60px;
        position: relative;
        color: #fff;
        font-size: 0.97em;
        text-align: center;
        margin: 0 auto;
        -webkit-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
        text-transform: uppercase;
        text-decoration: none;
        curse
        }

                /* --- Content Section --- */
        .content-section {
            padding: 4rem 0;
            background-color: var(--Ascend-lbrown);
        }

        .content-section .grid {
            display: grid;
            gap: 2rem;
            grid-template-columns: 1fr 1fr;
        }

        .content-section h2 {
            font-size: 2rem;
            margin-bottom: 1rem;
        }

         /* --- About Us --- */
        .about-mission {
            padding: 2rem 0;
            background-color: var(--workman-gray);
        }

        .about-mission h2 {
            font-size: 2rem;
            text-align: center;
            margin-bottom: 2rem;
        }

        .about-mission .grid {
            display: grid;
            gap: 1.5rem;
            grid-template-columns: repeat(2, 1fr);
        }
        .about-card{
            text-align: center;
            background-color: white;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            padding: 20px 20px auto;
            border:1px solid #cecece;
        }

        /* --- Services --- */
        .services-mission {
            padding: 2rem 0;
            background-color: var(--workman-gray);
        }

        .services-mission h2 {
            font-size: 2rem;
            text-align: center;
            margin-bottom: 2rem;
        }

        .services-mission .grid {
            display: grid;
            gap: 1.5rem;
            grid-template-columns: repeat(2, 1fr);
        }
        .services-card{
            text-align: left;
            background-color: white;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            padding-left: 20px;
 padding-right: 20px;
            border:1px solid #cecece;
        }



        /* --- News & Insights --- */
        .news-insights {
            padding: 2rem 0;
            background-color: var(--workman-gray);
        }

        .news-insights h2 {
            font-size: 2rem;
            text-align: center;
            margin-bottom: 2rem;
        }

        .news-insights .grid {
            display: grid;
            gap: 1.5rem;
            grid-template-columns: repeat(3, 1fr);
        }

        .news-card {
            background-color: white;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .news-card:hover {
            transform: translateY(-5px);
        }

        .news-card .image-container {
            height: 200px;
            overflow: hidden;
        }

        .news-card .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .news-card .text-content {
            padding: 1.5rem;
        }

        .news-card h3 {
            font-size: 1.2rem;
            margin-top: 0;
            color: var(--workman-blue);
        }

        .news-card p {
            font-size: 0.9rem;
            color: var(--text-gray);
        }

        .post-block__content__category {
            color: var(--text-white);
            display: block;
            width: 96px;
            height: 100%;
            max-height: 68px;
          margin:5px 5px auto;
            padding: 20px 8px 8px;
        }

        .post-block__image .button {
            position: absolute;
            top: 40px;
            left: 25px;
            color: #fff;
            border-color: #fff;
            z-index: 200;
        }

        /* --- Register Section --- */
        .register-section {
            padding: 4rem 0;
            background-color: white;
            border-bottom: 1px solid var(--workman-gray);
        }

        .register-section .flex {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .register-section form {
            display: flex;
            gap: 1rem;
        }

        .register-section input[type="email"] {
            padding: 0.75rem;
            border: 1px solid var(--text-gray);
            border-radius: 4px;
            width: 300px;
        }

        .register-section button {
            padding: 0.75rem 2rem;
            background-color: var(--workman-blue);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        /* --- Future Voices --- */
        .future-voices {
            background-color: var(--Ascend-brown);
            color: white;
            padding: 4rem 0;
        }

        .future-voices .grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            align-items: center;
        }

        .future-voices h2 {
            font-size: 2rem;
            margin-top: 0;
        }

        .future-voices p {
            font-size: 1.1rem;
        }

        .future-voices .image-container img {
            width: 100%;
            height: auto;
            border-radius: 8px;
        }

        /* --- Follow Us --- */
        .follow-us {
            padding: 4rem 0;
            background-color: #e6f0f9;
            background-color: var(--Ascend-lightblue);
        }

        .follow-us h2 {
            text-align: center;
        }

        .follow-us .grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
        }

        .follow-us .image-item {
            width: 240px;
            position: relative;
            overflow: hidden;
            fill: #000;
            border-radius: 8px;
        }

        .follow-us .image-item img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* --- Services --- */
        .services {
            padding: 4rem 0;
            background-color: white;
        }

        .services .grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

        .service-card {
            text-align: center;
        }

        .service-card .icon {
            font-size: 3rem;
            color: var(--workman-blue);
        }

        .service-card h3 {
            margin-top: 0.5rem;
        }

        /* --- Footer --- */
        .footer {
            background-color: var(--Ascend-dark-gray);
            background-image: linear-gradient(to bottom, #101112, #181a1b, #1e2224, #252a2e, #2c3337);
            color: white;
            padding: 2rem 0;
        }

        .footer-about {
            color: white;
            padding: 1rem 0;
        }
        .footer .grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 2rem;
        }

        .footer .logo img {
            width: 80px;
            height: 80px;
            filter: brightness(0) invert(1);
        }

        .footer ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer a {
            color: white;
            text-decoration: none;
            font-size: 0.9rem;
        }
         .footer-tagline{
            color: white;
            text-decoration: none;
            font-size: 0.7rem;
        }

         .footer-footer {
            color: white;
            text-decoration: none;
            font-size: 0.7rem;
        }
       .social {
                  fill: currentColor;

        }
        .footer .social-icons a {
            display: flex;
            align-items: center;
            gap: 44px;              /* space between icons */
            flex-wrap: wrap;        /* wrap on very small screens */
            --size: 30px;
            width: var(--size);
            height: var(--size);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            outline: none;

        }

        /* --- Responsive Design --- */
        @media (max-width: 992px) {
            .content-section .grid, .future-voices .grid, .services .grid {
                grid-template-columns: 1fr;
            }

            .news-insights .grid, .follow-us .grid, .footer .grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
          
        }

        @media (max-width: 768px) {
            .header .nav {
                display: none;
            }

            .register-section .flex {
                flex-direction: column;
                text-align: center;
            }

            .register-section form {
                flex-direction: column;
            }
            
             body {
            font-family: 'Montserrat', sans-serif;
            margin: 0;
            padding: 0;
            line-height: 1.6;
            text-align: left !important;
        }
        }