/* Elcisa.ro CSS */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Roboto:wght@400;700&display=swap');

:root{
    --color1: rgb(244, 192, 59);
    --color2: rgb(36, 51, 68);
}

body{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
}

.defaultwidth{
    width: 1280px;
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 16px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

#topbar{
    width: 100%;
    padding: 15px 0;
    background-color: #243344;
    display: flex;
    justify-content: center;
}

#topbar .contacttext{
    font-size: 13px;
    color: #a0a0a0;
}

#topbar a{
    font-size: 14px;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}
#topbar a:hover{
    transition: all .2s ease-in-out;
    color: var(--color1);
}

#topbar .material-icons{
    margin-bottom: -10px;
    font-size: 18px;
    color: var(--color1);
    vertical-align: -4px;
}

#header{
    width: 100%;
    padding-top: 50%;
    background: url('assets/headerbg2.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    position: relative;
}

#innerheader{
    position: absolute;
    top: 0;
}

#innerheader .logo{
    width: 100px;
    height: 100px;
    margin: 35px 0 25px 0;
    background: url('assets/logopng.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
#innerheader .topline{
    font-family: Roboto;
    color: var(--color2);
    font-weight: 400;
    font-size: 30px;
}
#innerheader .bottomline{
    font-family: Roboto;
    color: var(--color2);
    line-height: 62px;
    letter-spacing: 0px;
    font-weight: 700;
    font-size: 80px;
}
#innerheader .bottomline .accented{
    color: var(--color1);
}

#maintenance{
    width: 100%;
    background: url('assets/row-bg.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
#maintenance .safety{
    height: 67px;
    margin: 150px 0 50px 0;
    background: url('assets/safety-icon.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 80px 67px;
}
#maintenance .text{
    color: var(--color1);
    font-size: 24px;
    font-weight: 400;
    text-align: center;
}

#maintenance .boxes{
    margin: 50px 0 -75px 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    perspective: 1000px;
}
#maintenance .boxes .box{
    width: 400px;
    height: 475px;
    
    perspective: 1000px;
}

.boxinner{
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.box:hover .boxinner{
    transform: rotateX(180deg);
}

.front, .back{
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

.front{
    background-color: #bbb;
    color: black;
}

.back{
    transform: rotateX(180deg);
}

.box .front .title{
    width: calc(100% - 50px);
    padding: 25px;
    background-color: var(--color2);
    opacity: 0.8;
    color: #fff;
    font-size: 25px;
    line-height: 25px;
    text-align: left;
    position: absolute;
    bottom: 0;
}

.intretinere .front, .intretinere .back{
    background: url('assets/service-2.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.modernizare .front, .modernizare .back{
    background: url('assets/upgrade.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.front .title .material-icons{
    font-size: 25px;
    display: inline-block;
    float: right;
}

.intretinere .back, .modernizare .back{
    color: #243344;
    text-align: left;
}
.intretinere .backinner, .modernizare .backinner{
    height: 100%;
    background-color: var(--color1);
    opacity: 0.9;
}
.intretinere .back .title, .modernizare .back .title{
    padding: 150px 25px 50px 25px;
    font-size: 24px;
    font-weight: bold;

}
.intretinere .back .content, .modernizare .back .content{
    padding: 0 25px;
    font-size: 18px;
}

.emptyspace{
    width: 100%;
    height: 200px;
    background-color: #fff;
}

#aboutrow{
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#aboutrow .aboutlogo{
    padding: 50px 0;
    flex-grow: 1;
    flex-basis: 0;
    background: linear-gradient(90deg, var(--color1) 90%, #fff 10%);
}
#aboutrow .aboutlogo .logo{
    width: 627px;
    height: 600px;
    background: url('assets/elcisa_logo.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    box-shadow: 0px 10px 50px 0px rgba(36,51,68,0.2);
    will-change: transform;
    animation-name: none;
    transform: perspective(300px) rotateX(0deg) rotateY(0deg);
    float: right;
}

#aboutrow .abouttext{
    flex-grow: 1;
    flex-basis: 0;
}

#aboutrow .abouttext .abouttextinner{
    width: 567px;
    padding: 0 30px;
}

#aboutrow .abouttext .bgtitle{
    margin-top: -54px;
    font-size: 140px;
    font-weight: 900;
    color: rgba(244,192,59,0.1);
    position: absolute;
}

#aboutrow .abouttext .smalltitle{
    padding: 35px 0 35px 60px;
    font-size: 24px;
    color: var(--color1);
}

#aboutrow .abouttext .bigtitle{
    padding: 0 0 0 60px;
    font-size: 48px;
    line-height: 1.4;
    font-weight: bold;
}

#aboutrow .abouttext .text{
    padding: 35px 0 35px 60px;
    font-size: 20px;
    color: #8b8b8b;
}

#aboutrow .desclist{
    padding-left: 60px;
}
#aboutrow .listitem{
    width: 49%;
    margin: 0;
    padding: 10px 0;
    display: inline-block;
    font-size: 20px;
    color: #243344;
    font-weight: 600;
}
#aboutrow .listitem .material-icons{
    margin: -8px 0 0 -10px;
    padding: 10px;
    display: block;
    position: absolute;
    font-weight: bold;
    color: var(--color1);
}
#aboutrow .listitem:hover .material-icons{
    background-color: var(--color1);
    color: var(--color2);
    transition: 0.5s;
}
#aboutrow .listitem .listtext{
    padding-left: 40px;
}

#servicesheader, #portfolioheader{
    text-align: center;
}

#servicesheader .bgtitle, #portfolioheader .bgtitle{
    width: 100%;
    margin-top: -90px;
    font-size: 140px;
    font-weight: 900;
    color: rgba(244,192,59,0.1);
    position: absolute;
}
#servicesheader .smalltitle{
    margin-top: 90px;
    font-size: 24px;
    color: var(--color1);
}
#servicesheader .bigtitle, #portfolioheader .bigtitle{
    margin-top: 20px;
    font-size: 48px;
    line-height: 1.4;
    font-weight: bold;
}

#services, #services .defaultwidth{
    display: flex;
    justify-content: center;
}

#services .defaultwidth{
    justify-content: space-between;
    align-items: stretch;
}

#services .service{ width: 25%; }

#services .service:hover .serviceinner{
    background-color: var(--color1);
    color: #fff;
    transition: all 400ms ease-in-out, color 1ms;
}

#services .service hr{
    border: 1px solid var(--color1);
    background-color: var(--color1);
    height: 3px;
}

#services .service:hover hr{
    border: 1px solid #fff;
    background-color: #fff;
    height: 3px;
}

#services .service.mentenanta .icon{ background: url('assets/m-negru.png'); }
#services .service.productie .icon{ background: url('assets/p-negru.png'); }
#services .service.amenajari .icon{ background: url('assets/INTERIOR-NEGRU.png'); }
#services .service.confectii .icon{ background: url('assets/metal-negru.png'); }

#services .service.mentenanta:hover .icon{ background: url('assets/m-alb.png'); }
#services .service.productie:hover .icon{ background: url('assets/p-alb.png'); }
#services .service.amenajari:hover .icon{ background: url('assets/INTERIOR-ALB.png'); }
#services .service.confectii:hover .icon{ background: url('assets/metal-alb.png'); }

#services .service .icon{
    margin-left: 10px;
    height: 125px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

#services .service .serviceinner{
    height: 80%;
    margin: 50px 20px;
    padding: 50px 40px 0px 40px;
    background-color: #ffffff;
    box-shadow: 0px 10px 50px 0px rgba(36,51,68,0.2);
    text-align: center;
}

#services .title{
    padding: 30px 0;
    font-size: 24px;
}

#services .content{
    padding: 30px 0;
    line-height: 2;
    font-size: 16px;
}

#portfolioheader{
    margin-top: 150px;
}

#portfolio{
    margin: 50px 0;
    display: flex;
    justify-content: center;
}

#portfolioinner{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
#portfolioinner .item{
    margin: 5px;
}

#contactrow{
    width: 100%;
    padding: 50px 0 30px 0;
    background: var(--color2);
    display: flex;
    justify-content: center;
}

#contactrow .defaultwidth{
    display: flex;
    justify-content: center;
}

#contactrow .defaultwidth div{
    flex-grow: 1;
    flex-basis: 0;
    text-align: center;
}

#contacttext .bgtitle{
    margin-top: -54px;
    font-size: 140px;
    font-weight: 900;
    color: rgba(244,192,59,0.1);
}

#contacttext .smalltitle{
    margin-top: -150px;
    padding: 35px;
    font-size: 24px;
    color: var(--color1);
}

#contacttext .bigtitle{
    padding: 0;
    font-size: 48px;
    line-height: 1.4;
    font-weight: bold;
    color: #fff;
}

#contacttext .text{
    padding: 35px;
    font-size: 20px;
    color: #8b8b8b;
    text-align: left !important;
}

#contacttext .text a{
    color: var(--color1);
    text-decoration: none;
}

#clientrow{
    width: 100%;
    padding: 80px 0;
    display: flex;
    justify-content: center;
}

#clientrow .defaultwidth{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#clientrow img{
    width: 120px;
}

#lastrow{
    width: 100%;
    padding: 60px 0;
    display: flex;
    justify-content: center;
    background-color: var(--color2);
}

#lastrow .defaultwidth{
    display: block;
}

#lastrow .whitelogo{
    width: 100%;
    height: 200px;
    background: url('assets/elcisa-transparent-alb.png');
    background-position: center center;
    background-repeat: no-repeat;
}

#lastrow .text{
    width: 100%;
    margin: 50px 0;
    font-size: 20px;
    color: #c1c1c1;
    text-align: center;
}

#lastrow .facebook{ text-align: center; }
#lastrow .facebook span{
    margin: 0 auto;
    padding: 10px 25px;
    font-size: 24px;
    font-weight: bold;
    color: var(--color2);
    background-color: var(--color1);
    display: inline-block;
    transition: 0.5s;
}
#lastrow .facebook span:hover{
    color: #fff;
    background-color: #4267B2;
}

#footer{
    padding: 30px 0;
    background-color: #fff;
    font-size: 16px;
    text-align: center;
}


@media screen and (max-width: 960px), (pointer: coarse){

    .defaultwidth{
        width: 100%;
    }

    #topbar .defaultwidth{
        text-align: center;
    }

    #innerheader .logo{
        width: 100%;
        background-size: contain;
    }

    #innerheader .topline, #innerheader .bottomline{
        display: none;
    }

    #maintenance .safety {
        height: 67px;
        margin: 50px 0 50px 0;
    }

    #maintenance .boxes{
        margin: 50px 0 -75px 0;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    
        perspective: 1000px;
    }
    .intretinere{
        margin-bottom: 40px;
    }
    #maintenance .boxes .box{
        width: 400px;
        height: 475px;
        
        perspective: 1000px;
    }

    #aboutrow{
        display: block;
    }

    #aboutrow .aboutlogo .logo{
        width: 90%;
        height: auto;
        margin: 0 5%;
        padding-top: 86%;
        float: none;
    }

    #aboutrow .abouttext{
        width: 90%;
        margin: 0 5%;
    }

    #aboutrow .abouttext .abouttextinner{
        width: 100%;
        padding: 0;
        text-align: center;
    }
    
    #aboutrow .abouttext .bgtitle{
        display: none;
    }
    
    #aboutrow .abouttext .smalltitle{
        padding: 20px;
    }
    
    #aboutrow .abouttext .bigtitle{
        font-size: 38px;
        padding: 0;
    }
    
    #aboutrow .abouttext .text{
        padding: 20px 0;
    }
    
    #aboutrow .desclist{
        padding-left: 0;
    }
    #aboutrow .listitem{
        width: 100%;
        margin: 0;
        padding: 10px 0;
        text-align: left;
        display: block;
    }
    #aboutrow .listitem .listtext{
        padding-left: 40px;
    }

    #servicesheader .bgtitle, #portfolioheader .bgtitle{
        display: none;
    }

    #services, #services .defaultwidth{
        display: block;
    }

    #services .service{ width: 100%; }

    #services .service .icon{
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
    }

    #contactrow{
        background: var(--color2);
    }

    #contactrow .defaultwidth{
        display: block;
        text-align: center;
    }

    #contacttext .bgtitle{
        display: none;
    }
    
    #contacttext .smalltitle{
        margin-top: 0;
        padding: 20px 0;
    }
    
    #contacttext .bigtitle{
        padding: 0;
    }
    
    #contacttext .text{
        padding: 20px;
    }
}