/* ****************************

             Footer

******************************* */

footer {

  background-color: var(--bg-toggle);

}



/* ===> FOOTER TOP ROW  */

footer .foot-top-row {

  padding-top: 3.5rem;

  padding-bottom: 2rem;

  display: grid;

  grid-template-columns: 1.5fr 1fr;

  gap: var(--gap-col);

}



footer .foot-top-row .col1 {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  gap: var(--gap-card);

}

footer .foot-top-row .col1 img.logoji {

  height: 3rem;

  width: auto;

}

footer .foot-top-row .col1 ul {

  margin: 0;

  padding: 0;

  list-style-type: none;

  display: flex;

  flex-wrap: wrap;

}

footer .foot-top-row .col1 ul > * {

  margin-top: 0.3rem;

}

footer .foot-top-row .col1 ul > *:not(:last-child) {

  margin-right: var(--gap-card);

}

footer .foot-top-row .col1 ul li a {

  color: #ebebeb;

  font-size: 0.8rem;

  font-weight: 400;

}



/* ===> Col -2  */

footer .foot-top-row .col2 h5 {

  color: #ebebeb;

  font-size: 1.25rem;

  font-weight: 500;

}



footer .foot-top-row .col2 h5 {

  color: #ebebeb;

  font-size: 1.25rem;

  font-weight: 500;

}



footer .foot-top-row .col2 p {

  color: #b7b7b7;

  font-size: 0.75rem;

  font-weight: 300;

}



footer .foot-top-row .col2 .my-links span {

  display: inline-block;

  margin: 0 0.3rem;

  color: #939393;

}

footer .foot-top-row .col2 .my-links a {

  color: var(--primary);

  font-size: 0.75rem;

  font-weight: 300;

}



/* ===> FOOTER ENDING ROW  */

footer .foot-end-row {

  display: flex;

  gap: var(--gap-col);

  justify-content: space-between;

  padding-top: 1.5rem;

  padding-bottom: 1.5rem;

  border-top: 1px solid #393939;

}



footer .foot-end-row .col1 {

  display: flex;

  align-items: center;

}



footer .foot-end-row .col1 p {

  color: rgb(230, 230, 230);

  font-size: 0.8rem;

  margin: 0;

  font-weight: 200;

}



footer .foot-end-row .col2 {

  display: flex;

  justify-content: flex-end;

  align-items: center;

  flex-shrink: 0;

}

footer .foot-end-row .col2 .social-icons-div a {

  color: #939393;

  border: 2px solid #939393;

}

footer .foot-end-row .col2 .social-icons-div a:hover {

  color: var(--primary);

  border: 2px solid var(--primary);

}



.empty-Foot {

  display: none;

}



@media (max-width: 800px) {

  footer {

    display: none;

  }



  .empty-Foot {

    display: block;

  }

}


.whatsapp-icon {
    position: fixed;
    bottom: 160px; /* Adjust this value to position above the back to top button */
    right: 20px; /* Adjust this value for horizontal positioning */
    background-color: #8dc63f; /* WhatsApp green color */
    color: white;
    border-radius: 50%;
    width: 60px; /* Size of the icon */
    height: 60px; /* Size of the icon */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000; /* Ensure it appears above other elements */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for color changes */
}

.whatsapp-icon i {
    font-size: 30px; /* Size of the WhatsApp icon */
}

/* Change color on hover */
.whatsapp-icon:hover {
    background-color: #128C7E; /* Darker green for hover */
    color: white; /* Keep the icon color white */
}