@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
    position: relative;
    background: #F3F3F3 !important;
}

/* section {
    margin: 4rem 0;
} */

.max-content {
    max-width: 1150px;
    margin: 0 auto;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
li {
    list-style-type: none;
}

.pl-1 {
    padding-left: 0.5rem;
}

.pl-2 {
    padding-left: 1rem;
}

.pr-1 {
    padding-right: 0.5rem;
}

.pr-2 {
    padding-right: 1rem;
}

.ml-1 {
    margin-left: 0.5rem;
}

.ml-2 {
    margin-left: 1rem;
}

.mr-1 {
    margin-right: 0.5rem;
}

.mr-2 {
    margin-right: 1rem;
}

p {
    line-height: 1.5rem;
}

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    animation: smoothScroll 1s forwards;
}
@keyframes smoothScroll {
    0% {
        transform: translateY(-40px);
    }
    100% {
        transform: translateY(0px);
    }
}
.read-more{
    color: #51B747 !important;
    font-size: 1.05rem !important;
    transition: 0.3s ease-in;
}
.read-more:hover i{
  margin-left: 0.4rem;
    transition: 0.3s;
}
.read-more i{
    margin-left: 0;
    transition: 0.3s ;
}
.btn{
    padding: 0.7rem 1.5rem;
}
.btn-primary {
    background: #51B747;
    color: #ffffff !important;
    font-size: 1rem;
    font-weight: 500;
    border: 1px solid #51B747;

}

.btn-primary-outline {
    background: transparent;
    color: #51B747;
    font-size: 1rem;
    font-weight: 500;
    border: 1px solid #51B747;
}

.btn-primary-outline:hover {
    background: #21409A;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    border: 1px solid #21409A;
}

.btn-secondary {
    background: #21409A;
    color: #FFF;
    font-size: 1rem;
    font-weight: 500;
    border: 1px solid #21409A;
    border-radius: 5px;
}
.btn-secondary:hover {
    background:  transparent;
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 500;
    border: 1px solid  #21409A;
}
.admission-pic{
    font-size: 0.85rem !important;
    width: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 150px;
    padding: 2rem;
    cursor: pointer;
    border: 1px solid #6a6868;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* header */
header{
    background: transparent;
    height: 100%;
}
.header-top {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #51B747;
    padding: 1rem;
    flex-wrap: wrap;
}
.header-top span, .header-top a{
    font-size: 0.9rem;
}
.header-top a.btn-secondary:hover{
    font-size: 0.9rem;
    background:  #21409A;
}
.header-info ul li {
    margin: 1rem 1rem 0 0;
    font-size: 0.8rem;
    font-weight: 300;
}

#drop-down{
    position: relative;
}

.dropdown {
    padding: 0.5rem;
    background: #fff;
    width:180px;
     display: none;
    position: absolute;
    top: 3rem;
    left: 0;
    color: #000;
}
#submenu{
    padding: 0.5rem;
    background: #fff;
    display: none;
    position: absolute;
    top: 0.4rem;
    left: 100%;
    color: #000;
    width:190px;
}

.dropdown li{
    padding:  0.5rem 1rem;
}
#submenu li{
    padding:  0.5rem 1rem;
}
.drop-menu,.sub-menu{
    display: flex;
    align-items: center;
    justify-content: left;
}


.drop-menu .active-border,.sub-menu .active-border, .gpa-dropdown-content a .active-border{
    width: 0px;
    position: relative;
    transition: 0.3s ease-out;
}

.drop-menu:hover .active-border,.sub-menu:hover .active-border,.gpa-dropdown-content a:hover .active-border {
  /*padding: 3rem;*/
    /*transition: 2s;*/
    width: 12px;
}
.drop-menu:hover,.sub-menu:hover{
    /*transform: translateX(15px);*/
    /* left: 0.5rem; */
    transition: 0.3s;
    display: flex;
}
.drop-menu:hover::after .drop-menu:hover,.drop-menu:hover::before,.sub-menu:hover,.sub-menu:hover::after ,.sub-menu:hover::before {
    /*transform: translateX(150px);*/
    /* left: 0.5rem; */
    transition: 0.3s;
}

.bs-stepper .step-trigger{
    font-size: 0.9rem !important;
}
.bs-stepper .line{
    background-color: #716d6d !important;
}
  /* Dropdown container */
  .gpa-dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown link */
.gpa-dropdown-link {
    display: inline-block;
}

/* Dropdown content */
.gpa-dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    min-width: 200px;
    z-index: 1026 !important;
}

/* Dropdown content items */
.gpa-dropdown-content a {
    text-decoration: none;
    color: #333;
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;

}

.gpa-dropdown-content a:hover {
    background-color: #f0f0f0;

}

/* Show dropdown content on hover */
.gpa-dropdown:hover .gpa-dropdown-content {
    display: block;
}
/*.nav-item:hover #dropdown {*/
/*    opacity: 1;*/
/*    display: block;*/
/*    !* flex-direction: column; *!*/
/*}*/

.navbar {
    background: #0d1b42;
}

.navbar-nav .nav-item .nav-link {
    color: #ffffff;
    font-size: 15px;
    font-weight: 300;
    position: relative;
    text-align: center;
    margin: 0 0 0 1rem;
}

.navbar-nav .nav-item .nav-link.active::after, .navbar-nav .nav-item .nav-link:hover::after {
    position: absolute;
    border-bottom: 2px solid #fff;
    bottom: 0;
    content: '';
    width: 100%;
    left: 0;
}

/* footer */
footer {
    background: #122660;
}
.footer h6{
    position: relative;
}
.footer h6::after{
    border-bottom: 2px solid #FFFFFF;
    width: 40px;
    position: absolute;
    bottom: -0.4rem;
    left: 0;
    content: '';
}

footer span {
    font-size: 0.8rem;
    font-weight: 400;
}

footer ul li {
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 0;
}

footer p {
    font-size: 0.7rem;
    font-weight: 400;
}
.footer h6{
    font-size: 1rem;
}
.footer .fs-6{
    font-size: 0.9rem;
}
a {
    color: inherit;
}

/* Hero-sec */


#hero-sec-01 {
    background: url(../img/home-slider/hero-5.jpg) no-repeat center;
    width: 100%;
    background-size: cover;
    height: 50vh;
    display: flex;
    align-items: center;
    position: relative;
    z-index: -1;
}
#hero-sec-01::after{
    position: absolute;
    content: '';
    background: rgba(45, 45, 45, 0.8);
    width: 100%;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    z-index: -1;
}
#hero-sec-01 h1 {
    align-items: center;
    font-size: 3.4rem;
    color: #ffffff;
    z-index: 2;
}

#hero-sec h1 {
    font-size: 3.4rem;
    color: #ffffff;
}

/* About */
#about p {
    color: #606060;
    font-size: 0.9rem;
}

#about a {
    color: #606060;
    font-size: 1.04rem;
}

a:hover {
    color: #51B747;
}

#news a h5 {
    /* color: #000000; */
    font-weight: 500;
    font-size: 1.1rem;
}

#news h6 , #staff-sec h6{
    /* color: #000000; */
    font-weight: 500;
    font-size: 1.1rem;
}

#news p, #student-club p, #student-club ul li, #message p,#staff-sec p{
    font-weight: 500;
    font-size: 0.9rem;
    color: #606060;
    line-height: 1.3rem;
    margin: 4px 0;
}
#staff-sec img{
    height: 340px;
    object-fit: cover;
    object-position: top;
}
#student-club span, #message span {
    font-weight: 500;
    font-size: 0.834rem;
}

#news span ,#staff-sec span{
    font-weight: 600;
    font-size: 0.9rem;
    color: #606060;
    margin-top: 1rem;
}

#why-us p {
    font-size: 0.9rem;
    color: #606060;
}

#testimonials p {
    font-size: 0.9rem;
    font-weight: 400;
    color: rgba(210, 210, 210, 1);
}

.side-cards {
    border-radius: 4px;
    background:  #FAFAFA;
    box-shadow: 0px 2px 5px 5px rgba(157, 177, 191, 0.09);
}

.cards {
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0px 2px 5px 5px rgba(157, 177, 191, 0.35);
}

#why-us .why-us-last {
    padding: 0 10rem 0 2rem;
}

#why-us .why-us-first {
    padding: 0 2rem 0 10rem;
}

/* Courses */
h3 {
    position: relative;
    font-size: 2rem;
}

h3::after {
    position: absolute;
    bottom: -0.8rem;
    width: 90px;
    left: 0;
    content: '';
    border: 2px solid green;
}

#courses .card, #missions .card {
    border-radius: 4px;
    border: 1px solid #D2D2D2;
    background: #FFF;
    display: flex;
    height: 100%;
}

.members .member-pic, .members img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

#courses h4, #missions h4 {
    color: #21409A;
    font-weight: 600;
}

#courses p, #missions p {
    color: #606060;
    font-size: 0.9rem;
    padding: 0.6rem 0;
}

#partners .partners-img {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-test img {
    display: flex;
    align-items: center;
}

#counter h4 {
    color: #FFF;
    font-size: 1.8rem;
}

#counter h2 {
    font-size: 2.4rem;
    font-weight: 600;
    color: #51B747;
}

#counter span {
    color: #FFF;
    font-size: 1.2rem;
}

.slick-center {
    display: block;
    max-width: 100% !important;
    max-height: 100% !important;
    opacity: 1;
}
#hero-sec img{
    width: 100%;
    -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
    transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
    -webkit-transform: scale(1.3);/*-webkit-transform: scale(1.2);*/
    transform: scale(1.3);/*transform: scale(1.2)*/
}
.border-dashed {
    border: 1px dashed gray;
}
.slider-nav img{
    height: 320px;
    object-fit: cover;
    cursor: grab;
    object-position: top;
}
.bod img{
    height: 380px;
    object-fit: cover;
}
.about-img img{
    height: 220px;
    object-fit: cover;
}
.slider-nav-thumbnails .slick-slide {
    opacity: .6;
}

.slider-nav-thumbnails .slick-center {
    opacity: 1;
}
.newsletter-img{
    clip-path: polygon(77% 18%, 100% 50%, 77% 84%, 0 84%, 0 52%, 0 17%);
    position: relative;
    z-index: 0;
}
.newsletter-img img{
    height: 500px;
}
.newsletter-img::after{
    position: absolute;
    content: '';
    background: rgba(45, 45, 45, 0.6);
    width: 100%;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    z-index: 1;
}
#results table th, #tabs-content table th {
    border-bottom: 1px solid gray;
}

#results table tr td, #results table tr th, #tabs-content table tr th, #tabs-content table tr td {
    padding: 0.5rem;
}

#results table tr td, #tabs-content table tr td {
    font-weight: 400;
    font-size: 1rem;
    color: #606060;
}

#results table tr th, #tabs-content table tr th {
    font-weight: 600;
    font-size: 1.1rem;
}

ul#tabs-nav, ul#tabs-nav-01 {
    display: flex;
    flex-wrap: wrap;
    font-weight: bold;
    padding: 0;
    width: 100%;
}

ul#tabs-nav li, ul#tapopupbs-nav-01 li {
    padding: 0.7rem 1.5rem;
    border: 1px solid #21409A;
    color: #000000;
    font-size: 15px;
}

ul#tabs-nav li a:hover, ul#tabs-nav-01 li a:hover,
ul#tabs-nav li:hover,
ul#tabs-nav li.active, ul#tabs-nav-01 li:hover, ul#tabs-nav-01 li.active {
    background-color: #21409A;
    color: #FFF !important;
}

#tabs-nav li a {
    text-decoration: none;
}

#alumni h4 {
    font-weight: 400;
    font-size: 1.2rem;
}

#alumni span {
    font-weight: 400;
    font-size: 1rem;
    color: #606060;
}

.img-about {
    transform: scale(1);
}

.img-about img {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.mission-cards {
    border: 1px solid #D2D2D2;
    background: #FAFAFA;
    display: flex;
    height: 100%;
    flex-direction: column;
}

.mission-cards h6 {
    font-size: 1.2rem;
    color: #21409A;
    font-weight: 600;
}

.center .slick-center {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    transform: scale(1.5);
}

.slider-for-cards {
    background: #fff;
    margin: 2rem 0 4rem;
    padding: 3rem;
    position: relative;
}

.action {
    display: block;
    margin: 100px auto;
    width: 100%;
    text-align: center;
}

.action a {
    display: inline-block;
    padding: 5px 10px;
    background: #f30;
    color: #fff;
    text-decoration: none;
}

.action a:hover {
    background: #000;
}

.slider-nav .slick-slide.slick-current {
    transform: scale(1.2);
}

#courses .row.courses-details {
    padding: 10rem 0 0;
}
.courses-details h4{
    text-transform: uppercase;
}
#courses .img-course-1 {
    object-fit: cover;
    position: absolute;
    top: -7rem;
    z-index: 2;
    width: 680px;
}

#courses .img-course-2 {
    position: absolute;
    top: -7rem;
    z-index: 2;
    width: 600px;
    left: -7.8rem;
}

.progress-bar {
    display: flex;
    flex-direction: row;
}

.container .form-outer form {
    display: flex;
    width: calc(100% * 6);
}

.form-outer form .page {
    width: calc(100% / 6);
    height: 100%;
    transition: margin-left 0.3s ease-in-out;
}

.container .form-outer {
    width: 100%;
    overflow: hidden;
}

form .page .field input.invalid-input {
    border-color: red;
}

.file-card {
    border-radius: 5px;
}

.small-text span, .small-text p, .small-text ul li, .small-text figcaption {
    font-size: 14px;
    color: #606060;
}

.file-card .edit {
    color: rgba(33, 64, 154, 1);
    font-size: 12px;
    text-decoration: underline;
}

.progress-bar .bullet {
    content: '';
    width: 20px;
    height: 20px;
    background: transparent;
    border-radius: 50%;
    border: 1px solid rgba(33, 64, 154, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.progress-bar .bullet div {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(33, 64, 154, 0.7);
}

.progress-bar .bullet.active div {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: rgba(33, 64, 154, 1);
}

.progress-bar .bullet.success {
    border: 1px solid rgba(81, 183, 71, 1);
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.progress-bar .bullet.success div {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(81, 183, 71, 1);
}

.progress-bar .bullet div .check {
    display: none;
    font-size: 0.8rem;
    padding: 0 0 0.5rem 0;
}

.progress-bar .bullet.success div .check {
    display: block;
    text-align: center;
}

.container .progress-bar .step {
    text-align: left;
    width: 100%;
    position: relative;
}

.container .progress-bar .step p {
    font-weight: 500;
    font-size: 14px;
    color: #606060;
    margin-top: 8px;
}

.progress-bar .step .bullet span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.progress-bar .step .bullet.active span {
    display: none;
}

.progress-bar .step .bullet:before,
.progress-bar .step .bullet:after {
    position: absolute;
    content: "";
    bottom: 11px;
    left: 2rem;
    height: 1.2px;
    width: 130px;
    background: #262626;
}

.progress-bar .step:last-child .bullet:before,
.progress-bar .step:last-child .bullet:after {
    display: none;
}

.progress-bar .step .check {
    position: absolute;
    left: 50%;
    top: 70%;
    font-size: 15px;
    transform: translate(-50%, -50%);
    display: none;
}

.progress-bar .step .check {
    display: block;
    color: #fff;
}

.progress-bar .step p.active {
    display: none;
    transition: 0.2s linear;
}

.form-sec, .success-form {
    background: #fff;
    border-radius: 5px;
    padding: 4rem;
}

.success-form {
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#success .success-form h5 {
    padding: 2rem 0 0;
    font-size: 1rem;
}

#success .success-form p {
    font-size: 0.9rem;
}

.page h5 {
    font-size: 1rem;
}

.page label {
    font-size: 1rem;
    color: #606060;
}

.image_404 {
    width: 40%;
}

/*.card-club {*/
/*    width: 100%;*/
/*    height: 380px;*/
/*    border-radius: 10px;*/
/*    overflow: hidden;*/
/*    cursor: pointer;*/
/*    position: relative;*/
/*    color: #f0f0f0;*/
/*    box-shadow: 0 10px 30px 5px rgba(0, 0, 0, 0.2);*/
/*}*/
.card-club img {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    object-fit: cover;
    border: 8px solid #FFFFFF;
    object-position: top center;
}
.card-club h2 {
    font-size: 1.5rem !important;
    padding-top: 1rem;
}
/*.card-club p, .card-club a {*/
/*    position: absolute;*/
/*    opacity: 0;*/
/*    max-width: 80%;*/
/*    transition: opacity 0.3s ease-out;*/
/*}*/
/*.card-club p {*/
/*    font-size: 1.3rem !important;*/
/*    color: #ffffff !important;*/
/*    inset: auto auto 80px 30px;*/
/*}*/
/*.card-club a {*/
/*    inset: auto auto 40px 30px;*/
/*    color: inherit;*/
/*    text-decoration: none;*/
/*}*/
/*.card-club:hover h2 {*/

/*    inset: auto auto 120px 30px;*/
/*    transition: inset 0.3s ease-out;*/
/*}*/
/*.card-club:hover p, .card-club:hover a {*/
/*    opacity: 1;*/
/*    transition: opacity 0.5s 0.1s ease-in;*/
/*}*/
/*.card-club:hover img {*/
/*    transition: opacity 0.3s ease-in;*/
/*    opacity: 1;*/
/*}*/
@media screen and (max-width: 1399px){
    #courses .img-course-1 {
        position: absolute;
        top: -7rem;
        z-index: 2;
        width: 550px;
    }
}
@media screen and (max-width:1192px) {
    #courses .img-course-1 {
        position: absolute;
        top: -7rem;
        z-index: 2;
        width: 500px;
    }

    #courses .img-course-2 {
        position: absolute;
        top: -7rem;
        z-index: 2;
        width: 550px;
        left: -9rem;
    }

    .progress-bar .step .bullet:before,
    .progress-bar .step .bullet:after {
        position: absolute;
        content: "";
        bottom: 11px;
        left: 2rem;
        height: 1.2px;
        width: 70px;
        background: #262626;
    }

}


@media screen and (max-width:992px) {
    #courses .img-course-1 {
        position: relative;
        top: 0;
        z-index: 2;
        width: 400px;
    }

    #courses .img-course-2 {
        position: absolute;
        top: -7rem;
        z-index: 2;
        width: 520px;
        left: -8.3rem;
    }

    #why-us .why-us-last {
        padding: 0 10rem 0 2rem;
    }

    #why-us .why-us-first {
        padding: 0 1rem 0 2rem;
    }

    .progress-bar .step p {
        display: none;
    }

    .progress-bar .step .bullet::after,
    .progress-bar .step .bullet::before {
        display: none;
    }

    .progress-bar .step .bullet {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .image_404 {
        width: 100%;
    }
}
.overlay{
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.5rem;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
    cursor: pointer;
}
.popup{
    background: #FFFFFF;
    padding: 1rem;
    height: inherit;
    width: 35%;
    border-radius: 10px;
    margin:0 auto;
}
.popup img{
    height: 100%;
}
.bs-stepper-circle{
    font-size: 12px !important;
    color: #FFFFFF !important;
}
@media screen and (max-width:912px) {
    #courses .img-course-1 {
        position: absolute;
        top: -3rem;
        z-index: 2;
        width: 480px;
    }

    #courses .img-course-2 {
        position: absolute;
        top: -3rem;
        z-index: 2;
        width: 420px;
        left: -4rem;
    }

    .dropdown {
        width: 100%;
        padding: 0.5rem;
        background: transparent;
        display: none;
        position: unset;
        top: 2.1rem;
        left: 0;
        color: #fff;
    }
    #submenu{
        width: 100%;
        padding: 0.5rem;
        background: transparent;
        display: none;
        position: unset;
        top: 0;
        left: 0;
        color: #fff;
    }
    #submenu li, .dropdown li{
        font-weight: 200;
    }
}

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

    .popup{
        background: #FFFFFF;
        padding: 1rem;
        height: inherit;
        width: 320px;
        border-radius: 10px;
        margin: auto;
    }
    .overlay{
        position: fixed;
        display: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 3rem 1rem;
        background-color: rgba(0,0,0,0.5);
        z-index: 9999;
        cursor: pointer;
    }
    .progress-bar .step p {
        display: none;
    }

    .progress-bar .step .bullet::after,
    .progress-bar .step .bullet::before {
        display: none;
    }

    .progress-bar .step .bullet {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #courses .img-course-1 {
        position: relative;
        width: 100%;
        top: 0;
    }

    #courses .img-course-2 {
        position: relative;
        width: 100%;
        top: 0;
        left: 0;
        margin: 2rem 0 0;
    }

    #courses .row.courses-details {
        padding: 1rem 0 0;
    }
    .newsletter-img img{
        height: 100%;
    }
}

@media screen and (max-width:576px) {
    #hero-sec .bg{
        background-size: contain !important;
    }
    #courses .img-course-1 {
        position: relative;
        width: 100%;
        top: 0;
    }

    #courses .img-course-2 {
        position: relative;
        width: 100%;
        top: 0;
        left: 0;
        margin: 2rem 0 0;
    }

    #courses .row {
        padding: 0;
    }

    #courses .row.courses-details {
        padding: 1rem 0 0;
    }
    #why-us .why-us-last {
        padding: 1rem;
    }
    .form-sec{
        padding: 0.5rem;
    }
    .bs-stepper-label{
        display: none !important;
    }
    .bs-stepper-circle{
        font-size: 6px !important;
        color: #FFFFFF !important;
    }

}
.heart {
    padding: 0 0.3rem;
    color: #e00;
    animation: beat .25s infinite alternate;
    transform-origin: center;
}

/* Heart beat animation */
@keyframes beat{
    to { transform: scale(1.4); }
}
.hamburger div {
    width: 30px;
    height: 3px;
    background: #FFFFFF;
    margin: 5px;
    transition: all 0.3s ease;
}

.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
    transition: all 0.7s ease;
    width: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}

.accordion-button,.accordion-button:not(.collapsed){
    background-color: transparent !important;
}