#sup { 

    vertical-align: super;

    display:inline-block;

}



img{

    width:100%;

}



/*///////HEADER IMAGE/////*/
@-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }
@keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }

#Head-container.hero{
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
}

.hero-picture{
    display: block;
    width: 100%;
}

.hero-image{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    -webkit-animation: fadeIn 0.7s ease-in forwards;
    animation: fadeIn 0.7s ease-in forwards;
}

@media screen and (max-width:800px){
    .hero-image{
        aspect-ratio: 4 / 3;
        min-height: 260px;
    }
}







/*///////HEADER TITLE/////*/
.Head-Title.hero-content{
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0 5%;
    box-sizing: border-box;
    text-align: center;
    color: #111;
}

@media screen and (max-width:800px){
    .Head-Title.hero-content{
        width: 100%;
        padding: 0 8%;
        align-items: center;
        text-align: center;
    }
}

.Head-Title.hero-content h2,
.Head-Title.hero-content .Headerp,
.Head-Title.hero-content .headTitlehr{
    margin-left: auto;
    margin-right: auto;
}

h4{

    font-size:3vw;

    font-weight:300;

}

    @media screen and (max-width:1680px){

        h4{

            font-size:3.5vw;

            font-weight:300;

        }

        }

    @media screen and (max-width:1280px){

        h4{

            font-size:4vw;

            font-weight:300;

        }

        }

    @media screen and (max-width:1120px){

        h4{

            font-size:5vw;

            font-weight:300;

        }

        }

        @media screen and (max-width:1100px){

            h4{

                font-size:4.5vw;

                font-weight:300;

            }

            }

            @media screen and (max-width:600px){

                h4{

                    font-size:5vw;

                    font-weight:300;

                }

                }

        @media screen and (max-width:414px){

            h4{

                font-size:8vw;

                font-weight:300;

            }

            }  



.Headerp{
    font-size: 1.15vw;
    letter-spacing: .08em;
    margin-top: 1rem;
    line-height: 1.4;
    text-align: center;
}

@media screen and (max-width:1120px){
    .Headerp{
        font-size: 1.8vw;
    }
}

@media screen and (max-width:800px){
    .Headerp{
        font-size: 2.5vw;
    }
}

@media screen and (max-width:600px){
    .Headerp{
        font-size: 4vw;
        letter-spacing: .02em;
    }
}
/*//////TEXT WHITE BOX////*/

.hero-text-box{
    display: inline-block;
    width: auto;
    max-width: min(90%, 900px);
    margin: 0 auto;
    padding: 2rem 2.5rem;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.hero-text-box h2{
    margin: 0;
}

.hero-text-box .headTitlehr{
    width: 50%;
    margin: 1rem auto;
}

.hero-text-box .Headerp{
    margin: 0;
}

@media screen and (max-width: 1120px){
    .hero-text-box{
        max-width: min(92%, 760px);
        padding: 1.6rem 2rem;
    }
}

@media screen and (max-width: 800px){
    .hero-text-box{
        max-width: 90%;
        padding: 1.3rem 1.5rem;
    }

    .hero-text-box .headTitlehr{
        width: 58%;
        margin: 0.8rem auto;
    }
}

@media screen and (max-width: 600px){
    .hero-text-box{
        width: 92%;
        max-width: 92%;
        padding: 1rem 1rem;
        border-radius: 3px;
    }

    .hero-text-box .headTitlehr{
        width: 64%;
        margin: 0.7rem auto;
    }
}

@media screen and (max-width: 414px){
    .hero-text-box{
        width: 94%;
        max-width: 94%;
        padding: 0.9rem 0.85rem;
    }

    .hero-text-box .headTitlehr{
        width: 70%;
        margin: 0.6rem auto;
    }
}
/*///////HEADER ARROW/////*/

.svgContainer{  

        display: inline-block;

        position: relative;

        width: 40%;

        height:15%;

        padding-bottom: 50%; 

        vertical-align: middle; 

        overflow: hidden; 

}

    @media screen and (max-width:1680px){

        .svgContainer{  

            width: 20%;

        }

        } 

    @media screen and (max-width:1280px){

        .svgContainer{  

            width: 20%;

        }

        } 

    @media screen and (max-width:1120px){

        .svgContainer{  

            width: 20%;

        }

        } 

        @media screen and (max-width:414px){

            .svgContainer{  

                height:8%;

                padding-bottom: 20%;

            }

            } 





.arrow { 

	display: inline-block;

	position: absolute;

	top: 0;

	left: 0;

}



h6{

    font-size:5vw;

    font-weight:300;

    position:absolute;

    left:5%;

}

@media screen and (max-width:414px){

    h6{

        width:100%;

        margin:0 auto;

        margin-top:20%;

        font-size:12vw;

        position: relative;

        display:block;

        line-height:30px;

        text-align:right;

        padding-right:10%;



    }

}

/*///////////MAIN///////*/



#homeslider, .sliderimg, .homeProjects, img{

    width:100%;

}

.hometitles{

    margin:4% 0% 1% 4%;

}

@media screen and (max-width:800px){

    .hometitles{

        margin:4% 0% 1% 8%;

}

}



@media screen and (max-width:600px){

    .hometitles.contact.news{

        margin-top:-13%;

}

}

.hometitles h2{

    color:black;

    font-weight:100;

    font-size:2.8vw;

    letter-spacing:1vw;

}

/*SERVICES*/

.services-title{
    display: block;
    width: auto;
    margin: 0 auto;
    text-align: center;
    font-size: 2.2vw;
    font-weight: 100;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

    @media screen and (max-width:1280px){

    .services-title{

        padding: 2%;

    }

    }

    @media screen and (max-width:800px){

        .hometitle-News h2, .services-title{

            font-size:4vw;

            padding: 0;
            line-height: normal;

        }

        }



#homeServices-container{
    width: 100%;
    margin: 0 auto;
    padding: 10% 12% 0 12%;
    position: relative;
    transition: .5s;
    text-align: center;
    overflow-x: clip;
}



    @media screen and (max-width:1120px){

        #homeServices-container{

            padding:10% 5% 0% 5%;

        }

        }

#homeServices-container:hover{

    color:black;

}

#home-services-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 5%;
    width: min(90%, 1400px);
    margin: 7% auto 0 auto;
    padding-bottom: 20%;
    text-align: center;
    font-size: 1.3vw;
    color: grey;
    justify-content: center;
}

    @media screen and (max-width:800px){

        #home-services-grid{

            width:100%;

            margin:2% auto;

            grid-gap:2%;

            padding-bottom:20%;

            font-size:2vw;

        }

        }

    @media screen and (max-width:800px){

         #home-services-grid {

            margin:4% auto;

            margin-bottom:15%;

        }

        }

     @media screen and (max-width:600px){

         #home-services-grid {

            grid-template-columns:repeat(2,1fr);

            margin:4% auto;

            margin-bottom:15%;

            font-size:3.6vw;

            grid-gap:10%;

            padding-bottom:30%;

        }

        }

.signServices{

  width:100%;

  height:7vh;

  margin:0 auto 10%;

  transition:.3s;

}

  @media screen and (max-width:1100px){

    .signServices{

      height:5vh;

    }

  }



  @media screen and (max-width:500px){

    .signServices{

      height:7vh;

      margin-top:12%;

    }

  }





  .signServices:hover {

  filter: invert(32%) sepia(55%) saturate(2000%) hue-rotate(138deg) brightness(200%) contrast(90%);

}

.linkServices h3{

    position:absolute;

    bottom:4%;

    right:4%;

    transition:0.1s;

    font-size:1.5vw;

    font-weight:1000;

    letter-spacing:.3vw;

}



    @media screen and (max-width:1280px){

    .linkServices h3{

        font-size:2vw;

        font-weight:100;

    }

    }



    @media screen and (max-width:800px){

        .linkServices h3 {

            font-size:3vw;

            font-weight:100;

            bottom:0;

        }

        }

    @media screen and (max-width:600px){

        .linkServices h3 {

            font-size:4.5vw;

            font-weight:100;

            bottom:0;

            right:0%;

            left:0%;

            text-align:center;

            margin:0 auto;

        }

        }

.linkServices h3:hover{

    color:var(--background);

}

.iconServices{

    width:30%;

    aspect-ratio:1/1;

    margin:10% auto;

    display:block;

}

.homeli1, .homeli2, .homeli3, .homeli4{

    background-color:none;

    -webkit-transition: .4s ease-out;

    -moz-transition: .4s ease-out;

    -o-transition: .4s ease-out;

    transition: .4s ease-out;

}

.homeli1:hover, .homeli2:hover, .homeli3:hover, .homeli4:hover{

    background-color:var(--background);



}



/*Projects*/

#homeProjects-container{

    position:relative; 

}

    @media screen and (max-width:600px){

    #homeProjects-container{

        margin-bottom:25%; 

    }

    }

.projects-picture{
    display: block;
    width: 100%;
}

.projects-image{
    display: block;
    width: 100vw;
    height: auto;
    aspect-ratio: 2048 / 858;
    object-fit: cover;
    opacity: .88;
}

@media screen and (max-width:1024px){
    .projects-image{
        aspect-ratio: 16 / 9;
        opacity: .82;
    }
}

@media screen and (max-width:600px){
    .projects-image{
        aspect-ratio: 4 / 3;
        opacity: .72;
    }
}

    



.links1, .links2, .links3, .links4{

    width:100%;

    position:absolute;

    display:flex;

    align-content:right;

    justify-content: flex-end;

    font-weight:100;

    color:grey;

    letter-spacing:1.5vw;

}

.links1:hover, .links2:hover, .links3:hover, .links4 h3:hover{

    color:var(--background);

}

    .links1{

        top:25%;

    }

    .links2{

        top:40%;

    }

    .links3{

        top:55%;

    }

    .links4{

        top:90%;

    }

    @media screen and (max-width:800px){

        .links1{

            top:20%;

            text-align:left;

        }

        .links2{

            top:40%;

            text-align:left;

        }

        .links3{

            top:60%;

            text-align:left;

        }

        .links4{

            top:90%;

        }

        }

    @media screen and (max-width:600px){

        .links1{

            top:12%;

            text-align:left;

            padding:4%;

        }

        .links2{

            top:40%;

            text-align:left;

            padding:4%;

        }

        .links3{

            top:68%;

            text-align:left;

            padding:4%;

        }

        

        .links4{

            top:105%;

        }

        }

    .links4 h3{

        color:black;

        font-weight:400;

        font-size:2vw;

        letter-spacing:0.5vw;

        padding-right:4%;

    }

        @media screen and (max-width:800px){

        .links4 h3 {

            font-size:3vw;

        }

        }

        @media screen and (max-width:600px){

            .links4 h3 {

                font-size:4.5vw;

            }

            }



    .projectlink1{

    width: 25%;

    font-size:2.5vw;

    }

        @media screen and (max-width:800px){

            .projectlink1{

            font-size:3vw;

        }

        }

        @media screen and (max-width:600px){

            .projectlink1{

            font-size:4vw;

            width: 30%;

        }

        }

    .projectlink1-No{

        width: 25%;

        border-bottom: 1px solid grey!important;

        padding: 0.01em 5px;

        font-size:2.3vw;

    }

    @media screen and (max-width:600px){

        .projectlink1-No{

            width: 20%;

            font-size:3.5vw;

    }

    }

    .projectlink1-No:hover{

        border-bottom: 1px solid rgb(0, 207, 207)!important;

    }

/*YOU PROJECT*/

/*Projects*/

#homeTALK2US-container{

    position:relative; 

}

    @media screen and (max-width:600px){

    #homeTALK2US-container{

        margin-bottom:10%;

        padding:1% 10% 15% 10%

    }

    }

.contact{

    margin-top:10%;

    width:65%;

    margin:10% auto 2% auto;

}

@media screen and (max-width: 800px){

    .contact{

        width:75%;

    }

    }

    @media screen and (max-width: 600px){

        .contact{

            width:80%;

        }

        }



 #Inner{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    grid-gap:40px;

    width:65%;

    margin:3% auto;

    }

    @media screen and (max-width: 800px){

        #Inner{

            grid-template-columns:repeat(1,2fr);

            grid-template-rows: auto auto;  

        grid-gap:10px;

        width:75%;

        }

        }

        @media screen and (max-width: 600px){

            #Inner{

            width:80%;

            margin:1% auto;

            }

            }

            @media screen and (max-width: 450px){

                #Inner{

                width:100%;

                margin:0 auto;

                }

                }

            



.about-picture,
.about-image{
    display: block;
    width: 100%;
}

.Innerimg img,
.about-image{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    -webkit-transition: filter .4s ease-out;
    -moz-transition: filter .4s ease-out;
    -o-transition: filter .4s ease-out;
    transition: filter .4s ease-out;
    filter: drop-shadow(0 0 4rem rgb(241, 241, 241));
}

@media screen and (max-width: 800px){
    .Innerimg img,
    .about-image{
        opacity: 1;
    }
}

.Innerimg img:hover,
.about-image:hover{
    cursor: pointer;
    filter: drop-shadow(0 0 0.5rem rgb(255, 255, 255));
}



#second p{

    position:absolute;

    bottom:10vh;

    font-size: 1.2vw;

    font-weight:200;

}



@media screen and (max-width: 1080px){

    #second p{

        bottom:5vh;

        font-size: 1.5vw;



}

}

@media screen and (max-width: 800px){

    #second p{

        padding:4vh 0 7vh 0;

        position:inherit;

        font-size: 2.2vw;



}

}



@media screen and (max-width: 600px){

    #second p{

        font-size: 3.5vw;

        line-height: 6vw;

        padding:4vh 0 3vh 0;

}

}



/*Grid Present photos*/

#first{

grid-column: 1 / 2;



}

#second{



grid-column: 2 /2;

grid-row:1/2;

}





@media screen and (max-width: 800px){

    #first{

        grid-column: 1 / 1;

        grid-row:1/2;

        opacity:.6;

        }

    #second{

        grid-column: 1 / 1;

        grid-row:2/2;

    }

    }



.linkContact h3{

    position:absolute;

    bottom:0;

    right:0;

    font-size:2vw;

    font-weight:400;

}

    @media screen and (max-width: 800px){

        .linkContact h3{

            font-size:3vw;

            right:0;

        }

        }

    @media screen and (max-width: 600px){

        .linkContact h3{

            font-size:4.5vw;

            bottom:0%;

        }

        }

/*NEWS*/

#homeNews-container{

    width:100%;

    position:relative;

    text-align:center;

    margin:0 auto;

    padding:1% 18% 10% 18%;

    transition:0.5s;

}

    @media screen and (max-width: 800px){

        #homeNews-container{

            width:100%;

            position:relative;

            text-align:center;

            margin:0 auto;

            padding:1% 12.5% 10% 12.5%;

            transition:0.5s;

        }

        }

        @media screen and (max-width: 600px){

            #homeNews-container{

                margin:0 auto;

                padding:1% 10% 10% 10%;



            }

            }





#homeNews-container:hover, #home-News-grid:hover, .Newstext1:hover{

    color:black;

}

.news-picture,
.news-image,
.Newsimg{
    display: block;
    width: 100%;
}

.Newsimg,
.news-image{
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin: 0 auto;
}

.linkNews h3{

    position:absolute;

    bottom:0%;

    right:18%;

    font-size:2vw;

    font-weight:400;

}

    @media screen and (max-width:1120px){

        .linkNews h3{

            bottom:5%;

    }

    }

    @media screen and (max-width:800px){

        .linkNews h3{

            font-size:3vw;

            bottom:2%;

            right:12.5%;

    }

    }

    @media screen and (max-width:600px){

        .linkNews h3{

            font-size:4.5vw;

    }

    }



.linkNews:hover{

    color:var(--background);



}

.hometitle-News{

    padding:8% 0 5% 0;

}

    @media screen and (max-width:1120px){

        .hometitle-News{

            padding:8% 0 1% 0;

        }

        }

.hometitle-News h2, .services-title{

    font-size:2.8vw;

    font-weight:100;

    letter-spacing: 1vw;

    line-height:7vh;

}

    @media screen and (max-width:800px){

        .hometitle-News h2, .services-title, .hometitles h2{

            font-size:3.6vw;

        }

        }

    @media screen and (max-width:800px){

    .hometitle-News h2, .services-title, .hometitles h2{

        font-size:4.8vw;

    }

    }



.Newstext1{

    font-size:1.2vw;

    line-height:2vw;

}

    @media screen and (max-width:1120px){

        .Newstext1{

            font-size:1.6vw;

            line-height:3vw;

        }

        }

        @media screen and (max-width:800px){

            .Newstext1{

                font-size:2.2vw;

                line-height:4vw;

            }

            }

        @media screen and (max-width:600px){

            .Newstext1{

                font-size:3.5vw;

                line-height:6vw;

            }

            .secondtext{

                display:none;

            }

            }





#home-News-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    grid-gap:5%;

    width:100%;

    margin:0 auto;

    padding:20% auto;

    text-align:left;

}

    @media screen and (max-width:600px){

        #home-News-grid{

            display:grid;

            grid-template-columns:repeat(1,1fr);

        }

         }