/**
 * Theme Name:     Infinity Web Experts
 * Author:         Infinity Web Experts Team
 * Template:       twentytwentyfour
 * Text Domain:	   infinity-web-experts
 * Description:    Customize Child Theme by using Twenty Twenty Four Theme
 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');

.custom-social-icon { margin: 10px 0 !important;}

body,h1,h2,h3,h4,h5,h6,p,a,li,ul {font-family: Helvetica, sans-serif !important;line-height:1.2em !important;}

a {text-decoration:none !important;}

h1 {font-size:34px !important;font-weight:800 !important;}
h2 {font-size:28px !important;font-weight:800 !important;}
h3 {font-size:22px !important;font-weight:800 !important;}
h4 {font-size:20px !important;font-weight:800 !important;}
h5 {font-size:17px !important;font-weight:800 !important;}
p {font-size:17px !important;font-weight:500 !important;}

.has-global-padding {
    padding-right: 0px !important;
    padding-left: 0px !important;
}

@media only screen and (max-width: 767px) {
    button.wp-block-navigation__responsive-container-open {
        background: #822b00 !important;
        padding: 7px !important;
        border-radius: 10px !important;
        color: #fff !important;
    }
}



@media only screen and (max-width: 782px) {
    
    .custom-social-icon {
    justify-content: center !important;
}
    
    .wp-block-navigation__responsive-dialog {
    margin: 0 !important;
}
    
    .has-modal-open { 
        height:50% !important;
        border-radius:0 30px 30px 0 !important;
    }

div#modal-1 {
    background-color: #822b00 !important;
    text-align: left !important;
    justify-self: flex-start !important;
}

      button.wp-block-navigation__responsive-container-close {
        background-color: #fff !important;
        padding: 5px !important;
        border-radius: 15px 2px;
    }
    
    button.wp-block-navigation__responsive-container-open {
    background-color: #822b00;
    padding: 5px;
    border-radius: 15px 2px;
}
    
    ul.wp-block-navigation__container.has-text-color.has-contrast-color.is-responsive.items-justified-center.wp-block-navigation,li.wp-block-navigation-item.has-child.open-on-hover-click.wp-block-navigation-submenu {
    align-items: flex-start !important;
    text-align: left !important;
    align-content: start !important;
    justify-content: start !important;
    justify-items: start !important;
    justify-self: start !important;
}
}



/*
 * Animated CSS button
 * Copyright Alexander Bodin 2019-09-07
 *
 * Useage: .class {@import button($button-size, $hue, $sat);}
 */
 
 i.fa-solid.fa-phone {
    font-family: 'fontawesome';
}
 
.animated-button {
  background: linear-gradient(-30deg, #13131D 50%, #1c8cab 50%);
  padding: 10px 0px;
  margin: 0px;
  display: inline-block;
  border-radius: 5px;
  transform: translate(0%, 0%);
  overflow: hidden;
  color: #fff;
    font-weight: 800;
    font-size: 17px;
  letter-spacing: 2.5px;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0px 0px 8px 2px rgb(0 0 0 / 21%);
}

.animated-button::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #1c8cab;
  opacity: 0;
 transition: .2s opacity ease-in-out;
}

.animated-button:hover::before {
  opacity: 0.2;
}

.animated-button span {
  position: absolute;
}

.animated-button span:nth-child(1) {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: linear-gradient(to left, rgba(43, 8, 8, 0), #fff);
  animation: 2s animateTop linear infinite;
  border-radius:15px;
}

@keyframes animateTop {
  0% {
    transform: translateX(100%);
  }
  100% {
   transform: translateX(-100%);
  }
}

.animated-button span:nth-child(2) {
  top: 0px;
  right: 0px;
  height: 100%;
  width: 2px;
  background: linear-gradient(to top, rgba(43, 8, 8, 0), #fff);
  animation: 2s animateRight linear -1s infinite;
  border-radius:15px;
}

@keyframes animateRight {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(-100%);
  }
}

.animated-button span:nth-child(3) {
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
 background: linear-gradient(to right, rgba(43, 8, 8, 0), #fff);
 animation: 2s animateBottom linear infinite;
  border-radius:15px;
}

@keyframes animateBottom {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.animated-button span:nth-child(4) {
  top: 0px;
  left: 0px;
  height: 100%;
  width: 2px;
  background: linear-gradient(to bottom, rgba(43, 8, 8, 0), #fff);
  animation: 2s animateLeft linear -1s infinite;
  border-radius:15px;
}

@keyframes animateLeft {
  0% {
   transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}



.custom-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; 
}

.custom-list li {
    position: relative;
    background-color: #F7E5D9;
    padding: 10px;
    padding-left: 35px;
    border-radius: 10px;
}

ul.custom-list a {
    font-weight: 600 !important;
}

.custom-list li::before {
  content: "\f3c5"; 
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #822B00;
}

.custom-list li:hover::before {
  color: #822B00;
}

@media (max-width: 768px) {
  .custom-list {
    grid-template-columns: repeat(2, 1fr); 
  }
}