/* Global Style */

*,
*::before,
*::after{
    box-sizing: border-box;
}

:root{
    /* Consolas, monaco, monospace */

    /*Font Family*/
    /* --ff-primary: 'Consolas', sans-serif;
    --ff-secondary: 'Consolas', monospace; */

    --ff-primary: 'Inconsolata', sans-serif;
    /* --ff-secondary: 'Consolas', monospace; */

    /*Font Weight*/
    --fw-reg: 300;
    --fw-bold: 900;

    /*color*/
    --clr-light: #fff;
    --clr-dark: #000000;
    --clr-accent: #f1620e;


    /* --clr-dark: black; */
    /* --clr-accent: #f1620e; */

    /*Font Size*/
    --fs-h1: 3rem;
    --fs-h2:2.25rem;
    --fs-h3: 1.25rem;
    --fs-body: 1rem;


}

@media (min-width: 800px) {

    :root{
        --fs-h1: 3.5rem;
        --fs-h2: 3rem;
        --fs-h3: 1.2rem;
        --fs-body: 1.125rem;
    }

}

/*Typography*/
h1,
h2,
h3{
    line-height: 1.1;
    margin: 0;
}

h1{
    font-size: var(--fs-h1);
}

h2{
    font-size: var(--fs-h2);
}

h3{
    font-size:var(--fs-h3);
}






body{
    background: var(--clr-light);
    color: var(--clr-dark);
    margin: 0;
    font-family: var(--ff-primary);
    font-size: var(--fs-body);
    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}



@media(min-width: 800px){

    body{
        display: flex;
        justify-content: space-around;
    }

}

/* For Wide Screen */

@media(min-width: 1600px){


    .logo-section{

        /* background-color: rgb(252, 193, 44); */
        position:relative;
        right:-5%
        
    }

}


a{
    color:var(--clr-dark);
    text-decoration: none;
}


/* Global Style Ends */

/* logo-section */
.logo-section{
    /* border: solid black; */
    height: auto;


}

/* html.is-leaving .logo-section{

    opacity: 0;
    transform: translateY(-100%);
} */



@media (min-width: 800px) {

    .logo-section{

        /* display: grid; */
        width: min-content;
        height: 2000px;
        
        
        
    }
    
}


.logo-container{

    position: -webkit-sticky;
    position: sticky;
    top:40%;
    /* border: dotted red */

}

.logo-titles{

    margin-bottom: -.05em;
    cursor: default;
    /* font-weight: var(--fw-reg); */
    /* align-self: end; */

}

.logo-titles strong{
    display: inline-block;
}

@media (min-width: 800px) {

    .logo-titles{
        margin-bottom: -.45em;
    }

   

    #logo-titles-other-def{



        background: var(--clr-accent);
        text-align: left;
        padding: .25em 1em;
        /* position: relative; */
        /* margin-bottom: .5em; */
        font-size: .5em;
        border-radius: 3%;

        opacity: 1;

        transition: all 3s;

        
        

    }

    #logo-titles-other-def.hide{
        opacity: 0;
    }

    #logo-titles-other-myName{

        font-weight: var(--fw-reg);

    }

    .logo-container-Nav{
        visibility: hidden;
        display: flex;
        justify-content: space-between;
    }


    
}

.logo-container-Nav{
    visibility: hidden;

}



/* my-services-section */
.my-services-section{
    /* border: solid rgb(255, 51, 0); */
   
    background-blend-mode: soft-light;
    width: 400px;
    opacity: 1;
    transition-duration: 1500ms;
    transform: translateX(0);
    
}

/* html.is-animating .my-services-section{
    transform: translateX(100%);
}

html.is-leaving .my-services-section{

    opacity: 0;

    

} */


.services-container{
    
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

@media (min-width: 800px) {

    .my-services-section{
        /* border: solid rgb(255, 51, 0); */
        
        background-blend-mode: soft-light;
        width: 600px;
    
        opacity: 1;
        transition-duration: 1500ms;
        transform: translateX(0);
        
    }
    

    .services-container{
    
        position: static;
    }
        
    
}


/* Single Service */

.service{
    /* border: solid black; */
    border-radius: 1.5%;
    margin-bottom: 2em;
    height: max-content;
    width: 100%;
    padding-top: .5em;
    
}

.service_Nav{
    position: relative;

    /* width: 30%;
    height: 20px; */

    margin-bottom: .7em;
    
}



.service_Content{
    position: relative;

    background-color: #f1620e;
    width: 80%;
    height: 100px;
    border-radius: 1%;

}

@media (min-width: 800px) {

    .service_Content{
        position: relative;
    
        background-color: #f1620e;
        width: 100%;
        /* height: ; */
        border-radius: 1%;
    
    }
    
}

.service_Content_Title{
    padding-left: .25em;
}



.service_Content_VisualInfo{

    visibility: hidden;

}

.service_Content_VisualInfo_Image{

    width: 560px;
    height: intrinsic;
   
    
}




@media (min-width: 800px) {

    .service_Content{

        height: max-content;

    }

    .service_Content_VisualInfo{

        visibility: visible;
    
    }
    
}





.serviceElement-Nav{

    visibility: hidden;
    display: flex;
    justify-content: space-between;

}

.serviceElement-Content-Description{
    margin-top: 1.5em;
}


.serviceElement-Content-subTitle{
    margin-top: 2em;
    margin-bottom: 1.25em;
}

.serviceElement-Content-Image{
    margin-bottom: 1em;
}

.serviceElement-Content-Video{
    margin-bottom: 1em;

}


.serviceElement-Content-Image img{
    width: 100%;
    height: auto;
}

.serviceElement-Content-SpecificationTable{
    margin-bottom: 1em;
}

.serviceElement-Content-SpecificationTable-subTitle{

    font-weight: var(--fw-bold);
    font-size: 1.15em;
    padding-right: 1.5em;
   


    
}
.serviceElement-Content-ProgressLog-Individual {
    margin-bottom: 1.5em;
}

.serviceElement-Content-ProgressLog-Individual li{

    color: #4F4F4F; 
    padding-left: 16px;
    margin-top: 24px;
    position: relative;
    font-size: 16px;
    line-height: 20px;
    
    &:before {
      content: '';
      display: block;
      height: 42px;
      width: 42px;
      border-radius: 50%;
      border: 2px solid #ddd;
      position: absolute; 
      top: -12px;
      left: -40px;
    }

}


/* Transition */
.transition-fade{
    opacity: 1;

    /* transition: transform 2000ms; */

    transition-duration: 2000ms;
   
    transform: translateX(0);
}

html.is-leaving .transition-fade{
    /* opacity: 0; */
    transform: translateX(100%);
}

html.is-animating .transition-fade{
 
    opacity: 0;
    transform: translateX(100%);
}