/* ===

.data {
    width: ;
    color: ;
    border: ;
    height: ;
    margin: ;
    padding: ;
    display: ;
    background: ;
    text-align: ;
    transition: ;
    box-shadow: ;
    align-items: ;
    border-radius: ;
    justify-content: ;
}

=== */

* {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    background: #F2F4F7;
}


img, 
.bio,
.bg-container::before,
.services,
.portfolio_layer,
.about,
.contact,
.contact_item table,
input[type="text"],
input[type="email"],
textarea
{
    width: 100%;
}

.btn_dgn, 
.navbar-brand,
.portfolio_layer,
#backToTop,
.contact_btn
{
    color: #FFF;
}

.primary_color,
.bi-list, 
.bio_item
.socialmedia_icons
.bx,
.service_items .bi,
.footer_items a
{
    color: #6F2CF5;

}

.bi-list,
.bio_item
.socialmedia_icons
.bx,
.contact_item
input[type="text"],
input[type="email"],
textarea 
{
    border: 1px solid #6F2CF5;
}

.bg-container::before,
.portfolio_layer {
    height: 100%;
}

.bio 
{
    height: 90vh;
}

.services,
.about,
.contact 
{
    height: 82vh;
}

.portfolio_items img,
.about_image img {
    height: 225px;
}

.btn_dgn,
#backToTop,
.contact_btn
{
    padding: 7.5px 15px;

}

.navbar-brand, 
.bio_item
.socialmedia_icons
.bx 
{
    padding: 5px;
}


.service_items,
.contact_item,
.footer
{
    padding: 15px;
}

.bio,
.services,
.portfolio_layer,
.about,
.contact
{
    display: flex;
}

.navbar,
.services,
.footer 
{
    background: #FFF;
}

.navbar-brand,
.btn_dgn,
#backToTop,
.contact_btn 
{
    background: #7E5BF5;
}

.bio_item,
.services,
.service_items,
.portfolio_layer,
.about,
.contact
{
    text-align: center;
}

.portfolio_items img,
.portfolio_layer
{
    transition: all 0.5s ease;
}

.service_items,
.portfolio_items,
.about_section,
.contact_item
{
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 
                0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.bio,
.services,
.portfolio_layer,
.about,
.contact
{
    align-items: center;
}

.bi-list, 
.bio_item
.socialmedia_icons
.bx,
#backToTop,
.contact_item
input[type="text"],
input[type="email"],
textarea,
.contact_btn
{
    border-radius: 5px;
}


.service_items,
.portfolio_items,
.about_section,
.contact_item
{
    border-radius: 10px;
}

.btn_dgn,
.navbar-brand
{
    border-radius: 50px;
}

.bg-container,
.about_image img 
{
    border-radius: 50%;
}

.bio,
.services,
.portfolio_layer,
.about,
.contact
{
    justify-content: center;
}

.bi-list:hover,
.btn_dgn:hover,
.navbar-brand:hover,
.bio_item
.socialmedia_icons
.bx:hover,
.contact_btn:hover
{
    color: #FFF;
    background: #5E00FF;
    transition: 0.5s ease;
}

a:hover 
{
    text-decoration: none;
}


/*-- Navbar section --*/

.nav-link 
{
    color: black;
}

.nav-link:hover 
{
    color: #5E00FF;
    border-bottom: 2px solid #5E00FF;
}

.bi-list 
{
    padding: 5px 10px;
}

/*-- Short about --*/

.bg-container {
    width: 550px;
    height: 550px;
    overflow: hidden;
    position: relative;
}

.bg-container::before {
    z-index: 0;
    content: '';
    position: absolute;
    background-size: cover;
    background-position: center;
    background-image: url('../admin/upload/webdata.jpg');
    animation: rotateBg 20s linear infinite;
}

.bio_item {
    z-index: 1;
    margin: 20% 10%;
    position: relative;
}

@keyframes rotateBg {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.bio_item
.socialmedia_icons
.bx 
{
    color: #6F2CF5;
    font-size: 20px;
} 

/*-- Service section --*/

.service_items 
{
    margin-bottom: 5%;
}

.service_items .bi 
{
    font-size: 35px !important;
}

/*-- Portfolio section --*/

.portfolio_items 
{
    overflow: hidden;
    position: relative;
    margin-bottom: 8.5%;
}

.portfolio_layer 
{
    left: 0;    
    bottom: 0;
    position: absolute;
    flex-direction: column;
    transform: translateY(100%);
    background: linear-gradient(#6F2CF5, rgba(0, 0, 0, .1));
}

.portfolio_items:hover img 
{
    transform: scale(1.1);
}

.portfolio_items:hover .portfolio_layer 
{
    transform: translateY(0);
}

/*-- about page design --*/

.about_section 
{
    padding: 5% 2.5%;
}

.about_image img 
{
    width: 225px;
    background: #F2F4F7;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.about_text 
{
    text-align: left;
}

/*-- Contact page design --*/


.contact_item table,
input[type="text"],
input[type="email"],
textarea 
{
    padding: 10px;
    margin: 5px 0;
}

.contact_item
input[type="text"],
input[type="email"],
textarea 
{
    background: transparent;

}

/*-- Footer section --*/
.footer_items a .bi 
{
    margin: 5px;
}

.footer_items a .bi:frist-child 
{
    margin-left: 0;
}

/* Back to Top Button Styling */
#backToTop 
{
    right: 1%;
    bottom: .5%;
    z-index: 99;
    border: none;
    outline: none;
    cursor: pointer;
    position: fixed;
    font-size: 18px;
}

#backToTop .bi 
{
    font-size: 20px !important;
}

@media (max-width: 576px) {

    .nav-link:hover
    {
        border: none;
    }

    .bio, .services, .about, .contact 
    {
        height: auto;
        margin: 25% 0;
        padding: 0;
    }

    .about_image {
        padding: 10px 0;
    }

    .about_image img {
        width: 100%;
        height: 300px;
        border-radius: 10px;
    }

}