/* Base styles for mobile (320px - 480px) */


body{
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
        background-color: black;
        color: white;
        position: relative;
        overflow-x:hidden;
        display: flex;
        flex-direction: column;
        height: fit-content;
        width: 100%;
        margin: 0%;
    }
    body::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%; 
        height: 100%;  
        opacity: .2; 
        z-index: -1;
        background: url("../background-portrait.webp") repeat 0 center fixed;
        background-size: cover;
         -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }

    header{
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
        border-bottom: 2px solid white;
        margin-bottom: 2rem;
    }

    .title-container{
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    .title-container img{
        width: 30%;
        aspect-ratio: 1;
        border: 1px solid white;
        margin: .5rem;
    }
    .title-container .title{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-evenly;
        max-width: 40%;
        
    }

    .title-container .title div{
        font-size: 2rem;
        font-weight: 400;
        margin-top: 0%;
        margin-bottom: 0%;
    }

    nav{
        width: 100%;
    }
    nav ul{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        list-style: none;
        width: 100%;
        padding: 0%;
    }

    nav ul li{
        width: fit-content;
        cursor: pointer;
        position: relative;
        text-decoration: none;
    }

    nav ul li a{
        text-decoration: none;
        color: white;
        font-weight: 500;
    }
    nav ul li a:hover {
        text-underline-offset: .5rem;
        text-decoration: underline;
    }
    nav ul .selected a{
        text-decoration: underline;
        text-underline-offset: .5rem;
    }

    main{
        position: relative;
        width: 100%;
        height: fit-content;
        display: flex;
        flex-direction: column;
        align-items:center ;        
    }

    main h1{
        text-align: center;
    }
    
    .service-list-wrapper{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        background-color: rgba(128, 128, 128, 0.463);
        
    }

    .service-list{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 80%;
        justify-content: flex-start;
        align-items: center;
        list-style: none;
        padding: 0%;
    }

    .service-list li{
        width: 50%;
        text-align: center;
    }
    .service-list li a{ 
        color: white;
        font-size: larger;
        text-decoration: none;
    }

    .service-list li a:hover{ 
        text-decoration: underline;
        font-weight: 600;
    }


    .service-container{
        height: fit-content;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 2rem;

    }
    .service-container .service-description {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
    }
    .service-container .service-description h2{
        padding: 1rem;
    }

    .service-container .service-description p{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 85%;
        padding-left: 7.5%;
        padding-right: 7.5%;
        font-size: large;
        text-align: justify;
        z-index: 2;
        position: relative;
    }

    
    .service-container .service-description p::after {
        content: "";
        position: absolute;
        top: 0; 
        left: 0;
        width: 100%; 
        height: 100%;  
        opacity: .4; 
        z-index: -1;
        background-image: radial-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0.334), rgba(0, 0, 255, 0));
    }
    .service-container .service-images{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        height: 100%;
        justify-content: center;
    }
    .service-container .service-images .big{
        width: 90%;
        aspect-ratio: 1;
    }
    .service-container .service-images .small{
        width: 45%;
        aspect-ratio: 1;
    }
    .service-container .service-images img{
        outline: 1px solid white;
        object-fit: cover;

    }

    .bold-text{
        font-weight: 700;
    }


    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        width: 100%;
    }

    footer .title-container img{
        width: 20%;
        aspect-ratio: 1;
        border: 1px solid white;
        margin: .5rem;
    }

    footer .contact-methods{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        list-style: none;
        padding: 0%;
    }

    footer .contact-methods li a{
        display: flex;
        flex-direction: row;
        align-items: center;
        color: white;
        text-decoration: none;
        margin-bottom: 1rem;

    }
    footer .contact-methods li a svg{
        margin-right: .5rem;
    }

    
    .hideme,.hidemeFast{
        opacity:0;
    }

/* Small tablets and larger mobile devices (481px - 768px) */
@media (min-width: 481px) {
  body {
    font-size: 15px;
  }
}

/* Tablets and small laptops (769px - 1024px) */
@media (min-width: 769px) {
  body {
    font-size: 16px;
  }
}


/* Large desktops (1025px and up) */

@media (min-width: 1025px) {
    
    body::after {
        content: "";
        position: absolute;
        top: 0; 
        left: 0;
        width: 100%; 
        height: 100%;  
        opacity: .2; 
        z-index: -1;
        background: url("../background.webp") no-repeat center center fixed;
        background-size: cover;
    }

    header{
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
        border-bottom: 2px solid white;
        margin-bottom: 2rem;
    }

    .title-container{
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    .title-container img{
        width: 5%;
        aspect-ratio: 1;
        border: 1px solid white;
        margin: .5rem;
    }
    .title-container .title{
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-evenly;
        
    }

    .title-container .title div{
        font-size: 3.5rem;
        font-weight: 400;
        margin-right: 1rem;
        margin-top: 0%;
        margin-bottom: 0%;
    }

    nav{
        width: 80%;
    }
    nav ul{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        list-style: none;
        width: 100%;
    }

    nav ul li{
        width: fit-content;
        cursor: pointer;
        position: relative;
        text-decoration: none;
    }

    nav ul li a{
        text-decoration: none;
        color: white;
        font-weight: 500;
    }
    nav ul li a:hover {
        text-underline-offset: .5rem;
        text-decoration: underline;
    }
    nav ul .selected a{
        text-decoration: underline;
        text-underline-offset: .5rem;
    }

    main{
        position: relative;
        width: 100%;
        height: fit-content;
    }
    
    .service-list-wrapper{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        background-color: rgba(128, 128, 128, 0.463);
        
    }

    .service-list{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 50%;
        justify-content: flex-start;
        align-items: flex-start;
        list-style: none;
    }

    .service-list li{
        width: 40%;
        margin: .5rem;
    }
    .service-list li a{ 
        color: white;
        font-size: larger;
        text-decoration: none;
    }

    .service-list li a:hover{ 
        text-decoration: underline;
        font-weight: 600;
    }


    .service-container{
        height: 60vh;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 2rem;

    }
    .service-container .service-description {
        display: flex;
        flex-direction: column;
        width: 40%;
        height: 100%;
        justify-content: center;
        align-items: flex-start;
    }
    .service-container .service-description h2{
        padding: 1rem;
    }

    .service-container .service-description p{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 70%;
        padding-left: 10%;
        padding-right: 10%;
        font-size: large;
        text-align: justify;
        z-index: 2;
        position: relative;
    }

    
    .service-container .service-description p::after {
        content: "";
        position: absolute;
        top: 0; 
        left: 0;
        width: 100%; 
        height: 100%;  
        opacity: .4; 
        z-index: -1;
        background-image: radial-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0.334), rgba(0, 0, 255, 0));
    }
    .service-container .service-images{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 55%;
        height: 100%;
        justify-content: center;
    }
    .service-container .service-images .big{
        width: 50%;
        aspect-ratio: 1;
    }
    .service-container .service-images .small{
        width: 49%;
        aspect-ratio: 2;
        margin:.4%;
    }
    .service-container .service-images img{
        outline: 1px solid white;
        object-fit: cover;

    }

    .bold-text{
        font-weight: 700;
    }


    footer{
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        width: 100%;
    }
    footer .title-container img{
        width: 5%;
        aspect-ratio: 1;
        border: 1px solid white;
        margin: .5rem;
    }

    footer .contact-methods{
        display: flex;
        flex-direction: row;
        align-items: baseline;
        justify-content: center;
        width: 100%;
        list-style: none;
    }
    footer .contact-methods li{
        margin-right: 5rem;
    }

    footer .contact-methods li a{
        display: flex;
        flex-direction: row;
        align-items: center;
        color: white;
        text-decoration: none;
    }
    footer .contact-methods li a svg{
        margin-right: .5rem;
    }
}