@media (min-width: 100px) and (max-width: 320px) {
  .imgUpcoming{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }
  .mobile-flex{
    display: flex;
    flex-direction: column;
  }
  .home-about-content .section-title{
    padding: 0px !important;
  }
  .imgContainer{
    margin-top: 20px !important;
  }
  .breadContent h1{
    display:none;
  }
  .breadContent{
    justify-content: end !important;
  }
  .missionContent{
    padding:30px 14% 30px 6% !important;
  }
  .missionImg{
    display:none;
  }
  .visionContiner{
    padding:17px 0px; margin-top:20px !important;
  }
  .visionContiner p{
    width:95% !important;
  }
  .hpkCard:first-child{
    margin-top:20px;
  }
  .worldcupContent{
    padding-right:0px !important;
    margin-bottom:20px !important;
  }
  .customecard{
    flex-basis: 45% !important;
  }
  .customecard h5{
    font-size: 15px;
  }
    #about .about-img{
        display: flex;
        justify-content: center;
    }
  #mission::before {
    top: -2% !important;
    background-size: 500px !important;
  }

  #mission::after {
    bottom: -98% !important;
    background-size: 500px !important;
  }
  .dashBorder {
    border-top: 1px dashed #314756;
    width: 100% !important;
    height: 1vh !important;
    margin: 30px 10px !important;
    border-left: none !important;
}
#mission {
    padding: 50px 0px !important;
}
}

@media (min-width: 321px) and (max-width: 375px) {
  .imgUpcoming{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }
  .mobile-flex{
    display: flex;
    flex-direction: column;
  }
  .home-about-content .section-title{
    padding: 0px !important;
  }
  .breadContent h1{
    display:none;
  }

  .imgContainer{
    margin-top: 20px !important;
  }
  .breadContent{
    justify-content: end !important;
  }
  .missionContent{
    padding:30px 14% 30px 6% !important;
  }
  .missionImg{
    display:none;
  }
  .visionContiner{
    padding:17px 0px; margin-top:20px !important;
  }
  .visionContiner p{
    width:95% !important;
  }
  .hpkCard:first-child{
    margin-top:20px;
  }
  .worldcupContent{
    padding-right:0px !important;
    margin-bottom:20px !important;
  }
  .customecard{
    flex-basis: 45% !important;
  }
  .customecard h5{
    font-size: 15px;
  }
  #about .about-img{
        display: flex;
        justify-content: center;
    }
  #mission::before {
    top: -2% !important;
    background-size: 500px !important;
  }
  #mission::after {
    bottom: -98% !important;
    background-size: 500px !important;
  }
  .dashBorder {
    border-top: 1px dashed #314756;
    width: 100% !important;
    height: 1vh !important;
    margin: 30px 10px !important;
    border-left: none !important;
}
#mission {
    padding: 50px 0px !important;
}
}

@media (min-width: 376px) and (max-width: 414px) {
  .imgUpcoming{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }
  .mobile-flex{
    display: flex;
    flex-direction: column;
  }
  .home-about-content .section-title{
    padding: 0px !important;
  }
  .breadContent h1{
    display:none;
  }
  .imgContainer{
    margin-top: 20px !important;
  }
  .breadContent{
    justify-content: end !important;
  }
  .missionContent{
    padding:30px 14% 30px 6% !important;
  }
  .missionImg{
    display:none;
  }
  .visionContiner{
    padding:17px 0px; margin-top:20px !important;
  }
  .visionContiner p{
    width:95% !important;
  }
  .hpkCard:first-child{
    margin-top:20px;
  }
  .worldcupContent{
    padding-right:0px !important;
    margin-bottom:20px !important;
  }
  .customecard{
    flex-basis: 45% !important;
  }
  .customecard h5{
    font-size: 15px;
  }
  #about .about-img{
        display: flex;
        justify-content: center;
    }
  #mission::before {
    top: -2% !important;
    background-size: 500px !important;
  }
  #mission::after {
    bottom: -98% !important;
    background-size: 500px !important;
  }
  .dashBorder {
    border-top: 1px dashed #314756;
    width: 100% !important;
    height: 1vh !important;
    margin: 30px 10px !important;
    border-left: none !important;
}
#mission {
    padding: 50px 0px !important;
}

}

@media (min-width: 415px) and (max-width: 650px) {
  .about-home-image {
    display: flex;
    align-items: center;
    justify-content: center;
}
  .imgUpcoming{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }
  .mobile-flex{
    display: flex;
    flex-direction: column;
  }
  .home-about-content .section-title{
    padding: 0px !important;
  }
  .breadContent h1{
    display:none;
  }
  .imgContainer{
    margin-top: 20px !important;
  }
  .breadContent{
    justify-content: end !important;
  }
  .missionContent{
    padding:30px 14% 30px 6% !important;
  }
  .missionImg{
    display:none;
  }
  .visionContiner{
    padding:17px 0px; margin-top:20px !important;
  }
  .visionContiner p{
    width:95% !important;
  }
  .hpkCard:first-child{
    margin-top:20px;
  }
  .worldcupContent{
    padding-right:0px !important;
    margin-bottom:20px !important;
  }
  .customecard{
    flex-basis: 45% !important;
  }
  .customecard h5{
    font-size: 15px;
  }
  #about .about-img{
        display: flex;
        justify-content: center;
    }
  #mission::before {
    top: -2% !important;
    background-size: 500px !important;
  }
  #mission::after {
    bottom: -98% !important;
    background-size: 500px !important;
  }
  .dashBorder {
    border-top: 1px dashed #314756;
    width: 100% !important;
    height: 1vh !important;
    margin: 30px 10px !important;
    border-left: none !important;
}
#mission {
    padding: 50px 0px !important;
}
}

@media (min-width:700px) and (max-width:1024px) {
  .about-home-image {
    display: flex;
    align-items: center;
    justify-content: center;
}
  .imgUpcoming{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }
  .home-about-content .section-title{
    padding: 0px !important;
  }
  .imgContainer{
    margin-top: 20px !important;
  }
  #heroSec{
    height: 40vh !important;
  }

  #heroSec .col-md-12{
    height: 40vh !important;

  }
  .missionImg{
    display:none;
  }
  .visionContiner p{
    width: 80% !important;
  }

  .missionContent{
    padding: 30px 14% 30px 11%;
  }
  .visionContiner{
    margin-top: 20px !important;
    padding: 40px 0px;
  }
  .customecard{
    flex-basis: 30% !important;
  }
  .breadContent{
    justify-content: end !important;
  }
  .breadContent h1{
    display: none;
  }
}

@media (min-width: 1100px) and (max-width: 1366px) {
  
  #mission::before {
    top: -8% !important;
  }
  #mission::after {
    bottom: -92% !important;
  }
  .customecard{
    flex-basis: 17% !important;
  }
  .boardRow {
    display: flex;
    gap: 2.5rem !important;
}
.customecard h5{
  font-size: 15px !important;
}
}