@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

/*ROOT*/
:root {
  --color-light: #fff;
  --color-dark: #000;
  --color-darkgreen: #1b584d;
  --color-lightgreen: #257f6e;
  --color-grey: #333333;
  --color-red: #CC0000;
  /*--color-red: #FF0000;*/
  /*#7F2536;*/
  --color-sharpyellow:  #FFD700;
  /*  font*/
  --font-montserrat: 'Montserrat', sans-serif;
}
body {
  font-family: var(--font-montserrat);
  padding-top: 56px; /* Adjust this value based on your navbar's height */

}
/*PRE DEFINES*/


.text-bold{
  font-weight: bold;
}
.text-green {
  color: var(--color-lightgreen);
}

.text-red {
  color: var(--color-red);
}

.f-10-d {
  color: var(--color-dark);
  font-size: 10px;
}

.f-12-d {
  color: var(--color-dark);
  font-size: 12px;
}

.f-12-r {
  color: var(--color-red);
  font-size: 12px;
}

.f-12-g {
  color: var(--color-lightgreen);
  font-size: 12px;
}

.f-14-d {
  color: var(--color-dark);
  font-size: 14px;
}

.f-14-b {
  color: var(--color-dark);
  font-size: 14px;
  font-weight: bold; /* Bold text for <th> elements */
}

.f-16-d {
  color: var(--color-dark);
  font-size: 16px;
}

.f-18-d {
  color: var(--color-dark);
  font-size: 18px;
}

/*HEADER*/
.set-whole-nav {
  background-color: var(--color-grey); 
}
.set-logo {
  color: var(--color-light);
  text-decoration: none;
  font-weight: 700;
  font-size: 20px;
  font-style: italic;
}
.set-logo-span {
  color: white;
}
/*BANNER*/
.carousel-item {
  height: 30vh !important;
}
.carousel-item img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.carousel-content h5 {
  font-size: 2rem;
}
.carousel-content p {
  font-size: 16px;
}
.carousel-content a {
  display: inline-block;
  background-color: var(--color-red);
  padding: 12px 42px;
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  font-weight: 500;
  border-radius: 0px;
  transition: .3s;
  border: 2px solid var(--color-red);
}
.carousel-content a:hover {
  background-color: transparent;
  transition: .3s;
}
.carousel-inner {
  z-index: 0;
}

.carousel-caption{
  width:100%;
  height:100%;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,0.5);
}

/*BUTTONS*/

.option-button {
    height:100%;
}

.media-object {
    height: 100px;
}


.set-btn-lightgreen {
  background-color: var(--color-lightgreen);  
  /*height: 80px;*/
  padding: 10px 10px;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
  border-radius: 0px;
  transition: .3s;
  border: 2px solid var(--color-lightgreen);
}
.set-btn-lightgreen:hover {
  background-color: transparent;
  color: var(--color-lightgreen);
  transition: .3s;
}

.set-btn-grey {
  background-color: var(--color-grey);  
  /*height: 80px;*/
  padding: 10px 10px;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
  border-radius: 0px;
  transition: .3s;
  border: 2px solid var(--color-grey);  
}
.set-btn-grey:hover {
  background-color: transparent;
  color: var(--color-grey);  
  transition: .3s;
}

.set-btn-red {
  background-color: var(--color-red);
  /*height: 80px;*/
  padding: 10px 10px;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
  border-radius: 0px;
  transition: .3s;
  border: 2px solid var(--color-red);
}
.set-btn-red:hover {
  background-color: transparent;
  color: var(--color-red);
  transition: .3s;
}



.set-btn-red-narrow {
  background-color: var(--color-red);
  /*height: 80px;*/
  padding: 5px 5px;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
  border-radius: 0px;
  transition: .3s;
  border: 2px solid var(--color-red);
}
.set-btn-red-narrow:hover {
  background-color: transparent;
  color: var(--color-red);
  transition: .3s;
}



.set-btn-green-narrow {
  background-color: var(--color-lightgreen);
  /*height: 80px;*/
  padding: 5px 5px;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
  border-radius: 0px;
  transition: .3s;
  border: 2px solid var(--color-lightgreen);
}
.set-btn-red-narrow:hover {
  background-color: transparent;
  color: var(--color-lightgreen);
  transition: .3s;
}



.set-btn-small-red {
  background-color: var(--color-red);
  width: 150px; 
  padding: 2px 5px;
  color: #fff;
  font-size: 12px;
  text-decoration: none;
  /*font-weight: 100;*/
  border-radius: 0px;
  transition: .3s;
  border: 2px solid var(--color-red);
}
.set-btn-small-red:hover {
  background-color: var(--color-red);
  color: var(--color-light);
  transition: .3s;
}




.set-btn-small-green {
  background-color: var(--color-lightgreen);
  width: 150px; 
  padding: 2px 5px;
  color: #fff;
  font-size: 12px;
  text-decoration: none;
  /*font-weight: 100;*/
  border-radius: 0px;
  transition: .3s;
  border: 2px solid var(--color-lightgreen);
}
.set-btn-small-red:hover {
  background-color: var(--color-lightgreen);
  color: var(--color-light);
  transition: .3s;
}




.set-btn-small-light {
  background-color: var(--color-light);
  width: 150px; 
  padding: 2px 5px;
  color: var(--color-lightgreen);
  font-size: 12px;
  text-decoration: none;
  /*font-weight: 100;*/
  border-radius: 0px;
  transition: .3s;
  border: 2px solid var(--color-lightgreen);
}
.set-btn-small-light:hover {
  background-color: var(--color-lightgreen);
  color: var(--color-light);
  transition: .3s;
}




.help-button {
  background-color: gray;
  border: none;
  color: white;
  padding: 2px 2px;
  font-size: 12px;
}


.set-price-plus {
  background-color: #229954;
  color: white;
}

.set-price-minus {
  background-color: var(--color-red) !important;
  color: white;
}



.set-bg-red {
  background-color: var(--color-red) !important;
}

.set-bg-lightgreen {
  background-color: var(--color-lightgreen) !important;
}

.set-bg-lightgrey {
  background-color: lightslategrey;
}


.set-progress .progress, .set-progress .progress-stacked {
  border-radius: 0px !important;
  height: 24px;
}
.update-sec strong {
  color: var(--color-darkgreen);
}
/*CARDS*/
.set-card-inner {
  /*border-bottom: 1px solid #dadada;*/
}
.set-card-content h3 {
  font-weight: 700;
  font-size: 22px;
}
.set-card-content h5 {
  color: var(--color-darkgreen);
  font-weight: 600;
  font-size: 15px;
}
ul {
  list-style-type: square;
}
.f-15px {
  font-size: 13px !important;
}
footer {
  background-color: #1e1e1e;
}

.table-icon{
  height: 20px;
}

@media screen and (min-width: 768px) {
    table.table-price td,
    table.table-price th {
        white-space: nowrap; /* Apply nowrap style for desktop browsers */
        /* Add any additional desktop styles here */
    }
}


/* Set font size for DataTable headers */
.dataTables thead th {
    font-size: 12px; /* Change the font size as needed */
}

/* Set font size for DataTable body */
.dataTables tbody td {
    font-size: 12px; /* Change the font size as needed */
}

/* Set font size for DataTable pagination */
.dataTables_paginate {
    font-size: 12px; /* Change the font size as needed */
}


.red-table th {
    background-color: var(--color-red); /* Background color for all <th> elements */
    color: white; /* Text color for <th> elements */
    font-weight: bold; /* Bold text for <th> elements */
    border: 2px solid var(--color-red);
}


.green-table th {
    background-color: var(--color-lightgreen); /* Background color for both <th> and even rows of <td> elements */
    color: white; /* Text color for <th> elements */
    font-weight: bold; /* Bold text for <th> elements */  
    border: 2px solid var(--color-lightgreen);
}


.page-title-red {
  background-color: white;
  border-radius: 0px;
  padding: 20px 20px;
  color: var(--color-red);
  font-size: 20px;
  text-decoration: none;
  font-weight: 800;
  border-radius: 5px;
  transition: .3s;
  border: 2px solid var(--color-red);
}


.page-title-green {
  background-color: white;
  border-radius: 0px;
  padding: 20px 20px;
  color: var(--color-lightgreen);
  font-size: 20px;
  text-decoration: none;
  font-weight: 800;
  border-radius: 5px;
  transition: .3s;
  border: 2px solid var(--color-lightgreen);
}

.set-bg-green {
  background-color: var(--color-darkgreen);
  border-radius: 12px;
}





.navitemtext{
  margin-left: 2vw;
}

.navbar {
  z-index: 1050;  
  background-color: #333;
  top: 0;
  width: 100%;
}


.nav-link:hover {
  background-color: red;
}

.dropdown-item:hover {
  background-color: red;
}





   .product-grid {
        display: flex;
        flex-wrap: wrap; /* Allow items to wrap to the next line */
        justify-content: space-between; /* Distribute space between items */
    }

    .product-item {
        flex: 0 0 calc(33.33% - 20px); /* 3 items per row on desktop */
        margin: 10px; /* Space between items */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for depth */
        text-align: center; /* Center text */
        border-radius: 5px; /* Optional: Rounded corners */
        overflow: hidden; /* Contain rounded corners */
        background-color: #fff; /* Optional: Background color */
    }

    .product-item img {
        max-width: 100%; /* Make image responsive */
        height: auto; /* Maintain aspect ratio */
    }

    @media (max-width: 768px) {
        .product-item {
            flex: 0 0 100%; /* 1 item per row on mobile */
        }
    }