/* ---------------------------------------------------------- */
/*                     -   DECORATION  -                      */
/* ---------------------------------------------------------- */

#main-part{
    --bgSize:3%;
}


.background__verticalLines {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='63.999996' height='63.999996' viewBox='0 0 16.933332 16.933332'%3e%3cpath fill='%2396b08c' d='M.0002 0v4.2333332h16.93333V0Zm0 8.4666665v2.1166665h16.93333V8.4666665ZM.0002 12.7v1.058333h16.93333V12.7Zm0 2.116666v.529167h16.93333v-.529167zm0 1.058334v.264583h16.93333V15.875Zm0 .529166v.132292h16.93333v-.132292zm0 .396875v.132292h16.93333v-.132292z'/%3e%3c/svg%3e");
    
}

.background__crosses{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 31.75 31.75'%3e%3cg stroke-linecap='square' stroke-linejoin='round' stroke-miterlimit='.4' paint-order='markers fill stroke'%3e%3cpath fill='%233f114e' fill-rule='evenodd' stroke='%233f114e' stroke-width='1.05834' d='M24.209374.55697962V31.22083M7.5406235.52916352V31.22083' style='font-variation-settings:%26quot%3bwght%26quot%3b700'/%3e%3cpath fill='%233f114e' fill-rule='evenodd' stroke='%233f114e' stroke-width='1.05833' d='M31.206914 24.209375H.52916503' style='font-variation-settings:%26quot%3bwght%26quot%3b700'/%3e%3cpath fill='%231e231c' stroke='%23450' stroke-width='1.05834' d='M15.875.55672344V31.22083' style='font-variation-settings:%26quot%3bwght%26quot%3b700'/%3e%3cpath fill='%233f114e' fill-rule='evenodd' stroke='%233f114e' stroke-width='1.05833' d='M31.206915 7.5406258H.52916503' style='font-variation-settings:%26quot%3bwght%26quot%3b700'/%3e%3cpath fill='%231e231c' stroke='%23450' stroke-width='1.05833' d='M.52939284 15.875H31.220606' style='font-variation-settings:%26quot%3bwght%26quot%3b700'/%3e%3cpath fill='%231e231c' stroke='%23450' stroke-width='.529167' d='M.26458538.26458348H31.485415M.26466012 31.485417H31.48534M.26458335.42443742V31.088544M31.485417.26458433V31.485416' style='font-variation-settings:%26quot%3bwght%26quot%3b700'/%3e%3c/g%3e%3c/svg%3e");
}

/* ---------------------------------------------------------- */
/*                         -   HERO  -                        */
/* ---------------------------------------------------------- */

#hero  {
    display: flex;
    flex-direction: column;

    align-items: center;
    gap: 0;

    margin-inline: auto;
/*  check this, not working with dark scheme!!!
    background: linear-gradient(171deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 74%, rgba(0,212,255,1) 100%);

    background: linear-gradient(171deg,   hsl(var(--clr-main2--ll)) 40%, hsl(var(--clr-main1--ll)) 100%);
    */
    background: linear-gradient(170deg, hsl(103  18% 92%) 0%,  hsl(103  18% 92%) 5%, #f3e2f9  100%);

}

@media (width >= 600px){
    #hero {
        gap: 2rem;
    }    
}

#hero__intro {
    container: hero__intro / inline-size;

}
    

        @container hero__intro  (width >= 600px){
            .hero__svgBackground {
                width: 600px;
            }    
        }



        .hero__greenBox {
            --local-borderRadius: 1rem;
            container: hero__greenBox / inline-size;

            z-index: 1;
            
            width: clamp(220px, 30vw, 320px);
            /*height: 160px;*/
            height: clamp(150px, 15vh, 160px);
            padding: 4rem 2rem;

            margin-top: 6rem;
            margin-inline: auto;
            
            position: relative;

            background-color: hsl( var(--clr__h--main2)  var(--clr__s--main2)  var(--clr__l--main2) );
            border-radius: var(--local-borderRadius);
        }



        .hero__greenBox::before {
            content: " ";
            position: absolute;
            top: 3%;
            bottom: 3%;
            left: 2%;
            right: 2%;
            border-radius: calc(var(--local-borderRadius) * .9);
            border: 3px dashed hsl( var(--clr__h--main2--d)  var(--clr__s--main2--d)  var(--clr__l--main2--d) );                   
        }

        .hero__title  {
            margin-top: -15%;
            font-size: clamp(28px, 20cqi, 36px);
    
        }

            @container hero__greenBox  (width > 220px ) {
                .hero__title  {

                    font-size: clamp(36px, 25cqi, 44px);
                }
            }

            @container hero__greenBox (width > 250px) {
                .hero__title  {

                    font-size: clamp(44px, 30cqi, 48px);
                }
            }

            @container hero__greenBox  (width > 300px) {
                .hero__title  {

                    font-size: clamp(44px, 35cqi, 48px);
                }
            }

            
            #syringaConsultancy1{
                margin-right: 1rem;
                text-align: left;
            }

            #syringaConsultancy2{
                margin-left: 1rem;
                text-align: right;
            }

        #hero__subTitle{
            display: block;
            z-index: 999;

            padding: .2rem .4rem; 
            margin-top: 15rem;
            margin-inline: auto;

            width: clamp(220px, 50vw, 380px);


            background-color: hsl( var(--clr__h--main1--ll)  var(--clr__s--main1--ll)  var(--clr__l--main1--ll) ); 

            text-align: center;

            border-radius: 1rem;
            border: 1px solid hsl(var(--clr-white));
        }

        @supports (height: fit-content) {
            #hero__subTitle{
                height: fit-content;
            }
        }

      

        #hero__credo {
            align-self: center;

            width: clamp(40ch, 80%, 43ch);
            text-indent: 50px;

            font-size: 16px;
        } 
            @media (width >= 400px) {#hero__credo  { font-size: 18px; width: clamp(43ch, 80%, 48ch);}}
            @media (width >= 600px) {#hero__credo  { font-size: 20px; width: clamp(45ch, 80%, 50ch);}}
            @media (width >= 800px) {#hero__credo  { font-size: 22px; width: clamp(45ch, 80%, 55ch);}}
            @media (width >= 900px) {#hero__credo  { font-size: 24px;}}
    /* hero__right: decoration */    
    .hexagon--decor-grid {
            height: 400px;
            
                
            display: grid;
            grid-template-columns: repeat(15, clamp(18px, 1vw, 2vh));
            grid-template-rows: repeat(15, minmax(18px, 1vh, 2vw));

            align-self: center;
    
            padding: 1rem;
            gap: clamp(1px, .5vw, .5vh);
     
            grid-template-areas: 
            "  .    .    .    .    .    .    .    .    .    .    .    A    A    .    .  "
            "  .    .    .    .    .    .    .    .    .    .    .    A    A    .    .  "
            "  .    .    .    .    .    .    .    .    .    .    .    .    .    .    .  "
            "  .    .    .    .    .    .    .    .    .    .    .    .    C    C    C  "
            "  .    .    .    .    .    .    .    .    .    .    B    B    C    C    C  "
            "  .    .    .    .    .    .    D    D    D    .    B    B    C    C    C  "
            "  .    .    .    .    .    .    D    D    D    .    E    E    E    .    .  "
            "  .    .    .    .    .    .    D    D    D    .    E    E    E    .    .  "
            "  .    .    .    .    .    .    F    F    F    F    E    E    E    .    .  "
            "  .    .    .    .    .    .    F    F    F    F    .    G    G    G    .  "
            "  .    .    .    .    .    .    F    F    F    F    .    G    G    G    .  "
            "  .    .    H    H    H    H    F    F    F    F    .    G    G    G    .  "
            "  .    .    H    H    H    H    I    I    I    I    I    J    J    J    J  "
            "  .    .    H    H    H    H    I    I    I    I    I    J    J    J    J  "
            "  .    .    H    H    H    H    I    I    I    I    I    J    J    J    J  "
            "  K    K    K    .    .    .    I    I    I    I    I    J    J    J    J  "
            "  K    K    K    .    .    .    I    I    I    I    I    .    .    .    .  "
            "  K    K    K    L    L    L    .    .    .    .    .    N    N    N    N  "
            "  .    .    .    L    L    L    .    .    M    M    .    N    N    N    N  "
            "  .    .    .    L    L    L    .    .    M    M    .    N    N    N    N  "
            "  .    .    .    .    .    .    .    .    .    .    .    N    N    N    N  ";
        }
    
            .hexagon--decor-grid > *{
                align-self: center;
                justify-self: center;
            }

            .hexagon--decor-grid *:hover{
                --clr__bg--s: 0%;
                --clr__bg--l: 95%;
            }
         
            .hexagon--decor-grid__A { grid-area: A ; }
            .hexagon--decor-grid__B { grid-area: B ; }
            .hexagon--decor-grid__C { grid-area: C ; }
            .hexagon--decor-grid__D { grid-area: D ; }
            .hexagon--decor-grid__E { grid-area: E ; }
            .hexagon--decor-grid__F { grid-area: F ; }
            .hexagon--decor-grid__G { grid-area: G ; }
            .hexagon--decor-grid__H { grid-area: H ; }
            .hexagon--decor-grid__I { grid-area: I ; }
            .hexagon--decor-grid__J { grid-area: J ; }
            .hexagon--decor-grid__K { grid-area: K ; }
            .hexagon--decor-grid__L { grid-area: L ; }
            .hexagon--decor-grid__M { grid-area: M ; }
            .hexagon--decor-grid__N { grid-area: N ; }

            #sc__hex__hex2{
              stroke:none;
              fill: none;
            }            
    
            #sc__hex__hex1{
                fill:   hsl(var( --clr__bg--h  ) var(--clr__bg--s) 	var( --clr__bg--l )	);
            }
    
            #sc__hex__logo {
                fill: hsl(var( --clr__txt--h ) var(--clr__txt--s) var( --clr__txt--l));
            }

            
    
    /* hero__buttons: four buttons for the most important  */     
    #hero__buttons {

        justify-self: left;
        justify-content: space-evenly;
        gap: 2rem;
        
    }

        @media (width >= 600px) {
            #hero__buttons { width: 600px; }
        }
    
        .button {
            padding: .5rem 1rem;
    
            border-radius: 1rem;
            border: 2px solid ;
        }
    
        .button.smallCaps {
            --fs-local: var(--fs-400);
        }
   

/* ---------------------------------------------------------- */
/* ------------------------- Hot Items ---------------------- */
/* ---------------------------------------------------------- */
/*Contains the four most important services 
  front is picture with a header,
  content came from right on hover (focus)*/
#bestSellers {
    --section--cards--width: 300px;
    --bgSize:100%; 
    padding-bottom: 150px;
    height: clamp(800px, 100%, 2000px); 


}

    @media (width >= 600px) {
        #bestSellers { padding-block: 300px; }
    }

#cards {
    align-self: center;
    padding: 2cqh 1rem;
    --local-borderRadius: 1rem;
    --paddingGap: .5em;

    justify-content: space-evenly;
    width: 95%;

    gap: 1rem;

}


/* front image */
.card {
    overflow: hidden;
    max-width: 320px;
}

.card,
.card__front, 
.card__front__image img{
    border-radius: var(--local-borderRadius);
}



#bestSellers .card .card__front {

    
    width: 320px;
    height: 482px;
    overflow: hidden;
}

#bestSellers  .card--blured--header{
    justify-self: flex-start;
    z-index: 2;
}
   
/* #bestSellers  .card--blured--header{
 {*/
    #bestSellers .card .card__front h2{
    --fs-local: var(--fs-400);

    
    border-radius: 0 0 1rem 0;
    text-wrap: wrap;
    background-color: hsl(var(--clr__h--main2), var(--clr__s--main2), var(--clr__l--main2));
    filter: none;

    opacity: 0;
}

    @media (width >= 600px) {
        #bestSellers .card .card__front h2 {
            opacity: 1;
        }
    }

#bestSellers .card .card__front video{
    text-align: center;
    width: 100%;
    height: auto;
    object-fit: cover;
}    

/* content  */
#bestSellers .card .card__content {
    overflow: hidden;

    padding-inline: clamp(3px, 2cqi,5px);
    width: 100%;
    border-radius: 1rem;
    padding: .5rem;

    position: relative;

    z-index: 100;

}

    #bestSellers .card .card__content h3 {
        --fs-local: clamp(1.4em, 10cqi, 1.8em);


    }

    #bestSellers #cards  .card .card__content p a {
    cursor: pointer;
    
    font-style: italic;
    color: hsl(var( --clr__txt--h ) var(--clr__txt--s) var( --clr__txt--l));

    }

    #bestSellers .card .card__content p,
    #bestSellers .card .card__content a, 
    #bestSellers .card .card__content p span {
        width: 100%;
 
        font-size: clamp(1.0em, 10cqi, 1.4em);

    }




    
/* ---------------------------------------------------------- */
/* -------------------------   About   ---------------------- */
/* ---------------------------------------------------------- */

#aboutMe{
    --bgSize: 1%;
    --decorTrun: 0deg; 
    background-repeat: no-repeat;
    background-size: 100%;

    overflow: hidden;


}


    @media (width >= 600px) {
        #aboutMe { --decorTrun: 5deg;
            background-position: clamp(30px, 300%, 300px) 50%;; }
        
    }









#aboutMe{
    padding-bottom: 100px;
    margin-top: -150px;
    border-top: 1.5rem hsl(var( --clr__brd--h ) var(--clr__brd--s) var( --clr__l--100)) solid;
    border-bottom: 2rem hsl(var(--clr__h--main1), var(--clr__s--main1), var(--clr__l--main1)) solid;
  /*  background-color: hsl(var( --clr__brd--h ) var(--clr__brd--s) var( --clr__brd--l));*/
    border-radius: 0% 100% 0% 100% / 80% 100px 80% 100px ;
    border-radius: 0 50% 0 50% / 0px 100px 0px 100px;
     

    z-index: 2;
}


#aboutMe__bg {
    width: 100vw; 
    height: 80%;  
    margin-inline: auto;
    background-size: auto; 
    
    border: .5rem solid hsl(var( --clr__brd--h ) var(--clr__brd--s) var( --clr__l--100));;
}

    @media (width >= 600px) {
        #aboutMe__bg { margin-left: clamp(50px, 20%, 500px);
            border-radius: 40vh 0  0  40vh  ; }
        
    }
#aboutMe #aboutMe__content{


    background-color: hsl(var( --clr__brd--h ) var(--clr__brd--s) var(--clr__l--900));
    
    padding: 2rem 2rem 3rem 2rem;
    
    border: 5px solid;
    border-radius: 38% 62% 24% 76% / 90% 30% 70% 10% ;
    border-color: hsl(var(--clr-white));
}
#about__header {

    container-type: about__header / inline-size;


    margin-block: 8cqh 4cqh;
    text-align: right;
    width: 70%;
    height: minmax(auto, 200px);  
    
}

    @media (width >= 320px){ #about__header { width: 70%; } }   
    @media (width >= 560px){ #about__header { width: 70%; } }  

#aboutMe__content  .mediaContent--text #about__header{
    margin-left: 30%;
    }

    #about__header__title{
        display: inline-block;
        margin-block: auto;
        
        text-align: center;

        font-weight: 600;

        font-size: clamp(30px, 10cqi, 64px);
    }
.about__decoration {
    width: 200px;
    height: auto;

    float: left;
    padding: 1rem;
    shape-outside: url(/media/Page1/aboutMe__00Offset.avif);
}


#about__content{
    justify-content: space-evenly;
    align-content: center;
    justify-self: center;


    width: 100%;
}    




/* ---------------------------------------------------------- */
/* --------------------   doesAndDoesnts   ------------------ */
/* ---------------------------------------------------------- */
#doesAndDoesnts{
    --bgSize:auto; 
    padding-bottom: 150px;
    margin-top: -150px;
  
    background-position: right 35% top 5%;
    border-bottom: 2rem hsl(var( --clr__brd--h ) var(--clr__brd--s) var( --clr__brd--l)) solid;

    border-bottom: 2rem hsl(var(--clr__h--main1), var(--clr__s--main1), var(--clr__l--main1)) solid;
    border-radius: 100% 0% 100% 0% / 0% 100% 150px 100%;


}

.doesAndDoesnts__header {
    container: doesAndDoesnts__header / inline-size;

    align-self: center;

    display: flex;
    flex-direction: column;

    align-items: center;
    gap: .5rem;

    width: clamp(290px, 60cqi, 410px);
    padding-block: 12em 3em;
}

.doesAndDoesnts__business{
    font-size: clamp(22px, 20cqi, 96px);
    text-align: center;
    margin-left: -20px;
    
}




    .doesAndDoesnts__threeText {
            
            grid-area: textArea;
            margin-inline: auto;
            margin-top: 80px;
            margin-top: clamp(50px, 15vh, 100px);
        }

        .doesAndDoesnts__three {

            --doesAndDoesnts__three--width: 40cqw;
            
            gap: 1rem;
        
            display: inline;
            width: var(--doesAndDoesnts__three--width);
            height: auto;


            overflow: hidden;
        
            float: left;
            margin:0 15px 0 0;
            padding: 0 15px 5px 15px;

            border-right: solid 2px;
            border-bottom: solid 2px;
            border-radius: 1em;
            border-color: hsl(var( --clr__txt--h ) var(--clr__txt--s) var( --clr__txt--l));
        }

            .doesAndDoesnts__three > div {  gap: 0; }


            .doesAndDoesnts__three__inline {
                padding: 0;
                margin: 0;
                text-align: center;
                inline-size: none;
            }

            #doesAndDoesnts__small {
                    font-size: clamp(.5em, 5cqi, .7em);
            }

            #doesAndDoesnts__or {
                font-size: clamp(.8em, 5cqi, 1.2em);
                font-style: italic;
                justify-content: center;
                align-items: center;
            }

            #doesAndDoesnts__large {
                font-size: clamp(1em, 10cqi, 2.5em);
            }

            #doesAndDoesnts__or::before, 
            #doesAndDoesnts__or::after{
                content: ' ';
    
                display: inline-block;

                height: .3cqh;
                width: 5cqw;
    
                background-color: hsl(var( --clr__txt--h ) var(--clr__txt--s) var( --clr__txt--l));
                border-radius: 25%;
            } 
    



/* ---------------------------------------------------------- */
/* -----------------------  Contact me ---------------------- */
/* ---------------------------------------------------------- */
#contactMe{
    padding-bottom: 150px;
}


#contactMe__content {  /* main content (not background). width and height set up by .content--normal*/
    z-index: 1000;

    background-position: right 35% top -50%; 


}

#contactMe__tabs{ /* main contantMe div, contains all the tabs & labels */    
    height: 80svh;
    width: 100%;
}

    @media (width >= 600px){
        #contactMe__tabs {
            height: 80vh;
        }    
    }


.contactMe--tab {
    container-type: inline-size;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    width: 95%;
    height: 95%;
    padding: 5% 6%;

    margin: auto;
}



#contactMe__tabs .tabs__heading{ /*label on the side*/
    height: 100%;

    padding-block: 1rem;

    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: -2px;
    
    font-weight: normal;
    font-weight: bold;
    color: hsl(var(--clr__txt--h), var(--clr__s--200), var(--clr__l--600)); 
    -webkit-text-stroke-width: .5px;
    -webkit-text-stroke-color: hsl(var(--clr-white));


    color: hsl(var(--clr__txt--h), var(--clr__s--200), var(--clr__l--600)); 

    background: transparent;
    
}

  
    #contactMe__tabs input[type='radio']:checked + label {  /* side label, when checked*/
        background: transparent;
        color: hsl(var(--clr__txt--h), var(--clr__txt--s), var(--clr__l--400)); 
        font-style: italic;
        font-weight: bolder;
        text-shadow: 2px 2px 2px hsl(var(--clr-black)  / .4);
    }




/* ------------------ */
/* contactMe - emails */
/* ------------------ */


    #contactMe--email__container--left{

        min-width: 50%;
        height: 100%;
        align-items: start;
        
        gap: 5px;
    }

        #contactMe--email__container--left > div {
            padding-inline: clamp(3px, 5%, 15px);
        }

        #contactMe--email__container--left h4 {
            text-align: center;


            margin-bottom: 3px;
            line-height: .9;
        }

        #contactMe--email__container--left p {
            margin-top: 5px;
        }
        
        #contactMe--email__container--left p:nth-child(3) {
            margin-right: 50px;
            text-align: right;
            font-style: italic;
        }

        .contactMe__inputs{
            align-self: center;
            justify-self: center;
            margin: 5px auto;


            width: 150px;
            height: 30px;
            border: none;
            outline: none;
            padding-left: 10px;
            font-weight: 500;
            color: hsl(var( --clr__txt--h ) var(--clr__s--200) var( --clr__txt--l));
            border-radius: 50px;
        }
            .contactMe__inputs:focus{
                border: 2px solid;
                border-color: hsl(var( --clr__brd--h ) var(--clr__brd--s) var( --clr__brd--l));
            }

            .contactMe__inputs::placeholder{
                color: hsl(var( --clr__txt--h ) var(--clr__txt--s) var( --clr__l--700));
            }

        #contactMe--email__container--left form {
            justify-content: space-evenly;
        }

        #contactMe--email__container--left form div {
            align-self: center;
            justify-self: center;
        }

        #contactMe--email__container--left fieldset {
            color: hsl(var( --clr__txt--h ) var(--clr__s--900) var(--clr__l--100));            
        }
            #contactMe--email__container--left fieldset > div label {
                color: hsl(var( --clr__txt--h ) var(--clr__text--s) var(--clr__text--l));
            }


        #contactMe--email__container--left textarea {
            width: 90%;
            height: 60px;


            padding: 10px 5px;
            border-radius: 15px;
            margin-inline: auto;
            margin-bottom: 10px;
        }

            @media (width >= 600px){
                #contactMe--email__container--left textarea {
                    height: 100px;
                }    
            }


    #contactMe--email__container--right{
        container-type: inline-size;
        align-self: center;
        justify-self: center;

        height: auto;
        width: 100%;
        overflow: hidden;
    }

    #contactMe--email__container--right > *{
        width: auto;
        max-height: 600px;
        clip-path: ellipse(50% 50% at 50% 50%);
    } 

        @media (width >= 600px){
            #contactMe--email__container--right{
                background: hsl(var(--clr-white));
                clip-path: ellipse(50% 50% at 50% 50%);    
                border: 5px solid hsl(var(--clr-white));         
            }

        }


/* ------------------- */
/* contactMe - bookNow */
/* ------------------- */


#contactMe--bookNow__container  {

    justify-items: space-evenly;

    width: clamp(30%, 150px , 45ch);
    height: 100%;

    container-type: inline-size;

    margin-inline: center;
    height: auto;
    width: 100%;
    overflow: hidden;


}   



    #contactMe--bookNow__container  a {
        font-size: inherit;
        color: inherit;
    }


    #contactMe--bookNow__container  h3 {
        text-align: center;
    }

    #contactMe--bookNow__container  .google {
        margin-block: 2rem;
        width: 250px;
        margin-inline: auto;
    }


#contactMe--bookNow__decor {

    margin-top: 2rem;
    margin-inline: auto;


    height: 200px;
    width: 80%;

}    




#contactMe--bookNow__decor .bgImg{
    height: 70%;
    width: auto;
    margin-inline: auto;
    
    object-fit: cover;

    border-radius: 1rem;
    border: .5rem solid hsl(var(--clr__brd--h) var(--clr__brd--s) var(--clr__brd--l));
} 



/* ------------------ */
/* contactMe - prices */
/* ------------------ */

#contactMe--prices{
    container: contactMe--prices__container / inline-size;


}


#contactMe--prices__container li {
    align-items: center;
}

    #contactMe--prices__container li .button {
        justify-self: end;
        align-self: flex-end;

    }

#contactMe--prices__container {
    width: 100%;
    height: 100%;

    margin-inline: auto;
}


#contactMe--prices__container {

    container-type: inline-size;
    
    gap: 10px; 
    margin-inline: center;
    height: auto;
    width: 100%;
    overflow: hidden;
    
} 

#contactMe--prices__container li {
    justify-content: space-evenly;
    align-content: space-evenly;
    gap: clamp(5px, 1rem, 30px);
}

    #contactMe--prices__container li a button {
        align-self: center;
        justify-self: center;
    }

    
    #contactMe--prices__container li a  {
        display: inline;
        color: inherit;
        cursor: pointer;
    }

    #contactMe--prices__container li div span {
        display: inline;
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
    }
    #contactMe--prices__container .contactMe--prices__desktop,
    #contactMe--prices__container .contactMe--prices__desktop > * {
        display: none;
        height: 0;
        width: 0;
    }

    @media (width >= 750px) {
        #contactMe--prices__container .contactMe--prices__mobile {
            display: none; 
        }
        #contactMe--prices__container a  {
            padding: 0 2rem 2rem 0;
            cursor: pointer;
            text-decoration: none;
        }
        #contactMe--prices__container .contactMe--prices__desktop {
            display: inline; 
            font-style:normal;
            height: 100%; width: 100%;
        }

    }