/* Smooth Scroll */
 :root {
     --bs-primary: #0C2D48;
     /* Deep Navy */
     --bs-primary-rgb: #04ACEA;
     /* Primary */
     --bs-primary-gradient: linear-gradient(110deg, #04ACEA, #1083C3, #04264A);
     --bs-primary-gradient-reverse: linear-gradient(110deg, #04264A, #1083C3, #04ACEA);
     --bs-secondary: #009688;
     /* Teal */
     --bs-info: #00AEEF;
     /* Sky Blue */
     --bs-danger: #E91E63;
     /* Pink */
     --bs-purple: #9C27B0;
     /* Accent Purple */
     --bs-light: #F5F7FA;
     /* Light Gray */
     --bs-dark: #0A192F;
     /* Dark Background */
     --bs-table-color: #586387;
 }

 body {
     font-family: 'Inter', sans-serif !important;
     color: #586387;
 }

 p,
 table,
 .table,
 .table td,
 table td {
     color: #586387;
 }

 .table th,
 table th {
     color: #33394b;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 .navbar-brand {
     font-family: 'Inter', sans-serif !important;
     font-weight: 700;
 }

 h1,
 h2,
 h3 {
     letter-spacing: -1px;
 }

 .text-primary {
     color: var(--bs-primary-rgb) !important;
 }

 .btn-primary {
     background: var(--bs-primary-gradient) !important;
     border-color: var(--bs-primary-gradient);
     border-radius: 25px;
     transition: .3s;
 }

 .btn-primary:hover {
     background: var(--bs-primary-gradient-reverse) !important;
     border-color: var(--bs-light);
 }

 .btn-secondary {
     border: 1px solid #E2E8F0;
     background: #CED5DB;
     color: #04264A;
 }

 .btn-secondary:hover,
 .btn-secondary.show,
 .btn-secondary:active {
     border: 1px solid #E2E8F0 !important;
     background: #c3cad1 !important;
     color: #04264A !important;
 }

 /* Dipesh Profile */
 .card {
     border: 1px #E2E8F0 solid;
     border-radius: 15px;
     box-shadow: none;
     /* box-shadow: 0 4px 12px rgba(0,0,0,0.05); */
 }

 .card .card-body {
     padding: 1.5rem;
 }

 .card-title {
     color: #252C32;
     font-size: 18px !important;
     border-bottom: 1px solid #d7d7d7;
     margin-bottom: 20px;
     padding-bottom: 10px;
     position: relative;
 }

 .card-title:after {
     position: absolute;
     content: "";
     height: 3px;
     width: 50px;
     background-color: #04ACEA;
     border-radius: 4px;
     left: 0;
     bottom: -2px;
 }

 .text-simple {
     color: #586387;
 }

 .accent {
     color: #04ACEA;
 }

 .btn-outline-primary {
     border-radius: 30px;
     border: 1px solid #0D8CCF;
     padding: 10px 30px;
     color: #0D8CCF;
 }

 .btn-outline-primary:hover {
     background: #04ACEA;
     background: linear-gradient(148deg, rgba(4, 172, 234, 1) 0%, rgba(16, 131, 195, 1) 57%, rgba(4, 38, 74, 1) 100%);
     border: 1px solid rgba(226, 232, 240, 0.24);
     color: #ffffff;
 }

 .skill-badge {
     background: rgba(213, 241, 251, 0.35);
     /* border-radius: 10px; */
     font-weight: 400;
     border: 1px solid #A6E1F6;
     color: #04ACEA;
     padding: 8px 10px;
     margin-right: 3px;
     margin-bottom: 5px;
     display: inline-block;
 }

 .btn-gradient {
     background: #04ACEA;
     background: linear-gradient(148deg, rgba(4, 172, 234, 1) 0%, rgba(16, 131, 195, 1) 57%, rgba(4, 38, 74, 1) 100%);
     color: #fff;
     border: 1px solid rgba(226, 232, 240, 0.24);
     border: none;
     border-radius: 50px;
     padding: 10px 25px;
     font-weight: 500;
     transition: all 0.3s ease;
 }

 .btn-gradient:hover {
     opacity: 0.9;
     color: #fff;
 }

 /*  */

 .section-accent {
     background: linear-gradient(90deg, #009688, #00AEEF);
     color: #fff;
     padding: 60px 0;
 }

 .title1 {
     color: #35b6b1;
 }

 .rank {
     background-color: #eea662;
     width: 50px;
     height: 50px;
     border-radius: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     color: #010e18;
 }

 .bg-gradient-start-6 {
     background: linear-gradient(to right, #cdf1ef, #effaf9);
 }

 .university-card {
     padding: 20px 25px;
     margin-top: 25px;
     border-radius: 15px;
     transition: 0.3s ease;
 }

 .university-card:hover {
     transform: translateY(-2px);
     border: 1px #04ACEA solid;
 }

 .university-card h5 {
     font-size: 24px !important;
 }

 .university-card p {
     color: #586387;
 }

 .bg-light-blue {
     background-color: #F2F2F5;
 }

 .lapis-blue {
     color: #19237F;
 }

 .primary-color {
     color: #04ACEA;
 }

 /* .bg-primary {
     background-color: #04ACEA !important;
 } */

 .text-balck2 {
     color: #0F172A !important;
 }


 .fs-20 {
     font-size: 20px !important;
 }

 .fs-35 {
     font-size: 35px !important;
 }

 .fs-12 {
     font-size: 12px !important;
 }

 .university-card .badge {
     padding: 8px 10px;
 }

 .input-group-text {
     background-color: transparent !important;
 }


 .form-check {
     display: flex;
     align-items: center;
     margin-bottom: 5px;
 }

 .list-group {
     margin-top: 50px;
     border: 1px #dddddd96 solid;
     box-shadow: 0 3px 10px rgb(64 82 219 / 5%);
     transition: all .3s;
 }

 .list-group h6 {
     color: #252C32;
     font-size: 18px !important;
     margin-top: 25px;
     border-bottom: 1px solid #d7d7d7;
     margin-bottom: 10px;
     padding-bottom: 5px;
     position: relative;
 }

 .list-group h6:after {
     position: absolute;
     content: "";
     height: 3px;
     width: 50px;
     background-color: #04ACEA;
     border-radius: 4px;
     left: 0;
     bottom: -2px;
 }

 .list-group label {
     font-size: 14px;
     transition: .2s;
     color: #1B2559;
 }

 .list-group label:hover {
     font-weight: 600;
 }

 .list-group .form-check {
     margin-bottom: 7px;
 }

 .underline-tabs .nav-link {
     font-size: 16px !important;
     font-weight: 600 !important;
     padding: 5px;
     margin-right: 20px;
 }

 .offcanvas.offcanvas-start {
     width: 80%;
 }

 .course-card {
     border-radius: 15px;
     overflow: hidden;
     box-shadow: 0 4px 15px rgb(0 0 0 / 6%);
     padding: 20px;
     /* padding-bottom: 57px; */
 }

 .university-carousel {
     overflow: hidden;
     border-radius: 15px;
 }

 .university-carousel .carousel-item {
     position: relative;
 }

 .university-carousel .carousel-item:before {
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.35) 58.65%, rgba(0, 0, 0, 0.72) 100%);
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
 }

 .university-carousel .carousel-item img {
     height: auto;
 }

 .carousel-control-next,
 .carousel-control-prev {
     opacity: .9;
 }

 .carousel-control-next-icon,
 .carousel-control-prev-icon {
     width: 50px;
     height: 50px;
     border-radius: 7px;
     background-color: white;
     color: #3A96F7;
     background-size: auto;
 }

 .carousel-control-prev-icon {
     background-image: url(../images/icon/prev-arrow.svg);
 }

 .carousel-control-next-icon {
     background-image: url(../images/icon/next-arrow.svg);
 }

 .carousel-content {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     position: absolute;
     bottom: 30px;
     z-index: 2;
     width: 100%;
     padding: 0 30px;
 }

 .courses-tabs h2 {
     padding: 15px;
     border: 1px #ddd solid;
     border-radius: 10px;
     margin: 15px 0;
 }

 .courses-tabs h2 button {
     margin-bottom: 0 !important;
 }

 .dropdown-item {
     color: #6F7782;
     font-size: 14px;
 }

 .dropdown-item.active,
 .dropdown-item:active {
     background-color: #ECF7FF !important;
     color: #04ACEA !important;
     border-radius: 5px;
 }



 .course-banner {
     position: relative;
 }


 .uni-badge {
     position: absolute;
     bottom: -25px;
     left: 15px;
     background-color: rgb(255 255 255 / 100%);
     padding: 10px 15px 10px 15px;
     border-radius: 15px;
     border: 1px #04ACEA solid;
     box-shadow: 0 4px 15px rgb(64 82 219 / 10%);
 }

 .university-logo {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     border: 2px solid white;
 }

 .university-logo-floating {
     position: absolute;
     bottom: -15px;
     left: 15px;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     border: 2px solid white;
 }


 .course-banner {
     background-position: center;
     background-size: cover;
     height: 25vh;
     width: 100%;
     border-radius: 15px;
     margin-bottom: 20px;
 }

 .course-rating {
     position: absolute;
     right: 20px;
     top: 50px;
     flex-direction: column;
 }

 .course-rating h3 {
     font-size: 24px !important;
     font-weight: 600;
 }

 .course-rating h3 span {
     font-size: 14px;
     font-weight: normal !important;
 }

 .uni-info {
     display: flex;
 }

 .uni-info li {
     position: relative;
     margin-right: 15px;
     color: #475569;
 }

 /* .uni-info li::after {
     content: '';
     position: absolute;
     right: -20px;
     height: 12px;
     width: 1px;
     background-color: #cccccc;
     top: 9px;
 } */


 .uni-info li:last-child::after {
     display: none !important;
 }

 .btn-border {
     border-radius: 100px;
     padding: 10px 20px;
     background-color: #04ACEA;
 }

 /* .btn-primary {
     background-color: #04ACEA !important;
 } */

 .overview-tab {
     margin-top: 20px;
     padding: 0 20px 20px;
 }

 .overview-tab .bordered-tab .nav-link {
     color: #6F7782;
     font-weight: 600;
     padding: 15px 30px !important;
 }

 .overview-tab .bordered-tab .nav-link.active {
     background: var(--bs-primary-gradient) !important;
     border-color: var(--bs-primary-gradient);
     border-radius: 10px;
     border-bottom: 0;
 }

 .overview-tab .bordered-tab .nav-link.active::before {
     display: none;
 }

 .oveview-card {
     /* background-color: #FDFDFD; */
     border: 1px solid #E2E8F0;
     padding: 30px 35px;
     border-radius: 15px;
 }

 .oveview-card2 {
     padding: 30px 25px !important;
 }

 .oveview-card h4 {
     font-size: 20px !important;
     font-weight: 600;
     color: #0F172A;
 }

 .oveview-txt {
     /* color: #475569; */
     font-size: 16px;
     font-weight: 400;
     margin: 20px 0 30px;
 }

 .oveview-card-div h3 {
     color: #0F172A;
     font-weight: 600;
     font-size: 18px !important;
 }

 .oveview-card-div p {
     color: #64748B;
     font-weight: 500;
     font-size: 16px;
 }

 .oveview-card-div {
     align-items: flex-start;
 }

 .mt-4 {
     margin-top: 30px !important;
 }

 .mt-3 {
     margin-top: 20px;
 }


 .testimonial-slider {
     max-width: 400px;
     margin: auto;
 }

 .testimonial {
     background: transparent;
     border-radius: 15px;
     padding: 20px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     text-align: center;
     border: 1px solid #E2E8F0;
     margin: 10px;
 }

 .stars {
     color: #ff9f29;
     font-size: 20px;
 }

 .testimonial-text {
     font-size: 16px !important;
     margin: 10px 0 !important;
     font-weight: 400 !important;
     text-align: left !important;
     margin: 20px 0 !important;
 }

 .profile {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-top: 15px;
 }

 .profile img {
     width: 50px;
     height: 50px;
     border-radius: 50%;
 }

 .profile-info h4 {
     margin: 0;
     font-size: 18px !important;
 }

 .profile-info p {
     margin: 0;
     font-size: 14px;
     color: #475569;
     margin-top: 5px;
 }

 .slick-arrow {
     color: #fff;
     position: unset;
     top: 50%;
     transform: none;
     left: 16px;
     font-size: 0;
     line-height: 0;
     z-index: 1;
 }


 .slick-track {
     display: flex;
     align-items: stretch;
 }

 .slick-slide {
     height: auto;
     flex: 1;
 }


 .right-arrow {
     position: absolute;
     top: 50%;
     right: 0 !important;
     left: auto;
     width: 30px;
     height: 30px;
 }

 .left-arrow {
     position: absolute;
     top: 50%;
     left: 0 !important;
     width: 30px;
     height: 30px;
 }

 /* .overview-bg::before {
     content: '';
     background-color: #F7F8FB;
     position: absolute;
     left: 0;
     right: 0;
     height: 70vh;
     width: 100%;
     top: 0;
     z-index: 0;
 } */

 .z1 {
     z-index: 1;
 }

 .bordered-tab .nav-link.active {
     color: #ffffff;
     font-weight: 600;
 }

 .bordered-tab .nav-link::before {
     height: 2px;
     background-color: #ffffff;
 }

 .review-list {
     position: relative;
 }

 .review-list li {
     display: list-item;
     position: relative;
     padding-left: 30px;
     /* Space for the image */
     margin-bottom: 15px;
 }

 .review-list li::before {
     content: url('../images/icon/list.svg');
     /* Set the bullet image */
     position: absolute;
     left: 0;
     top: 3px;
 }


 .review-list {
     list-style: none;
     /* Remove default bullets */
     padding-left: 0;
 }

 .tag-div {
     background-color: #F6F6F6;
     color: #04ACEA;
     padding: 10px 20px;
     border-radius: 100px;
     font-size: 12px;
     font-weight: 600;
     display: flex;
     align-items: center;
 }

 .me-4 {
     margin-right: 20px !important;
 }

 .review-card {
     border-radius: 15px;
     padding: 40px 35px;
     box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
     background-color: #F6F6F6;
 }


 .review-card h5 {
     font-size: 24px !important;
 }

 .review-card {
     cursor: pointer;
 }

 .review-card:hover {
     border: 1px solid #04ACEA;
 }

 .review-btn {
     float: right;
 }

 /* .review-card:hover .review-btn {
    display: block !important;
    float: right;
} */

 .rating-div {
     box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
     background-color: #F6F6F6;
     border-radius: 15px;
     padding: 10px 15px;
     border: 1px solid #04ACEA;
     /* transition: .3s; */
     position: relative;
 }


 .rating-count h4 {
     color: #4F547B;
     font-weight: 600;
     font-size: 16px;
 }

 .rating-count .num {
     font-size: 45px;
     color: #04ACEA;
     font-weight: 400;
     margin: 0;
 }

 .rating-count span {
     color: #4F547B;
     font-weight: 500;
     font-size: 14px;
     margin-top: 10px;
 }


 .rating-div2 {
     box-shadow: none;
     background-color: transparent;
     border-radius: 0;
     padding: 0;
     border: 0;
 }

 .rating-div2 p {
     color: #0C0E2B;
 }

 .star-color {
     color: #ff9f29 !important;
 }

 .rating-tooltip {
     position: absolute;
     right: -277px;
     top: 55px;
     opacity: 0;
     transition: opacity 0.5s ease-in-out;
 }


 .review-card:hover .rating-tooltip {
     opacity: 1;
     z-index: 9;
 }

 .review-card:hover .rating-div::after {
     display: block;
 }

 .rating-div::after {
     content: '';
     position: absolute;
     top: 60px;
     left: -11px;
     width: 0;
     height: 0;
     border-style: solid;
     border-top: 10px solid transparent;
     border-bottom: 10px solid transparent;
     border-right: 10px solid #2563ebb8;
     border-left: 0;
     display: none;

 }

 .overview-tab .accordion-item {
     background-color: transparent !important;
     border: 0 !important;
     padding: 0;
     box-shadow: none;
 }

 .top-page-card {
     background-color: #EEF4FF;
     padding: 5px;
 }

 .light-text1 {
     color: #8C8F9A;
 }

 .recommender-logo {
     width: 50px;
     height: 50px;
 }

 .btn-outline {
     border: 1px solid #CBD5E1 !important;
     padding: 0px 20px !important;
     font-size: 14px;
     height: 40px;
     line-height: normal !important;
     display: block;
 }

 .btn-with-color {
     /* border: 1px solid #CBD5E1 !important; */
     padding: 0px 20px !important;
     font-size: 14px;
     height: 40px;
     line-height: normal !important;
     display: block;
     background-color: #04ACEA;
     color: #ffffff;
 }

 .btn-outline:hover {
     background-color: #04ACEA;
     color: #ffffff;
 }

 .btn-with-color:hover {
     background-color: transparent;
     border: 1px solid #04ACEA;
 }

 .input-border {
     border-radius: 100px;
     border: 1px solid #CBD5E1 !important;
     background-color: transparent !important;
 }

 .fs-30 {
     font-size: 30px !important;
 }

 .progress-container .progress-bar {
     position: fixed;
     top: 107px;
     left: 0;
     height: 10px;
 }

 /* .progress-bar {
    background: #04ACEA !important;
    background: linear-gradient(90deg, rgba(4, 172, 234, 1) 0%, rgba(16, 131, 195, 1) 55%, rgba(4, 38, 74, 1) 100%) !important;
 } */

 .progress-container .progress-bar {
     width: 100%;
     height: 10px;
     background: #e5e7eb;
     border-radius: 10px;
     overflow: hidden;
 }

 .progress-bar-fill {
     height: 100%;
     background: #04ACEA !important;
     background: linear-gradient(90deg, rgba(4, 172, 234, 1) 0%, rgba(16, 131, 195, 1) 55%, rgba(4, 38, 74, 1) 100%) !important;
     transition: width 0.3s ease;
 }

 .progress-text {
     font-size: 16px;
     color: #1a202c;
 }

 .progress-error {
     color: #dc3545;
     font-weight: bold;
 }

 .progress-div h4 {
     font-size: 20px !important;
 }

 .quests-innner {
     background-color: #f9fafc;
     padding: 15px 20px;
     border-radius: 15px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
 }

 .quests-innner p {
     font-size: 18px;
     color: #0F172A;
     font-weight: 600;
 }

 .quests-innner i {
     font-size: 20px;
     margin-right: 10px;
 }

 .quests-innner .btn {
     padding: 7px 25px !important;
 }

 .orange {
     color: #DB762A;
 }

 .btn-orange {
     background-color: #DB762A;
     border-color: #DB762A;
 }

 .quests-accordion .accordion-collapse {
     margin-top: 25px;
 }

 .quests-accordion .accordion-body {
     margin-top: 20px;
 }

 .quests-accordion h6 {
     font-size: 20px !important;
 }

 .btn-light {
     background-color: #E2E8F0;
     border-color: #E2E8F0;
     color: #000;
 }

 .text-light {
     color: #94A3B8 !important;
 }



 .badge-card {
     max-width: 800px;
     border-radius: 10px;
     text-align: center;
     padding: 30px 50px;
     margin: 50px auto;
     background-color: #FDFDFD;
     border: 1px solid #E2E8F0;
     color: #475569 !important;
     box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
 }

 .badge-title {
     color: #ff0080;
     font-weight: bold;
     font-size: 24px;
 }

 .badge-text {
     color: #00ff00;
     font-weight: bold;
 }

 .highlight-box {
     background: rgba(255, 255, 255, 0.1);
     padding: 15px;
     border-radius: 8px;
     border: 1px dotted #FF6C14;
     display: inline-block;
     margin: 15px 0;
 }

 .highlight-box span {
     color: #FF6C14;
     font-weight: bold;
 }

 .links a {
     color: #00d4ff;
     text-decoration: none;
     margin-right: 10px;
 }

 .links a:hover {
     text-decoration: underline;
 }


 .badge-card ul {
     list-style-type: disc;
     text-align: left;
     margin-left: 70px;
     margin-bottom: 15px;
 }

 .rating-div-inner::after {
     content: '';
     position: absolute;
     top: -10px;
     left: 0;
     width: 0;
     height: 0;
     right: 0;
     text-align: c;
     border-style: solid;
     border-right: 10px solid transparent;
     border-left: 10px solid transparent;
     border-bottom: 10px solid #2563ebb8;
     border-top: 0;
     margin: 0 auto;
 }

 .rating-tooltip-inner {
     position: absolute;
     right: 0;
     top: auto;
     bottom: -254px;
     margin: 0 auto;
 }

 .pagination a {
     background-color: #ffffff;
     color: #04ACEA !important;
 }

 .pagination .active>.page-link,
 .page-link.active {
     background-color: #04ACEA !important;
     color: #ffffff !important;
 }

 .reviewModal .modal-content {
     background-color: #F6F6F6 !important;
 }

 .btn-info-600 {
     background-color: var(--info-600) !important;
     color: #fff !important;
     border-color: var(--info-600) !important;
 }

 body.offcanvas-active {
     overflow: hidden;
 }

 .offcanvas-header {
     display: none;
 }

 .screen-darken {
     height: 100%;
     width: 0%;
     z-index: 30;
     position: fixed;
     top: 0;
     right: 0;
     opacity: 0;
     visibility: hidden;
     background-color: rgba(34, 34, 34, 0.6);
     transition: opacity .2s linear, visibility 0.2s, width 2s ease-in;
 }

 .screen-darken.active {
     z-index: 10;
     transition: opacity .3s ease, width 0s;
     opacity: 1;
     width: 100%;
     visibility: visible;
 }

 /* Dipesh */
 .bg-1 {
     background-color: rgba(205, 22, 5, 0.10);
     color: #CD1605 !important;
     padding: 2px 10px;
     border-radius: 8px;
 }

 .bg-2 {
     background-color: rgba(205, 122, 5, 0.10);
     color: #CD7005 !important;
     padding: 2px 10px;
     border-radius: 8px;
 }

 .bg-3 {
     background-color: #ECF0FA;
     color: #28529E !important;
     padding: 2px 10px;
     border-radius: 8px;
 }

 .bg-4 {
     background-color: #dde1ff;
     color: #2c3cb5 !important;
     padding: 2px 10px;
     border-radius: 8px;
 }

 /* Floating button */
 #floatingBtn {
     position: fixed;
     bottom: 90px;
     right: 15px;
     z-index: 1050;
     padding: 0;
     transition: transform 0.3s ease, opacity 0.3s ease;
     transform: translateY(50px);
     opacity: 0;
     background: transparent !important;
     border: none !important;
 }

 #floatingBtn:hover {
     transform: translateY(2px) !important;
 }

 #floatingBtn img {
     width: 65px;
     height: 65px;
 }

 /* .feedback-btn {
     display: flex;
     background: linear-gradient(90deg, #00c6ff, #004080);
     padding: 5px 20px;
     border-radius: 100px;
     color: #ffffff;
     font-size: 14px;
     align-items: center;
 }

 .feedback-btn svg {
     margin-right: 10px;
 } */

 .feedback-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     /* center SVG */
     background: linear-gradient(90deg, #00c6ff, #004080);
     color: #ffffff;
     border-radius: 50px;
     width: 35px;
     height: 35px;
     overflow: hidden;
     cursor: pointer;
     transition: width 0.3s ease, padding 0.3s ease;
     white-space: nowrap;
     padding: 0;
     /* no padding initially */
 }

 .feedback-btn svg {
     transition: margin-right 0.3s ease;
     height: 15px;
     width: 15px;
 }

 /* Text hidden initially */
 .feedback-btn span {
     display: none;
     margin-left: 0;
     transition: opacity 0.2s ease;
 }

 /* Hover → expand & align left */
 .feedback-btn:hover {
     width: 140px;
     padding: 0 15px;
     /* space for text */
     justify-content: flex-start;
 }

 .feedback-btn:hover svg {
     margin-right: 10px;
     /* only add gap on hover */
 }

 .feedback-btn:hover span {
     display: block;
 }



 /* Show button animation */
 #floatingBtn.show {
     transform: translateY(0);
     opacity: 1;
 }

 /* Floating card */
 #floatingCard {
     position: fixed;
     bottom: 10px;
     right: 10px;
     width: min(90vw, 380px);
     max-height: 80vh;
     overflow-y: auto;
     transform: translateY(120%);
     transition: transform 0.4s ease;
     z-index: 2000;
 }

 #floatingCard.show {
     transform: translateY(0);
 }

 .feedback-box {
     /* width: 380px; */
     background: #fff;
     border-radius: 10px;
     box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.07);
     padding: 20px;
     background: #EDF6F9;
     /* background: linear-gradient(180deg, rgba(237, 246, 249, 1) 0%, rgba(246, 252, 255, 1) 100%); */
 }

 .feedback-box .close-btn {
     float: right;
     font-size: 24px;
     font-weight: 600;
     color: #333;
     cursor: pointer;
     vertical-align: top;
     position: absolute;
     right: 0;
     top: -15px;
 }

 .feedback-box h5 {
     font-size: 24px;
 }

 .feedback-box p {
     color: #4D5154;
 }

 .feedback-box .form-check label {
     margin-bottom: 0;
 }

 .feedback-box .form-check {
     gap: 12px;
 }

 .feedback-box textarea {
     border-radius: 5px !important;
     padding: 0.5625rem 1.25rem;
     height: auto;
     border: 1px #E2E8F0 solid !important;
 }

 .rating-scale {
     display: flex;
     justify-content: space-between;
     margin-top: 10px;
     border-radius: 15px;
 }

 .rating-scale label {
     cursor: pointer;
     padding: 0 6px;
     border-radius: 5px;
     color: #333333;
     margin: 0;
     font-weight: 400;
 }

 .rating-scale label:hover {
     background-color: #ECF7FF;
 }

 .rating-scale label:active,
 .rating-scale label.active {
     background-color: #ECF7FF;
     color: #04ACEA;
 }

 .form-check label {
     color: #212529;
 }

 .error-div {
     background-size: cover;
     background-position: bottom center;
     background-repeat: no-repeat;
 }

 /* .btn-outline-primary{
    color: #0c2d48;
    border: 1px #0c2d48 solid;
}
.btn-outline-primary:hover{
    color: #0c2d48 !important;
} */
 .review-bg {
     background-size: cover;
     background-position: bottom center;
     background-repeat: no-repeat;
 }

 .review-bg .card {
     border-radius: 25px;
 }

 .review-bg .card-body {
     padding: 10px;
 }

 .review-header {
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
     border-radius: 20px;
 }

 .review-title {
     color: #04ACEA;
     border: 1px rgba(64, 82, 219, 0.19) solid;
     padding: 10px 50px;
     box-shadow: 0 5px 15px rgba(37, 48, 139, 0.07);
     border-radius: 45px;
     text-align: center;
     width: fit-content;
     margin: 0 auto;
     margin-top: -35px;
 }

 .review-form label {
     font-size: 16px;
     color: rgba(17, 24, 39, 0.9);
 }

 .review-form input,
 .review-form textarea,
 .review-form select {
     border: 1px rgba(64, 82, 219, 0.19) solid;
     border-radius: 25px;
     box-shadow: 0 5px 15px rgba(37, 48, 139, 0.07);
     padding: 11px 20px;
     font-weight: 600;
     color: rgba(0, 0, 0, 0.6) !important;
 }

 .review-form input,
 .review-form select {
     height: 48px;
 }

 .review-form label.btn {
     border: 1px rgba(64, 82, 219, 0.19) solid;
     border-radius: 25px;
     box-shadow: 0 5px 15px rgba(37, 48, 139, 0.07);
     padding: 11px 30px;
     transition: .3s;
     color: rgba(0, 0, 0, 0.6);
     font-weight: 600;
 }

 .review-form label.btn:hover {
     transform: translateY(-3px);
     border: 1px #04ACEA solid;
 }

 .review-form .btn-check:checked+.btn {
     color: #04ACEA !important;
     background-color: #ffffff !important;
     border-color: #04ACEA !important;
 }

 .review-form .form-control[readonly] {
     background-color: #ffffff;
 }

 .category-btn .btn {
     font-size: 12px;
     border-radius: 8px;
     padding: 10px 20px;
     font-weight: 600;
     letter-spacing: 2%;
     border-color: #D6D3D4;
     /* color: #605F63; */
 }


 /* .btn-outline-primary.active{
            transition: background-color 0.3s ease, transform 0.2s ease;
            border-color: #0c2d48;
            color: #ffffff;
        }

        .btn-outline-primary:hover {
            border-color: #0c2d48;
            color: #ffffff !important;
            transform: scale(1.03);
        } */

 .mb-4 {
     margin-bottom: 30px !important;
 }

 .select2-container {
     border: 1px rgba(64, 82, 219, 0.19) solid;
     border-radius: 25px !important;
     box-shadow: 0 5px 15px rgba(37, 48, 139, 0.07);
     /* padding: 11px 20px; */
     font-weight: 600;
     color: rgba(0, 0, 0, 0.6) !important;
 }

 .select2-container--default .select2-selection--single {
     /* border-radius: 25px !important; */
     border: 0;
 }


 /* Dashboard */
 /* .bg-gradient-start-1 {
    background: linear-gradient(to right, #04ACEA, #A86DE2);
}
.bg-gradient-start-2 {
    background: linear-gradient(to right, #E26D6D, #ff8d3c);
} */
 .bg-gradient-start-3 {
     background: linear-gradient(to right, #5b8bf1, #40DB6F);
 }

 .sm-table tbody tr td {
     font-size: 14px;
     font-weight: 500;
     color: #4b5563;
 }

 .sm-table a:hover {
     color: #04ACEA;
 }

 .custom-grid {
     display: grid;
     grid-template-columns: repeat(1, minmax(0, 1fr));
     gap: 1rem;
     /* gap-4 = 1rem */
 }

 .select2-container .selection {
     width: 100% !important;
 }

 .select2-container--default .select2-selection--single .select2-selection__arrow {
     top: 6px !important;
     right: 0px !important;
 }

 .select2-container--default .select2-selection--single .select2-selection__clear {
     position: absolute;
     right: 0;
 }

 .dashboard-btn {
     position: absolute;
     top: 25px;
     right: 20%;
 }

 .task-card .card-title {
     border-bottom: 0;
     margin-bottom: 0;
 }

 .task-card .card-title:after {
     display: none;
 }

 .task-input {
     margin-left: 0 !important;
 }


 .save-btn-container {
     margin: 0 !important;
     margin-top: 10px !important;
 }

 .save-btn-container .btn {
     padding: 8px 20px !important;
 }

 .feedback-btn-new {
     border-radius: 50%;
     background-color: #1083c3;
     padding: 6.5px !important;
     width: 60px !important;
     height: 60px !important;
     /* box-shadow: 2px 12px 14px rgba(0, 0, 0, 0.3); */
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: inset 0 0 0 2px #ffffff;
 }

 .feedback-btn-new span:after {
     content: "";
     position: absolute;
     bottom: 14px;
     width: 10px;
     height: 10px;
     background: #1083c3;
     left: 100%;
     margin-left: -5px;
     -moz-transform: rotate(-45deg);
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg);
 }

 .feedback-btn-new:hover span {
     display: block;
 }

 .feedback-btn-new span {
     background: #1083c3;
     border-radius: 3px;
     color: #ffffff;
     font-size: 13px;
     box-sizing: border-box;
     width: auto;
     height: auto;
     padding: 10px 8px;
     letter-spacing: 1px;
     line-height: 15px;
     position: fixed;
     text-align: center;
     bottom: 5px;
     right: 68px;
     -webkit-transition: display 0.7s;
     transition: display 0.7s;
     display: none;
 }

 /* Tour Css */


 .tour-btn {
     border-radius: 50%;
     background-color: #1083c3;
     padding: 6.5px !important;
     width: 60px !important;
     height: 60px !important;
     /* box-shadow: 2px 12px 14px rgba(0, 0, 0, 0.3); */
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: inset 0 0 0 2px #ffffff;
 }

 .tour-btn span:after {
     content: "";
     position: absolute;
     bottom: 14px;
     width: 10px;
     height: 10px;
     background: #1083c3;
     left: 100%;
     margin-left: -5px;
     -moz-transform: rotate(-45deg);
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg);
 }

 .tour-btn:hover span {
     display: block;
 }

 .tour-btn span {
     background: #1083c3;
     border-radius: 3px;
     color: #ffffff;
     font-size: 13px;
     box-sizing: border-box;
     width: auto;
     height: auto;
     padding: 10px 8px;
     letter-spacing: 1px;
     line-height: 15px;
     position: fixed;
     text-align: center;
     bottom: 173px;
     right: 89px;
     -webkit-transition: display 0.7s;
     transition: display 0.7s;
     display: none;
 }

 #startTourBtn {
     background: #004aad;
     color: #fff;
     /* padding: 10px 20px; */
     border-radius: 100%;
     border: none;
     cursor: pointer;
     transition: background 0.2s;
     position: fixed;
     bottom: 164px;
     right: 15px;
     /* height: 35px; */
     /* width: 35px; */
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0;
     z-index: 9;
 }


 #startTourBtn:hover {
     background: #007bff;
 }


 @media (min-width: 768px) {
     .custom-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }


 }

 @media (max-width: 1280px) {
     .overview-tab .bordered-tab .nav-link {
         padding: 15px 23px !important;
     }
 }

 @media (min-width: 1024px) {
     .custom-grid {
         grid-template-columns: repeat(3, minmax(0, 1fr));
     }

     .w-lg-25 {
         width: 25% !important;
     }

     .w-lg-50 {
         width: 50% !important;
     }




 }

 /* Tour Css */
 .introjs-button {
     background-color: var(--brand) !important;
     color: #fff !important;
     text-shadow: none !important;
     border-radius: 10px !important;
 }

 .introjs-tooltiptext {
     color: var(--text-primary-light) !important;
     padding: 0 20px !important;
 }

 .introjs-fixedTooltip {
     box-shadow: rgb(72, 126, 254) 0px 0px 1px 2px, rgba(33, 33, 33, 0.5) 0px 0px 0px 5000px !important;

 }

 /* Tour Css end*/


 /* ============ mobile view ============ */
 @media all and (max-width: 991px) {
     .offcanvas-header {
         display: block;
     }

     .mobile-offcanvas {
         visibility: hidden;
         transform: translateX(-100%);
         border-radius: 0;
         display: block;
         position: fixed;
         top: 0;
         left: 0;
         height: 100%;
         width: 80%;
         z-index: 1200;
         overflow-y: scroll;
         overflow-x: hidden;
         transition: visibility .3s ease-in-out, transform .3s ease-in-out;
     }

     .mobile-offcanvas.show {
         visibility: visible;
         transform: translateX(0);
     }

     .mobile-offcanvas .container,
     .mobile-offcanvas .container-fluid {
         display: block;
     }

     .university-carousel .carousel-item img {
         height: 500px;
         object-fit: cover;
         object-position: center;
     }

     .carousel-content {
         bottom: 10px;
         padding: 0 5px;
     }

     .btn.btn-sm {
         padding: 0.5rem 0.5rem;
         font-size: 0.75rem;
     }

     .lead {
         font-size: 15px;
     }

     #floatingCard {
         right: 0;
         width: 100%;
     }

     .dashboard-btn .btn {
         padding: 8px 15px !important;
         font-size: 14px !important;
     }

     .feedback-btn {
         width: 30px;
         height: 30px;
     }

     .tour-btn,
     .feedback-btn-new {
         width: 40px !important;
         height: 40px !important;
     }

     #startTourBtn {
         bottom: 140px;
     }

     .feedback-btn-new svg {
         height: 20px;
         width: 20px;
     }
 }

 /* ============ mobile view .end// ============ */
 .main-header .navbar-brand img {
     width: 150px;
 }

 /* .main-header .nav-link {
    color: #0C0E2B !important;
    font-weight: 600;
} */
 .main-header .nav-link {
     color: #0C0E2B !important;
     font-weight: 500;
     padding: 5px 10px !important;
 }

 .main-header .nav-link:hover {
     color: #4052DE;
 }

 .main-header .navbar-nav {
     margin-top: 0 !important;
 }

 /* .main-header .dropdown-toggle {
     padding: 10px 25px !important;
 } */

 .navbar {
     transition: all 0.4s ease-in-out;
     border-bottom: 1px #E5E5E5 solid;
     /* -webkit-box-shadow: 0 3px 15px 0 rgb(0 0 0 / 6%);
     -moz-box-shadow: 0 3px 15px 0 rgb(0 0 0 / 6%);
     box-shadow: 0 3px 15px 0 rgb(0 0 0 / 6%); */
 }

 .navbar.fixed-top {
     position: fixed;
     top: -60px;
     /* Initially hidden */
     width: 100%;
     background-color: white !important;
     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
     transition: all 0.4s ease-in-out;
 }

 .navbar.fixed-top.scrolled {
     top: 0;
     opacity: 1;
 }

 .dashboard-main-full {
     padding-top: 0 !important;
 }


 .dropdown-menu[data-bs-popper] {
     left: -3px;
 }

 .overview-bg2::before {
     height: 5vh !important;
 }

 .underline-tabs .nav-tabs {
     border: 1px solid #BAC2DC;
     background: #FFF;
     border-radius: 10px;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.07);
     ;
 }

 .underline-tabs .nav-link {
     border: none;
     padding: 10px 1.5rem;
     margin-bottom: -1px;
     transition: all 0.3s ease;
     color: #4b5563ce;
     border: transparent;
     background-color: transparent
 }

 .underline-tabs .nav-link:hover {
     color: #04ACEA;
     background-color: transparent
 }

 .underline-tabs .nav-link.active {
     color: #ffffff;
     background: var(--bs-primary-gradient);
     border-color: transparent;
     border-radius: 10px;
 }

 /* Content Animation */
 .tab-pane.fade {
     transition: all 0.2s ease-out;
 }

 .tab-pane.fade.show {
     animation: fadeIn 0.5s ease-out;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }


 .scholarship-item,
 .course-item {
     border: 1px solid #E2E8F0;
     padding: 25px;
     border-radius: 12px;
     margin-bottom: 20px !important;
 }

 .scholarship-item h5 {
     font-size: 16px !important;
 }

 .course-item h5 {
     font-size: 20px !important;
     margin-bottom: 20px !important;
 }

 .count-num {
     position: absolute;
     right: -18px;
 }

 .count-svg {
     height: 60px;
     width: 60px;
     border-radius: 100px;
     border: 1px solid #cccccc7a;
     padding: 20p;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .review-card-modal:hover {
     border: 0;
 }

 #reviewModal .btn-close {
     background-image: url(../images/close.png) !important;
     position: absolute;
     right: 0;
     top: 0;
 }

 #reviewModal .modal-body {
     padding: 30px 40px;
     background-color: #F6F6F6;
 }


 #reviewModal .review-card {
     border-radius: 0;
     padding: 0;
     box-shadow: none;
     border: 0 !important;
 }

 .review-p p {
     color: #778599;
     font-size: 14px;
 }

 .modal-content {
     background-color: #f8f9fa;
 }

 .modal-backdrop {
     background-color: rgba(0, 0, 0, 0.5) !important;
 }

 #dynamicRatings .star-image {
     width: 15px;
     height: 15px;
     margin-right: 3px;
 }

 .progress-bg .star-image {
     width: 13px;
     height: 13px;
     margin-right: 3px;
 }

 .nav-pills {
     position: sticky;
     /* top: 120px; */
     top: 0px;
     z-index: 1000;
     background: white;
     /* padding: 15px; */
     border-radius: 10px;
     border: 1px solid #BAC2DC;
     box-shadow: 0 4px 15px rgb(0 0 0 / 6%);
     /* background-image: linear-gradient(120deg, #04ACEA 0%, #a86de2 100%); */
 }

 /* .rating-div::after{
    display: none;
} */

 .range-values {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
 }

 .range-values .rv-left,
 .range-values .rv-right {
     width: 50%;
 }

 .range-slider .range-fill {
     top: -2px;
 }

 .range-values {
     margin-top: 10px !important;
 }

 .range-slider .range-inputs input {
     top: -2px !important;
 }



 .desktop-btn .btn {
     padding: 7px 20px !important;
 }

 .input-group-text {
     border: 1px solid #d1d5db !important;
     border-left: 0 !important;
 }

 .btn-header {
     padding: 10px 25px !important;
     height: 50px;
 }

 /* Smooth transitions */
 .transition {
     transition: all 0.3s ease;
 }

 /* Shrink effect */
 #navbar_main.shrink {
     padding-top: 0.2rem;
     padding-bottom: 0.2rem;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }

 #navbar_main.shrink .navbar-brand img {
     height: 40px;
     /* smaller logo size */
     transition: height 0.3s ease;
 }

 #navbar_main .navbar-brand img {
     height: auto;
     max-width: 200px;
     transition: height 0.3s ease;
     width: 100%;
 }

 /* .mobile-header {
    transition: all 0.3s ease;
}
.shrink .mobile-header .logo {
    height: 40px;
}
.mobile-header .logo {
    height: 60px;
    transition: height 0.3s ease;
} */
 footer {
     border-top: 1px solid #cccccc6e;
 }

 footer h4 {
     font-size: 16px !important;
     margin-bottom: 20px;
 }

 footer li {
     font-size: 16px;
     color: #4B5563;
     margin-bottom: 5px;
 }

 footer li a {
     color: #4B5563;
 }

 footer li a:hover,
 footer a:hover {
     color: #04ACEA !important;
 }

 footer i {
     color: #04ACEA;
     margin-right: 10px;
 }

 #copyrights {
     font-size: 14px;
 }

 .copyright-links {
     color: #ADB5BD;
     margin-top: 5px;
 }

 .footer-widgets-wrap {
     padding: 70px 0;
 }

 .footer-widgets-wrap h6 {
     font-size: 16px !important;
 }

 .card-height {
     height: 600px;
     overflow-x: hidden;
     overflow-y: scroll;
 }

 .review-card .rounded-circle {
     border-radius: 100px;
 }

 .review-card h5 {
     font-size: 15px !important;
 }

 .avatar-upload .avatar-preview {
     width: 102px;
     height: 102px;
 }

 .user-grid-card img {
     width: 100px;
     height: 100px;
 }

 .form-wizard .wizard-form-error {
     position: relative !important;
     inset-block-start: 0 !important;
     height: auto !important;
     width: auto !important;
     border-radius: 0 !important;
     border: 0 !important;
     color: red !important;
 }

 #activeReviewModal .btn-close {
     background-image: url(../images/close.png) !important;
     position: absolute;
     right: 0;
     top: 0;
 }

 #activeReviewModal .modal-body {
     padding: 30px 40px;
     background-color: #F6F6F6;
 }

 #activeReviewModal .modal-body h5 {
     font-size: 30px !important;
     text-transform: capitalize;
 }

 .review-card-hover:hover {
     border: 0 !important;
 }

 #thankYouModal .btn-close,
 #alreadyAppliedModal .btn-close,
 #alreadyClaimUniversity .btn-close {
     position: absolute;
     right: 15px;
     top: 15px;
 }

 #thankYouModal h5,
 #alreadyAppliedModal h5,
 #alreadyClaimUniversity h5 {
     margin-bottom: 30px !important;
     font-size: 30px !important;
 }

 #thankYouModal p,
 #alreadyAppliedModal p,
 #alreadyClaimUniversity p {
     font-size: 18px;
     font-weight: 600;

 }

 #thankYouModal .modal-body,
 #alreadyAppliedModal .modal-body,
 #alreadyClaimUniversity .modal-body {
     padding: 50px 40px;

 }

 #reviews-widget h3 {
     font-size: 20px !important;
 }

 .mycontent [id] {
     scroll-margin-top: 120px;
 }

 .mycontent [id]::before {
     content: '';
     display: block;
     height: 120px;
     margin-top: -120px;
     visibility: hidden;
 }

 .overview-side .nav-link.active {
     font-weight: bold;
     color: #04ACEA
 }

 .overview-side .sidebar-nav .nav-link {
     color: #333333;
 }

 .news-card h5 {
     font-size: 16px !important;
     margin-bottom: 15px;
 }

 .news-card img {
     height: 200px;
     object-fit: cover;
     width: 100%;
 }

 /* follow btn */
 .follow-btn {
     transition: all 0.3s ease;
 }

 .follow-btn {
     position: relative;
     padding: 10px 24px;
     background-color: #04ACEA;
     color: white;
     font-size: 16px;
     border: none;
     border-radius: 30px;
     cursor: pointer;
     overflow: hidden;
     transition: background-color 0.3s ease, transform 0.2s ease;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .follow-btn.clicked {
     background-color: #dc3545 !important;
     /* Bootstrap danger red */
     color: white !important;
 }

 .follow-btn .ri-heart-line.followed {
     color: white !important;
     background-color: #dc3545;
     border-radius: 50%;
     padding: 2px;
 }

 .follow-btn .ri-heart-line {
     transition: all 0.3s ease;
 }

 .bounce {
     animation: bounce 0.4s ease;
 }

 @keyframes bounce {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.2);
     }
 }

 .ripple {
     position: absolute;
     background: rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     transform: scale(0);
     animation: ripple 0.6s linear;
     pointer-events: none;
 }

 @keyframes ripple {
     to {
         transform: scale(4);
         opacity: 0;
     }
 }

 /* follow btn end */


 @media(max-width:991px) {
     .list-group {
         margin-top: 0;
         padding: 20px;
     }

     .university-name {
         display: block !important;
     }

     .university-details {
         display: block !important;
     }

     .uni-info {
         display: block !important;
     }

     .uni-info li {
         margin-right: 0;
         margin-bottom: 15px;
     }

     .uni-info li::after {
         display: none;
     }

     .course-card {
         padding-bottom: 15px;
     }

     .overview-tab {
         margin-top: 35px;
     }

     .overview-tab .accordion .accordion-item {
         margin-bottom: 25px;
     }

     .overview-tab .accordion .accordion-button[aria-expanded=true]::after,
     .overview-tab .accordion .accordion-button[aria-expanded=false]::after {
         border: 0;
     }

     .course-card .card-body {
         padding: 10px 0 0;
     }

     .oveview-card {
         padding: 20px;
     }

     .oveview-card-div h3 {
         font-size: 16px !important;
     }

     .oveview-card-div p {
         font-size: 14px;
     }

     .oveview-card h4 {
         font-size: 18px !important;
     }

     .testimonial-text {
         font-size: 14px !important;
     }

     .overview-tab .accordion-button {
         margin-bottom: 15px;
     }

     .review-list li {
         font-size: 14px;
     }

     .tag-div-scroll {
         overflow-y: scroll;
     }

     .tag-div {
         padding: 3px 15px;
         font-size: 12px;
     }

     .review-card {
         padding: 20px;
     }

     .rating-div2 p {
         color: #0C0E2B;
         font-size: 14px;
     }

     .course-rating {
         top: 10px;
     }

     .tab-content>.tab-pane {
         display: block;
         opacity: 1;
     }

     .fs-30 {
         font-size: 20px !important;
     }

     p {
         font-size: 14px;
     }

     .progress-container {
         padding: 15px;
     }

     .progress-div h4 {
         font-size: 14px !important;
     }

     .badge-card {
         padding: 30px 20px;
         margin: 0;
     }


     .mobile-header {
         padding: 20px !important;
         background-color: #ffffff;
         box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
     }

     .mobile-header .logo {
         width: 100px;
     }

     .desktop-btn {
         display: none;
     }

     .mobile-header {
         padding: 20px !important;
         background-color: #FFFFFF;
         box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
     }

     .mobile-header .logo {
         width: 100px;
     }

     footer a {
         word-break: break-all;
     }

     #navbar_main .navbar-brand img {
         height: 35px;
     }

     .main-header .navbar-nav {
         margin-top: 20px !important;
     }

     .main-header .nav-link {
         padding-left: 0 !important;
         margin-bottom: 10px !important;
     }

     .underline-tabs .nav-tabs {
         justify-content: center;
     }

     .underline-tabs .nav-link {
         padding: 10px 6px;
         font-size: 14px !important;
         border-top-left-radius: 10px;
         border-top-right-radius: 10px;
         border-bottom-right-radius: 0;
         border-bottom-left-radius: 0;
     }

     .university-card h5 {
         font-size: 16px !important;
         margin-top: 15px;
     }

     .scholarship-item,
     .course-item {
         padding: 15px;
     }

     .uni-pro h6 {
         font-size: 14px !important;
     }

     .course-item h5 {
         font-size: 14px !important;
     }

     #sidebarFilter .btn-close {
         position: absolute;
         right: 20px;
         top: 20px;
     }

     #search-form .input-group .btn {
         font-size: 12px;
         padding: 5px 10px;
         height: 44px;
         border-radius: 0;
     }

     #search-form .input-group-text {
         padding: 5px 10px;
         display: flex;
     }

     #search-form .form-control {
         font-size: 12px;
         padding: 10px 5px;
         padding-left: 40px;
     }

     .review-card .rounded-circle {
         width: 20%;
     }

     .count-svg {
         height: 45px;
         width: 45px;
     }

     .review-card:hover .rating-tooltip {
         opacity: 0;
     }

     .review-time {
         font-size: 8px;
     }

     .review-card .btn {
         padding: 8px 15px !important;
         font-size: 12px;
     }

     .review-title {
         font-size: 20px !important;
     }

     .btn-with-color {
         /* border: 1px solid #CBD5E1 !important; */
         padding: 0px 20px !important;
         font-size: 14px;
         height: 40px;
         line-height: normal !important;
         display: block;
         background-color: #4052DB;
         color: #ffffff;
     }

     .btn-outline:hover {
         background-color: #4052DB;
         color: #ffffff;
     }

     .btn-with-color:hover {
         background-color: transparent;
         border: 1px solid #4052DB;
     }

     #navbar_main {
         background-color: #05284E !important;
     }

     .offcanvas-header .btn-close {
         background-color: #ffffff;
         opacity: 1;
         padding: 10px;
     }

     .main-header .nav-link {
         color: #ffffff !important;
     }

     .main-header .dropdown-menu {
         padding: 0;
         background-color: #05284e;
         border: 0;
     }

     footer {
         font-size: 12px;
     }

     .circle {
         margin-bottom: 20px !important;
     }

     .category-btn .btn {
         border-radius: 8px;
         padding: 4px 20px;
     }

 }

 /* Base dropdown menu (hidden by default) */
 .dropdown-menu {
     opacity: 0;
     visibility: hidden;
     transform: translateY(10px);
     transition: all 0.3s ease;
 }

 /* Show state (on hover or .show class) */
 .dropdown:hover .dropdown-menu,
 .dropdown-menu.show {
     opacity: 1;
     transform: translateY(0);
     visibility: visible;
     border-radius: 0.5rem;
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
     border: 0;

 }

 /* Optional: smooth fade out when mouse leaves */
 .dropdown:not(:hover) .dropdown-menu {
     opacity: 0;
     visibility: hidden;
     transform: translateY(10px);
 }