.hero{
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--section);
    position: relative;
    /* border: solid 2px red; */
    height: 30.75rem;
    
}
/* HERO SECTION  */

.hexs{
display:flex;
--s: 6rem;  /* size  */
--m: 4px;    /* margin */
--f: calc(1.732 * var(--s) + 4 * var(--m)  - 1px);
}
.hero-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    font-family:var(--desc-h);
    color: var(--dark-teal);
}

.hex-container {
font-size: 0;
filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.25)) drop-shadow(-3px -3px 1px #ffffff);



}
body{
background-color: var(--light-gray);
}
.hex-container div {
width: var(--s);
margin: var(--m);
height: calc(var(--s)*1.1547); 
display: inline-block;
font-size:initial;
clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
background: var(--light-gray);
margin-bottom: calc(var(--m) - var(--s)*0.2885); 
border-radius: 20%;

}
.hex-container::before {
    content: "";
    width: calc(var(--s) / 2 + var(--m));
    float: left;
    height: 120%;
    shape-outside: repeating-linear-gradient(
      #0000 0 calc(var(--f) - 3px),
      #000 0 var(--f)
    );
  }


.hex-container::before {
content: "";
width: calc(var(--s)/2 + var(--m));
float: left;
height: 120%;
shape-outside: repeating-linear-gradient(     
           #0000 0 calc(var(--f) - 3px),      
           #000  0 var(--f));
}
@keyframes fadeHideShow {
0%, 100% {
opacity: 0
}
50% {
opacity: 1;
}
}

/* PROJECT CONTAINER  */
.project-container{
    grid-column: span 12;
    display: flex;
    flex-direction: column;
    gap: var( --gap-50);
    justify-content: center;
    align-items: center;
}
.p-card-container{
    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var( --gap-32);
}

/* P-CARD  */
.p-card{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--gap-card); 
    border-radius: var(--card);
    background-color: var(--color-gray-200);

    padding: var(--gap-32);
    box-sizing: border-box;   
    flex-basis: calc(50% - 1rem);
}
.p-caed-neumorphic{
    box-shadow: var(--beumorphic-v2);
    animation: neumorphicEffect 1s ease-in-out forwards;
}

@keyframes neumorphicEffect {
    from {
        box-shadow: none;
    }
    to {
        box-shadow:var(--beumorphic-v2);
    }
}


.p-card h3{
 color: var(--dark-teal);
}
.p-card-img-containier{
    width: 100%;
    overflow: hidden;
}
.p-card-detail{
    display: flex;
    justify-content: space-between;
}

.p-card-btn{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: var(--color-whitesmoke-100);
    box-shadow: 6px 8px 15px rgba(0, 0, 0, 0.15), -8px -6px 15px #fff;
    padding: 8px;
    border: none;
    color: var(--color-gold);
}
.p-card-detail-info{
    display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.p-card-detail-info p{
    font-size: var(--small);
    color: var(--persian-green);
}
.dividerLine{
    width: 32px;
    height: 1px;
    position: relative;
    background-color: var(--color-gray-100);
}
/* TESTIMONY  */
.testimony-container{
    grid-column: span 12;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 32px;

}
.testimony-header{

    grid-column: span 12;
    display: flex;
    justify-content: center;
}
.testimony-info{

    grid-column: 2 / span 10;
    border-radius: var(--card);
    background-color: var(--light-gray);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--gap-32);
    text-align: center;
    color: var(--body-text);
}
.splide{
    grid-column: span 12;
    
}
.splide__track{
    padding: var(--gap-50);
}
@media screen and (max-width: 780px){
    .hero{
        margin-top: var(--section);
        margin-bottom: unset;
        width: 80%;
    }
    h1{
        text-align: center;  
    }
    .hexs{
        display:flex;
        --s: 3rem;  /* size  */
        --m: 4px;    /* margin */
        --f: calc(1.732 * var(--s) + 4 * var(--m)  - 1px);
    }
    .hero-title {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        
        font-family:var(--desc-h);
        color: var(--dark-teal);
    }
}