*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html, body{
    width: 100%;
    height: 100%;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
#main{
    width: 100%;
    height: 100%;
    position: relative;
}
#nav{
    width: 100%;
    height: 35px;
    position: absolute;
    z-index: 10;
    background-color: aliceblue;
    display: flex;
    align-items: center;
    padding-left: 20px;
}
#circle{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #3a383885;
    opacity: 0.6;
    margin-left: 8px;
}
#nav .redcircle{
    background-color: #fe3a04;
}
#maintop{
    width: 100%;
    min-height: 70vh;
    background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQI40GqwaZaheADo7afkAD1UE7ZWfhg6MZcFQ&s);
    background-position:  -50% 20%;
    background-size: cover;
    position: relative;
}
#overlay{
    width: 100%;
    min-height: inherit;
    background-color: #000000a1;
}

#part1{
    width: 100%;
    height: 50px;
    /* background-color: blueviolet; */
    position: absolute;
    top: 110px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 50px;
}
#elam1{
    width: 100px;
    height: 50px;
    /* background-color: red; */
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#elam2{
    width: 100px;
    height: 50px;
    /* background-color: red; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
}
#smalelem{
    width: 40px;
    height: 40px;
    /* background-color: black; */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
}
.ocircle{
    background-color: rgb(255, 77, 0);
    font-size:50px;
}
#menubtn{
    width: 40px;
    height: 40px;
    background-color: white;
    color: black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
}
#part2{
    width: 100%;
    height: 100px;
    /* background-color: aqua; */
    position: absolute;
    bottom: 45px;
    display: flex;
    justify-content: space-between;
}
#p2elem1{
    width: 30%;
    height: 100%;
    /* background-color: aquamarine; */
    color: #fff;
    font-size: 4vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
}
#p2elem2{
    width: 50%;
    height: 100%;
    /* background-color: blue; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 10px;
}
#threeparts{
    width: 30%;
    height: 100%;
    /* background-color: black; */
    color: #fff;
    padding: 15px 10px;
    font-weight: 300;
}
#threeparts h6{
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 8px;
}
.icons{
    display: flex;
    align-items: center;
}
#iconz{
    width: 25%;
    height: 60%;
    border-radius: 50%;
    /* background-color: blue; */
    display: flex;
    align-items: center;
    justify-content: center;
}

#mainbottom{
    width: 100%;
    height: 50%;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#bottomp1{
    width: 24%;
    height: 100%;
    /* background-color: blanchedalmond; */
}
.portionwhite{
    background-color: #fff;
    padding: 50px;
    font-size: 20px;
    padding-left: 60px;
}
.lightclr{
    opacity: .6;
    margin-bottom: 20px;
}
.minicontacticon{
    display: flex;
    margin-top: 60px;
    gap: 15px;
}
.contacticon{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #dadadab8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.videocontainer{
    background-color: #000;
}
#bottomp1 video{
    width: 100%;
    height: 100%;
    background-position: center;
}
.twoelems{
    width: 100%;
    height: 50%;
}
#elemred{
    background-color: #ff3901;
    color: #fff;
    padding: 30px;
}
#bottomp1 h4{
    margin-bottom: 15px;
    opacity: 0.8;
}
#bottomp1 p{
    opacity: 0.6;
}
#flowers{
    background-image: url(https://images.unsplash.com/photo-1673383855035-861620a82072?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8Y29sb3JmdWxsJTIwZmxvd2Vyc3xlbnwwfHwwfHx8MA%3D%3D);
    background-size: cover;
    background-position: center;
}
.portionblack{
    background-color: black;
    color: #fff;
    padding: 20px 30px;
}
#socialpblack{
    display: flex;
    align-content: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px;
}
#socialpblack h5{
    margin-bottom: 15px;
    font-size: 20px;
    opacity: 0.7;
    font-weight: 400;
}
.portionblack .minicirclelast{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* background-color: #ff3901; */
    overflow: hidden;
}
.minicirclelast img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    
}
.reddot{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #ff3901;
}
@media(max-width: 500px){
    #mainbottom{
        flex-direction: column;

    }
    #maintop{
       min-height: 90vh;
    }
    
    #part1{
        top: 70px;
    }
    #part2{
        flex-direction: column;
        align-items: flex-start;
        top: 200px;
        padding-left: 30px;
    }
    #p2elem2{
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        /* top: 200px; */
        padding-left: 10px;
        
    }
    #threeparts{
        width: 80%;
    }
    #overlay{
        flex-direction: column;
        align-items: center;
    }
    #bottomp1{
        width: 100%;
    }
    .portionwhite {
       padding:  50px 180px;
    }
    #socialpblack{
       padding-right:  140px;
       padding-left: 40px;

    }

    #elemred{
        display: flex;
        align-items: center;
        justify-content: space-around;
        /* min-height: 40vw; */
    }
    .redarea{
     min-height: 80vh;
    }
    
    #elemred{
        height: 30vh;
    }
    #flowers{
        height: 50vh;
    }
    .videocontainer{
        height: 50vh;
    }
    .portionwhite{
        min-height: 35vh;
        position: relative;
    }
    .lightclr{
        position: absolute;
        top: 10px;
        text-align: center;
    }
    .minicontacticon{
        position: absolute;
        bottom: 10px;
        text-align: center;
    }
    
}