:root {
          --primary-blue: #5dade2;
          --secondary-blue: #1470b7;
          --accent-red: #d90429;
          --light-bg: #f2f6ff;
          --white: #ffffff;
          --text-dark: #333333;
          --text-light: #666666;
          --transition: all 0.3s ease;
          --shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }

        
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: "Open Sans", sans-serif;
          list-style-type: none;
        }


        
        body {
          background: var(--light-bg);
          color: var(--text-dark);
          line-height: 1.6;
        }
        


        .page-container {
          display: flex;
          flex-direction: column;
          min-height: 100vh;
        }

        /* ===== NAVBAR 
        STYLES IMPORTED FROM navbar.css ===== */
        a {
          text-decoration: none;
          color: inherit;
        }
        
        .show {
          display: flex;
        }
          


        .container .navbar{
          width:95%;
          margin: auto;
          display:flex;
          align-items: center;
          justify-content: space-between;
        }

        .menu-icon {
          display: none;
          font-size: 26px;
          cursor: pointer;
          color: #000;
        }

        @media (max-width: 850px) {

          nav ul {
            position: absolute;
            top: 70px;
            left: 0;
            right: 0;
            background: var(--primary-blue);
            flex-direction: column;
            display: none;
            text-align: center;
            padding: 15px 0;
          }



          .menu-icon {
            display: block;
          }
        }

         @media (min-width: 850px){
          .nav-links{
            display: flex;
            gap:15px
          }
         }
        

        /* ===== HERO SECTION ===== */
        .hero-section {
          width:80%;
          margin:auto;
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 60px 30px;
          flex-wrap: wrap;
          gap: 40px;
        }

        .hero-text {
          flex: 1 1 400px;
        }

        .hero-text h1 {
          font-size: 2rem;
          font-family: "Montserrat", sans-serif;
          margin-bottom: 20px;
          color: var(--primary-blue);
        }

        .hero-text p {
          font-size: 1.2rem;
          font-weight: 600;
          color: var(--accent-red);
          display: inline-block;
          padding: 8px 12px;
          border-left: 4px solid var(--accent-red);
          border-radius: 4px;
          background: var(--white);
        }

        .hero-image {
          flex: 1 1 400px;
          text-align: center;
        }

        .hero-image img {
          width: 100%;
          max-width: 500px;
          border-radius: 12px;
          box-shadow: var(--shadow);
        }

        /* ===== FOOTER ===== */
        footer {
          background-color: var(--primary-blue);
          color: var(--white);
          padding: 50px 0 20px;
        }

        .container{
          display:flex;
          flex-wrap: wrap;
          justify-content: space-around;
        }

        .footer-content {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 30px;
          margin-bottom: 40px;
          padding: 0 20px;
        }

        .footer-section h3 {
          font-family: "Montserrat", sans-serif;
          font-size: 1.3rem;
          margin-bottom: 20px;
          position: relative;
          padding-bottom: 10px;
        }

        .footer-section h3:after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 50px;
          height: 2px;
          background-color: var(--accent-red);
        }

        .footer-section{
          width:300px;
        }

        .footer-links {
          list-style: none;
        }

        .footer-links li {
          margin-bottom: 12px;
        }

        .footer-links a {
          color: #ccc;
          text-decoration: none;
          transition: var(--transition);
          display: inline-flex;
          align-items: center;
        }

        .footer-links a i {
          margin-right: 8px;
          font-size: 0.9rem;
        }

        .footer-links a:hover {
          color: var(--white);
          transform: translateX(5px);
        }

        .social-links {
          display: flex;
          gap: 15px;
          margin-top: 20px;
        }

        .social-links a {
          color: var(--white);
          font-size: 1.2rem;
          transition: var(--transition);
        }

        .social-links a:hover {
          color: var(--accent-red);
        }

        .copyright {
          text-align: center;
          border-top: 1px solid rgba(255, 255, 255, 0.2);
          padding-top: 15px;
          font-size: 0.9rem;
        }