:root {

  /* Main Color Pallet */
  /*///////////////////////////*/
    /* Neutral */
    --neutral:#FAFAFA;
    /* Stale */
    --stale-1000:#020617;
    --stale-900:#0F172A;
    --stale-800:#1E293B;
    --stale-700:#334155;
    --stale-600:#475569;  
    --stale-500:#64748B;
    --stale-400:#94A3B8;
    --stale-300:#CBD5E1;
    --stale-200:#E2E8F0;
    --stale-100:#F1F5F9;
    /* Sky*/
    --Sky-700:#082F49;
    --Sky-600:#0C4A6E;
    --Sky-500:#075985;
    --Sky-400:#0369A1;
    --Sky-300:#0284C7;
    --Sky-200:#0EA5E9;
    /* Violet */
    --Violet-800:#2E1065;
    --Violet-700:#4C1D95;
    --Violet-600:#5B21B6;
    --Violet-500:#6D28D9;
    --Violet-400:#7C3AED;
    --Violet-300:#8B5CF6;
    --Violet-200:#A78BFA;
    /* Teal */
    --Teal-900:#042F2E;
    --Teal-800:#134E4A;
    --Teal-700:#115E59;
    --Teal-600:#0F766E;
    --Teal-500:#0D9488;
    --Teal-400:#2DD4BF;
    --Teal-300:#5EEAD4;
    --Teal-200:#99F6E4;
    --Teal-100:#CCFBF1;
    /* Temp Colors */
    --section-bg-main: #E0EAFF;
    --features-bg-1:#f1f5f96c;
    --features-bg-2:#f1f5f920;
  /*///////////////////////////*/

  /* Pricing-Card-Colors */
  /*///////////////////////////*/
  --basic-accent-color: linear-gradient(
    to right,
    rgb(237, 33, 58),
    rgb(199, 69, 55)
  );
  --premium-accent-color: linear-gradient(
    to right,
    rgb(30, 60, 114),
    rgb(42, 82, 152)
  );
  --ultra-accent-color: linear-gradient(
    to right,
    rgb(82, 194, 52),
    rgb(103, 198, 68)
  );
  --ultraPremium-accent-color: linear-gradient(
    to right,
    rgba(210, 181, 86, 0.855),
    rgb(215, 171, 87)
  );
  /*///////////////////////////*/

  /* Sizes */
  /* static size */
  --x-sm-size: 5px;
  --sm-size: 10px;
  --md-size: 20px;
  --lg-size:  50px;
  /* responsize size */
  --xsm-responsize-size: 1rem;
  --sm-responsive-size: 1.3rem;
  --md-responsize-size: 1.5rem;
  --lg-responsize-size: 2rem;
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
  /* Importing custom fonts */
@font-face {
  font-family: 'vazir bold';
  src: url(../resources/fonts/bold/Vazir-Bold.ttf);
}
@font-face {
  font-family: vazir;
  src: url(../resources/fonts/regular/Vazir.ttf);
}

/* Resets and default styles */
body {
  overflow-x: hidden;
  max-width: 100vw;
  /* background-image: url(/resources/img/sitebg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; */
  /* background: linear-gradient(109.6deg, rgb(180, 209, 255) 11.2%, rgb(159, 163, 255) 91.1%); */
  background: radial-gradient(circle at 10% 20%, rgb(222, 231, 255) 0%, rgb(188, 210, 255) 90%);
}
p,h1,h2,h3,h4,h5,h6,span,a,li,div{
  font-family: 'vazir', "vazir bold";
}
h1 {
  
  font-family: "vazir bold";
  font-weight: bolder;
}
li::before {
  margin-left: var(--sm-size);
}
a{
  text-decoration: none;
  color:var(--stale-700);
}
a:hover{
  color:var(--stale-500);
}
/* End of Resets and default styles */

/* Navbar start */

/* Navbar end */

/* carousel */
.section-1{
  padding-top: 50px;
}
.legacy-hero-content {
  background-color: var(--section-bg-main);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid #e0d9fe;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 80vh;
}

.content h1 {
  margin-top: var(--sm-size);
}
.content .btn-section {
  margin-top: var(--md-size);
}
.carousel-item img {
  width: 100%;
  height: 80vh;
  object-fit: cover;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(249, 249, 249, 0.600);
}

/* Changing carousel navs and styles */
.carousel-indicators [data-bs-target] {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: var(--sm-size);
  height: var(--sm-size);
  border-radius: 100%;
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: var(--stale-100);
  background-clip: padding-box;
  opacity: 0.5;
  transition: opacity 0.6s ease-in-out;
}

.carousel-indicators .active {
  background-color: var(--stale-500);
}
/* End of carousel */

/* Styles For Buttons */
.btn {
  border-radius: var(--sm-size);
  padding: var(--sm-size);
}
.btn-text {
  padding-left: var(--md-size);
}
.primary-btn {
  background-color: var(--Sky-500);
  color: var(--neutral);
  font-weight: bold;
}
.secondary-btn {
  background-color: var(--neutral);
  color: var(--Sky-500);
  border: 1px solid var(--stale-1000);
  font-weight: bold;
}
.subscribe-btn {
  background-color: var(--neutral);
  color: var(--Sky-400);
  border: 1px solid var(--Sky-700);
  font-weight: bold;
  border-radius: var(--lg-size);
  padding: 10px 25px;
}
/* End Of Styles for Buttons */

/* Aniamtion for pen */
.screenshot-section {
  padding: 2rem 0;
  /* background: #cad3e6; */
  /* border-radius: 10px;
  background: rgba(89, 134, 222, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3); */
  background: rgba(86, 88, 193, 0.36);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(6.5px);
-webkit-backdrop-filter: blur(6.5px);
border: 1px solid rgba(86, 88, 193, 0.78);
}
.screenshot-img {
  width: 100%;
  max-width: 800px;
  height: auto;
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
}
@keyframes moveUpDown {
0% {
  transform: translateY(0);
}
25%{
  transform: translateX(-6rem);
}
50% {
  transform: translateY(-4rem);
}

100% {
  transform: translateY(0);
}
}

.threedpen {
  animation: moveUpDown 4s ease-in-out infinite;
}
/* end */


/* Scroll section and animations */
.animate__animated.animate__fadeInDown {
  --animate-duration: 2s ;
}

.animate__animated .animate__fadeInDown {
  animation-duration: 3.4s;
}
.scroll-arrow {
  width: 50px;
  height: 80px;
  border: 3px solid var(--Violet-700);
  color: var(--neutral);
  border-radius: var(--lg-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  margin: 0 auto;
  cursor: pointer;
}
/*End of Scroll section and animations */





/* Features */
.section-2 {
  background-image: url(/resources/img/magicpattern-mesh-gradient-1718690126121.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.main-content {
  background: rgba(110, 119, 130, 0.5);
  border: 1px solid rgba(243, 243, 243, 0.300);
  border-radius: var(--md-size);
  color: var(--neutral);
}
.main-content p {
  opacity: 0.8;
}
.main-content span {
  background: var(--Violet-600);
  width: fit-content;
  border-radius: var(--x-sm-size);
  margin-bottom: 5px;
}
.arrow-link-icon {
  width: 30px;
  height: 30px;
  background-size: cover;
  background-repeat: no-repeat;
  display: inline-block;
  background-image: url(../resources/icons/arrow_left_alt_24dp_FILL0_wght300_GRAD0_opsz24.svg);
}
.custom-card {
background: rgba(110, 119, 130, 0.5);
border: 1px solid rgba(243, 243, 243, 0.300);
border-radius: var(--md-size);
  color: var(--neutral);
  padding: 20px;
  border-radius: var(--md-size);
}
.custom-card .btn {
  background-color: var(--Violet-500);
  color: var(--neutral);
  border: none;
}
.custom-border {
  border-left: 3px solid var(--stale-300);
}
/* End of features */





/* Pricing Card Designs */
.card-plan {
  display: flex;
  flex-direction: column;
  height: 520px;
  width: 300px;
  border-radius: var(--md-size);
  margin-left: var(--sm-size);
  margin-right: var(--sm-size);
  background: var(--neutral);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 20%);
}

.card-title {
  width: 100%;
  padding: 10px 0;
  font-size: 1.2em;
  font-weight: lighter;
  text-align: center;
  border-top-left-radius: var(--md-size);
  border-top-right-radius: var(--md-size);
  margin-bottom: 0px;
  color: var(--neutral);
  font-weight: bold;
}

.basic .card-title {
  background: var(--basic-accent-color);
}
.premium .card-title {
  background: var(--premium-accent-color);
}
.ultra .card-title {
  background: var(--ultra-accent-color);
}
.ultra-premium .card-title {
  background: var(--ultraPremium-accent-color);
}
.view{
  color: var(--stale-100);
}
.view {
  display: block;
  width: 100%;
  padding: 30px 0 20px;
}
.view.basic {
  background: var(--basic-accent-color);
}
.view.premium {
  background: var(--premium-accent-color);
}
.view.ultra {
  background: var(--ultra-accent-color);
}
.view.ultra-premium {
  background: var(--ultraPremium-accent-color);
}

.plan-icon {
  display: flex;
  justify-content: center;
}

.plan-icon img {
  width: 100px;
}

.plan-cost {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: var(--sm-size);
}

.plan-amount {
  font-size: var(--md-responsize-size);
  font-weight: bolder;
}

.detail {
  margin: auto 0 auto var(--x-sm-size);
  width: 70px;
  font-size: var(--xsm-responsize-size);
  font-weight: bold;
  line-height: 15px;
  color: var(--stale-100);
}

.description {
  /* margin: 10px 5px 10px var(--x-sm-size); */
  font-size: 0.8rem;
  color: var(--stale-600);
}

.description.text-end ul {
  list-style: none;
}

.description.text-end ul li {
  margin-top: var(--sm-size);
}

.description.text-end ul li::before {
  content: "";
  background-image: url("../resources/icons/check.png");
  background-position: center;
  background-size: cover;
  opacity: 0.5;
  display: inline-block;
  width: var(--sm-size);
  height: var(--sm-size);
  margin-right: var(--sm-size);
}

/* Changin the contrast of the plan card images */
.plan-image {
  filter: invert(100%) brightness(90%);
}
/* End Of Plan Pricing Cards */






/* Tabs Section */
.section-4{
  margin-top: 100px;
}
.section-4 h5,
.section-4 p {
  text-align: start;
  color: var(--stale-500);
}
.nav-link.active h5{
  color: var(--stale-300);
}
.section-4 .nav-link{
  background: #ffffff;
  border: 1px solid rgba(243, 243, 243, 0.3);
  border-radius: var(--lg-size);
}
.section-4 .nav-link.active{
  background: #ffffff;
}
.section-4 .title{
  font-size: 1.4rem;
  font-weight: bold;
}
.section-4 .tab-para{
  opacity: 0.9;
}
.section-4 .nav{
  padding: 0px;
}
/* end of tabs section */


/* Features */
.our-feature .body-card span{
  font-size: 48px;
  color: var(--Violet-700);
  margin-bottom: 10px;
}
.our-feature{
  background-color: #e7eeff;
  padding: 20px 20px 5px 20px;
  border-radius: var(--md-size);
  margin: 10px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    height: 300px;
}
.our-feature .body-card p {
  color: var(--stale-800);
  font-size: 25px;
}

/* ==========================================================================
   Section 5: Institutional Solutions Showcase
   ========================================================================== */
.section-5 {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 25px 50px -12px rgba(30, 58, 138, 0.4) !important;
  margin-top: 80px;
  overflow: hidden;
}

.feature-text {
  text-align: right !important;
  padding-right: 6px;
  padding-left: 6px;
}

.feature-text h2 {
  font-size: clamp(1.4rem, 2.6vw, 2.15rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.45 !important;
  margin-bottom: 1rem !important;
}

.feature-text p {
  font-size: clamp(0.95rem, 1.4vw, 1.1rem) !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  line-height: 1.85 !important;
  margin-bottom: 1.5rem !important;
}

.feature-text ul,
.feature-text ul.feature-checklist {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.feature-text ul li,
.feature-text ul.feature-checklist li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 16px 0 !important;
  font-size: 1.02rem !important;
  line-height: 1.65 !important;
  color: #e0f2fe !important;
  text-align: right !important;
  position: static !important;
  list-style: none !important;
}

.feature-text ul li::before,
.feature-text ul.feature-checklist li::before {
  content: '' !important;
  display: inline-block !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  flex-shrink: 0 !important;
  background-image: url('../resources/icons/Asset1.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  margin-top: 4px !important;
  opacity: 0.95 !important;
  position: static !important;
  right: auto !important;
  left: auto !important;
}

.feature-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.feature-image img {
  max-height: 340px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.22) !important;
  transition: transform 0.3s ease;
}

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

/* ==========================================================================
   Section 6: Swiper Partner Logos Infinite Marquee (True Seamless Linear Loop)
   ========================================================================== */
.section-6 {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 36px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.partner-logos-swiper {
  width: 100% !important;
  padding: 10px 0 !important;
  overflow: hidden !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.partner-logos-swiper .swiper-wrapper {
  display: flex !important;
  align-items: center !important;
  -webkit-transition-timing-function: linear !important;
  -moz-transition-timing-function: linear !important;
  -ms-transition-timing-function: linear !important;
  -o-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}

.partner-logos-swiper .swiper-slide {
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}

.partner-logo {
  height: 36px !important;
  max-height: 36px !important;
  width: auto !important;
  max-width: 110px !important;
  object-fit: contain !important;
  opacity: 0.55 !important;
  filter: grayscale(100%) !important;
  transition: opacity 250ms ease, filter 250ms ease, transform 250ms ease !important;
  cursor: pointer !important;
  display: block !important;
}

.partner-logo:hover {
  opacity: 1 !important;
  filter: grayscale(0%) !important;
  transform: scale(1.08) !important;
}
/* end of Section 6 Swiper Partner Slider */



.page-footer{
  margin-top: 3rem;
  padding-top: 15rem;
  background-image: url(/resources/img/footer.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.page-footer p,
.page-footer span{
  font-weight: bold;
  font-size: 1.5rem;
  color: var(--stale-300);
}
.page-footer li a{
  font-size: 1rem;
  color: var(--stale-300);
  list-style: none;
}
.page-footer small{
  color: var(--stale-300);
}

/* Responsiveness */ /* Small Devices */
@media (max-width: 480px) {
  .carousel-item img {
    border-top-left-radius: var(--x-sm-size);
    border-top-right-radius: var(--x-sm-size);
  }
  .content {
    border-bottom-left-radius: var(--x-sm-size);
    border-bottom-right-radius: var(--x-sm-size);
  }
  /* To avoid the slider from stopping when clicking on mobile */
  .section-6 .logo-slider:hover .logos-slide {
    animation-play-state: running;
  }
}

@media screen and (max-width:768px) {
  .section-4 .nav,
  .section-4 .nav-pills {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .section-4 .nav-item {
    width: 100% !important;
    margin: 0 !important;
  }
  .section-4 .nav-link {
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 18px !important;
  }
}



/* Medium and Large Devices */
@media (min-width: 768px) {
  .carousel-item img {
    border-top-left-radius: var(--x-sm-size);
    border-bottom-left-radius: var(--x-sm-size);
  }
  .content {
    border-top-right-radius: var(--x-sm-size);
    border-bottom-right-radius: var(--x-sm-size);
  }
  /* Hover For carousel nav icons */
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
  .carousel.slide:hover .carousel-control-next-icon,
  .carousel.slide:hover .carousel-control-prev-icon {
    opacity: 1;
    display: block;
  }
  /* End of Hover For carousel nav icons */

  /* Arrow hover */
  .arrow-link-icon:hover {
    transition: 0.7s;
    background-color: rgba(191, 182, 182, 0.5);
    border-radius: var(--x-sm-size);
    color: var(--stale-300);
    animation: none;
  }
  /* Plan Card Styles */
  .card-plan:hover,
  .card-plan:focus,
  .card-plan:active {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  .card-plan {
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
  }
  .basic:hover {
    border: 1px solid #ed213a;
  }
  .premium:hover {
    border: 1px solid rgb(30, 60, 114);
  }
  .ultra:hover {
    border: 1px solid rgb(82, 194, 52);
  }
  .ultra-premium:hover {
    border: 1px solid rgba(210, 181, 86, 0.855);
  }
  /* End of Plan card Styles */

  /* Buttons Styles */
  .primary-btn:hover {
    background-color: var(--Sky-400);
    color: var(--stale-100);
    transition: 0.3s;
  }
  .secondary-btn:hover {
    background-color: var(--Sky-500);
    color: var(--stale-100);
    transition: 0.3s;
  }
  .subscribe-btn:hover {
    background-color: var(--Sky-500);
    border: none;
    color: var(--neutral);
    transition: 0.3s;
  }
  .custom-card .btn:hover {
    background-color: var(--Violet-700);
  }
  /* End Of button Styles */

  /* To avoid the slider to stop when clicking on mobile */
  .section-6 .logo-slider:hover .logos-slide {
    animation-play-state: paused;
  }

  /* tabs section clean reset */
  .section-4 .nav-link.active::before {
    display: none !important;
    content: none !important;
  }
  .nav-item .nav-link{
    margin-top: 0px !important;
  }
  
  .navigation a {
    transition: 0.3s;
  }

/* Uniform width for all tabs */
.section-4 .nav-item {
  width: 100% !important;
}

/* Footer links hover styles */
.page-footer li{
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.page-footer div ul li:hover,
.page-footer div ul li:active,
.page-footer div ul li:focus {
  color: var(--stale-300);
  -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
/* End of Footer links hover styles */


/* Not sure that his may cause bugs or not but for now i'll put it here */
.slider-container {
    flex-direction: column;
  }
  h1,
  .h1 {
    font-size: var(--lg-responsize-size) !important;
  }
  h1,
  .h1,
  .lead {
    font-size: var(--sm-responsive-size);
  }
  .btn.primary-btn,
  .btn.secondary-btn {
    margin-top: var(--x-sm-size);
    justify-content: center;
  }
  .content {
    padding: 0px;
  }
  .content .btn-section {
    margin-top: var(--x-sm-size);
  }
  /*///////////////////////////////////////////////////////////////////////*/
}

/* ==========================================================================
   UI/UX Polish - Online Classroom Modern Design System (Emil Design Guidelines)
   ========================================================================== */
body {
  font-family: 'vazir', system-ui, -apple-system, sans-serif !important;
  line-height: 1.8;
  color: #1e293b;
  background-color: #f8fafc;
  padding-top: 76px !important;
}

/* ==========================================================================
   Header & Topnav (Fixed, Glassmorphic, Modern RTL Flexbox)
   ========================================================================== */
#topnav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
  z-index: 1030 !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: box-shadow 200ms ease-out, background-color 200ms ease-out;
}

#topnav .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 1320px !important;
}

/* Brand Identity in Navbar (Reset float & whitespace issues) */
#topnav .brand-box {
  flex-shrink: 0 !important;
  min-width: 180px !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  margin: 0 !important;
}

#topnav .brand-box a {
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#topnav .brand-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28) !important;
  flex-shrink: 0 !important;
}

#topnav .brand-details {
  display: flex !important;
  flex-direction: column !important;
  text-align: right !important;
  white-space: nowrap !important;
}

#topnav .brand-title {
  font-family: 'vazir', 'vazir bold', sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

#topnav .brand-tagline {
  font-size: 11px !important;
  color: #64748b !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
}

/* Navigation Menu Styles */
#topnav .navigation-menu {
  float: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  height: auto !important;
}

#topnav .navigation-menu > li {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
}

#topnav .navigation-menu > li > a,
#topnav.scroll .navigation-menu > li > a,
#topnav.scroll-active .navigation-menu > li > a,
#topnav.nav-sticky .navigation-menu > li > a {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  line-height: 20px !important;
  height: 34px !important;
  min-height: 0 !important;
  max-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 150ms ease-out !important;
  box-sizing: border-box !important;
}

#topnav .navigation-menu > li > a:hover,
#topnav .navigation-menu > li.active > a,
#topnav.scroll .navigation-menu > li.active > a,
#topnav.nav-sticky .navigation-menu > li.active > a {
  color: #2563eb !important;
  background-color: rgba(37, 99, 235, 0.08) !important;
  padding: 6px 12px !important;
  height: 34px !important;
  min-height: 0 !important;
  max-height: 34px !important;
  line-height: 20px !important;
}

/* ==========================================================================
   DESKTOP ONLY HEADER (min-width: 992px)
   ========================================================================== */
@media (min-width: 992px) {
  #topnav #navigation {
    display: flex !important;
    float: none !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #topnav .menu-extras {
    display: none !important;
  }

  #topnav .header-actions {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    gap: 10px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  #topnav .header-actions .btn {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 6px 16px !important;
    height: 38px !important;
    min-height: 0 !important;
    max-height: 38px !important;
    border-radius: 9px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   MOBILE & TABLET HEADER (max-width: 991px)
   ========================================================================== */
@media (max-width: 991px) {
  #topnav .header-actions {
    display: none !important;
  }

  #topnav .menu-extras {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
  }

  #topnav .navbar-toggle {
    border: 0 !important;
    position: relative !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    background: #f1f5f9 !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 150ms ease-out !important;
  }

  #topnav .navbar-toggle:hover {
    background: #e2e8f0 !important;
  }

  #topnav .navbar-toggle .lines {
    width: 20px !important;
    height: 14px !important;
    margin: 0 !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  #topnav .navbar-toggle span {
    height: 2px !important;
    width: 100% !important;
    background-color: #0f172a !important;
    border-radius: 2px !important;
    margin: 0 !important;
    transition: all 250ms ease-in-out !important;
  }

  #topnav .navbar-toggle.open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg) !important;
  }

  #topnav .navbar-toggle.open span:nth-child(2) {
    opacity: 0 !important;
  }

  #topnav .navbar-toggle.open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg) !important;
  }

  #topnav .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  #topnav .brand-box {
    min-width: 0 !important;
    max-width: 260px !important;
  }
  
  #topnav .brand-box a {
    gap: 8px !important;
  }

  #topnav .brand-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 10px !important;
  }

  #topnav .brand-title {
    font-size: 15px !important;
  }

  #topnav .brand-tagline {
    font-size: 9.5px !important;
  }

  /* Mobile Dropdown Menu: Closed by default, open only on .open */
  #topnav #navigation {
    display: none !important;
    position: absolute !important;
    top: 72px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12) !important;
    padding: 18px 20px 24px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    z-index: 1050 !important;
    height: auto !important;
    max-height: calc(100vh - 72px) !important;
    overflow-y: auto !important;
  }

  #topnav #navigation.open {
    display: block !important;
  }

  #topnav .navigation-menu {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    height: auto !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #topnav .navigation-menu > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    height: auto !important;
  }

  #topnav .navigation-menu > li > a {
    display: flex !important;
    width: 100% !important;
    height: 42px !important;
    max-height: 42px !important;
    padding: 10px 16px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    justify-content: flex-start !important;
    border-radius: 10px !important;
    text-align: right !important;
  }

  #topnav .navigation-menu > li > a:hover,
  #topnav .navigation-menu > li.active > a {
    background-color: rgba(37, 99, 235, 0.08) !important;
    color: #2563eb !important;
  }

  #topnav .buy-menu-btn {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid #f1f5f9 !important;
  }

  #topnav .buy-menu-btn .btn {
    width: 100% !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
  }
}

/* Button micro-interactions */
.btn {
  transition: transform 150ms ease-out, background-color 150ms ease-out, box-shadow 150ms ease-out !important;
  cursor: pointer;
  border-radius: 10px !important;
}

.btn:active {
  transform: scale(0.97) !important;
}

.primary-btn {
  background: #2563eb !important;
  color: #ffffff !important;
  border: 1px solid #2563eb !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease !important;
  transform: none !important;
}

.primary-btn:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.35) !important;
  transform: none !important;
}

.secondary-btn {
  background: #ffffff !important;
  color: #2563eb !important;
  border: 1.5px solid #bfdbfe !important;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease !important;
  transform: none !important;
}

.secondary-btn:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  transform: none !important;
}

.subscribe-btn {
  background: #ffffff !important;
  color: #2563eb !important;
  border: 1.5px solid #bfdbfe !important;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease !important;
  transform: none !important;
}

.subscribe-btn:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  transform: none !important;
}

.btn:hover {
  transform: none !important;
}

/* ==========================================================================
   Hero Section & Modern Classroom Showcase (Content BG, Screen Fit & Equal Heights)
   ========================================================================== */
.section-1 {
  padding-top: 10px !important;
  padding-bottom: 5px !important;
  padding-left: var(--bs-gutter-x, 0.75rem) !important;
  padding-right: var(--bs-gutter-x, 0.75rem) !important;
  margin-top: 5px !important;
  margin-bottom: 20px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Hero Content Card (Right side in RTL, strictly right-aligned) */
.hero-content-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 25px -10px rgba(15, 23, 42, 0.07) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 24px 28px !important;
  direction: rtl !important;
  text-align: right !important;
}

.hero-content-card .hero-badge-wrap {
  width: 100% !important;
  text-align: right !important;
  display: flex !important;
  justify-content: flex-start !important;
  margin-bottom: 12px !important;
}

.section-1 .hero-badge {
  background: rgba(37, 99, 235, 0.08) !important;
  color: #2563eb !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 14px !important;
  border-radius: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: break-word !important;
}

.section-1 .hero-title {
  font-size: 1.85rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 0.75rem !important;
  text-align: right !important;
  direction: rtl !important;
  width: 100% !important;
}

.section-1 .hero-title .text-gradient {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 70%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-1 .hero-lead {
  font-size: 0.92rem !important;
  color: #475569 !important;
  line-height: 1.75 !important;
  margin-bottom: 1.25rem !important;
  text-align: right !important;
  direction: rtl !important;
  width: 100% !important;
}

.hero-content-card .hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
}

.section-1 .primary-btn {
  padding: 9px 20px !important;
  font-size: 13.5px !important;
  border-radius: 12px !important;
}

.section-1 .secondary-btn {
  padding: 9px 20px !important;
  font-size: 13.5px !important;
  border-radius: 12px !important;
}

/* Modern Showcase Carousel Window (Left side in RTL, stretches to match content card) */
.hero-carousel-card {
  position: relative !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: #0f172a !important;
  box-shadow: 0 15px 35px -10px rgba(15, 23, 42, 0.16) !important;
  border: 1px solid #e2e8f0 !important;
  height: 100% !important;
  min-height: 320px !important;
}

.hero-carousel-card .carousel-inner {
  height: 100% !important;
  background: #0f172a !important;
}

.hero-carousel-card .carousel-item {
  height: 100% !important;
}

.hero-carousel-card .carousel-item:nth-child(2) {
  background-color: #ffffff !important;
}

.hero-carousel-card .carousel-item img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
}

.hero-carousel-card .carousel-caption {
  position: absolute !important;
  bottom: 16px !important;
  right: 16px !important;
  left: 16px !important;
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  padding: 10px 16px !important;
  text-align: right !important;
  z-index: 10 !important;
}

.hero-carousel-card .carousel-caption h5 {
  font-size: 0.95rem !important;
  margin-bottom: 2px !important;
}

.hero-carousel-card .carousel-caption p {
  font-size: 0.78rem !important;
}

.hero-carousel-card .carousel-indicators {
  position: absolute !important;
  bottom: 8px !important;
  margin-bottom: 0 !important;
  z-index: 15 !important;
}

.hero-carousel-card .carousel-indicators [data-bs-target] {
  width: 24px !important;
  height: 4px !important;
  border-radius: 4px !important;
  background-color: rgba(255, 255, 255, 0.45) !important;
  border: none !important;
  transition: width 200ms ease-out, background-color 200ms ease-out !important;
}

.hero-carousel-card .carousel-indicators .active {
  width: 38px !important;
  background-color: #2563eb !important;
}

/* Redesign Scroll Down Indicator */
.scroll-arrow {
  width: auto !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

.scroll-indicator-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  transition: color 180ms ease-out, transform 180ms ease-out;
}

.scroll-indicator-wrap:hover {
  color: #2563eb;
  transform: translateY(3px);
}

.scroll-mouse {
  width: 24px;
  height: 38px;
  border: 2px solid #94a3b8;
  border-radius: 16px;
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 5px;
}

.scroll-mouse::after {
  content: '';
  width: 4px;
  height: 7px;
  background-color: #2563eb;
  border-radius: 4px;
  animation: scrollAnim 1.6s ease-in-out infinite;
}

@keyframes scrollAnim {
  0% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ==========================================================================
   Pricing Cards Polish (Spacious, Fits All Content, Compact Height)
   ========================================================================== */
.card-plan {
  border-radius: 18px !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #ffffff !important;
  transition: transform 250ms ease-in-out, box-shadow 250ms ease-in-out, border-color 250ms ease-in-out !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
  overflow: visible !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.card-plan:hover {
  transform: scale(1.025) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.09) !important;
  border-color: #93c5fd !important;
}

.card-plan .plan-popular-badge {
  position: absolute !important;
  top: -14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 5px 18px !important;
  border-radius: 50px !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35) !important;
  border: 2px solid #ffffff !important;
  white-space: nowrap !important;
  z-index: 30 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.card-plan .card-title {
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  padding: 14px 16px !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  margin-bottom: 0 !important;
}

.card-plan .view {
  padding: 14px 14px !important;
}

.card-plan .plan-icon {
  margin-bottom: 4px !important;
}

.card-plan .plan-icon .plan-image {
  max-height: 46px !important;
  width: auto !important;
}

.card-plan .plan-cost {
  margin-top: 6px !important;
}

.card-plan .plan-amount {
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  margin-bottom: 2px !important;
}

.card-plan .detail {
  width: auto !important;
  margin: 2px 0 0 0 !important;
  font-size: 12px !important;
  color: #e2e8f0 !important;
  white-space: nowrap !important;
}

.card-plan .description {
  padding: 14px 18px !important;
  font-size: 13px !important;
  flex-grow: 1 !important;
}

.card-plan .description ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.card-plan .description ul li {
  line-height: 1.55 !important;
  margin-bottom: 8px !important;
  color: #334155 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.card-plan .description ul li .material-symbols-outlined {
  font-size: 18px !important;
}

.card-plan .description ul li::before {
  display: none !important;
  content: none !important;
}

.card-plan .card-footer-action {
  padding: 0 18px 18px 18px !important;
  margin-top: auto !important;
}

.card-plan .card-footer-action .btn {
  width: 100% !important;
  padding: 9px 16px !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  border-radius: 10px !important;
}

/* ==========================================================================
   Feature Cards Polish (Point 4: Balanced Grid, Clean Structure)
   ========================================================================== */
.our-feature {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 26px 22px !important;
  margin: 0 !important;
  width: 100% !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.our-feature:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 36px -8px rgba(37, 99, 235, 0.14) !important;
  border-color: #93c5fd !important;
}

.our-feature .feature-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: transform 200ms ease, background-color 200ms ease;
}

.our-feature:hover .feature-icon-wrap {
  transform: scale(1.08);
  background: #eff6ff;
}

.our-feature .feature-title {
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 10px !important;
  line-height: 1.4 !important;
}

.our-feature .feature-desc {
  font-size: 13px !important;
  color: #64748b !important;
  line-height: 1.85 !important;
  margin-bottom: 18px !important;
}

.our-feature .navigation {
  padding-top: 14px !important;
  border-top: 1px solid #f1f5f9 !important;
}

.our-feature .navigation a {
  opacity: 1 !important;
  color: #2563eb !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  transition: gap 180ms ease !important;
}

.our-feature:hover .navigation a span:last-child {
  transform: translateX(-4px);
  transition: transform 180ms ease;
}

/* Glassmorphic Screenshot Section */
.screenshot-section {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 24px !important;
  padding: 3rem 1.5rem !important;
}


/* ==========================================================================
   Tabs Section (ابزارهای اختصاصی کلاس مجازی - Completely Remove Hover Background)
   ========================================================================== */
.section-4 .nav,
.section-4 .nav-pills,
.section-4 .nav-item,
.section-4 .nav-item:hover,
.section-4 .nav-item:focus,
.section-4 .nav-item:active {
  background: transparent !important;
  background-color: transparent !important;
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  transition: none !important;
}

.section-4 .nav-link,
.section-4 .nav-link:hover,
.section-4 .nav-link:focus,
.section-4 .nav-link:active,
.section-4 .nav-link.active,
.section-4 .nav-link.active:hover,
.section-4 .nav-link.active:focus {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

.section-4 .nav-link {
  border-radius: 16px !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #ffffff !important;
  padding: 14px 18px !important;
  transition: border-color 200ms ease, box-shadow 200ms ease, color 200ms ease !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03) !important;
  width: 100% !important;
  position: relative !important;
  transform: none !important;
}

.section-4 .nav-link:hover {
  transform: none !important;
  border-color: #93c5fd !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08) !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
}

.section-4 .nav-link:hover h5,
.section-4 .nav-link:hover .title {
  color: #2563eb !important;
}

.section-4 .nav-link:hover .material-symbols-outlined,
.section-4 .nav-link:hover svg {
  color: #2563eb !important;
  transform: none !important;
}

.section-4 .nav-link.active {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #2563eb !important;
  border-right: 4px solid #2563eb !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.12) !important;
  transform: none !important;
}

.section-4 .nav-link.active h5,
.section-4 .nav-link.active .title {
  color: #2563eb !important;
  font-weight: 700 !important;
}

.section-4 .nav-link::before,
.section-4 .nav-link::after,
.section-4 .nav-link.active::before,
.section-4 .nav-link.active::after,
.section-4 .nav-item::before,
.section-4 .nav-item::after {
  display: none !important;
  content: none !important;
}

/* Section 6 Logo Slider */
.section-6 {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

/* ==========================================================================
   Blog Section & Cards Polish (Compact Height, Clean Proportions)
   ========================================================================== */
#blog-section {
  padding: 48px 0 !important;
  background-color: #f8fafc !important;
}

.card.blog {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
  transition: transform 220ms ease-out, box-shadow 220ms ease-out, border-color 220ms ease-out !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.card.blog:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.09) !important;
  border-color: #bfdbfe !important;
}

.card.blog .position-relative {
  overflow: hidden !important;
}

.card.blog .card-img-top,
.card.blog img.card-img-top,
.card.blog img {
  height: 170px !important;
  max-height: 170px !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 300ms ease-out !important;
}

.card.blog:hover .card-img-top,
.card.blog:hover img {
  transform: scale(1.04) !important;
}

.card.blog .overlay {
  display: none !important;
}

.card.blog .card-body,
.card.blog .content,
.card.blog .blog-card-body,
.card.blog .card-body.content {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  border: none !important;
  padding: 16px 18px !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.card.blog .card-title,
.card.blog .title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.55 !important;
  margin-bottom: 8px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  transition: color 150ms ease !important;
}

.card.blog .card-title:hover,
.card.blog .title:hover {
  color: #2563eb !important;
}

.card.blog p.text-muted {
  font-size: 0.82rem !important;
  line-height: 1.65 !important;
  color: #64748b !important;
  margin-bottom: 12px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.card.blog .post-meta {
  padding-top: 10px !important;
  margin-top: auto !important;
  border-top: 1px solid #f1f5f9 !important;
}

.card.blog .post-meta a {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #2563eb !important;
  transition: color 150ms ease !important;
}

.card.blog .post-meta a:hover {
  color: #1d4ed8 !important;
}

.card.blog .author {
  position: static !important;
  opacity: 1 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 18px !important;
  background-color: #f8fafc !important;
  border-top: 1px solid #f1f5f9 !important;
  font-size: 0.76rem !important;
  color: #64748b !important;
  height: auto !important;
}

/* Footer Polish */
footer.footer {
  background: #0f172a !important;
  border-top: 1px solid #1e293b;
}

footer.footer .footer-head {
  color: #f8fafc !important;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

footer.footer a.text-foot {
  color: #94a3b8 !important;
  transition: color 150ms ease-out, padding-right 150ms ease-out;
}

footer.footer a.text-foot:hover {
  color: #38bdf8 !important;
  padding-right: 6px;
}

/* ==========================================================================
   Comprehensive Mobile & Tablet Responsiveness
   ========================================================================== */
@media (max-width: 991px) {
  /* Hero Section */
  .section-1 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    padding-left: var(--bs-gutter-x, 0.75rem) !important;
    padding-right: var(--bs-gutter-x, 0.75rem) !important;
    margin-top: 0 !important;
  }

  .hero-content-card {
    padding: 24px 20px !important;
    border-radius: 20px !important;
    margin-bottom: 16px !important;
    height: auto !important;
  }

  .section-1 .hero-title {
    font-size: 1.6rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.75rem !important;
  }

  .section-1 .hero-lead {
    font-size: 0.9rem !important;
    line-height: 1.75 !important;
    margin-bottom: 1.25rem !important;
  }

  .hero-carousel-card {
    height: 300px !important;
    min-height: 260px !important;
    border-radius: 20px !important;
  }

  /* Pricing Section Cards */
  .card-plan {
    margin-bottom: 24px !important;
    width: 100% !important;
  }

  /* Screenshot Showcase Section */
  .screenshot-section {
    padding: 2rem 1.25rem !important;
    border-radius: 20px !important;
  }

  /* Section 4 Tabs */
  .section-4 {
    margin-top: 50px !important;
  }

  .section-4 .tab-content {
    margin-top: 24px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 576px) {
  /* Small Mobile Adjustments */
  .section-1 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: var(--bs-gutter-x, 0.75rem) !important;
    padding-right: var(--bs-gutter-x, 0.75rem) !important;
  }

  .section-1 .hero-badge {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  .hero-content-card {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }

  .section-1 .hero-title {
    font-size: 1.35rem !important;
    line-height: 1.4 !important;
  }

  .section-1 .hero-lead {
    font-size: 0.85rem !important;
    line-height: 1.7 !important;
  }

  .hero-content-card .hero-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .hero-content-card .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 8px 16px !important;
    white-space: normal !important;
  }

  .hero-carousel-card {
    height: 240px !important;
    min-height: 220px !important;
    border-radius: 16px !important;
  }

  .hero-carousel-card .carousel-caption {
    padding: 8px 12px !important;
    bottom: 10px !important;
    right: 10px !important;
    left: 10px !important;
  }

  .hero-carousel-card .carousel-caption h5 {
    font-size: 0.85rem !important;
  }

  .hero-carousel-card .carousel-caption p {
    font-size: 0.72rem !important;
    margin-bottom: 0 !important;
  }

  /* Section 4 Mobile Tabs */
  .section-4 .nav-link {
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }

  .section-4 .nav-link .title {
    font-size: 0.95rem !important;
  }

  .section-4 .nav-link small {
    display: none !important;
  }

  /* Section 5 Institutional Solutions Mobile */
  .section-5 {
    padding: 2.2rem 1.25rem !important;
    border-radius: 20px !important;
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
  }

  .feature-text {
    text-align: right !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .feature-text h2 {
    font-size: 1.45rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.75rem !important;
  }

  .feature-text p {
    font-size: 0.95rem !important;
    line-height: 1.8 !important;
    margin-bottom: 1.25rem !important;
  }

  .feature-text ul li,
  .feature-text ul.feature-checklist li {
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    margin: 12px 0 !important;
    gap: 10px !important;
  }

  .feature-text ul li::before,
  .feature-text ul.feature-checklist li::before {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    margin-top: 3px !important;
  }

  .feature-image img {
    max-height: 220px !important;
    margin-bottom: 0.75rem !important;
  }

  /* Features Grid */
  .our-feature {
    padding: 20px 18px !important;
    border-radius: 16px !important;
  }
}