
@media (max-width: 991px) {
    .mobile-nav-toggle {
        display: block !important;
    }

    .navbar ul {
        display: none;
    }
}

@media (min-width:820px) and (max-width:850px){
    #hero{
        height: auto !important;
    }

    #hero .bg-screen{
        height: calc(100vh - 640px);
    }

    .mainSectionPadding {
    padding-left: 30px !important;
    padding-right: 30px;
}

.StepperleftSideSection .NoteparaSection {
    position: static;
    width: auto;
    text-align: left;
    margin-top: 10px;


}

#stepper1 .nav-tabs{
    height: auto !important;
}

 .StepperleftSideSection,
 #stepper .tab-content {
     height: auto;
     padding-right: 10px;
 }

 .callout{
    display: none;
 }

 #stepper .main-CdicTabs {
    width: calc(105% - 117px);
    height: 45px !important;
    overflow-x: auto;
    flex-wrap: nowrap;
    overflow-y: hidden;
}

.guideSection p{
    display: none;
}

#resourcelibrary .tab-content{
    padding-left: 0%;
}

.bg-light-blue.mt-5 {
    margin-top: 0% !important;
    padding-top: 25px;
    padding-bottom: 25px;
}

#diabetestype .tab-content{
    padding-left: 0%;
}

.bg-light-blue.mt-5 {
    margin-top: 0% !important;
    padding-top: 25px;
    padding-bottom: 25px;
}

}

@media (min-width:768px) and (max-width:1024px){
    #diabetestype .nav-link.active:before {
left: 57%;
    }

        #stepper .main-CdicTabs {
        width: calc(107% - 117px) !important;

        }

        #stepper .mainFixHieght{
            padding: 23px !important;
        }
}

@media (min-width:320px) and (max-width:768px){
#diabetestype .tab-content,
#resourcelibrary .tab-content {
    padding-left: 0%;
}

.navbar a{
    text-align: right;
    justify-content: flex-start;
}

.userImg {
   
    filter: brightness(0.5);
}

#header .logo a {
    font-size: 26px;
    line-height: normal;
}

 #hero .bg-screen {
     height: 200px;
     width: 100%;
     background-repeat: no-repeat;
     margin-top: 40px;
     background-position: center;
 }

 #diabetestype .tab-content .digitalecosystemImg{
    width: 100%;
 }

 /* #contact{
    padding-bottom: 40px !important;
 } */
   .leftSideMainSection {
      width: 100%;
  }

  .mainSectionPadding {
    padding-left: 15px;
    padding-right: 15px;
}

.StepperleftSideSection,
#stepper .tab-content {
    height: auto;
    padding-right: 10px;
}

.cdicSection .details {
    padding-right: 0px;
}

.stepper2Section .details,
#stepper-11 .details {
    padding-left: 0px;
}

#stepper .main-CdicTabs {
    width: calc(112% - 117px);
    z-index: 999;
    height: 45px !important;
    overflow-x: auto;
    flex-wrap: nowrap;
    overflow-y: hidden;
}
 .bg-light-blue.mt-5 {
     margin-top: 0% !important;
     padding-top: 25px;
     padding-bottom: 25px;
 }

 #contact .container.px-5 {
    padding-left: 15px !important;
    padding-right: 15px !important;
 }

 .aggregatedDashboardSection .home-box {
    height: 150px !important;
    padding-bottom: 10px !important;
}

#stepper .mainFixHieght {
    padding-left: 0px;
    padding-right: 0px;
}

.callout{
    display: none;
}

.StepperleftSideSection .NoteparaSection{
    position: static;
    width: auto;
    text-align: left;
margin-top: 10px;

}

.StepperleftSideSection .downloadtext{
    justify-content: flex-start !important;
}

.guideSection p{
    display: none;
}

#diabetestype .textHeading{
    text-align: center;
    font-size: 17px;
}

#footer {
 font-size: 13px;
}

#stepper-21 .sceonduserCard{
    height: auto;
  }

  #resource-4{
    height: auto;
  }
}


@media (min-width:320px) and (max-width:767px){
    #diabetestype .nav-link.active::before,
    #resourcelibrary .nav-link.active::before,
#stepper1 .nav-link.active::before{
        display: none;
    }

    #hero{
        height: auto;
    }

     #resourcelibrary img:nth-child(odd){
        margin-top: 10px;
     }

      .leftSideMainSection {
     width: 100%;
 }

 .bg-light-blue.mt-5{
    margin-top: 0% !important;
    padding-top: 25px;
    padding-bottom: 25px;
 }

 #stepper1 .step-trigger{
    font-size: 11px;
 }

 .StepperleftSideSection,
#stepper .tab-content{
    height: auto;
    padding-right: 10px;
}

.cdicSection .details {
    padding-right: 0px;
}

.stepper2Section .details{
    padding-left: 0px;
}

.third-Steppersection .form-check-label{
font-size: 12px;
text-align: left;
}

#stepper .main-CdicTabs{
    width: calc(125% - 117px);
z-index: 999;
height: 45px !important;
overflow-x: auto;
flex-wrap: nowrap;
overflow-y: hidden;
}

.stepper2Section .stepper2ButtonSection button{
    font-size: 11px;
}

.aggregatedDashboardSection .main-first-section img {
    width: 25% !important;
}
.aggregatedDashboardSection .home-box {
    height: auto !important;
    padding-bottom: 10px !important;
}

#stepper .mainFixHieght{
    padding-left: 0px;
    padding-right: 0px;
}


.globalLogin.container-login .main-loginSection{
    display: none;
}

#hero .middle-section h4, #hero .middle-section ul li,
#hero .third-section h4, #hero .third-section p, #hero .third-section ul li{
    text-align: left !important;
}


.contactbgSection {

 height: 320px !important;
}

}

@media (min-width:602px) and (max-width:620px){
    #stepper .main-CdicTabs{
        width: calc(115% - 117px) !important;
    }
}

@media (min-width:1024px) and (max-width:1050px){
    #header .logo a{
        font-size: 17px !important;

line-height: normal !important;
    }

    .mainSectionPadding {
    padding-left: 30px !important;
    padding-right: 30px;
}

    #diabetestype .nav-link.active:before {
        left: 110%;
    }

    #hero .btn-menu,
#hero .btn-book {

    font-size: 13px;
}

.aggregatedDashboardSection .main-first-section p{
    line-height: 14px;
font-size: 11px;
}
#stepper .main-CdicTabs{
width: calc(80% - 117px) !important;
flex-wrap: nowrap;
overflow-y: hidden;
overflow-x: auto;

}

#hero .second-section p,
#hero .second-section ul li {
 font-size: 13px;
}

.callout {
    display: none;
}

.guideSection p{
    display: none;
}
}

@media (min-width:1920px){
    #hero .second-section p,
#hero .second-section ul li{
    font-size: 20px;
}

#hero p{
    font-size: 24px;
}

#hero p{
    line-height: inherit;
}

.container-xxl{
    max-width: 1520px;
}

.callout {
   left: 617px; 
}
.callout#myCallout3 {
    left: 713px;
}

.callout#myCallout4 {
  
    left: 596px;
}

.aggregatedDashboardSection .main-first-section img {

    width: 30% !important;
}
}

@media (min-width:1800px){
    #hero p
    {
        font-size: 20px;
    }

    .callout{
        top: 26%;
left: 587px;
    }

    .callout#myCallout3 {
    left: 678px;
}

.callout#myCallout4 {
    top: 45%;
    left: 567px;
}

#resourcelibrary .tab-content a img.w-100{
    height: 350px;
}
}

@media (min-width:1280px) and (max-width:1300px) {
    .aggregatedDashboardSection .main-first-section p {
       font-size: 10px;
    }

    .callout {

       left: 460px;         
    }

    .callout#myCallout3 {
        left: 554px;
    }

    .callout#myCallout4 {
      
        left: 430px;
    }

    #stepper .main-CdicTabs {
   width: calc(78.4% - 117px);

    }   

}

@media (min-width:1400px) and (max-width:1600px){
      #hero .bg-screen {
      background-size: 90%;
     
  }
   #hero .second-section.mt-5 {
     margin-top: 1.5rem !important;
 }
}

@media (min-width:1600px) and (max-width:1900px){
    #hero .bg-screen{
        background-size: 70%;
        height: calc(100vh - 360px) !important;
    }

    #hero .second-section.mt-5{
        margin-top: 1.5rem !important;
    }

    .callout#myCallout3 {
    left: 657px;
}

.callout#myCallout4 {
    top: 43%;
    left: 533px;
}

    
}

@media (min-width:1680px) and (max-width:1690px){
    .callout {
 
    top: 26%;
    left: 559px;

    }

    .callout#myCallout3 {
    left: 657px;
}

.callout#myCallout4 {
    top: 43%;
    left: 533px;
}
}

@media (min-width:1900px){
    #hero .bg-screen {
        background-size: 70%;
        height: calc(100vh - 360px) !important;
    }

 #hero .second-section.mt-5 {
     margin-top: 1.5rem !important;
 }
   

}