/* style */
/* INFO ////////



//////////////*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;


}
::-webkit-scrollbar{
    width: 5px;
}

::-webkit-scrollbar-track{
    background: transparent;
}
::-webkit-scrollbar-thumb{
    background-color: rgba(250,0,0,0.7);
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover{
    background-color: rgba(250,0,0,0.5);
}
@font-face {
    font-family: "Arial";
    src: url(../fonts/arial.ttf);
}
@font-face {
    font-family: "Fira-Sans";
    src: url(../fonts/FiraSansExtraCondensed-Medium.ttf);
    font-weight: 500;
    src: url(../fonts/FiraSansExtraCondensed-SemiBold.ttf);
    font-weight: 600;
}

html{
    background-color: black;
    font-family: Arial;
    font-size: 20px;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}
@keyframes preLoadAnim {
    from{
        opacity: 0.1;
    }
    to{
        opacity: 1;
    }    
}
#preLoader{
    background-color: #000;
    width: 100%;
    height: 100;
    position: fixed;
    top:0;
    left: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    opacity: 1;
    transition: 0.5s ease-out;
}
.preLoaderImg{
    background-color: #000;
    width: 400px;
    height: 400px;
    position: absolute;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    opacity: 1;
    transition: 0.5s ease-out;
}
.preLoaderImg img{
    width:100px;
    animation: preLoadAnim 0.5s linear alternate infinite;
}
#preLoader img{
    width: 300px;
    animation: preLoadAnim 0.5s linear alternate infinite;
}

section h1{
    font-family: Fira-Sans;
    font-weight: 500;
    color:#fff;
    font-size: 170%;
    text-align: center;
    letter-spacing: 1px;
}
section hr{
    display: block;
    border: none;
    height: 2px;
    width:50%;
    position: relative;
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgb(255,0,0), rgba(0,0,0,0));
    margin: 0 auto;
}
section p{
    margin-top: 10px;
    font-family: Fira-Sans;
    text-align: center;
    color: #fff;
}
/* Header /////////////////////////////
/////////////////////////////////////*/

header{
    height: 200px;
    width: 100%;
    background-image: linear-gradient(to bottom, #000 50%, rgba(0,0,0,0));
    top:0;
    z-index: 20;
    transition: 0.3s ease;
}
#header{
    position: fixed;
}

#logo{
    display: block;
    position: relative;
    float: left;
    z-index: 100;
    height: 80px;
    width: auto;
    margin-top: 20px;
    margin-left: 20px;
    transition: 0.3s ease;
}
/* Navigation /////////////////////////
/////////////////////////////////////*/

.mainNav{
    display: block;
    position: relative;
    float: right;
    width: max-content;
}
#mainNav{
    margin-top: 50px;
    transition: 0.3s ease;
}

.mainNav li{
    font-family: Fira-Sans;
    list-style: none;
    text-decoration: none;
    display: inline-block;
    margin-right: 30px;
    font-size: 130%;
}

.mainNav li a{
    color: #fff;
    text-decoration: none;
    transition: 0.3s ease;
}

.mainNav a:hover{
    color:rgb(255, 0, 0);
    transition: 0.3s ease;
}


/* Touch Navigation //////////////*/

.menu{
    display: none;
    float: right;
    position: relative;
    margin: 15px 20px 0 0;
    z-index: 100;
    cursor: pointer;
}
.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    border-radius: 20px;
    background-color: #fff;
    margin: 6px 0;
    transition: 0.3s ease;
}

.menu:hover div{
    background-color: #f00;
    transition: 0.3s ease;
}

.change .bar1{
    transform: rotate(-45deg) translate(-9px, 6px);
} 
.change .bar2{
    opacity: 0;
} 
.change .bar3{
    transform: rotate(45deg) translate(-8px, -8px);
}

#mainNavMedia{
    display: none;
    transition: 0.5s ease-in-out;
    
}
.mainNavMedia{
    z-index: 10;
    position: absolute;
    width: 100%;
    height: 100vh;
    transform: translateY(-1000px);
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    
    
}
#mainNavMediaUl{
    margin-top: 100px;
    opacity: 0;
    transition: 1s ease;
}

.mainNavMedia li{
    font-family: Fira-Sans;
    display: block;
    width: max-content;
    list-style: none;
    text-decoration: none;
    font-size: 200%;
    margin: 20px auto 20px;
    
}
.mainNavMedia li a{
    color: #fff;
    text-decoration: none;
    transition: 0.3s ease;
}

.mainNavMedia a:hover{
    color:rgb(255, 0, 0);
    transition: 0.3s ease;
}

/* Hero Section ///////////////////////
/////////////////////////////////////*/

.heroSection{
    position: relative;
    z-index: 0;
    margin-top:00px;
    height: 110vh;
    background-image: linear-gradient(to bottom,rgba(0,0,0,0) 80%,#000),url("/resources/img/HeroImg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
    padding-top: 250px;
    transition: 0.8s ease;
}

.heroText{
    display: block;
    position: relative;
    text-align: center;
    align-content: center;
    color:#fff;
    margin-right: auto;
    margin-left: auto;
    font-size: 270%;
    font-family: Fira-Sans;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 3px;
}
.heroText h2{
    margin-bottom: -10px;
}
.heroText h1{
    margin-top: -20px;
    font-size: 275%;
    font-weight: 600;
}
.heroText hr{
    display: block;
    border: none;
    height: 3.5px;
    width:65%;
    position: relative;
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgb(255,0,0), rgba(0,0,0,0));
    margin: 0 auto;
}

.heroPhone{
    float: right;
    margin-right: 50px;
    margin-top: 20%;
    font-family: Fira-sans;
    position: relative;
    display: inline-block;
    
}
.heroPhone img{
    width: 50px;
}
.heroPhone a,
.heroPhone img{
    display: inline-block;
    vertical-align: middle;
}
.heroPhone a{
    font-size: 130%;
    text-decoration: none;
    color: #fff;
    transition: 0.3s ease;
}
.heroPhone a:hover{
    color: rgb(255,0,0);
    transition: 0.3s ease;
}
.heroSocial{
    position: relative;
    display: inline-block;
    margin-left:50px;
    margin-top: 20%;
    font-family: Fira-sans;
    color:#fff;
    font-size:130%;    
}
.heroSocial img{
    height: 50px;
    transition: 0.3s ease;
}
.facebookIconHover{
    margin-left: -50px;
    opacity: 0;
    transition: 0.5s ease;
}
.heroSocial a:hover .facebookIcon{
    opacity: 0;
    transition: 0.3s ease;
}
.heroSocial a:hover .facebookIconHover{
    opacity: 1;
    transition: 0.3s ease;
}


.heroSocial a,
.heroSocial h3{
    display: inline-block;
    vertical-align: middle;
}


/* Pasion Section /////////////////////
/////////////////////////////////////*/

.pasionSection{
    margin-top: 100px;
    margin-bottom: 200px;
}
.showcaseBox{
    margin: 30px auto 0;
    width: max-content;
}
.showcase{
    display: inline-block;
    text-align: center;
    width: 500px;
    height: 350px;
    
    align-content: center;
    margin: 0 30px;
}

.showcase img{
    width: 500px;
    height: 350px;
}
.showcase div{
    position: absolute;
    background-image:linear-gradient(to right,rgba(0,0,0,0) , rgba(250,0,0,0.7)25% 75% ,rgba(0,0,0,0) );
    width: 500px;
    height: 50px;
    margin-top: 300px;
}
.showcase h3{
    font-family: Fira-Sans;
    font-size: 140%;
    text-align: center;
    color: #fff;
    line-height: 50px;
}

/* Brand Section /////////////////////
////////////////////////////////////*/
.brandSection{
    width: 100%;
}
.brandBox{
    margin: 0 auto;
    width: 90%;
    align-content: center;
    vertical-align: middle;
    justify-content: center;
}
.brandRow{
    margin: 0 50px;
    display: flex;
    justify-content: center;
    vertical-align: middle;
}
.brandImg{
    width: 200px;
    height: 200px;
    margin: 0 50px;
    display: inline-block;
}
.brandImg img{
    width: 200px;
}
.dotBox{
    text-align: center;
}
.dot{
    width: 15px;
    height: 15px;
    border-radius: 20px;
    background-color: #fff;
    display: inline-block;
    margin: 0 5px;
    
}
.active{
    background-color: rgb(255, 0, 0);
}

/* Service Section ////////////////////
/////////////////////////////////////*/

.serviceSection{
    height: 800px;
    width: 100%;
    margin-top:100px;
    color:#FFF;
    font-family: Fira-Sans;
    padding: 0 150px;
}

.service{
    box-sizing: border-box;
    display: inline-block;
    width: 450px;
    height: 200px;
    align-content: center;
    margin: 10px 10px;
}
.service img{
    position: relative;
    height: 100px;
    width: 100px;
    margin: 0 10px;
    border: none;
    border-radius: 50px;
    opacity: 1;
}
.serviceText{
    margin-top: 20px;
    width: 300px;
    height: 160px;
    
}
.serviceText hr{
    background-image: linear-gradient(to right,rgb(255,0,0), rgba(0,0,0,0));
    margin:0;
    width: 90%;
}
.hrServ{
    background-image: linear-gradient(to right,rgb(255,0,0), rgba(0,0,0,0));
    margin:0;
    width: 90%;
}
.service img,
.serviceText{
    display: inline-block;
    vertical-align: middle;
}

.row{
    opacity: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}
.serviceText p{
    text-align: left;
}
.serviceText h2{
    text-align: left;
}


/* Map  Section ///////////////////////
/////////////////////////////////////*/

.mapSection{
    width: 100%;
    height: 700px; 
}

.mapImg{
    background-image: url(../img/mapImg.png);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


/* Footer /////////////////////////////
/////////////////////////////////////*/

footer{
    color: #fff;
    text-align: center;
    font-family: Fira-sans;
}
footer hr{
    display: block;
    border: none;
    height: 3.5px;
    width:65%;
    position: relative;
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgb(255,0,0), rgba(0,0,0,0));
    margin: 0 auto 10px;
}
.footerDiv{
    display: inline-block;
    width: 250px;
    margin-left: 7%;
    margin-right: 7%;
    margin-top: 30px;
    margin-bottom: 30px;
    vertical-align: middle;
    align-content: center;
}
.secNav ul li{
    list-style: none;
    margin-bottom: 5px;
}
footer a{
    text-decoration: none;
    color:#fff;
    transition: 0.3s ease;
}
footer a:hover{
    color: rgb(255,0,0);
    transition: 0.3s ease;
}

.footerBottom{
    position: relative;
    display: block;
    width: 100%;
    color: #fff;
    text-align: center;
    margin-bottom: 10px;
}

.footerSocial img{
    height: 50px;
    transition: 0.3s ease;
}
.facebookIconHover{
    margin-left: -50px;
    opacity: 0;
    transition: 0.5s ease;
}
.footerSocial a:hover .facebookIcon{
    opacity: 0;
    transition: 0.3s ease;
}
.footerSocial a:hover .facebookIconHover{
    opacity: 1;
    transition: 0.3s ease;
}





/*///////////////////////////////////////////////////////
//// Contact Section ////////////////////////////////////
///////////////////////////////////////////////////////*/

.contactSection{
    margin-top: 200px;
    margin-bottom: 100px;
    font-family: Fira-Sans;
    color:#fff;
}

.contactSection h1{

    font-size: 180%;
}

.contactInfo{
    margin-top: 20px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
}
.contactInfo div{
    margin: 0 50px;
}
.box1{
    text-align: right;
}
.box2{
    text-align: left;
}
.contactInfo a{
    color:#fff;
    text-decoration: none;
    transition: 0.3s ease;
}
.contactInfo a:hover{
    color:rgb(255,0,0);
    transition: 0.3s ease;
}

.programInfo{
    text-align: center;
    margin: 20px 0;
}
.programInfo h2{
    margin-bottom: 10px;
}


/*///////////////////////////////////////////////////////
//// Servicii Section ////////////////////////////////////
///////////////////////////////////////////////////////*/

.serviceSectionPage{
    height: 800px;
    width: 100%;
    margin-top:200px;
    color:#FFF;
    font-family: Fira-Sans;
    padding: 0 150px;
}


.service img{
    position: relative;
    height: 100px;
    width: 100px;
    margin: 0 10px;
    border: none;
    border-radius: 50px;
    opacity: 1;
}
.serviceText{
    margin-top: 20px;
    width: 300px;
    height: 180px;
}
.serviceText hr{
    background-image: linear-gradient(to right,rgb(255,0,0), rgba(0,0,0,0));
    margin:0;
    width: 90%;
}
.service img,
.serviceText{
    display: inline-block;
    vertical-align: middle;
}

.rowserv{
    opacity: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}
.serviceText p{
    text-align: left;
}
.serviceText h2{
    text-align: left;
}
.serviceLink{
    text-decoration: none;
    color:#fff;
    z-index: 10;
    transition: 0.3s ease;
}


.serviceLinkHover{
    width: 450px;
    height: 200px;
    position: absolute;
    z-index: 1;
    background-color: transparent;
    transition: 0.5s ease; 
    line-height:200px;   
    border-radius: 15px;
}
.serviceLinkHover h2{
    font-size: 200%;
    color: #fff;
    text-align: center;
    opacity: 0;
    transition: 0.5s ease;
}
.serviceLink:hover .serviceLinkHover{
    background-color: rgba(250,0,0,0.8);
    transition: 0.5s ease;
}

.serviceLink:hover .serviceLinkHover h2{
    opacity: 1;
    transition: 0.5s ease;
}

/*///////////////////////////////////////////////////////
//// Galerie Section ////////////////////////////////////
///////////////////////////////////////////////////////*/


.galleryTable, tr, th{
    border: 20px solid transparent;
    color:#fff;
}
.galleryTable{
    margin-left: auto;
    margin-right: auto;
    width: 1300px;
}
.galleryTable th{
    width: 400px;
    height: 400px;
}

.gallerySection{
    margin-top: 200px;
    background-color: rgba(0,0,0,0.5);
}
.galleryImg{
    background-position: center;
    background-repeat: no-repeat;
    background-clip: border-box;
    background-size: cover;
    width: 400px;
    height: 400px;
    cursor: pointer;
}
.galleryTable a{
    text-decoration: none;
}
.titleImg{
    position: absolute;
    background-image:linear-gradient(to right,rgba(0,0,0,0) , rgba(250,0,0,0.7)25% 75% ,rgba(0,0,0,0) );
    width: 400px;
    height: 50px;
    margin-top: 350px;
}

.titleImg h3{
    text-decoration: none;
    color:#fff;
    line-height: 50px;
}



/*/////*/


.Lightbox{
    display: none;
    position: fixed;
    z-index: 100;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
}

.close,
.next,
.previous{
    cursor:pointer;
    font-size: 300%;
    color: #fff;
    transition: 0.3s ease;
}
.close:hover,
.next:hover,
.previous:hover{
    color: #f00;
    transition: 0.3s ease;
}
.next,
.previous{
    margin:0 20px;
    height: 30px;
}
.close{
    display: block;
    text-align: right;
    margin: 20px 150px 0 0;
    font-size: 350%;
}
.slide{
    display: none;
}
.image-slide{
    width: auto;
    height: 80vh;
}


.preview{
    display: flex;
    vertical-align: middle;
    align-content: center;
    justify-content: center;
    line-height: 80vh;
    margin-top: 20px ;
}






/*///////////////////////////////////////////////////////
//// Parbrize auto Section ////////////////////////////////////
///////////////////////////////////////////////////////*/

.parbrizePage{
    color: #fff;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}
.parbrizePage p{
    text-align: justify;
}
.parbrizePageServ{
    font-family: Fira-Sans;
    position: relative;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    
}
.parbrizePageServ div{
    width: 60%;
    top:0; 
    display: inline-block;
    margin:0 20px;
    vertical-align: middle;
}
.parbrizePageServ img{
    width: 35%;
    margin:0 20px;
    display: inline-block;
    vertical-align: middle;
}

#img1{
    display: inline-block;
}
#img2{
    display: none;
}

/*///////////////////////////////////////////////////////
//// tarife Section ////////////////////////////////////
///////////////////////////////////////////////////////*/

.tarifeSection{
    margin-top:200px;
}
.tarifeSection h3{
    color: #f00;
    text-align: center;
}
.tarifeTable{
    width: 70%;
    margin: 20px auto 30px;
    border-spacing: 0;
}
.tarifeTable th{
    border: none;
    border-top: 3px solid transparent;
    border-bottom: 2px solid #f00;
   
}
.tarifeTable th{
    padding: 15px 0;
    margin: 0;
}
.tarifeId{
    width:5%;
}
.tarifePrice{
    width: 20%;
    
}