@media (min-width:1200px) and (max-width:1449px) {
    .hero-slider .owl-nav button {
        left: 20px
    }

    .hero-slider .owl-next {
        left: 95px !important
    }
}

@media (max-width:1320px) {
    .header-btn.nav-header .sub-nav {
        display: flex !important;
        justify-content: center
    }

    .main-menu ul li a {
        font-size: 16px;
        font-weight: 500;
        position: relative;
        display: initial
    }
}

@media (max-width:1199px) {
    .main-menu>ul>li:not(:last-child) {
        margin-right: 20px
    }

    #formId .mobile-search::placeholder {
        font-size: 12px
    }

    .header-serch #formId {
        width: 100%
    }
}

@media (min-width:992px) and (max-width:1200px) {
    .header-top-bar-right a {
        margin-left: 12px;
        font-size: 13px
    }

    .nav-header>a {
        width: 100px
    }

    .hero-slider .owl-nav button {
        left: 20px;
        top: 73%;
        height: 50px;
        width: 50px;
        line-height: 40px !important
    }

    .hero-slider .owl-next {
        left: 95px !important
    }

    .hero-area {
        height: 550px
    }

    .hero-text h2 {
        font-size: 44px;
        margin-bottom: 26px
    }

    .hero-slider .owl-nav button span {
        line-height: 43px;
        height: 50px !important
    }

    .product-card {
        margin-bottom: 30px
    }

    .dna-im a img {
        max-width: 50px
    }

    .dna-im {
        height: 75px !important
    }

    .dna-fl p {
        font-size: 16px
    }

    .dna-area.wid {
        margin: 0 10px;
        height: 150px
    }

    .section-title br {
        display: none
    }

    .section-title h2 {
        font-size: 40px
    }

    .footer-logo img {
        max-width: 200px
    }

    .rank-title h3 {
        font-size: 36px
    }

    .rank-cn-area {
        margin-top: 30px
    }

    .rank-area {
        padding: 86px 0
    }

    .rank-area.rank-3 {
        padding-top: 0;
        padding-bottom: 40px
    }

    .rank-active .owl-next {
        left: 233px !important
    }

    .rank-active .owl-nav button {
        left: 174px
    }

    .rank-2 .rank-active .owl-nav button {
        left: 173px
    }

    .rank-2 .rank-active .owl-next {
        left: 233px !important
    }
}

@media (max-width:991px) {
    .contact_main_box .border-right {
        border: 0px !important
    }

    .main-menu>ul>li:not(:last-child) {
        margin-right: 15px
    }

    .reserch_sub_nav {
        right: -70% !important
    }

    #formId .mobile-search::placeholder {
        color: #0000
    }
}

@media (min-width:768px) and (max-width:991px) {
    .header-top-area {
        display: none
    }

    .nav-header>a {
        width: 39px !important
    }

    .main-menu ul li a {
        margin-left: -10px;
        font-size: 13px
    }

    .hero-slider .owl-nav button {
        left: 20px;
        top: 73%;
        height: 50px;
        width: 50px;
        line-height: 40px !important
    }

    .hero-slider .owl-next {
        left: 95px !important
    }

    .hero-area {
        height: 550px
    }

    .hero-text h2 {
        font-size: 44px;
        margin-bottom: 26px
    }

    .hero-slider .owl-nav button span {
        line-height: 43px;
        height: 50px !important
    }

    .product-card {
        margin-bottom: 30px
    }

    .dna-im a img {
        max-width: 50px
    }

    .dna-im {
        height: 75px !important
    }

    .dna-fl p {
        font-size: 14px
    }

    .dna-area.wid {
        margin: 0 10px;
        height: 150px
    }

    .section-title br {
        display: none
    }

    .section-title h2 {
        font-size: 40px
    }

    .footer-logo img {
        max-width: 200px
    }

    .header-serch {
        height: 100%;
        display: flex;
        align-items: center
    }

    .main-menu ul li {
        margin-right: 27px
    }

    .dna-area {
        margin-bottom: 30px
    }

    .new-product {
        padding-bottom: 70px
    }

    .pro-lf {
        display: flex;
        justify-content: center
    }

    .rank-title h3 {
        font-size: 36px
    }

    .rank-cn-area {
        margin-top: 30px
    }

    .rank-area {
        padding: 86px 0;
        padding-bottom: 40px
    }

    .rank-area.rank-3 {
        padding-top: 0;
        padding-bottom: 40px
    }

    .rank-active .owl-next {
        left: 362px !important
    }

    .rank-2 .rank-active .owl-nav button {
        left: 314px
    }

    .rank-2 .rank-active .owl-next {
        left: 372px !important
    }

    .rank-img {
        justify-content: center !important
    }

    .rank-sider {
        text-align: right;
        margin-top: 40px
    }

    .pth-content p {
        font-size: 14px
    }

    .path-wrap {
        margin-bottom: 70px
    }

    .pathway-area {
        padding-top: 60px;
        padding-bottom: 20px
    }

    .Activating-wrapper li a {
        font-size: 17px;
        color: #222;
        font-weight: 500
    }

    .receptor-area {
        padding-top: 50px;
        padding-bottom: 60px
    }
}

@media only screen and (min-width:320px) and (max-width:767px) {
    .header-top-area {
        display: none
    }

    .header-top-bar-right a {
        margin-left: 20px;
        font-size: 13px
    }

    .hero-slider .owl-nav button {
        left: 20px;
        top: 80%;
        height: 50px;
        width: 50px;
        line-height: 40px !important
    }

    .hero-slider .owl-next {
        left: 95px !important
    }

    .hero-area {
        height: 400px
    }

    .hero-text h2 {
        font-size: 34px;
        margin-bottom: 26px
    }

    .hero-slider .owl-nav button span {
        line-height: 43px;
        height: 50px !important
    }

    .product-card {
        margin-bottom: 30px
    }

    .dna-im a img {
        max-width: 50px
    }

    .dna-im {
        height: 75px !important
    }

    .dna-fl p {
        font-size: 14px
    }

    .dna-area.wid {
        margin: 0 10px;
        height: 150px
    }

    .section-title br {
        display: none
    }

    .section-title h2 {
        font-size: 34px
    }

    .footer-logo img {
        max-width: 175px
    }

    .header-serch {
        margin-bottom: 20px
    }

    .Filter_btn {
        margin-bottom: 20px
    }

    .main-menu ul li {
        margin-right: 27px
    }

    .dna-area {
        margin-bottom: 30px
    }

    .new-product {
        padding-bottom: 50px;
        padding-top: 60px
    }

    .pro-lf {
        display: flex;
        justify-content: center
    }

    .site-logo {
        text-align: start;
        margin-bottom: 20px
    }

    .site-logo img {
        max-width: 150px
    }

    .header-menu {
        display: none
    }

    .product-card-area {
        padding-top: 60px;
        padding-bottom: 60px
    }

    .product-card-btn {
        padding-top: 40px
    }

    .alst-dna {
        margin: auto;
        margin-bottom: 30px
    }

    .fl-dna {
        display: block
    }

    .wedget-area {
        margin-bottom: 30px
    }

    .mid {
        display: block
    }

    .ri {
        display: block
    }

    .footer-bootom {
        margin-left: 0;
        margin-right: 0
    }

    .footer-r a::before {
        display: none
    }

    .rank-title h3 {
        font-size: 26px
    }

    .rank-cn-area {
        margin-top: 30px
    }

    .rank-area {
        padding: 86px 0;
        padding-bottom: 40px
    }

    .rank-area.rank-3 {
        padding-top: 0;
        padding-bottom: 40px
    }

    .rank-active .owl-next {
        left: 162px !important
    }

    .rank-2 .rank-active .owl-nav button {
        left: 110px
    }

    .rank-2 .rank-active .owl-next {
        left: 162px !important
    }

    .rank-img {
        justify-content: center !important
    }

    .rank-sider {
        text-align: right;
        margin-top: 40px
    }

    .rank-title span {
        top: 80px
    }

    .brr2 {
        top: 75px !important
    }

    .rank-text p {
        line-height: 24px
    }

    .rank-active .owl-nav button {
        left: 110px
    }

    .header-off-btn.menu-trigger {
        display: block;
        background: #58a5fe;
        background: -webkit-linear-gradient(0deg, #0156a9 0%, #00926d 100%);
        background: -webkit-linear-gradient(0deg, #0156a9 0%, #00926d 100%);
        background: -webkit-linear-gradient(0deg, #0156a9 0%, #00926d 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#58a5fe', endColorstr='#20d1fd', GradientType=1);
        text-align: center;
        height: 40px;
        line-height: 40px;
        width: 40px;
        z-index: 9;
        position: absolute;
        right: 23px;
        top: 50%;
        border-radius: 5px;
        transform: translateY(-50%)
    }

    .header-off-btn.menu-trigger.right {
        display: block !important
    }

    .off-canvas-menu {
        width: 300px;
        background: #fff;
        position: fixed;
        height: 100%;
        z-index: 99999;
        top: 0;
        left: -100%;
        transition: .3s;
        overflow: auto
    }

    .off-canvas-menu .header-btn {
        text-align: center
    }

    .header-btn.off a {
        margin: 0
    }

    .close-menu a {
        position: absolute;
        right: 20px;
        height: 32px;
        color: #000;
        text-align: center;
        line-height: 32px;
        border-radius: 50%;
        top: 15px;
        background: #fff;
        width: 32px
    }

    .off-canvas-menu.active {
        left: 0
    }

    .off-canvas-menu>ul>li>a {
        color: #333;
        display: block;
        font-size: 16px;
        border-bottom: 1px solid #dddddd87;
        border-top: 1px solid #dddddd87;
        height: 40px;
        margin-top: 10px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border: 1px solid #dddddd87;
        border-radius: 43px;
        padding: 0 15px;
        font-weight: 600
    }

    .sub-product-list>li {
        display: block;
        text-align: left;
        line-height: 30px
    }

    .sub-product-list>li>a {
        color: #6e6d6d;
        display: block;
        padding: 15px 0;
        font-size: 14px;
        height: inherit;
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: center;
        line-height: initial;
        font-weight: 600;
        width: 230px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left
    }

    .sub-product-list>li>a:hover {
        color: #0156A9
    }

    .sub-product-list>li .off-canvas-overlay {
        position: fixed;
        height: 100%;
        width: 100%;
        background: #000;
        z-index: -1;
        opacity: 0;
        -webkit-transition: .3s;
        transition: .3s;
        top: 0
    }

    .off-canvas-overlay.active {
        opacity: .6;
        z-index: 999;
        cursor: pointer
    }

    .off-canvas-menu>ul {
        margin-top: 65px;
        padding: 0;
        list-style: none
    }

    .header-off-btn span {
        background: #283B91;
        height: 4px;
        width: 30px;
        display: block;
        border-radius: 14px;
        margin-bottom: 4px
    }

    .header-off-btn {
        position: absolute;
        left: auto;
        z-index: 2;
        width: 30px;
        height: 22px;
        cursor: pointer;
        right: 70px
    }

    .off-canvas-menu ul li {
        margin: 0 20px
    }

    .off-canvas-menu ul li ul li {
        margin: 0 10px
    }

    .off-canvas-menu {
        display: block
    }

    .header-off-btn.menu-trigger a {
        color: #fff;
        font-size: 18px
    }

    .ofcanvas a {
        display: block;
        padding: 7px 20px;
        color: #fff
    }

    .off-canvas-overlay.active {
        opacity: .5;
        visibility: visible
    }

    .header-btn.of-log {
        display: flex;
        height: auto;
        justify-content: center;
        margin-top: 50px
    }

    .header-mainmenu-2 .header-off-btn.menu-trigger a {
        color: #2F6F76
    }

    .rank-sider {
        text-align: right;
        margin-top: 40px;
        padding: 0
    }

    .pathway-area .section-title h2 {
        font-size: 25px
    }

    .pathway-area .section-title {
        margin-bottom: 40px
    }

    .path-wrap {
        margin-bottom: 40px
    }

    .pathway-area {
        padding-top: 40px;
        padding-bottom: 20px
    }

    .receptor-area .section-title h2 {
        font-size: 24px
    }

    .rect-text h3 {
        font-size: 28px;
        color: #222;
        font-weight: 500;
        margin: 0
    }

    .Activating-wrapper li a {
        font-size: 14px
    }

    .receptor-area {
        padding-top: 40px;
        padding-bottom: 60px
    }

    .footer-r {
        text-align: center
    }

    .footer-l {
        text-align: center
    }

    .navbtn>a {
        color: #0156a9 !important
    }
}

@media only screen and (min-width:576px) and (max-width:767px) {
    .footer-l a {
        font-size: 12px
    }
}

@media (max-width:991px) {
    .fooetr-area .mid {
        display: initial
    }

    .addres_sec {
        padding: 50px 0 0
    }

    .contact_main_sec {
        padding: 50px 0 0
    }

    .addres_boxss {
        margin-bottom: 50px;
        height: 330px
    }

    .contact-wrap {
        text-align: center
    }

    .rs-about {
        padding: 50px 0 0
    }

    .rs-about .images {
        text-align: center;
        margin-bottom: 50px
    }

    .rs-about .images img {
        width: 50%
    }

    .rs-about .rs-animation-shape .middle-image2 {
        display: none
    }

    .hero-slider .owl-nav {
        right: 0;
        margin: auto;
        left: 0
    }
}

@media(max-width:767px) {
    #formId .mobile-search::placeholder {
        color: initial;
        font-size: 8px
    }

    .cart_quantity {
        top: -7px
    }

    .addres_boxss {
        height: initial
    }
}

@media(max-width:575px) {
    .contact_main_sec {
        padding: 30px 0 0
    }

    .addres_boxss {
        margin-bottom: 30px;
        height: initial
    }

    .addres_sec {
        padding: 30px 0
    }

    .rs-about {
        padding: 30px 0 0
    }

    .rs-about .images {
        text-align: center;
        margin-bottom: 30px
    }

    .custom-control.custom-checkbox {
        text-align: center
    }

    .forgot-password-col {
        text-align: center
    }
}

@media(max-width:400px) {
    .filter_modal .modal-dialog {
        width: 360px
    }
}

@media(max-width:360px) {
    .filter_modal .modal-dialog {
        width: 100%
    }
}