body.index main {margin-top: 0;}
body.index header {background: rgba(255, 255, 255, 0);}
body.index header.scroll, body.index header:hover {background: white;}
body.index header .header-menu h6 {color: white !important;}
body.index header:hover .header-menu h6 {color: var(--phoenix-body-color) !important}
body.index header.scroll .header-menu h6 {color: var(--phoenix-body-color) !important;}
body.index header:not(.scroll, :hover) .login-btn {border-color: white !important; color: white;}
header .logo-normal, header:hover .logo-white, header.scroll .logo-white {display: none;}
header:hover .logo-normal, header.scroll .logo-normal, header .logo-white {display: block;}

.icon-nav-item {transition: all 0.3s;}
.icon-nav-item:hover {
    color: var(--phoenix-body-color);
    background: white !important;
    box-shadow: 0px 0px 15px rgb(0 0 0 / 18%)
}
.icon-nav-item .icon-container {background:none !important; transition:  all 0.2s; width: 45px; height: 50px;}
.icon-nav-item:hover .icon-container {color: var(--phoenix-primary) !important;}

.shipping-tracking input {padding-right: 3rem;}



.our-service .swiper-slide {
  width: 13.5rem;
  overflow: hidden;
  background-position: top;
  background-size: cover;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-direction: column;
  align-items: center;
  height: 17rem
}

.our-service .swiper-wrapper {
  -webkit-transition-timing-function:linear!important; 
  -o-transition-timing-function:linear!important;
  transition-timing-function:linear!important; 
}

.card-container {grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
.card-container > div {grid-column: 2 span;}
.card-container > :where(div:nth-child(2), div:nth-child(3) , div:nth-child(6)) {grid-column: 3 span !important;}
.card-container .swiper-button-next:after, .card-container .swiper-button-prev:after{font-size: 1rem !important;}
.card-container .swiper-button {height: auto; margin: 0;}
.card-container .sub {width: 85%}

.refer-group img {transition: all 0.3s;}
.refer-group:hover img {transform: scale(1.1);}

.link-group > a {transition: all 0.3s;}
.link-group a:hover {background: var(--phoenix-gray-200);}

@keyframes arrowSlideDown {
    0% { transform: rotate(45deg) translate(-22px, -22px); opacity: 0; }
    75% { transform: rotate(45deg) translate(-8px, -8px); opacity: 0.9;}
    100% { transform: rotate(45deg) translate(-8px, -8px); opacity: 0.1;}
  }

@media (max-height: 670px){
    .main-visual {min-height: 600px;}
  }

@media (max-width: 992px){
  .card-container > :where(div:nth-child(2), div:nth-child(3))  {grid-column: 5 span !important;}
  .card-container > div:nth-child(1)  {grid-column: 1/3}
  .card-container > div:nth-child(2)  {grid-row: 1 / 2;}
  .card-container > div:nth-child(4)  {grid-row: 2 / 3; grid-column: 3 / 6;}
  body.index header:not(.scroll.on, :hover ) .header-menu h6 {color: var(--phoenix-body-color) !important;}
}

@media (max-width: 576px){
  .card-container {grid-template-columns: 1fr;}
  .card-container > div {grid-column: 1/2 !important;}
.card-container .sub {width: 80%}

}