*, html{
    scroll-behavior: smooth;
}
 :root {
     --primary: #4F4F4F;
     --secondary: #965BA5;
     --white: #ffffff;
     --bodycolor: #878787;
     --menucolor: #3D3D3D;
     --tabbluecolor: #5A73B8;
     --tabpurplecolor: #965BA5;
     --bodybgcolor:#242424;
     --tabgreencolor: #48B971;
     --prefooter: #FEEAEE;
     --greyy:#BFBFBF;
     --extrapcolor:#757575;
     --headingcolor: #3e3e8f;
}
 * {
     margin: 0;
     box-sizing: border-box;
     padding: 0;
}
 @font-face {
     font-family: 'Vonique43';
     src: url(../fonts/Vonique43-2AAo.ttf) format('ttf'), url(../fonts/Vonique43-2AAo.ttf) format('truetype');
     font-weight: normal;
     font-style: normal;
}
 @font-face {
     font-family: 'Sora-Light';
     src: url(../fonts/Sora-Light.ttf) format('ttf'), url(../fonts/Sora-Light.ttf) format('truetype');
     font-weight: normal;
     font-style: normal;
}
 body {
     font-family: 'Sora-Light', sans-serif;
}
 h1, h2, h3, h4, h5, h6 {
    /*font-family: 'Vonique43', sans-serif;
    */
     font-family: 'montserrat', sans-serif;
    /*word-spacing:5px;
    */
}
 h1 {
     font-size: 5rem;
}
 h2 {
     font-size: 3rem;
}
 .heading-blue-color {
     color: var(--headingcolor);
}
.heading-white-color {
    color: var(--white);
}
/*.text-greyy {*/
/*    color: var(--greyy);*/
/*}*/
 p {
     font-size: 15px;
     color: var(--greyy);
}
 ul {
     margin: 0;
     padding: 0;
     list-style: none;
}
 .m-d-block{
    /*display: none;
    */
}
 section {
     padding-top: 100px;
     position: relative;
     z-index: 9999;
     background: #fff;
}
 img {
     max-width: 100%;
     height: auto;
}
 .btn:after {
     content: '\f061';
     position: absolute;
     opacity: 0;
     font-size: 18px;
     top: 8px;
     font-family: 'Font Awesome 6 Free';
     right: 0;
       color: var(--secondary);
     transform: rotate(-45deg);
     transition: 0.5s;
}
 .btn:hover:after {
     opacity: 1;
     transition: 0.5s;
     right: 20px;
}
 #myHeader .navbar-toggler-icon-close {
     display: none;
    /* Hide close icon by default */
     font-size: 1.25rem;
}
#myHeader button.navbar-toggler {
    border: none !important;
}
#myHeader button.navbar-toggler span.navbar-toggler-icon {
    filter: invert(1);
}
 #myHeader .navbar-toggler.open .navbar-toggler-icon {
     display: none;
    /* Hide hamburger icon when menu is open */
}
 #myHeader .navbar-toggler.open .navbar-toggler-icon-close {
     display: inline;
    /* Show close icon when menu is open */
}
 .btn:hover {
     padding-right: 40px;
     transition: 0.5s;
     background-color:transparent;
       color: var(--secondary);
     padding-left: 20px;
}
 #myHeader button.navbar-toggler:focus {
    /*border: none !important;
    */
     box-shadow: none !important;
}
 #myHeader button.navbar-toggler {
     padding: revert-layer !important;
}
 #myHeader button.navbar-toggler:after {
     display: none;
}
 .btn {
    background-color: var(--secondary);
    color: var(--white);
    transition: 0.5s;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    padding: 10px 30px;
    border: 2px solid var(--secondary) !important;
    font-weight: 600;
}
 section.stream-how {
     background-image: url(../../assets/images/Blur.png);
     background-size: contain;
     background-attachment: fixed;
     background-repeat: no-repeat;
}
 .navbar-nav .nav-link {
     color: var(--greyy) !important;
     margin-right: 35px;
}
 .navbar-nav .dropdown-menu {
     position: absolute;
     padding: 0;
     box-shadow: 0px 9px 51px 0 #0000000f;
}
 .dropdown-menu a.dropdown-item {
     padding: 15px 50px;
     border-bottom: 1px solid #0000000f;
}
 .sticky {
     position: fixed;
     top: 0;
     width: 100%;
}
 header {
     z-index: 99999;
     position: relative;
}
 #navbarNav li ul.dropdown-menu a.dropdown-item.active , #navbarNav li ul.dropdown-menu a.dropdown-item:focus{
     background-color: var(--bs-dropdown-link-hover-bg);
     color: var(--primary);
     border-left: 1px solid var(--primary);
}
 .dropdown-menu a.dropdown-item:hover {
     border-left: 1px solid var(--primary);
     color: var(--primary);
}
 .navbar-brand img {
     height: 40px;
}
 .dropdown:hover>.dropdown-menu, .dropend:hover>.dropdown-menu {
     display: block;
     margin-top: 0.125em;
     margin-left: 0.125em;
}
 ul {
     border-color: transparent ;
}
 .navbar-nav .nav-link:hover {
     color: var(--menucolor);
}


@media screen and (min-width: 769px) {
     .dropend:hover>.dropdown-menu {
         position: absolute;
         top: 0;
         left: 100%;
    }
}


 .footer-link-list li a {
     color: var(--menucolor) !important;
     font-size:15px !important;
     text-decoration: none;
}
.prefooter {
    background-color: var(--secondary);
    position: relative;
    z-index: 9999;
    background-position: center;
}
#subscribe-us .btn {
    color: var(--secondary);
    background-color: var(--white);
}
.main-benefits .container{
    opacity: 0; /* Initially hidden */
    transform: translateY(100px); /* Positioned slightly below */
    transition: all 0.6s ease; /* Smooth transition effect */
}
#lifestyle .card:hover:after {
    opacity: 0.3;
}
.main-benefits .container.active {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Moves to original position */
}

footer.footer-section {
    background-color: #EDE3F0;
    position: relative;
    z-index: 9999;
    background-image: url(../../assets/images/Footer-bg-Element.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
}
.row.last-footer {
    border-top: 1px solid #B992C3;
}
 .prefooter h4 {
     color: var(--primary);
}
/* h4.widget-title.mb-4 {*/
/*     font-size: 19px;*/
/*}*/
 .footer-link-list li {
     margin: 10px 0;
}
/*header#myHeader {*/
/*    background-color: var(--bodybgcolor);*/
/*}*/
header.sticky {
    background-color: transparent !important;
}
 .container.border {
     background-color: var(--menucolor);
     border: 1px solid var(--primary) !important;
     border-radius: 10px;
     padding: 10px 20px;
    /*margin: 20px auto 0 auto;
    */
     backdrop-filter: blur(2px);
}

 .footer-section .last-footer img{
    max-width:130px;
}
 .last-footer .alight-right {
     text-align: right;
     font-weight: 700;
}
/* faq section */
 .tabs {
     position: relative;
     min-height: 0;
     transition: all 0.5s;
}
 ul#myTab a.nav-link.active {
     border-color: var(--primary);
     transition: all 0.7s ease;
}
 ul#myTab a {
     background: transparent;
     color: var(--bodycolor);
     display: flex;
     transition: all 0.7s ease;
     align-items: start;
     gap: 20px;
     border-left: 1px solid var(--primary);
     border-radius: 0;
}
 ul#myTab {
     gap: 20px;
}
 ul#myTab a.nav-link:hover span {
     color: var(--secondary);
     transition: all 0.7s ease;
}
 ul#myTab a.nav-link.active span {
     color: var(--secondary);
     transition: all 0.7s ease;
}
 .tab {
     margin-bottom: 1px;
}
 ul#myTab a.nav-link.active .mobile-tablist {
     display: block;
     transition: all 0.7s ease;
}
 ul#myTab a.nav-link.active p {
     display: block;
     transition: all 0.7s ease;
}
 ul#myTab a.nav-link.active .mobile-tablist video {
     width: 80%;
     border-radius: 15px;
     display:none;
}
 ul#myTab a img {
     max-width: 50px;
}
 ul#myTab a p {
     display: none;
     transition: all 0.7s ease;
}
 ul#myTab a .mobile-tablist {
     display: none;
     transition: all 0.7s ease;
}
 ul#myTab span {
     font-weight: 500;
     line-height: 0;
     font-size: 20px;
}
 #myTabContent img {
    /*object-fit: scale-down;
    */
}
 .tab-toggle {
     padding: 1rem 4rem 1rem 2rem;
     position: relative;
     outline: none;
     width: 100%;
     text-align: left;
}
 div.modal.fade.show {
     z-index: 99999;
}
 @media (min-width: 576px) {
     div.modal.fade.show .modal-dialog {
         max-width: 800px;
    }
}
 div.modal.fade.show .modal-dialog {
     border-radius: 24px !important;
}
 div.modal.fade.show .modal-header {
     border: none;
     text-align: center;
     padding-left: 0;
     padding-right: 0;
     padding-top: 0;
}
 .form-control {
     margin:0px;
}
 .error {
     font-size: 12px;
     color: red;
}
 select {
     border-radius: 10px;
     border: 1px solid #dddddd;
     padding: 10px;
     -webkit-appearance: auto !important;
     appearance: auto !important;
     font-size: 14px;
     width: 100%;
}
 .modal.fade.show input.form-control {
     margin-bottom: 12px;
}

@media (max-width: 800px) {
    .mobile-margin {
    margin-bottom: 30px;
}
.col-xl-4.mobile-margin.col-md-6.col-sm-12.mt-4 {
    margin-top: 0 !important;
}
section.main-hero.pb-5 {
    background-image: url('../../assets/images/home/Section-1/Hamara-Benefits-hero-img-mobile.png');
            padding-top: 75px;
        padding-bottom: 350px !important;
        background-position: bottom;
        margin:0 !Important;
}
section#all-elements {
    background-image: url(../../assets/images/browse-save-mobile.png) !important;
            padding-top: 75px ! IMPORTANT;
        padding-bottom: 430px !important;
    }
#lifestyle .card {
    padding: 30px 10px !important;
   }
   section.main-explore {
    padding: 0 !important;
}
    #subscription ul {
        border-top: 1px solid var(--greyy);
        column-count: 1 !IMPORTANT;
        margin-top: 20px;
        border-left: 0px ! IMPORTANT;
        padding-top: 20px;
    }
#lifestyle .card-body p {
     opacity: 1 !important;
        transform: translateY(0px) !important;
    transition: transform 0.4s ease, opacity 0.4s ease;
}
section.main-benefits:after {
    background-color: #edededd4;
    content: "";
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    width: 100%;
}

     .navbar-nav .dropdown-menu {
         border:none;
         box-shadow:none;
    }
     .m-align-center{
        text-align:center !important;
    }
     .m-d-block{
        display: block !important;
    }
     .prefooter form.d-flex {
         flex-direction: column;
         gap: 15px;
    }
     .prefooter input.form-control.me-2.w-75 {
         text-align: center;
    }
     h1 {
         font-size: 2.5rem;
    }
     h2 {
         font-size: 1.9rem;
    }
     .row.last-footer, .row.last-footer .alight-right {
         text-align: center !important;
    }
     nav.navbar.navbar-expand-lg.navbar-light.sticky-top, nav.navbar.navbar-expand-lg.navbar-light.sticky-top div {
         background: var(--bodybgcolor);
         position:relative;
         width:100%;
    }
     nav.navbar.navbar-expand-lg.navbar-light.sticky-top div .container.border{
         margin: 0px auto;
    }
     .modal-content img {
         display:none;
    }
     div#myModal .modal-content img {
         display: block !important;
    }
     .prefooter .form-control {
         width: 100% !important;
         height: 50px;
    }
     .prefooter .col-1 {
         width:50%;
    }
     .prefooter .col-6, .col-5 {
         width:100%;
    }
     .prefooter {
         background-position: right;
    }
     .prefooter .row {
         gap:15px 
    }
}
 input {
     border-radius:12px !Important;
}
 .prefooter input.form-control.me-2.w-75 {
     margin-bottom: 0 !important;
}
 .content.active {
     max-height: 1000px;
    /* Enough to always clear longest content */
     opacity: 1;
}

@media screen and (min-width: 55rem) {
     .tab {
         float: left;
         clear: left;
         width: 30%;
        /* 3/10 */
    }
     .tab-toggle {
         text-align: left;
    }
     .content {
         max-height: none;
         position: absolute;
         right: 0;
         top: 0;
         width: 70%;
        /* 7/10 */
         opacity: 0;
         padding: 0rem 2rem 2rem 2rem;
         transform: translateX(100%);
    }
     .content.active {
         opacity: 1;
         transform: none;
    }
}
/* all india */
 .all-india span {
     font-size: 18px;
     font-weight: 600;
}
 section.bg-none.all-india {
     padding-bottom: 100px;
     background-color:rgb(251 251 251);
}
 .all-india p {
     color: var(--bodycolor);
}
 .hover-img {
     transition: filter 0.2s ease;
     border-radius: 0 24px;
}
 .client-logos img {
     max-width: 130px;
     margin: 0 10px;
}
 .client-logos .slider {
     animation: logoslidein 15s linear infinite;
     display: flex;
     align-items: center;
     gap: 20px;
}
 .client-logos .slider .logos {
     display: flex;
     align-items: center;
     gap: 20px;
}
 .client-heading {
     z-index: 9;
     padding:20px 20px 0px 20px;
     position: relative;
     background: var(--primary) !important;
     color: #fff;
}
 .client-logos {
     overflow: hidden;
     box-shadow: 0px 16px 36px 0px #0000001A;
     background: #fff;
     z-index: 9;
     position: relative;
     padding: 0;
     border-radius: 24px;
}
 @keyframes logoslidein {
     from {
         transform: translate3d(0, 0, 0);
    }
     to {
         transform: translate3d(-100%, 0, 0);
    }
}
 @keyframes logos-fade-in {
     0% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}
/* solution */
/* .solution {
     padding-bottom: 100px;
     padding-top: 0 !important;
}
 */
 .solution .custom-row {
     position: relative;
     border-bottom: 2px solid #00000026;
     transition: all 0.7s ease;
}
 .solution .custom-row:hover {
     border-bottom: 3px solid var(--primary);
}
 .solution .custom-row .col-1 img, .solution .custom-row .col-2 img, .solution .custom-row .col-3 {
     transition: all 0.7s ease;
}
 .solution .custom-row .col-1 img {
    /*opacity: 0.5;
    */
}
 .solution .custom-row .col-2 img {
     opacity: 0;
     transition: all 0.7s ease;
}
 .solution .custom-row .col-3 {
    /*opacity: 0.5;
    */
}
 .solution .custom-row:hover .col-1 img, .solution .custom-row:hover .col-2 img, .solution .custom-row:hover .col-3 {
     opacity: 1;
}
 .solution .custom-row:hover .col-2 img {
     transform: scale(2);
    /*width: 95% !important;
    */
}
 .solution p span {
     font-size: 18px;
     font-weight: 600;
}
/* cards */
 .custom-cards-container {
     position: relative;
     width: 100vw;
     height: 70vh;
}
 .card-slide .pin-spacer {
    /* height: 100% ! IMPORTANT;
     */
     overflow: hidden !important;
     padding: 0 !important;
     width: 100% !important;
}
 .custom-card {
     position: absolute;
     top: 0;
     left: -40px;
     width: 60%;
     height: 100%;
     border-radius: 30px;
     overflow: hidden;
}
 .custom-card-content {
     color: var(--white);
     min-height: 115px;
    /* display: flex;
     */
    /* align-items: flex-end;
     */
     padding: 20px;
     bottom: 0;
     transform: translateY(60%);
     position: absolute;
     transition: transform 0.7s ease;
     background: var(--primary);
     left: 20px;
     width: 50%;
     border-radius: 16px;
}
 .custom-card:hover .custom-card-content {
     transform: translateY(-20%);
     transition: transform 0.7s ease;
}
 .custom-dots-container {
     display: flex;
     position: absolute;
     bottom: -40px;
}
 .card-slide {
     position: relative;
}
 .custom-dot {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background-color: var(--white);
    /* Gray color for inactive dots */
     margin: 0 5px;
     opacity: 0;
    /* Start hidden */
     transition: opacity 0.7s ease;
    /* Smooth transition */
}
 .custom-dot.active {
     background-color: var(--primary);
     transition: opacity 0.7s ease;
    /* Color for active dot */
     opacity: 1;
    /* Show active dot */
}
 .custom-card-content p {
     color: var(--white);
     margin: 0;
}
/* counter */
 h2.counter__number {
     font-size: 45px;
     color: var(--primary);
     line-height: 1.1;
     letter-spacing: 8px;
}
 .counter-item.text-md-center {
     border-radius: 16px;
     border-bottom: 2px solid var(--primary);
}
/* hero section */
 .w-90 {
     width: 90% !important;
}
 h2.heading-h3 {
     font-size: 32px;
}
 .p-relative{
     position: relative;
}
 .p-relative .img-1 {
     width: 40%;
     position: absolute;
     border-radius: 15px;
     left: 2px;
     object-fit: contain;
     top: 37px;
     opacity: 0.3;
}
 .p-relative video {
     width: 40%;
     pointer-events: none;
     border-radius: 15px;
     position: relative;
     top: 0px;
     left: 30%;
     z-index: 99999;
     box-shadow: -8px -6px 25px #00000063;
}
 .p-relative .img-2 {
     width: 40%;
     position: absolute;
     border-radius: 15px;
     right: 2px;
     object-fit: contain;
     top: 37px;
     opacity: 0.3;
}
/*Footer*/
 ul.footer-contact-details{
}
 ul.footer-contact-details li{
    margin-bottom: 8px;
}
 ul.footer-contact-details li a {
     color: var(--menucolor);
     text-decoration: none;
     font-size:15px;
}
 ul.footer-contact-details li a i{
}
 .social {
     margin: 10px 4px;
}
 ul.social-icons{
    display: flex;
}
 ul.social-icons li{
    flex-grow: 1;
}
/*ul.social-icons li a {
     color: #3d3d3d;
     font-size: 36px;
     transition: background-color 0.3s ease-in-out;
}
*/
 ul.social-icons li a {
     color: var(--menucolor);
     font-size: 22px;
     border-radius: 6px;
     transition: background-color 0.3s ease-in-out;
}

.social .social-icons li a:hover {
     color: #f1264f;
     transition: background-color 0.3s ease-in-out;
    border-radius: 5px;
}
 ul.social-icons li a i{
}
 .social .social-icons li img {
     max-width:30px;
}
/* a.nav-link.active {*/
/*     color: var(--primary) !important;*/
/*}*/
 .contact-section {
     padding: 50px 0 !important;
}
 .modal.fade.show input.form-control {
     margin-bottom: 12px;
}
 div.modal.fade.show .modal-dialog {
     border-radius: 24px !important;
}
 div.modal.fade.show .modal-header {
     border: none;
     text-align: center;
     padding-left: 0;
     padding-right: 0;
     padding-top: 0;
}
 div.modal.fade.show {
     z-index: 99999;
     background: #000000b0;
     backdrop-filter: blur(20px);
}
 @media (min-width: 576px) {
     div.modal.fade.show .modal-dialog {
         max-width: 800px;
    }
}
 .font-30{
    font-size:30px;
}

/*toggle*/
.navbar-collapse {
     display: none;
    /* Initially hidden */
     transition: all 0.3s ease-in-out;
}
 .navbar-collapse.show {
     display: block;
}
 .navbar-toggler {
     cursor: pointer;
}
/* Optional: Customize mobile view */
 @media (max-width: 768px) {
     .navbar-collapse {
         width: 100%;
         background-color: #f8f9fa;
    }
     .container.border {
         border: none !important;
    }
}

@media (max-width: 576px) {
    /* Adjust the padding of navbar items */
     .navbar-nav .nav-link {
         padding: 10px 0;
    }
   
    /*prefooter*/
     .prefooter .form-control {
         width: 100%;
    }
     .prefooter .btn {
         width: 100%;
    }
     .prefooter img {
         max-width: 50px;
         margin: 0 auto;
    }
    /*footer\*/
     .footer-contact-details {
         text-align: center;
    }
     .widget {
         text-align: center;
    }
     .widget.company-intro-widget p {
         margin-top: 20px;
    }
     .footer-link-list {
         text-align: center !important;
    }
     .footer-contact-details {
         text-align: center !important;
    }
     .social-icons{
        justify-content:center !important;
    }
    section.main-explore .col-md-6.text-end img {
        scale: 1;
    }
}

/*form global above footer*/
 .scrolll-cards {
     overflow: hidden;
     position: relative;
     padding:50px 0 100px 0;
}
 .custom-slider-wrapper {
     display: flex;
     align-items: center;
     position: relative;
     max-width: 100%;
     margin: 0 auto;
}
 .custom-slider {
     overflow: hidden;
     width: 100%;
}
 .custom-slider-inner {
     display: flex;
     transition: transform 0.3s ease;
}
 .work-cards {
     min-width: 300px;
    /* Width of each card */
     margin-right: 20px;
    /* Space between cards */
}
 .scrolll-cards button.arrow.active {
     color: var(--white);
     background-color: var(--primary);
}
 .scrolll-cards .arrow:hover {
     background-color: var(--primary);
     color: var(--white);
}
 .scrolll-cards .arrow {
     width: 40px;
     border-radius: 4px;
     font-size: 2rem;
     height: 40px;
     background-color: var(--white);
     color: var(--primary);
     border: none;
     line-height: 0;
    /*padding: 10px;
    */
     cursor: pointer;
     position: absolute;
     z-index: 1;
     top: 100%;
     transform: translateY(20%);
     transition: background-color 0.2s;
}
 .scrolll-cards .left-arrow {
     left: 46%;
}
 .scrolll-cards .right-arrow {
     right: 46%;
}
 .page-section video {
     border-radius: 20px;
     width:100% !important;
}
 .page-section img {
     max-width: 60px !important;
     margin-bottom: 25px;
}
 .page-section button {
     background: var(--white) !important;
     color: var(--primary) !important;
     border: none !important;
     padding: 0 !important;
     cursor:none;
}
 .page-section .d-flex {
     margin-top:20px;
     gap:20px;
     justify-content:end;
}
 .page-section button:after {
     display:none;
}
 .work-cards img {
     margin-bottom: 30px;
     box-shadow: 0px 16px 36px 0px #F1264F29;
     max-width: 100%;
     height: auto;
     border-radius: 5px;
}
 .works-flow {
     display: flex;
    /* Ensure items are in a row */
     flex-wrap:nowrap;
}
 .contact-section {
 background-image: url(../../assets/images/contactus-info.png);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    position: relative;
    background-position: center center;
    background-size: cover;
    background-color: var(--bodybgcolor);
    padding-top: 0;
}
.contact-section .form-container {
background: var(--menucolor);
  }
 .form-container {
     width: 100%;
padding: 30px;
     border-radius: 20px;
     position: relative;
     z-index: 1;
     box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.1);
}
/* .form-container::before {*/
/*     content: "";*/
/*     position: absolute;*/
/*     top: -50px;*/
/*     left: -50px;*/
/*     width: 300px;*/
/*     height: 300px;*/
/*     background: radial-gradient(circle, rgba(255, 99, 132, 0.5), transparent);*/
/*     filter: blur(100px);*/
/*     z-index: -1;*/
/*}*/
.contact-section .form-control {
    background: var(--primary);
    }
    .contact-section h3 {
    color: var(--white);
}
.contact-section input::placeholder, .contact-section textarea::placeholder{
    color: var(--white);
}
/* a.nav-link.active {*/
/*     color: var(--secondary) !important;*/
/*}*/
 .form-control {
     border-radius: 10px;
     border: 1px solid #dddddd;
     padding: 10px;
     font-size: 14px;
     margin-bottom: 15px;
}
 .btn-submit {
     width: 100%;
}

@media (min-width: 800px) and (max-width: 1300px) {
     .how-it-works nav#mainNav {
         height: 170px;
         position: sticky;
         top: 20%;
    }
     .navbar-brand img {
         height:30px;
    }
     #navbarNav a.nav-link {
         padding: 0;
    }
}
@media (min-width: 800px) and (max-width: 1000px) {
     section.main-hero {
  margin-top: -9% !Important;
    padding-top: 120px !Important;
            background-position: 50%  !Important;
}
}

@media (max-width: 1000px) {
     #navbarNav ul.dropdown-menu {
         position: relative;
         display: block;
    }
     .prefooter input::placeholder {
         text-align: center;
    }
    /* h2.heading-h2 {
        */
        /* font-size: 30px;
        */
        /*
    }
    */
     .social ul.social-icons li {
         flex-grow: 0;
         width: auto;
    }
     ul.social-icons li {
         flex-grow: 0;
         width: 25%;
    }
   
    .footer-section .site-logo img {
    max-width: 200px;
}
     .scrolll-cards .arrow {
         display: none;
    }
     .scrolll-cards .right-arrow {
         right: 43%;
    }
     .scrolll-cards .left-arrow {
         left: 43%;
    }
     .form-container .row .col {
         flex:auto;
    }
     .page-section .d-flex {
         flex-direction:column;
         align-items: start;
         gap:8px;
        /*align-items:center;
        */
    }
}

@media (max-width: 800px) {
    /* h2.heading-h2 {
        */
        /* font-size: 30px;
        */
        /*
    }
    */
     .plan-pricing {
         margin-bottom: 30px;
    }
     .how-it-works {
         padding-bottom: 50px !important;
    }
     div#\34 {
         padding-bottom: 0 !important;
    }
     .page-section {
         display: block !important;
         padding-bottom: 70px !important;
    }
     nav#mainNav {
         display: none;
    }
     .works-flow {
         flex-wrap: wrap;
         gap: 15px;
    }
    .img-mobile-margin {
    margin-bottom: 30px;
}

section.main-benefits
{
    padding:40px 0 !important;
}
.footer-section ul.footer-link-list.d-flex {
    justify-content: center !important;
}
}
.main-benefits p {
    color: var(--bodybgcolor);
}
.main-benefits li {
    width: 35% !important;
    flex-grow: inherit !important;
}
button.btn.btn-book-consultation {
     margin: 0 1px;
}
 .page-section {
     padding: 0em;
}
 .navigation__link i{
    float: right;
}
 .navigation__link {
     display: block;
     color: #D2D2D2;
     text-decoration: none;
     padding: 1em;
     font-weight: 400;
}
 a.navigation__link:hover {
     color: #F1264F;
}
 .navigation__link.active {
     color: #F1264F;
}
 .work-cards h4 {
     color: #f1264f;
     line-height: 40px;
}
 .work-cards {
     position: relative;
     border: 1px solid #FAB7C4;
     padding: 20px;
     border-radius: 24px;
     min-height:350px;
     transition: all 0.3s ease-in-out;
}
/* Hide all sections by default */
 .page-section {
     display: none;
}
/* Active section will be displayed */
 .page-section.active {
     display: block;
}
 .work-cards::before {
     content: '';
     position: absolute;
     top: -10px;
     left: -10px;
     right: -10px;
     bottom: -10px;
     background: rgb(255 192 203 / 33%);
     filter: blur(40px);
    /* Blurring effect */
     opacity: 0;
     transition: opacity 0.3s ease-in-out;
     z-index: -1;
}
 .work-cards:hover::before {
     opacity: 0;
}
 .work-cards:hover {
     background: #fff;
    /*border-color:#fff;
    */
}
 .scrolll-cards::-webkit-scrollbar {
     display: none;
}
/*hmara-academy*/
 img.scale-img {
     scale: 1.4;
}
 
 
 
 /*beneffits*/
 .main-explore p,  .main-explore h2 {
    color:var(--white);
}
 section.main-hero {
    background-image: url('../../assets/images/home/Section-1/Hero Image.png');
    background-size: cover;
        background-color: var(--bodybgcolor);
        margin-top: -7%;
    padding-top: 250px;
}
#lifestyle .card-img-top {
    width: 90px;
    height: 90px;
    margin: 0 auto;
}
.card-body h3,
.card img {
  transition: transform 0.4s ease;
}

#lifestyle .card:hover h3,
#lifestyle .card:hover img {
  transform: translateY(-15px);
}
#lifestyle .card:hover .card-text {
    opacity: 1;
    transform: translateY(0);
}
#lifestyle .card-body p {
    opacity: 0;
    transform: translateY(100px);
    transition: transform 0.4s ease, opacity 0.4s ease;
}
.card {
 
}
#lifestyle .card:after {
    background-image:     url(../../assets/images/radius-shape1.png);
    background-size: contain;
    background-repeat: no-repeat;
    transition: all 0.7s ease;
    content: "";
    height: 200px;
    width: 200px;
    position: absolute;
    right: 0;
    z-index: -1;
    bottom: 0;
    background-position: right;
}
#lifestyle .card.active {
  transform: scale(1); /* Grow to full size */
  opacity: 1; /* Fade in */
}
#lifestyle .card {
     transform: scale(0.5); /* Start smaller */
  opacity: 0; /* Hidden initially */
  transition: transform 0.5s ease, opacity 0.5s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 0px 50.65px 0px #0000000D;
    border-radius: 36px;
    padding: 50px 15px;
    border: none;
      transition: all 0.7s ease;
    background-color: var(--menucolor);
}
#lifestyle .card:hover h3 , #lifestyle .card:hover p{
    color: var(--white);
         transition: all 0.7s ease;
}
.card:hover {
         transition: all 0.7s ease;
    background-color: var(--secondary) !important;
}
section#lifestyle
{
        background-color: var(--bodybgcolor);
}
img.hover-imgs {
    scale: 1.1;
}
section.main-explore {
    background-size: contain;
    background-repeat: no-repeat;
    background-color:var(--bodybgcolor);
    background-image: url(../../assets/images/radius-shape2.png);
    background-position: left;
}
section.main-benefits .container{
  background-image:url(../../assets/images/home/Section-6/Download-banner.png), linear-gradient(#ededed, #ededed);
  padding: 150px 60px;
    background-size: cover;
        border-radius: 24px;
    background-repeat: no-repeat;
      background-position: right top;
}
section.main-benefits {
    background-color: var(--bodybgcolor);
    padding-bottom:100px;
}
#subscription .card:after {
    background-image:     url(../../assets/images/radius-shape5.png);
    background-size: contain;
    background-repeat: no-repeat;
    transition: all 0.7s ease;
    content: "";
    height: 300px;
    width: 300px;
    position: absolute;
    right: 0;
    bottom: 0;
    background-position: right;
}
#subscription .card {
    border-radius: 36px;
    padding: 15px;
         transition: all 0.7s ease;
    border: none;
   background-color: var(--menucolor);
}
#subscription .card-img-top {
    width: 110px;
    height: 110px;
    margin: -65px auto auto auto;
}
#subscription .card-body {
   padding:15px 0;
}
#subscription ul {
    border-left: 1px solid var(--greyy);
    transition: all 0.7s ease;
    column-count: 2;
}
#subscription .card:hover {
    background-color: var(--secondary);
         transition: all 0.7s ease;
}
#subscription .card:hover .card-body, #subscription .card:hover p, #subscription .card:hover h3{
    color: var(--white);
         /*transition: all 0.7s ease;*/
}
#subscription .card:hover button.btn {
    background: var(--white);
    color:var(--secondary);
}
#subscription .card button.btn:after {
    color: var(--white) !IMPORTANT;
}
#subscription .card:hover button.btn:hover {
    background: var(--secondary);
    border-color: var(--white) !important;
    color: var(--white);
}
#subscription li:before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 8px;
    color: var(--secondary);
    font-size: 11px;
    border: 2px solid var(--secondary);
    border-radius: 50px;
    padding: 2px;
       transition: all 0.7s ease;
}
#subscription .card:hover li:before {
    background: white;
    border-color: #fff;
       transition: all 0.7s ease;
}
#subscription .card:hover li {
      transition: all 0.7s ease;
    color: var(--white);
}
#subscription li {
    padding-left: 20px;
        margin: 0px 0 15px 0px;
    line-height: 35px;
    color: var(--greyy);
      transition: all 0.7s ease;
}
.animation-transform {
    animation: anim_moveBottom2 2s linear 0s infinite alternate;
}
@keyframes anim_moveBottom2
{
    0% {
    transform: translateY(0);
}
100% {
    transform: translateY(20px);
}
}
.zoom-text {
    animation: zoomInOut 2s linear 0s infinite alternate;
}
@keyframes zoomInOut
{
    0% {
    transform: scale(1.6) translateY(20px);
}
100% {
        transform: scale(0.6) translateY(30px);

}
}

 .circle-photo {
            /*width: 80px;*/
            /*height: 80px;*/
            /*border-radius: 50%;*/
            /*object-fit: cover;*/
            /*margin: 10px;*/
        }
        .image-group {
            position: absolute;
            display: flex;
            align-items:center;
            flex-direction: column;
            gap: 10px;
        }
        .top-circle-images {
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            justify-content: space-between;
            flex-direction: row;
        }
        .bottom-circle-images {
            /*bottom: 0%;*/
            align-items: baseline;
            justify-content: space-between;
            left: 50%;
            transform: translateX(-50%);
            flex-direction: row;
        }
        .image-group img:hover {
    transform: scale(1.3);
      transition: all 0.7s ease;
}
        .image-group img {
      transition: all 0.7s ease;
}
.left-circle-images img:nth-child(1) {
    width: 140px !important;
}
.top-circle-images img:nth-child(2):hover {
    transform: rotateZ(310deg) scale(1.3);
}
        .top-circle-images img:nth-child(2) {
    transform: rotateZ(310deg);
}
        .left-circle-images {
              /* left: 0; */
    gap: 50px;
    /* top: 50%; */
    transform: translateY(-50%);
    /* align-items: baseline; */
    top: 80%;
      }
        
        .right-circle-images {
            gap:100px;
            right: 0;
            /*top: 50%;*/
            transform: translateY(-50%);
        }
       .footer-section li {
    width: 35%;
    max-width: 100%;
}
.footer-section ul.social-icons.d-flex {
     /*flex-wrap: wrap;*/
}
.footer-section p {
    color: var(--extrapcolor);
}
section#subscription {
    background-color: var(--bodybgcolor);
}
.footer-section ul.footer-link-list.d-flex {
    justify-content: start;
}

section#all-elements {
    padding-bottom: 200px;
    padding-top: 200px;
    background-size: cover;
    background-color: var(--bodybgcolor);
    background-image: url(../../assets/images/Browse-save.png);
    background-position: center;
}
.course-links-widget li
{
    width:100% !Important;
}