*{
    padding: 0;
    margin: 0;
    box-sizing:border-box ;
    text-transform: capitalize;
}
:root{
    --primary-clr:rgb(255, 0, 0);
    --secondary-clr:rgba(245, 245, 245, 0.785);
    --third-clr:black;
}
html,body{
    height: 100%;
    width: 100%;
    /* font-family: 'Bebas Neue', sans-serif; */
    /* font-family: 'Poppins', sans-serif; */
    font-family: 'Titillium Web', sans-serif;
    background-color: #737375;
}
/* top styling starts here  */
#top{
    min-height: 60vh;
    width: 100%;
    background: url(https://images.unsplash.com/photo-1534308143481-c55f00be8bd7?q=80&w=1930&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    background-position: center;
    filter: grayscale(1);
    background-size: cover;
    color: var(--third-clr);
}
.logo{
    min-height: 20vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 5%;
}
.logo i{
    color: white;
    text-transform: capitalize;
    letter-spacing: 3px;
    cursor: pointer;
    font-size: 1.6em;
}
.logo .fnx{
    color: var(--secondary-clr);
}
.logo span{
    color: var(--secondary-clr);
    font-size: 35px;
    padding-left: 10px;
    font-size: 20px;
    cursor: default;
}
.top-rgt i{
    padding-right: 20px;
}

.upper-bottom{
    min-height: 40vh;
    color: var(--secondary-clr);
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.list{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.info{
    width: 35%;
}

.info p:nth-child(odd){
    font-size: 1.5rem;
    text-transform: capitalize;
}
.info p:nth-child(even){
    margin-top: 10px;
    font-size: 14px;
    text-transform: capitalize;
}
.upper-bottom h1{
    width: 30%;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 8px;
}
.social i{
    padding: 5px;
    font-size: 1.3em;
}
.about{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
}

/* bottom styling starts here  */
#bottom{
    min-height: 40vh;
    width: 100%;
    display: flex;
    
}
.bottom1{
    min-height: 40vh;
    min-height:inherit;
    width: 25%;
    background-image: url(https://images.unsplash.com/photo-1515789670901-80d41fd29a81?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    background-size: cover;
    background-position: center;
    display:flex ;
    justify-content: center;
    align-items: center;
    color:white;
    font-size: 3.9em;
}
.bottom1 i{
    cursor: pointer;
}
.bottom2{
    min-height: 40vh;
    width: 20%;
    min-height: inherit;
    background-color: var(--secondary-clr);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.bottom2 h5{
    font-size: 20px;
}
.bottom2 p{
padding-top: 16px;

}
.swipe{
    font-size: 1.8em;
    cursor: pointer;
}
.bottom3{
    min-height: 40vh;
    min-height:inherit;
    width: 25%;
    color:white;
    font-size: 25px;
}
.bottom3 .part1{
    height: 20vh;
    background-color:orangered  ;
    display:flex ;
    flex-direction: column;
    justify-content: space-around;
    align-items: start;
    padding-left:20px ;
}
.bottom3 h5{
    text-transform:uppercase ;
}
.bottom3 .part2{
    height: 20vh;
    background-image: url(https://images.unsplash.com/photo-1473691955023-da1c49c95c78?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    background-size: cover;
    background-position: center;
}
.bottom4{
    min-height: 40vh;
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    background: url(https://images.unsplash.com/photo-1683009427470-a36fee396389?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    background-position: center;
    background-size: cover;
    filter: grayscale(1);
}
.bottom4 h6{
    text-align: center;
    font-size: 20px;
    color: white;
    text-transform: uppercase;
    text-decoration: overline ;
    letter-spacing: 3px;
} 

/* transistions */
i{
    cursor: pointer;
}
.trans{
    /* font-size: 1.6em; */
    transition: all 800ms ease-in-out;
}
.trans:hover{
    font-size: 2.1em;    
    transition: all 800ms ease-in-out;
}