/* GENERAL MEDIA QUERY*/
/* GRID 2 and GRID 3 MEDIA QUERY */
@media (max-width: 1186px) and (min-width: 0px) {
    /* LAYOUT */
        .grid-3 {
            display: grid;
            grid-template-columns: repeat(2,1fr);
            width: 100%;
            margin: auto;
        }

        .flex-between > div,
        .flex-around > div,
        .flex-evenly > div,
        .break > div {
            /* width: auto; */
        }


    /* NAVBAR */
            nav ul {
                display: flex;
            }

            nav ul li {
                font-size: 16px;
            }
 
            nav ul a:last-child li {
                margin-right: 0;
            }


    /* CONTAINER */
        .container {
            width: 95%;
            margin: auto;
            padding: auto;
        }

        .small-container {
            width: 85%;
            margin: auto;
        }
        
        .contain {
            width: 100%;
            padding: 3em;
        }
}



@media (max-width: 896px) and (min-width: 0px) {
    /* LAYOUT */
        .grid-3,
        .grid-2,
        .grid-2 p {
            display: grid;
            grid-template-columns: 1fr;
            width: 88%;
            margin: auto;
        }

        .grid-3 > div,
        .grid-2 > div {
            width: 100%;
            margin: 25px auto;
        }

        .flex-between:not(.no-break),
        .flex-around:not(.no-break),
        .flex-evenly:not(.no-break),
        /* .flex-center:not(.no-break), */
        .break {
            flex-direction: column;
            width: 100%;
            margin: 0;
        }

        .flex-between:not(.no-break) > div,
        .flex-around:not(.no-break) > div,
        .flex-evenly:not(.no-break) > div,
        /* .flex-between:not(.no-break) > section, */
        .flex.break > div  {
            width: 100%;
            margin: 0;
        }


        /* .flex-wrap {
            width: 100%;
        } */

    /* CONTAINERS */
    .contain {
        padding: 2em;
    }


    /* CARD / IMG-CARD */
        .card,
        .img-card {
            width: 100%;
            margin: 25px auto;
        }
        
        .card:last-child,
        .img-card:last-child {
            margin-bottom: 0;
        }
        


    /* NAVBAR */
        #menu {
            display: flex;
        }

        #nav {
            margin: 0;
            width: 100%;
            justify-content: center;
            align-items: flex-start;
            max-height: 0px;
            transition: all 0.3s ease-in-out;
            overflow: hidden;
        }

        nav ul {
            width: 100%;
            display: block;
        }

        nav ul a {
            width: 100%;
        }

        nav ul a li {
            color: #fff;
            font-weight: 700;
            padding: 15px 25px;
            background-color: #B85992;
            margin: 15px 0;
            width: 100%;
        }

        nav ul a li button {
            padding: 0;
        }

        /* nav ul li:first-child,
        nav ul li:last-child {
            margin: 0;
        } */


    /* MOBILE */
        .mobile-image {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .mobile-text {
            text-align: center;
        }

        .flex.mobile-reverse,
        .flex-center.mobile-reverse,
        .flex-start.mobile-reverse,
        .flex-end.mobile-reverse,
        .flex-between.mobile-reverse,
        .flex-around.mobile-reverse,
        .flex-evenly.mobile-reverse {
            flex-direction: column-reverse;
        }

        .mobile-m-auto {
            width: fit-content;
            margin: auto;
        }

        /* TEMPOARY */

        #change-details section.flex.break {
            width: 100%;
            display: block;
        }

        #change-details > section {
            width: 100%;
            margin-top: 40px;
        }

        #change-details > section input,
        #change-details > section select  {
            width: 100%;
            margin: 0;
        }
}



@media (max-width: 757px) and (min-width: 0px) {
    /* LAYOUT */
        .flex-between:not(.no-break) > *,
        .flex-around:not(.no-break) > *,
        .flex-evenly:not(.no-break) > *,
        .break > * {
            width: 100%;
            margin: auto;
        }

     /* TEMPOARY NAVBAR */

     main {
        /* padding: 0; */
     }
    

    /* CONTAINERS */
        .wrapper .container {
            width: 100%;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 100%;
            margin: 0;
            padding: 0 25px;
        }

        .container .contain,
        .wrapper .contain {
            width: 100%;
            padding: 0;
            margin: 0;
        }

        .contain {
            width: 100%;
            padding: 0 15px;
            margin: 0;
        }


    
    /* CARDS */
        .card,
        .img-card {
            width: 100%;
            margin: 35px 0;
        }

        .img {
            width: 100%;
        }

        .hover-card:not(.no-hover) {
            transform: scale(1.03);
            border-radius: 5px;
            transition: all 0.3s ease-in-out;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }


    /* CONTAINERS */
        .container {
            width: 90%;
            margin: 25px auto;
        }

        .contain {
            width: 100%;
            padding: 2em;
        }


    /* FORMS */
        #form {
            width: 85%;
            margin: 45px auto;
        }


    /* TEXT */     
        .text {
            width: 75%;
        }

        .xlg {
            font-size: 48px;
            font-weight: bolder;
            line-height: 1.8em;
        }
        
        .xxlg{
            font-size: 60px;
            font-weight: bolder;
            line-height: 2em;
        }

    
    /* HEIGHT */
        .hscreen {
            height: fit-content;
        }
}



@media (max-width: 575px) and (min-width: 0px) {
    /* FORM */
        #form {
            width: 90%;
            margin: 45px auto;
        }


    /* TEXT */
        .text {
            width: 100%;
        }


    /* HEIGHT */
        .hscreen {
            height: fit-content;
        }
}



@media (max-width: 475px) and (min-width: 0px) {
    /* LAYOUT */
        /* .flex .break,
        .flex-center .break {
            flex-direction: column;
            width: 85%;
            margin: auto;
        }

        .flex .break > *,
        .flex-center .break > * {
            width: 85%;
            margin: auto;
        } */


    
    /* CONTAINERS */
        .wrapper .container {
            width: 100%;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 100%;
            margin: 0;
            padding: 0 15px;
        }

        .container .contain,
        .wrapper .contain {
            width: 100%;
            padding: 0;
            margin: 0;
        }

        .contain {
            width: 100%;
            padding: 0 15px;
            margin: 0;
        }


    /* TEXT SIZE */   
        .xsm{
            font-size: 18px;
            font-weight: 450;
            line-height: 1.5em;
        }
        
        .xxsm {
            font-size: 20px;
            font-weight: 400;
            line-height: 1.3em;
        }
        
        .md, .service-name {
            font-size: 25px;
            font-weight: 550;
            line-height: 1.3em;
        }
        
        .xmd{
            font-size: 28px;
            font-weight: 600;
            line-height: 1.5em;
        }
        
        .lg {
            font-size: 33px;
            font-weight: 700;
            line-height: 1.6em;
        }
        
        .xlg {
            font-size: 37px;
            font-weight: bolder;
            line-height: 1.7em;
        }
        
        .xxlg{
            font-size: 45px;
            font-weight: bolder;
            line-height: 1.9em;
        }
}