*{
    margin: 0;
}

/* ========================== global style #3d3ba2 ============================ */
:root{
    --primary:#0497bf;
    --main:#302e8f;
    --tertiary:linear-gradient(to bottom, #01005d, #cecece);
    --secondary:linear-gradient(to top, #0c0b61, #cecece);
    --btn:linear-gradient(99deg, #5654b9 15.5%, #0c0b61 100%);
    --light:white;
    --text:#555;
}
a{
    text-decoration: none;
}

.hero-btn {
    border: none;
    outline: none;
    background:var(--btn);
    color:var(--light);
    padding: 25px 50px;
    font-size: 18px;
    border-radius: 5px;
    width: 100%;
}
.hero-cta a {
    width: 50%;
}
.hero-btn-2 {
    border: none;
    outline: none;
    background:#f8f7f7;
    color:black;
    padding: 26px 50px;
    border-radius: 5px;
    width: 100%;
}
.hero-cta-2 a {
    width: 50%;
}
.enroll {
    border: none;
    outline: none;
    background:var(--btn);
    color:var(--light);
    padding: 15px 20px;
    font-size: 18px;
    border-radius: 5px;
    width: 50%;
}
.card-btn {
    border: none;
    outline: none;
    background-color:var(--light);
    color: var(--main);
    box-shadow: 4px 4px #a2a2a7;
    padding: 12px 25px;
    border-radius: 7px;
}
.about-btn {
    border: none;
    outline: none;
    background:var(--btn);
    color: var(--light);
    padding: 15px 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.card-1-btn {
    border: none;
    outline: none;
    background-color:var(--light);
    color: var(--main);
    box-shadow: 4px 4px #a2a2a7;
    padding: 15px 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.about-1-btn {
    border: none;
    outline: none;
    background:var(--btn);
    color: var(--light);
    padding: 15px 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.foot-btn {
    border: 2px solid var(--main);
    outline: none;
    background-color:var(--light);
    color: var(--main);
    padding: 15px 25px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cancel-cta{
          border: none;
          padding: 20px 5px;
          border-radius: 5px;
          background: transparent;
          border: 1px solid var(--main);
          color:var(--main);
          font-weight: bold;
          width: 100%;
      }
   .accept-cta{
          border: none;
          padding: 20px 5px;
          border-radius: 5px;
          border: 1px solid var(--btn);
          background:var(--btn);
          color: white;
          font-weight: bold;
          width: 100%;
      }
.margin {
    margin: 0 4%;
}
.margin-1 {
    margin: 0 2%;
}
/* ========================== end of global style ============================ */
body{
    font-family: sans-serif;
    background-color: var(--light);
}


/* ====================== sidebar section ======================== */
#sidebar {
    position: fixed;
    top: 0;
    left: -1000px;
    height: 100vh;
    background-color:var(--light);
    width: 25%;
    border: 1px solid #ddd;
    padding:10px 15px;
    color: var(--main);
    transition: left 1s ease;
    display: none;
    z-index: 10000;
}
#sidebar.show{
    left: 0;
}
.no-scroll {
    overflow: hidden;
}

.side-logo{
    justify-self: center;
    margin-bottom: 20px;
}
.side-item{
    display: flex;
    align-items: center;
    gap: 10px;
}
.side-item a{
    color: var(--main);
    font-size: 17px;
}
.side-logo img{
    padding-top: 25px;
}
.side-item i{
    color:var(--dash);
}
/* ====================== end of sidebar section ======================== */



/* ================================= navbar section ========================================= */
.all-navbar {
    background:#f8f7f7;
    padding: 10px 0;
    position: sticky;
    z-index: 100;
    top: 0;
}
.navbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-right {
    display: flex;
    align-items: center;
    gap: 30px;
}
.nav-right a {
    color: var(--text);
    font-size: 18px;
}
.nav-left img{
    width: 150px;
}
#bars {
    cursor: pointer;
    display: none;
}
#bars span {
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--primary);
    margin-bottom: 5px;
    transition: 1s ease;
}
#bars span:nth-child(2){
    width: 15px;
}
#bars.show span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
#bars.show span:nth-child(2) {
    opacity: 0;
}
#bars.show span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}
/* ================================= end of navbar section ========================================= */

/* =================================== hero section ============================================== */
.all-hero-background{
    background:var(--tertiary);
}

.hero-content {
    display: flex;
    align-items: flex-start ;
    justify-content: space-between;
    padding:20px 0 0 0;
}
.hero-header {
    margin: 100px 0;
}
.hero-header h1 span{
    display: block;
    font-size: 70px;
    font-weight: bolder;
    color: var(--light);
}
.hero-header p span{
    color: var(--light);
    font-size: 18px;
    display: block;
}
.hero-right img{
    width: 100%;
}
.hero-cta{
    display: flex;
    align-items: center;
    gap: 20px;
}
/* =================================== end of hero section ============================================== */

/* ======================================== course-section ============================================ */
.course-title{
    text-align: center;
    margin-bottom: 50px;
}
.course-title h1{
    color: var(--main);
    font-weight: bold;
    font-size: 50px;
}
.course-title p{
    font-size: 18px;
    color: var(--text);
}
.first-course {
    background:var(--secondary);
    padding: 50px;
    border-radius: 20px;
    width: 100%;
}
.first-course img{
    width: 100%;
    height: auto;
    border-radius: 20px;
    margin-bottom: 15px;
}
.first-course h3{
    font-weight: bold;
    color: var(--light);
}
.first-course p{
    color: var(--light);
}
.course-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
/* ======================================== end of course-section ============================================ */

/* ======================================= benefits section =========================================== */
.benefits-card {
    background-color:var(--light);
    border: 1px solid var(--main);
    box-shadow: 3px 3px var(--main);
    border-radius: 10px ;
    padding: 30px;
    height: fit-content;
}
.benefits-card h3{
    font-weight: bold;
    color: var(--text);
}
.benefits-card p{
    color: var(--text);
}
.benefit-icon i{
    font-size: 2.5rem;
    color: var(--main);
}
.benefit-icon {
    background-color: var(--light);
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: 0 0 5px var(--main);
    width: fit-content;
    margin-bottom: 30px;
    display: flex;
    justify-self: right;
}
.benefits-content {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}
/* ======================================= end of benefits section =========================================== */

/* ========================================= enroll content =============================================== */
.enroll-right-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.enroll-right-content h1{
    background-color: var(--main);
    color: var(--light);
    padding: 5px;
    font-size: 30px;
    border-radius: 100px;
}
.enroll-item-text h3{
    font-weight: bold;
    color: var(--main);
}
.enroll-item-text p{
    font-weight: bold;
    color: var(--text);
}
.enroll-left img{
    width: 100%;
}
.enroll-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
}

/* ========================================= end of enroll content =============================================== */



/* ======================================= testimonial section ========================================== */
.testimony-text {
    background-color: var(--secondary);
    text-align: center;
    box-shadow: 1px 1px 5px #ddd;
    padding: 20px;
    /* width: 100%; */
    max-width: 450px;
    display: block;
    justify-self: center;
    margin-bottom: 20px;
}
.testimony-text p span{
    /* display: block; */
    color: var(--main);
}
.review i {
    color: #fec300;
}
.team {
    display: flex;
    gap: 11px;
    justify-content: center;
    align-items:center;
}
.team-details h5{
    font-weight: bold;
    color: var(--main);
    font-size: 16px;
}
.team-details p{
    font-size: 14px;
}
.team img{
    width: 80px;
    height: 80px;
    border-radius: 100%;
    display: flex;
    justify-self: center;
}
 .testimony {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding: 1rem;
  scroll-behavior: smooth;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}

.testimony::-webkit-scrollbar {
  display: none;
}

.testimony-content {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 280px;
  background: #fff;
  padding: 1rem;
  height: fit-content;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.testimonial-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.testimonial-right img{
    width: 100%;
}
.testimony-left {
    width: 50%;
    margin-top: 50px;
}
.student-testimony-left {
    width: 90%;
    margin-top: 50px;
}
.testimony-right {
    width: 50%;
}
      .testify {
        display: flex;
        animation: scroll 40s linear infinite;
        width: max-content;
        gap: 30px;
      }
      
      @keyframes scroll {
        0% {
          transform: translateX(0%);
        }
        100% {
          transform: translateX(-100%);
        }
      }
/* ======================================= end of testimonial section ========================================== */

/* ====================================== footer section ======================================= */
.footer-content{
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    padding: 50px 0;
}
.all-footer{
    border-top: 1px solid #ccc;
    background-color: var(--light);
}
.footer-center h4{
    font-weight: bold;
    color: var(--text);
     margin-bottom: 20px;
}
.footer-center a{
    display: block;
    color: var(--text);
    margin-bottom: 10px;
}
.footer-right h4{
    font-weight: bold;
    color: var(--text);
    margin-bottom: 20px;
}
.footer-right p{
    color: var(--text);
}
.footer-right a{
    color: var(--text);
}
.footer-right a:hover{
    border-bottom: 2px solid var(--text);
}
.footer-left p span{
    display: block;
    color: var(--text);
}
.footer-right p span{
    display: block;
}
.copy-right a{
    color: var(--text);
}
.copy-right {
    display: flex;
    align-items: center;
    gap: 20px;
}
.copy-right span{
    color: #ccc;
}
.all-copy-right{
    display: flex;
    align-items:flex-start;
    justify-content: space-around;
    padding: 10px 0;
}
.copy-left p{
    color: var(--text);
}
.copy-left span {
    color: var(--main);
    font-weight: bold;
}
.social {
    display: flex;
    align-items: center;
    gap: 20px;
}
.social i{
    font-size: 1.5rem;
}
.social a:hover {
    border: unset;
}
/* ====================================== end of footer section ======================================= */

/* ======================================== about section =========================================== */
.all-about {
    padding: 50px 0;
}
.about-content {
    display: flex;
    align-items: flex-start;
    gap: 50px;
}
.about-left {
    width: 50%;
}
.about-left img{
    width: 100%;
    height: auto;
}
.about-right {
    width: 50%;
}
.about-right h1 {
    font-size: 50px;
    font-weight: bold;
    color: var(--main);
    margin-bottom: 20px;
    text-align: center;
}
.about-right p{
    color: var(--text);
    font-size: 18px;
}
.more-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: var(--light);
    padding: 10px;
    border-radius: 5px;
    transition: 2s;
    cursor: pointer;
}
.more-item:hover {
    box-shadow: 0 0 20px #9d9bf4;
}
.more-item i{
    color: var(--main);
    padding: 16px;
    border-radius: 100px;
    background-color: #faecf1;
    font-size: 1.5rem;
}
.more-item-1 {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: var(--light);
    padding: 10px;
    border-radius: 5px;
    transition: 2s;
    cursor: pointer;
}
.more-item-1:hover {
    box-shadow: 0 0 20px #9d9bf4;
}
.more-item-1 i{
    color: var(--main);
    padding: 16px;
    border-radius: 100px;
    background-color: #e4e9fd;
    font-size: 1.4rem;
}
.about-background{
    background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(../image/about-back.jpg) no-repeat center center/cover;
    padding: 100px 0 ;
    text-align: center;
}
.about-background h1{
    color: var(--main);
    font-weight: bold;
    font-size: 70px;
}
.about-background p span{
    color: var(--light);
    font-size: 20px;
    display: block;
    font-weight: bold;
}
.mission-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}
.course-back-content a{
    color: var(--main);
    font-weight: bold;
}
.about-back-content span{
    color: var(--text);
}
/* ======================================== end of about section =========================================== */


/*===================================== partner section ==============================*/

.partner{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    align-items: center;
    justify-items: center;
}
.trust p{
    font-size: 19px;
    font-weight: bold;
    text-align: center;
    color: var(--text);
}
.all-partner{
    padding: 10px 0;
}
.partner-logo{
    display: none;
}
.partner-1 {
    display: none;
}
/*=================================== end of partner section ====================================*/

/* =========================================== form section ======================================= */
.all-payment-content {
        display: flex;
        align-items: flex-start;
    }
    .all-payment-left {
        width: 50%;
    }
    .all-payment-left img {
        display: flex;
        justify-self: center;
        height: 100vh;
        width:100%;

    }
    .all-payment-right {
        width: 50%;
        background:rgb(251, 250, 250);
        padding: 40px 0;
        height: 100vh;
        overflow-y:scroll;
    }
    .all-payment-right h5{
        text-align: center;
        margin-bottom: 5px;
    }
    .outer-line{
        width: 100%;
        height: 8px;
        background-color:#eee;
        border-radius: 100px;
    }
    .inner-line{
        width: 80%;
        height: 8px;
        background:var(--btn);
        border-radius: 100px 0 0 100px;
    }
    .all-payment-right-content {
        margin: 0 90px;
    }
    .payment-input input{
        width: 100%;
        border: none;
        border: 1px solid #ccc;
        border-radius: 8px;
        background: transparent;
        outline: none;
        margin-bottom: 30px;
    }
    .payment-input select{
        width: 100%;
        border: none;
        border: 1px solid #ccc;
        border-radius: 8px;
        background: transparent;
        outline: none;
        cursor: pointer;
        margin-bottom: 20px;
    }
    .pay-next-cta p {
        display: flex;
        align-items: baseline;
        gap: 3px;
        justify-content: center;
        font-size: 16px;
        color: #aaa;
    }
    .pay-cancel-cta {
        display: flex;
        align-items: center;
        gap: 20px;
    }
    .pay-input {
        display: flex;
        align-items:flex-start;
        gap: 10px;
        line-height:1px;
    }
    .pay-input h5{
        font-size: 15px;
    }
    .pay-input input {
        width: 20px;
        height: 20px;
        accent-color: var(--main);
    }
    .form-step {
      display: none;
    }

    .form-step.active {
      display: block;
    }
    .outer-line2{
        width: 100%;
        height: 8px;
        background-color:#eee;
        border-radius: 100px;
    }
    .inner-line2{
        width: 90%;
        height: 8px;
        background:var(--btn);
        border-radius: 100px 0 0 100px;
    }
    .form-logo img{
        width: 130px;
        display: flex;
        justify-self: center;
    }
    .form-logo {
        margin-bottom: 30px;
    }
/* =========================================== end of form section ======================================= */

/* =========================================== explore section ======================================= */
.all-explore{
    background:var(--main);
    padding:50px 50px 40px 50px;
}
.explore-content {
    display:flex;
    align-items:center;
    gap: 50px;
    justify-content: center;
}
.explore-item img{
    width: 90px;
    border-radius:100%;
}
.explore-item {
    display: flex;
    align-items: center;
    gap:20px;
    perspective: 1000px;
    cursor: pointer;
}
.explore-text p span{
    display:block;
    font-size:20px;
    color:var(--light);
}
.straight-line {
    height:90px;
    width:1px;
    background-color:#ccc;
}
.explore-image {
    background-color: var(--light);
    border-radius: 100%;
    padding: 10px;
    transition: transform 2s;
    transform-style: preserve-3d;
}
.explore-item:hover .explore-image {
  transform: rotateY(180deg);
}
.details {
    color: #1c1b1b;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}
/* =========================================== end of explore section ======================================= */

/* ============================================== description section ===================================== */
.description-content {
    display: flex;
    gap: 50px;
}
.description-left{
    width: 67%;
    background-color:var(--light);
    padding: 30px;
    border-radius: 6px;
    position: relative;
    bottom: 25px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.description-right{
    width: 33%;
    background-color:var(--light);
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 6px;
    position: relative;
    bottom: 25px;
    height: fit-content;
}
.describe-left-head h1{
    color: var(--main);
    font-weight: bold;
    font-size: 42px;
}
.describe-left-review-1 {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fec300;
}
.describe-left-review {
    display: flex;
    align-items: baseline;
    gap: 20px;
}
.describe-left-review p{
    color: var(--text);
}
.description h4{
    font-weight: bold;
}
.description p{
    color: var(--text);
}
.check i{
    color: var(--main);
    /* font-size: 0.5rem; */
}
.check {
    background-color: #ececff;
    border-radius: 100%;
    padding: 2px 5px 1px 5px;
    width: fit-content;
    height: fit-content;
}
.learn-content {
    display: flex;
    align-items:baseline;
    gap: 10px;
}
.require-item {
    display: flex;
    align-items:baseline;
    gap: 10px;
    padding-left: 20px;
}
.learn{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    padding: 20px;
    gap: 10px;
    border-radius: 10px;
}
.feedback-left h1{
    font-size: 70px;
    /* font-weight: bold; */
}
.student-feedback {
    border: 1px solid #ccc;
    padding: 30px;
    border-radius: 8px;
}
.feedback-left {
    border: 1px solid #ccc;
    padding: 10px 30px;
    width: fit-content;
}
.feedback-left p{
    color: var(--text);
}
.feedback-content {
    display: flex;
    align-items: center;
    gap: 30px;
}
.rate{
    display: flex;
    align-items:center;
    gap: 13px;
    margin-bottom: 10px;
}
.outer-bar {
    width: 100%;
    height: 15px;
    background-color:#edebeb;
}
.inner-bar-1 {
    width: 90%;
    height: 15px;
    background-color:#00db22;
    animation: fillBar-1 2s forwards;
}
@keyframes fillBar-1 {
  from {
    width: 0%;
  }
  to {
    width: 90%;
  }
}
@keyframes fillBar-2 {
  from {
    width: 0%;
  }
  to {
    width: 75%;
  }
}
@keyframes fillBar-3 {
  from {
    width: 0%;
  }
  to {
    width: 50%;
  }
}
@keyframes fillBar-4 {
  from {
    width: 0%;
  }
  to {
    width: 10%;
  }
}
@keyframes fillBar-5 {
  from {
    width: 0%;
  }
  to {
    width: 30%;
  }
}
.inner-bar-2 {
    width: 75%;
    height: 15px;
    background-color:#ffb800;
    animation: fillBar-2 2s forwards;
}
.inner-bar-3 {
    width: 50%;
    height: 15px;
    background-color:#0dcaf0;
    animation: fillBar-3 2s forwards;
}
.inner-bar-4 {
    width: 10%;
    height: 15px;
    background-color:red;
    animation: fillBar-4 2s forwards;
}
.inner-bar-5 {
    width: 30%;
    height: 15px;
    background-color:#ffb800;
    animation: fillBar-5 2s forwards;
}
.feedback-right {
    width: 100%;
}
.topic {
    display: flex;
    align-items: baseline;
    gap: 15px;
}
.topic i{
    color: var(--main);
}
.description-right-content{
    color: var(--text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    margin-bottom: 25px;
}

/* ============================================== end of description section ===================================== */


/* ================================== space section ====================================== */
.space-left-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.space-2 img{
    border-radius:15px;
    padding: 5px;
    margin-bottom: 20px;
    width: 100%;
}
.space-2 {
    position: absolute;
    display: block;
    animation: moveY 40s linear infinite;
    left: 200px;
    top: 100px;
}
@keyframes moveY {
    0% {
        transform: translateY(0%);
    }
    20% {
        transform: translateY(-20%);
    }
    30% {
        transform: translateY(30%);
    }
}
.space-1 {
    position: relative;
}
.space-1 img{
    border-radius:15px;
    padding: 5px;
    width: 70%;
}
.space-content {
    display: flex;
    align-items: flex-start;
}
.space-left {
    width: 50%;
}
.space-right {
    width: 50%;
    padding: 20px;
}
.space-right h1 {
    color: var(--main);
    font-weight: bold;
}
.space-right p{
    color: var(--text);
    font-size: 15px;
}
.space-right h4{
    color: var(--text);
}
.plan-card {
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 20px;
    box-shadow:2px 2px var(--main);
}
.plan-intro h4 {
    margin-bottom: 20px;
    /* font-size: 30px; */
    font-weight: bold;
    color: #555;
}
.plan-intro i{
    color: var(--main);
    padding-top: 20px;
    font-size: 2rem;
    margin-bottom: 20px;
}
.plan-card ol{
    margin-bottom: 20px;
}
.line {
    height: 1px;
    width: 100%;
    background-color: #ccc;
}
.subscription h5{
    margin: 20px 0 10px 0;
    color: #555;
}
.plan-card li{
    line-height: 30px;
    color: #555;
}
.plan-content {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
}
.opening p{
    color: #555;
    font-size: 14px;
}
.opening h4{
    color: #555;
    font-size: 20px;
    margin-bottom: 10px;
}
.packages {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.opening p{
    display: flex;
    align-items: center;
    gap: 10px;
}
.opening i{
    font-size: 0.8rem;
}
.plan-intro-items {
    display: flex;
    align-items: center;
    gap: 7px;
}
.plan-intro-items i{
    color: var(--main);
    font-size: 1.6rem;
}
.plan-intro-items label{
    color: var(--text);
}
.plan-intro-details {
    margin-bottom: 30px;
}
/* ================================== end of space section ====================================== */


/* ============================== pay section =========================== */
.pay-content {
    display: flex;
    align-items: flex-start;
}
.pay-left {
    width: 40%;
    padding: 30px;
    background-color: #f7f7f7;
    height: 100vh;
}
.visit-details label{
    display: block;
    font-size: 13px;
    color: #555;
    margin-bottom: 6px;
}
.visit-details input, .visit-details select{
    border: 1px solid #ccc;
    color: #555;
    outline: none;
    padding: 15px;
    width: 100%;
    background-color: transparent;
    border-radius: 6px;
    margin-bottom: 20px;
}
.pay-right {
    width: 60%;
}
.plan-details-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.plan-details-item label {
    font-size: 14px;
}
.plan-details-item input{
    width: 17px;
    height: 17px;
    accent-color: var(--main);
    background-color: transparent;
}
.pay-amount p{
    color: #555;
    font-size: 14px;
    margin-bottom: 15px;
}
.pay-right img{
    width: 100%;
    height: 100vh;
}
.space-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ============================== end of pay section =========================== */

/* ================================= review section ================================= */
.review-img h1{
    color: var(--light);
    /* font-weight: bold; */
    padding: 10px;
    font-size: 30px;
    border-radius: 50%;
    background: var(--btn);
    width: fit-content;
}
.review-content {
    border: 1px solid #e0e0e0;
    padding: 40px;
    border-radius: 10px;
    margin: 50px auto;
    width: 80%;
}
.review-profile {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.review-title {
    color: var(--text);
}
.review-title h4 {
    font-weight: bold;
    font-size: 20px;
}
.register-group {
    position: relative;
    width: 100%;
}
.register-group label {
    position: absolute;
    top: 16px;
    left: 15px;
    font-size: 14px;
    color: var(--text);
    transition: all 0.2s ease-in-out;
    pointer-events: none;
}
.register-group input {
    border: 1px solid #e0e0e0;
    outline: none;
    background-color: transparent;
    color: var(--text);
    width: 100%;
    font-size: 14px;
    padding: 15px;
    border-radius: 5px;
}
.register-group input:focus + label,
.register-group input:not(:placeholder-shown) + label {
    top: -9px;
    font-size: 12px;
    background-color:var(--light);
    padding: 0 5px;
}
.all-input {
    display: flex;
    align-items: center;
    gap: 10px;
}
.form-text textarea{
    width: 100%;
    outline: none;
    border: 1px solid #e0e0e0;
    padding: 15px;
    background-color: transparent;
    border-radius: 5px;
    height: 150px;
    resize: none;
    color: var(--text);
}
.review-description h5 {
    color: var(--text);
    margin-bottom: 16px;
}
/* ================================= end of review section ================================= */