@font-face {
    font-family: 'centrano2-medium';
    src: url(fonts/CentraNo2-Medium.ttf);
}

@font-face {
    font-family: 'centrano2-light';
    src: url(fonts/CentraNo2-Light.ttf);
}

body {
    background-color: #ffefd1;
}
/*---------HEADER----------*/

.header {
   display: flex;
    background-color: #ffefd1 ;
    padding: 2%;
    justify-content: space-around;
    position: sticky;
    top:0;
    z-index: 1000;
}


.logo {
    width: 20%;
    height: auto;
    position: absolute;
    margin-top: -.8rem;
}


button {
    background-color: #ffefd1;
    font-family: 'centrano2-light';
    border-style: none;
    text-align: center;
    font-size: 1.2rem;
    margin-top: 5%;
}

/*-------LANDINGSITE------------*/

.intro {
    width: 100%;
}
.AHAD {
    background-color: #9d3c96;
    display:flex;

}

.mouths {
    display: flex;
    flex:33%;
    justify-content: space-between;
    padding:2%;
    background-color: #9d3c96;
    position: relative;
}

.mouth1 {
    width:27%;
    height: 27%;
    margin-top: -57vh;
    margin-left:2%;
    transform: rotate(-20deg);
}

.mouth2 {
    width:27%;
    height: 27%;
    margin-top: -350px;
}

.mouth3 {
    width:27%;
    height: 27%;
    margin-top: -320px;
    margin-right:2%;
    transform: rotate(20deg);
}

#mouths1 {
    animation-name: mouths1;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-delay: 3s;
}

#mouths2 {
    animation-name: mouths2;
    animation-duration: 30s;
    animation-iteration-count: infinite;
}

#mouths3 {
    animation-name: mouths3;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-delay: 5s;
}

@keyframes mouths1 {
    0% {transform: rotate(-20deg);}
    25% {transform: rotate(25deg);}
    75% {transform: rotate(-65deg);}
    100% {transform: rotate(-20deg);}
}

@keyframes mouths2 {
    0% {transform: rotate(0deg);}
    25% {transform: rotate(45deg);}
    75% {transform: rotate(-45deg);}
    100% {transform: rotate(0deg);}
}

@keyframes mouths3 {
    0% {transform: rotate(20deg);}
    25% {transform: rotate(65deg);}
    75% {transform: rotate(-25deg);}
    100% {transform: rotate(20deg);}
}

/*--------FIRSTINFOSECTION-----------*/

.duo {
    display: flex;
}

.what {
    flex:50%;
    padding:6% 8% 6% 6%;
    justify-content: center; 
    background-color: #9d3c96;
}

.text1 {
    width:90%;
}

p {
    font-size: 1.5rem;
    font-family: 'centrano2-light';
}

.icons {
    background-color: #9d3c96;
    flex: 50%;
    padding-top: 5%;
    
}

.icon1 {
    width:20%;
    padding:20px;
    animation-name: shake;
    animation-duration: .5s;
}
@keyframes shake {
    0% {transform:scale(1.2) rotate(0deg);}
    25% {transform:scale(1.2) rotate(10deg);}
    50% {transform:scale(1.2) rotate(-10deg);}
    100% {transform:scale(1.2) rotate(0deg);}
}

.icon1:hover {
    width:20%;
    padding:20px;
    animation: shake .5s infinite;
}

/*---------CAROSEL----------*/

.carosel-text {
    justify-content: center;
    display: flex;
    background-color: #9d3c96;
}

h1 {
    font-family: 'centrano2-medium';
    color:white;
    background-color: #f97fb5;
    padding: 2%;
    border-radius: 80px;
    text-align: center;
    font-size: 4.1rem;
}

h1:hover {
    font-family: 'centrano2-medium';
    color:#f97fb5;
    background-color: white;
    padding: 2%;
    border-radius: 80px;
    text-align: center;
    font-size: 4.1rem;
}

.carousel-cell {
    max-width: 50%; /* full width */
    background-color: #9d3c96;
    counter-increment: carousel-cell;
}

.carousel-image{
    max-width: 100%;
    height: auto;
    border-width: 10px;
}

.carousel-cell:before {
    display: block;
    text-align: center;
    content: counter(carousel-cell);
    font-size: 0px;
    color: white;
}


/*---------SECONDINFOSECTION----------*/

.anatomy {
    background-color: #9d3c96;
    display: flex;
    justify-content: center;
}

h2 {
    font-family: 'centrano2-medium';
    color:#5bba47;
    background-color: white;
    padding: 2%;
    border-radius: 80px;
    text-align: center;
    font-size: 4.2rem;
}

h2:hover {
    font-family: 'centrano2-medium';
    color:white;
    background-color: #5bba47;
    padding: 2%;
    border-radius: 80px;
    text-align: center;
    font-size: 4.2rem;
}

.anat {
    width:90%;
}

.anatt {
    background-color: #9d3c96;
    display: flex;
    justify-content: center;
    padding:2% 2% 8% 2%;
}

.wave {
    width:100%;
    background-color: #5bba47;
    margin-bottom: -5rem;
}
/*---------LOWERADVERT----------*/

.lastadvert {
    background-color: #5bba47;
    display: flex;
    padding-top: 5%;
    align-items: flex-end;
}

.left {
    flex:60%;
    background-color: #5bba47;
    align-content: flex-end;
    
}

.handbags {
    width:80%;
    background-color: #5bba47;
    padding-left: 8%;
    align-content: flex-end;
    
}

.right {
    flex:40%;
    display:flex;
    background-color: #5bba47;
    flex-direction: column;
    
}

.top {
    flex:40%;
    justify-content: flex-start;
}

.bottom {
    flex:60%;
    padding:0% 15% 0 3%;
    justify-content: flex-start;
    
}

h3 {
    font-family: 'centrano2-medium';
    font-size: 4.7rem;
    line-height: 5.3rem;
    color:#d9e020;
    text-align: right;
}

.chips {
    width:80%;
    padding-right: 15%;
}


/*---------FOOTER----------*/

.footer {
    background-color: #ffefd1;
    display:flex;
}

.one {
    flex:50%;
    padding:3%;
}

h4 {
    font-family: 'centrano2-medium';
    font-size: 1.2rem;
}

#footer1 {
    font-size: 1rem;
    line-height: .2rem;
}

.two {
    flex:25%;
    padding:3%;
}

.three {
    flex:25%;
    padding:3%;
}

.laststuff {
    display: flex;
    background-color: #ffefd1;
    justify-content: left;
    padding:2%;
}

.socials1 {
    width: 100%;
    padding: 0 2% 2% 3%;
}

.a1 {
    margin:0;
    padding: .6%;
    font-size: 0;
    width:5%;
    height: 5%;
}

.socials {
    width: 5%;
}

.copyright {
    background-color: #ffefd1;
    padding: 3%;
    margin-top: -6rem;
}

#co {
    font-size:.8rem ;
}