body {
    margin: 0 auto;
    font-family: 'Source Serif Pro', 'Arial';
}

h1 {
    font-size: 50px;
    font-weight: 700;
}

h2 {
    font-size: 40px;
}

h3 {
    font-size: 30px;
}

p {
    color: rgb(65, 64, 64);
}

a {
    transition: .3s;
}

.micro {
    font-size: 10px;
    color: rgb(99, 98, 98);
    font-family: Georgia, 'Times New Roman', Times, serif
}

.span-style {
    color: rgb(157, 0, 255);
    font-size: 36px;
}

.profile-image {
    border-radius: 50%;
    width: 100%;
}

/* the class of h3 inside top or 1st section*/
.small-size {
    margin-bottom: -30px;
}

/* the class of p inside footer or 4th section*/
.margin-bottom {
    margin-top: -30px;
}

.default-color {
    color: #ee386f;
}

.top-banner {
    background-image: url("imgs/header_bg.png");
}

/* all background usage common property*/
.bg {
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: scroll;
    background-size: cover;
}

.top {
    max-width: 85%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    flex-flow: row wrap;
}

.logo {
    padding: 15px;
    margin-left: 35px;
}

.menu {
    padding: 10px;

}

.menu a {
    display: inline-block;
    text-decoration: none;
    margin-left: 5px;
    margin-top: 8px;
    padding: 10px;
    color: #1e94ef;
    font-weight: 500;
    text-transform: uppercase;
    transition: .3s;
    background-color: rgb(247, 253, 251);
    border-radius: 10px;


}

.menu-item-style {
    color: rgb(7, 219, 7);
}

.menu a:hover {
    color: rgb(47, 47, 47);
}

.menu-item-style:hover {
    color: #ef1e75;
}

/* all secton coverd by fixed size & max usage for responsive*/
.area,
.container {
    max-width: 95%;
    margin: 0 auto;

}

.area {
    overflow: hidden;
}

/*it's a class of 1st and 2nd section*/
.half-width {
    width: 42%;
    float: left;
    padding-left: 10px;
    margin-left: 15px;
    margin-top: 50px;
}

/* some special property use for 1st section*/
.top {
    margin-left: 80px;
}

.half-width img {
    width: 470px;
    height: 470px;
}

/* Anchor Text Property*/
.link-button {
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background-image: linear-gradient(to Right, #9e0aa9, rgb(247, 20, 88));
    padding: 10px 20px;
    border-radius: 5px;
    display: inline-block;
    margin: 10px;
    margin-bottom: 40px;
    transition: 1s;

}

.link-button:hover {
    color: rgb(248, 248, 248);
    background-image: linear-gradient(to Right, rgb(90, 14, 255), rgb(9, 228, 9));
}

/* 2nd section or biography content section started*/
.mid-banner {
    background-image: url("imgs/biography-bg.png");
}

/* 3rd section or work section started*/
.work-banner {
    background-image: url("imgs/latest-work-bg.png");
    display: flex;
    justify-content: space-around;
}

/*the class usage for text alignment and padding*/
.center {
    text-align: center;
    padding: 30px;
}

.padding {
    padding: 10px 10px;
}

.work {
    width: 32%;
    float: left;
    display: flex;
    flex-wrap: wrap;

}

.work img {
    width: 300px;
    height: 330px;
    margin-left: 35px;
    transition: 1s;
}

.certificate img {
    width: 340px;
    height: 250px;
}

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

.work p {
    text-align: center;
    margin-bottom: 30px;
    font-size: 15px;
    font-style: italic;
    color: rgb(1, 48, 1);
}

/* 4th section or footer section started*/
.footer-banner {
    background-image: url("imgs/footer-bg.png");
}

.email-me {
    background-image: linear-gradient(to Right, #EC4F90, rgb(240, 23, 113));
    width: 50%;
    margin: 0 auto;
    border-radius: 10px;
}

.email-me p {
    color: #fff;
}

.email-me a {
    color: #fff;
    font-size: 26px;
    text-decoration: none;
}

.social-text {
    text-transform: uppercase;
    text-align: center;
    padding: 10px;
    letter-spacing: 8px;
    margin-top: 60px;
    margin-bottom: -10px;
    color: #000;
}

.social {
    width: 100%;
    text-align: center;
}

.social a {
    display: inline-block;
}

.social a img {
    width: 50px;
    height: 50px;
    float: left;
    border-radius: 50%;
    padding: 10px;
    transition: 1s;
}

.social a img:hover {
    transform: rotate(360deg);
    background-color: rgb(244, 81, 157);
}

.footer-content {
    margin: 15px auto;
    width: 26%;
    text-transform: uppercase;
    padding-top: 25px;
    text-align: center;
    font-size: 13px;
    border-bottom: 0.5px solid #ddd;
}