@font-face {
    font-family: 'Myriad Pro Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Regular'), url('../fonts/MYRIADPRO-REGULAR.woff') format('woff');
    }   

    @font-face {
    font-family: 'Myriad Pro Semibold';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Semibold'), url('../fonts/MYRIADPRO-SEMIBOLD.woff') format('woff');
    }


    @font-face {
    font-family: 'Myriad Pro Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Bold'), url('../fonts/MYRIADPRO-BOLD.woff') format('woff');
    }
    
    *{
        margin: 0;
        padding: 0;
    }
    body{
        font-family: 'Myriad Pro Regular';
        background-image: url(../images/bg-texture.png);
    }

    .page-wrapper{
        width: calc(100vw - 80px);
        height: calc(100vh - 80px);
        background-image: url(../images/bg-image.png);
        background-position: left bottom;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        padding: 40px;

        overflow: hidden;
    }

    h1{
    font-family: 'Myriad Pro Bold';
    font-size: 57px;
    line-height: 64px;
    color: #3F464B;
    font-weight: normal;
    margin-bottom: 40px;
    }
    p{
        font-size: 22px;
        line-height: 26px;
        color: #1C2731; 
        margin-bottom: 16px;
    }
    p strong{
        font-family: 'Myriad Pro Bold';
        font-weight: normal;
    }
    p a{
        font-family: 'Myriad Pro Semibold';
        color: #3B82F6;
        text-decoration: underline;
    }
    .logo-row{
        display: flex;
        justify-content: center;
    }
    .content-row{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-grow: 1;
        justify-content: center;
        text-align: center;
    }
    .btn-row{
        margin-top: 11px;
        display: flex;
        gap: 38px;
        align-items: center;
        justify-content: center;
    }
    .btn-row .app-buttons{
        display: flex;
        gap: 38px;
        align-items: center;
    }
    .btn-row a img{
        height: 55px;
    }
    .btn{
        padding: 13px 30px;
        font-size: 24px;
        line-height: 29px;
        color: #fff;
        background: #1C2731;
        border-radius: 12px;
        width: 200px;
        height: 55px;
        border:2px solid #1C2731;
        cursor: pointer;
        display: inline-block;
        font-family: 'Myriad Pro Semibold';
        text-decoration: none;
        text-align: center;
        box-sizing: border-box;
    }
    .visit-btn.btn{
        width: 100%;
    }
    .btn:hover{
        background: #fff;
        color: #1C2731; 
    }
    

    @media (max-width:1300px){
        .page-wrapper{
            padding: 20px;
            width: calc(100vw - 40px);
            height: calc(100vh - 20px);
            background-size: 60vh;
        }
    }

      @media (max-width:800px){
        h1{
            font-size: 40px;
            line-height: 50px;
            margin-bottom: 20px;
        }
        p{
            font-size: 18px;
            line-height: 22px;
            margin-bottom: 10px;
        }
        .btn-row{
            gap: 20px;
        }
        .btn-row .app-buttons{
            gap: 20px;
        }
        .btn{
            font-size: 22px;
        }
      }

@media (max-width:600px){
    .page-wrapper{
        background-size: 30vh;
    }
    .content-row{
        /* justify-content: start; */
        padding: 40px 10px;
    }
    .btn-row{
        flex-wrap: wrap;
    }
}

@media (max-width:400px){
    .page-wrapper{
        background-image: none;
    }
}