:root{
  --main-site-color: #ff6600;
  --card-border-color: #ebebeb;
  /*--secondary-site-color:;*/
}

/* OVERRIDE TEMPLATE BTN STYLE */

.btn:hover {
  color: white;
  background-color: black;
}

/* END OVERRIDE */

.header {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 5px 8px -2px;
}

/*
<div header>
  <div logo-cont width: 15%>
    
  </div>
  <div menu-info-cont width: 80% display: flex flex-wrap: wrap>
    <div top-menu-text width: 100%>
      
    </div>
      <div bottom-menu width: 100%>
        <div cart-area>

      </div>
    </div>
    
  </div> 
  <div hamburg-menu width: 5%>

  </div>
</div>


*/

.custom-banner .mod-custom{ 
  display: flex; 
  position: relative; 
  align-items: center; 
  justify-content: flex-end; 
  height: 823px; 
  background-repeat: no-repeat;
  background-size: 60% auto;
} 

.custom-banner .mod-custom::before{ 
  content: ""; 
  position: absolute;    
  background-color: var(--main-site-color);
  clip-path: polygon(6% 0, 100% 0, 100% 100%, 7% 100%, 0% 62%);
  z-index: 0;
  width: 43%;
  height: 100%;
  }

.custom-banner .mod-custom > div{
  z-index: 1;
  padding: 11.5rem 0rem 11.5rem 10rem;
  width: 60%;
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 83% 100%, 10% 100%, 0 75%);
  background-image: url("https://el3.demosites.gr/images/pictures/banner-bg-pic.jpg");
  background-color: white;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  max-height: 100%;
}

.custom-banner .mod-custom h1{
  font-size: 50px;
}

.custom-banner .mod-custom > div > sup{
  font-size: 0.95rem;
}

/* CUSTOM BUTTON */
.btn{
  position: relative;
  background-color: black;
  color: white;
  font-weight: bold;
  padding: 13px 28px;
  border: unset;
  border-radius: unset;
  z-index: 1;
}

.btn::before{
  content: '';
  position: absolute;

  top: 0;
  bottom: 0;
  right: 0;
  left: 0;

  background-color: var(--main-site-color);
  z-index: -1;

  transition: transform 250ms ease-in-out;
  transform: scaleY(0);
  transform-origin: bottom;
}

.btn:hover::before,
.btn:focus::before{
  transform: scaleY(1);
}

/* CUSTOM CARDS - ICON BOXES */
.icon-boxes{
  position: relative;
  width: auto;
  height: 18.5rem;
  border: 1px solid var(--card-border-color);
  padding: 3.688rem;
  font-family: sans-serif;
  font-weight: unset;

  z-index: 1;
}

.icon-boxes::before{
  content: '';
  position: absolute;

  top: 0;
  bottom: 0;
  right: 0;
  left: 0;

  background: radial-gradient(circle at 15% top,rgba(255, 102, 0, 0.5) 4%, rgba(255, 255, 255, 0) 42%);
  border: 1px solid var(--main-site-color);

  z-index: -1;
  opacity: 0;

  transition: opacity 250ms ease-in-out, background 250ms ease-in-out;
}

.icon-boxes:hover::before
{
  opacity: 1;
}


.card-header{
  font-size: 3.7rem;
  font-weight: bold;
  border-bottom: 1px solid var(--card-border-color);
  padding-bottom: 1rem;

  transition: border-bottom-color 250ms ease-in-out;
}

.icon-boxes:hover .card-header{
  border-bottom-color: var(--main-site-color);
}

.card-sub-header{
  font-size: 1.7rem;
  font-weight: 500;
  padding-top: 1.4rem;
}

.card-desc{
  margin-top: 0.625rem;
  margin-bottom: unset;

  color: #8a8888;
}


.container-footer{
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 1652px) {
  .custom-banner .mod-custom{ 
  background-size: auto 100%;
} 

@media screen and (max-width: 768px) {
  .custom-banner .mod-custom{ 
    display: flex; 
    position: relative; 
    align-items: center; 
    justify-content: center; 
    background-repeat: no-repeat;
    background-size: auto;
} 
  
.custom-banner .mod-custom > div{
    padding: 6rem 4rem;
    text-align: left;
    width: auto;
    background-image: url("https://el3.demosites.gr/images/pictures/banner-bg-pic.jpg");
    background-color: white;
    clip-path: none;
    opacity: 0.95;
    border-radius: 3rem;
}

.custom-banner .mod-custom::before{ 
    content: ""; 
    position: absolute;    
    background-color: var(--main-site-color);
    clip-path: polygon(40% 90%, 60% 90%, 100% 100%, 0 100%);
    width: 100%;
  }
  
}