:root {
           --primary-blue: #1a365d;
           --secondary-blue: #2d4a7c;
           --accent-blue: #4a6fa5;
           --primary-beige: #f5f1e8;
           --secondary-beige: #e8e1d1;
           --dark-text: #333333;
           --light-text: #ffffff;
       }

       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
           font-family: 'Georgia', serif;
       }

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

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

       /* Header & Navigation */
       header {
           background-color: var(--primary-blue);
           color: var(--light-text);
           padding: 1rem 0;
           position: sticky;
           top: 0;
           z-index: 100;
           box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
       }

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

       .logo {
           display: flex;
           align-items: center;
           gap: 10px;
       }

       .logo i {
           font-size: 2rem;
           color: var(--secondary-beige);
       }

       .logo h1 {
           font-size: 1.5rem;
           font-weight: 700;
       }

       .logo span {
           color: var(--secondary-beige);
           font-weight: 300;
       }

       nav ul {
           display: flex;
           list-style: none;
       }

       nav ul li {
           margin-left: 2rem;
       }

       nav ul li a {
           color: var(--light-text);
           text-decoration: none;
           font-weight: 500;
           transition: color 0.3s;
           padding: 0.5rem 0;
           position: relative;
       }

       nav ul li a:hover {
           background-color: var(--accent-blue);
           color: var(--secondary-beige);
       }

       nav ul li a.active {
           color: var(--secondary-beige);
       }

       nav ul li a.active::after {
           content: '';
           position: absolute;
           width: 100%;
           height: 2px;
           background-color: var(--secondary-beige);
           bottom: 0;
           left: 0;
       }

       .menu-toggle {
           display: none;
           font-size: 1.5rem;
           cursor: pointer;
       }

       /* Hero Section */
       .hero {
           background: linear-gradient(rgba(26, 54, 93, 0.85), rgba(26, 54, 93, 0.9)), url('https://images.unsplash.com/photo-1589391886085-8b6b0ac72a1a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1470&q=80') no-repeat center center/cover;
           color: var(--light-text);
           padding: 5rem 0;
           text-align: center;
       }

       .hero h2 {
           font-size: 2.8rem;
           margin-bottom: 1rem;
       }

       .hero p {
           font-size: 1.2rem;
           max-width: 700px;
           margin: 0 auto 2rem;
       }

       .btn {
           display: inline-block;
           background-color: var(--secondary-beige);
           color: var(--primary-blue);
           padding: 0.8rem 1.8rem;
           border-radius: 4px;
           text-decoration: none;
           font-weight: 600;
           transition: all 0.3s;
           border: none;
           cursor: pointer;
       }

       .btn:hover {
           background-color: #d4ccb8;
           transform: translateY(-2px);
       }

       .btn-secondary {
           background-color: transparent;
           color: var(--secondary-beige);
           border: 2px solid var(--secondary-beige);
           margin-left: 1rem;
       }

       .btn-secondary:hover {
           background-color: rgba(255, 255, 255, 0.1);
       }

       /* Main Content Sections */
       section {
           padding: 4rem 0;
       }

       .section-title {
           text-align: center;
           margin-bottom: 3rem;
           color: var(--primary-blue);
           position: relative;
       }

       .section-title::after {
           content: '';
           position: absolute;
           width: 80px;
           height: 3px;
           background-color: var(--accent-blue);
           bottom: -10px;
           left: 50%;
           transform: translateX(-50%);
       }

       /* Home Section */
       .services {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
           gap: 2rem;
           margin-top: 2rem;
       }

       .service-card {
           background-color: var(--light-text);
           border-radius: 8px;
           overflow: hidden;
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
           transition: transform 0.3s;
       }

       .service-card:hover {
           transform: translateY(-10px);
       }

       .service-icon {
           background-color: var(--secondary-blue);
           color: var(--light-text);
           font-size: 2rem;
           padding: 1.5rem;
           text-align: center;
       }

       .service-content {
           padding: 1.5rem;
       }

       .service-content h3 {
           color: var(--primary-blue);
           margin-bottom: 0.8rem;
       }

       /* About Us Section */
       .about-content {
           display: flex;
           align-items: center;
           gap: 3rem;
       }

       .about-text {
           flex: 1;
       }

       .about-image {
           flex: 1;
           border-radius: 8px;
           overflow: hidden;
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
       }

       .about-image img {
           width: 100%;
           height: auto;
           display: block;
       }

       .parallax-1 {
           z-index: -2;
           background-image: url('../img/720-S-Colorado-Blvd-Denver-CO-Primary-Photo-1-LargeHighDefinition.jpg');
           min-height: 50vh;
           background-attachment: fixed;
           background-position: center;
           background-repeat: no-repeat;
           background-size: cover;
           position: relative;
       }

       .parallax-1::after {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           background: rgba(0, 0, 0, 0.562);
           box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.823);
       }

       .hero-txt {
           position: relative;
           z-index: 2;
       }

       .team {
           margin-top: 3rem;
       }

       .team-members {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
           gap: 2rem;
           margin-top: 2rem;
       }

       .team-member {
           text-align: center;
           background-color: var(--light-text);
           padding: 1.5rem;
           border-radius: 8px;
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
       }

       .team-member img {
           width: 220px;
           height: 320px;
           border-radius: 50%;
           object-fit: cover;
           margin-bottom: 1rem;
           border: 5px solid var(--secondary-beige);
       }

       /* Contact Section */
       .contact-container {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
           gap: 3rem;
           align-content: space-evenly;
           max-width: 800px;
           max-height: 600px;
           margin-bottom: 15%;
           margin-left: 15.5%;
       }

       .contact-info {
           background-color: var(--secondary-blue);
           color: var(--light-text);
           padding: 2rem;
           border-radius: 8px;
       }

       .contact-info h3 {
           margin-bottom: 1.5rem;
           color: var(--secondary-beige);
       }

       .contact-item {
           display: flex;
           align-items: flex-start;
           margin-bottom: 1.5rem;
       }

       .contact-item i {
           font-size: 1.2rem;
           margin-right: 1rem;
           color: var(--secondary-beige);
       }

       .contact-form {
           background-color: var(--light-text);
           padding: 2rem;
           border-radius: 8px;
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
       }

       .form-group {
           margin-bottom: 1.5rem;
       }

       .form-group label {
           display: block;
           margin-bottom: 0.5rem;
           font-weight: 600;
           color: var(--primary-blue);
       }

       .form-control {
           width: 100%;
           padding: 0.8rem;
           border: 1px solid #ddd;
           border-radius: 4px;
           font-size: 1rem;
       }

       .form-control:focus {
           outline: none;
           border-color: var(--accent-blue);
       }

       textarea.form-control {
           min-height: 150px;
           resize: vertical;
       }

       /* Footer */
       footer {
           background-color: var(--primary-blue);
           color: var(--light-text);
           padding: 3rem 0 1.5rem;
       }

       .footer-content {
           display: flex;
           justify-content: space-between;
           flex-wrap: wrap;
           margin-bottom: 2rem;
       }

       .footer-column {
           flex: 1;
           min-width: 250px;
           margin-bottom: 1.5rem;
       }

       .footer-column h3 {
           color: var(--secondary-beige);
           margin-bottom: 1.5rem;
           font-size: 1.2rem;
       }

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

       .footer-links li {
           margin-bottom: 0.8rem;
       }

       .footer-links a {
           color: var(--light-text);
           text-decoration: none;
           transition: color 0.3s;
       }

       .footer-links a:hover {
           color: var(--secondary-beige);
       }

       .social-icons {
           display: flex;
           gap: 1rem;
       }

       .social-icons a {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           width: 40px;
           height: 40px;
           background-color: rgba(255, 255, 255, 0.1);
           border-radius: 50%;
           color: var(--light-text);
           text-decoration: none;
           transition: all 0.3s;
       }

       .social-icons a:hover {
           background-color: var(--accent-blue);
           transform: translateY(-3px);
       }

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

       /*Testimonmial section*/
       .testimonials-container {
           display: grid;
           grid-template-columns: repeat(2, 450px);
           place-items: center;
           place-content: center;
       }

       .testimonial-card {
           max-width: 450px;
           height: 330px;
           padding: 30px;
           border: 5px solid black;
           margin: 20px;
           justify-content: center;
       }

       /*Services */
       .srvcs {
           display: flex;
           align-content: center;
           justify-content: center;
           align-items: center;
           justify-items: center;
       }

       .srvcs-txt {
           font-size: 40px;
           text-align: center;
       }

       .srvcs-img-logo img {
           align-items: center;
           margin: 8% 0 8% 5%;
       }

       .srvcs-img img {
           max-width: 850px;
           margin: 0 0 8% 0;
           border: 3px solid black;
           border-radius: 15px;
       }

       .srvcs-ttl {
           font-size: 25px;
           text-align: center;
           margin-bottom: 10%;
       }

       .srvcs-lst {
           display: flex;
           align-content: center;
           justify-content: center;
           align-items: center;
           justify-items: center;
       }

       .srvcs-lst-lmnts {
           text-align: center;
       }

       ul.lst-ul {
           text-align: center;
       }

       ul.lst-ul li {
           font-size: 18px;
           text-align: justify;
           padding: 5px 0;
       }

       /*Why Us*/
       .why-top,
       .why-bttm {
           display: grid;
           grid-template-rows: 1fr 2fr;
           justify-items: center;

       }

       .why-top {
           margin-left: 15%;
           gap: 150px;
           max-width: 70%;
       }

       .why-bttm {
           max-height: 1300px;
       }

       .why-top-txt {
           text-align: center;
           font-size: 30px;
       }

       .why-top-txt h2 {
           font-size: 30px;
       }

       .why-top-txt p {
           font-size: 18px;
       }

       .why-top-img img {
           max-width: 800px;
           border: 5px solid black;
           border-radius: 15px;

       }

       .why-bttm-map {
           border: 5px solid black;
       }

       .cntc-2 {
           margin-left: 8%;
       }


       /* Responsive Design */
       @media (max-width: 992px) {
           .about-content {
               flex-direction: column;
           }

           .about-image {
               order: -1;
           }

           .hero h2 {
               font-size: 2.4rem;
           }
       }

       @media (max-width: 768px) {
           .menu-toggle {
               display: block;
           }

           nav ul {
               position: fixed;
               top: 70px;
               left: -100%;
               width: 100%;
               height: calc(100vh - 70px);
               background-color: var(--primary-blue);
               flex-direction: column;
               align-items: center;
               padding-top: 2rem;
               transition: left 0.3s;
           }

           nav ul.active {
               left: 0;
           }

           nav ul li {
               margin: 1rem 0;
           }

           .hero h2 {
               font-size: 2rem;
           }

           .hero p {
               font-size: 1rem;
           }

           .btn-container {
               display: flex;
               flex-direction: column;
               gap: 1rem;
               align-items: center;
           }

           .btn-secondary {
               margin-left: 0;
           }

           .footer-content {
               flex-direction: column;
           }

       }

       @media (max-width: 576px) {
           .hero {
               padding: 3rem 0;
           }

           section {
               padding: 3rem 0;
           }

           .service-card,
           .team-member,
           .contact-info,
           .contact-form {
               padding: 1.2rem;
           }

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

           .contact-info,
           .contact-form {
               justify-content: stretch;
               margin: 30px;
               padding: 10px;
               height: auto;
               margin-bottom: 10px;
           }

           #contact,
           .contact-cel {
               height: 1600px;
           }

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

           .testimonial-card {
               justify-content: stretch;
               margin: 30px;
               padding: 10px;
               height: auto;
           }

           .contact-container {
               position: sticky;
               height: 1200px;
           }

           .srvcs-img-logo,
           .srvcs-img {
               display: flex;
               place-content: center center;
               place-items: center center;
           }

           .srvcs-img-logo img,
           .srvcs-img img {
               max-width: 23rem;
               margin-left: 0;
           }

           .why-top {
               display: flex;
               flex-direction: column;
               place-content: center center;
               place-items: center center;
           }

           .why-bttm {
               min-height: 110rem;
               display: flex;
               flex-wrap: wrap;
               justify-content: flex-start;
               justify-items: center;
               align-items: baseline;
               align-content: stretch;

           }

           .why-top-img img {
               max-width: 23rem;

           }

           .why-bttm-map {
               margin-top: 30rem;
               margin-left: 3rem;
               max-width: 23.5rem;
               max-height: 23.5rem;
           }

           iframe {
               max-width: 23rem;
               max-height: 23rem;
           }
       }