#mainHeroDiv{
    padding: 10px 0px;
    display: flex;
    gap: 10px;
    background-image: url(/img/tradingPage/trading_white_backgrond.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#tradingInfoDiv{
    padding: 10px;
    width:70%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#heroTitle{
    text-align:center;
}
#tradingFormDiv{
    padding: 10px;
    width:30%;
    display:flex;
    justify-content:center;
    padding:10px;
    align-items: center;

}
#formDiv{
    padding:10px;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius:10px;
    display:flex;
    justify-content: center;
}
#trading-hero-illustrator{
    height: 300px;
    width:auto;
}
#heroImage{
    height: calc(100vh - 17vh);
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('/img/tradingPage/tradingHero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
 #heroImage h1 {
      display: none;
      text-align: center;
      font-size: 2.5rem;
      color: white;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
}
#heroImage h1.active {
    display: block;
    opacity: 1;
    animation: slideIn 1s ease-in-out forwards;
}
    /* Slide-in animation */
  @keyframes slideIn {
    0% {
      transform: translateX(-150%);
      opacity: 0;
    }
    100% {
      transform: translateX(-50%);
      opacity: 1;
    }
  }
  .infoCards {
    transition: box-shadow 0.2s ease; /* Make box-shadow transition smooth */
  }

  .infoCards:hover{
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition-delay: 0.1s;
    border-radius: 10px;
  }
  .infoDivOfTrade{
    display:flex;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: 5px;
    padding: 20px;
    transition: box-shadow 0.2s ease;
  }
  .infoDivOfTrade:hover{
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    transition-delay: 0.1s;
  }
  .infoOfTradingTextDiv{
    width: 70%;
  }
  .infoOfTradingImgDiv{
    width: 30%;
  }
#helpsImagesDiv{
    padding-top: 20px;
}
.helpDivs{
    width: 200px;
    text-align: center;
}
#planInfoAndTableDiv{
    /*height: 480px;*/
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
#ourPlansTableDiv{
    height : 450px;
    overflow: auto;
}
#ourServicesDivs{
    display: flex;
    gap: 20px;
    padding: 15px 50px;
}

#helpTextDiv{
    padding: 10px 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
}
thead th {
    position: sticky;
    top: 0;
    background-color: #f1f1f1;
    z-index: 1;
}
th, td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
}
.infoOfTradingImgDiv{
    display: flex;
    justify-content: center;
    align-items: center;
}
.myServiceOffItem{
    transition: box-shadow 0.2s ease;
}
.myServiceOffItem:hover{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    transition-delay: 0.1s;
}



/* Styles for Tablets */
@media (max-width: 1024px) and (min-width: 840px) {

}

@media (max-width: 900px) {

    #tradingInfoDiv{
        width: 60%;
    }
    #tradingFormDiv{
        width: 40%;
    }

      .infoOfTradingTextDiv{
        width: 60%;
      }
      .infoOfTradingImgDiv{
        width: 40%;
      }
}

@media (max-width: 840px) {

    #tradingInfoDiv{
      width: 50%;
    }
    #tradingFormDiv{
      width: 50%;
    }

      .infoOfTradingTextDiv{
        width: 50%;
      }
      .infoOfTradingImgDiv{
        width: 50%;
      }
}

@media (max-width: 768px) {

}

@media (max-width: 580px) {
    #mainHeroDiv{
        flex-direction: column;
    }
    .infoDivOfTrade{
        flex-direction: column;
    }
    #tradingInfoDiv{
      width: 100%;
    }
    #tradingFormDiv{
      width: 100%;
    }
      .infoOfTradingTextDiv{
        width: 100%;
      }
      .infoOfTradingImgDiv{
        width: 100%;
      }
      #ourPlansTableDiv{
          padding:0px 20px;
      }
}



@media (max-width: 480px) {

#heroImage{
    height: 200px;
}
.tracking-in-contract{
        font-size: x-large !important;
}

}

@media (max-width: 400px) {

}