@font-face {
      src: url("../font/OpenSans-Light.ttf");
      font-family: 'OpenSans-Light';
}

@font-face {
      src: url("../font/OpenSans-Medium.ttf");
      font-family: 'OpenSans-Medium';
}

@font-face {
      src: url("../font/OpenSans-Regular.ttf");
      font-family: 'OpenSans-Regular';
}

@font-face {
      src: url("../font/OpenSans-SemiBold.ttf");
      font-family: 'OpenSans-SemiBold';
}

@font-face {
      src: url("../font/OpenSans-Bold.ttf");
      font-family: 'OpenSans-Bold';
}

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'OpenSans-Light';
}

body {
      background-image: none;
      overflow-x: hidden;
}

.ProgramContent {
      overflow: hidden;
}

.forWidth {
      width: 23%;
}

.HeaderNavBar {
      background-color: white;
}

.ContentOfPage {
      display: flex;
      justify-content: center;
      align-items: flex-start;
}

.sideShow {
      width: 23%;
      position: fixed;
      left: 20px;
      top: 61px;
}

.channelProgram {
      width: 75%;
}

.sectionList {
      list-style-type: none;
      margin: 0;
      padding-left: 20px;
}

.sectionList li {
      padding: 4px 0px;
}

.lisdtOfEactSection {
      text-decoration: none;
      color: black;
      font-size: 16px;
      font-weight: 400;
      font-family: 'OpenSans-Medium';
      padding: 4px 10px;
      border-left: 2px solid #efefef;
}

.lisdtOfEactSection:hover {
      color: #cc1521;
      border-left-color: #cc1521;
}

.activePin {
      color: #cc1521;
      border-left-color: #cc1521;
}

.heading {
      font-size: 35px;
      font-weight: 600;
      color: #292929;
      font-family: 'OpenSans-SemiBold';
      text-align: center;
      margin: 0;
      padding-right: 30px;
      margin: 40px 0px 50px 0px;
}

.head {
      font-size: 28px;
      color: #383838;
      margin-bottom: 30px;
}

.channelProgram {
      padding-left: 30px;
}

.channelPara {
      font-size: 16px;
      font-weight: 300;
      color: #000;
      font-family: 'OpenSans-Light';
      border-left: 2px solid #cccccc70;
      padding-left: 9px;
      margin-bottom: 30px;
}

.middleHeading {
      text-align: center;
      color: #000;
      font-size: 16px;
      font-style: italic;
      margin-bottom: 40px;
}

.paraHeading {
      color: black;
      font-weight: 700;
      display: inline-block;
      margin-bottom: 10px;
}

.moreMargin {
      margin-bottom: 50px;
}

/* benefits */

.benefitsHeading {
      text-align: center;
      font-size: 28px;
      font-weight: 500;
      font-family: 'OpenSans-Regular';
      margin: 90px 0px;
}

.benefitsSmallHeading {
      font-size: 18px;
      font-weight: 400;
      font-family: 'OpenSans-Regular';
}

.listOfBenefits {
      list-style-type: none;
      position: relative;
      margin: 0;
      padding: 0;
}

.lists {
      list-style-type: none;
      position: relative;
      margin: 0;
      padding: 0;
}

.iconWrite {
      width: 2.5%;
}

.medias {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin: 50px 0px;
}

.video {
      width: 45%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 15px;
}

.mediaVideo {
      width: 100%;
      height: 100%;
}

.image {
      width: 45%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 15px;
}

.mediaImage {
      width: 100%;
}

.medias h1 {
      font-size: 20px;
      font-weight: 500;
      color: #333;
      font-family: 'OpenSans-Regular';
}

.rightHand {
      position: absolute;
      pointer-events: none;
      top: -70px;
      width: 50%;
      left: 0vw;
      opacity: 1;
}

.leftHand {
      position: absolute;
      pointer-events: none;
      top: -58px;
      width: 50%;
      right: 3vw;
      opacity: 1;
}

/* map */

.mapHeading {
      color: #383838;
}

.mapImage {
      margin-right: 25%;
      margin-left: -25%;
      margin-top: -12%;
}

.nameOfState {
      font-size: 16px;
      font-weight: 700;
      font-family: 'OpenSans-Bold';
      color: darkblue;
      line-height: 20px;
}

.partnerCount {
      font-size: 18px;
      font-weight: 500;
      font-family: 'OpenSans-Regular';
      line-height: 20px;
}

.pinState {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      position: fixed;
      pointer-events: none;
      width: 130px;
      top: 0;
      left: 0;
      background-color: white;
      padding: 5px 15px;
      box-shadow: 0 0 10px black;
      border-radius: 10px;
      display: none;
}

.pinState::before {
      content: '';
      width: 10px;
      height: 10px;
      transform: rotate(45deg) translateY(70%);
      position: absolute;
      background-color: white;
      bottom: 0;
      left: 50%;
}

@media only screen and (min-width: 1400px) {
      .lisdtOfEactSection {
            font-size: 20px;
      }

      .channelPara {
            font-size: 20px;
      }

      .head {
            font-size: 33px;
      }

      .heading {
            font-size: 40px;
      }

      .middleHeading {
            font-size: 20px;
      }

      .benefitsSmallHeading {
            font-size: 24px;
      }

      .benefitsItem {
            font-size: 20px;
      }

      .medias h1 {
            font-size: 25px;
      }
}

@media only screen and (max-width: 1200px) {
      .lisdtOfEactSection {
            font-size: 14px;
      }

      .heading {
            font-size: 30px;
            ;
      }

      .head {
            font-size: 25px;
      }

      .channelPara,
      .middleHeading {
            font-size: 14px;
      }

      .sectionList {
            padding-left: 5px;
      }

      .benefitsHeading {
            margin: 50px 0px;
      }

      .benefitsSmallHeading {
            font-size: 17px;
      }

      .benefitsItem {
            font-size: 14px;
      }
}

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

      .sideShow,
      .forWidth {
            display: none;
      }

      .channelProgram {
            width: 100%;
            padding-left: 10px;
      }
}

@media only screen and (max-width: 576px) {
      .heading {
            font-size: 25px;
            margin: 30px 0px 30px 0px;
      }

      .channelProgram {
            padding-left: 0;
      }

      .head {
            margin-bottom: 20px;
      }

      .middleHeading {
            font-size: 18px;
            margin-bottom: 30px;
      }

      .moreMargin {
            margin-bottom: 30px;
      }

      .leftHand {
            width: 70%;
            right: -10vw;
      }

      .rightHand {
            left: -13vw;
            width: 70%;
      }

      .medias {
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
      }

      .video {
            width: 100%;
      }

      .image {
            width: 100%;
      }

      .mediaVideo {
            height: 55vw;
      }

      .mapImage {
            margin-right: 2%;
            margin-left: -36%;
            margin-top: -12%;
            margin-bottom: 12%;
      }
}