@media (max-width: 768px) {

    .herohead {
        font-size: 59px !important;
    }

    .coolBeans {
      padding: 1.3rem 1.5rem !important;
    }

    .rr3{
      padding-top: 36px !important;
    }


    .head11{
        font-size: 65px !important;
    }
    .head12{
        font-size: 48px !important;
    }

    .main-h1 {
        color: #fff !important;
    }

    .p-lines:before,
    .p-lines:after {
        width: 27%;
    }

    .p-lines:before {
        left: -55px;
    }

    .p-lines:after {
        right: -58px;
    }

    .contact{
        width: 80% !important; 
    margin-left: 40px;
    }
  

      .timebox11{
        width: 90% !important;
      }

      .infinityp1{
        font-size: 11px;
      }
      
      .infinityp2{
        font-size: 14px;
        cursor: pointer; 
      }
}







/* PROGRESS BAR:  */

.progress1-bar {
  position: absolute;
  width: 100px;
  height: 10px;
  background-color: #2a2a2a;
  border-radius: 5px;
  overflow: hidden;
  opacity: 0; /* Set initial opacity to 0 */
  transform: translateY(20px); /* Move initially below the view */
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}



.progress-bar {
  height: 10px;
  width: 80%;
  background-color: rgb(231, 231, 231) !important;
  border-radius: 45px;
  overflow: hidden;
}


.progress-fill {
  height: 100%;
  width: 0;
  background-color: #7DB540;
  border-radius: 10px;
  transition: width 2s ease-in-out;

}

.progress-fill-1 {
  height: 100%;
  width: 0;
  background-color: #F4A261;
  border-radius: 10px;
  transition: width 2s ease-in-out;
}

.progress-fill-2 {
  height: 100%;
  width: 0;
  background-color: #264653;
  border-radius: 10px;
  transition: width 2s ease-in-out;
}

.progress-fill-3 {
  height: 100%;
  width: 0;
  background-color: #BC4749;
  border-radius: 10px;
  transition: width 2s ease-in-out;
}

.progress-fill-4 {
  height: 100%;
  width: 0;
  background-color: #2A9D8F;
  border-radius: 10px;
  transition: width 2s ease-in-out;
}

.progress-fill-5 {
  height: 100%;
  width: 0;
  background-color: #6A4C93;
  border-radius: 10px;
  transition: width 2s ease-in-out;
}

.progress-fill-6 {
  height: 100%;
  width: 0;
  background-color: #6A4C93;
  border-radius: 10px;
  transition: width 2s ease-in-out;
}

.progress-fill-7 {
  height: 100%;
  width: 0;
  background-color: #6A4C93;
  border-radius: 10px;
  transition: width 2s ease-in-out;
}

/* Optional: Add hover effect */
.progress-fill:hover {
  width: 100%;
}





.rd22{
  background-image: url('./images/rdback.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
}
.rd22::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.305);
}

.rdp {
  z-index: 100 !important;
  border-top: 2px dashed;
  border-color: #16EFFC !important;
  margin:0; padding: 30px;
}



.rdp:nth-child(even) {
  border-left: 2px dashed;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  margin-right: 30px; 
  padding-right: 0;
  z-index: 100 !important;
}

.rdp:nth-child(odd) {
  border-right: 2px dashed;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  margin-left: 30px; 
  padding-left: 0;
  z-index: 100 !important;
}

.rdp:first-child {
  border-top: 0;
  border-top-right-radius:0;
  border-top-left-radius:0;
}

.rdp:last-child {
  border-bottom-right-radius:0;
  border-bottom-left-radius:0;
}




.coolBeans {
  display: inline-block;
  border-radius: 3rem;
  background: linear-gradient(45deg, #2f7885, #1E525B);
  font-size: 2.0rem !important;
  font-weight: 100;
  overflow: hidden;
  padding: 1.3rem 1.5rem;
  position: relative;
  text-decoration: none;
  transition: 0.2s transform ease-in-out;
  will-change: transform;
  z-index: 0;
  border: 3px solid #ffffff;
}

.coolBeans .content1 {
  display: flex;
  align-items: center;
  color: #fff;
}

.coolBeans img {
  width: 30px;
  margin-right: 10px;
}

.coolBeans::after {
  background: linear-gradient(45deg, #358694, #1c9eb5);
  border-radius: 3rem;
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-100%, 0) rotate(10deg);
  transform-origin: top left;
  transition: 0.2s transform ease-out;
  will-change: transform;
  z-index: -1;
}

.coolBeans:hover::after {
  transform: translate(0, 0);
}

.coolBeans:hover {
  color: #ffffff;
  transform: scale(1.05);
  will-change: transform;
  text-decoration: none;
}

.coolBeans1 {
  border: none;
  border-radius: 3rem;
  color: #fff;
  background: linear-gradient(90deg, #3a3a5c 0%, #28286c 100%);

  font-size: 1.8rem;
  font-weight: 100;
  overflow: hidden;
  padding: 0.2rem 5.8rem;
  /* width: 270px; */
  position: relative;
  text-decoration: none;
  transition: 0.2s transform ease-in-out;
  will-change: transform;
  z-index: 0;
  border: 3px solid #ffffff;
}

.coolBeans1::after {
  background: linear-gradient(90deg, #5A5A75 0%, #4545bd 100%);
  border-radius: 3rem;
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-100%, 0) rotate(10deg);
  transform-origin: top left;
  transition: 0.2s transform ease-out;
  will-change: transform;
  z-index: -1;
  border: none !important;
}

.coolBeans1:hover::after {
  transform: translate(0, 0);
}

.coolBeans1:hover {
  color: #ffffff;
  transform: scale(1.05);
  will-change: transform;
  text-decoration: none;
}