body {
    font-family: "Titan One", sans-serif;
    background-color: #82eda6;
}

.home {
    background-color: #82eda6;
    overflow: hidden;
}

.bg-main {
    background-color: #82eda6;
}

.bg-second {
    background-color: #ffff94;
}

.btn-1 {
    background-color: #ffff94;


}

.ghost-icon-1
{
    width: 200px;
    transform: rotate(90deg);
    position: absolute;
    left: -5%;
    bottom: 0%;
    transition:transform 2s,opacity .5s;
    z-index: 333333;
    
}   
.ghost-icon-2
{
    width: 200px;
    
    position: absolute;
    right: 0%;
    bottom: 0%;
    transition:transform 2s,opacity .5s;
    
    z-index: 333333;
    transform: translateY(200px);
    
}
.ghost-icon-3
{
    width: 200px;
    
    position: absolute;
    right: 0%;
    bottom: 2%;
    transition:transform 2s,opacity .5s;
    transform: rotate(0deg) translateX(240px);
    z-index: 333333;
    
    
}
.ghost-icon-4
{
    width: 200px;
    
    position: absolute;
    left:0%;
    bottom: 1%;
    transition:transform 2s,opacity .5s;
    transform: rotate(45deg) ;
    z-index: 333333;
    
    
}

.ghost-icon-1:hover,.ghost-icon-2:hover,.ghost-icon-3:hover,.ghost-icon-4:hover
{
    opacity: 0;
}

nav .nav-item
{
    justify-content: space-between;
}

.btn-shadow {
    box-shadow: -5px 3px 1px #03594d;
}
.btn-shadow:hover {
    box-shadow: -4px 3px 0px #03594d;
}

.bg-melon
{
    background-color: #fccddc;
    background-attachment: fixed;
}

.btn-faqs {
    background-color: #f6bbfd;
}

.header {
    font-size: 100px;
    color: #03594d;


}

.font-color {
    color: #03594d
}

.font-s {
    font-family: "Lobster", sans-serif;

}

.img-1 {
    width: 22%;
    transform: rotate(-6deg) translateX(50px);
    z-index: 3;
    transition: 1s;
}

.img-2 {
    width: 20%;
    transform: rotate(0deg) translateX(-60px);
    z-index: 2;


    transition: 1s;
}

.img-3 {
    width: 15%;
    transform: rotate(-5deg) translateX(-100px);
    z-index: 1;

    left: 47%;
    transition: 1s;
}

.img-items:hover .img-1 {
    transform: rotate(-8deg) translateX(0px);
}

.img-items:hover .img-2 {
    transform: rotate(0deg) translateX(0px);
}

.img-items:hover .img-3 {
    transform: rotate(5deg) translateX(0px);
}

.header-2 {
    font-size: 100px;
}

.slider .item .item-1 {
    width: 20%;
    transform: rotate(-6deg) translateX(60px);
}

.slider .item .item-2 {
    width: 25%;
    transform: rotate(6deg);
}

.slider .item .item-3 {
    width: 25%;
    transform: rotate(-6deg) translateX(-60px);
}

.item .anim {
    transition: 1s;
}

.item .anim:hover {
    animation-name: slideranim;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transform: scale(1.1);
}

.face {
    background-color: #aefbff;
}

.eyes span {
    margin: 50px;
    width: 100px;
    height: 100px;
    display: inline-block;
    animation-name: eyeanim;
    animation-duration: 4s;
    background-color: #03594d;

    animation-iteration-count: infinite;
}

@keyframes eyeanim {

    0%,
    90%,
    100% {
        transform: scaleY(1);
    }

    92%,
    98% {
        transform: scaleY(0);
    }

}

.mouse span {
    border: #03594d 50px solid;
    border-color: #03594d #03594d #aefbff #aefbff;
    transform: rotate(135deg);

}

.right-icons .r-1 {
    position: absolute;
    left: -300px;
    top: 10%;
    width: 150px;

}

.right-icons .r-2 {
    position: absolute;
    left: -300px;
    top: 60%;
    width: 200px;
}

.left-icons .l-1 {
    position: absolute;
    right: -300px;
    top: 20%;
    width: 150px;
}

.left-icons .l-2 {
    position: absolute;
    right: -300px;
    top: 60%;
    width: 200px;
}

.iconanim {
    animation-name: iconAnim;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes iconAnim {
    0% {
        transform: translateX(4px) translateY(4px);
    }

    100% {
        transform: translateX(-4px) translateY(-4px);
    }
}




.g-icon {
    width: 80px;
    transform: rotate(6deg);
    padding: 10px;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.i-1 {
    background-color: orange;
}

.i-2 {
    background-color: #09c;
}

.i-3 {
    background-color: tomato;
}

.i-4 {
    background-color: rgb(122, 0, 204);
}


.g-icon:hover {
    transform: scale(1.2) rotate(-5deg);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.header-3
{
    color: #03594d;
    font-size: 200px;
}

.light
{
    transition: .5s;
    color: gray;
}
.light:hover
{
    color: #82eda6;
}

.mouse-2 span {
    border: #ffff94 50px solid;
    border-color: #03594d #03594d #ffff94 #ffff94;
    transform: rotate(135deg);

}

.main-slider
{
    z-index: -1;
    top: -10%;
}

@media(max-width:1024px)
{
    nav .n1
    {
        display: none;
    }
    nav .n3
    {
        display: none;
    }
    nav .nav-item
    {
        justify-content: center;
    }
    .header
    {
        font-size: 40px;
    }
    .header-2
    {
        font-size: 40px;
    }
    .img-1
    {
        width: 40%;
    }
    .img-2
    {
        width: 30%;
    }
    .img-3
    {
        width: 20%;
    }
    .slider .item .item-1 
    {
    width: 40%;
    }
    .slider .item .item-2 {
    width: 50%;
}
    .slider .item .item-2 {
    width: 30%;

}
    .face
    {
        padding: 80px;
    }

    .header-3
    {
        font-size: 40px;
    }

    .right-icons,.left-icons
    {
        display: none;
    }

    .ghost-icon-1
    {
        transform: rotate(180deg)translateX(-50%) translateY(-90%);
        bottom: 100%;
        right: 50%;
        
    }
    .ghost-icon-2,.ghost-icon-3,.ghost-icon-4
    {
        display: none;
    }
}