#seasonSection{
position:relative;
padding:80px 8%;
color:white;
background-size:cover;
background-position:center;
background-image:url("../images/Winter.gif")
}

#seasonSection::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);
z-index:0;
}
.section-content{
position:relative;
z-index:2;
}

.title{
text-align:center;
font-size: 36px;
font-weight:600;
margin-bottom:5px;
margin-top:5px;
}
.season-buttons{
text-align:center;
margin-bottom:20px;
margin-top:0px;
}

.season-buttons button{
padding:10px 20px;
margin:5px;
border:none;
border-radius:6px;
cursor:pointer;
font-weight:600;
background:#000;
color:white;
}

.season-buttons button.active{
background:#e60023;
}
.container2{
display:flex;
gap:30px;
align-items:center;
}

.info-box{
width:320px;
padding:20px;
border-radius:12px;
background:rgba(255,255,255,0.25);
backdrop-filter:blur(10px);
}

.slider{
overflow:hidden;
width:100%;
}

.cards{
display:flex;
gap:25px;
transition:0.5s ease;
}

.card{
flex:0 0 calc((100% - 50px) / 3);
border-radius:12px;
overflow:hidden;
background:white;
color:#333;
box-shadow:0 6px 20px rgba(0,0,0,0.2);
transition:0.3s;
}

.card:hover{
transform:translateY(-6px);
}

.card img{
width:100%;
height:180px;
object-fit:cover;
transition:0.4s;
}

.card:hover img{
transform:scale(1.1);
}

.card-body{
padding:15px;
}

.card-title{
font-weight:600;
margin-bottom:8px;
}

.card-footer{
display:flex;
justify-content:space-between;
font-size:14px;
color:#666;
}

@media(max-width:900px){

.container2{
flex-direction:column;
}

.info-box{
width:100%;
}

.card{
flex:0 0 80%;
}
}

/*-----------card scroll--------------------------*/
.cards {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  cursor: grab;
}

.cards:active {
  cursor: grabbing;
}
/*=============attractive area==============*/
.cards::-webkit-scrollbar {
  height: 10px;
}

.cards::-webkit-scrollbar-track {
  background: #eee;
  border-radius: 10px;
}

.cards::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #43e97b, #38f9d7);
  border-radius: 10px;
}

.cards::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
}
/*==================== DISCOVER ====================*/
.discover {
  padding: 80px 20px;
  text-align: center;
}

.discover h2 {
  font-size: 36px;
  color: #153b4c;
  margin-bottom: 60px;
}

/* Grid Layout - Desktop & Mobile same */
.grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;  /* middle card slightly wider */
  grid-template-rows: auto;
  align-items: center;                    /* vertically center side cards */
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Cards */
.trumcard {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

/* Side cards (smaller) */
.trumcard.side {
  height: 380px;
}

/* Middle card (larger) */
.trumcard.middle {
  height: 460px;
}

/* Images */
.trumcard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

/* Overlay */
.trumcard-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: white;
  transition: opacity 0.5s ease;
  opacity: 0;
}

.trumcard-content h2 {
  margin: 0;
  font-size: 1.4rem;
}

.trumcard-content p {
  margin: 4px 0 0;
  font-size: 0.8rem;
  opacity: 0.8;
}

/* Hover Effects */
.trumcard:hover img {
  transform: scale(1.1);
}

.trumcard:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.trumcard:hover .trumcard-content {
  opacity: 1;
}

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

/* Tablet and Mobile - keep same 3-column layout as desktop */
@media (max-width: 1024px) {
  .grid {
      grid-template-columns: 1fr 1.2fr 1fr;  /* same as desktop */
      gap: 15px;
  }

  .trumcard.side {
      height: 320px;  /* slightly smaller on smaller screens */
  }

  .trumcard.middle {
      height: 400px;  /* slightly smaller */
  }
}

@media (max-width: 768px) {
  .grid {
      grid-template-columns: 1fr 1.2fr 1fr;  /* no stacking */
      gap: 10px;
  }

  .trumcard.side {
      height: 280px;
  }

  .trumcard.middle {
      height: 360px;
  }

  .discover h2 {
      font-size: 26px;
  }
}



/*=============== VIDEO ===============*/
.video__container {
    padding-bottom: 1rem;
  }
  
  .video__description {
    text-align: center;
    margin-bottom: 2.5rem;
  }
  
  .video__content {
    position: relative;
  }
  .video__content video {
      width: 100%;
      height: 100%;
      object-fit: cover; /* or use 'contain' if you don’t want cropping */
    }
  
  .video__button {
    position: absolute;
    right: 1rem;
    bottom: -1rem;
    padding: 1rem 1.5rem;
  }
  
  .video__button-icon {
    font-size: 1.2rem;
  }
/* For medium devices */
@media screen and (min-width: 568px) {
    .video__container {
      display: grid;
      grid-template-columns: .6fr;
      justify-content: center;
    }
}
/* For large devices */
@media screen and (min-width: 1024px) {
    .container10 {
      margin-left: auto;
      margin-right: auto;
    }
}
/*=============== BUTTONS ===============*/
.buttonvideo {
    display: inline-block;
    background-color: hsl(190, 64%, 22%);
    color: #FFF;
    padding: 1rem 2rem;
    font-weight: 600;
    transition: .3s;
  }
  
  .buttonvideo:hover {
    background-color:  hsl(190, 64%, 15%);
  }
  
  .button--flex {
    display: flex;
    align-items: center;
    column-gap: .25rem;
  }
  
  .button--link {
    background: none;
    padding: 0;
  }
  
  .button--link:hover {
    background: none;
  }
  
.buttonvideo {
  border: none;
  font-family: 'Open Sans', sans-serif;
  font-size: 2rem;
}

.buttonvideo {
  cursor: pointer;
}
.section__title {
  font-size:36px;
    margin-bottom:20px;
    color: hsl(190, 64%, 18%);
    text-align: center;
    text-transform: capitalize;
}