/* =========================================================
   KHONDOKER.ME
   Clean Editorial / Technical Portfolio
   ========================================================= */


/* =========================================================
   COLOR SYSTEM
   ========================================================= */

:root {

  /* Light */

  --bg-main: #F7F8FA;
  --bg-secondary: #EEF1F5;

  --card-bg: rgba(255, 255, 255, 0.82);
  --card-solid: #FFFFFF;

  --card-border: rgba(15, 23, 42, 0.09);
  --border-active: rgba(37, 99, 235, 0.35);

  --text-main: #111827;
  --text-muted: #64748B;
  --text-soft: #94A3B8;

  --accent: #2563EB;
  --accent-hover: #1D4ED8;

  --accent-light: rgba(37, 99, 235, 0.07);
  --accent-glow: rgba(37, 99, 235, 0.16);

  --success: #16A34A;

  --shadow-sm:
    0 4px 18px rgba(15, 23, 42, 0.05);

  --shadow-md:
    0 14px 35px rgba(15, 23, 42, 0.08);

  --shadow-lg:
    0 25px 60px rgba(15, 23, 42, 0.12);

  --font-main:
    'Plus Jakarta Sans',
    system-ui,
    sans-serif;

  --font-heading:
    'Space Grotesk',
    system-ui,
    sans-serif;

  --radius: 16px;

  --transition:
    all 0.35s cubic-bezier(0.16, 1, 0.3, 1);

}


/* =========================================================
   DARK MODE
   ========================================================= */

[data-theme="dark"] {

  --bg-main: #0B1120;
  --bg-secondary: #111827;

  --card-bg: rgba(17, 24, 39, 0.76);
  --card-solid: #111827;

  --card-border: rgba(148, 163, 184, 0.12);
  --border-active: rgba(96, 165, 250, 0.38);

  --text-main: #F8FAFC;
  --text-muted: #94A3B8;
  --text-soft: #64748B;

  --accent: #60A5FA;
  --accent-hover: #3B82F6;

  --accent-light: rgba(96, 165, 250, 0.08);
  --accent-glow: rgba(96, 165, 250, 0.18);

  --success: #4ADE80;

  --shadow-sm:
    0 4px 18px rgba(0, 0, 0, 0.20);

  --shadow-md:
    0 14px 35px rgba(0, 0, 0, 0.30);

  --shadow-lg:
    0 25px 60px rgba(0, 0, 0, 0.40);

}


/* =========================================================
   RESET
   ========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html {

  scroll-behavior: smooth;

  background:
    var(--bg-main);

  color:
    var(--text-main);

  font-family:
    var(--font-main);

  line-height: 1.6;

  transition:
    background-color 0.4s ease,
    color 0.4s ease;

}


body {

  position: relative;

  overflow-x: hidden;

  min-height: 100vh;

  background:
    var(--bg-main);

  transition:
    background-color 0.4s ease;

}


img {
  max-width: 100%;
}


/* =========================================================
   SELECTION
   ========================================================= */

::selection {

  background:
    var(--accent);

  color:
    #ffffff;

}


/* =========================================================
   AMBIENT BACKGROUND
   ========================================================= */

.ambient-glow {

  position: fixed;

  border-radius: 50%;

  filter: blur(120px);

  z-index: -1;

  pointer-events: none;

  opacity: 0.08;

  transition:
    opacity 0.5s ease;

  animation:
    ambientFloat 12s ease-in-out infinite alternate;

}


.glow-1 {

  width: 420px;

  height: 420px;

  background:
    var(--accent);

  top: -180px;

  left: -180px;

}


.glow-2 {

  width: 420px;

  height: 420px;

  background:
    #6366F1;

  bottom: 5%;

  right: -180px;

  animation-delay:
    -5s;

}


[data-theme="dark"] .ambient-glow {
  opacity: 0.13;
}


@keyframes ambientFloat {

  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(25px, 20px, 0);
  }

}


/* =========================================================
   CONTAINER
   ========================================================= */

.container {

  width: 100%;

  max-width: 1080px;

  margin:
    0 auto;

  padding:
    0 24px;

}


/* =========================================================
   GLASS
   ========================================================= */

.glass {

  background:
    var(--card-bg);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  border:
    1px solid var(--card-border);

  border-radius:
    var(--radius);

  box-shadow:
    var(--shadow-sm);

  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;

}


.glass:hover {

  border-color:
    var(--border-active);

  box-shadow:
    var(--shadow-md);

}


/* =========================================================
   SECTIONS
   ========================================================= */

.section {

  padding:
    5.5rem 0;

  border-bottom:
    1px solid var(--card-border);

}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.section-reveal {

  opacity:
    0;

  transform:
    translateY(45px);

  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);

}


.section-reveal.visible {

  opacity:
    1;

  transform:
    translateY(0);

}


/* =========================================================
   TEXT
   ========================================================= */

.mono-tag {

  font-family:
    var(--font-heading);

  font-size:
    0.72rem;

  font-weight:
    700;

  color:
    var(--accent);

  letter-spacing:
    1.5px;

  text-transform:
    uppercase;

  display:
    inline-block;

}


.highlight {
  color: var(--accent);
}


/* =========================================================
   HEADER
   ========================================================= */

.header {

  position:
    sticky;

  top:
    1.25rem;

  z-index:
    100;

  margin:
    0 auto;

  width:
    calc(100% - 3rem);

  max-width:
    1080px;

  border-radius:
    18px !important;

}


.nav-container {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  height:
    64px;

}


.logo {

  font-family:
    var(--font-heading);

  font-weight:
    700;

  font-size:
    1.15rem;

  color:
    var(--text-main);

  text-decoration:
    none;

  letter-spacing:
    -0.4px;

}


.logo-dot {
  color: var(--accent);
}


.nav-links {

  display:
    flex;

  align-items:
    center;

  gap:
    1.35rem;

}


.nav-links a {

  position:
    relative;

  color:
    var(--text-muted);

  text-decoration:
    none;

  font-size:
    0.82rem;

  font-weight:
    600;

  transition:
    var(--transition);

}


.nav-links a::after {

  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    -7px;

  width:
    0;

  height:
    2px;

  background:
    var(--accent);

  transition:
    width 0.3s ease;

}


.nav-links a:hover,
.nav-links a.active {

  color:
    var(--text-main);

}


.nav-links a.active::after {
  width: 100%;
}


/* =========================================================
   NAV ACTIONS
   ========================================================= */

.nav-actions {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

}


.theme-toggle {

  width:
    40px;

  height:
    40px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  background:
    var(--accent-light);

  border:
    1px solid var(--card-border);

  color:
    var(--text-main);

  cursor:
    pointer;

  transition:
    var(--transition);

}


.theme-toggle:hover {

  color:
    var(--accent);

  border-color:
    var(--border-active);

  transform:
    rotate(8deg)
    translateY(-2px);

}


.theme-icon {

  width:
    17px;

  height:
    17px;

}


.moon-icon {
  display: none;
}


[data-theme="dark"] .sun-icon {
  display: none;
}


[data-theme="dark"] .moon-icon {
  display: block;
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.mobile-toggle {

  display:
    none;

  width:
    40px;

  height:
    40px;

  border:
    1px solid var(--card-border);

  border-radius:
    10px;

  background:
    transparent;

  cursor:
    pointer;

}


.mobile-toggle span {

  display:
    block;

  width:
    18px;

  height:
    2px;

  background:
    var(--text-main);

  margin:
    4px auto;

  transition:
    var(--transition);

}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.section-header {

  display:
    flex;

  align-items:
    center;

  gap:
    1.5rem;

  margin-bottom:
    3rem;

}


.section-header h2 {

  font-family:
    var(--font-heading);

  font-size:
    1.55rem;

  font-weight:
    700;

  white-space:
    nowrap;

  letter-spacing:
    -0.5px;

}


.line {

  height:
    1px;

  width:
    100%;

  background:
    linear-gradient(
      90deg,
      var(--card-border),
      transparent
    );

}


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

.hero {

  padding-top:
    6.5rem;

}


.hero-grid {

  display:
    grid;

  grid-template-columns:
    280px 1fr;

  gap:
    4rem;

  align-items:
    center;

}


.img-frame {

  padding:
    8px;

  overflow:
    hidden;

}


.hero-avatar {

  width:
    100%;

  height:
    360px;

  border-radius:
    calc(var(--radius) - 6px);

  object-fit:
    cover;

  display:
    block;

  transition:
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);

}


.img-frame:hover .hero-avatar {

  transform:
    scale(1.025);

}


.status-indicator {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  font-size:
    0.76rem;

  font-weight:
    600;

  color:
    var(--text-muted);

  margin-top:
    14px;

  padding:
    9px 14px;

  border-radius:
    30px !important;

  width:
    fit-content;

}


.dot-pulse {

  width:
    8px;

  height:
    8px;

  background:
    var(--success);

  border-radius:
    50%;

  box-shadow:
    0 0 10px rgba(22, 163, 74, 0.35);

  animation:
    pulseDot 2s infinite;

}


@keyframes pulseDot {

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

  50% {
    transform: scale(1.3);
    opacity: 0.65;
  }

}


.hero-text h1 {

  font-family:
    var(--font-heading);

  font-size:
    clamp(2.8rem, 6vw, 4.3rem);

  font-weight:
    700;

  line-height:
    1.02;

  letter-spacing:
    -2px;

  margin:
    12px 0 16px;

}


.role-subtitle {

  font-size:
    1.02rem;

  color:
    var(--text-main);

  font-weight:
    600;

  margin-bottom:
    16px;

}


.description {

  max-width:
    650px;

  color:
    var(--text-muted);

  font-size:
    0.97rem;

  line-height:
    1.8;

}


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

.hero-actions {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

  margin-top:
    28px;

}


.btn {

  font-family:
    var(--font-heading);

  font-size:
    0.82rem;

  font-weight:
    700;

  padding:
    11px 21px;

  border-radius:
    9px;

  text-decoration:
    none;

  transition:
    var(--transition);

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  border:
    none;

  cursor:
    pointer;

}


.btn-primary {

  background:
    var(--accent);

  color:
    #ffffff;

  box-shadow:
    0 5px 16px var(--accent-glow);

}


.btn-primary:hover {

  background:
    var(--accent-hover);

  transform:
    translateY(-3px);

  box-shadow:
    0 10px 25px var(--accent-glow);

}


.btn-glass {

  background:
    var(--accent-light);

  color:
    var(--text-main);

  border:
    1px solid var(--card-border);

}


.btn-glass:hover {

  color:
    var(--accent);

  border-color:
    var(--border-active);

  transform:
    translateY(-3px);

}


/* =========================================================
   STATS
   ========================================================= */

.stats-bar {

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    1.5rem;

  padding:
    2rem;

  margin-top:
    1.5rem;

}


.stat-item {

  min-width:
    0;

}


.stat-flex {

  display:
    flex;

  align-items:
    baseline;

}


.stat-number {

  font-size:
    2.25rem;

  font-weight:
    800;

  font-family:
    var(--font-heading);

  letter-spacing:
    -1px;

}


.stat-unit {

  font-size:
    1.5rem;

  font-weight:
    800;

  color:
    var(--accent);

  margin-left:
    2px;

}


.stat-label {

  display:
    block;

  font-size:
    0.78rem;

  color:
    var(--text-muted);

  font-weight:
    500;

  margin-top:
    3px;

}


/* =========================================================
   PROJECTS
   ========================================================= */

.projects-grid {

  display:
    grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    1.4rem;

}


.project-card {

  padding:
    2rem;

  min-height:
    270px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

}


.project-card:hover {

  transform:
    translateY(-6px);

}


.project-card h3 {

  font-family:
    var(--font-heading);

  font-size:
    1.4rem;

  margin-top:
    9px;

  letter-spacing:
    -0.5px;

}


.project-desc {

  font-size:
    0.91rem;

  color:
    var(--text-muted);

  margin:
    1.2rem 0 1.7rem;

  line-height:
    1.75;

}


.tech-tags {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;

}


.tech-tags span {

  font-size:
    0.72rem;

  font-weight:
    600;

  background:
    var(--accent-light);

  border:
    1px solid var(--card-border);

  padding:
    5px 10px;

  border-radius:
    6px;

  color:
    var(--accent);

}


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

.vertical-timeline {

  position:
    relative;

  padding-left:
    32px;

}


.vertical-timeline::before {

  content:
    "";

  position:
    absolute;

  left:
    9px;

  top:
    12px;

  bottom:
    12px;

  width:
    1px;

  background:
    linear-gradient(
      180deg,
      var(--accent),
      var(--card-border)
    );

}


.timeline-node {

  position:
    relative;

  margin-bottom:
    1.6rem;

}


.timeline-dot {

  position:
    absolute;

  left:
    -32px;

  top:
    21px;

  width:
    14px;

  height:
    14px;

  border-radius:
    50%;

  background:
    var(--bg-main);

  border:
    3px solid var(--accent);

  box-shadow:
    0 0 0 4px var(--accent-light);

  transition:
    var(--transition);

}


.timeline-node:hover .timeline-dot {

  transform:
    scale(1.3);

  background:
    var(--accent);

}


.timeline-box {

  padding:
    1.5rem 1.7rem;

}


.timeline-box:hover {

  transform:
    translateX(5px);

}


.timeline-header {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    1rem;

  margin-bottom:
    6px;

}


.timeline-date {

  font-family:
    var(--font-heading);

  font-size:
    0.76rem;

  font-weight:
    700;

  color:
    var(--accent);

  white-space:
    nowrap;

}


.timeline-box h3 {

  font-family:
    var(--font-heading);

  font-size:
    1.2rem;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

}


.company-link {

  color:
    var(--text-soft);

  display:
    inline-flex;

  transition:
    var(--transition);

}


.company-link svg {

  width:
    15px;

  height:
    15px;

}


.company-link:hover {

  color:
    var(--accent);

  transform:
    translate(2px, -2px);

}


.experience-list {

  margin-top:
    11px;

  padding-left:
    1.2rem;

  color:
    var(--text-muted);

  font-size:
    0.88rem;

}


.experience-list li {

  margin-bottom:
    5px;

}


/* =========================================================
   EDUCATION
   ========================================================= */

.education-accordion {

  display:
    flex;

  flex-direction:
    column;

  gap:
    0.9rem;

}


.edu-card {

  overflow:
    hidden;

}


.edu-card[open] {

  border-color:
    var(--border-active);

}


.edu-summary {

  padding:
    1.3rem 1.7rem;

  cursor:
    pointer;

  list-style:
    none;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    1rem;

}


.edu-summary::-webkit-details-marker {
  display: none;
}


.edu-degree {

  display:
    block;

  font-family:
    var(--font-heading);

  font-size:
    1.08rem;

  font-weight:
    700;

}


.edu-institution {

  display:
    block;

  font-size:
    0.82rem;

  color:
    var(--text-muted);

  margin-top:
    2px;

}


.edu-meta {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

}


.badge {

  font-family:
    var(--font-heading);

  font-size:
    0.72rem;

  font-weight:
    700;

  background:
    var(--accent-light);

  color:
    var(--accent);

  padding:
    4px 9px;

  border-radius:
    6px;

  border:
    1px solid var(--card-border);

  white-space:
    nowrap;

}


.arrow {

  color:
    var(--text-soft);

  font-size:
    0.7rem;

  transition:
    transform 0.3s ease;

}


.edu-card[open] .arrow {

  transform:
    rotate(180deg);

}


.edu-content {

  padding:
    0 1.7rem 1.35rem;

  color:
    var(--text-muted);

  font-size:
    0.88rem;

  line-height:
    1.7;

}


/* =========================================================
   ACHIEVEMENTS
   ========================================================= */

.achievements-grid {

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    1.1rem;

}


.achievement-card {

  padding:
    1rem;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-start;

  border-radius:
    var(--radius);

  overflow:
    hidden;

}


.achievement-card:hover {

  transform:
    translateY(-5px);

}


.achievement-img-wrapper {

  overflow:
    hidden;

  border-radius:
    10px;

  margin-bottom:
    0.85rem;

  width:
    100%;

  aspect-ratio:
    16 / 10;

}


.achievement-img-wrapper img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  display:
    block;

  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);

}


.achievement-card:hover
.achievement-img-wrapper img {

  transform:
    scale(1.05);

}


.award-year {

  font-family:
    var(--font-heading);

  font-size:
    0.74rem;

  color:
    var(--accent);

  font-weight:
    700;

  display:
    block;

  margin-bottom:
    2px;

}


.achievement-body h3 {

  font-family:
    var(--font-heading);

  font-size:
    0.98rem;

  font-weight:
    700;

  line-height:
    1.3;

  margin-bottom:
    7px;

  color:
    var(--text-main);

}


.achievement-body p {

  color:
    var(--text-muted);

  font-size:
    0.76rem;

  line-height:
    1.55;

}


/* =========================================================
   CONTACT
   ========================================================= */

.contact-section {

  margin-top:
    1rem;

}


.section-header-contact {

  margin-bottom:
    2.5rem;

}


.section-header-contact h2 {

  font-family:
    var(--font-heading);

  font-size:
    clamp(2.2rem, 5vw, 3rem);

  line-height:
    1.1;

  letter-spacing:
    -1.5px;

  margin:
    0.4rem 0;

}


.contact-intro {

  color:
    var(--text-muted);

  font-size:
    0.95rem;

}


.contact-container {

  display:
    grid;

  grid-template-columns:
    1fr 1.2fr;

  gap:
    1.5rem;

  align-items:
    start;

}


.contact-links-grid {

  display:
    flex;

  flex-direction:
    column;

  gap:
    0.8rem;

}


.contact-link-card {

  display:
    flex;

  align-items:
    center;

  gap:
    1rem;

  padding:
    1.1rem 1.3rem;

  text-decoration:
    none;

  color:
    var(--text-main);

}


.contact-link-card:hover {

  transform:
    translateX(6px);

}


.contact-icon {

  color:
    var(--accent);

  width:
    21px;

  height:
    21px;

  flex-shrink:
    0;

}


.contact-link-card h4 {

  font-family:
    var(--font-heading);

  font-size:
    0.98rem;

}


.contact-link-card span {

  display:
    block;

  font-size:
    0.76rem;

  color:
    var(--text-muted);

  margin-top:
    1px;

}


.contact-form {

  padding:
    1.8rem;

  display:
    flex;

  flex-direction:
    column;

  gap:
    1rem;

}


.form-group {

  width:
    100%;

}


.glass-input {

  width:
    100%;

  padding:
    0.9rem 1rem;

  background:
    var(--bg-main);

  border:
    1px solid var(--card-border);

  border-radius:
    9px;

  color:
    var(--text-main);

  font-family:
    inherit;

  font-size:
    0.88rem;

  outline:
    none;

  resize:
    vertical;

  transition:
    var(--transition);

}


.glass-input:focus {

  border-color:
    var(--accent);

  box-shadow:
    0 0 0 3px var(--accent-light);

}


.glass-input::placeholder {

  color:
    var(--text-soft);

}


.btn-icon {

  width:
    15px;

  height:
    15px;

}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {

  padding:
    2.5rem 0;

  text-align:
    center;

  color:
    var(--text-muted);

  font-size:
    0.78rem;

}


.footer-content {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {

  .achievements-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }

}


@media (max-width: 820px) {

  .nav-links {

    display:
      none;

    position:
      absolute;

    top:
      calc(100% + 10px);

    left:
      0;

    right:
      0;

    padding:
      1rem;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      0.25rem;

    background:
      var(--card-solid);

    border:
      1px solid var(--card-border);

    border-radius:
      14px;

    box-shadow:
      var(--shadow-md);

  }


  .nav-links.mobile-open {

    display:
      flex;

  }


  .nav-links a {

    padding:
      0.7rem;

  }


  .nav-links a::after {

    display:
      none;

  }


  .mobile-toggle {

    display:
      block;

  }


  .hero-grid {

    grid-template-columns:
      220px 1fr;

    gap:
      2rem;

  }


  .hero-avatar {

    height:
      300px;

  }


  .stats-bar {

    grid-template-columns:
      repeat(2, 1fr);

  }


  .achievements-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }

}


@media (max-width: 680px) {

  .container {

    padding:
      0 18px;

  }


  .header {

    width:
      calc(100% - 1.5rem);

    top:
      0.75rem;

  }


  .hero {

    padding-top:
      4rem;

  }


  .hero-grid {

    grid-template-columns:
      1fr;

  }


  .hero-image-wrapper {

    max-width:
      260px;

  }


  .hero-text h1 {

    font-size:
      3rem;

  }


  .section {

    padding:
      4rem 0;

  }


  .projects-grid {

    grid-template-columns:
      1fr;

  }


  .contact-container {

    grid-template-columns:
      1fr;

  }


  .section-header {

    margin-bottom:
      2rem;

  }


  .section-header h2 {

    font-size:
      1.3rem;

  }


  .timeline-header {

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      4px;

  }


  .edu-summary {

    align-items:
      flex-start;

  }


  .edu-meta {

    flex-direction:
      column;

    align-items:
      flex-end;

  }

}


@media (max-width: 480px) {

  .stats-bar {

    grid-template-columns:
      1fr;

    padding:
      1.5rem;

  }


  .achievements-grid {

    grid-template-columns:
      1fr;

  }


  .hero-actions {

    flex-direction:
      column;

  }


  .btn {

    width:
      100%;

  }


  .footer-content {

    flex-direction:
      column;

    gap:
      0.5rem;

  }


  .hero-text h1 {

    font-size:
      2.6rem;

    letter-spacing:
      -1.5px;

  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

  }

}