:root{
    /* color pattern */
    --white : #FFFF;
    --dark-blue : #123ACE;
    --darknes-blue : #082387;
    --heading-text : #1D1D1D;
    --desc-text : #424242;
    --fill-total : #E3F2FF;
    --gray-bg : #F0F2FC;
    --bg-s2 : #F1F4FF;
    --border-s2 : #8AA3FF;
    --clr-bluenes : #3A64FF;
    --box-detail : #E4EAFF;
    --box-detail-border : #728FFF;
    --border-subs : #D9D9D9;
    --blue-subs : #1139CD;

    /* Gradient */
    --blue-gradient : linear-gradient(159deg, #1139CD 31.44%, #2E5AFB 70.15%);
    --platinum-gradient : linear-gradient(159deg, #1139CD 31.44%, #2E5AFB 70.15%);
    --hover-section-2 : linear-gradient(163deg, #C5D2FF -19.06%, #123ACE 60.92%);

    /* shadow */
    --shadow-box-section-2 : 0px 4px 10px 4px rgba(18, 58, 206, 0.25);
    --subs-shadow : 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    --btn-gratis-shadow : drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.25));

    /* weight font */
    --heading-bold : 700;
    --pragraph-bold : 300;
    --400-bold : 400;
    --600-bold : 600;
}

.mobile-view{
    display: none !important;
}

.desktop-view{
    display: block !important;
}

.desktop-view-flex{
    display: flex !important;
}


@media screen and (max-width: 660px) {

    .desktop-view{
        display: none !important;
    }
    .mobile-view{
        display: block !important;
    }
    .desktop-view-flex{
        display: none !important;
    }

    :root{
        --heading-size : 6.5vw;
        --paragraph-size : 3.3vw;
        --mini-paragraph-size : 3vw;
        --middle-size : 3.9vw;
        --25mo : 4.8vw;
        --18mo : 4vw;

         /*line height*/
        --lh-32: 1.882vw;
        --lh-27: 1.588vw;
        --lh-25: 1.471vw;
    }

    .slide-to{
        width: 80%;
        margin: 0 auto;
        display: block;
    }

    .info-features {
        margin-top: 75px;
    }

    a.wonder-help{
        bottom: 73px;
        right: -9px;
    }

    .to-mids{
        background-color: #e7ebff !important;
    }

    .bubbles{
        display: none;
    }

    div.container{
        padding-left: 20px;
        padding-right: 20px;
    }

    .blood-head-tiles{
        font-size: 5.4vw;
        line-height: 43px;
    }

    section.s2{
        padding-top: 78px;
        padding-bottom: 78px;
    }

    .icon-bw {
        margin-bottom: 0px;
    }

    .icon-bw img{
        width: 11.5vw;
        height: 11.5vw;
    }

    .blood-block-bw{
        padding: 28px 25px;
        margin-bottom: 30px;
    }

    .blood-head-tiles{
        margin-bottom: 55px;
    }

    .blood-sg-sort-desc{
        line-height: 27px;
        margin-top: 38px;
    }

    .blood-3-dtailing{
        line-height: 6vw;
        font-weight: 300;
        text-align: center;
    }

    img.rafah-line{
        display: none;
    }

    section.s3{
        padding-top: 0;
        padding-bottom: 90px;
    }

    .us-app {
        margin-top: -70px;
    }

    .wrap-dtling {
        padding-top: 2rem;
    }

    .bw-short-desc{
        font-weight: 300;
    }

    .nop-oss {
        width: 88%;
        margin: 0 auto;
    }

    img.us-app-m {
        margin-top: -80px;
        margin-bottom: -60px;
    }

    .blood-3-list li{
        margin-bottom: 41px;
    }

    .blood-3-list {
        margin-top: 51px;
        margin-bottom: 0;
    }

    /* --------- section one ------ */

    .m-sectionOne{
        background: url(../img/bg-mobile.png) no-repeat;
        height: 100vh;
        width: 100%;
        background-size: cover;
        background-position: left bottom;
        position: relative;
        overflow: hidden;
    }

    .m-sectionOne:after{
        content: '';
        background: url(../img/m-wave-white.png)no-repeat;
        width: 100%;
        height: 52.27px;
        background-size: cover;
        position: absolute;
        bottom: -14px;
        z-index: 99;
    }
    
    img.grand-m-bg {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 4px;
        opacity: 0.8;
    }

    .blood-heading-x {
        height: 100vh;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        position: relative;
        z-index: 9;
        text-align: center;
        padding-bottom: 7vh;
    }

    .btn-lay {
        margin: 0 auto;
        margin-top: 38px;
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    }

    .blood-sg-title{
        line-height: 44px;
    }

    .m-sectionOne .blood-seap{
        margin: 0 auto;
    }


    .breakdown-bottom {
        position: fixed;
        background: var(--border-s2);
        width: 100%;
        padding: 15px 0;
        bottom: 0;
        z-index: 99;
        color: var(--dark-blue);
        font-size: 2.9vw;
        font-weight: 500;
    }

    .g-flex{
        display: flex;
        align-items: center;
        column-gap: 10px;
        justify-content: space-between;
    }

    a.g-try {
        text-decoration: none;
        color: var(--dark-blue);
        background: var(--white);
        display: flex;
        width: fit-content;
        padding: 11px 15px;
        border-radius: 5px;
        align-items: center;
        justify-content: center;
        line-height: 18px;
        filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.25));
    }

    .blood-descrid{
        line-height: 23px;
        width: 100%;
    }

    section.m-features{
        background-color: var(--gray-bg);
        padding-top: 70px;
        padding-bottom: 70px;
        position: relative;
    }

    section.m-features:before{
        content: '';
        background: url(../img/m-wave-lightgray.png)no-repeat;
        width: 100%;
        height: 55px;
        position: absolute;
        top: -38px;
        left: 0;
        background-position: top center;
        z-index: 9;
        background-size: cover;
    }

    section.m-features:after{
        content: '';
        background: url(../img/m-wave-lightgray.png)no-repeat;
        width: 100%;
        height: 55px;
        position: absolute;
        bottom: -38px;
        left: 0;
        background-position: bottom center;
        z-index: 9;
        background-size: cover;
    }

    .features-img {
        width: 70%;
        margin: 0 auto;
    }

    .laikyus-img {
        margin-top: 45px;
        margin-bottom: 45px;
    }
    
    .description-features{
        line-height: 23px;
    }

    .famdo-short-desc{
        font-size: var(--mini-paragraph-size);
        font-weight: 300;
    }

    .famdo-icon{
        width: 8.5vw;
        height: 8.5vw;
    }

    .swiper-pagination.swiprop span.swiper-pagination-bullet,
    .mithil-dots span.swiper-pagination-bullet{
        height: 3.5vw;
        width: 3.5vw;
    }

    .swiper-pagination.swiprop {
        bottom: 0;
        text-align: center;
    }

    .hanger-title{
        font-size: 5.4vw;
    }

    .gradder-hoff {
        margin-bottom: 3.5rem;
    }

    .gradder-hoff.middlane-hoff{
        padding-bottom: 38px;
        background-color: #e7ebff;
    }

    .long-angle {
        padding-top: 70px;
    }

    .sarange-subs .col-md-4{
        margin-bottom: 2.5rem;
        justify-content: center;
    }

    section.s5 {
        padding-top: 125px;
    }

    img.gaza-line {
        height: 13vh;
        position: absolute;
        top: -8rem;
        right: 22px;
        transform: scaleX(-1) rotate(351deg);
        z-index: 0;
    }

    .subs-wrapper{
        width: 85%;
        border-radius: 28px;
    }

    .double-wave {
        margin-top: 55px;
        position: relative;
        z-index: 9;
        height: 78px;
        object-fit: cover;
    }

    section.s6 {
        padding-top: 94px;
        padding-bottom: 70px;
    }

    img.qood-line {
        height: 14vh;
        transform: rotate(10deg);
        position: absolute;
        top: -8rem;
        left: 30px;
    }

    .raglas-head{
        font-size: 5.7vw;
        width: 100%;
        text-align: center;
        line-height: 36px;
        padding: 0 5vw;
        color: var(--white);
        margin-bottom: 14px;
    }

    .happines-ads {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 70px;
        padding-bottom: 70px;
        background-size: cover !important;
    }

    section.ads-m {
        margin-bottom: 6rem;
    }

    .raglas-detail {
        line-height: 26px;
        width: 100%;
        color: var(--white);
        margin-bottom: 1rem;
        padding: 0 15px;
    }

    .raglas-btn{
        margin: 0 auto;
        width: 40%;
    }

    .raglas-btn img {
        width: 100%;
        border-radius: 10px;
    }

    footer.ld-footer:before{
        height: 65px;
    }

    ._addressed p {
        margin-bottom: 0;
        line-height: 26px;
    }

    .xo-nes,
    .xo-ses{
        padding-left: 10px;
    }

    a._goto{
        margin: 0 auto;
    }

    ._addressed{
        padding-right: 0;
        width: 94%;
        margin: 0 auto;
        margin-bottom: 20px;
    }

    ._hig-detail {
        margin-top: 2rem;
    }
    
    .ld-foo {
        text-align: center;
    }

    ._brands-foo {
        width: 58%;
    }

    ul._list-social-media{
        justify-content: center;
        margin-bottom: 45px;
    }

    .ld-nested {
        text-align: center;
        margin-bottom: 3rem;
    }

    .installnow{
        width: 44%;
        margin: 0 auto;
    }

    .installnow img{
        width: 100%;
        object-fit: cover;
        border-radius: 8px;
        height: auto;
    }
    

    /* navbar */
    .nav-mobile {
        z-index: 9991;
        padding: 18px 0;
        margin-top: 2vw;
    }

    .dos-m {
        width: 100%;
    }

    a.brands-m {
        display: block;
        width: 50%;
    }

    .warner {
        justify-content: space-between;
    }

    .bors-btn {
        width: 9vw;
        height: 9vw;
        border-radius: 100px;
        border: 2px solid white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
    }

    .natural-btn .menu-icon {
        transform: scale(1.26);
   }

    .menu-icon {
        position: relative;
        width: 6vw;
        height: 6vw;
        cursor: pointer;
   }
    .menu-icon .menu-icon__cheeckbox {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        cursor: pointer;
        z-index: 2;
        -webkit-touch-callout: none;
        position: absolute;
        opacity: 0;
   }
    .menu-icon .circular {
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        left: -1px;
        bottom: 0;
        width: 3vw;
        height: 1.95vw;
   }
    .menu-icon span {
        position: absolute;
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--white);
        border-radius: 1px;
        transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);
   }
    .menu-icon span:first-of-type {
        top: 0;
   }
    .menu-icon span:last-of-type {
        bottom: 0;
   }
    .menu-icon.active span:first-of-type, .menu-icon .menu-icon__cheeckbox:checked + .circular span:first-of-type {
        transform: rotate(45deg);
        top: 1vw;
   }
    .menu-icon.active span:last-of-type, .menu-icon .menu-icon__cheeckbox:checked + .circular span:last-of-type {
        transform: rotate(-45deg);
        bottom: 0.6vw;
   }
    .menu-icon.active:hover span:first-of-type, .menu-icon.active:hover span:last-of-type, .menu-icon:hover .menu-icon__cheeckbox:checked + .circular span:first-of-type, .menu-icon:hover .menu-icon__cheeckbox:checked + .circular span:last-of-type {
        width: 3vw;
   }
    
   .mobile-view.scrolled a.brands-m{
        width: 43%;
        transition: .3s ease-in-out;
   }

   .mobile-view.scrolled{
        padding: 15px 0;
        transition: .3s ease-in-out;
   }

   .mobile-view.scrolled .bors-btn{
        width: 8vw;
        height: 8vw;
        transition: .3s ease-in-out;
   }

   .mobile-view.scrolled .menu-icon .circular{
        width: 2vw;
        left: -1px;
   }

   .mobile-view.scrolled .menu-icon.active:hover span:first-of-type, .menu-icon.active:hover span:last-of-type, 
   .mobile-view.scrolled .menu-icon:hover .menu-icon__cheeckbox:checked + .circular span:first-of-type, 
   .mobile-view.scrolled .menu-icon:hover .menu-icon__cheeckbox:checked + .circular span:last-of-type{
        width: 2.5vw;
        left: -1.5px;
   }

   .mobile-view.scrolled .menu-icon.active span:first-of-type, 
   .mobile-view.scrolled .menu-icon .menu-icon__cheeckbox:checked + .circular span:first-of-type{
        top: .8vw;
   }

   .mobile-view.scrolled  .menu-icon.active span:last-of-type, 
   .mobile-view.scrolled  .menu-icon .menu-icon__cheeckbox:checked + .circular span:last-of-type{
        bottom: 0.8vw;
   }

   a.wonder-help img.hlpbu {
        width: 25vw;
        height: 25vw;
   }

   .navigate-menus {
        background: var(--darknes-blue);
        position: fixed;
        top: 0;
        height: 100vh;
        left: 0;
        width: 100%;
        z-index: 999;
        padding: 25px;
        padding-top: 7rem;
        display: none;
    }

    ul.navgate{
        padding: 0;
    }

    ul.navgate li{
        list-style: none;
        margin-bottom: 30px;
        text-align: center;
    }

    ul.navgate li:nth-last-child(1){
        margin-bottom: 0;
    }

    ul.navgate li a{
        color: var(--white);
        font-size: 18px;
    }

    ul.navgate li a:focus,
    ul.navgate li a:hover,
    ul.navgate li a.active{
        color: #8AA3FF;
    }

    a.btn-free {
        width: fit-content;
        margin: 0 auto;
        margin-top: 25px;
    }

    .nav-mobs {
        height: 70vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    ul.navgate {
        width: 100%;
    }

    .flag-subs{
        padding: 11px 21px;
    }

    .platinum-series .flag-subs{
        background: #000;
    }

    .frame-x {
        height: 19rem;
    }

    .nowed-active{
        transform: translateX(-11px);
        white-space: nowrap;
        padding: 4px 16px !important;
    }

    .bloodfx{
        line-height: 40px;
    }

    .ui-iframes {
        margin-top: 40px;
    }

}

@media screen and (max-width: 378px){
    .blood-sg-sort-desc {
        margin-top: 20px;
    }

    .btn-lay{
        margin-top: 25px;
    }

    .blood-heading-x{
        padding-bottom: 1vh;
    }

    img.grand-m-bg{
        opacity: 0.5;
        height: 44vh;
        margin: 0 auto;
    }

    .menu-icon .circular{
        left: -2px;
    }

    .mobile-view.scrolled .menu-icon .circular {
        left: -3px;
    }

    .mobile-view.scrolled .menu-icon.active:hover span:first-of-type, .menu-icon.active:hover span:last-of-type, .mobile-view.scrolled .menu-icon:hover .menu-icon__cheeckbox:checked + .circular span:first-of-type, .mobile-view.scrolled .menu-icon:hover .menu-icon__cheeckbox:checked + .circular span:last-of-type{
        left: -0.5px;
    }

    .mobile-view.scrolled .menu-icon.active span:first-of-type, .mobile-view.scrolled .menu-icon .menu-icon__cheeckbox:checked + .circular span:first-of-type {
        top: 0.7vw;
    }
}