/* =========================
   Nageye logo sizing
========================= */
.tgmenu__nav .logo img {
  height: 100px;
  width: auto;
  display: block;
}

/* =========================
   Responsive Nageye logo
========================= */

/* Base (desktop) */
.tgmenu__nav .logo img {
  height: 50px;
  width: auto;
  display: block;
}

/* Large desktop (wide screens) */
@media (min-width: 1400px) {
  .tgmenu__nav .logo img {
    height: 50px;
  }
}

/* Laptop / tablet landscape */
@media (max-width: 1199px) {
  .tgmenu__nav .logo img {
    height: 45px;
  }
}

/* Tablet portrait */
@media (max-width: 991px) {
  .tgmenu__nav .logo img {
    height: 45px;
  }
}

/* Mobile */
@media (max-width: 575px) {
  .tgmenu__nav .logo img {
    height: 50px;
  }
}

.tgmenu__nav .logo {
  display: flex;
  align-items: center;
}

/* =====================================
   Banner geometry – match SkillGro EXACTLY
===================================== */

.banner-area {
  position: relative;
  padding: 120px 0 100px;
  overflow: hidden;
}


/* Remove grid influence on right side */
.banner-area .col-lg-6:last-child {
  position: static !important;
}

.banner-quran {
  position: absolute;
  right: 5%;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
}

.banner-quran .main-img {
  max-height: 600px;   /* KEY NUMBER */
  width: auto;
  display: block;
}



/* Decorative arrows BEHIND */
.banner-area .line-shape,
.banner-area .arrow-shape {
  z-index: 1;
}

/* Text always above */
.banner-area .banner__content {
  position: relative;
  z-index: 3;
}

/* =====================
   Responsive tuning
===================== */

@media (max-width: 1199px) {
  .banner-area {
    min-height: 660px;
  }

  .banner-quran {
    height: 75%;
  }
}

@media (max-width: 991px) {
  .banner-area {
    min-height: 600px;
  }

  .banner-quran {
    right: 50%;
    transform: translateX(50%);
    height: 65%;
  }
}

@media (max-width: 575px) {
  .banner-area {
    min-height: 520px;
  }

  .banner-quran {
    height: 55%;
  }
}

/* ==============================
   Banner Student Badge Position
============================== */

.banner__author {
  position: absolute;
  right: -40px;   /* pushes it to the right of the Quran */
  top: 90px;      /* vertical alignment */
  z-index: 3;
  
}

/* Badge itself */
.banner__author-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}



/* Arrow that points to the badge */
.banner__author .arrow-shape {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  margin-right: 10px;
}

/* =====================================
   Banner: hide secondary elements
   on tablet & mobile
===================================== */

@media (max-width: 991px) {

  /* Hide descriptive paragraph */
  .banner__content p {
    display: none;
  }

  /* Hide Quran quote / student badge */
  .banner__author {
    display: none;
  }

}

@media (max-width: 991px) {
  .banner__content .title {
    margin-bottom: 20px;
  }
}

@media (max-width: 991px) {

  /* Stack banner content on top of image */
  .banner-area .row {
    position: relative;
  }

  /* Center text block */
  .banner__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    text-align: center;
    z-index: 5;
    width: 90%;
  }

}

@media (max-width: 991px) {

  .banner-quran {
    right: 50%;
    transform: translateX(50%);
    z-index: 2;
    opacity: 0.95;
  }

}

@media (max-width: 991px) {

  .banner__btn-wrap {
    margin-top: 20px;
  }

  .banner__btn-wrap .btn {
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  }

}

@media (max-width: 991px) {

  .banner__content .title {
    background: rgba(255,255,255,0.65);
    padding: 10px 16px;
    border-radius: 12px;
    display: inline-block;
  }

}

/* =====================================
   Banner title cleanup (576–991px)
===================================== */

@media (max-width: 991px) {

  /* Remove background card look */
  .banner__content .title {
    background: none;
    padding: 0;
    border-radius: 0;
  }

  /* Reduce headline size */
  .banner__content .title {
    font-size: 30px;
    line-height: 1.25;
  }


  /* Tighten spacing */
  .banner__content {
    top: 42%;
  }

}

/* Extra tightening for very small phones */
@media (max-width: 575px) {

  .banner__content .title {
    font-size: 26px;
    line-height: 1.2;
  }

  .banner__content {
    top: 40%;
  }
  

}

/* Icon container */
.categories__item .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6C63FF; /* default purple */
    transition: color 0.3s ease;
}

/* SVG image */
.categories__item .icon img.category-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Hover effect */
.categories__item:hover .icon {
    background-color: #ffffff;        /* turns SVG white */
}

.categories__item:hover .icon img.category-icon {
    transform: scale(1.5); /* bold feel */
}

.logout-form {
    display: inline;
}

.logout-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

/* If your login button has hover styles */
.logout-btn:hover {
    text-decoration: underline;
}