body {
     margin: 0px;
     padding: 0px;
     box-sizing: border-box;
     font-family: var(--textfonts);
 }

 :root {
     --primaryColor: #00496e;
     --secondaryColor: #27b9ca;
     --textColor: #6E6E6E;
     --hoverColor: #10a8b9;
     --headingfonts: "Ubuntu", sans-serif;
     --textfonts: "Roboto", serif;
     --textfontsthin: "Roboto", serif;
     --transition: all 0.3s ease-out;

 }

 #back-to-top {
     position: fixed;
     z-index: 50;
     right: 2%;
     opacity: 0;
     bottom: 5%;
     transition: all 0.5s ease-in;
     width: 50px;
 }

 #back-to-top:hover {
     opacity: 1;
     transform: scale(1.1);
 }

 .gradient-bg {
     background: linear-gradient(155deg, var(--primaryColor) 25%, var(--secondaryColor) 100%);
 }

 .heading-text {
     background: -webkit-linear-gradient(238deg, var(--primaryColor) 0%, var(--secondaryColor) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .pm-box {
     flex-direction: column;
     align-items: self-start;
 }

 input::-ms-reveal {
     display: none;
 }

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

 h1 {
     color: white;
     font-family: var(--headingfonts);
     font-size: 40px;
     font-style: normal;
     font-weight: 700;
     line-height: 1;

 }

 h2 {
     color: var(--primaryColor);
     font-family: var(--headingfonts);
     font-size: 30px;
     font-style: normal;
     font-weight: 700;
     margin-bottom: 21px;
     line-height: 1;

 }

 h3 {
     color: var(--secondaryColor);
     font-family: var(--textfonts);
     font-size: 25px;
     font-style: normal;
     font-weight: 700;
     line-height: 35px;
 }

 h5 {
     color: var(--secondaryColor);
     font-family: var(--textfonts);
     font-size: 14px;
     font-style: normal;
     font-weight: 700;
     line-height: 1;
     letter-spacing: 0.84px;
     text-transform: uppercase;
     margin-bottom: 0;
 }

 p {
     color: #6E6E6E;
     font-family: var(--textfonts);
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 26px;
 }

 .section-top-p {
     padding: 70px 0;
 }

 .navbar-toggler {
     background: var(--secondaryColor);

 }

 .navbar-toggler i {
     color: white;
 }

 .navbar {
     position: relative;
     top: 0px;
     left: 0px;
     width: 100%;
     z-index: 1020;
     padding: 20px 0px;
     margin-bottom: -100px;
 }

 .navbar-nav {

     width: 100%;
     justify-content: center;
     margin-top: -2px;
 }

 .navbar-nav li a {
     color: white;
     font-family: var(--textfonts);
     font-size: 15px;
     font-style: normal;
     line-height: 24px;
     letter-spacing: 0.84px;
     text-transform: uppercase;
     padding: 10px 0px !important;
     position: relative;
     transition: all 0.4s;
 }

 .header-btn .theme-btn {
     padding: 5px 30px !important;
 }

 .navbar-nav li a:hover,
 .navbar-nav li a:focus,
 .navbar-nav li.active a {
     color: var(--secondaryColor);
 }

 .navbar-nav li.active a:after,
 .navbar-nav li a:focus::after {
     content: '';
     width: 100%;
     height: 2px;
     background-color: var(--secondaryColor);
     position: absolute;
     bottom: 0px;
     left: 0px;
 }

 .navbar-nav li a {
     position: relative;
 }

 .navbar-nav li a::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     width: 0;
     height: 2px;
     background-color: var(--secondaryColor);

     transition: width 0.4s ease;
 }

 .navbar-nav li a:hover::after {
     width: 95%;
     left: 50%;
     transform: translateX(-50%);

 }

 .form-box {
     background: white;
     border: 1px solid var(--primaryColor);
 }

 header .theme-btn {
     color: white;
     background: #27b9ca;
 }

 header .theme-btn:hover {
     background: #10a8b9 !important;

 }

 .banner-section .theme-btn {
     color: white;
     background: #27b9ca;
 }


 .theme-btn,
 .modal-footer button,
 .modal-btn {
     border-radius: 0.5rem;
     background: var(--secondaryColor);
     padding: 15px 38px;
     color: white;
     font-family: var(--textfontsthin);
     font-size: 14px;
     font-style: normal;
     font-weight: 700;
     line-height: 24px;
     letter-spacing: 0.84px;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 14px;
     transition: var(--transition);

 }

 .theme-btn:hover {
     background: #10a8b9 !important;
 }

 .modal-footer button {}

 .dropdown:hover .dropdown-menu {
     display: block;

 }

 .dropdown-menu {
     background: rgba(245, 245, 245, 0);
 }

 .dropdown-menu-div {
     background: var(--secondaryColor);
     overflow: hidden;
     top: 100% !important;
     border-radius: 6px;
 }

 .btn:hover,
 .btn:active {
     background: var(--hoverColor) !important;
     color: white;
 }

 .dropdown-menu:hover::after .dropdown-menu li a::after {
     width: 95%;
     left: 50%;
     transform: translateX(-50%);

 }

 .dropdown-menu .dropdown-item {
     padding-left: 0 !important;
     padding-right: 0 !important;
 }

 .dropdown-item a {
     color: white !important;
 }

 .dropdown-menu a:hover {
     background: none !important;
     color: white !important;

 }

 .nft-dropdown li {
     transition: all 0.4s ease-out;
 }

 .nft-dropdown li a::after {
     content: none !important;
 }

 .nft-dropdown li:hover {
     background: #3e6f33b5;
 }

 .theme-btn.transparent-btn {
     background-color: transparent;
     color: var(--secondaryColor);

 }

 .transparent-btn:hover {
     background: var(--secondaryColor);
     color: white;
 }



 .banner-content p {

     margin-top: 10px;
 }

 .banner-section h5 {
     color: var(--secondaryColor);
 }


 .theme-btn .transparent-btn {
     color: var(--secondaryColor);
 }

 .banner-btn {
     margin-top: 50px;
 }

 /* About Us Section */

 .about-image img {
     width: 100%;
     border-radius: 30px;
 }

 .iconbox-parent {
     display: flex;
     flex-direction: column;
     gap: 40px;
     margin: 40px 0px;
 }

 .icon-box {
     display: flex;
     align-items: center;
     gap: 30px;
 }

 .icon-box .icon {
     width: 95px;
     height: 95px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 30px;
     background-color: var(--primaryColor);
     flex: none;
 }

 .icon-box .icon i {
     font-size: 35px;
     color: white;
 }

 .about-content p {
     margin-bottom: 0px;
 }

 .about-content h2 {
     margin-bottom: 15px;
 }

 .video-image img {
     width: 100%;
     border-radius: 0px 0px 30px 30px;
 }

 .wealth-sol-grid {

     border-radius: 30px;
     transition: var(--transition);
 }

 .wealth-sol-grid i {
     font-size: 35px;
     padding-right: 20px;

 }

 .wealth-sol-grid h6,
 .approach-grid h6 {
     font-family: var(--headingfonts);
     font-weight: 600;
     font-size: 20px;
 }


 /* Default background for the first wealth-sol-grid */
 .g-row {
     background: linear-gradient(204deg, rgba(0, 13, 217, 1) 0%, rgba(0, 155, 217, 1) 100%);
     color: white;
     transition: background-color 0.3s ease, color 0.3s ease;
 }

 .g-row p,
 .g-row i {
     color: white;
     -webkit-text-fill-color: white !important;
 }

 /* Default background for other grids */
 .wealth-sol-grid {
     background-color: white;
     transition: background-color 0.3s ease, color 0.3s ease;
 }

 /* Hover effect for all grids */
 .wealth-sol-grid:hover {
     background-color: white;
 }

 .wealth-sol-grid .heading-text {
     background: -webkit-linear-gradient(180deg, rgba(0, 155, 217, 1) 0%, rgba(0, 13, 217, 1) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .wealth-sol-grid {
     position: relative;
     border-radius: 30px;
     overflow: hidden;
     background-color: white;
     /* Default background color is white */
     transition: background-color 0.3s ease-in-out;
     /* Smooth transition for background color */
 }

 .wealth-sol-grid::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(204deg, rgba(0, 13, 217, 1) 0%, rgba(0, 155, 217, 1) 100%);
     z-index: 0;
     transition: opacity 0.3s ease-in-out;
     opacity: 0;
     /* Initially hidden */
 }

 .wealth-sol-grid:hover::before {
     opacity: 1;
     /* Show the gradient on hover */
 }

 .wealth-sol-grid i,
 .wealth-sol-grid h6,
 .wealth-sol-grid p {
     position: relative;
     z-index: 1;
     /* Ensure content is above the background */
     transition: color 0.3s ease, -webkit-text-fill-color 0.3s ease;
 }

 .wealth-sol-grid:hover i,
 .wealth-sol-grid:hover h6,
 .wealth-sol-grid:hover p {
     color: white;
     -webkit-text-fill-color: white;
 }

 .grey-section {
     background: whitesmoke;
 }

 /* future */
 .future-sec h6 {
     color: var(--primaryColor);
 }

 #future .wealth-sol-grid {
     background: whitesmoke;
 }

 /* Testimonials */
 .testimonials-sec {
     display: flex;
     gap: 0 50px;
 }

 .client-info p:first-child {
     font-family: var(--headingfonts);
     font-weight: bold;
 }

 .client-info p:last-child {
     font-family: var(--headingfonts);
     color: var(--secondaryColor);
 }

 .testimonials-text {
     background: white;

 }

 .client-info p:last-child {
     margin: 0;
 }

 .approach-grid {
     background: white;
 }

 .approach-grid hr {
     border-top: 1px dotted;
 }

 #ready {
     background-image: url(../images/ready.webp);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
 }

 #ready h1 {
     color: white;
 }

 .contact-div,
 .contact-div-home {
     width: 90%;
 }

 .contact-info a,
 .contact-div p,
 .contact-div h5,
 .contact-div-home p,
 .contact-div-home h5 {
     color: white;
 }

 .contact-info a,
 .contact-info .address {
     display: flex;
     gap: 15px;

 }

 .accordion-button {
     font-weight: 900;
     transition: var(--transition);
     line-height: 18px;
 }

 .accordion-header .collapsed {
     background: whitesmoke !important;
     color: var(--textColor) !important;
 }

 .accordion-header .gradient-bg {
     color: white;
 }

 .accordion-button:not(.collapsed),
 .accordion-button:focus {
     box-shadow: none;
 }

 .accordion-button:not(.collapsed)::after {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
 }


 /* Footer CSS */
 footer {
     background: var(--primaryColor);
     padding: 70px 0;
 }



 .social-div p {
     color: white;
     font-weight: 700;
 }

 .vr {
     background: white;
     opacity: 1;
     margin: 0 25px;
 }

 .header-right .px-2 {
     color: white;
     opacity: .5;
 }

 #bottom-div {
     background: var(--secondaryColor);
     padding: 20px;
 }

 #bottom-div p,
 #bottom-div a {
     color: white;
     font-family: "Flexo-Regular", sans-serif !important;
 }

 .lang-list a {

     font-family: "Flexo-Regular", sans-serif !important;
 }


 .header-right {
     display: flex;
 }

 .header-right ul li {
     list-style: none;
     color: white;

 }

 .header-right ul li a {
     opacity: 0.5;
 }

 /* Legal page */

 #legal-page p,
 #legal-page li {
     color: #000;
 }

 #legal-page p {
     text-align: justify;
     text-align-last: left;
     margin: 0;
 }

 #legal-page h5 {
     font-family: var(--AvenirNextCyr);
 }

 #legal-page h3 {
     margin-bottom: 0 !important;
     margin-top: 1em !important;
 }

 #legal-page .privacy ul,
 #legal-page .cookies ul {
     margin-top: 8px !important;
 }





 #legal-page ul li {
     list-style: disc !important;

 }


 #legal-page ul {

     margin-top: -.5em;
 }

 .err_input {
     border: 1px solid red !important;
 }

 .active-lang {
     color: #27b9ca;
     opacity: 1 !important;
 }

 nav {
     transition: var(--transition);
 }

 .color-nav nav {
     background-color: var(--primaryColor);
     margin-bottom: 20px;
     box-shadow: var(--bs-box-shadow) !important;
     position: relative;
 }

 .navbar-toggler:focus {
     box-shadow: none !important;
 }

 .color-nav-home nav {
     background-color: var(--primaryColor);
 }

 .personal-tab select {
     width: 100%;
     height: 40px;
     background: transparent;
     border: 3px solid var(--secondaryColor);
     padding: 15px;
 }

 .modal-header {
     background: -webkit-linear-gradient(0deg, var(--primaryColor) 0%, var(--secondaryColor) 100%);
     padding-top: 1rem !important;
     padding-bottom: 1rem !important;

     border-radius: 15px 15px 0 0;


 }

 .modal-content {
     border-radius: 20px;
     border: 0;
 }

 .pm-box {
     flex-direction: column;
     align-items: self-start;
 }

 .section-head {
     font-size: 30px;
     color: var(--primaryColor);
     line-height: 1;
     margin-bottom: 1.5rem;
 }

 .modal-body i {

     right: 0%;
     color: var(--primaryColor);
 }

 .db_date_time {
     line-height: 1.2;
 }

 .db_date_time small {
     line-height: 1;
     margin-top: -2px;
     display: block;
 }

 .modal-body label {
     color: var(--secondaryColor);
 }

 .modal-footer button,
 .modal-btn {
     display: flex;
     justify-content: center;
     padding-top: .5rem !important;
     padding-bottom: .5rem !important;
     max-width: 180px;
 }

 .form-control {
     border: 1px solid var(--secondaryColor) ;
     margin: 10px 0;
 }

 .select-with-icon {
     background: #fff url('/assets/images/arrow-down-select.svg') no-repeat right center;
     background-size: 15px;
     background-position-x: 90%;
     -webkit-appearance: none;
 }

 .fa-eye,
 .fa-eye-slash {
     top: 1px !important;
     cursor: pointer;
     position: absolute;
     color: var(--primaryColor);
     padding: 10px !important;
 }

 footer {
     margin-top: 116px;
 }

 .approach-grid .heading-text {
     transform: translateY(-7px);
 }

 .fa-eye-slash {
     transform: translateX(1px);
 }

 .toast {
     opacity: 1 !important;
 }

 .service-banner {
     background-image: url('../images/shares-banner.webp');
     align-items: end;
     padding: 50px 0px;
     height: 50vh;
     margin-top: -20px;
 }

 .service-img-div {
     background-position: center;
     background-size: cover;
 }

 .asset-col {
     background-image: url('../images/assets.webp');
 }

 .service-banner .banner-content h1 {
     font-size: 50px;
     line-height: 68px;
 }

 .service-banner .banner-content p {
     text-align: justify;

     line-height: 23px;
     margin-bottom: 0px;
 }

 .like-item {
     display: flex;
     align-items: center;
     gap: 30px;
     background-color: #f9f9f9;
     padding: 25px;
     border-radius: 15px;
     margin-bottom: 20px;
 }

 .like-item:last-child {
     margin-bottom: 0px;
 }

 .like-item .icon {
     flex: none;
     width: 100px;
     height: 100px;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: #0006d9;
     border-radius: 25px;
 }

 .like-item .icon i {
     color: #01db00;
     font-size: 25px;
 }

 .like-item .content h3 {
     margin: 0px;
     color: #000;
     font-size: 22px;
     line-height: 32px;
 }

 .like-item .content p {
     margin: 0px;
     font-size: 14px;
     line-height: 24px;
 }

 .dislike-item {
     display: flex;
     gap: 15px;
     margin-bottom: 20px;
 }

 .dislike-item .icon i {
     color: #ff0000;
     font-size: 35px;
 }

 .dislike-item .content h3 {
     color: #000;
     margin: 0px;
     font-size: 20px;
     line-height: 100%;
     margin-bottom: 6px;
 }

 .dislike-item .content p {
     margin: 0px;
 }

 .dislike-item .icon {
     padding-top: 4px;
 }

 .service-2 {
     background-image: url('../images/portfolio-banner.webp');
 }

 .service-about-content .about-content p {
     font-size: 14px;
     line-height: 24px;
     text-align: justify;
     text-align-last: center;
 }

 .feature-services-section {
     padding: 70px 0px !important;
 }

 .feature-services-section .heading-text.text-center {
     margin-bottom: 40px;
 }

 .wealth-sol-grid .icon {
     width: 100px;
     height: 100px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex: none;
     background-color: #0006d9;
     border-radius: 20px;
 }

 .wealth-sol-grid .icon i {
     padding: 0px;
     color: #fff;
     font-size: 40px;
 }

 .dashboard-dd {
     background: none !important;
 }

 .setting-menu {
     color: var(--textColor);
     font-family: var(--textfonts);
     background: white;
 }

 .dropdown-toggle:hover .setting-menu {
     display: block !important;
 }

 .setting-menu li:hover {
     background-color: #e7f3e5 !important;
     color: var(--textColor) !important;

 }

 .setting-menu a {
     color: var(--textColor) !important;
 }

 .setting-menu a:hover {
     color: var(--textColor) !important;
 }

 .dashboard-dd::after {
     content: none;
 }

 .feature-services-section .wealth-sol-grid {
     gap: 20px;
     padding: 35px !important;
 }

 .feature-services-section .wealth-sol-grid .content h6 {
     font-size: 18px;
     line-height: 100%;
 }

 .feature-services-section .wealth-sol-grid .content p {
     font-size: 14px;
     line-height: 20px;
     text-align: justify;
 }

 .feature-services-section .wealth-sol-grid:hover .icon {
     background-color: #fff;
     z-index: 1;
 }

 .feature-services-section .wealth-sol-grid:hover .icon i {
     color: #0006d9 !important;
     !i;
     !;
     -webkit-text-fill-color: unset;
 }

 .services-like-section {
     padding: 100px 0px;
 }

 .services-like-images {
     height: 600px;
 }

 .services-like-images img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 20px;
 }

 .services-like-item {
     display: flex;
     gap: 15px;
     margin-bottom: 20px;
 }

 .services-like-item .icon i {
     color: #009245;
     font-size: 35px;
 }

 .services-like-item .content h3 {
     color: #000;
     margin: 0px;
     font-size: 20px;
     line-height: 100%;
     margin-bottom: 6px;
 }

 .services-like-item .content p {
     margin: 0px;
     text-align: justify;
 }

 .services-like-item .icon {
     padding-top: 4px;
 }

 .services-like-content .heading-text {
     font-size: 35px;
     line-height: 47px;
     margin-bottom: 30px;
 }

 .services-like-content.text-justify-center {
     margin-top: 40px;
 }

 .services-like-content.text-justify-center p {
     text-align: justify;
     text-align-last: center;
 }

 .services-like-content.text-justify-center p:last-child {
     margin: 0px;
 }

 .service-3 {
     background-image: url('../images/assets-banner.webp');
     align-items: center;
 }

 .mt30 {
     margin-top: 30px;
 }

 .d-flex.wealth-sol-grid.p-4.mt30 {
     gap: 20px;
 }

 .d-flex.wealth-sol-grid.p-4.mt30:hover .icon {
     background: #fff;
     z-index: 1;
 }

 .d-flex.wealth-sol-grid.p-4.mt30:hover .icon i {
     color: #0006d9;
     -webkit-text-fill-color: unset;
 }

 .mb40 {
     margin-bottom: 40px;
 }

 .why-section {
     padding: 100px 0px;
 }

 .why-content {
     margin-bottom: 30px;
 }

 .why-box {
     padding: 30px;
     text-align: center;
     background-color: #f9f9f9;
 }

 .why-box i {
     font-size: 60px;
     margin-bottom: 20px;
     color: var(--secondaryColor);
 }

 .why-box h3 {
     color: #000;
     margin: 0px;
 }

 .service-ready p {
     color: #fff;
 }

 .only-paragraph {
     padding: 50px 0px;
 }

 .only-paragraph p {
     color: #6e6e6e;
     font-size: 20px;
     margin: 0px;
 }

 .wealth-sol-grid:hover .cls-1 {
     fill: var(--primaryColor);
     /* Change this color to whatever you need for the hover effect */
 }

 .arbitrage-banner {
     background-image: url('../images/arbitrage-banner.webp');
 }

 .service-ready-div {
     margin-bottom: 70px;
 }

 .arbitrage-like-list .like-item .icon {
     background-color: transparent;
     width: 30px;
     height: 30px;
 }

 .arbitrage-like-list .like-item {
     background: transparent;
     align-items: unset;
     gap: 10px;
     padding: 0px;
     margin-bottom: 30px;
 }

 .arbitrage-like-list .like-item .content h3 {
     line-height: 100%;
     margin-bottom: 6px;
 }

 .arbitrage-like-list .like-item .content p span {
     color: #009245;
     font-weight: 600;
 }

 .arbitrage-like-list .like-item .content p {
     margin-bottom: 10px;
 }

 .arbitrage-like-list .like-item .content p:last-child {
     margin-bottom: 0px;
 }


 .banner-logo img {
     width: 100%;
 }



 .about-banner {
     background-image: none;
     background-color: #fff;
 }

 .about-banner img {
     max-height: 450px;
 }

 .about-banner .banner-content h1 {
     color: var(--primaryColor);
 }

 .about-banner .banner-content p {
     color: #000;
     text-align: justify;
     font-size: 12px;
     line-height: 18px;
     width: 78%;
 }

 .about-banner .banner-content .banner-btn {
     display: flex;
     align-items: center;
     gap: 20px;
 }

 .banner-logo img {
     width: 100%;
 }

 .about-banner .banner-content .banner-btn .theme-btn {
     border-radius: 12px;
 }

 .about-page-sec .about-content p {
     margin-bottom: 15px;
     text-align: justify;
 }

 .about-page-sec .theme-btn {
     background: var(--secondaryColor);
     border-radius: 12px;
 }

 .about-image img {
     width: 100%;
 }

 .wealth-box {
     margin-bottom: 40px;
 }

 .wealth-box h2 {
     font-size: 30px;
     line-height: 40px;
 }

 .tick-box img {
     width: 75px;
     margin-bottom: 14px;
 }

 .tick-box h6 {
     font-size: 15px;
 }

 .banner-logo {
     width: 200px;
     margin: 30px auto 0px auto;
 }

 .l-mb {
     margin-bottom: 1em !important;
 }

 .banner-col {
     max-width: 800px
 }

 .dashboard-btn-div .active {
     color: var(--secondaryColor);
     border: 0;
     font-weight: 400;

 }


 .dashboard-btn {
     transition: var(--transition);
     border-radius: 0;
     border: 0;

 }

 .dashboard-btn-div button {
     font-family: var(--textfonts) !important;
 }

 #all-ebook-data {
     border-left: 2px solid var(--secondaryColor);
 }

 .dashboard-btn:hover {
     color: white;

 }

 .dashboard-btn:active {

     color: var(--secondaryColor);
 }

 .dash-table {
     margin-top: 36.5px;
 }

 .price-details p {
     font-family: var(--headingfonts) !important;
 }

 .user-id-btn {
     background: none;
     border: 0;
     font-family: var(--textfonts);
     display: flex;
     gap: 5px;
 }



 .hoverable-dropdown:hover .dropdown-menu {
     display: block;
 }

 .dropdown-menu {
     overflow: hidden;
 }

 .dropdown-item {
     color: var(--textColor);
     font-family: var(--textfonts);
     transition: var(--transition);
 }

 .hoverable-dropdown {}

 .hoverable-dropdown .dropdown-item:focus,
 .hoverable-dropdown .dropdown-item:hover {
     background: #e7f3e5 !important;

 }

 .hoverable-dropdown .dropdown-toggle::after {
     display: none;
 }

 .modal-open {
     padding: 0 !important;
 }


 .video-container {
     /* Center and let it scale down on smaller screens */
     width: 100%;
     max-width: 100%;
     margin: 0 auto;
 }

 .video-wrapper {
     /* Maintain a responsive 16:9 aspect ratio */
     position: relative;
     padding-bottom: 56.25%;
     /* 16:9 */
     height: 0;
 }

 .video-wrapper iframe,
 .video-wrapper .video-thumbnail {
     /* Fill the parent container */
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

 .video-thumbnail {
     cursor: pointer;
     /* If you want a slight dark overlay on hover, you can add it here */
 }

 .thumbnail-image {
     /* Ensures the thumbnail image always covers the container size */
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .play-button {
     /* Play icon overlay (optional) */
     position: absolute;
     top: 50%;
     left: 50%;
     font-size: 4rem;
     color: #fff;
     transform: translate(-50%, -50%);
     pointer-events: none;
     /* So clicks go to .video-thumbnail instead */
 }

 /* new changes css */
 .shop-page-new {
     padding: 50px 0px;

     .book-content h3 {
         font-size: 18px !important;
         margin-bottom: 0px !important;
     }

     .book-box {
         padding: 30px;
         border-radius: 0px;
     }

     section:not(.sales-section) .book-img {
         min-height: 270px !important;
     }

     section:not(.sales-section) .book-img img {
         max-height: 270px !important;
     }

     .book-content h4 {
         font-size: 18px;
     }

     .price-details {
         margin-top: 10px;
     }

     .book-content .price-details p {
         font-size: 20px !important;
     }

     .Product_Hover_Content {
         border-radius: 0px;
     }

     .counter_info {
         color: #7cc366;
         font-weight: 700;
         font-size: 11px;
     }

 }

 .button-top-cart {
     max-height: 36px;
     display: flex;
     align-items: center;
     background: var(--primaryColor);
 }

 .product-tabs {
     column-gap: 40px;
     row-gap: 10px;
     margin-top: 60px;
     margin-bottom: 30px;

     .nav-link {
         border: none;
         font-size: 18px;
         color: #27b9ca;
         padding: 2px 5px;
         font-weight: 700;
     }

     .nav-link.active {
         background-color: transparent;
         color: #27b9ca;
         border-bottom: 2px solid #27b9ca;
     }
 }

 .books-grid-cus {
     gap: 70px 55px !important;
 }

 @media (max-width: 1366px) {
     .books-grid-cus {
         gap: 50px 40px !important;
     }
 }

 @media (max-width: 767px) {
     .shop-page-new {
         padding: 30px 0px;

         .books-grid-cus {
             gap: 40px !important;
         }

         .book-box {
             padding: 20px;
         }

         .nav-link {
             font-size: 16px;
         }
     }

     .product-tabs {
         column-gap: 20px;
         border: 0;
         margin-bottom: 20px;
         margin-top: 30px;
     }
 }


 .ban-new {

     background-size: cover;
     background-position: center;
     padding: 60px 0px;
     margin-top: -20px;
     overflow-x: hidden;
 }

 @media screen and (min-width: 767px) {
     .ban-new {
         overflow-y: hidden;
     }

 }

 .book-bg {
     width: 900px;
     opacity: 0.7;
     transform: translate(-50%, -50%) rotate(331deg) !important;
     z-index: -1;
 }

 @media screen and (max-width: 991px) {
     .book-bg {
         width: 700px;
     }

     .right-col {
         margin-top: 1rem !important;
     }

     .main-btn-cus {
         width: 75%;
     }

     .shop-book-img-col {
         margin-top: 3rem !important;
     }

 }

 @media screen and (max-width: 767px) {
     .main-btn-cus {
         width: 100%;
     }

     .footer-logo {
         margin-bottom: 15px;
     }

     .shop-book-img {
         max-width: 350px;
     }


 }

 .main-btn-cus {
     width: 50%;
     display: flex;
     justify-content: center;
 }

 .ban-col-cus {
     background-color: #fff;
     padding: 40px;
     bordr-radius: 20px;
 }




 .mt-50 {
     margin-top: 50px;
 }

 .icon-box-row-cus {
     padding-top: 50px;
     border-top: 1px solid #000;
     margin-left: 0px;
     margin-right: 0px;
 }

 .icon-box-row-cus h4 {
     color: var(--primaryColor);
 }

 .img-logo-4 {
     height: 90px;
     margin-top: 30px;
     margin-bottom: 35px;
 }

 #affiliateForm .select-with-icon {

     background-position-x: 98%;
     -webkit-appearance: none;
 }

 body.modal-open {
     padding-right: 0 !important;
      
 }

 .form-field.eye-icon i, .eye-icon i {
    position: absolute;
    top: 35%;
    right: 12px;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--primaryColor);
    max-width: 18px !important;
    width: 18px !important;
    transform: translateX(-4px);}