/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/


.endlogoz {
    width: 200px;
}

.image img {
    max-width: 100%;
}

.modalDialogz {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

.modalDialogz:target {
    opacity: 1;
    pointer-events: auto;
}

.modalDialogz > div {
    width: 400px;
    max-width: 98%;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}

.closez {
    background: transparent;
    color: black !important;
    line-height: 40px;
    position: absolute;
    right: -3px;
    top: -4px;
    text-align: center;
    width: 30px;
    text-decoration: none;
}

.closez:hover {
    font-weight: bold !important;
}

/* Add focus style to the modal overlay */
.modalDialogz:focus {
    opacity: 1;
    pointer-events: auto;
}





/* Style for the first custom heading (checklistFirstHeading) */
.checklistFirstHeading {
    font-size: 1.2em; /* Slightly larger than the paragraph text */
    color: #0056b3; /* Blue color for the first heading */
    margin: 10px 0; /* Margin above and below the heading */
    font-weight: bold; /* Bold text */
}

/* Style for the second custom heading (checklistSecondHeading) */
.checklistSecondHeading {
    font-size: 1.1em; /* Slightly larger than the paragraph text */
    color: #d9534f; /* Red color for the second heading */
    margin: 10px 0; /* Margin above and below the heading */
    font-weight: bold; /* Bold text */
}

/* Style for the paragraph (checklistParagraph) */
.checklistParagraph {
    font-size: 1em; /* Default size */
    color: #333; /* Standard color for paragraph text */
    margin: 10px 0; /* Margin above and below the paragraph */
}

.productboxz {
    width: 300px;
    max-width: 100%; /* Ensures it doesn't overflow its container */
}

/* Styles for smartphones */
@media only screen and (max-width: 480px) {
    .productboxz {
        max-width: 75%; /* No more than 75% wide on smartphones */
    }
}


.tablezz {
    width: 100%;
    border-collapse: collapse;
}

.tablezz th, .tablezz td {
    padding: 8px;
}

.tablezz th:first-child, .tablezz td:first-child {
    text-align: center;
    width: 20%; /* Adjust the width as needed */
}

.tablezz th:not(:first-child), .tablezz td:not(:first-child) {
    width: auto; /* Adjust based on the number of columns and the first column width */
}

.tablezz tr {
    border-bottom: 1px solid black;
}

.tablezz tr:first-child {
    border-top: 2px solid silver;
}

.tablezz img {
    max-height: 120px;
    /*max-width:100%;*/
}


@media only screen and (max-width: 480px) {
    .tablezz img {
        max-width: 200px;
        height: auto; /* Maintain aspect ratio */
    }}

.modalDialog {    position: fixed;    font-family: Arial, Helvetica, sans-serif;    top: 0;    right: 0;    bottom: 0;    left: 0;    background: rgba(0, 0, 0, 0.8);    z-index: 99999;    opacity:0;    -webkit-transition: opacity 400ms ease-in;    -moz-transition: opacity 400ms ease-in;    transition: opacity 400ms ease-in;    pointer-events: none;}.modalDialog:target {    opacity:1;    pointer-events: auto;}.modalDialog > div {    width: 400px;  max-width:98%;  position: relative;    margin: 10% auto;    padding: 5px 20px 13px 20px;    border-radius: 10px;    background: #fff;    background: -moz-linear-gradient(#fff, #999);    background: -webkit-linear-gradient(#fff, #999);    background: -o-linear-gradient(#fff, #999);}    .close {    background: transparent;    color: black !important;   line-height: 40px;     position: absolute;  right: -3px; top:-4px;       text-align: center;        width: 30px;    text-decoration: none;       } .close:hover {  font-weight: bold !important; }

.tooltipz {position: relative;
    top: -0.5em; /* Adjusts the vertical position */
    font-size: 0.75em; /* Scales down the font size */
    
    background-color: #f0f0f0;
    padding: 2px 2px; /* Adds padding around the character */
    border-radius: 3px; /* Optional: Rounds the corners */
    display: inline-block; /* Ensures padding and background color are applied */
        border: 1px solid black; /* Adds a 1px solid black border around the tooltip */

}
.btnz {
  width: auto;
  height: auto;
 
    display: inline-block;
  padding: 1em 2em;
  font-family: 'Roboto', sans-serif;
  font-size: 1.2em;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 500;
  color: white;
   background: linear-gradient(135deg, #06bf94 0%, #0d7fd1 100%);
  //background-color: #fff;
  border: none;
  border-radius: 45px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  }

.btnz:hover {
  background-color: #ff5722;
      box-shadow: 0px 15px 20px rgba(119, 29, 0, 0.73);
  color: #fff;
  transform: translateY(-7px);
}




.az {
  text-align:center;  background: #D2D7D3;
  color: #222;
  display: inline-block;
  text-align:c enter;
  text-decoration: none;
  position: relative;
  width: 40px;
  height: 28px;
  margin: 0 2px;
  padding-top: 12px;
  -webkit-transition: all 1.5s;
  -moz-transition: all 1.5s;
  transition: all 1.5s;
}
.az.icon:before {
  font-family: 'FontAwesome', sans-serif;
  color: #fff;
  font-size: 20px;
}
.az.facebook:before {
content: '\f09a';
}
.az.twitter:before {
  content : '\f099';
}
.az.instagram:before {
    content : '\f16d';
}
.az.whatsapp:before {
    content : '\f232';
}
.az.pinterest:before {
    content : '\f0d2';
}
.az span {
  background:#fff;
  color:#222;
  font-size:14px;
  font-weight: bold;
  position:absolute;
  bottom:0;
  left:-25px;
  right:-25px;
  padding:5px 7px;
  visibility:hidden;
  opacity:0;
  -webkit-transition: all 1.4s;
  transition: all 1.4s;
}

/* bottom arrow */
.az span:before {
  content:'';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  position:absolute;
  bottom:-5px;
  left:40px;
}
.az:hover span {
  bottom:50px;
  visibility:visible;
  opacity:1;
}
/* colors */
.az.facebook:hover {
  background-color: #4183D7;
  color: #BFBFBF;
}
.az.facebook span {
  color:#4183D7;
}
.az.twitter:hover {
  background-color: #19B5FE;
  color: #fff;
}
.az.twitter span {
  color:#19B5FE;
}
.az.instagram:hover {
  background-color: #C13584;
  color: #fff;
}
.az.instagram span {
  color:#000;
}
.az.whatsapp:hover {
  background-color: #25D366;
  color: #fff;
}
.az.whatsapp span {
  color:#F62459;
}
.az.pinterest:hover {
  background-color: #F22613;
  color: #fff;
}
.az.pinterest span {
  color:#F22613;
}