/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/


@media (max-width: 480px) and (min-width: 320px) {
    .modal-content {
        width: 100% !important;
    }
    .nav-item {
        padding: 0px 0px;
        cursor: pointer;
    }
   
   
}

@media (max-width:767px){
    .ui-draggable.ui-resizable{
        width:unset !important;
    }
}

@media (max-width: 676px) {
    main {
        padding: 5px 5px;
        height: 80px;
    }

    .navbar-home {
        padding: 5px 5px !important;
        height: 80px;
    }
}

@media (max-width: 1024px) {

    .body0,
    .main-0::before {
        background: url("../img/Banners/Mobile/Banner1.jpg");
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        transition: 2.5s;
    }
    
    .body1,
    .main-1::before {
        background: url("../img/Banners/Mobile/GlobalDesiNew.jpg");
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        transition: 2.5s;
    }

    .body2,
    .main-2::before {
        background: url("../img/Banners/Mobile/Gocolors.jpg");
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        transition: 2.5s;
    }

    .body3,
    .main-3::before {
        background: url("../img/Banners/Mobile/rangriti.jpg");
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        transition: 2.5s;
    }

    .body4,
    .main-4::before {
        /* spykar */
        background: url("../img/Banners/Mobile/spykar.jpg");
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        transition: 2.5s;
    }

    .body5,
    .main-5::before {

        background: url("../img/Banners/Mobile/vm.jpg");
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        transition: 2.5s;
    }

    .body6,
    .main-6::before {

        background: url("../img/Banners/Mobile/Banner2.jpg");
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        transition: 2.5s;
    }

    .body7,
    .main-7::before {

        background: url("../img/Banners/Mobile/Banner3.jpg");
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        transition: 2.5s;
    }

    .body-brands,
    .section-brand::before {
        background: url("../img/Banners/Miniso_m.jpg") !important;
        background-attachment: fixed !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: 0px;
    }

    .body-careers,
    .section-careers::before {
        background: url("../img/mobile/Career.jpg") !important;
        background-attachment: fixed !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;

    }

    .body-stores {
        background: url("../img/mobile/Store.jpg") !important;
        background-attachment: fixed !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }

    .filter-nav {
        padding: 5px !important;
    }

    .store-div {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .store-img {
        padding: 1.5rem !important;
    }
}

@media (min-width: 1281px) {


    .about-text,
    .about-text-2,
    .about-img-div {
        width: 50% !important;
    }
    
    .about-text,
    .about-text-2 {
        margin-top: 0px !important;
        margin-right: 0em !important;

    }

    .about-img-div {
        height: 400px !important;
    }

    .about-section h1 {
        font-size: 35px !important;
    }

    .about-section p {
        width: 93% !important;
        font-size: 14px !important;
    }

    .about-text-2 {
        margin-left: 2em !important;
    }

    .ui-text-light-heading {
        color: #f4f4f4;
        font-size: 100px;
    }

    .about::before,
    .brands-tag::before {

        color: #218dc4;
        font-size: 30px;
        font-family: 'Oswald', sans-serif;
        letter-spacing: 2px;
        font-weight: 600;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        top: 85px;
        position: relative;
    }

    .about-div h5 {
        font-size: 20px;
        padding: 0px;
        margin-top: 7 0px !important;
    }

    .indicators.active {
        color: #d51d7b;
        font-size: 25px;
        border-bottom: 5px solid #018cd1;
        width: 10% !important;
    }

    .indicators {
        width: 15% !important;
    }

    .career-content {
        padding-top: 3rem !important;
    }
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1024px) and (max-width: 1280px) {

    .about-text,
    .about-text-2,
    .about-img-div {
        width: 50% !important;
    }
    
    .about-text,
    .about-text-2 {
        margin-top: 0px !important;
        margin-right: 0em !important;

    }

    .about-img-div {
        height: 400px !important;
    }

    .about-section h1 {
        font-size: 35px !important;
    }

    .about-section p {
        width: 93% !important;
        font-size: 13px !important;
    }

    .about-text-2 {
        margin-left: 1em !important;
    }

    .ui-text-light-heading {
        color: #f4f4f4;
        font-size: 80px;
    }

    .about::before,
    .brands-tag::before {
        content: 'ABOUT';
        color: #218dc4;
        font-size: 25px;
        font-family: 'Oswald', sans-serif;
        letter-spacing: 2px;
        font-weight: 600;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        top: 71px;
        position: relative;
    }

    .about-div h5 {
        font-size: 18px;
        padding: 0px;
        margin-top: 20px !important;
    }

    .team-mates-imd-div {
        width: 200px;
        height: 200px;
    }

    .indicators.active {
        color: #d51d7b;
        font-size: 25px;
        border-bottom: 5px solid #018cd1;
        width: 10% !important;
    }

    .indicators {
        width: 12% !important;
    }

    .career-content {
        padding: 3rem !important;
    }
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1023px) {

    #sidebar-wrapper.active {
        right: 250px;
        width: 40%;
        -webkit-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
    }

    .sidebar-nav {
        padding-left: 3rem !important;
        margin-left: 3rem !important;
    }

    .sidebar-nav>.sidebar-brand {
        width: 30% !important;
    }

    .about-text,
    .about-text-2,
    .about-img-div {
        width: 50% !important;
    }

    .about-text,
    .about-text-2 {
        margin-top: 0px !important;
        margin-right: 0em !important;

    }

    .about-img-div {
        height: 400px !important;
    }

    .about-section h1 {
        font-size: 35px !important;
    }

    .about-section p {
        width: 93% !important;
        font-size: 13px !important;
    }

    .about-text-2 {
        margin-left: 1em !important;
    }

    .ui-text-light-heading {
        color: #f4f4f4;
        font-size: 80px;
    }

    .about::before,
    .brands-tag::before {
        content: 'ABOUT';
        color: #218dc4;
        font-size: 25px;
        font-family: 'Oswald', sans-serif;
        letter-spacing: 2px;
        font-weight: 600;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        top: 71px;
        position: relative;
    }

    .about-div h5 {
        font-size: 18px;
        padding: 0px;
        margin-top: 20px !important;
    }

    section {
        padding: 0px !important;
        width: 100% !important;
    }

    .indicators.active {
        color: #d51d7b;
        font-size: 25px;
        border-bottom: 5px solid #018cd1;
        width: 30% !important;
    }

    .team-mates-imd-div {
        width: 200px;
        height: 220px
    }

    .career-content {
        padding: 3rem !important;
    }
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    #sidebar-wrapper.active {
        right: 250px;
        width: 40%;
        -webkit-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
    }

    .sidebar-nav {
        padding-left: 3rem !important;
        margin-left: 3rem !important;
    }

    .sidebar-nav>.sidebar-brand {
        width: 30% !important;
    }

    .about-text,
    .about-text-2,
    .about-img-div {
        width: 50% !important;
    }

    .about-text,
    .about-text-2 {
        margin-top: 0px !important;
        margin-right: 0em !important;

    }

    .about-img-div {
        height: 400px !important;
    }

    .about-section h1 {
        font-size: 35px !important;
    }

    .about-section p {
        width: 93% !important;
        font-size: 13px !important;
    }

    .about-text-2 {
        margin-left: 1em !important;
    }

    .ui-text-light-heading {
        color: #f4f4f4;
        font-size: 80px;
    }

    .about::before,
    .brands-tag::before {
        content: 'ABOUT';
        color: #218dc4;
        font-size: 25px;
        font-family: 'Oswald', sans-serif;
        letter-spacing: 2px;
        font-weight: 600;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        top: 71px;
        position: relative;
    }

    .about-div h5 {
        font-size: 18px;
        padding: 0px;
        margin-top: 20px !important;
    }

    section {
        padding: 0px !important;
        width: 90% !important;
    }

    .indicators.active {
        color: #d51d7b;
        font-size: 25px;
        border-bottom: 5px solid #018cd1;
        width: 30% !important;
    }

    .team-mates-imd-div {
        width: 200px;
        height: 230px;
    }

    .career-content {
        padding: 3rem !important;
    }

    .our-team,
    .contact {
        height: 150px !important;
    }

    .our-team h1 {
        font-size: 2rem;
    }
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
@media (min-width: 680px) and (max-width: 767px) {
    .navbar-brand {
        width: 40px !important;
        height: 40px !important;
    }

    #sidebar-wrapper.active {
        right: 250px;
        width: 40%;
        -webkit-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
    }

    .sidebar-nav {
        padding-left: 1rem !important;
        margin-left: 1rem !important;
    }

    .sidebar-nav>.sidebar-brand {
        width: 40% !important;
    }

    .ui-text-light-heading {
        color: #f4f4f4;
        font-size: 70px;
    }

    .about::before,
    .brands-tag::before {
        content: 'ABOUT';
        color: #218dc4;
        font-size: 25px;
        font-family: 'Oswald', sans-serif;
        letter-spacing: 2px;
        font-weight: 600;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        top: 61px;
        position: relative;
    }

    .about-text,
    .about-text-2,
    .about-img-div {
        width: 100% !important;
    }

    .about-text,
    .about-text-2 {
        margin-top: 10px !important;
        margin-right: 0px !important;
        margin-left: 0px !important;
    }

    .about-img-div {
        height: 300px !important;
    }

    .about-section h1 {
        font-size: 35px !important;
    }

    .about-section p {
        width: 100% !important
    }

    section {
        padding: 0px !important;
        width: 100% !important;
    }

    .indicators.active {
        color: #d51d7b;
        font-size: 25px;
        border-bottom: 5px solid #018cd1;
        width: 30% !important;
    }

    .career-content .career-text {
        width: 95%;
    }

    .btn-staff {
        font-size: 14px;
        font-weight: 600;
        color: #fff;
        height: 40px;
        border-radius: 50px;
        background: #018cd1;
        width: 70% !important;
    }

    .our-team {
        height: 100px !important;
    }

    .our-team h1 {
        font-size: 2rem;
    }

    .team-mates-imd-div {
        width: 230px;
        height: 250px;
    }

    .our-team,
    .contact {
        height: 100px !important;
    }

    .our-team h1 {
        font-size: 2rem;
    }
}

@media (min-width: 481px) and (max-width: 680px) {


    .navbar-brand {
        width: 40px !important;
        height: 40px !important;
    }

    #sidebar-wrapper.active {
        right: 250px;
        width: 50%;
        -webkit-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
    }

    .sidebar-nav {
        padding-left: 0.5rem !important;
        margin-left: 2.5rem !important;
    }

    .sidebar-nav>.sidebar-brand {
        width: 40% !important;
    }

    .ui-text-light-heading {
        color: #f4f4f4;
        font-size: 60px;
    }

    .about::before,
    .brands-tag::before {
        content: 'ABOUT';
        color: #218dc4;
        font-size: 20px;
        font-family: 'Oswald', sans-serif;
        letter-spacing: 2px;
        font-weight: 600;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        top: 51px;
        position: relative;
    }

    .about-text,
    .about-text-2,
    .about-img-div {
        width: 100% !important;
    }

    .about-text,
    .about-text-2 {
        margin-top: 10px !important;
        margin-right: 0px !important;
        margin-left: 0px !important;
    }

    .about-img-div {
        height: 300px !important;
    }

    .about-section h1 {
        font-size: 35px !important;
    }

    .about-section p {
        width: 100% !important
    }

    section {
        padding: 0px !important;
        width: 100% !important;
    }

    .team-mates-imd-div {
        width: 200px !important;
        height: 250px !important;
    }

    .address {
        width: 100% !important;
    }

    .career-content .career-text {
        width: 95%;
    }

    .btn-staff {
        font-size: 14px;
        font-weight: 600;
        color: #fff;
        height: 40px;
        border-radius: 50px;
        background: #018cd1;
        width: 80% !important;
    }

    .our-team,
    .contact {
        height: 100px !important;
    }

    .our-team h1 {
        font-size: 2rem;
    }
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media (min-width:381px) and (max-width:480px) {

    .navbar-brand {
        width: 40px !important;
        height: 40px !important;
    }

    #sidebar-wrapper.active {
        right: 250px;
        width: 50%;
        -webkit-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
    }

    .sidebar-nav {
        padding-left: 0.3rem !important;
        margin-left: 2.5rem !important;
    }

    .sidebar-nav>.sidebar-brand {
        width: 40% !important;
    }

    .ui-text-light-heading {
        color: #f4f4f4;
        font-size: 50px;
    }

    .about::before,
    .brands-tag::before {
        content: 'ABOUT';
        color: #218dc4;
        font-size: 17px;
        font-family: 'Oswald', sans-serif;
        letter-spacing: 2px;
        font-weight: 600;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        top: 45px;
        position: relative;
    }

    .about-text,
    .about-text-2,
    .about-img-div {
        width: 100% !important;
    }

    .about-text,
    .about-text-2 {
        margin-top: 10px !important;
        margin-right: 0px !important;
        margin-left: 0px !important;
    }

    .about-img-div {
        height: 300px !important;
    }

    .about-section h1 {
        font-size: 35px !important;
    }

    .about-section p {
        width: 100% !important
    }

    section {
        padding: 0px !important;
        width: 100% !important;
    }

    .team-mates-imd-div {
        width: 160px !important;
        height: 180px !important;
    }

    .address {
        width: 100% !important;
    }

    .career-content .career-text {
        width: 95%;
    }

    .btn-staff {
        font-size: 14px;
        font-weight: 600;
        color: #fff;
        height: 40px;
        border-radius: 50px;
        background: #018cd1;
        width: 90% !important;
    }

    .staff {
        color: #707070;
        font-weight: 500;
        font-size: 13px;
        font-family: 'Montserrat', sans-serif;
        line-height: 25px;
        text-transform: capitalize;
    }

    .team-role {
        color: #808080;
        font-size: 10px;
        font-weight: 500;
        font-family: 'Oswald', sans-serif;
        text-transform: uppercase;
    }

    .teammate-name {
        color: #4d4d4d;
        font-size: 19px;
        font-weight: 600;
        text-transform: capitalize;
    }

    .our-team,
    .contact {
        height: 100px !important;
    }

    .our-team h1 {
        font-size: 2rem
    }
}

@media (min-width: 351px) and (max-width: 380px) {

    .navbar-brand {
        width: 40px !important;
        height: 40px !important;
    }

    #sidebar-wrapper.active {
        right: 250px;
        width: 49%;
        -webkit-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
    }

    .sidebar-nav {
        padding-left: 0rem !important;
        margin-left: 2rem !important;
    }

    .sidebar-nav>.sidebar-brand {
        width: 40% !important;
    }

    .ui-text-light-heading {
        color: #f4f4f4;
        font-size: 40px;
    }

    .about::before,
    .brands-tag::before {
        content: 'ABOUT';
        color: #218dc4;
        font-size: 15px;
        font-family: 'Oswald', sans-serif;
        letter-spacing: 2px;
        font-weight: 600;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        top: 35px;
        position: relative;
    }

    .about-text,
    .about-text-2,
    .about-img-div {
        width: 100% !important;
    }

    .about-text,
    .about-text-2 {
        margin-top: 10px !important;
        margin-right: 0px !important;
        margin-left: 0px !important;
    }

    .about-img-div {
        height: 300px !important;
    }

    .about-section h1 {
        font-size: 35px !important;
    }

    .about-section p {
        width: 100% !important
    }

    section {
        padding: 0px !important;
        width: 100% !important;
    }

    .team-mates-imd-div {
        width: 130px !important;
        height: 140px !important;
    }

    .indicators.active {
        color: #d51d7b;
        font-size: 25px;
        border-bottom: 5px solid #018cd1;

    }

    .address {
        width: 100% !important;
    }

    .career-content .career-text {
        width: 95%;
    }

    .btn-staff {
        font-size: 14px;
        font-weight: 600;
        color: #fff;
        height: 40px;
        border-radius: 50px;
        background: #018cd1;
        width: 100% !important;
    }

    .staff {
        color: #707070;
        font-weight: 500;
        font-size: 13px;
        font-family: 'Montserrat', sans-serif;
        line-height: 25px;
        text-transform: capitalize;
    }

    .team-role {
        color: #808080;
        font-size: 10px;
        font-weight: 500;
        font-family: 'Oswald', sans-serif;
        text-transform: uppercase;
    }

    .teammate-name {
        color: #4d4d4d;
        font-size: 15px;
        font-weight: 600;
        text-transform: capitalize;
    }

    .our-team,
    .contact {
        height: 100px !important;
    }

    .our-team h1 {
        font-size: 1.5rem
    }
}

@media (min-width: 320px) and (max-width: 350px) {

    .navbar-brand {
        width: 40px !important;
        height: 40px !important;
    }

    #sidebar-wrapper.active {
        right: 250px;
        width: 49%;
        -webkit-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
    }

    .sidebar-nav {
        padding-left: 0rem !important;
        margin-left: 2rem !important;
    }

    .sidebar-nav>.sidebar-brand {
        width: 40% !important;
    }

    .ui-text-light-heading {
        color: #f4f4f4;
        font-size: 40px;
    }

    .about::before,
    .brands-tag::before {
        content: 'ABOUT';
        color: #218dc4;
        font-size: 15px;
        font-family: 'Oswald', sans-serif;
        letter-spacing: 2px;
        font-weight: 600;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        top: 35px;
        position: relative;
    }

    .about-text,
    .about-text-2,
    .about-img-div {
        width: 100% !important;
    }

    .about-text,
    .about-text-2 {
        margin-top: 10px !important;
        margin-right: 0px !important;
        margin-left: 0px !important;
    }

    .about-img-div {
        height: 300px !important;
    }

    .about-section h1 {
        font-size: 35px !important;
    }

    .about-section p {
        width: 100% !important
    }

    section {
        padding: 0px !important;
        width: 100% !important;
    }

    .team-mates-imd-div {
        width: 120px !important;
        height: 130px !important;
    }

    .indicators.active {
        color: #d51d7b;
        font-size: 25px;
        border-bottom: 5px solid #018cd1;

    }

    .address {
        width: 100% !important;
    }

    .career-content .career-text {
        width: 95%;
    }

    .btn-staff {
        font-size: 14px;
        font-weight: 600;
        color: #fff;
        height: 40px;
        border-radius: 50px;
        background: #018cd1;
        width: 100% !important;
    }

    .staff {
        color: #707070;
        font-weight: 500;
        font-size: 13px;
        font-family: 'Montserrat', sans-serif;
        line-height: 25px;
        text-transform: capitalize;
    }

    .team-role {
        color: #808080;
        font-size: 10px;
        font-weight: 500;
        font-family: 'Oswald', sans-serif;
        text-transform: uppercase;
    }

    .teammate-name {
        color: #4d4d4d;
        font-size: 13px;
        font-weight: 600;
        text-transform: capitalize;
    }

    .our-team,
    .contact {
        height: 100px !important;
    }

    .our-team h1 {
        font-size: 1.5rem
    }
}