@import url('./page-variables.css');
@import url('./page-utilities.css');
@import url('./page-buttons.css');
@import url('./page-forms.css');
@import url('./page-animations.css');

/*================ TYPOGRAPHY ================*/
html {
   font-size: 16px;
   scroll-behavior: smooth;
}

body {
   overflow-x: hidden;
   font-family: var(--font-body);
   font-size: var(--font-base);
   font-weight: var(--fw-400);
   line-height: var(--lh-normal);
   color: var(--text-color);
   background: var(--body-bg);
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

.section {
   position: relative;
   padding: 72px 0;
}

.section-sm {
   padding: 56px 0;
}

.section-lg {
   padding: 88px 0;
}

.section-light {
   background: #f8fbff;
}

.section-white {
   background: #ffffff;
}

.section-primary {
   background: var(--gradient-primary);
   color: #ffffff;
}

.section-header {
   max-width: 760px;
   margin: 0 auto 48px;
   text-align: center;
}

.section-badge {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 8px 18px;
   margin-bottom: 18px;
   border-radius: 999px;
   background: rgba(37, 99, 235, .08);
   border: 1px solid rgba(37, 99, 235, .12);
   color: var(--primary-color);
   font-size: .9rem;
   font-weight: 600;
}

.section-badge i {
   font-size: .95rem;
}

.badge-light {
   background: rgba(255, 255, 255, .15);
   border: 1px solid rgba(255, 255, 255, .25);
   color: #ffffff;
}

.section-title {
   margin-bottom: 16px;
   font-size: clamp(2rem, 4vw, 3.25rem);
   line-height: 1.15;
   font-weight: 800;
   color: var(--heading-color);
   letter-spacing: -.03em;
}

.section-title span {
   color: var(--primary-color);
}

.section-primary .section-title,
.section-primary .section-title span {
   color: #ffffff;
}

.section-description {
   max-width: 680px;
   margin: 0 auto;
   color: var(--text-light);
   font-size: 1.02rem;
   line-height: 1.85;
}

.section-primary .section-description {
   color: rgba(255, 255, 255, .88);
}

.card {
   position: relative;
   height: 100%;
   padding: 28px;
   overflow: hidden;
   border: 1px solid rgba(15, 23, 42, .06);
   border-radius: 22px;
   background: #ffffff;
   box-shadow: 0 6px 18px rgba(15, 23, 42, .05), 0 2px 6px rgba(15, 23, 42, .03);
   transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.card:hover {
   transform: translateY(-6px);
   border-color: rgba(37, 99, 235, .18);
   box-shadow: 0 18px 45px rgba(15, 23, 42, .10), 0 4px 12px rgba(15, 23, 42, .05);
}

.card h3 {
   margin-bottom: 12px;
   font-size: 1.3rem;
   color: var(--heading-color);
}

.card p {
   margin: 0;
   color: var(--text-light);
   line-height: 1.8;
}

.card-icon {
   width: 66px;
   height: 66px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   border-radius: 18px;
   background: linear-gradient(135deg, #eef5ff, #ffffff);
   border: 1px solid rgba(37, 99, 235, .08);
   color: var(--primary-color);
   font-size: 1.55rem;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 6px 16px rgba(37, 99, 235, .08);
}


.card-image {
   display: block;
   width: 100%;
   border-radius: 18px;
}

.card-top {
   position: relative;
   overflow: hidden;
   border-radius: 18px;
}

.card-top img {
   display: block;
   width: 100%;
   transition: transform .45s ease;
}

.card:hover .card-top img {
   transform: scale(1.05);
}

.card-content {
   padding-top: 22px;
}

.card-subtitle {
   display: block;
   margin: 8px 0 14px;
   color: var(--primary-color);
   font-size: .95rem;
   font-weight: 600;
}

.img-responsive {
   display: block;
   width: 100%;
   height: auto;
}

.img-radius {
   display: block;
   width: 100%;
   border-radius: 24px;
}

.img-premium {
   display: block;
   width: 100%;
   border-radius: 24px;
   border: 1px solid rgba(255, 255, 255, .65);
   box-shadow: 0 18px 60px rgba(15, 23, 42, .10), 0 4px 18px rgba(15, 23, 42, .05);
}

.text-white {
   color: #ffffff !important;
}

.text-light {
   color: rgba(255, 255, 255, .88) !important;
}

.logo-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
   gap: 22px;
}

.logo-card {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 120px;
   padding: 24px;
   border-radius: 22px;
   background: #ffffff;
   border: 1px solid rgba(15, 23, 42, .06);
   box-shadow: 0 8px 20px rgba(15, 23, 42, .05), 0 2px 6px rgba(15, 23, 42, .03);
   transition: transform .35s, box-shadow .35s, border-color .35s;
}

.logo-card:hover {
   transform: translateY(-6px);
   border-color: rgba(37, 99, 235, .15);
   box-shadow: 0 18px 40px rgba(15, 23, 42, .10), 0 4px 12px rgba(15, 23, 42, .05);
}

.logo-card img {
   max-width: 140px;
   max-height: 60px;
   width: auto;
   height: auto;
   object-fit: contain;
   transition: transform .35s;
}

.logo-card:hover img {
   transform: scale(1.05);
}

.country-badge {
   position: absolute;
   left: 20px;
   bottom: 20px;
   width: 56px;
   height: 56px;

   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 10px;
   border-radius: 50px;
   background: rgba(255, 255, 255, .95);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, .8);
   box-shadow: 0 12px 30px rgba(15, 23, 42, .12);

   font-size: .95rem;
   font-weight: 700;
   color: var(--heading-color);
}

.country-badge img {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   object-fit: cover;
   border: 2px solid #fff;
   flex-shrink: 0;
}

.country-flag {
   position: absolute;
   top: 18px;
   right: 18px;

   width: 56px;
   height: 56px;

   display: flex;
   align-items: center;
   justify-content: center;

   background: #fff;
   border-radius: 50%;

   box-shadow: 0 12px 30px rgba(15, 23, 42, .15);

   border: 3px solid rgba(255, 255, 255, .8);
}

.country-flag img {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   object-fit: cover;
}

/*=====================================================
COUNTRY META
======================================================*/

.country-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin: 18px 0 24px;
}

.country-meta span {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 14px;
   border-radius: 30px;
   background: rgba(var(--primary-rgb), .08);
   color: var(--heading-color);
   font-size: .88rem;
   font-weight: 600;
}

.country-meta i {
   color: var(--primary-color);
   font-size: .9rem;
}

.inline-list {

   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-bottom: 28px;
}

.inline-list span {
   display: flex;
   align-items: center;
   gap: 10px;
   color: var(--text-light);
   font-size: .95rem;
}

.inline-list i {
   width: 18px;
   color: var(--primary-color);
}

.review-card {
   position: relative;
   height: 100%;
   padding: 28px;
   border-radius: 24px;
   background: #ffffff;
   border: 1px solid rgba(15, 23, 42, .06);
   box-shadow: 0 8px 22px rgba(15, 23, 42, .05), 0 2px 8px rgba(15, 23, 42, .03);
   transition: transform .35s, box-shadow .35s;
}

.review-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 18px 45px rgba(15, 23, 42, .10), 0 4px 12px rgba(15, 23, 42, .05);
}

.review-header {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-bottom: 20px;
}

.review-avatar {
   width: 70px;
   height: 70px;
   flex-shrink: 0;
   border-radius: 50%;
   overflow: hidden;
   border: 3px solid #ffffff;
   box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
}

.review-avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.review-info h4 {
   margin-bottom: 4px;
   font-size: 1.15rem;
   color: var(--heading-color);
}

.review-info span {
   font-size: .9rem;
   color: var(--text-light);
}

.review-text {
   margin-top: 18px;
   color: var(--text-light);
   line-height: 1.9;
}

.rating {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
   margin-top: 14px;

}

.rating i {
   color: #fbbf24;
   font-size: 1rem;
}

.rating span {
   margin-left: 8px;
   font-size: .9rem;
   font-weight: 600;
   color: var(--text-light);
}

.timeline {
   position: relative;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 30px;
   margin-top: 60px;
}

.timeline::before {
   content: "";
   position: absolute;
   top: 30px;
   left: 12%;
   right: 12%;
   height: 3px;
   background: rgba(37, 99, 235, .15);
   z-index: 0;
}

.timeline-item {
   position: relative;
   text-align: center;
   z-index: 1;
}

.timeline-dot {
   width: 60px;
   height: 60px;
   margin: 0 auto 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: var(--gradient-primary);
   color: #ffffff;
   font-size: 1.3rem;
   box-shadow: 0 15px 35px rgba(37, 99, 235, .25);
}

.timeline-content {
   padding: 28px 24px;
   border-radius: 24px;
   background: #ffffff;
   border: 1px solid rgba(15, 23, 42, .06);
   box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
   transition: var(--transition-normal);
}

.timeline-item:hover .timeline-content {
   transform: translateY(-8px);
   box-shadow: var(--shadow-lg);
}

.timeline-year {
   display: inline-block;
   margin-bottom: 10px;
   color: var(--primary-color);
   font-size: .95rem;
   font-weight: 700;
}

.timeline-content h3 {
   margin-bottom: 12px;
   font-size: 1.25rem;
}

.timeline-content p {
   color: var(--text-light);
   line-height: 1.8;
}

.info-list {
   display: grid;
   gap: 18px;
}

.info-item {
   display: flex;
   align-items: flex-start;
   gap: 18px;
}

.info-icon {
   width: 54px;
   height: 54px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 16px;
   background: rgba(37, 99, 235, .08);
   color: var(--primary-color);
   font-size: 1.3rem;
}

.info-content h4 {
   margin-bottom: 6px;
   font-size: 1.15rem;
}

.info-content p {
   color: var(--text-light);
   line-height: 1.8;
}

.stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 22px;
}

.stat-card {
   padding: 26px;
   text-align: center;
   border-radius: 22px;
   background: #ffffff;
   border: 1px solid rgba(15, 23, 42, .06);
   box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
   transition: .35s;
}

.stat-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 18px 40px rgba(15, 23, 42, .10);
}

.stat-number {
   display: block;
   margin-bottom: 10px;
   font-size: 2.4rem;
   font-weight: 800;
   color: var(--primary-color);
}

.stat-title {
   color: var(--text-light);
   font-weight: 500;
}

.feature-list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
   margin-top: 60px;
}

.feature-item {
   height: 100%;
   padding: 36px 30px;
   gap: 18px;
   text-align: center;
   border: 1px solid rgba(15, 23, 42, .06);
   border-radius: 28px;
   background: #ffffff;
   box-shadow: 0 10px 35px rgba(15, 23, 42, .05);
   transition: all .35s ease;
}

.feature-item:hover {
   transform: translateY(-10px);
   border-color: rgba(37, 99, 235, .12);
   box-shadow: 0 25px 60px rgba(15, 23, 42, .10);
}

.feature-icon {
   position: relative;
   width: 74px;
   height: 74px;
   margin: 0 auto 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 22px;
   background: rgba(37, 99, 235, .08);
   color: var(--primary-color);
   transition: all .35s ease;
}

.feature-icon::after {
   content: "";
   position: absolute;
   inset: -6px;
   border: 1px dashed rgba(37, 99, 235, .22);
   border-radius: inherit;
   transition: all .35s ease;
}

.feature-icon i {
   font-size: 1.8rem;
}

.feature-item:hover .feature-icon {
   background: var(--gradient-primary);
   color: #ffffff;
   transform: rotate(-8deg) scale(1.08);
}

.feature-item:hover .feature-icon::after {
   border-color: rgba(37, 99, 235, .45);
   transform: rotate(18deg);
}

.feature-content {
   width: 100%;
}

.feature-content h4 {
   margin-bottom: 14px;
   font-size: 1.3rem;
   font-weight: 700;
   color: var(--heading-color);
}

.feature-content p {
   margin: 0;
   color: var(--text-light);
   font-size: .98rem;
   line-height: 1.9;
}

.floating-card {
   position: absolute;
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 18px 22px;
   border-radius: 22px;
   background: rgba(255, 255, 255, .96);
   backdrop-filter: blur(18px);
   border: 1px solid rgba(255, 255, 255, .7);
   box-shadow: 0 20px 40px rgba(15, 23, 42, .12), 0 4px 12px rgba(15, 23, 42, .05);
}

.floating-card i {
   width: 58px;
   height: 58px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 18px;
   background: var(--gradient-primary);
   color: #ffffff;
   font-size: 1.35rem;
   flex-shrink: 0;
}

.floating-card h5 {
   margin-bottom: 4px;
   font-size: 1.05rem;
}

.floating-card p {
   margin: 0;
   color: var(--text-light);
   font-size: .92rem;
   line-height: 1.6;
}

.card-top {
   top: 40px;
   left: -25px;
}

.card-bottom {
   right: -25px;
   bottom: 40px;
}

.image-frame {
   position: relative;
   overflow: hidden;
   border-radius: 32px;
   box-shadow: 0 30px 60px rgba(15, 23, 42, .12), 0 10px 20px rgba(15, 23, 42, .06);
}

.image-frame img {
   width: 100%;
   display: block;
   transition: transform .6s ease;
}

.image-frame:hover img {
   transform: scale(1.06);
}

.glass-card {
   padding: 34px;
   border-radius: 28px;
   backdrop-filter: blur(18px);
   background: rgba(255, 255, 255, .75);
   border: 1px solid rgba(255, 255, 255, .65);
   box-shadow: 0 20px 45px rgba(15, 23, 42, .08);
}

.check-list {
   display: grid;
   gap: 14px;
   margin-top: 24px;
}

.check-list li {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   list-style: none;
}

.check-list i {
   margin-top: 3px;
   color: #10b981;
   font-size: 1rem;
}

.check-list span {
   color: var(--text-color);
   line-height: 1.8;
}

.process-grid {
   display: grid;
   gap: 24px;
}

.process-step {
   position: relative;
   padding: 30px;
   border-radius: 24px;
   background: #ffffff;
   border: 1px solid rgba(15, 23, 42, .06);
   box-shadow: 0 10px 25px rgba(15, 23, 42, .05);
   transition: .35s;
}

.process-step:hover {
   transform: translateY(-6px);
   box-shadow: 0 20px 45px rgba(15, 23, 42, .10);
}

.step-number {
   width: 56px;
   height: 56px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 22px;
   border-radius: 18px;
   background: var(--gradient-primary);
   color: #ffffff;
   font-size: 1.2rem;
   font-weight: 700;
}

.tags {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.tag {
   padding: 8px 16px;
   border-radius: 999px;
   background: rgba(37, 99, 235, .08);
   color: var(--primary-color);
   font-size: .85rem;
   font-weight: 600;
}

.avatar {
   width: 72px;
   height: 72px;
   overflow: hidden;
   border-radius: 50%;
   border: 3px solid #ffffff;
   box-shadow: 0 8px 18px rgba(15, 23, 42, .10);
}

.avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.icon-box {
   width: 72px;
   height: 72px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 22px;
   background: rgba(37, 99, 235, .08);
   color: var(--primary-color);
   font-size: 1.7rem;
}

.divider {
   width: 100%;
   height: 1px;
   margin: 60px 0;
   background: rgba(15, 23, 42, .08);
}

.hover-up {
   transition: transform .35s, box-shadow .35s;
}

.hover-up:hover {
   transform: translateY(-8px);
}

.hover-scale {
   transition: transform .35s;
}

.hover-scale:hover {
   transform: scale(1.04);
}

.overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(15, 23, 42, .45), transparent 60%);
}

.loader {
   width: 54px;
   height: 54px;
   border: 4px solid rgba(37, 99, 235, .12);
   border-top-color: var(--primary-color);
   border-radius: 50%;
   animation: rotate 1s linear infinite;
}

.page-loader {
   position: fixed;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #ffffff;
   z-index: 9999;
}

.progress {
   width: 100%;
   height: 10px;
   overflow: hidden;
   border-radius: 999px;
   background: #e2e8f0;
}

.progress-bar {
   height: 100%;
   border-radius: 999px;
   background: var(--gradient-primary);
}

.tabs {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   margin-bottom: 40px;
}

.tab {
   padding: 14px 26px;
   border: none;
   border-radius: 999px;
   background: #f5f7fb;
   color: var(--heading-color);
   font-weight: 600;
   cursor: pointer;
   transition: .3s;
}

.tab:hover,
.tab.active {
   background: var(--gradient-primary);
   color: #ffffff;
   box-shadow: var(--shadow-md);
}

.pagination {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 60px;
}

.page-link {
   width: 52px;
   height: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 16px;
   text-decoration: none;
   background: #ffffff;
   color: var(--heading-color);
   border: 1px solid rgba(15, 23, 42, .08);
   box-shadow: var(--shadow-sm);
   transition: .3s;
}

.page-link:hover,
.page-link.active {
   background: var(--gradient-primary);
   color: #ffffff;
   border-color: transparent;
   box-shadow: var(--shadow-md);
}

.page-link.disabled {
   opacity: .45;
   pointer-events: none;
}

.breadcrumb-nav {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 30px;
}

.breadcrumb-nav a {
   color: var(--primary-color);
   text-decoration: none;
   font-weight: 500;
   transition: .3s;
}

.breadcrumb-nav a:hover {
   color: var(--secondary-color);
}

.breadcrumb-nav span {
   color: var(--text-light);
}

.breadcrumb-nav i {
   color: #cbd5e1;
   font-size: .75rem;
}

.sticky-nav {
   position: sticky;
   top: 100px;
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.sticky-nav a {
   padding: 14px 18px;
   border-radius: 16px;
   text-decoration: none;
   color: var(--heading-color);
   background: #ffffff;
   box-shadow: var(--shadow-sm);
   transition: .3s;
}

.sticky-nav a:hover,
.sticky-nav a.active {
   background: var(--gradient-primary);
   color: #ffffff;
}

.sidebar-menu {
   display: grid;
   gap: 10px;
}

.sidebar-menu a {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 16px 20px;
   border-radius: 18px;
   text-decoration: none;
   color: var(--heading-color);
   transition: .3s;
}

.sidebar-menu a:hover,
.sidebar-menu a.active {
   background: #f8fbff;
   color: var(--primary-color);
}

.sidebar-menu i {
   width: 22px;
   text-align: center;
}

.category-menu {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
}

.category-item {
   padding: 10px 18px;
   border-radius: 999px;
   background: #f5f7fb;
   color: var(--heading-color);
   text-decoration: none;
   transition: .3s;
}

.category-item:hover,
.category-item.active {
   background: var(--gradient-primary);
   color: #ffffff;
}

.dropdown-menu {
   min-width: 240px;
   padding: 12px;
   border: none;
   border-radius: 22px;
   background: #ffffff;
   box-shadow: 0 20px 50px rgba(15, 23, 42, .12);
}

.dropdown-menu a {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 14px 16px;
   border-radius: 14px;
   text-decoration: none;
   color: var(--heading-color);
   transition: .3s;
}

.dropdown-menu a:hover {
   background: #f8fbff;
   color: var(--primary-color);
}

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

.focus-ring:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(37, 99, 235, .18);
   border-radius: 12px;
}

.shape {
   position: absolute;
   border-radius: 50%;
   pointer-events: none;
   opacity: .06;
   z-index: -1;
}

.shape.one {
   width: 320px;
   height: 320px;
   top: -120px;
   right: -120px;
   background: #2563eb;
}

.shape.two {
   width: 220px;
   height: 220px;
   left: -90px;
   bottom: -90px;
   background: #06b6d4;
}

.shape.three {
   width: 180px;
   height: 180px;
   top: 50%;
   right: -70px;
   background: #8b5cf6;
}

.shape.blur {
   filter: blur(90px);
   opacity: .18;
}

.pattern-dots {
   position: absolute;
   inset: 0;
   pointer-events: none;
   opacity: .05;
   background-image: radial-gradient(var(--primary-color) 1px, transparent 1px);
   background-size: 24px 24px;
}

.pattern-grid {
   position: absolute;
   inset: 0;
   pointer-events: none;
   opacity: .05;
   background-image: linear-gradient(rgba(37, 99, 235, .15) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 99, 235, .15) 1px, transparent 1px);
   background-size: 60px 60px;
}

.pattern-lines {
   position: absolute;
   inset: 0;
   pointer-events: none;
   opacity: .04;
   background: repeating-linear-gradient(-45deg, transparent 0, transparent 18px, rgba(37, 99, 235, .12) 19px, rgba(37, 99, 235, .12) 20px);
}

.pattern-wave {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 140px;
   pointer-events: none;
   opacity: .08;
   background: radial-gradient(circle at 25% 100%, var(--primary-color) 0 18%, transparent 19%), radial-gradient(circle at 75% 100%, var(--secondary-color) 0 18%, transparent 19%);
   background-size: 220px 120px;
}

.pattern-mesh {
   position: absolute;
   inset: 0;
   pointer-events: none;
   opacity: .08;
   background: radial-gradient(circle at 20% 20%, rgba(37, 99, 235, .20), transparent 35%), radial-gradient(circle at 80% 30%, rgba(6, 182, 212, .18), transparent 35%), radial-gradient(circle at 40% 80%, rgba(139, 92, 246, .18), transparent 40%);
}

.glow {
   position: absolute;
   border-radius: 50%;
   filter: blur(120px);
   pointer-events: none;
   opacity: .22;
}

.float-circle {
   position: absolute;
   border-radius: 50%;
   background: rgba(255, 255, 255, .12);
   backdrop-filter: blur(12px);
   animation: floatObject 6s ease-in-out infinite;
}

.float-square {
   position: absolute;
   border-radius: 24px;
   background: rgba(255, 255, 255, .08);
   backdrop-filter: blur(10px);
   transform: rotate(15deg);
   animation: floatObject 7s ease-in-out infinite;
}

.float-ring {
   position: absolute;
   border: 2px solid rgba(37, 99, 235, .15);
   border-radius: 50%;
   animation: rotateRing 25s linear infinite;
}

.section-divider {
   width: 100%;
   height: 1px;
   margin: 80px 0;
   background: linear-gradient(to right, transparent, rgba(15, 23, 42, .12), transparent);
}

.form-section-divider {
   width: 100%;
   height: 1px;
   margin: 20px 0;
   background: linear-gradient(to right, transparent, rgba(15, 23, 42, .12), transparent);
}

.section-divider-sm {
   margin: 50px 0;
}

.section-divider-lg {
   margin: 120px 0;
}

.noise {
   position: absolute;
   inset: 0;
   pointer-events: none;
   opacity: .03;
   background-image: radial-gradient(#000 1px, transparent 1px);
   background-size: 7px 7px;
}

.fade-top {
   -webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%);
   mask-image: linear-gradient(to bottom, transparent, #000 15%);
}

.fade-bottom {
   -webkit-mask-image: linear-gradient(to top, transparent, #000 15%);
   mask-image: linear-gradient(to top, transparent, #000 15%);
}

.fade-both {
   -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
   mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}


.service-card {
   height: 100%;
   padding: 36px;
   text-align: center;
   border-radius: var(--card-radius);
   background: #ffffff;
   box-shadow: var(--shadow-md);
   transition: var(--transition-normal);
}

.service-card:hover {
   transform: translateY(-10px);
   box-shadow: var(--shadow-xl);
}

.service-card .icon {
   margin: 0 auto 24px;
}

.country-card {
   overflow: hidden;
   border-radius: var(--card-radius);
   background: #ffffff;
   box-shadow: var(--shadow-md);
   transition: var(--transition-normal);
}

.country-card:hover {
   transform: translateY(-10px);
   box-shadow: var(--shadow-xl);
}

.country-image {
   position: relative;
   height: 240px;
   overflow: hidden;
   border-radius: 24px 24px 0 0;
}

.country-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: .5s;
}

.card:hover .country-image img {
   transform: scale(1.08);
}

.country-content {
   padding: 28px;
}

.stats-card {
   text-align: center;
   padding: 36px;
   border-radius: 24px;
   background: #ffffff;
   box-shadow: var(--shadow-md);
}

.stats-number {
   display: block;
   margin-bottom: 8px;
   font-size: 2.8rem;
   font-weight: 800;
   color: var(--primary-color);
}

.stats-label {
   color: var(--text-light);
}

.testimonial-slider {
   position: relative;
   padding-bottom: 70px;
}

.testimonial-slider .swiper-slide {
   height: auto;
}

.testimonial-card {
   height: 100%;
   padding: 40px 36px;
   text-align: center;
   border: 1px solid rgba(15, 23, 42, .06);
   border-radius: 30px;
   background: #ffffff;
   box-shadow: 0 12px 35px rgba(15, 23, 42, .05);
   transition: all .35s ease;
}

.testimonial-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 30px 60px rgba(15, 23, 42, .10);
}

.testimonial-card .quote-icon {
   width: 74px;
   height: 74px;
   margin: 0 auto 28px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: rgba(37, 99, 235, .08);
   color: var(--primary-color);
   font-size: 1.8rem;
}

.testimonial-card p {
   margin: 24px 0 30px;
   color: var(--text-light);
   font-size: 1.02rem;
   line-height: 1.9;
   font-style: italic;
}

.testimonial-card h4 {
   margin-bottom: 6px;
   font-size: 1.2rem;
}

.testimonial-card span {
   display: block;
   color: var(--text-light);
   font-size: .95rem;
}

.testimonial-card .rating {
   justify-content: center;
   margin: 0 0 24px;
   color: #fbbf24;
}

.testimonial-slider .swiper-pagination {
   bottom: 0;
}

.testimonial-slider .swiper-pagination-bullet {
   width: 12px;
   height: 12px;
   background: #cbd5e1;
   opacity: 1;
   transition: .3s;
}

.testimonial-slider .swiper-pagination-bullet-active {
   width: 34px;
   border-radius: 20px;
   background: var(--primary-color);
}

.testimonial-slider .swiper-button-prev,
.testimonial-slider .swiper-button-next {
   width: 54px;
   height: 54px;
   border-radius: 50%;
   background: #ffffff;
   color: var(--primary-color);
   box-shadow: 0 12px 30px rgba(15, 23, 42, .10);
}

.testimonial-slider .swiper-button-prev::after,
.testimonial-slider .swiper-button-next::after {
   font-size: 18px;
   font-weight: 700;
}

.testimonial-slider .swiper-button-prev:hover,
.testimonial-slider .swiper-button-next:hover {
   background: var(--primary-color);
   color: #ffffff;
}

.cta-card .section-title {
   position: relative;
   display: inline-block;
   font-size: 4rem;
   line-height: 1.15;
}

.cta-card .section-title::after {
   content: "";
   position: absolute;
   left: 50%;
   bottom: 18px;
   transform: translateX(-50%);
   width: 240px;
   height: 18px;
   border-radius: 30px;
   background: rgba(255, 255, 255, .12);
   filter: blur(18px);
   z-index: -1;
}

.cta-card {
   position: relative;
   overflow: hidden;
   padding: 90px 80px;
   border-radius: 40px;
   background: var(--gradient-primary);
   color: #ffffff;
   text-align: center;
   border: 1px solid rgba(255, 255, 255, .18);
   backdrop-filter: blur(15px);
}

.cta-card::before {
   content: "";
   position: absolute;
   width: 320px;
   height: 320px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .08);
   top: -120px;
   left: -120px;
}

.cta-card::after {
   content: "";
   position: absolute;
   width: 260px;
   height: 260px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .08);
   bottom: -100px;
   right: -80px;
}

.cta-card>* {
   position: relative;
   z-index: 2;
}

.cta-card .section-description {
   max-width: 760px;
   margin: 30px auto 0;
   font-size: 1.15rem;
   line-height: 1.9;
   opacity: .92;
}

.cta-decoration {
   position: absolute;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .4);
}

.section-badge {
   padding: 12px 24px;
   font-size: 1rem;
}

.btn-white {
   background: #fff;
   color: var(--primary-color);
   box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
}

.btn-white:hover {
   transform: translateY(-5px);
}

.btn-outline-light {
   border: 2px solid rgba(255, 255, 255, .35);
   color: #fff;
}

.btn-outline-light:hover {
   background: #fff;
   color: var(--primary-color);
}

.btn-group {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   gap: 16px;
   margin-top: 40px;
}

.glass-card {
   padding: 36px;
   border-radius: 30px;
   background: rgba(255, 255, 255, .6);
   backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, .3);
   box-shadow: var(--shadow-lg);
}

.list {
   display: grid;
   gap: 18px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.list-item {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   color: var(--text-color);
   line-height: 1.8;
}

.list-item strong {
   display: block;
   margin-bottom: 4px;
}

.check-list .list-item::before {
   content: "✓";
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   border-radius: 50%;
   background: rgba(16, 185, 129, .12);
   color: var(--success-color);
   font-weight: 700;
}

.cross-list .list-item::before {
   content: "✕";
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   border-radius: 50%;
   background: rgba(239, 68, 68, .12);
   color: var(--danger-color);
   font-weight: 700;
}

.arrow-list .list-item::before {
   content: "→";
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   border-radius: 50%;
   background: rgba(37, 99, 235, .10);
   color: var(--primary-color);
   font-weight: 700;
}

.number-list {
   counter-reset: number;
}

.number-list .list-item {
   counter-increment: number;
}

.number-list .list-item::before {
   content: counter(number);
   width: 42px;
   height: 42px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   border-radius: 50%;
   background: var(--gradient-primary);
   color: #ffffff;
   font-weight: 700;
}

.icon-list .list-item i {
   width: 42px;
   height: 42px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   border-radius: 14px;
   background: rgba(37, 99, 235, .08);
   color: var(--primary-color);
   font-size: 1rem;
}

.inline-list {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.inline-list li {
   display: flex;
   align-items: center;
   gap: 8px;
   color: var(--text-light);
}

.info-list {
   display: grid;
   gap: 20px;
}

.info-item {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 18px 22px;
   border-radius: 18px;
   background: #f8fbff;
}

.info-item i {
   color: var(--primary-color);
}

.timeline-list {
   display: grid;
   gap: 28px;
}

.timeline-list .list-item {
   position: relative;
   padding-left: 36px;
}

.timeline-list .list-item::before {
   content: "";
   position: absolute;
   left: 8px;
   top: 0;
   bottom: -28px;
   width: 2px;
   background: rgba(37, 99, 235, .15);
}

.timeline-list .list-item::after {
   content: "";
   position: absolute;
   left: 2px;
   top: 8px;
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background: var(--primary-color);
}

.timeline-list .list-item:last-child::before {
   display: none;
}

.counter {
   position: relative;
   display: flex;
   align-items: center;
   gap: 22px;
   padding: 32px;
   border-radius: var(--card-radius);
   background: var(--card-bg);
   box-shadow: var(--shadow-md);
   transition: var(--transition-normal);
   overflow: hidden;
}

.counter:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-xl);
}

.counter::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 4px;
   height: 100%;
   background: var(--gradient-primary);
}

.counter-icon {
   width: 76px;
   height: 76px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   border-radius: 22px;
   background: rgba(37, 99, 235, .08);
   color: var(--primary-color);
   font-size: 2rem;
   transition: var(--transition-normal);
}

.counter:hover .counter-icon {
   background: var(--gradient-primary);
   color: #ffffff;
   transform: rotate(8deg);
}

.counter-content {
   flex: 1;
}

.counter-number {
   display: block;
   margin-bottom: 6px;
   font-size: 2.8rem;
   font-weight: 800;
   line-height: 1;
   color: var(--heading-color);
}

.counter-label {
   display: block;
   font-size: 1rem;
   font-weight: 600;
   color: var(--text-light);
}

.counter-description {
   margin-top: 8px;
   font-size: .95rem;
   color: var(--text-muted);
}

.counter-horizontal {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.counter-center {
   flex-direction: column;
   text-align: center;
}

.counter-center .counter-icon {
   margin-bottom: 18px;
}

.counter-minimal {
   padding: 0;
   background: none;
   box-shadow: none;
}

.counter-minimal::before {
   display: none;
}

.counter-minimal:hover {
   transform: none;
   box-shadow: none;
}

.counter-outline {
   border: 1px solid var(--border-color);
   box-shadow: none;
}

.counter-outline:hover {
   border-color: var(--primary-color);
}

.counter-gradient {
   background: var(--gradient-primary);
}

.counter-gradient .counter-number,
.counter-gradient .counter-label,
.counter-gradient .counter-description {
   color: #ffffff;
}

.counter-gradient .counter-icon {
   background: rgba(255, 255, 255, .18);
   color: #ffffff;
}

.counter-glass {
   background: rgba(255, 255, 255, .6);
   backdrop-filter: blur(18px);
}

.counter-sm {
   padding: 24px;
}

.counter-sm .counter-icon {
   width: 60px;
   height: 60px;
   font-size: 1.5rem;
}

.counter-sm .counter-number {
   font-size: 2rem;
}

.counter-lg {
   padding: 42px;
}

.counter-lg .counter-icon {
   width: 90px;
   height: 90px;
   font-size: 2.3rem;
}

.counter-lg .counter-number {
   font-size: 3.4rem;
}

.counter-inline {
   display: inline-flex;
}

.counter-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 30px;
}

.badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 8px 16px;
   border-radius: 999px;
   font-size: .85rem;
   font-weight: 600;
   line-height: 1;
   white-space: nowrap;
   transition: var(--transition-normal);
}

.ribbon {
   position: absolute;
   top: 18px;
   left: -38px;
   width: 150px;
   padding: 10px 0;
   text-align: center;
   font-size: .8rem;
   font-weight: 700;
   color: #ffffff;
   background: var(--gradient-primary);
   transform: rotate(-45deg);
   box-shadow: var(--shadow-md);
}

.price-tag {
   display: inline-flex;
   align-items: baseline;
   gap: 4px;
   font-weight: 800;
   color: var(--primary-color);
}

.price-tag small {
   font-size: .9rem;
   color: var(--text-light);
}

.label {
   display: inline-block;
   margin-bottom: 12px;
   font-size: .82rem;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--primary-color);
}

.image {
   position: relative;
   display: block;
   overflow: hidden;
   border-radius: var(--image-radius);
}

.image img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
   transition: transform .5s ease;
}

.image-overlay::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(15, 23, 42, .6), transparent 65%);
   opacity: 0;
   transition: .35s;
   z-index: 1;
}

.image-overlay:hover::before {
   opacity: 1;
}

.image-content {
   position: absolute;
   left: 30px;
   right: 30px;
   bottom: 30px;
   z-index: 2;
   color: #ffffff;
}

.image-content h3,
.image-content h4,
.image-content h5 {
   color: #ffffff;
}

.image-content p {
   color: rgba(255, 255, 255, .85);
}

.image-badge {
   position: absolute;
   top: 20px;
   left: 20px;
   z-index: 2;
   padding: 8px 16px;
   border-radius: 999px;
   background: #ffffff;
   color: var(--primary-color);
   font-size: .85rem;
   font-weight: 600;
   box-shadow: var(--shadow-md);
}

.flag {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   object-fit: cover;
   border: 3px solid #ffffff;
   box-shadow: var(--shadow-md);
}

.avatar-sm {
   width: 44px;
   height: 44px;
}

.avatar-lg {
   width: 90px;
   height: 90px;
}

.image-stack {
   position: relative;
   min-height: 520px;
}

.image-stack img {
   position: absolute;
   border-radius: 24px;
   box-shadow: var(--shadow-xl);
}

.image-stack img:nth-child(1) {
   width: 68%;
   top: 0;
   left: 0;
}

.image-stack img:nth-child(2) {
   width: 48%;
   right: 0;
   bottom: 0;
}

.image-stack img:nth-child(3) {
   width: 34%;
   left: 18%;
   bottom: 8%;
}

.image-card {
   position: absolute;
   padding: 18px 22px;
   border-radius: 20px;
   background: #ffffff;
   box-shadow: var(--shadow-lg);
}

.image-card h4 {
   margin-bottom: 4px;
}

.image-card p {
   margin: 0;
   color: var(--text-light);
   font-size: .9rem;
}

.image-frame {
   padding: 10px;
   border-radius: 32px;
   background: #ffffff;
   box-shadow: var(--shadow-xl);
}

.image-frame img {
   border-radius: 24px;
}

.logo-image {
   max-width: 180px;
   max-height: 80px;
   object-fit: contain;
}

.brand-image {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 28px;
   border-radius: 24px;
   background: #ffffff;
   box-shadow: var(--shadow-sm);
   transition: var(--transition-normal);
}

.brand-image:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-lg);
}

.brand-image img {
   max-width: 150px;
   max-height: 70px;
}

.icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: var(--transition-normal);
}

.social-icon {
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: #ffffff;
   color: var(--heading-color);
   box-shadow: var(--shadow-sm);
   transition: var(--transition-normal);
}

.social-icon:hover {
   background: var(--gradient-primary);
   color: #ffffff;
   transform: translateY(-5px);
   box-shadow: var(--shadow-lg);
}

.status-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
}

.status-online {
   background: #10b981;
}

.status-away {
   background: #f59e0b;
}

.status-offline {
   background: #94a3b8;
}

.status-busy {
   background: #ef4444;
}

.glass {
   background: rgba(255, 255, 255, .65);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, .25);
   box-shadow: 0 20px 60px rgba(15, 23, 42, .08);
}

.glass-dark {
   background: rgba(15, 23, 42, .55);
   backdrop-filter: blur(20px);
   color: #ffffff;
}

.bg-gradient-primary {
   background: var(--gradient-primary);
}

.bg-gradient-secondary {
   background: var(--gradient-secondary);
}

.bg-gradient-light {
   background: var(--gradient-light);
}

.gradient-border {
   position: relative;
   border-radius: var(--radius-xl);
   background: #ffffff;
}

.gradient-border::before {
   content: "";
   position: absolute;
   inset: -1px;
   border-radius: inherit;
   background: var(--gradient-primary);
   z-index: -1;
}

.glow-primary {
   box-shadow: 0 0 0 1px rgba(37, 99, 235, .15), 0 0 35px rgba(37, 99, 235, .25);
}

.glow-secondary {
   box-shadow: 0 0 35px rgba(6, 182, 212, .25);
}

.border-gradient {
   border: 1px solid transparent;
   background: linear-gradient(#fff, #fff) padding-box, var(--gradient-primary) border-box;
}

.image-overlay {
   position: relative;
   overflow: hidden;
}

.image-overlay::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(15, 23, 42, .55), transparent 65%);
   opacity: 0;
   transition: .35s;
   z-index: 1;
}

.image-overlay:hover::before {
   opacity: 1;
}

.image-hover {
   overflow: hidden;
}

.image-hover img {
   width: 100%;
   display: block;
   transition: transform .45s ease;
}

.image-hover:hover img {
   transform: scale(1.08);
}

.shine {
   position: relative;
   overflow: hidden;
}

.shine::after {
   content: "";
   position: absolute;
   top: 0;
   left: -120%;
   width: 70%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
   transform: skewX(-25deg);
}

.shine:hover::after {
   animation: shine 1s;
}


.floating {
   animation: floating 4s ease-in-out infinite;
}

.noise {
   position: relative;
}

.noise::after {
   content: "";
   position: absolute;
   inset: 0;
   opacity: .04;
   pointer-events: none;
   background-image: radial-gradient(#000 1px, transparent 1px);
   background-size: 8px 8px;
}

.premium-section {
   position: relative;
   overflow: hidden;
   isolation: isolate;
}

.premium-section::before {
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at top right, rgba(37, 99, 235, .08), transparent 40%), radial-gradient(circle at bottom left, rgba(6, 182, 212, .08), transparent 40%);
   z-index: -1;
}

.pattern-dots {
   position: absolute;
   inset: 0;
   opacity: .05;
   pointer-events: none;
   background-image: radial-gradient(var(--primary-color) 1px, transparent 1px);
   background-size: 26px 26px;
}

.pattern-grid {
   position: absolute;
   inset: 0;
   opacity: .05;
   pointer-events: none;
   background-image: linear-gradient(rgba(37, 99, 235, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 99, 235, .18) 1px, transparent 1px);
   background-size: 60px 60px;
}

.blur-circle {
   position: absolute;
   border-radius: 50%;
   filter: blur(80px);
   opacity: .18;
   pointer-events: none;
}

.blur-primary {
   background: #2563eb;
}

.blur-secondary {
   background: #06b6d4;
}

.blur-pink {
   background: #ec4899;
}

.blur-yellow {
   background: #f59e0b;
}

.wave-divider {
   width: 100%;
   overflow: hidden;
   line-height: 0;
}

.wave-divider svg {
   width: 100%;
   height: auto;
   display: block;
}

.hover-up {
   transition: var(--transition-normal);
}

.hover-up:hover {
   transform: translateY(-10px);
}

.hover-scale {
   transition: var(--transition-normal);
}

.hover-scale:hover {
   transform: scale(1.04);
}

.hover-shadow {
   transition: var(--transition-normal);
}

.hover-shadow:hover {
   box-shadow: var(--shadow-xl);
}

.hover-rotate {
   transition: var(--transition-normal);
}

.hover-rotate:hover {
   transform: rotate(3deg);
}

.cursor-glow {
   position: relative;
}

.cursor-glow::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   opacity: 0;
   transition: .35s;
   box-shadow: 0 0 35px rgba(37, 99, 235, .35);
}

.cursor-glow:hover::after {
   opacity: 1;
}

.hero {
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
   min-height: 100vh;
   padding: 180px 0 120px;
}

.hero-bg {
   position: absolute;
   inset: 0;
   z-index: 0;
}

.hero-bg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(7, 23, 52, .88) 0%, rgba(7, 23, 52, .72) 45%, rgba(7, 23, 52, .45) 70%, rgba(7, 23, 52, .25) 100%);
}

.hero-pattern {
   position: absolute;
   inset: 0;
   opacity: .05;
   background-image: radial-gradient(#ffffff 1px, transparent 1px);
   background-size: 30px 30px;
}

.hero .container {
   position: relative;
   z-index: 2;
}

.hero-content {
   max-width: 720px;
}

.breadcrumb {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 24px;
   font-size: .95rem;
}

.breadcrumb a {
   color: #ffffff;
}

.breadcrumb i {
   color: rgba(255, 255, 255, .7);
}

.breadcrumb span {
   color: rgba(255, 255, 255, .8);
}

.hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 10px 18px;
   margin-bottom: 28px;
   border-radius: 999px;
   background: rgba(255, 255, 255, .15);
   backdrop-filter: blur(12px);
   color: #ffffff;
   font-size: .92rem;
   font-weight: 600;
}

.hero-badge i {
   color: #7dd3fc;
}

.hero-title {
   margin-bottom: 26px;
   font-size: 4.4rem;
   line-height: 1.08;
   font-weight: 800;
   color: #ffffff;
}

.hero-title span {
   color: #7dd3fc;
}

.hero-description {
   max-width: 650px;
   margin-bottom: 40px;
   color: rgba(255, 255, 255, .88);
   font-size: 1.08rem;
   line-height: 1.9;
}

.hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 18px;
}

.hero-scroll {
   position: absolute;
   left: 50%;
   bottom: 35px;
   transform: translateX(-50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   color: #ffffff;
   z-index: 3;
}

.hero-scroll span {
   font-size: .85rem;
   letter-spacing: 2px;
   text-transform: uppercase;
}

.hero-scroll-line {
   width: 2px;
   height: 45px;
   border-radius: 20px;
   background: rgba(255, 255, 255, .7);
}

.hero-shape {
   position: absolute;
   border-radius: 50%;
   opacity: .05;
   pointer-events: none;
}

.hero-shape.one {
   top: -120px;
   right: -120px;
   width: 320px;
   height: 320px;
   background: #2563eb;
}

.hero-shape.two {
   bottom: -90px;
   left: -90px;
   width: 220px;
   height: 220px;
   background: #06b6d4;
}

.page-header {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 30px;
   margin-bottom: 60px;
}

.page-header-content {
   flex: 1;
}

.page-header-actions {
   display: flex;
   align-items: center;
   gap: 14px;
   flex-wrap: wrap;
}

.page-title {
   margin-bottom: 18px;
   font-size: 3rem;
   line-height: 1.2;
   font-weight: 800;
   color: var(--heading-color);
}

.page-title span {
   color: var(--primary-color);
}

.page-description {
   max-width: 700px;
   color: var(--text-light);
   line-height: 1.9;
   font-size: 1.05rem;
}

.page-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
   margin-top: 28px;
}

.page-meta-item {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 18px;
   border-radius: 999px;
   background: #ffffff;
   border: 1px solid rgba(15, 23, 42, .06);
   box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
}

.page-meta-item i {
   color: var(--primary-color);
}

.page-meta-item span {
   font-size: .92rem;
   font-weight: 500;
   color: var(--text-color);
}

.page-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 26px;
}

.page-tag {
   padding: 8px 16px;
   border-radius: 999px;
   background: rgba(37, 99, 235, .08);
   color: var(--primary-color);
   font-size: .85rem;
   font-weight: 600;
}

.page-filters {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 14px;
   margin-bottom: 60px;
}

.page-filter {
   padding: 12px 22px;
   border: none;
   border-radius: 999px;
   background: #f5f7fb;
   color: var(--heading-color);
   font-weight: 600;
   cursor: pointer;
   transition: .3s;
}

.page-filter:hover,
.page-filter.active {
   background: var(--gradient-primary);
   color: #ffffff;
}

.page-nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px;
   margin-top: 70px;
}

.page-nav-item {
   display: flex;
   align-items: center;
   gap: 14px;
   text-decoration: none;
   color: inherit;
}

.page-nav-icon {
   width: 56px;
   height: 56px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 18px;
   background: #ffffff;
   box-shadow: var(--shadow-md);
   color: var(--primary-color);
   transition: .3s;
}

.page-nav-item:hover .page-nav-icon {
   background: var(--primary-color);
   color: #ffffff;
}

.page-nav-content small {
   display: block;
   margin-bottom: 4px;
   color: var(--text-light);
}

.page-nav-content h5 {
   margin: 0;
   font-size: 1rem;
}

.object-cover {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.object-contain {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.hover-primary:hover {
   color: var(--primary-color);
}

.img-hover {
   overflow: hidden;
   border-radius: inherit;
}

.img-hover img {
   width: 100%;
   display: block;
   transition: transform .45s ease, filter .45s ease;
}

.img-hover:hover img {
   transform: scale(1.08);
   filter: brightness(1.05);
}

.gradient-text {
   background: var(--gradient-primary);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.shimmer {
   background: linear-gradient(90deg, #f5f7fb 25%, #ffffff 50%, #f5f7fb 75%);
   background-size: 200% 100%;
   animation: shimmer 2s linear infinite;
}

.slider {
   position: relative;
   overflow: hidden;
}

.slider .swiper {
   overflow: visible;
   padding: 10px 4px 70px;
}

.slider-nav {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 14px;
   margin-top: 45px;
}

.slider-btn {
   width: 54px;
   height: 54px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
   border-radius: 50%;
   cursor: pointer;
   background: #ffffff;
   color: var(--primary-color);
   box-shadow: var(--shadow-md);
   transition: .35s;
   -webkit-transition: .35s;
   -moz-transition: .35s;
   -ms-transition: .35s;
   -o-transition: .35s;
}

.slider-btn:hover {
   background: var(--gradient-primary);
   color: #ffffff;
   box-shadow: var(--shadow-lg);
}

.slider-btn.swiper-button-disabled {
   opacity: .45;
   cursor: not-allowed;
   pointer-events: none;
}

.slider-pagination {
   margin-top: 35px;
   text-align: center;
}

.slider-pagination .swiper-pagination-bullet {
   width: 10px;
   height: 10px;
   margin: 0 6px !important;
   background: #cbd5e1;
   opacity: 1;
   transition: .35s;
   -webkit-transition: .35s;
   -moz-transition: .35s;
   -ms-transition: .35s;
   -o-transition: .35s;
}

.slider-pagination .swiper-pagination-bullet-active {
   width: 28px;
   border-radius: 999px;
   background: var(--primary-color);
}

.slider-fraction {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   margin-top: 20px;
   color: var(--text-light);
   font-weight: 600;
}

.slider-scrollbar {
   margin-top: 24px;
   border-radius: 999px;
   background: #e2e8f0;
}

.slider-scrollbar .swiper-scrollbar-drag {
   background: var(--gradient-primary);
   border-radius: 999px;
}

.slide-card {
   height: 100%;
   border-radius: 28px;
   overflow: hidden;
   background: #ffffff;
   box-shadow: var(--shadow-md);
   transition: transform .35s, box-shadow .35s;
}

.slide-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-xl);
}

.slide-image {
   position: relative;
   overflow: hidden;
}

.slide-image img {
   width: 100%;
   display: block;
   transition: transform .45s ease;
}

.slide-card:hover .slide-image img {
   transform: scale(1.08);
}

.slide-content {
   padding: 28px;
}

.slide-content h3 {
   margin-bottom: 12px;
}

.slide-content p {
   color: var(--text-light);
   line-height: 1.8;
}

.slide-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(15, 23, 42, .45), transparent 65%);
}

.slide-badge {
   position: absolute;
   top: 18px;
   left: 18px;
   padding: 8px 16px;
   border-radius: 999px;
   background: #ffffff;
   color: var(--primary-color);
   font-size: .85rem;
   font-weight: 600;
   box-shadow: var(--shadow-md);
}

.slider-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 56px;
   height: 56px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
   border-radius: 50%;
   cursor: pointer;
   z-index: 5;
   background: rgba(255, 255, 255, .95);
   color: var(--primary-color);
   box-shadow: var(--shadow-lg);
   transition: .35s;
}

.slider-arrow:hover {
   background: var(--gradient-primary);
   color: #ffffff;
}

.slider-prev {
   left: -28px;
}

.slider-next {
   right: -28px;
}

.table-responsive {
   width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   border-radius: 24px;
}

.table {
   width: 100%;
   min-width: 700px;
   border-collapse: collapse;
   background: #ffffff;
   border-radius: 24px;
   overflow: hidden;
   box-shadow: var(--shadow-md);
}

.table thead {
   background: var(--gradient-primary);
}

.table th {
   padding: 20px 24px;
   text-align: left;
   color: #ffffff;
   font-size: .95rem;
   font-weight: 700;
   white-space: nowrap;
}

.table td {
   padding: 20px 24px;
   color: var(--text-color);
   border-bottom: 1px solid rgba(15, 23, 42, .06);
   vertical-align: middle;
   line-height: 1.7;
}

.table tbody tr:last-child td {
   border-bottom: none;
}

.table tbody tr {
   transition: .3s;
}

.table tbody tr:hover {
   background: #f8fbff;
}

.table-striped tbody tr:nth-child(even) {
   background: #fafcff;
}

.table-striped tbody tr:nth-child(even):hover {
   background: #f3f8ff;
}

.table-bordered {
   border: 1px solid rgba(15, 23, 42, .08);
}

.table-bordered th,
.table-bordered td {
   border: 1px solid rgba(15, 23, 42, .08);
}

.table-sm th,
.table-sm td {
   padding: 14px 18px;
}

.table-center th,
.table-center td {
   text-align: center;
}

.table-actions {
   display: flex;
   align-items: center;
   gap: 10px;
}

.table-actions .btn {
   padding: 10px 16px;
}

.table-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 6px 14px;
   border-radius: 999px;
   font-size: .82rem;
   font-weight: 600;
}

.table-badge.success {
   background: rgba(16, 185, 129, .12);
   color: #10b981;
}

.table-badge.warning {
   background: rgba(245, 158, 11, .12);
   color: #f59e0b;
}

.table-badge.danger {
   background: rgba(239, 68, 68, .12);
   color: #ef4444;
}

.table-badge.info {
   background: rgba(37, 99, 235, .12);
   color: var(--primary-color);
}

.table-image {
   width: 56px;
   height: 56px;
   border-radius: 14px;
   object-fit: cover;
}

.table-user {
   display: flex;
   align-items: center;
   gap: 14px;
}

.table-avatar {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   object-fit: cover;
}

.table-price {
   font-weight: 700;
   color: var(--primary-color);
}

.table-empty {
   padding: 80px 30px;
   text-align: center;
   color: var(--text-light);
}

.table-empty i {
   display: block;
   margin-bottom: 18px;
   font-size: 3rem;
   color: var(--primary-color);
}

.model-accordion-container .accordion-item,
.container-accordion-custom .accordion-item {
   background-color: var(--white);
   border: none !important;
   border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
   transition: background-color var(--transition-normal);
}

.model-accordion-container .accordion-item:last-child,
.container-accordion-custom .accordion-item:last-child {
   border-bottom: none !important;
}

.model-accordion-container .accordion-button,
.container-accordion-custom .accordion-button {
   padding: 24px 30px;
   font-size: 1.15rem;
   font-weight: 700;
   color: var(--heading-color);
   background-color: var(--white);
   border: none;
   box-shadow: none !important;
   transition: background-color var(--transition-normal), color var(--transition-normal);
}

.model-accordion-container .accordion-button:not(.collapsed),
.container-accordion-custom .accordion-button:not(.collapsed) {
   color: var(--primary-color) !important;
   background-color: var(--section-bg);
}

.model-accordion-container .faq-question,
.container-accordion-custom .faq-question {
   display: flex;
   align-items: center;
   gap: 14px;
}

.model-accordion-container .faq-number,
.container-accordion-custom .faq-number {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background-color: rgba(37, 99, 235, .08);
   color: var(--primary-color);
   font-weight: 700;
   font-size: 15px;
   flex-shrink: 0;
}

.model-accordion-container .accordion-icon,
.container-accordion-custom .accordion-icon {
   width: 36px;
   height: 36px;
   background-color: var(--border-light);
   color: var(--text-light);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform var(--transition-normal), background-color var(--transition-normal), color var(--transition-normal);
   flex-shrink: 0;
}

.model-accordion-container .accordion-button:not(.collapsed) .accordion-icon,
.container-accordion-custom .accordion-button:not(.collapsed) .accordion-icon {
   transform: rotate(180deg);
   background-color: var(--primary-color);
   color: var(--white);
}

.model-accordion-container .accordion-body,
.container-accordion-custom .accordion-body {
   padding: 20px 30px 30px 84px;
   color: var(--text-light);
   font-size: 1rem;
   line-height: 1.8;
   background-color: var(--white);
   border: none;
}

/*=====================================================
COUNTRY FAQ TABS
======================================================*/
.nav-pills {
   display: flex;
   flex-wrap: wrap;
}

.nav-pills .nav-link {
   padding: 14px 28px;
   border-radius: 50px;
   border: 1px solid rgba(37, 99, 235, .12);
   background: #ffffff;
   color: var(--heading-color);
   font-weight: 600;
   transition: all .35s ease;
}

.nav-pills .nav-link:hover {
   color: var(--primary-color);
   border-color: var(--primary-color);
}

.nav-pills .nav-link.active {
   background: var(--gradient-primary);
   color: #ffffff;
   border-color: transparent;
   box-shadow: 0 15px 35px rgba(37, 99, 235, .20);
}

.tab-content>.tab-pane {
   display: none !important;
}

.tab-content>.tab-pane.active {
   display: block !important;
}

.tab-content>.tab-pane>.card {
   padding: 40px;
}

.policy-content {
   max-width: 950px;
   margin: auto;
}

.policy-section {
   padding: 30px 0;
   border-bottom: 1px solid rgba(15, 23, 42, .08);
}

.policy-section:last-child {
   border-bottom: none;
}

.policy-title {
   margin-bottom: 14px;
   font-size: 1.6rem;
   font-weight: 700;
}

.policy-text {
   color: var(--text-light);
   line-height: 1.9;
}

/*=====================================================
COUNTRY COMPARISON
======================================================*/

.comparison-table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
   overflow: hidden;
   border-radius: 24px;
   background: #fff;
   box-shadow: var(--shadow-lg);
}

.comparison-table th,
.comparison-table td {
   padding: 18px;
   text-align: center;
   border-bottom: 1px solid rgba(15, 23, 42, .08);
}

.comparison-table th:first-child,
.comparison-table td:first-child {
   text-align: left;
   font-weight: 700;
}

.comparison-table thead th {
   background: var(--primary-color);
   color: #fff;
}

.comparison-table thead img {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   margin-right: 8px;
   vertical-align: middle;
}

.comparison-table tbody tr:hover {
   background: rgba(var(--primary-rgb), .04);
}

/*=====================================================
FEATURED UNIVERSITIES
======================================================*/

.university-card {
   height: 100%;
   background: #fff;
   border: 1px solid rgba(15, 23, 42, .08);
   border-radius: 24px;
   overflow: hidden;
   transition: all .35s ease;
   box-shadow: 0 10px 35px rgba(15, 23, 42, .08);
}

.university-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 20px 50px rgba(15, 23, 42, .15);
}

.university-image {
   position: relative;
   overflow: hidden;
   aspect-ratio: 16/10;
}

.university-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .5s ease;
}

.university-card:hover .university-image img {
   transform: scale(1.08);
}

.card-icon img{
    width:40px;
    height:40px;
    object-fit:contain;
    display:block;
}

/*=====================================================
RANKING BADGE
======================================================*/

.ranking-badge {
   position: absolute;
   top: 18px;
   right: 18px;
   background: var(--primary-color);
   color: #fff;
   padding: 8px 14px;
   border-radius: 999px;
   font-size: .78rem;
   font-weight: 700;
   box-shadow: 0 8px 20px rgba(var(--primary-rgb), .35);
}

/*=====================================================
CONTENT
======================================================*/

.university-content {
   padding: 26px;
}

.university-content h3 {
   margin: 18px 0 8px;
   font-size: 1.35rem;
   font-weight: 700;
   color: var(--heading-color);
}

.university-content p {
   color: var(--text-light);
   margin-bottom: 20px;
}

/*=====================================================
COUNTRY BADGE
======================================================*/

.university-country-badge {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 8px 14px;
   border-radius: 999px;
   background: rgba(var(--primary-rgb), .08);
   border: 1px solid rgba(var(--primary-rgb), .15);
}

.university-country-badge img {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   object-fit: cover;
   border: 1px solid rgba(15, 23, 42, .08);
}

.university-country-badge span {
   font-size: .9rem;
   font-weight: 600;
   color: var(--heading-color);
}
*/
/*=====================================================
PROGRAM TAGS
======================================================*/

.program-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin: 22px 0;
}

.program-tags span {
   padding: 7px 14px;
   border-radius: 999px;
   background: rgba(var(--primary-rgb), .08);
   color: var(--primary-color);
   font-size: .82rem;
   font-weight: 600;
}

/*=====================================================
META LIST
======================================================*/

.university-meta {
   list-style: none;
   padding: 0;
   margin: 0 0 25px;
}

.university-meta li {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 0;
   border-bottom: 1px solid rgba(15, 23, 42, .08);
   color: var(--text-color);
   font-size: .95rem;
}

.university-meta li:last-child {
   border-bottom: none;
}

.university-meta i {
   width: 18px;
   color: var(--primary-color);
}

/*=====================================================
BUTTON
======================================================*/

.university-card .btn {
   width: 100%;
}


#backToTop {
    position: fixed;
    right: 25px;
    bottom: 30px;
    width: 55px;
    height: 55px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #fff;
    font-size: 20px;
    box-shadow: 0 15px 35px rgba(37, 99, 235, 0.35);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: 0.35s;
    z-index: 999;
}

#backToTop.show {
    opacity: 1;
    visibility: visible;
}

#backToTop:hover {
    transform: translateY(-5px);
}

.whatsapp-float {
    position: fixed;
    left: 25px;
    bottom: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25d366;
    color: #fff;
    font-size: 32px;
    box-shadow: 0 15px 40px rgba(37, 211, 102, 0.35);
    z-index: 999;
    transition: 0.35s;
    animation: whatsappPulse 2s infinite;
    -webkit-animation: whatsappPulse 2s infinite;
}

.whatsapp-float:hover {
    transform: translateY(-6px);

    color: #fff;
}

/*=====================================================
PREMIUM FAQ
======================================================*/

.accordion{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.accordion-item{
    position:relative;
    overflow:hidden;
    border:none;
    border-radius:var(--card-radius);
    background:var(--card-bg);
    box-shadow:var(--shadow-md);
    transition:var(--transition);
}

.accordion-item::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:5px;
    height:100%;
    background:var(--gradient-primary);
    transform:scaleY(0);
    transform-origin:top;
    transition:.45s ease;
}

.accordion-item:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-xl);
}

.accordion-item:has(.accordion-button:not(.collapsed)){
    box-shadow:
        0 25px 60px rgba(37,99,235,.16),
        0 8px 20px rgba(15,23,42,.08);
}

.accordion-item:has(.accordion-button:not(.collapsed))::before{
    transform:scaleY(1);
}

/*=====================================================*/

.accordion-button{
    background:transparent;
    border:none;
    box-shadow:none!important;
    padding:24px 30px;
    font-size:1.05rem;
    font-weight:700;
    color:var(--heading-color);
    transition:var(--transition);}

.accordion-button:hover{
    color:var(--primary-color);
}

.accordion-button:not(.collapsed){

    background:linear-gradient(
        135deg,
        rgba(37,99,235,.05),
        rgba(6,182,212,.08)
    );
    color:var(--primary-color);
}

/*=====================================================
QUESTION ICON
======================================================*/

.accordion-button::before{

    content:"?";
    width:48px;
    height:48px;
    margin-right:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    background:var(--gradient-primary);
    color:#fff;
    font-weight:700;
    font-size:1.2rem;
    flex-shrink:0;
    box-shadow:
        0 12px 25px rgba(37,99,235,.25);
    transition:.4s;
}

.accordion-button:not(.collapsed)::before{

    transform:rotate(360deg) scale(1.05);

}

/*=====================================================
PLUS ICON
======================================================*/

.accordion-button::after{

    width:44px;
    height:44px;
    border-radius:50%;
    background-color:#eef5ff;
    background-position:center;
    background-size:16px;
    transition:.4s;

}

.accordion-button:not(.collapsed)::after{

    background-color:var(--primary-color);
    filter:brightness(0) invert(1);
    transform:rotate(-180deg);

}

/*=====================================================*/

.accordion-button:focus{
    box-shadow:none;
}

.accordion-collapse{
    border:none;
}

.accordion-body{
    padding:0 30px 28px 96px;
    color:var(--text-color);
    font-size:1rem;
    line-height:1.9;
}

/*=====================================================
MOBILE OVERFLOW FIX
======================================================*/

*,
*::before,
*::after{
    box-sizing:border-box;
    min-width:0;
}

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    scroll-behavior:smooth;
}

section,
.container,
.container-fluid{
    max-width:100%;
}

img,
picture,
video,
canvas,
svg,
iframe{
    display:block;
    max-width:100%;
    height:auto;
}

.grid,
[class*="grid-"]{
    width:100%;
}

.grid>*,
.flex>*,
.card,
.glass-card{
    min-width:0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a{
    overflow-wrap:break-word;
    word-break:break-word;
}

.table-responsive{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

table{
    min-width:700px;
}

input,
select,
textarea{
    width:100%;
    max-width:100%;
}

.hero-form,
.contact-form,
.form-card{
    overflow:hidden;
}

/*=====================================================
RESPONSIVE - LARGE DESKTOP
======================================================*/

@media (min-width:1600px){

.container{
    max-width:1500px;
}

.hero-title{
    font-size:5rem;
}

.section-title{
    font-size:3.8rem;
}

}

/*=====================================================
RESPONSIVE - DESKTOP
======================================================*/

@media (max-width:1400px){

.container{
    max-width:1320px;
}

.hero-title{
    font-size:4rem;
}

.section-title{
    font-size:3rem;
}

.hero-grid{
    gap:70px;
}

}

/*=====================================================
RESPONSIVE - LAPTOP
======================================================*/

@media (max-width:1200px){

.container{
    max-width:1140px;
    padding-inline:20px;
}

.hero-title{
    font-size:3.6rem;
}

.section-title{
    font-size:2.8rem;
}

.hero-grid{
    gap:50px;
}

.grid-4,
.card-grid.grid-4{
    grid-template-columns:repeat(3,1fr);
}

.grid-5{
    grid-template-columns:repeat(4,1fr);
}

.grid-6{
    grid-template-columns:repeat(4,1fr);
}

.timeline{
    grid-template-columns:repeat(2,1fr);
    gap:28px;
}

.card-top,
.card-bottom{
    display:none;
}

}

/*=====================================================
RESPONSIVE - SMALL LAPTOP
======================================================*/

@media (max-width:1024px){

.container{
    max-width:960px;
    padding-inline:20px;
}

.hero-title{
    font-size:3.3rem;
}

.section-title{
    font-size:2.6rem;
}

.hero-grid{
    gap:40px;
}

.grid-3,
.grid-4,
.card-grid.grid-4{
    grid-template-columns:repeat(2,1fr);
}

.grid-5,
.grid-6{
    grid-template-columns:repeat(3,1fr);
}

/*=====================================================
RESPONSIVE - TABLET (991px)
======================================================*/

@media (max-width:991px){

/*=====================================================
GENERAL
======================================================*/

.container{
    max-width:960px;
    padding-inline:20px;
}

body{
    font-size:.97rem;
}

.lead{
    font-size:1.08rem;
}

blockquote{
    padding:24px;
}

.divider{
    margin:50px 0;
}

.section-divider{
    margin:60px 0;
}

/*=====================================================
DECORATIVE
======================================================*/

.shape,
.shape.one,
.shape.two,
.shape.three,
.glow,
.blur-circle,
.pattern-grid,
.pattern-wave,
.pattern-lines,
.pattern-dots,
.hero-shape,
.float-circle,
.float-square,
.float-ring,
.floating-card{
    display:none!important;
}

/*=====================================================
HERO
======================================================*/

.hero{
    min-height:auto;
    padding:60px 0 80px;
}

.hero-grid,
.grid-2{
    grid-template-columns:1fr;
    gap:50px;
}

.hero-content{
    max-width:100%;
    margin:auto;
    text-align:center;
}

.hero-description{
    margin-inline:auto;
}

.hero-actions{
    justify-content:center;
    flex-wrap:wrap;
}

.hero-image{
    order:-1;
}

.hero-card,
.hero-scroll{
    display:none;
}

/*=====================================================
TYPOGRAPHY
======================================================*/

.hero-title{
    font-size:3rem;
    line-height:1.15;
}

.section-title{
    font-size:2.5rem;
    line-height:1.2;
}

/*=====================================================
GRID
======================================================*/

.grid-3,
.grid-4,
.card-grid.grid-3,
.card-grid.grid-4{
    grid-template-columns:repeat(2,1fr);
}

.timeline{
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.timeline::before{
    display:none;
}

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

.feature-list{
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.process-grid{
    grid-template-columns:1fr;
}

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

.logo-grid{
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

/*=====================================================
TIMELINE
======================================================*/

.timeline-item{
    text-align:left;
}

.timeline-dot{
    margin:0 0 20px;
}

.timeline-content{
    padding:24px;
}

/*=====================================================
IMAGE
======================================================*/

.image-stack{
    min-height:420px;
}

.image-card{
    position:static;
    margin-top:20px;
}

/*=====================================================
REVIEW
======================================================*/

.review-header{
    flex-direction:column;
    text-align:center;
}

/*=====================================================
FORMS
======================================================*/

.form-row{
    grid-template-columns:1fr;
}

.info-item{
    flex-direction:column;
}

/*=====================================================
UNIVERSITY
======================================================*/

.university-content{
    padding:22px;
}

.university-content h3{
    font-size:1.2rem;
}

/*=====================================================
FAQ
======================================================*/

.study-faq .grid{
    grid-template-columns:repeat(2,1fr);
}

.accordion{
    gap:16px;
}

.accordion-button{
    padding:18px 20px;
    font-size:1rem;
}

.accordion-body{
    padding:0 20px 20px;
}

/*=====================================================
PAGE
======================================================*/

.page-header{
    flex-direction:column;
    align-items:flex-start;
}

.page-header-actions{
    width:100%;
}

.page-nav{
    flex-direction:column;
}

.page-meta-item{
    width:100%;
}

.section-header{
    margin-bottom:50px;
}

.sticky-nav{
    position:relative;
    top:0;
}

/*=====================================================
CTA
======================================================*/

.cta-card .section-title{
    font-size:2.6rem;
}

/*=====================================================
SLIDER
======================================================*/

.slider-prev{
    left:0;
}

.slider-next{
    right:0;
}

/*=====================================================
TABLE
======================================================*/

.table{
    min-width:650px;
}

/*=====================================================
NAVBAR
======================================================*/

.top-bar{
    display:none;
}

.premium-navbar{
    height:78px;
}

.navbar-brand{
    margin-right:0;
}

.navbar-brand img{
    height:62px;
}

.navbar-nav{
    gap:4px;
    padding:20px 0;
}

.navbar-nav .nav-link{
    justify-content:flex-start;
    height:auto;
    padding:14px 18px;
    border-radius:14px;
}

.nav-actions{
    width:100%;
    margin-top:20px;
}

.premium-navbar .btn{
    width:100%;
}

.navbar-collapse{
        position:fixed;
        top:78px;
        left:0;
        width:100%;
        height:calc(100vh - 78px);
        background:#ffffff;
        z-index:9999;
        overflow-y:auto;
        padding:24px;
    }


/*=====================================================
UTILITIES
======================================================*/

.md-text-center{
    text-align:center!important;
}

.md-d-none{
    display:none!important;
}

.md-grid-1{
    grid-template-columns:1fr!important;
}

.md-flex-column{
    flex-direction:column!important;
}

.md-w-100{
    width:100%!important;
}

}

/*=====================================================
RESPONSIVE - TABLET (768px)
======================================================*/

@media (max-width:768px){

.container{
    max-width:720px;
    padding-inline:18px;
}

/* Hero */

.hero{
    min-height:auto;
}

.hero-title{
    font-size:2.9rem;
    line-height:1.15;
}

.section-title{
    font-size:2.3rem;
    line-height:1.2;
}

.section-description{
    font-size:1rem;
}

.hero-actions,
.btn-group{
    flex-direction:column;
}

.btn,
.hero-actions .btn{
    width:100%;
}

/* Grid */

.grid-2,
.grid-3,
.grid-4,
.feature-list,
.timeline,
.process-grid,
.card-grid.grid-2,
.card-grid.grid-3,
.card-grid.grid-4{
    grid-template-columns:1fr;
}

.logo-grid{
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

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

.timeline{
    gap:24px;
}

.timeline::before{
    display:none;
}

.timeline-item{
    text-align:left;
}

.timeline-dot{
    margin:0 0 20px;
}

.timeline-content{
    padding:24px;
}

/* Images */

.image-card{
    position:static;
    margin-top:20px;
}

/* CTA */

.cta-card .section-title{
    font-size:2.6rem;
}

/* FAQ */

.study-faq .grid{
    grid-template-columns:1fr;
}

.accordion-button{
    padding:18px 20px;
    font-size:1rem;
}

.accordion-button::before{
    width:42px;
    height:42px;
    margin-right:14px;
}

.accordion-body{
    padding:0 20px 22px 76px;
}

/* Page */

.page-meta-item{
    width:100%;
}

/* Hero */

.hero-scroll{
    display:none;
}

.input-group
{
   gap: 5px;
}

}

/*=====================================================
RESPONSIVE - LARGE MOBILE (640px)
======================================================*/

@media (max-width:640px){

.container{
    padding-inline:16px;
}

.hero-title{
    font-size:2.7rem;
}

.section-title{
    font-size:2.2rem;
}

.cta-card{
    padding:50px 30px;
}
/*=====================================================
NAV PILLS - MOBILE
======================================================*/

/* Mobile Nav Pills */
.nav-pills{
    display:flex;
    flex-wrap:nowrap;
   justify-content:flex-start !important;
    align-items:center;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:10px 16px;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.nav-pills::-webkit-scrollbar{
    display:none;
}

.nav-pills .nav-item{
    flex:0 0 auto;
}

.nav-pills .nav-link{
    display:flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    min-width:90px;
    padding:12px 20px;
    border-radius:999px;
}

.nav-pills::after{
    content:"";
    flex:0 0 18px;
}

.tab-content>.tab-pane>.card{
    padding:24px;
}

}

/*=====================================================
RESPONSIVE - MOBILE (576px)
======================================================*/

@media (max-width:576px){

/* Buttons */

.btn{
    width:100%;
}

.btn-group{
    flex-direction:column;
    align-items:stretch;
}

.btn-lg,
.btn-xl{
    padding:16px 28px;
}

.btn-icon{
    width:50px;
    height:50px;
}

.play-btn{
    width:64px;
    height:64px;
}

/* Hero */

.hero{
    padding:40px 0 60px;
}

.hero-title{
    font-size:2.4rem;
}

.section-title{
    font-size:2rem;
}

.hero-description{
    font-size:1rem;
}

.hero-actions{
    gap:15px;
}

.hero-highlight{
    gap:14px;
}

.hero-highlight i{
    width:48px;
    height:48px;
    font-size:1rem;
}

/* Typography */

body{
    font-size:.95rem;
}

.lead{
    font-size:1rem;
}

.text-xl{
    font-size:1.2rem;
}

.text-lg{
    font-size:1.05rem;
}

blockquote{
    padding:20px;
    font-size:1rem;
}

/* Page */

.page-title{
    font-size:2.2rem;
}

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

.page-meta{
    flex-direction:column;
}

.page-filters{
    gap:10px;
}

.page-filter{
    width:100%;
}

.page-nav{
    gap:30px;
}

/* CTA */

.cta-card{
    padding:40px 24px;
}

/* Counters */

.counter-grid,
.stats-grid,
.logo-grid{
    grid-template-columns:1fr;
}

.counter{
    padding:26px;
    gap:18px;
}

.counter-number{
    font-size:2.2rem;
}

.counter-icon{
    width:64px;
    height:64px;
    font-size:1.6rem;
}

.stats-number{
    font-size:2.2rem;
}

/* Cards */

.glass-card,
.process-step,
.pricing-card,
.review-card,
.service-card,
.feature-card,
.country-content,
.blog-content,
.team-content,
.stat-card{
    padding:24px;
}

.feature-card,
.feature-item{
    flex-direction:column;
}

.feature-item{
    padding:28px 24px;
}

.feature-icon{
    width:64px;
    height:64px;
    margin-bottom:20px;
}

.feature-icon i{
    font-size:1.5rem;
}

/* Images */

.team-image{
    height:280px;
}

.blog-image,
.country-image{
    height:220px;
}

.image-lg{
    height:280px;
}

.image-xl{
    height:340px;
}

.image-stack{
    min-height:320px;
}

.image-content{
    left:20px;
    right:20px;
    bottom:20px;
}

/* Logo */

.logo-card{
    height:90px;
}

.logo-card img{
    max-width:120px;
}

/* Country */

.country-meta{
    gap:10px;
}

.country-meta span{
    width:100%;
    justify-content:center;
}

.country-flag{
    width:48px;
    height:48px;
    top:14px;
    right:14px;
}

.country-flag img{
    width:30px;
    height:30px;
}

.country-badge{
    left:14px;
    bottom:14px;
    padding:7px 12px;
}

/* Reviews */

.review-header{
    flex-direction:column;
    text-align:center;
}

.review-avatar{
    width:60px;
    height:60px;
}

.review-info h4{
    font-size:1rem;
}

.review-text{
    font-size:.95rem;
}

/* Timeline */

.timeline{
    gap:24px;
}

.timeline-content{
    padding:24px;
}

/* Tags */

.tags{
    gap:8px;
}

.tag{
    padding:7px 12px;
    font-size:.78rem;
}

/* Table */

.table th,
.table td{
    padding:16px;
    font-size:.92rem;
}

/* Form */

.form-card{
    padding:28px;
}

.newsletter{
    flex-direction:column;
}

.newsletter .btn{
    width:100%;
}

.search-box input{
    height:56px;
}

/* Slider */

.slider .swiper{
    padding-bottom:55px;
}

.slider-prev,
.slider-next{
    display:none;
}

.slide-content{
    padding:22px;
}

/* Breadcrumb */

.breadcrumb{
    flex-wrap:wrap;
    gap:8px;
    font-size:.85rem;
}

/* Modal */

.modal-header,
.modal-body,
.modal-footer{
    padding:20px;
}

.modal-footer{
    flex-direction:column;
}

.modal-footer .btn{
    width:100%;
}

/* Utilities */

.tabs,
.category-menu{
    flex-direction:column;
}

.tab{
    width:100%;
}

.page-link{
    width:46px;
    height:46px;
}

.category-item{
    text-align:center;
}

.sm-text-center{
    text-align:center!important;
}

.sm-d-none{
    display:none!important;
}

.sm-grid-1{
    grid-template-columns:1fr!important;
}

.sm-flex-column{
    flex-direction:column!important;
}

.sm-w-100{
    width:100%!important;
}

}

/*=====================================================
RESPONSIVE - SMALL MOBILE (480px)
======================================================*/

@media (max-width:480px){

.container{
    padding-inline:18px;
}

/* Typography */

.hero-title{
    font-size:2.1rem;
    line-height:1.2;
}

.section-title{
    font-size:1.8rem;
    line-height:1.25;
}

.hero-description,
.section-description{
    font-size:.96rem;
}

.hero-badge,
.section-badge{
    padding:10px 18px;
    font-size:.85rem;
}

/* Grid */

.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.card-grid.grid-2,
.card-grid.grid-3,
.card-grid.grid-4,
.card-grid.grid-5,
.card-grid.grid-6{
    grid-template-columns:1fr !important;
    gap:20px;
}

/* Cards */

.card,
.glass-card,
.feature-card,
.review-card,
.service-card,
.pricing-card,
.blog-card,
.country-card,
.university-card,
.team-card,
.process-step,
.stat-card{
    padding:20px;
}

/* Timeline */

.timeline{
    gap:20px;
    margin-top:40px;
}

.timeline-content{
    padding:20px;
}

.timeline-dot{
    width:52px;
    height:52px;
    margin-bottom:16px;
}

/* Images */

.country-image{
    height:200px;
}

/* CTA */

.cta-card .section-title{
    font-size:2rem;
}

}

/*=====================================================
RESPONSIVE - EXTRA SMALL (420px)
======================================================*/

@media (max-width:420px){

.hero-title{
    font-size:1.95rem;
}

.section-title{
    font-size:1.7rem;
}

.btn{
    padding:14px 20px;
}

.card,
.glass-card,
.feature-card,
.review-card,
.service-card,
.pricing-card,
.blog-card,
.country-card,
.university-card,
.team-card,
.process-step,
.stat-card{
    padding:18px;
}

}

/*=====================================================
RESPONSIVE - VERY SMALL (375px)
======================================================*/

@media (max-width:375px){

.hero-title{
    font-size:1.8rem;
}

.section-title{
    font-size:1.55rem;
}

.hero-badge,
.section-badge{
    width:100%;
    justify-content:center;
}

.card,
.glass-card,
.feature-card,
.review-card,
.service-card,
.pricing-card,
.blog-card,
.country-card,
.university-card,
.team-card,
.process-step,
.stat-card{
    padding:16px;
}

}

/*=====================================================
RESPONSIVE - MINI DEVICES (360px)
======================================================*/

@media (max-width:360px){

.container{
    padding-inline:16px;
}

.hero-title{
    font-size:1.65rem;
}

.section-title{
    font-size:1.45rem;
}

.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.card-grid.grid-2,
.card-grid.grid-3,
.card-grid.grid-4,
.card-grid.grid-5,
.card-grid.grid-6{
    gap:16px;
}

}

/*=====================================================
ACCESSIBILITY
======================================================*/

@media (prefers-contrast:more){

.card,
.btn,
.table,
.accordion-item,
.modal-dialog{
    border:2px solid #000 !important;
}

}

@media (prefers-color-scheme:dark){

.auto-dark{
    filter:brightness(.92);
}

}

@media (prefers-reduced-motion:reduce){

*,
*::before,
*::after,
.fade-up,
.fade-down,
.fade-left,
.fade-right,
.zoom-in,
.zoom-out,
.float,
.pulse,
.rotate,
.shimmer{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
}

.hover-lift,
.hover-scale,
.hover-zoom img,
.hover-shadow,
.hover-primary,
.hover-rotate{
    transition:none !important;
}

}

}