*{
padding: 0;
margin: 0;
box-sizing: border-box;
overflow-x: hidden;
}
html{
scroll-behavior: smooth;
}


nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

nav ul{
    display: flex;
    list-style: none;
    text-decoration: none;
    
    

} 


nav ul li a{ 
    justify-content: center;
    align-items: center; 
    color: #ff00aa !important;
    text-decoration: none;
    font-size: 24px;
    display: inline;
    font-weight: bold;
    
}

.nav-button{
    background-color: transparent !important;
    border-color: #ff00aa !important;
    color: #ff00aa !important;   
}
.nav-button:hover{
    background-color:#ff00aa !important;
    color: white !important; 
    cursor: pointer;
    transition: 1s ease-in;  
}


.nav-container{
    justify-content: center;
    align-items: center;
    justify-items: center;
}

#closemenu{
    display: none;
}

#icon{
    display: none;
}

    
.logo{
    /* position: relative; */
    /* top: 1em; */
    /* margin: 0 .5em; */
    /* display: inline; */
    font-size: 40px !important;
    font-family: 'Rubik Gemstones';
}


.hero-text h6 {
display: inline-block;
align-items: center;
font-size: 25px;
padding-bottom: 1em;
background: #40E0D0;
background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0); 
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color:transparent;
animation: fadeInLeft; 
animation-duration: 2s; 
}


.hero-text h5{
display: none;
}

.hero-text h4{
font-size: 30px;
}

.hero-text{
margin-bottom: 12em;
}

.hero-text p{
font-size: 18px;
}

.hero-section{
/* gap: 5em; */
/* display: flex; */
/* flex-direction: row; */
/* align-items: center; */
/* justify-content: center; */
}

.hero-section img{
width:600px;
height: 500px;
object-fit: cover;
}

.div-hero-img{
float:right;
margin-top: 7em;
}

.about-section img{
width: 600px;
height: 600px;
object-fit: cover;
border-top-left-radius:40px;
border-bottom-right-radius: 40px;
margin: 1em 2em;
}

.about-section{
background-color: rgb(248, 246, 246);
font-size: 14px;
}

.about-section p, h3{
text-align: center;
}

.about-section  h3{
display:block;
margin: 2rem .5rem;
animation: fadeInLeft; 
animation-duration: 2s;  
font-size: 33px;
font-family: 'Rubik Gemstones';
background: #77635b;
background: linear-gradient(to right, #f5057d, hsl(60, 5%, 4%), #0af0ce); 
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color:transparent;
}

.about-section  p{
display: block;
font-size: 18px;
}

.about-section-traditional{
margin: 1em 2em;
}
.about-section-traditional p, h4{
text-align: center;
margin: 1em 2em;

}

.about-section-traditional h4{
font-size: 30px ;
font-family: 'Rubik Gemstones';
background: #40E0D0;
background: linear-gradient(to right, #220e18, #FF8C00, #0f1615); 
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color:transparent;
}        

.trad-img img{
margin: 0 3em;
object-fit: cover;
height: 700px;
width: 550px;
}

.trad-img .width{
    width:100%;
    object-fit:cover;
}

.div-container-last{
    background-image: url(../images/wendy\ 8.jpg);
    filter: brightness(40%);
    background-size: 100%;
    width: 100% !important;
    object-fit: cover;
    background-repeat: no-repeat;
    color: rgb(255, 255, 255);
}


.div-container-last div{
    margin-top: 1em 0 0 0;
    align-items: center;  
}

.contact-section{
    justify-content: center;
    align-items: center;
    /* background-color: rgb(49, 48, 48); */
    padding: 10px;
}

.contact-section h3{
display: inline-block;
color: #FF8C00;
font-size: 28px;
}



.contact-section button{
    padding: 10px 20px;
    background-color: #FF8C00;
    font-size: 14px;
    margin-bottom:2em;
}

.contact-section ion-icon{
    font-size: 25px;
    color: #FF8C00;
    justify-content: center;
    align-items: center;
    margin: 1em;
    
}

.div-container-last  button{
padding: 8px 40px;
background-color:  #FF8C00;
border: none;
margin-top: 2em;

}

.div-container-last h2{
padding: 6px;
color: #FF8C00;
}
.div-container-last p{
color: #FF8C00;
font-weight: bold;
/* margin-bottom: 3em; */
}

.testimonials h1{
font-size: 40px ;
font-family: 'Rubik Gemstones';
background: #40E0D0;
background: linear-gradient(to right, #f5f1f3, #FF8C00, #fafbfb); 
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color:transparent;
margin:0;
}
.testimonials  button{
display: inline-block;
background-color: #FF8C00;
padding: 30px 10px;
color: white;
border-color: none;
border: none;
}


.trad-button{
    text-align: center;
    background-color: #FF8C00;
    padding: 30px 40px;
    color: white;
    border-color: none;
    border: none; 
    animation:FadeIn 5s linear;
    animation-iteration-count: infinite;
    margin-bottom: 2em;
    border-radius: 50%;
}

.hero-text  ion-icon{
    color: rgb(255, 115, 0);
}

.contact-section-button{
    padding: 10px 50px;
    background-color: #ff00aa;
    font-size: 14px;
    margin-top: 6em;
    border: none;
    color: white;
}


.contact-section ion-icon{
    font-size: 25px;
    color: #FF8C00;
    justify-content: center;
    align-items: center;

    
}

.trad-img div{
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero-section img{
    width: 100%;
 }
 

 .div-container-last{
    background-image: url(../images/wendy\ 8.jpg);
    filter: brightness(40%);
    background-size: 100vh;
    background-repeat: no-repeat;
    color: rgb(255, 255, 255);
    height: 100vh;
    /* width: 100%; */
    object-fit: cover;
}

.testimonials{
    padding: 5px;
}

.div-container-last div{
    padding-left: 3px;
}

.contact-section{
    margin: 0;
}


/* CSS FOR SMALL SCREEN */

@media only screen and (max-width: 820px){
    /* #closemenu{
        display: block;
        font-size: 25px;
        color: white;
        position: absolute;
        left: 30px;
    } */
    /* #icon{
        display: block;
        font-size: 25px;
        position: absolute;
        left: 300px;
        top: 45px;
    } */

    nav ul{
       /* background: #ff00aa; */
       /* position: fixed;
       top: 0;
       right: -200px;
       width: 200px;
       text-align: center;
       height: 100vh;
       padding-top: 50px;
       z-index: 2;
       transition: right 0.5s;
       display: block; */
       /* color: black !important; */
    }
    
    ul{
        /* display: block; */
        /* gap: .1em; */
    }
    nav ul a{
        display: block;
        font-size: 14px;
        margin-top: 1em;
        color: rgb(22, 1, 1) !important;
    }

    nav li{
        display: block;
    }
    
    nav ul li a{
        /* justify-content: center;
        align-items: center; 
        padding: 14px;
        color: white;
        text-decoration: none;
        font-size: 18px;
        display: block; */
    }
/*     
    a:hover{
        color: rgb(223, 14, 14);
        border: transparent;
    } */
    /* nav ion-icon{
        position:absolute;
        top: 25px;
        left: 150px;
    } */
    .about-section-traditional h4{
        font-size: 20px !important;
    }
    .about-section  h3{
        font-size: 20px !important;
    }
  
    .div-hero-img img{
        object-fit: cover;
        width: 100%;
        margin-top: -9em;
        padding: 10px;
        
    }

    .div-hero-img{
        margin: 0;
        font-size: 14px;
    }

    .hero-section p{
        font-size: 17px;
    }

    .hero-section h6{
        font-size: 20px;
    }


    #home{
       display: flex;
       flex-direction: column;
       padding: 10px;
        
    }

    .hero-text{
       margin-top: 4em;
    }

    .contact-section-button{
       margin-left: 2em;
    }
    
    .about-section-img img{
        width: 100%;
        /* object-fit: cover;         */
}
    .trad-img img{
        width: 100%;
        /* object-fit: cover;         */
}

.trad-img img{
    width: 100%;
    /* object-fit: cover; */
}

}

@media only screen and (max-width: 1440px){

    .div-container-last{
        background-image: url(../images/wendy\ 8.jpg);
        filter: brightness(40%);
        background-size: cover;
        background-repeat: no-repeat;
        color: rgb(255, 255, 255);
        height: 100% !important;
        /* width: 100%; */
        object-fit: cover;
    }
   
   
}


/* @media only screen and (min-width: 1440px){
    nav ul li a{
        color: black !important;
    }
} */