.wrapper {padding-top: 60px !important;}

.navbar {background: #FFFFFF; box-shadow: 0 1px 40px rgba(0,0,0,0.4);}
.navbar ul li a {
    background-color: transparent;
    color: #212529 !important;
}
.navbar div a i {color: #212529 !important;}

.header_section {
    background: url(../images/plan/plan-back.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 600px !important;
    padding-top: 50px;

}

.header_content {
    position: relative;
    z-index: 1;
    margin: 8% 0;
} 
.header_section .header_content h1 span {
    /*font-family: 'Baloo 2', sans-serif !important;
    font-size: 56px !important;*/
    font-weight: 600;
    color: #27348B;
    /*display: block;
    background: linear-gradient(90deg, #28B4EF, #001668);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 8px transparent;*/
}
.header_section .header_content p {
    font-size: 16px !important;
}

.circle-background::before{
    content: '';
    position: absolute;
    background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
    width: 350px; 
    height: 350px;
    border-radius: 50%; 
}
.header_content-img  img{
    position: relative;
}

.border-container {
    position: relative;
}

.border-line {
    border: none; 
}

.border-container::before {
    content: "";
    display: block;
    width: 100px; 
    height: 7px; 
    background-color: rgb(54, 54, 187); 
    position: absolute;
    top:-6px; 
    left:50px; 
    transform: translateX(-50%); 
}
hr:not([size]) {
    height: 1px;
    width: 100%;
}
.plans-section h2 {font-size: 42px; font-weight: 300 !important;}
.plans-section h2 b {
    font-weight: 700 !important;
    background: linear-gradient(180deg, #28B4EF, #001668);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.plans-section h3 {
    font-size: 24px;
    margin: 0;
}
.plans-section h5 {
    font-size: 35px;
    margin: 0;
}
.plans-section p {
    font-weight: 400;
}
.plans-section .card-body span {
    font-size: 15px;
    margin: 0;  
    color: rgb(163, 160, 156);
}

hr {
    border: none;
    border-top: 1px solid #504f4f;
    margin: 10px 0;
}
.plans-section .card-body:hover{
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
   
}
.card-hover:hover .buy-now {
    display: block;
}
.card-hover {
    border-bottom: 10px solid transparent; /* Set the initial border color to transparent */
    transition: border-color 0.3s; /* Add a transition for smooth color change */
}

.card-hover:hover {
    border-color: rgb(89, 205, 241); /* Change the border color to blue when hovered */
    transition: all 0.3s ease-in-out;
}

.buy-now {
    display: none;
    color: #00c6fb;
    font-size: 20px;
    font-weight: 700 !important;
}

.card-body.p-2 {
    height: 308px;
}
.card-body .text-center{
    padding: 40px 0;
}
.con-btn {
    background-color:#ffcc00;
    padding: 10px 20px; 
    border-radius: 50px; 
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    text-decoration: none; 
}

.con-btn:hover {
    background-color: #ffbc00; /* Change the background color on hover */
}

@media screen and (max-width: 7000px) {
    .circle-background::before {right: 37%; margin-top: 6%;}
}
@media screen and (max-width: 5000px) {
    .circle-background::before {right: 32%; margin-top: 8%;}
}
@media screen and (max-width: 3000px) {
    .header_section {height: 2500px;}
    .circle-background::before {right: 24%; margin-top: 12%;}
}
@media screen and (max-width: 2000px) {
    .header_section {height: 1780px;}
    .circle-background::before {right: 15%; margin-top: 16%;}
}
@media screen and (max-width: 1800px) {
    .header_section {height: 1600px;}
    .circle-background::before {right: 11%; margin-top: 18%;}
}
@media screen and (max-width: 1600px) {
    .header_section {height: 1500px;}
    .circle-background::before {margin-top: 19%; right: 9%;}
}
@media screen and (max-width: 1440px) {
    .header_section {height: 1300px;}
    .circle-background::before {margin-top: 22%; right: 5%;}
}
@media screen and (max-width: 1380px) {
    .header_section {height: 1200px;}
    .circle-background::before {margin-top: 18%; right: 4%;}
}
@media screen and (max-width: 1024px) {
    .header_section {background-size: cover; height: auto !important;}
    .header_section .header_content h1 span {font-size: 48px !important;}
    .header_section .header_content {margin: 12% 0;}
    .plans-section h3 {font-size: 25px;}
    .circle-background::before {margin-top: 24%; right: 2%;}
}
@media screen and (max-width: 991px) {
    .header_section .header_content h1 span {font-size: 38px !important;}
    .plans-section .col {flex: 0 0 auto; width: 33%;}
    .circle-background::before {width: 250px; height: 250px; margin-top: 19%; right: 9%;}
    .plans-section .col {margin-bottom: 30px;}
}
@media screen and (max-width: 850px) {
    .circle-background::before {margin-top: 22%; right: 5%;}
}
@media screen and (max-width: 768px) {
    .circle-background::before {margin-top: 24%; right: 2%;}
}
@media screen and (max-width: 767px) {
    .plans-section .col {flex: 0 0 auto; width: 50%;}
    .header_section .header_content h1 span {font-size: 28px !important;}
    .header_section .header_content p {font-size: 15px !important;}
    .circle-background::before {width: 200px; height: 200px; margin-top: 17%; right: 12%;}
    .header_section .header_content {margin: 15px 0;}
}
@media screen and (max-width: 670px) {
    .circle-background::before {
        width: 180px;
        height: 180px;
        margin-top: 20%;
        right: 10%;
    }
}
@media screen and (max-width: 550px) {
    .circle-background::before {
        margin-top: 60%;
        right: 5%;
        width: 320px;
        height: 320px;
    }
}
@media screen and (max-width: 480px) {
    .header_section .header_content h1 span {font-size: 45px !important;}
    .plans-section .col {width: 100%;}
    .circle-background::before {
        margin-top: 58%;
        width: 270px;
        height: 270px;
    }
}
@media screen and (max-width: 400px) {
    .header_section .header_content h1 span {font-size: 36px !important;}
    .circle-background::before {
        margin-top: 50%;
        width: 245px;
        height: 245px;
        right: 0;
    }
}
@media screen and (max-width: 380px) {
    .circle-background::before {margin-top: 52%;}
}
@media screen and (max-width: 300px) {
    .header_section .header_content h1 span {font-size: 28px !important;}
    .circle-background::before {width: 200px; height: 200px;}
}