/*
Theme Name: PIL custom
Text Domain: Custom
Version: 1.0
Description:
Tags:
Author: HSS
Author URI: https://www.highsoftsolutions.ro
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* header and footer  */
*{
    font-family: 'Montserrat', sans-serif;
}

html{
    margin: 0 !important;
}

body{
    background-color: #004574;
    margin: 0;
}

.current-menu-item a{
    color: #00CFEE;
}

.mobileMenu, .mobileMenu2{
    display: none;
}

.contactRow{
    background-color: #0074C4;
    display: flex;
    justify-content: right;
    align-items: center;
    height: 60px;
}

.contactRowFoot{
    background-color: #00CFEE;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
}

.contactRowFoot h1{
    font-weight: 500;
    font-size: 20px;
    color: #FFFFFF
}

.numberWrap{
    margin-right: 30px;
}

.numberWrap h1{
    height: 40px;
    display: grid;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: 600;
}

.naviMenu{
    background-color: #1D1D1D20;
    height: 98px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 3px 6px #00000029;
}

.naviMenuFoot{
    background-color: #0074C4;
    height: 98px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.naviMenu ul, .naviMenuFoot ul{
    list-style-type: none;
    display: flex;
    margin-right: 5rem;
}

.naviMenu li, .naviMenu a, .naviMenuFoot li, .naviMenuFoot a{
    text-decoration: none;
    margin-right: 50;
    font-size: 20px;
    font-weight: 600;
    color: #FFFFFF;
}

.naviMenu2{
    background-color: white;
    height: 98px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 3px 6px #00000029;
}

.naviMenu2 ul{
    list-style-type: none;
    display: flex;
    margin-right: 5rem;
}

.naviMenu2 li, a{
    text-decoration: none;
    margin-right: 50;
    font-size: 20px;
    font-weight: 600;
    color: black;
}

.logo{
    margin-left: 210px;
}

/* home */

.startSection{
    height: 760px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    margin-bottom: 40px
}

.arrows{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
}

.arrows img{
    cursor: pointer;
}

.shortIntro{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.shortIntro h1{
    font-weight: 700;
    font-size: 70px;
    color: white;
}

.shortIntro p{
    font-weight: 400;
    font-size: 20px;
    color: white;
    width: 627px;
}

.blueDivider{
    background-color: #00CFEE;
    height: 2px;
    width: 715px;
    position: absolute;
    left: 0;
    margin-top: -25;
}

.readMore{
    cursor: pointer;
    width: 239px;
    height: 56px;
    border: 1px solid #FFFFFF;
    display: grid;
    justify-content: center;
    align-items: center;
}

.readMore:hover{
    background-color: #00CFEE;
}

.readMore h2{
    color: white;
    font-size: 20px;
    font-family: 'Nunito Sans', sans-serif;    
    font-weight: 600;
    margin: 0;
}

.downArrows{
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
}

.infoSection{
    background-color: white;
}

.optionCards{
    width: 80%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.optionRow{
    display: flex;
}

.optionCard{
    width: 33.3%;
    height: 190px;
}

.optionCard h1{
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin-top: 30px;
    margin-left: 30px;
}

.optionCard p{
    font-size: 18px;
    font-weight: 400;
    margin-left: 30px;
    width: 80%;
    color: white;
}

.optionCard a{
    font-size: 18px;
    font-weight: 500;
    margin-left: 30px;
    color: white;
    text-decoration: underline;
}

.picShowcase{
    margin-top: 100px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-around;
    position: relative;
    z-index: 10;
}

.attachedText{
    margin-left: 100px;
    display: grid;
    align-items: center;
}

.attachedText h2{
    font-size: 48px;
    font-weight: 700;
}

.attachedText h1{
    font-size: 100px;
    font-weight: 700;
}

.attachedText p{
    width: 480px;
    font-size: 16px;
}

.scheduleButtonFirst{
    cursor: pointer;
    background-color: #00CFEE;
    display: grid;
    align-items: center;
    justify-content: center;
    width: 236px;
    height: 43px;
    margin-right: 5rem;
}

.scheduleButtonFirst:hover{
    background-color: #00B7E4;
}

.scheduleButtonFirst h2{
    color: white;
    font-size: 17px;
    font-family: 'Nunito Sans', sans-serif;    
    font-weight: 600;
    margin: 0;
}

.scheduleButton{
    cursor: pointer;
    background-color: #00CFEE;
    display: grid;
    align-items: center;
    justify-content: center;
    width: 236px;
    height: 43px;
    margin-right: 5rem;
}

.scheduleButton:hover{
    background-color: #00B7E4;
}

.scheduleButton h2{
    color: white;
    font-size: 17px;
    font-family: 'Nunito Sans', sans-serif;    
    font-weight: 600;
    margin: 0;
}

.secretText h1{
    color: #F6F6F6;
    font-size: 20vw;
    font-weight: 600;
    margin-left: 30%;
    position: relative;
    z-index: 0;
    margin-top: -160;
    margin-bottom: 0;
    margin-right: 0;
}

.clientShowcase{
    margin-top: 100px;
}

.clientShowcase h1{
    text-align: center;
    font-size: 48px;
}

.clientShowcase p{
    text-align: center;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
}

.clientShowcase .clientRow{
    display: flex;
    width: 80%;
    justify-content: space-around;
    margin-left: auto;
    margin-right: auto;
}

.mapShowcase{
    display: flex;
    background-color: #F8F8F8;
    margin-top: 100px;
}

.mapText{
    width: 50%;
    margin-left: 20%;
    display: grid;
    align-items: center;
}

.mapText h1{
    font-weight: 700;
    font-size: 64px;
}

.mapText p{
    font-weight: 400;
    font-size: 18px;
    max-width: 550px;
}

.map{
    width: 50%;
    height: 640px;
    display: grid;
    justify-content: center;
    align-items: center;
}

.adressTab{
    width: 260px;
    height: 230px;
    background-color: white;
    box-shadow: 0px 3px 6px #00000029;
    display: grid;
    align-items: center;
    justify-content: center;
}

.adressTab h1{
    font-size: 18px;
    color: #000000;
    margin: 0;
}

.adressTab p{
    margin: 0;
    color: #707070;
}

.adressTab div{
    width: 100%;
}

.adressTab .blueDivider{
    background-color: #00CFEE;
    height: 2px;
    position: relative;
    margin-top: 15px;
    margin-bottom: 15px;
}

.locationLogo{
    display: flex;
    justify-content: center;
    margin-top: -300px;
}












/* profile */

.profileContent{
    background-color: white;
}

.initialPic{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.initialPic img + img{
    margin-top: -300px;
}

.picShowcase2{
    margin-top: 100px;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 10;
}

.attachedText2{
    display: grid;
    align-items: center;
}

.attachedText2 h2{
    font-size: 48px;
    font-weight: 700;
}

.attachedText2 h1{
    font-size: 100px;
    font-weight: 700;
}

.attachedText2 p{
    width: 725px;
    font-size: 16px;
}

.productShowcase{
    margin-top: 100px;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 150px
}

.productShowcase img{
    max-height: 483px;
    width: 650px;
}

.productRow{
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
}

.productCard{
    height: 483px;
    width: auto;
    cursor: pointer;
}

.productInfoLine{
    z-index: auto;
    position: relative;
    height: 95px;
    width: 100%;
    margin-top: -91px;
    display: grid;
    align-items: center;
    transition: all .3s ease;
    overflow: hidden;
}

.productInfoLine h1{
    color: white;
    font-size: 24px;
    font-weight: 700;
    margin-left: 30px;
}

.productInfoLine a{
    text-decoration: underline;
}

.productInfoLine a, .productInfoLine p{
    display: none;
    color: white;
    margin-left: 30px;
    transition: all .3s ease;
    max-width: 600px;
}

.productCard:hover > .productInfoLine{
    margin-top: -187px;
    height: 187px;
    align-items: flex-start;
    transition: all .3s ease;
}

.productCard:hover > .productInfoLine a, .productCard:hover > .productInfoLine p{
    display: block;
    transition: all .3s ease;
}


@media(max-width: 1600px) {
    .picShowcase2, .productShowcase{
        width: 90%;
    }
}









/* mobile changes */
@media(max-width: 1450px){
    .picShowcase img{
        width: 100%;
    }
    .logo{
        margin-left: 65px;
    }
    .naviMenu li, .naviMenu a, .naviMenuFoot li, .naviMenuFoot a, .naviMenu2 li, .naviMenu2 a{
        margin-right: 15px;
    }
    .startSection{
        height: 560px;
    }
    .initialPic img{
        width: 100%;
    }
    .picShowcase2 div + div img{
        width: 100%;
    }
    .initialPic img + img{
        margin-top: -293px;
    }
}


@media (max-width: 1025px) {
    .startSection{
        height: 560px;
    }
    body{
        background-size: 120% !important;
    }
    .logo{
        margin-left: 70px;
    }
    .naviMenu li, .naviMenu a, .naviMenuFoot li, .naviMenuFoot a, .naviMenu2 li, .naviMenu2 a{
        margin-right: 15px;
        margin-bottom: 15px;
        padding-top: 50px;
        font-size: 40px;
        overflow: hidden;
    }
    .optionRow{
        flex-direction: column;
        align-items: center;
    }
    .optionCard{
        width: 80%;
        height: 200px;
    }
    .picShowcase, .picShowcase2, .productRow{
        flex-direction: column;
        align-items: center;
    }
    .clientShowcase .clientRow{
        width: 20%;
        flex-direction: column;
    }
    .clientShowcase .clientRow img{
        margin-bottom: 50px;
    }
    .attachedText{
        margin-bottom: 50px
    }
    .mapText{
        margin-left: 5%;
    }
    .naviMenu ul{
        list-style-type: none;
        display: flex;
        flex-direction: column;
        margin-right: 0;
        position: absolute;
        right: 0;
        background-color: #1D1D1D50;
        overflow: hidden;
        margin-top: 53px;
        height: 0px;
        transition: all .3s ease;
        width: 100%;
    }
    .naviMenu2 ul{
        list-style-type: none;
        display: flex;
        flex-direction: column;
        margin-right: 0;
        position: absolute;
        right: 0;
        background-color: white;
        overflow: hidden;
        margin-top: 40px;
        height: 0px;
        transition: all .3s ease;
        width: 100%;
    }

    .initialPic img{
        width: 100vw;
    }
    .initialPic img + img{
        margin-top: -198px;
    }
    .productShowcase img{
        max-height: 529px;
        width: 100%;
    }
    .productCard{
        margin-bottom: 120px;
    }
    .mobileMenu, .mobileMenu2{
        display: block;
        width: 70px;
        height: 70px;
        background-color: #00000029;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        margin-right: 50px;
    }
    .mobileMenu h1{
        color: white;
    }
    .mobileMenu2 h1{
        color: black;
    }
    .mobileMenu2{
        background-color: white;
        border: 1px solid black;
    }
    .menu-menu-1{
        height: 0px;
        transition: all .3s ease;
    }
    .optionCard{
        width: 100%;
        height: 300px;
    }
    .optionCard a{
        font-size: 30px;
    }
    .optionCard h1{
        font-size: 45px;
    }
    .optionCard p{
        font-size: 28px;
    }
    .attachedText h2{
        font-size: 70px;
    }
    .attachedText p{
        font-size: 32px;
    }
    .scheduleButton h2{
        font-size: 40px;
    }
    .scheduleButton{
        width: 450px;
        height: 90px;
    }
    .clientShowcase p{
        font-size: 12px;
        width: 80%;
        margin-bottom: 50px;
    }
    .mapText p{
        font-size: 25px;
    }
    .readMore{
        width: 360px;
        height: 100px;
    }
    .readMore h2{
        font-size: 35px;
    }
    .naviMenuFoot a + div{
        display: none;
    }
    .attachedText2 p{
        font-size: 13px;
    }
    .productInfoLine h1{
        font-size: 30px;
    }
}