html{scroll-behavior:smooth}:root{--header-height:60px;--max-mobile-width:800px;--background-color-dark:#1A2428}@media screen and (max-width:800px){.section-feature-container{flex-direction:row;justify-content:space-around;width:80%}.feature-container{flex-direction:column !important;justify-content:space-evenly;align-items:center;margin:20px;.feature-content{ width:90% !important; } .feature-image{ padding: 20px 0; }}.home-header-container{height:calc(100vw * 2.4) !important}.header-content-container{width:95% !important}.desktop-navigation{display:none}.mobile-navigation,.mobile-logo-link{display:flex !important}.header-container{display:flex !important;flex-direction:column !important;background-color:var(--background-color-dark) !important;margin:0 !important;padding:0 !important;width:100% !important}.desktop-logo-link{display:none !important}.section-summary{width:90% !important}}.mobile-logo-link:has(#mobile-toggle:checked)~#mobile-navigation{top:-10px}.mobile-logo-link:has(#mobile-toggle:checked) #menu-open-image{background:url(/images/close-menu.png);background-size:contain}#mobile-toggle{opacity:0}#menu-open-image{display:block;position:absolute;top:0;right:0;background:url(/images/open-menu.png);background-size:contain;height:60px;width:60px;transition:.3s ease-in-out;padding:0}.mobile-navigation,.mobile-logo-link{display:none}.mobile-navigation{position:relative;top:-1000px;margin:0;padding:0;width:100%;background-color:var(--background-color-dark);transition:.5s;z-index:-1;ul{ list-style: none; } li{ width:100%; padding:10px; font-size: 1.75em; text-align: right; }}.mobile-logo-link{display:none;justify-content:space-between;flex-direction:row;width:100%;a{ width: 70%; img{ width: 100%; } } input{ height:50px; width:50px; }}body{position:relative;font-family:helvetica,sans-serif;margin:0;padding:0;box-sizing:border-box;background-color:#fffaf0;width:100%}header{position:fixed;width:100%;z-index:10;.header-container-background{ position: absolute; background-color: black; width: 100%; height: var(--header-height); z-index: -1; opacity: 0.7; } .header-container{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: var(--header-height); box-sizing: border-box; padding-right: 15px; a{ text-decoration: none; color:whitesmoke; font-weight: bold; border-right: 2px solid rgba(147, 112, 219, 0); border-left: 2px solid rgba(147, 112, 219, 0); transition: 0.4s; padding:5px; border-radius: 5px; } a:hover{ color: mediumpurple; border-right: 2px solid rgba(147, 112, 219, 1); border-left: 2px solid rgba(147, 112, 219, 1); } .desktop-logo-link{ display: flex; align-items: center; justify-content: center; height:100%; box-sizing: border-box; padding:5px 10px; img{ display: inline-block; height:100%; } } } .desktop-navigation{ ul{ display: flex; list-style-type: none; padding: 0; li{ margin: 0 10px; } } }}main{display:flex;flex-direction:column;align-items:center;width:100%}.home-header-container{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;top:-80px;padding-top:80px;width:100%;height:calc(100vw * .4);background:url(../images/cat-looking-into-purple-sky.webp)no-repeat 50%;background-size:cover;color:#fff;font-weight:700;font-size:1.8em}.header-content-container{width:60%;text-align:center;button{ background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; }}.learn-more-button{background-color:#4caf50;border:none;color:#fff;padding:15px 32px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:4px 2px;cursor:pointer}.home-page-body{display:flex;flex-direction:column;justify-content:space-around;flex-wrap:wrap;width:100%}.dark{background-color:#2b3a42;.feature-container{ background-color: #1A2428; width: 20%; } .feature-content{ background-color: whitesmoke; border-radius: 10px; } .section-summary{ color: lightgrey !important; border-bottom: 1px solid white !important; } .section-header{ color: whitesmoke; } .section-feature-container{ flex-direction: row; justify-content: space-around; width:80%; } .feature-container{ flex-direction: column !important; justify-content: space-evenly; align-items: center; margin: 20px; .feature-image{ padding: 20px 0; } }}.section-container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;padding-top:var(--header-height);.section-header{ width:100%; text-align: center; font-size: 1.5em; } .section-summary{ display: inline-block; width:50%; color: dimgrey; font-size: .7em; text-align: justify; border-bottom: 1px solid black; } h2{ text-align: center; width: 100%; text-transform: uppercase; }}.section-feature-container{display:flex;flex-direction:row;justify-content:space-around;flex-wrap:wrap;width:75%}.feature-container{display:flex;flex-direction:row;justify-content:space-around;text-align:justify;width:45%;min-width:300px;margin-bottom:30px;padding:15px;box-sizing:border-box;border-radius:10px;.feature-image{ display: flex; justify-content: center; flex-direction: column; padding: 0 20px; width:100px; img{ width:100%; } } .feature-content{ display: inline-block; padding: 20px; width:70%; }}.portfolio-feature-container{display:flex;flex-direction:row;margin-bottom:50px;.feature-container { position: relative; display: flex; flex-direction: column; align-items: end; min-width: 300px; width: 100%; max-width: 450px; height: auto; padding: 0; overflow: hidden; border: 1px solid black; border-radius: 0; margin: 20px 0; } .feature-image{ position:relative; display: inline-block; width:100%; padding: 0; bottom: 0; img{ width:100%; transition: 0.6s; } } .feature-content{ position: absolute; padding:0; bottom: -200px; width: 100%; text-align: center; background: rgba(50, 50, 50, 0.85); color:whitesmoke; transition: 0.3s; } .feature-image:hover { img{ width: 120%; margin-left: -10%; } } .feature-image:hover ~ .feature-content, .feature-content:hover{ bottom: 0; }}.about-us-feature-container{.feature-container{ min-width: 300px; width:50%; max-width: 450px; } .feature-image{ width: 100%; img{ width: 100%; } }}.contact-us-feature-container{.feature-container{ display: flex; flex-direction: column; justify-content: center; align-items: center; width:100px; text-align: center; } .feature-image{ width:50px; }}