@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
* {
  font-family: "Josefin Sans", serif;
}
.bgGray {
  background-color: rgb(26, 31, 43);
}

.bgBlack{
    background-color: #111;
}

.heroSection {
  padding: 2rem 5rem;
}

.heroSection h2 {
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-family: "Montserrat", serif;
  line-height: 1.5;
  font-size: 2.5rem;
  text-shadow: 1px 1px 5px #000;
}
.heroP{
    font-size: 1.2rem;
}

.heroPoint {
  border: 1px solid rgb(255, 194, 81);
  padding: 1rem 1rem;
  text-align: center;
  font-size: 1.2rem;
  border-radius: 1rem;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.heroPoint i {
  color: orange;
}
.heroPoint span {
  color: #fff;
}

.profile img{
  width: 100%;
  padding: .5rem;
  border-radius: 1rem 1rem 0rem 0rem;
  background: #c55407;
  background: linear-gradient(180deg, rgb(212, 168, 85), #80714b);
}

.pName{
    background-color: #222222;
    border-bottom: 1px solid rgba(255, 166, 0, 0.337);
    border-left: 1px solid rgba(255, 166, 0, 0.337);
    border-right: 1px solid rgba(255, 166, 0, 0.499);
}
.pName h4{
    margin-top: .7rem;
    font-size: 1.1rem;
}
.pName span{
    font-size: .9rem;
    color: #d5d5d5;
}

.pBox{
    border: 2px solid rgb(255, 194, 81);
    border-radius: .5rem;
    padding: 2.5rem 2rem;
    color: #fff;
}

.pBox h4{
    text-align: center;
    padding: 1rem;
}

.pBox i{
    color: rgb(255, 189, 67);
    margin-top: .25rem;
    margin-right: .5rem;
}
.joinBtn{
    padding: 1rem 1rem;
    background-color: rgb(235, 162, 27);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    text-shadow: 1px 1px 2px #000000a7;
    transition: all .5s ease;
}

.joinBtn:hover{
    transform: scale(1.01);
    border-radius: 5rem;
}

.sectionHeading{
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    text-shadow: 1px 1px 5px #000;
}

.webBox{
    margin-top: 2rem;
    background-color: #ffffff0c;
    padding: 3rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 166, 0, 0.455);
}

.webBox p{
    color: #fff;
}
.webBox .icon{
    margin-top: .2rem;
    color: rgb(255, 187, 61);
}

.customCard{
    background-color: #ffffff11;
    text-align: center;
    color: #fff;
    border: 1px solid rgba(255, 166, 0, 0.26);
    margin-bottom: 2rem;
    border-radius: .5rem;
}

.customCard h4{
    font-size: 1.2rem;
    font-weight: 700;
    padding-bottom: .8rem;
    text-shadow: 1px 1px 5PX #000;
}

.customCard img{
    width: 12rem;
    padding: 2rem;
}

.footerImg{
    width: 100%;
    background-color: #fff;
}

.footerProfile{
    padding: 2rem 3rem;
    color: #fff;
}
.footerProfile h5{
    font-size: 1.8rem;
    text-shadow: 1px 1px 5px #000;
}
.footerProfile h3{
    color: rgb(255, 188, 63);
    font-size: 3rem;
    padding: .5rem 0rem;
    text-shadow: 1px 1px 10px #000;
    font-weight: 700;
}

.footerProfile p{
    text-align: justify;
    margin-top: 1rem;
    margin-bottom: 1rem;
    text-shadow: 1px 1px 5px #000;
    font-size: 1.1rem;
}

.ytV{
    aspect-ratio: 3/2;
    margin-top: .5rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

@media (max-width: 765px) {

    .heroP{
        font-size: .85rem;
    }

    .footerProfile{
        padding: 2rem 1rem;
    }
    .footerProfile h5{
        font-size: 1.2rem;
    }
    .footerProfile h3{
        font-size: 2rem;
        padding: .1rem 0rem;
    }

    .footerProfile p{
        text-align: justify;
        font-size: .9rem;
        margin-bottom: 1rem;
        line-height: 1.4;
    }

    .webBox{
        padding: 2rem;
    }

    .webBox p{
        font-size: .75rem;
    }

    .sectionPhoneM{
        margin-top: -3rem;
    }

    .sectionHeading{
        font-size: 1.5rem;
    }
    .joinBtn{
        padding: 1rem .5rem;
        font-size: 1.05rem;
    }

    .pBox h4{
        font-size: 1.2rem;
    }

    .pBox p{
        font-size: .85rem;
    }

    .pBox{
        padding: 1.5rem 1rem;
    }

    .profile{
        margin-bottom: 1.5rem;
    }

  .heroPoint {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
  }
  .heroSection {
    padding: 2rem 0rem;
  }
  .heroSection h2 {
    line-height: 1.5;
    font-size: 1.5rem;
  }
}


.sticky-footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #0b0b0b;
    color: white;
    padding: 15px;
    /* text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center; */
}

.register-btn {
    background-color: orange;
    color: white;
    border: none;
    padding: 15px 90px;
    text-decoration: none;
    font-size: 20px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 1px 1px 3px #000;
    transition: all .5s ease;
}

.register-btn:hover {
    background-color: rgb(180, 117, 28);
}


#timer-text{
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: -.1rem;
}

#minutes{
    color: orange;
    font-size: 1.8rem;
}

#seconds{
    color: orange;
    font-size: 1.8rem;
}


@media(max-width:765px)
{
    #timer-text{
        font-size: .9rem;
        margin-bottom: -.1rem;
    }

    #minutes{
        font-size: 1.5rem;
    }

    #seconds{
        font-size: 1.5rem;
    }

    .register-btn {
        padding: 10px 90px;
        font-size: 18px;
    }

}