@font-face {
    font-family: Montserrat-Regular;
    src: url('../fonts/montserrat/Montserrat-Regular.ttf');
}

@font-face {
    font-family: Montserrat-Bold;
    src: url('../fonts/montserrat/Montserrat-Bold.ttf');
}

@font-face {
    font-family: Montserrat-Black;
    src: url('../fonts/montserrat/Montserrat-Black.ttf');
}

@font-face {
    font-family: Montserrat-SemiBold;
    src: url('../fonts/montserrat/Montserrat-SemiBold.ttf');
}

@font-face {
    font-family: Montserrat-Medium;
    src: url('../fonts/montserrat/Montserrat-Medium.ttf');
}

.subscription-content {
    z-index: 1;
    padding: 100px 100px 0 100px;
    margin-top: 170px;
}

.content-row {
    color: white;
    height: 400px;
}

.subscription-content h1 {
    font-family: Montserrat-Bold, serif;
    font-size: 50px;
}

.subscription-content h2 {
    font-family: Montserrat-Regular, serif;
    font-size: 50px;
}

.subscription-cards p {
    font-family: Montserrat-Regular, serif;
    font-size: 20px;
    color: white;
}

.overlay_web_header_services {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
    width: 100%;
    background-image: url("../img/blue_HL.png");
    background-position: initial;
    background-repeat: no-repeat;
    background-size: contain;
    height: 900px;
}

.overlay_mobile_header_services {
    position: absolute;
    z-index: -1;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
    width: 100%;
    background-image: url("../img/blue_HL.png");
    background-position: initial;
    background-repeat: no-repeat;
    background-size: contain;
}

.overlay1 {
    color: #cfeafc;
    font-size: 280px;
    font-family: Montserrat-Bold, serif;
    position: absolute;
    z-index: -1;
    top: 37%;
    left: 72%;
    opacity: 1;
}

.overlay2 {
    position: absolute;
    z-index: -1;
    top: 45%;
    left: 52%;
    opacity: 1;
    width: 100%;
}

.overlay2 h6 {
    color: #cfeafc;
    font-size: 280px;
    font-family: Montserrat-Bold, serif;
}

.weekly-subscription {
    z-index: 1;
    border-radius: 30px;
    box-shadow: 0 1px 36.9px 4.1px rgba(0, 145, 255, 0.18);
    padding: 30px 20px 10px 20px;
    height: 490px;
}

.weekly-subscription h1 {
    font-family: Montserrat-Bold, sans-serif;
    font-size: 25px;
    background: -webkit-linear-gradient( 126deg, rgb(47,76,254) 0%, rgb(7,251,236) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.weekly-subscription h2 {
    font-size: 22px;
    font-family: Montserrat-Bold, serif;
    color: black;
    letter-spacing: 1px;
}

.weekly-subscription h3 {
    line-height: 20px;
    font-family: Montserrat-Regular, serif;
    font-size: 14px;
    letter-spacing: 1px;
    color: black;
    padding-bottom: 20px;
}

.weekly-subscription p {
    font-size: 11px;
    color: black;
    letter-spacing: 1px;
    line-height: 25px;
}

.subscribe-btn {
    background: -webkit-linear-gradient( 126deg, rgb(47,76,254) 0%, rgb(7,251,236) 100%);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-family: Montserrat-SemiBold, serif;
}


.weekly-subscription:hover {
    border-radius: 30px;
    background-image: -moz-linear-gradient( 126deg, rgb(47,76,254) 0%, rgb(7,251,236) 100%);
    background-image: -webkit-linear-gradient( 126deg, rgb(47,76,254) 0%, rgb(7,251,236) 100%);
    background-image: -ms-linear-gradient( 126deg, rgb(47,76,254) 0%, rgb(7,251,236) 100%);
    box-shadow: 0 1px 36.9px 4.1px rgba(0, 145, 255, 0.18);
    padding: 30px 20px 10px 20px;
    margin-right: 20px;
}

.weekly-subscription:hover h1 {
    background: white;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.weekly-subscription:hover h2 {
    font-size: 22px;
    font-family: Montserrat-Bold, serif;
    color: white;
    letter-spacing: 1px;
}

.weekly-subscription:hover h3 {
    line-height: 20px;
    font-family: Montserrat-Regular, serif;
    font-size: 15px;
    letter-spacing: 1px;
    color: white;
    padding-bottom: 20px;
}

.weekly-subscription:hover p {
    font-size: 11px;
    letter-spacing: 1px;
    line-height: 25px;
    color: white;
}

.weekly-subscription:hover .subscribe-btn {
    background: white;
    color: black;
}

.weekly-subscription:hover .overlay1 {
    opacity: 0.3;
}

.weekly-subscription:hover .overlay2 {
    opacity: 0.3;
}

.details {
    height: 130px;
}

@media only screen and (max-width: 1200px) {
    .weekly-subscription {
        height: auto;
    }
}

@media only screen and (min-width: 375px) and (max-width: 479px) {
    .subscription-content {
        padding: 10px 33px;
        margin-top: 325px;
    }

    .content-row h1 {
        font-size: 40px;
    }

    .content-row h2 {
        font-size: 40px;
        margin-bottom: 10px;
    }

    .content-row p {
        font-size: 17px;
    }

    .overlay_mobile_header_services {
        background-position: bottom;
        background-size: cover;
    }

    .weekly-subscription {
        margin-bottom: 35px;
    }

    .overlay1 {
        left: 79%;
        top: 36%;
    }

    .overlay2 {
        top: 46%;
        left: 62%;
    }
}

@media only screen and (min-width: 468px) and (max-width: 1200px) {
    .overlay_mobile_header_services {
        position: absolute;
        z-index: -1;
        top: -6%;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 1;
        /* width: 100%; */
        background-image: url(../img/blue_HL.png);
        background-position: initial;
        background-repeat: no-repeat;
        background-size: cover;
        background-position-x: 100%;
    }

    .overlay1 {
        left: 78%;
        top: 28%;
    }

    .overlay2 {
        top: 40%;
        left: 65%;
    }
}
@media only screen and (min-width: 375px) and (max-height: 667px) {
    .subscription-content {
        padding: 10px 33px;
        margin-top: 265px;
    }

    .content-row h1 {
        font-size: 40px;
    }

    .content-row h2 {
        font-size: 40px;
        margin-bottom: 10px;
    }

    .content-row p {
        font-size: 17px;
    }

    .overlay_mobile_header_services {
        background-position: bottom;
        background-size: cover;
    }

    .weekly-subscription {
        margin-bottom: 35px;
    }

    .overlay1 {
        left: 240px;
    }

    .overlay2 {
        left: 210px;
    }
}

@media only screen and (min-width: 321px) and (max-width: 374px) {
    .subscription-content {
        padding: 10px 33px;
        margin-top: 240px;
    }

    .content-row h1 {
        font-size: 40px;
    }

    .content-row h2 {
        font-size: 40px;
        margin-bottom: 10px;
    }

    .content-row p {
        font-size: 17px;
    }

    .overlay_mobile_header_services {
        background-position: bottom;
        background-size: cover;
    }

    .weekly-subscription {
        margin-bottom: 35px;
    }

    .overlay1 {
        left: 225px;
    }

    .overlay2 {
        left: 60%;
        top: 48%;
    }
}


@media only screen and (max-width: 320px) {
    .overlay_mobile_header_services {
        background-position: bottom;
        background-size: cover;
    }
    .subscription-content {
        padding: 10px 10px;
    }

    .content-row {
        margin-top: 15px;
    }

    .content-row h1 {
        font-size: 40px;
    }

    .content-row h2 {
        font-size: 40px;
    }

    .content-row p {
        font-size: 17px;
    }

    .weekly-subscription {
        margin-bottom: 35px;
    }

    .overlay1 {
        left: 75%;
        top: 42%;
    }

    .overlay2 {
        left: 52%;
        top: 49%;
    }

    .weekly-subscription h1 {
        font-size: 25px;
    }
}