@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,600;0,900;1,200;1,800&display=swap');


html {
  scroll-behavior: smooth;
}
body{
    font-family: 'Poppins', sans-serif;
    background-color: #f1faee;
    
}

/* section title */
.section-title--special{
    background-color: #1d35578c;
    color: #f1faee;
    padding: 0.5rem 2rem;
    clip-path: polygon(10% 0, 100% 0,90% 100%,0 100% );
}
/*end of section title */


/* preloader */
.preloader{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #f1faee;
    z-index: 1000;
}
.hidePreloader{
    display: none !important ;
}
/* end of preloader */
/* navbar */

.navbar{
    position: fixed;
    z-index: 1000;
    min-width: 100vw;
    background-color: #f1faee;
    border-bottom: 3px solid #457b9d;
}

.navbar-icon{
    font-size: 2rem;
    color: #457b9d;
    
}
.navbar-toggler{
    outline-color: #457b9d !important;

}
.nav-link{
    color: #1d3557;
    font-weight: 600;
}
.nav-icon{
    font-size: 1.6rem;
    color: #1d3557;
    padding: .2rem;
    text-decoration: none;
}
/* end of nav */

/* header */
#header{
   
    clip-path: polygon(0 0, 100% 0, 100% 91%, 75% 100%, 25% 100%, 0 91%);
    overflow: hidden;

   
}



.height-max{
     background:linear-gradient(183deg, rgba(2,0,36,1) 0%, rgba(238,121,157,0.1856092778908438) 100%), url(../img/header.jpg) center/cover fixed;
     min-height: 100vh ;
     animation-name: zoomin;
     animation-duration: 15s;
     animation-delay: 4s;
     animation-iteration-count: infinite;
   
}
@keyframes zoomin{
    0%{
    transform: scale(1);
    }
    50%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(1);
    }
}
.title-heading{
    background: #f1faee4f;
    

} 
.text-header{
    color:#f1faee;
    font-weight: 600;
    letter-spacing: 3px;
}
@media screen and (min-width: 768px){
    .title{
        font-size: 3rem;
    }
    @keyframes zoomin{
    0%{
    transform: scale(1);
    }
    50%{
        transform: scale(1.2) translateX(-5%);
    }
    100%{
        transform: scale(1);
    }
}
}
/* end of header */
/* skills */
.skills{
    padding-top: 5rem !important;
}
.skills-icon{
    font-size: 3rem;
    color: #e63946;
    background-color: #a8dadc;
    transition: all .3s;
}
.skills-icon:hover{
    color: #e63947c9;
}
.skills-underline{
    width: 4rem;
    height: 0.3rem;
    background-color: #457b9d;
    margin:  1rem auto;

}
/* end of skills */
/* inventory */
.inventory{
    padding-top: 5rem !important;

}
.inventory h5{
    background-color: #e63946;
    color: #f1faee;
    clip-path: polygon(15% 0,85% 0,100% 100%, 0 100%);
    transition: all .4s;
}
.inventory h5:hover{
    clip-path: polygon(0% 0,100% 0,100% 100%, 0 100%);

}
.card-footer{
    background-color: #1d3557;

}
.card-footer p{
    color: #f1faee;
}
.hidePhone{
    display: none;
}
/* end of inventory */
/* question */
.question{
    background:linear-gradient(170deg, rgba(2,0,36,1) 0%, rgba(98,104,193,0.47692580450148814) 100%), url(../img/question.jpg)center/cover no-repeat;
}
.question-grey{
    background-color: #f1faee81;
    border-radius: 10px;
   
   
}
.question-icon{
    font-size: 4rem;
    color: #1d3557;
    transition: all .4s;
}
.question-icon:hover{
    transform: translateY(10%);
}
.hart{
    color: #e63946;
}
/* end of question */
/* featured section */
.featured{
   padding-top: 5rem !important;
}
.featured-item{
    background: #a8dadc;
    border-radius: 5px;
    transition: all .4s;
    color: #457b9d;


}
.featured-icon{
    color: black;
}
.featured-item:hover{
    background: #a8dadca2;
    cursor: pointer;
    transform: scale(1.05);
    color:#1d3557;

}

.img-container{
    background-color: #1d3557;
    position: relative;
    overflow: hidden;
}
.featured-photo{
    transition: all .4s ease-in-out;
}
.img-container:hover .featured-photo{
    transform: scale(1.3);
    opacity: 0.3;
   

}
.featured-link{
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 3rem;
    opacity: 0;
    transition:  all .4s;
    transform: translate(-50%,-50%);
    color: #1d3557;
}
.img-container:hover .featured-link{
    opacity: 1;
    color: #457b9d;
}
.featured-link:hover{
     transform: translate(-50%,-50%) scale(1.5);
     color: #f1faee !important;
}
/* end of featured section */
/* footer */
.footer{
    background-color: #457b9d;
}
.footer-icon{
    font-size: 3rem;
    color: #1d3557;
    transition: all .4s;

}
.footer p{

}
/* end of footer */