#home-page-tabs * {
    color: black!important;
}

#homepage-carousel .carousel-item {
    max-height: 35vh;
}
#home-page-tabs {
    padding-top: 1rem;
    padding-left: unset;
    padding-right: unset;
    flex-wrap: nowrap;
}
.carousel {
    padding: 0px !important;
}
.home-tab-list {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    height: 50vh;
    overflow-y: auto;
}
.home-tab-list::-webkit-scrollbar {
    width: 12px;
}
.home-tab-list::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.home-tab-list::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: var(--custom-darker-grey); 
    box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
.home-tab-list-item a {
    color: black;
    font-weight: 700;
    text-decoration: none;
}
a.home-tab-list-link {
    text-decoration: none;
    color: black;
    display: block;
    padding: 0.375rem;
    font-weight: 600;
}
a.home-tab-list-link:hover {
    background-color: var(--westech-green)!important;
    color: white!important;
}
.home-tab-button {
    text-transform: uppercase;
    font-weight: 600;
}
#home-page-tabs .nav-link.active {
    background-color: white;   
    border: 1px solid #ccc;
    border-bottom-color: white;
}
#home-page-tabs .nav-link {
    background-color: var(--bs-border-color);
}

#home-page-tabs .nav-link:not(.active):hover  {
    background-color: var(--custom-grey) !important;
    color: black !important;
    background-image: none !important;
}

.carousel-item img{ 
    height: 300px;
    object-fit: cover;
}
.carousel-indicators {
    margin-right: 30% !important;
    margin-left: 30% !important;
}
.products-grid-item {
    border: 3px solid transparent;
}
.products-grid-item:hover {
    border: 3px solid var(--custom-dark-grey);
}
.carousel-width {
    width: 50px !important;
}
.banner-imgtext-amt {
    margin: 0px 0;
    text-align: center;
}

.banner-imgtext-amt-1  {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: 10px;
}

.banner-imgtext-amt a {
    text-decoration: none;
    padding: 10px 20px;
    border: 1px solid black; /* Adjust color */
    border-radius: 5px;
    color: black; /* Adjust color */
    font-weight: bold;
    display: inline-block;
    margin-top: -10px;
}
.banner-imgtext-gpi {
    margin: 0px 0;
    text-align: center;
}
.banner-imgtext-gpi a {
    text-decoration: none;
    padding: 10px 20px; 
    border: 1px solid white; 
    border-radius: 5px; 
    color: white; 
    font-weight: bold;
    margin-top: -10px;
    display: inline-block; 
}
.banner-imgtext-gpi-1 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: 10px;
}
.banner-imgtext-dura {
    margin: 0px 0;
    text-align: center;
}
.banner-imgtext-dura a {
    text-decoration: none;
    padding: 10px 20px; 
    border: 1px solid white; 
    border-radius: 5px; 
    color: white; 
    font-weight: bold;
    margin-top: -10px;
    display: inline-block; 
}
.banner-imgtext-dura-1 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: 10px;
}
.banner-imgtext-reels {
    margin: 0px 0;
    text-align: center;
}
.banner-imgtext-amt-1 , .banner-imgtext-amt-2  {
    margin-bottom: 15px;
    margin-top: 10px;
}
.banner-imgtext-amt-2  {
    margin-top: -24px;
}

.banner-imgtext-dura-1 , .banner-imgtext-dura-2  {
    margin-bottom: 10px;    
    font-size: 22px;
    font-weight: bold;
}
.banner-imgtext-dura-2  {
    margin-top: -10px;
}
.banner-imgtext-reels-1 , .banner-imgtext-reels-2  {
    margin-bottom: 22px;
    font-size: x-large;
    font-weight: bolder;
}
.banner-imgtext-reels-2  {
    margin-top: -35px;
}
.bannerLink:hover {
    color: black;
    background-color: white;
  }
.banner-imgtext-reels a {
    text-decoration: none;
    padding: 10px 20px; 
    border: 1px solid white; 
    border-radius: 5px; 
    color: white; 
    font-weight: bold;
    margin-top: -10px;
    display: inline-block; 
}
@media only screen and (max-width: 767px) {
    .banner-imgtext-reels-1 , .banner-imgtext-reels-2  {
        display: inline-block;
        margin-bottom: 15px;
        margin-top: 10px;
    }
    .banner-imgtext-amt-2 {
       display: none;
    }
    .banner-imgtext-dura-2 {
        display: none;
    }
    .banner-imgtext-reels-1  {
        margin-bottom: 12px;
    }
    .carousel-indicators {
       margin-bottom: -2rem !important;
    }
    .banner-imgtext-amt a {
       color: white;
     }

     .bannerLink {
       background: black;
   
     }
     #homepage-carousel {
        background-color: #f5f5f5;
        margin-bottom: 25px;
        padding-bottom: 11px !important;
     }
     .navWarningText {
        margin-bottom: inherit;
     }
     #homepage-carousel .carousel-item {
        max-height: none !important; 
    }
   }

@media only screen and (min-width: 768px) {
    #home-page-tabs {
        justify-content: left!important;
    }
    .carousel-item img{ 
        height: unset;
        object-fit: unset;
    }
    .banner-imgtext-gpi {
        position: absolute;
        top: 92px;
        left: 179px;
        transform: translate(-50%, -50%);
        color: white;
        display: block;
        text-align: start;
        font-weight: unset;
    }
    .banner-imgtext-gpi a {
        text-decoration: none;
        padding: 10px 20px; 
        border: 1px solid white; 
        border-radius: 5px; 
        color: white; 
        font-weight: bold; 
        font-size: xx-small;
    }
    .banner-imgtext-gpi-1 {
        font-weight: bold;
        font-size: 1.5rem;
        margin-bottom: 5px;
    }
    .banner-imgtext-amt {
        position: absolute;
        top: 81px;
        left: 252px;
        transform: translate(-50%, -50%);
        color: black;
        display: block;
        text-align: start;
        font-weight: unset;
    }
    .banner-imgtext-amt a {
        text-decoration: none;
        padding: 10px 20px; 
        border: 1px solid black; 
        border-radius: 5px; 
        color: black; 
        font-weight: bold;
        font-size: xx-small; 
    }
    .banner-imgtext-amt-1 {
        font-weight: bold;
        color: gray;
        font-size: 23px;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .banner-imgtext-amt-2 {
        margin-top: -9px;
        margin-bottom: 10px;
        font-size: 12px;
    }
    .banner-imgtext-dura {
        position: absolute;
        top: 94px;
        left: 259px;
        transform: translate(-50%, -50%);
        color: black;
        display: block;
        text-align: start;
        font-weight: unset;
    }
    .banner-imgtext-dura a {
        text-decoration: none;
        padding: 10px 20px; 
        border: 1px solid black; 
        border-radius: 5px; 
        color: black; 
        font-weight: bold;
        font-size: xx-small;  
    }
    .banner-imgtext-dura-1 {
        font-size: 20px;
        color: #0071a7;
        padding-bottom: 0;
        margin-bottom: 7px;
    }
    .banner-imgtext-dura-2 {
        font-size: 36px;
        color: #0071a7;
        margin-top: -25px;
        margin-bottom: -6px;
    }
    .banner-imgtext-reels {
        position: absolute;
        top: 86px;
        left: 244px;
        transform: translate(-50%, -50%);
        color: black;
        display: block;
        text-align: start;
        font-weight: unset;
    }
    .banner-imgtext-reels a {
        text-decoration: none;
        padding: 10px 20px; 
        border: 1px solid black; 
        border-radius: 5px; 
        color: black; 
        font-weight: bold;
        font-size: xx-small; 
    }
    .banner-imgtext-reels-1 {
        font-size: 20px;
        padding-bottom: 0;
        margin-bottom: 0;
        color: #3b3a3a;
    }
    .banner-imgtext-reels-2 {
        font-size: 41px;
        margin-top: -19px;
        margin-bottom: -10px;
        font-weight: bold;
        color: #3b3a3a;
    }
    .bannerLink:hover {
        color: white;
        background-color: black;
      }
      .carousel-item .bannerLinkW:hover {
        color: black;
        background-color: white;
      }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {

    .home-tab-list {
        column-count: 3;
    }
}
/* Desktop CSS Changes */
@media only screen and (min-width: 992px) {
    .home-tab-list {
        column-count: 4;
    }
    .home-tab-list {
        padding-left: 0.375rem;
        padding-right: 0.375rem;
        height: unset;
        overflow-y: auto;
    }
    .banner-imgtext-gpi {
        position: absolute;
        top: 116px;
        left: 219px;
        transform: translate(-50%, -50%);
        color: white;
        display: block;
        text-align: start;
        font-weight: unset;
    }
    .banner-imgtext-gpi a {
        text-decoration: none;
        padding: 10px 20px; 
        border: 1px solid white; 
        border-radius: 5px; 
        color: white; 
        font-weight: bold; 
        font-size: small;
    }
    .banner-imgtext-gpi-1 {
        font-weight: bold;
        font-size: 1.8rem;
        margin-bottom: 5px;
    }
    .banner-imgtext-amt {
        position: absolute;
        top: 100px;
        left: 318px;
        transform: translate(-50%, -50%);
        color: black;
        display: block;
        text-align: start;
        font-weight: unset;
    }
    .banner-imgtext-amt a {
        text-decoration: none;
        padding: 10px 20px; 
        border: 1px solid black; 
        border-radius: 5px; 
        color: black; 
        font-weight: bold;
        font-size: small; 
    }
    .banner-imgtext-amt-1 {
        font-weight: bold;
        color: gray;
        font-size: 28px;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .banner-imgtext-amt-2 {
        margin-top: -9px;
        margin-bottom: 10px;
        font-size: 14px;
    }
    .banner-imgtext-dura {
        position: absolute;
        top: 120px;
        left: 333px;
        transform: translate(-50%, -50%);
        color: black;
        display: block;
        text-align: start;
        font-weight: unset;
    }
    .banner-imgtext-dura a {
        text-decoration: none;
        padding: 10px 20px; 
        border: 1px solid black; 
        border-radius: 5px; 
        color: black; 
        font-weight: bold;
        font-size: small;  
    }
    .banner-imgtext-dura-1 {
        font-size: 25px;
        color: #0071a7;
        padding-bottom: 0;
        margin-bottom: 7px;
    }
    .banner-imgtext-dura-2 {
        font-size: 49px;
        color: #0071a7;
        margin-top: -25px;
        margin-bottom: -6px;
    }
    .banner-imgtext-reels {
        position: absolute;
        top: 112px;
        left: 295px;
        transform: translate(-50%, -50%);
        color: black;
        display: block;
        text-align: start;
        font-weight: unset;
    }
    .banner-imgtext-reels a {
        text-decoration: none;
        padding: 10px 20px; 
        border: 1px solid black; 
        border-radius: 5px; 
        color: black; 
        font-weight: bold;
        font-size: small; 
    }
    .banner-imgtext-reels-1 {
        font-size: 23px;
        padding-bottom: 0;
        margin-bottom: 0;
        color: #3b3a3a;
    }
    .banner-imgtext-reels-2 {
        font-size: 45px;
        margin-top: -19px;
        margin-bottom: -2px;
        font-weight: bold;
        color: #3b3a3a;
    }
    .bannerLink:hover {
        color: white;
        background-color: black;
      }
      .carousel-item .bannerLinkW:hover {
        color: black;
        background-color: white;
      }
}
@media only screen and (min-width: 1400px){
/* Home Banner css */
.banner-imgtext-gpi {
    position: absolute;
    top: 152px;
    left: 304px;
    transform: translate(-50%, -50%);
    color: white;
}
.banner-imgtext-gpi a {
    text-decoration: none;
    padding: 10px 20px; 
    border: 1px solid white; 
    border-radius: 5px; 
    color: white; 
    font-weight: bold; 
}
.banner-imgtext-gpi-1 {
    font-weight: bold;
    font-size: 2.5rem;
}
.banner-imgtext-amt {
    position: absolute;
    top: 132px;
    left: 427px;
    transform: translate(-50%, -50%);
    color: black;
}
.banner-imgtext-amt a {
    text-decoration: none;
    padding: 10px 20px; 
    border: 1px solid black; 
    border-radius: 5px; 
    color: black; 
    font-weight: bold; 
}
.banner-imgtext-amt-1 {
    font-weight: bold;
    color: gray;
    font-size: 37px;
    padding-bottom: 0;
    margin-bottom: 0;
}
.banner-imgtext-amt-2 {
    margin-top: -9px;
    font-size: 18px;
}
.banner-imgtext-dura {
    position: absolute;
    top: 165px;
    left: 441px;
    transform: translate(-50%, -50%);
    color: black;
}
.banner-imgtext-dura a {
    text-decoration: none;
    padding: 10px 20px; 
    border: 1px solid black; 
    border-radius: 5px; 
    color: black; 
    font-weight: bold; 
}
.banner-imgtext-dura-1 {
    font-size: 32px;
    color: #0071a7 ;
    padding-bottom: 0;
    margin-bottom: 0;
}
.banner-imgtext-dura-2 {
    font-size: 64px;
    color: #0071a7 ;
    margin-top: -25px;
    margin-bottom: 0;
}
.banner-imgtext-reels {
    position: absolute;
    top: 156px;
    left: 413px;
    transform: translate(-50%, -50%);
    color: black;
}
.banner-imgtext-reels a {
    text-decoration: none;
    padding: 10px 20px; 
    border: 1px solid black; 
    border-radius: 5px; 
    color: black; 
    font-weight: bold; 
}
.banner-imgtext-reels-1 {
    font-size: 32px;
    padding-bottom: 0;
    margin-bottom: 0;
    color: #3b3a3a;
}
.banner-imgtext-reels-2 {
    font-size: 64px;
    margin-top: -25px;
    margin-bottom: 0;
    font-weight: bold;
    color: #3b3a3a;
}
.bannerLink:hover {
    color: white;
    background-color: black;
  }
  .carousel-item .bannerLinkW:hover {
    color: black;
    background-color: white;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px){
/* Home Banner css */
.carousel-item div.banner-imgtext-gpi {
    position: absolute;
    top: 142px;
    left: 296px;
    transform: translate(-50%, -50%);
    color: white;
}
.banner-imgtext-gpi a {
    text-decoration: none;
    padding: 10px 20px; 
    border: 1px solid white; 
    border-radius: 5px; 
    color: white; 
    font-weight: bold; 
}
.banner-imgtext-gpi-1 {
    font-weight: bold;
    font-size: 2.5rem;
}
.banner-imgtext-amt {
    position: absolute;
    top: 125px;
    left: 403px;
    transform: translate(-50%, -50%);
    color: black;
}
.banner-imgtext-amt a {
    text-decoration: none;
    padding: 10px 20px; 
    border: 1px solid black; 
    border-radius: 5px; 
    color: black; 
    font-weight: bold; 
}
.banner-imgtext-amt-1 {
    font-weight: bold;
    color: gray;
    font-size: 37px;
    padding-bottom: 0;
    margin-bottom: 0;
}
.banner-imgtext-amt-2 {
    margin-top: -9px;
}
.banner-imgtext-dura {
    position: absolute;
    top: 151px;
    left: 413px;
    transform: translate(-50%, -50%);
    color: black;
}
.banner-imgtext-dura a {
    text-decoration: none;
    padding: 10px 20px; 
    border: 1px solid black; 
    border-radius: 5px; 
    color: black; 
    font-weight: bold; 
}
.banner-imgtext-dura-1 {
    font-size: 32px;
    color: #0071a7 ;
    padding-bottom: 0;
    margin-bottom: 0;
}
.banner-imgtext-dura-2 {
    font-size: 64px;
    color: #0071a7 ;
    margin-top: -25px;
    margin-bottom: 0;
}
.banner-imgtext-reels {
    position: absolute;
    top: 141px;
    left: 384px;
    transform: translate(-50%, -50%);
    color: black;
}
.banner-imgtext-reels a {
    text-decoration: none;
    padding: 10px 20px; 
    border: 1px solid black; 
    border-radius: 5px; 
    color: black; 
    font-weight: bold; 
}
.banner-imgtext-reels-1 {
    font-size: 32px;
    padding-bottom: 0;
    margin-bottom: 0;
    color: #3b3a3a;
}
.banner-imgtext-reels-2 {
    font-size: 64px;
    margin-top: -25px;
    margin-bottom: 0;
    font-weight: bold;
    color: #3b3a3a;
}
.bannerLink:hover {
    color: white;
    background-color: black;
  }
  .carousel-item .bannerLinkW:hover {
    color: black;
    background-color: white;
  }
}